[DREAM-813] Share anchored popover caret placement

frontend/package.json

@@ -110,6 +110,7 @@
     "@openproject/primer-view-components": "^0.91.1",
     "@openproject/reactivestates": "^3.0.1",
     "@openproject/stimulus-elements": "^0.2.0",
+    "@primer/behaviors": "^1.10.3",
     "@primer/css": "^22.1.0",
     "@primer/live-region-element": "^0.8.0",
     "@primer/primitives": "^11.5.1",

frontend/src/app/features/calendar/te-calendar/te-calendar-popover.spec.ts

@@ -0,0 +1,69 @@
+//-- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+import { render } from 'lit-html';
+import { within } from '@testing-library/dom';
+import { timeEntryPopoverHtml } from './te-calendar-popover';
+
+describe('timeEntryPopoverHtml', () => {
+  let host:HTMLElement;
+
+  beforeEach(() => {
+    host = document.createElement('div');
+  });
+
+  const rows = [{ label: 'Project', value: 'Demo' }, { label: 'Hours', value: '2h' }];
+
+  it('renders a hint popover anchored to the entry', () => {
+    render(timeEntryPopoverHtml('pop-1', 'anchor-1', rows, null), host);
+    const popover = host.querySelector('anchored-position')!;
+
+    expect(popover).toHaveAttribute('id', 'pop-1');
+    expect(popover).toHaveAttribute('anchor', 'anchor-1');
+    expect(popover).toHaveAttribute('popover', 'hint');
+    expect(popover).toHaveAttribute('role', 'dialog');
+    expect(popover).toHaveClass('op-anchored-popover--host');
+  });
+
+  it('lists every row as label and value', () => {
+    render(timeEntryPopoverHtml('pop-1', 'anchor-1', rows, null), host);
+    const entries = within(host).getAllByRole('listitem');
+
+    expect(entries).toHaveLength(2);
+    expect(entries[0]).toHaveTextContent('Project: Demo');
+    expect(entries[1]).toHaveTextContent('Hours: 2h');
+  });
+
+  it('renders the caret from the placement', () => {
+    render(timeEntryPopoverHtml('pop-1', 'anchor-1', rows, { side: 'right', offset: 20 }), host);
+    const message = host.querySelector<HTMLElement>('.Popover-message')!;
+
+    expect(message).toHaveClass('Popover-message--right');
+    expect(message.style.getPropertyValue('--op-anchored-popover-caret-offset')).toBe('20px');
+  });
+});

frontend/src/app/features/calendar/te-calendar/te-calendar-popover.ts

@@ -0,0 +1,69 @@
+//-- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+import { html } from 'lit-html';
+import type { TemplateResult } from 'lit-html';
+import { popoverMessage } from 'core-app/shared/components/anchored-popover/popover-message';
+import type { CaretPlacement } from 'core-app/shared/components/anchored-popover/caret-placement';
+
+export interface PopoverRow {
+  label:string;
+  value:string;
+}
+
+export function timeEntryPopoverHtml(
+  popoverId:string,
+  anchorId:string,
+  rows:PopoverRow[],
+  caret:CaretPlacement|null,
+):TemplateResult {
+  const list = html`
+    <ul class="list-style-none ml-0">
+      ${rows.map((row) => html`
+        <li class="te-calendar--popover-entry">
+          <span class="text-bold">${row.label}:</span>
+          <span>${row.value}</span>
+        </li>
+      `)}
+    </ul>
+  `;
+
+  return html`
+    <anchored-position
+      id=${popoverId}
+      class="op-anchored-popover--host te-calendar--popover"
+      role="dialog"
+      align="start"
+      anchor=${anchorId}
+      anchor-offset="spacious"
+      popover="hint"
+      side="outside-right">
+      ${popoverMessage(list, caret)}
+    </anchored-position>
+  `;
+}

frontend/src/app/features/calendar/te-calendar/te-calendar.component.sass

@@ -21,6 +21,10 @@ op-time-entries-calendar
       flex-basis: 165px
       flex-shrink: 0
 
+  .te-calendar--popover .Popover-message
+    padding: var(--base-size-8)
+    font-size: var(--text-body-size-small)
+
   .te-calendar--popover-entry
     @include text-shortener(false)
 

frontend/src/app/features/calendar/te-calendar/te-calendar.component.spec.ts

@@ -0,0 +1,135 @@
+//-- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FullCalendarModule } from '@fullcalendar/angular';
+import { StateService } from '@uirouter/core';
+import moment from 'moment';
+import { of } from 'rxjs';
+import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
+import { BrowserDetector } from 'core-app/core/browser/browser-detector.service';
+import { ConfigurationService } from 'core-app/core/config/configuration.service';
+import { TimezoneService } from 'core-app/core/datetime/timezone.service';
+import { WeekdayService } from 'core-app/core/days/weekday.service';
+import { I18nService } from 'core-app/core/i18n/i18n.service';
+import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
+import { SchemaCacheService } from 'core-app/core/schemas/schema-cache.service';
+import { DayResourceService } from 'core-app/core/state/days/day.service';
+import { States } from 'core-app/core/states/states.service';
+import { TurboRequestsService } from 'core-app/core/turbo/turbo-requests.service';
+import { HalResourceNotificationService } from 'core-app/features/hal/services/hal-resource-notification.service';
+import { OpCalendarService } from 'core-app/features/calendar/op-calendar.service';
+import { ColorsService } from 'core-app/shared/components/colors/colors.service';
+import { HalResourceEditingService } from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
+import { TimeEntryCalendarComponent } from './te-calendar.component';
+
+describe('TimeEntryCalendarComponent', () => {
+  let fixture:ComponentFixture<TimeEntryCalendarComponent>;
+  let element:HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TimeEntryCalendarComponent],
+      imports: [FullCalendarModule],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        { provide: I18nService, useValue: { locale: 'en', t: (key:string) => key, toNumber: (value:number) => `${value}` } },
+        { provide: ConfigurationService, useValue: { startOfWeek: () => 1, isTimezoneSet: () => false, timezone: () => 'UTC', dateFormatPresent: () => false } },
+        { provide: WeekdayService, useValue: { loadWeekdays: () => of([]), isNonWorkingDay: () => false } },
+        { provide: DayResourceService, useValue: { requireNonWorkingYears$: () => of([]) } },
+        { provide: ApiV3Service, useValue: { time_entries: { list: () => of({ elements: [], createTimeEntry: undefined }) } } },
+        {
+          provide: TimezoneService,
+          useValue: {
+            toHours: () => 1,
+            formattedDuration: () => '1h',
+            formattedISODate: (date:Date) => moment(date).format('YYYY-MM-DD'),
+          },
+        },
+        { provide: BrowserDetector, useValue: { isMobile: false } },
+        { provide: States, useValue: {} },
+        { provide: StateService, useValue: {} },
+        { provide: HalResourceNotificationService, useValue: {} },
+        { provide: SchemaCacheService, useValue: {} },
+        { provide: ColorsService, useValue: {} },
+      ],
+    })
+      .overrideComponent(TimeEntryCalendarComponent, {
+        set: {
+          providers: [
+            OpCalendarService,
+            { provide: HalResourceEditingService, useValue: {} },
+            { provide: TurboRequestsService, useValue: {} },
+            { provide: PathHelperService, useValue: {} },
+          ],
+        },
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(TimeEntryCalendarComponent);
+    fixture.componentRef.setInput('projectIdentifier', 'demo');
+    fixture.detectChanges();
+    element = fixture.nativeElement as HTMLElement;
+  });
+
+  const renderWeek = async (displayedDays:boolean[]) => {
+    fixture.componentRef.setInput('displayedDays', displayedDays);
+    await vi.waitUntil(() => {
+      fixture.detectChanges();
+      return element.querySelector('.fc-col-header-cell') !== null;
+    });
+  };
+
+  it('renders the calendar container', () => {
+    expect(element.querySelector('.te-calendar--container')).not.toBeNull();
+    expect(element.querySelector('full-calendar')).toBeNull();
+  });
+
+  it('renders a week grid once the displayed days are known', async () => {
+    await renderWeek([true, true, true, true, true, true, true]);
+    expect(element.querySelectorAll('.fc-col-header-cell.fc-day')).toHaveLength(7);
+  });
+
+  it('hides the days that are not displayed', async () => {
+    await renderWeek([true, true, true, true, true, false, false]);
+    expect(element.querySelectorAll('.fc-col-header-cell.fc-day')).toHaveLength(5);
+  });
+
+  it('closes an open entry popover when the window is resized', () => {
+    const popover = document.createElement('div');
+    popover.className = 'te-calendar--popover';
+    popover.setAttribute('popover', 'manual');
+    element.append(popover);
+    popover.showPopover();
+
+    window.dispatchEvent(new Event('resize'));
+
+    expect(popover.matches(':popover-open')).toBe(false);
+  });
+});