Merge pull request #175 from nordeck/nic/feat/PB-3391-Meeting-expande…

…d-view Meeting expanded view
nordeck · Jul 6, 2023 · 882dada · 882dada
2 parents aed17af + 63634c5
commit 882dada
Show file tree

Hide file tree

Showing 42 changed files with 3,556 additions and 113 deletions.
diff --git a/.changeset/mighty-dolls-occur.md b/.changeset/mighty-dolls-occur.md
@@ -0,0 +1,5 @@
+---
+'@nordeck/matrix-meetings-widget': minor
+---
+
+Add meeting expanded details view
diff --git a/charts/matrix-meetings/values.dev.yaml.tpl b/charts/matrix-meetings/values.dev.yaml.tpl
@@ -4,6 +4,8 @@ matrix-meetings-widget:
   env:
     - name: REACT_APP_BOT_USER_ID
       value: '@meetings-bot:synapse.dev.nordeck.systems'
+    - name: REACT_APP_DISPLAY_ALL_MEETINGS
+      value: 'true'
 
 matrix-meetings-bot:
   settings:

diff --git a/e2e/src/accessibility.spec.ts b/e2e/src/accessibility.spec.ts
@@ -173,7 +173,7 @@ test.describe('Accessibility', () => {
     const meetingDetails =
       await aliceMeetingsWidgetPage.openCalendarEventDetails('My Meeting');
 
-    await meetingDetails.meetingCard.meetingTitleText.waitFor();
+    await meetingDetails.meetingDetails.meetingTitleText.waitFor();
 
     expect(await runAxeAnalysis(alicePage, 'NeoDateFix')).toMatchSnapshot();
   });

diff --git a/e2e/src/calendarView.spec.ts b/e2e/src/calendarView.spec.ts
@@ -46,15 +46,15 @@ test.describe('Calendar View', () => {
 
     const meetingDetails =
       await aliceMeetingsWidgetPage.openCalendarEventDetails('My Meeting');
-    await expect(meetingDetails.meetingCard.meetingTitleText).toHaveText(
+    await expect(meetingDetails.meetingDetails.meetingTitleText).toHaveText(
       'My Meeting'
     );
-    await expect(meetingDetails.meetingCard.meetingDescriptionText).toHaveText(
-      'My Description'
-    );
+    await expect(
+      meetingDetails.meetingDetails.meetingDescriptionText
+    ).toHaveText('My Description');
     await meetingDetails.close();
 
-    await expect(meetingDetails.meetingCard.card).toBeHidden();
+    await expect(meetingDetails.meetingDetails.meetingDetailsView).toBeHidden();
   });
 
   test('should show meetings in week view', async ({
@@ -69,15 +69,15 @@ test.describe('Calendar View', () => {
 
     const meetingDetails =
       await aliceMeetingsWidgetPage.openCalendarEventDetails('My Meeting');
-    await expect(meetingDetails.meetingCard.meetingTitleText).toHaveText(
+    await expect(meetingDetails.meetingDetails.meetingTitleText).toHaveText(
       'My Meeting'
     );
-    await expect(meetingDetails.meetingCard.meetingDescriptionText).toHaveText(
-      'My Description'
-    );
+    await expect(
+      meetingDetails.meetingDetails.meetingDescriptionText
+    ).toHaveText('My Description');
     await meetingDetails.close();
 
-    await expect(meetingDetails.meetingCard.card).toBeHidden();
+    await expect(meetingDetails.meetingDetails.meetingDetailsView).toBeHidden();
   });
 
   test('should show meetings in work week view', async ({
@@ -91,15 +91,15 @@ test.describe('Calendar View', () => {
 
     const meetingDetails =
       await aliceMeetingsWidgetPage.openCalendarEventDetails('My Meeting');
-    await expect(meetingDetails.meetingCard.meetingTitleText).toHaveText(
+    await expect(meetingDetails.meetingDetails.meetingTitleText).toHaveText(
       'My Meeting'
     );
-    await expect(meetingDetails.meetingCard.meetingDescriptionText).toHaveText(
-      'My Description'
-    );
+    await expect(
+      meetingDetails.meetingDetails.meetingDescriptionText
+    ).toHaveText('My Description');
     await meetingDetails.close();
 
-    await expect(meetingDetails.meetingCard.card).toBeHidden();
+    await expect(meetingDetails.meetingDetails.meetingDetailsView).toBeHidden();
   });
 
   test('should show meetings in month view', async ({
@@ -113,15 +113,15 @@ test.describe('Calendar View', () => {
 
     const meetingDetails =
       await aliceMeetingsWidgetPage.openCalendarEventDetails('My Meeting');
-    await expect(meetingDetails.meetingCard.meetingTitleText).toHaveText(
+    await expect(meetingDetails.meetingDetails.meetingTitleText).toHaveText(
       'My Meeting'
     );
-    await expect(meetingDetails.meetingCard.meetingDescriptionText).toHaveText(
-      'My Description'
-    );
+    await expect(
+      meetingDetails.meetingDetails.meetingDescriptionText
+    ).toHaveText('My Description');
     await meetingDetails.close();
 
-    await expect(meetingDetails.meetingCard.card).toBeHidden();
+    await expect(meetingDetails.meetingDetails.meetingDetailsView).toBeHidden();
   });
 
   test('should switch to day week if window is resized', async ({

diff --git a/e2e/src/pages/MeetingDetailsPage.ts b/e2e/src/pages/MeetingDetailsPage.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2023 Nordeck IT + Consulting GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Locator } from '@playwright/test';
+
+export class MeetingDetailsPage {
+  public readonly meetingTimeRangeText: Locator;
+  public readonly meetingTitleText: Locator;
+  public readonly meetingDescriptionText: Locator;
+
+  constructor(public readonly meetingDetailsView: Locator) {
+    this.meetingTimeRangeText = this.meetingDetailsView
+      .getByRole('heading')
+      .locator('..')
+      .locator('> span');
+    this.meetingTitleText = this.meetingDetailsView.getByRole('heading', {
+      level: 3,
+    });
+    this.meetingDescriptionText = this.meetingDetailsView
+      .getByRole('paragraph')
+      .first();
+  }
+}
diff --git a/e2e/src/pages/meetingCardPage.ts b/e2e/src/pages/meetingCardPage.ts
@@ -32,7 +32,7 @@ export class MeetingCardPage {
       .getByRole('heading')
       .locator('..')
       .locator('> span');
-    this.meetingTitleText = this.card.getByRole('heading');
+    this.meetingTitleText = this.card.getByRole('heading', { level: 3 });
     this.meetingDescriptionText = this.card.getByRole('paragraph').first();
   }
 

diff --git a/e2e/src/pages/meetingsWidgetPage.ts b/e2e/src/pages/meetingsWidgetPage.ts
@@ -18,6 +18,7 @@ import { FrameLocator, Locator, Page } from '@playwright/test';
 import { ElementWebPage } from './elementWebPage';
 import { fillDatePicker } from './helper';
 import { MeetingCardPage } from './meetingCardPage';
+import { MeetingDetailsPage } from './MeetingDetailsPage';
 import { ScheduleMeetingWidgetPage } from './scheduleMeetingWidgetPage';
 
 export type CalendarView = 'list' | 'day' | 'week' | 'work week' | 'month';
@@ -106,25 +107,22 @@ export class MeetingsWidgetPage {
   async openCalendarEventDetails(
     title: string
   ): Promise<CalendarEventDetailsPage> {
+    const elementWebPage = new ElementWebPage(this.page);
     await this.getCalendarEvent(title).click();
 
+    await elementWebPage.approveWidgetIdentity();
+
     return new CalendarEventDetailsPage(
-      this.page,
-      this.widget,
       this.widget.getByRole('dialog', { name: title })
     );
   }
 }
 
 class CalendarEventDetailsPage {
-  public readonly meetingCard: MeetingCardPage;
+  public readonly meetingDetails: MeetingDetailsPage;
 
-  constructor(
-    private readonly page: Page,
-    private readonly widget: FrameLocator,
-    private readonly dialog: Locator
-  ) {
-    this.meetingCard = new MeetingCardPage(this.page, this.widget, this.dialog);
+  constructor(private readonly dialog: Locator) {
+    this.meetingDetails = new MeetingDetailsPage(this.dialog);
   }
 
   async close() {

diff --git a/matrix-meetings-bot/package.json b/matrix-meetings-bot/package.json
@@ -18,8 +18,8 @@
     "start": "PORT=3001 nest start",
     "start:dev": "PORT=3001 nest start --watch",
     "start:debug": "PORT=3001 nest start --debug --watch",
-    "copyfiles": "mkdir -p ./lib/static && cp -rp ./src/static/locales ./lib/static/",
-    "copyImages": "mkdir -p ./lib/static && cp -rp ./src/static/images ./lib/static/",
+    "copyfiles": "copyfiles -E -u 1 src/static/locales/**/*.json lib",
+    "copyImages": "copyfiles -E -u 1 src/static/images/* lib",
     "lint": "eslint . --no-error-on-unmatched-pattern",
     "translate": "i18next 'src/**/*.{ts,tsx}'",
     "test": "jest --watch",
@@ -73,6 +73,7 @@
     "@types/node": "^16.18.25",
     "@types/node-fetch": "^2.6.2",
     "@types/uuid": "^9.0.1",
+    "copyfiles": "^2.4.1",
     "depcheck": "^1.4.3",
     "dotenv-cli": "^7.2.1",
     "eslint": "^8.39.0",

diff --git a/matrix-meetings-widget/package.json b/matrix-meetings-widget/package.json
@@ -79,7 +79,7 @@
     "docker:stop": "docker stop matrix-meetings-widget",
     "docker:remove": "yarn run docker:stop && docker rm -v matrix-meetings-widget",
     "docker:inspect": "docker inspect nordeck/matrix-meetings-widget",
-    "start": "cross-env HTTPS=true BROWSER=none craco start",
+    "start": "cross-env HTTPS=true BROWSER=none ESLINT_NO_DEV_ERRORS=true TSC_COMPILE_ON_ERROR=true craco start",
     "dev": "cross-env BROWSER=none ESLINT_NO_DEV_ERRORS=true TSC_COMPILE_ON_ERROR=true WDS_SOCKET_PORT=0 craco start",
     "build": "cross-env GENERATE_SOURCEMAP=false INLINE_RUNTIME_CHUNK=false craco build",
     "depcheck": "depcheck --ignores=@types/jest,typescript,i18next-parser,jest",

diff --git a/matrix-meetings-widget/public/locales/de/translation.json b/matrix-meetings-widget/public/locales/de/translation.json
@@ -26,7 +26,7 @@
   "cockpitPanel": {
     "toParentRoom": "Zum übergeordneten Raum"
   },
-  "copyableText": {
+  "copyableTextButton": {
     "copy-to-clipboard": "In die Zwischenablage kopieren"
   },
   "dateRangePicker": {
@@ -57,7 +57,7 @@
   "editMeetingModal": {
     "cancel": "Abbrechen",
     "save": "Speichern",
-    "title": "Besprechung bearbeiten"
+    "title": "Bearbeiten"
   },
   "invitedMeetingList": {
     "detail": {
@@ -128,6 +128,41 @@
     "updateFailedClose": "Schließen",
     "updateFailedTitle": "Fehler beim Ändern der Besprechungsdetails"
   },
+  "meetingDetails": {
+    "content": {
+      "dateAndTime": "{{range, daterange}}",
+      "description": "Beschreibung",
+      "details": "Einzelheiten",
+      "organizer": "Veranstalter",
+      "participants": "Teilnehmer",
+      "shareMeeting": {
+        "download": "Herunterladen",
+        "downloadIcsFile": "ICS Datei herunterladen",
+        "emailCopyMessage": "Nachricht",
+        "emailDescription": "Nutze die folgende Nachricht um die Besprechung in einer E-Mail zu verteilen:",
+        "emailTitle": "E-Mail Einladung",
+        "icsDescription": "Lade die Besprechungsinformationen im iCalendar Format herunter um sie zu einer anderen Kalenderanwendung einzufügen:",
+        "icsTitle": "ICS Datei herunterladen",
+        "shareByMail": "E-Mail Einladung teilen",
+        "title": "Besprechung teilen",
+        "warningRecurringMeetingEmail": "Dies ist eine E-Mail Einladung zu einer Besprechungsserie. Durch das Teilen dieser E-Mail Einladung werden Benutzer zu allen Besprechungen in der Serie eingeladen.",
+        "warningRecurringMeetingICalFile": "Dies ist eine iCal Datei zu einer Besprechungsserie. Durch das Teilen dieser iCal Datei werden Benutzer zu allen Besprechungen in der Serie eingeladen."
+      }
+    },
+    "header": {
+      "deleteConfirmButton": "Löschen",
+      "deleteConfirmHeader": "Besprechung löschen",
+      "deleteConfirmMessage": "Du bist dabei die Besprechung „{{title}}“ am {{startTime, datetime}} und alles darin zu löschen. Bist du sicher?",
+      "deleteFailed": "Bitte versuche es erneut.",
+      "deleteFailedTitle": "Fehler beim Löschen der Besprechung",
+      "deleteInOpenXchangeMenu": "Besprechung in Open-Xchange löschen",
+      "deleteMenu": "Löschen",
+      "editInOpenXchangeMenu": "Besprechung in Open-Xchange bearbeiten",
+      "editMenu": "Bearbeiten",
+      "join": "Beitreten",
+      "joinBreakout_breakout": "Beitreten"
+    }
+  },
   "meetingHasBreakoutSessionsWarning": {
     "message": "Wenn Start- oder Endzeit geändert wird, werden diese nicht automatisch verschoben!",
     "title": "Die Besprechung hat bereits Breakoutsessions."
@@ -144,9 +179,6 @@
     "title": "Besprechungen"
   },
   "meetingsCalendar": {
-    "dialog": {
-      "close": "Schließen"
-    },
     "event": {
       "startTime": "{{startTime, datetime}}",
       "summary_default": "{{startTime, datetime}}–{{endTime, datetime}}: “{{title}}” von {{creator}}",

diff --git a/matrix-meetings-widget/public/locales/en/translation.json b/matrix-meetings-widget/public/locales/en/translation.json
@@ -26,7 +26,7 @@
   "cockpitPanel": {
     "toParentRoom": "Back to parent room"
   },
-  "copyableText": {
+  "copyableTextButton": {
     "copy-to-clipboard": "Copy to clipboard"
   },
   "dateRangePicker": {
@@ -128,6 +128,41 @@
     "updateFailedClose": "Close",
     "updateFailedTitle": "Failed to update the meeting"
   },
+  "meetingDetails": {
+    "content": {
+      "dateAndTime": "{{range, daterange}}",
+      "description": "Description",
+      "details": "Details",
+      "organizer": "Organizer",
+      "participants": "Participants",
+      "shareMeeting": {
+        "download": "Download",
+        "downloadIcsFile": "Download ICS File",
+        "emailCopyMessage": "Message",
+        "emailDescription": "Use the following information to forward the conference for example by email:",
+        "emailTitle": "Share the meeting invitation",
+        "icsDescription": "Download the meeting in the iCalendar format to add it to a calendar application:",
+        "icsTitle": "Download a calendar file",
+        "shareByMail": "Share by email",
+        "title": "Share meeting",
+        "warningRecurringMeetingEmail": "This is an email invitation to a meeting series. Sharing this email invitation invites users to all meetings in the series.",
+        "warningRecurringMeetingICalFile": "This is an iCal file of a meeting series. Sharing this iCal file invites users to all meetings in the series."
+      }
+    },
+    "header": {
+      "deleteConfirmButton": "Delete",
+      "deleteConfirmHeader": "Delete meeting",
+      "deleteConfirmMessage": "Are you sure you want to delete the meeting “{{title}}” on {{startTime, datetime}} and every content related to it?",
+      "deleteFailed": "Please try again.",
+      "deleteFailedTitle": "Failed to delete the meeting",
+      "deleteInOpenXchangeMenu": "Delete meeting in Open-Xchange",
+      "deleteMenu": "Delete",
+      "editInOpenXchangeMenu": "Edit meeting in Open-Xchange",
+      "editMenu": "Edit",
+      "join": "Join",
+      "joinBreakout_breakout": "Join"
+    }
+  },
   "meetingHasBreakoutSessionsWarning": {
     "message": "If you want to change start or end time of this meeting, existing breakout sessions will not be moved!",
     "title": "The meeting already has breakout sessions."
@@ -144,9 +179,6 @@
     "title": "Meetings"
   },
   "meetingsCalendar": {
-    "dialog": {
-      "close": "Close"
-    },
     "event": {
       "startTime": "{{startTime, datetime}}",
       "summary_default": "{{startTime, datetime}}–{{endTime, datetime}}: “{{title}}” by {{creator}}",