From e41010b50638aa6ee02a98cb333e5c9187b99a23 Mon Sep 17 00:00:00 2001
From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
Date: Wed, 28 Jun 2023 10:32:36 +0200
Subject: [PATCH 01/10] add the expended view to the meeting setting

---
 .../cockpit/CockpitPanel/CockpitPanel.tsx     | 26 +++++++++++++------
 .../MeetingDetails/MeetingDetails.tsx         | 11 +++++++-
 .../MeetingDetailsHeader.tsx                  | 26 ++++++++++++-------
 3 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx b/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx
index 52a96b1b..ad8da453 100644
--- a/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx
+++ b/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx
@@ -14,15 +14,17 @@
  * limitations under the License.
  */
 
-import { navigateToRoom } from '@matrix-widget-toolkit/api';
-import { useWidgetApi } from '@matrix-widget-toolkit/react';
 import ArrowCircleLeftIcon from '@mui/icons-material/ArrowCircleLeft';
 import { Box, Button, Divider, Stack } from '@mui/material';
+import { unstable_useId as useId } from '@mui/utils';
+
+import { navigateToRoom } from '@matrix-widget-toolkit/api';
+import { useWidgetApi } from '@matrix-widget-toolkit/react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Meeting } from '../../../reducer/meetingsApi';
 import { withCurrentRoomMeeting } from '../../common/withRoomMeeting';
-import { MeetingCard } from '../../meetings/MeetingCard';
+import { MeetingDetails } from '../../meetings/MeetingDetails';
 
 type CockpitPanelProps = {
   meeting: Meeting;
@@ -39,11 +41,14 @@ export const CockpitPanel = withCurrentRoomMeeting(
       }
     }, [meeting.parentRoomId, widgetApi]);
 
+    const titleId = useId();
+    const meetingTimeId = useId();
+
     return (
       <Stack height="100%">
         {meeting.parentRoomId && (
           <Box component="nav" px={2}>
-            <Box maxWidth={327} mx="auto" my={2}>
+            <Box mx="auto" my={2}>
               <Button
                 fullWidth
                 onClick={openMeeting}
@@ -59,10 +64,15 @@ export const CockpitPanel = withCurrentRoomMeeting(
         )}
 
         <Box px={2}>
-          <Box maxWidth={327} mx="auto" my={2}>
-            <Box position="relative">
-              <MeetingCard headingComponent="h3" meeting={meeting} />
-            </Box>
+          <Box position="relative">
+            <MeetingDetails
+              meetingTimeId={meetingTimeId}
+              recurrenceId={meeting.recurrenceId}
+              roomId={meeting.meetingId}
+              titleId={titleId}
+              uid={meeting.calendarUid}
+              isSettingMeeting={true}
+            />
           </Box>
         </Box>
       </Stack>
diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
index d506db15..ea62ced9 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
@@ -30,16 +30,25 @@ type MeetingDetailsProps = WithMeetingProps & {
   meetingTimeId?: string;
 
   onClose?: () => void;
+
+  isSettingMeeting?: boolean;
 };
 
 export const MeetingDetails = withRoomIdMeeting(
-  ({ meeting, titleId, meetingTimeId, onClose }: MeetingDetailsProps) => {
+  ({
+    meeting,
+    titleId,
+    meetingTimeId,
+    onClose,
+    isSettingMeeting,
+  }: MeetingDetailsProps) => {
     return (
       <>
         <MeetingDetailsHeader
           meeting={meeting}
           onClose={onClose}
           titleId={titleId}
+          isSettingMeeting={isSettingMeeting}
         />
         <Divider variant="middle" />
         <MeetingDetailsContent
diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
index 2f608e2c..85d0c553 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
@@ -65,10 +65,12 @@ export function MeetingDetailsHeader({
   meeting,
   onClose,
   titleId,
+  isSettingMeeting,
 }: {
   meeting: Meeting;
   onClose?: DispatchWithoutAction;
   titleId?: string;
+  isSettingMeeting?: boolean;
 }) {
   const widgetApi = useWidgetApi();
   const { t } = useTranslation();
@@ -182,11 +184,13 @@ export function MeetingDetailsHeader({
             {meeting?.title}
           </DialogTitle>
           <Box display="flex" flexWrap="wrap" alignItems="baseline" ml={3}>
-            <MeetingDetailsJoinButton
-              aria-describedby={joinButtonTitleId}
-              meetingType={meeting.type}
-              roomId={meeting.meetingId}
-            />
+            {!isSettingMeeting && (
+              <MeetingDetailsJoinButton
+                aria-describedby={joinButtonTitleId}
+                meetingType={meeting.type}
+                roomId={meeting.meetingId}
+              />
+            )}
             {canUpdateMeeting && !isExternalReference && (
               <Button
                 variant="outlined"
@@ -208,11 +212,13 @@ export function MeetingDetailsHeader({
             )}
           </Box>
         </Box>
-        <Tooltip onClick={onClose} title={t('close', 'Close')}>
-          <IconButton autoFocus sx={{ mr: 3 }}>
-            <CloseIcon />
-          </IconButton>
-        </Tooltip>
+        {!isSettingMeeting && (
+          <Tooltip onClick={onClose} title={t('close', 'Close')}>
+            <IconButton autoFocus sx={{ mr: 3 }}>
+              <CloseIcon />
+            </IconButton>
+          </Tooltip>
+        )}
       </Stack>
 
       {showErrorDialog && <UpdateFailedDialog setOpen={setShowErrorDialog} />}

From 4249faaf33e861f8b56eec7721861d3ab2fba514 Mon Sep 17 00:00:00 2001
From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
Date: Thu, 29 Jun 2023 13:45:31 +0200
Subject: [PATCH 02/10] fix tests

Signed-off-by: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
---
 .../CockpitPanel/CockpitPanel.test.tsx        | 39 +++++++++++++++++--
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.test.tsx b/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.test.tsx
index 8977c98b..4921b4d2 100644
--- a/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.test.tsx
+++ b/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.test.tsx
@@ -14,35 +14,64 @@
  * limitations under the License.
  */
 
+import { extractWidgetApiParameters as extractWidgetApiParametersMocked } from '@matrix-widget-toolkit/api';
 import { WidgetApiMockProvider } from '@matrix-widget-toolkit/react';
 import { MockedWidgetApi, mockWidgetApi } from '@matrix-widget-toolkit/testing';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
+import { setupServer } from 'msw/node';
 import { ComponentType, PropsWithChildren, useState } from 'react';
 import { Provider } from 'react-redux';
 import {
   mockCalendar,
+  mockConfigEndpoint,
   mockCreateMeetingRoom,
+  mockMeetingSharingInformationEndpoint,
   mockNordeckMeetingMetadataEvent,
+  mockWidgetEndpoint,
 } from '../../../lib/testUtils';
 import { createStore } from '../../../store';
 import { initializeStore } from '../../../store/store';
 import { LocalizationProvider } from '../../common/LocalizationProvider';
 import { CockpitPanel } from './CockpitPanel';
 
+jest.mock('@matrix-widget-toolkit/api', () => ({
+  ...jest.requireActual('@matrix-widget-toolkit/api'),
+  extractWidgetApiParameters: jest.fn(),
+}));
+
+const extractWidgetApiParameters = jest.mocked(
+  extractWidgetApiParametersMocked
+);
+
 let widgetApi: MockedWidgetApi;
 
 afterEach(() => widgetApi.stop());
 
 beforeEach(() => (widgetApi = mockWidgetApi({ roomId: '!meeting-room-id' })));
 
+const server = setupServer();
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
 describe('<CockpitPanel>', () => {
   let Wrapper: ComponentType<PropsWithChildren<{}>>;
 
   beforeEach(() => {
     mockCreateMeetingRoom(widgetApi);
 
+    mockWidgetEndpoint(server);
+    mockConfigEndpoint(server);
+    mockMeetingSharingInformationEndpoint(server);
+
+    extractWidgetApiParameters.mockReturnValue({
+      clientOrigin: 'http://element.local',
+      widgetId: '',
+    });
+
     jest
       .spyOn(Date, 'now')
       .mockImplementation(() => +new Date('2022-01-02T13:10:00.000Z'));
@@ -74,7 +103,7 @@ describe('<CockpitPanel>', () => {
     ).resolves.toBeInTheDocument();
 
     expect(
-      screen.getByText('Jan 1, 2999, 10:00 AM – 2:00 PM')
+      screen.getByText('January 1, 2999, 10:00 AM – 2:00 PM')
     ).toBeInTheDocument();
   });
 
@@ -108,8 +137,10 @@ describe('<CockpitPanel>', () => {
     ).resolves.toBeInTheDocument();
 
     expect(
-      screen.getByText('Jan 2, 2022, 3:00 PM – 4:00 PM')
+      screen.getByText('January 2, 2022, 3:00 – 4:00 PM')
     ).toBeInTheDocument();
+
+    expect(screen.getByText('Every day')).toBeInTheDocument();
   });
 
   it('should display current recurring meeting if one is in progress', async () => {
@@ -132,7 +163,7 @@ describe('<CockpitPanel>', () => {
     ).resolves.toBeInTheDocument();
 
     expect(
-      screen.getByText('Jan 2, 2022, 1:00 PM – 2:00 PM')
+      screen.getByText('January 2, 2022, 1:00 – 2:00 PM')
     ).toBeInTheDocument();
   });
 
@@ -156,7 +187,7 @@ describe('<CockpitPanel>', () => {
     ).resolves.toBeInTheDocument();
 
     expect(
-      screen.getByText('Jan 5, 2021, 1:00 PM – 2:00 PM')
+      screen.getByText('January 5, 2021, 1:00 – 2:00 PM')
     ).toBeInTheDocument();
   });
 

From 72ce2ae5bcc92a254c7f200377ad67e022f733c0 Mon Sep 17 00:00:00 2001
From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
Date: Thu, 29 Jun 2023 13:50:58 +0200
Subject: [PATCH 03/10] add changeset

Signed-off-by: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
---
 .changeset/stale-cycles-sort.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/stale-cycles-sort.md

diff --git a/.changeset/stale-cycles-sort.md b/.changeset/stale-cycles-sort.md
new file mode 100644
index 00000000..c03c23c6
--- /dev/null
+++ b/.changeset/stale-cycles-sort.md
@@ -0,0 +1,5 @@
+---
+'@nordeck/matrix-meetings-widget': minor
+---
+
+Add the expended meeting view to the meeting setting widget

From 9ec77f61d66afa709daf084d89b2e4c06a1f1007 Mon Sep 17 00:00:00 2001
From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
Date: Mon, 3 Jul 2023 09:21:54 +0200
Subject: [PATCH 04/10] fix e2e test im meetingRoom

---
 e2e/src/meetingRoom.spec.ts                   | 61 ++++++++--------
 e2e/src/openXchange.spec.ts                   | 24 ++++---
 e2e/src/pages/MMeetingDetailsPage.ts          | 72 +++++++++++++++++++
 e2e/src/pages/cockpitWidgetPage.ts            |  8 +--
 .../MeetingDetails/MeetingDetails.tsx         |  4 +-
 .../MeetingDetailsContent.tsx                 |  7 +-
 6 files changed, 129 insertions(+), 47 deletions(-)
 create mode 100644 e2e/src/pages/MMeetingDetailsPage.ts

diff --git a/e2e/src/meetingRoom.spec.ts b/e2e/src/meetingRoom.spec.ts
index e069612f..430aab85 100644
--- a/e2e/src/meetingRoom.spec.ts
+++ b/e2e/src/meetingRoom.spec.ts
@@ -64,14 +64,15 @@ test.describe('Meeting Room', () => {
     );
 
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    await expect(meetingCard.meetingTimeRangeText).toHaveText(
-      'Oct 3, 2040, 10:30 AM – 11:30 AM'
-    );
-    await expect(meetingCard.meetingTitleText).toHaveText('My Meeting');
-    await expect(meetingCard.meetingDescriptionText).toHaveText(
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
+    await expect(meetingDetails.meetingDescriptionText).toHaveText(
       'My Description'
     );
+    await expect(meetingDetails.meetingTitleText).toHaveText('My Meeting');
+    await expect(meetingDetails.meetingTimeRangeText).toHaveText(
+      'October 3, 2040, 10:30 – 11:30 AM'
+    );
   });
 
   test('should edit the meeting title from within the meeting', async ({
@@ -80,14 +81,13 @@ test.describe('Meeting Room', () => {
   }) => {
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
 
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    const aliceEditMeetingWidgetPage = await meetingCard.editMeeting();
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
+    const aliceEditMeetingWidgetPage = await meetingDetails.editMeeting();
     await aliceEditMeetingWidgetPage.titleTextbox.fill('New Meeting');
     await aliceEditMeetingWidgetPage.submit();
 
-    await aliceElementWebPage.approveWidgetIdentity();
-
-    await expect(meetingCard.meetingTitleText).toHaveText('New Meeting');
+    await expect(meetingDetails.meetingTitleText).toHaveText('New Meeting');
     await expect(aliceElementWebPage.roomNameText).toHaveText('New Meeting');
     await expect(
       aliceElementWebPage.locateChatMessageInRoom(/Title: New Meeting/)
@@ -101,13 +101,13 @@ test.describe('Meeting Room', () => {
   }) => {
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
 
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    const aliceEditMeetingWidgetPage = await meetingCard.editMeeting();
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
+
+    const aliceEditMeetingWidgetPage = await meetingDetails.editMeeting();
     await aliceEditMeetingWidgetPage.addParticipant(charlie.displayName);
     await aliceEditMeetingWidgetPage.submit();
 
-    await aliceElementWebPage.approveWidgetIdentity();
-
     await aliceElementWebPage.waitForUserMembership(charlie.username, 'invite');
   });
 
@@ -116,13 +116,12 @@ test.describe('Meeting Room', () => {
     aliceCockpitWidgetPage,
   }) => {
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    const aliceEditMeetingWidgetPage = await meetingCard.editMeeting();
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
+    const aliceEditMeetingWidgetPage = await meetingDetails.editMeeting();
     await aliceEditMeetingWidgetPage.removeLastWidget();
     await aliceEditMeetingWidgetPage.submit();
 
-    await aliceElementWebPage.approveWidgetIdentity();
-
     await aliceElementWebPage
       .locateChatMessageInRoom('Video conference ended by Bot')
       .waitFor();
@@ -141,13 +140,13 @@ test.describe('Meeting Room', () => {
     aliceCockpitWidgetPage,
   }) => {
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    const aliceEditMeetingWidgetPage = await meetingCard.editMeeting();
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
+
+    const aliceEditMeetingWidgetPage = await meetingDetails.editMeeting();
     await aliceEditMeetingWidgetPage.addWidget('Video Conference (optional)');
     await aliceEditMeetingWidgetPage.submit();
 
-    await aliceElementWebPage.approveWidgetIdentity();
-
     await expect
       .poll(async () => {
         return await aliceElementWebPage.getWidgets();
@@ -160,7 +159,7 @@ test.describe('Meeting Room', () => {
       ]);
   });
 
-  test('should toggle whether users can use the chat', async ({
+  test.skip('should toggle whether users can use the chat', async ({
     aliceElementWebPage,
     aliceCockpitWidgetPage,
     bobElementWebPage,
@@ -180,14 +179,14 @@ test.describe('Meeting Room', () => {
     await bobElementWebPage.sendMessage('I am Bob');
     await aliceElementWebPage.sendMessage('I am Alice');
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    await meetingCard.switchToEditPermissions();
+    /*const meetingCard = aliceCockpitWidgetPage.getMeeting();
+     await meetingCard.switchToEditPermissions();
     await meetingCard.toggleChatPermission();
     await aliceElementWebPage.sendMessage('I am still here');
     await expect(bobElementWebPage.noChatPermissionText).toBeVisible();
     await meetingCard.toggleChatPermission();
     await bobElementWebPage.sendMessage('I am Bob again');
-    await aliceElementWebPage.sendMessage('I am Alice again');
+    await aliceElementWebPage.sendMessage('I am Alice again'); */
   });
 
   test('should cancel the meeting', async ({
@@ -208,8 +207,10 @@ test.describe('Meeting Room', () => {
       .joinMeeting();
     await bobElementWebPage.acceptRoomInvitation();
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    await meetingCard.deleteMeeting();
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
+
+    await meetingDetails.deleteMeeting();
 
     await expect(aliceElementWebPage.locateTombstone()).toBeVisible();
     await expect(bobElementWebPage.locateTombstone()).toBeVisible();
@@ -231,6 +232,8 @@ test.describe('Meeting Room', () => {
     aliceCockpitWidgetPage,
   }) => {
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
+    await aliceElementWebPage.approveWidgetIdentity();
+
     await aliceCockpitWidgetPage.backToParentRoom();
     await aliceElementWebPage.approveWidgetCapabilities();
 
diff --git a/e2e/src/openXchange.spec.ts b/e2e/src/openXchange.spec.ts
index 48104b7c..d1a402cb 100644
--- a/e2e/src/openXchange.spec.ts
+++ b/e2e/src/openXchange.spec.ts
@@ -18,7 +18,7 @@ import { expect } from '@playwright/test';
 import { test } from './fixtures';
 
 test.describe('OpenXchange', () => {
-  test('should create meeting via OX', async ({
+  test.skip('should create meeting via OX', async ({
     alice,
     alicePage,
     aliceElementWebPage,
@@ -52,17 +52,18 @@ test.describe('OpenXchange', () => {
 
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
 
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    await expect(meetingCard.meetingTitleText).toHaveText('My Meeting');
-    await expect(meetingCard.meetingDescriptionText).toHaveText(
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
+
+    await expect(meetingDetails.meetingTitleText).toHaveText('My Meeting');
+    await expect(meetingDetails.meetingDescriptionText).toHaveText(
       'My Description'
     );
-    await expect(meetingCard.meetingTimeRangeText).toHaveText(
+    await expect(meetingDetails.meetingTimeRangeText).toHaveText(
       'Oct 3, 2040, 10:30 AM – 11:00 AM'
     );
 
-    const menu = await meetingCard.openMoreSettingsMenu();
-    await aliceElementWebPage.approveWidgetIdentity();
+    /*  const menu = await meetingCard.openMoreSettingsMenu();
 
     await expect(menu.editInOpenXchangeMenuItem).toHaveAttribute(
       'href',
@@ -77,7 +78,7 @@ test.describe('OpenXchange', () => {
       'Breakout Sessions',
       'NeoDateFix Details',
       'Video Conference',
-    ]);
+    ]); */
   });
 
   test('should create recurring meeting via OX', async ({
@@ -105,9 +106,10 @@ test.describe('OpenXchange', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText(
-      'Oct 3, 2040, 10:30 AM – 11:00 AM. Recurrence: Every day for 5 times'
-    );
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
+    await expect(
+      aliceCockpitWidgetPage.getMeeting().meetingRecurrenceRuleText
+    ).toHaveText('Recurrence: Every day for 5 times');
   });
 
   test('should update meeting via OX', async ({
diff --git a/e2e/src/pages/MMeetingDetailsPage.ts b/e2e/src/pages/MMeetingDetailsPage.ts
new file mode 100644
index 00000000..0fd1fd2e
--- /dev/null
+++ b/e2e/src/pages/MMeetingDetailsPage.ts
@@ -0,0 +1,72 @@
+/*
+ * 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 { FrameLocator, Locator, Page } from '@playwright/test';
+import { ElementWebPage } from './elementWebPage';
+import { ScheduleMeetingWidgetPage } from './scheduleMeetingWidgetPage';
+
+export class MMeetingDetailsPage {
+  public readonly meetingTitleText: Locator;
+  public readonly meetingDescriptionText: Locator;
+  public readonly meetingTimeRangeText: Locator;
+  public readonly meetingRecurrenceRuleText: Locator;
+
+  constructor(
+    private readonly page: Page,
+    private readonly widget: FrameLocator,
+    public readonly meetingDetails: Locator
+  ) {
+    this.meetingTitleText = this.meetingDetails.getByRole('heading', {
+      level: 3,
+    });
+    this.meetingDescriptionText = this.meetingDetails
+      .getByRole('paragraph')
+      .first();
+
+    this.meetingTimeRangeText = this.meetingDetails.getByTestId('date');
+    this.meetingRecurrenceRuleText =
+      this.meetingDetails.getByTestId('recurrenceRole');
+  }
+
+  async deleteMeeting() {
+    await this.meetingDetails.getByRole('button', { name: 'Delete' }).click();
+    await this.widget
+      .getByRole('dialog', { name: 'Delete meeting' })
+      .getByRole('button', { name: 'Delete' })
+      .click();
+  }
+
+  async editMeeting(): Promise<ScheduleMeetingWidgetPage> {
+    await this.widget.getByRole('button', { name: 'Edit' }).click();
+
+    // We spawned a new widget and have to approve the capabilities:
+    const elementWebPage = new ElementWebPage(this.page);
+    const editMeetingWidgetPage = new ScheduleMeetingWidgetPage(
+      this.page,
+      elementWebPage.widgetByTitle('Edit Meeting')
+    );
+
+    await elementWebPage.approveWidgetCapabilities();
+
+    await editMeetingWidgetPage.titleTextbox.waitFor({ state: 'attached' });
+
+    await elementWebPage.approveWidgetIdentity();
+
+    await editMeetingWidgetPage.waitForAvailableWidgets();
+
+    return editMeetingWidgetPage;
+  }
+}
diff --git a/e2e/src/pages/cockpitWidgetPage.ts b/e2e/src/pages/cockpitWidgetPage.ts
index d4f46eb6..d8bb348b 100644
--- a/e2e/src/pages/cockpitWidgetPage.ts
+++ b/e2e/src/pages/cockpitWidgetPage.ts
@@ -15,7 +15,7 @@
  */
 
 import { FrameLocator, Locator, Page } from '@playwright/test';
-import { MeetingCardPage } from './meetingCardPage';
+import { MMeetingDetailsPage } from './MMeetingDetailsPage';
 
 export class CockpitWidgetPage {
   public readonly backToParentRoomButton: Locator;
@@ -33,11 +33,11 @@ export class CockpitWidgetPage {
     await this.backToParentRoomButton.click();
   }
 
-  getMeeting(): MeetingCardPage {
-    return new MeetingCardPage(
+  getMeeting(): MMeetingDetailsPage {
+    return new MMeetingDetailsPage(
       this.page,
       this.widget,
-      this.widget.getByRole('heading').locator('..').locator('..').locator('..')
+      this.widget.getByRole('region', { name: 'Meeting details' })
     );
   }
 }
diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
index ea62ced9..4b752999 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
@@ -43,7 +43,7 @@ export const MeetingDetails = withRoomIdMeeting(
     isSettingMeeting,
   }: MeetingDetailsProps) => {
     return (
-      <>
+      <div role="region" aria-label="Meeting details">
         <MeetingDetailsHeader
           meeting={meeting}
           onClose={onClose}
@@ -55,7 +55,7 @@ export const MeetingDetails = withRoomIdMeeting(
           meeting={meeting}
           meetingTimeId={meetingTimeId}
         />
-      </>
+      </div>
     );
   }
 );
diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsContent/MeetingDetailsContent.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsContent/MeetingDetailsContent.tsx
index d90fc554..29d1e04f 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsContent/MeetingDetailsContent.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsContent/MeetingDetailsContent.tsx
@@ -69,6 +69,7 @@ export function MeetingDetailsContent({
               <Typography
                 component="span"
                 fontSize="inherit"
+                data-testid="date"
                 id={meetingTimeId}
               >
                 {t(
@@ -89,7 +90,11 @@ export function MeetingDetailsContent({
 
             {recurrence && (
               <Box mb={1} ml={4}>
-                <Typography component="span" fontSize="inherit">
+                <Typography
+                  component="span"
+                  fontSize="inherit"
+                  data-testid="recurrenceRole"
+                >
                   {recurrence}
                 </Typography>
               </Box>

From 6537ceccc85700ecd3a38eaaa081b9ae06679273 Mon Sep 17 00:00:00 2001
From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
Date: Wed, 5 Jul 2023 11:29:58 +0200
Subject: [PATCH 05/10] replace the old meetingDetails class and fix some tests

---
 e2e/src/openXchange.spec.ts          | 54 +++++++++++----------
 e2e/src/pages/MMeetingDetailsPage.ts | 72 ----------------------------
 e2e/src/pages/MeetingDetailsPage.ts  | 69 +++++++++++++++++++++++---
 e2e/src/pages/cockpitWidgetPage.ts   |  6 +--
 e2e/src/pages/meetingsWidgetPage.ts  | 16 +++++--
 e2e/src/recurringMeetings.spec.ts    | 16 ++++---
 6 files changed, 118 insertions(+), 115 deletions(-)
 delete mode 100644 e2e/src/pages/MMeetingDetailsPage.ts

diff --git a/e2e/src/openXchange.spec.ts b/e2e/src/openXchange.spec.ts
index d1a402cb..10638566 100644
--- a/e2e/src/openXchange.spec.ts
+++ b/e2e/src/openXchange.spec.ts
@@ -18,7 +18,7 @@ import { expect } from '@playwright/test';
 import { test } from './fixtures';
 
 test.describe('OpenXchange', () => {
-  test.skip('should create meeting via OX', async ({
+  test('should create meeting via OX', async ({
     alice,
     alicePage,
     aliceElementWebPage,
@@ -60,16 +60,14 @@ test.describe('OpenXchange', () => {
       'My Description'
     );
     await expect(meetingDetails.meetingTimeRangeText).toHaveText(
-      'Oct 3, 2040, 10:30 AM – 11:00 AM'
+      'October 3, 2040, 10:30 – 11:00 AM'
     );
 
-    /*  const menu = await meetingCard.openMoreSettingsMenu();
-
-    await expect(menu.editInOpenXchangeMenuItem).toHaveAttribute(
+    await expect(meetingDetails.editInOpenXchangeMenuItem).toHaveAttribute(
       'href',
       'https://webmail-hostname/appsuite/#app=io.ox/calendar&id=meeting-id&folder=cal://0/471'
     );
-    await expect(menu.deleteInOpenXchangeMenuItem).toHaveAttribute(
+    await expect(meetingDetails.deleteInOpenXchangeMenuItem).toHaveAttribute(
       'href',
       'https://webmail-hostname/appsuite/#app=io.ox/calendar&id=meeting-id&folder=cal://0/471'
     );
@@ -78,7 +76,7 @@ test.describe('OpenXchange', () => {
       'Breakout Sessions',
       'NeoDateFix Details',
       'Video Conference',
-    ]); */
+    ]);
   });
 
   test('should create recurring meeting via OX', async ({
@@ -109,7 +107,7 @@ test.describe('OpenXchange', () => {
     ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingRecurrenceRuleText
-    ).toHaveText('Recurrence: Every day for 5 times');
+    ).toHaveText('Every day for 5 times');
   });
 
   test('should update meeting via OX', async ({
@@ -133,9 +131,9 @@ test.describe('OpenXchange', () => {
 
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
 
-    const meetingCard = aliceCockpitWidgetPage.getMeeting();
-    await expect(meetingCard.meetingTimeRangeText).toHaveText(
-      'Oct 3, 2040, 10:30 AM – 11:00 AM'
+    const meetingDetails = aliceCockpitWidgetPage.getMeeting();
+    await expect(meetingDetails.meetingTimeRangeText).toHaveText(
+      'October 3, 2040, 10:30 – 11:00 AM'
     );
 
     await meetingsBotApi.updateMeeting({
@@ -147,14 +145,16 @@ test.describe('OpenXchange', () => {
       openIdToken: await aliceElementWebPage.getOpenIdToken(),
     });
 
+    await aliceElementWebPage.approveWidgetIdentity();
+
     await expect(
       aliceElementWebPage.locateChatMessageInRoom(
         /10\/04\/2040 10:30 AM CEST to 10\/04\/2040 11:00 AM CEST/
       )
     ).toBeVisible();
 
-    await expect(meetingCard.meetingTimeRangeText).toHaveText(
-      'Oct 4, 2040, 10:30 AM – 11:00 AM'
+    await expect(meetingDetails.meetingTimeRangeText).toHaveText(
+      'October 4, 2040, 10:30 – 11:00 AM'
     );
   });
 
@@ -198,7 +198,7 @@ test.describe('OpenXchange', () => {
     );
   });
 
-  test('should convert a recurring OX meeting into a single meeting', async ({
+  test.skip('should convert a recurring OX meeting into a single meeting', async ({
     alice,
     alicePage,
     aliceElementWebPage,
@@ -223,9 +223,11 @@ test.describe('OpenXchange', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText(
-      'Oct 3, 2040, 10:30 AM – 11:00 AM. Recurrence: Every day for 5 times'
-    );
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
+
+    await expect(
+      aliceCockpitWidgetPage.getMeeting().meetingRecurrenceRuleText
+    ).toHaveText(' Every day for 5 times');
 
     await meetingsBotApi.updateMeeting({
       roomId,
@@ -238,7 +240,9 @@ test.describe('OpenXchange', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText('Oct 3, 2040, 10:30 AM – 11:00 AM');
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
+
+    await aliceElementWebPage.approveWidgetIdentity();
 
     await expect(
       aliceElementWebPage.locateChatMessageInRoom(
@@ -253,7 +257,7 @@ test.describe('OpenXchange', () => {
     ).toBeVisible();
   });
 
-  test('should convert a single OX meeting into a recurring meeting', async ({
+  test.skip('should convert a single OX meeting into a recurring meeting', async ({
     alice,
     alicePage,
     aliceElementWebPage,
@@ -277,7 +281,7 @@ test.describe('OpenXchange', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText('Oct 3, 2040, 10:30 AM – 11:00 AM');
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
 
     await meetingsBotApi.updateMeeting({
       roomId,
@@ -291,15 +295,17 @@ test.describe('OpenXchange', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText(
-      'Oct 3, 2040, 10:30 AM – 11:00 AM. Recurrence: Every day for 5 times'
-    );
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
+
+    await expect(
+      aliceCockpitWidgetPage.getMeeting().meetingRecurrenceRuleText
+    ).toHaveText('Every day for 5 times');
 
     await expect(
       aliceElementWebPage.locateChatMessageInRoom(
         /Repeat meeting: Every day for 5 times/
       )
-    ).toBeVisible();
+    ).ktoBeVisible();
 
     await expect(
       aliceElementWebPage.locateChatMessageInRoom(
diff --git a/e2e/src/pages/MMeetingDetailsPage.ts b/e2e/src/pages/MMeetingDetailsPage.ts
deleted file mode 100644
index 0fd1fd2e..00000000
--- a/e2e/src/pages/MMeetingDetailsPage.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * 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 { FrameLocator, Locator, Page } from '@playwright/test';
-import { ElementWebPage } from './elementWebPage';
-import { ScheduleMeetingWidgetPage } from './scheduleMeetingWidgetPage';
-
-export class MMeetingDetailsPage {
-  public readonly meetingTitleText: Locator;
-  public readonly meetingDescriptionText: Locator;
-  public readonly meetingTimeRangeText: Locator;
-  public readonly meetingRecurrenceRuleText: Locator;
-
-  constructor(
-    private readonly page: Page,
-    private readonly widget: FrameLocator,
-    public readonly meetingDetails: Locator
-  ) {
-    this.meetingTitleText = this.meetingDetails.getByRole('heading', {
-      level: 3,
-    });
-    this.meetingDescriptionText = this.meetingDetails
-      .getByRole('paragraph')
-      .first();
-
-    this.meetingTimeRangeText = this.meetingDetails.getByTestId('date');
-    this.meetingRecurrenceRuleText =
-      this.meetingDetails.getByTestId('recurrenceRole');
-  }
-
-  async deleteMeeting() {
-    await this.meetingDetails.getByRole('button', { name: 'Delete' }).click();
-    await this.widget
-      .getByRole('dialog', { name: 'Delete meeting' })
-      .getByRole('button', { name: 'Delete' })
-      .click();
-  }
-
-  async editMeeting(): Promise<ScheduleMeetingWidgetPage> {
-    await this.widget.getByRole('button', { name: 'Edit' }).click();
-
-    // We spawned a new widget and have to approve the capabilities:
-    const elementWebPage = new ElementWebPage(this.page);
-    const editMeetingWidgetPage = new ScheduleMeetingWidgetPage(
-      this.page,
-      elementWebPage.widgetByTitle('Edit Meeting')
-    );
-
-    await elementWebPage.approveWidgetCapabilities();
-
-    await editMeetingWidgetPage.titleTextbox.waitFor({ state: 'attached' });
-
-    await elementWebPage.approveWidgetIdentity();
-
-    await editMeetingWidgetPage.waitForAvailableWidgets();
-
-    return editMeetingWidgetPage;
-  }
-}
diff --git a/e2e/src/pages/MeetingDetailsPage.ts b/e2e/src/pages/MeetingDetailsPage.ts
index 29b77e41..cf1985fc 100644
--- a/e2e/src/pages/MeetingDetailsPage.ts
+++ b/e2e/src/pages/MeetingDetailsPage.ts
@@ -14,23 +14,78 @@
  * limitations under the License.
  */
 
-import { Locator } from '@playwright/test';
+import { FrameLocator, Locator, Page } from '@playwright/test';
+import { ElementWebPage } from './elementWebPage';
+import { ScheduleMeetingWidgetPage } from './scheduleMeetingWidgetPage';
 
 export class MeetingDetailsPage {
-  public readonly meetingTimeRangeText: Locator;
   public readonly meetingTitleText: Locator;
   public readonly meetingDescriptionText: Locator;
+  public readonly meetingTimeRangeText: Locator;
+  public readonly meetingRecurrenceRuleText: Locator;
+  public readonly editMenuItem: Locator;
+  public readonly deleteMenuItem: Locator;
+  public readonly editInOpenXchangeMenuItem: Locator;
+  public readonly deleteInOpenXchangeMenuItem: Locator;
 
-  constructor(public readonly meetingDetailsView: Locator) {
-    this.meetingTimeRangeText = this.meetingDetailsView
-      .getByRole('heading')
-      .locator('..')
-      .locator('> span');
+  constructor(
+    private readonly page: Page,
+    private readonly widget: FrameLocator,
+    public readonly meetingDetailsView: Locator
+  ) {
     this.meetingTitleText = this.meetingDetailsView.getByRole('heading', {
       level: 3,
     });
     this.meetingDescriptionText = this.meetingDetailsView
       .getByRole('paragraph')
       .first();
+
+    this.meetingTimeRangeText = this.meetingDetailsView.getByTestId('date');
+    this.meetingRecurrenceRuleText =
+      this.meetingDetailsView.getByTestId('recurrenceRole');
+    this.editMenuItem = meetingDetailsView.getByRole('button', {
+      name: 'Edit',
+    });
+    this.deleteMenuItem = meetingDetailsView.getByRole('button', {
+      name: 'Delete',
+    });
+    this.editInOpenXchangeMenuItem = meetingDetailsView.getByRole('link', {
+      name: 'Edit meeting in Open-Xchange',
+    });
+    this.deleteInOpenXchangeMenuItem = meetingDetailsView.getByRole('link', {
+      name: 'Delete meeting in Open-Xchange',
+    });
+  }
+
+  async deleteMeeting() {
+    await this.meetingDetailsView
+      .getByRole('button', { name: 'Delete' })
+      .click();
+
+    await this.widget
+      .getByRole('dialog', { name: 'Delete meeting' })
+      .getByRole('button', { name: 'Delete' })
+      .click();
+  }
+
+  async editMeeting(): Promise<ScheduleMeetingWidgetPage> {
+    await this.widget.getByRole('button', { name: 'Edit' }).click();
+
+    // We spawned a new widget and have to approve the capabilities:
+    const elementWebPage = new ElementWebPage(this.page);
+    const editMeetingWidgetPage = new ScheduleMeetingWidgetPage(
+      this.page,
+      elementWebPage.widgetByTitle('Edit Meeting')
+    );
+
+    await elementWebPage.approveWidgetCapabilities();
+
+    await editMeetingWidgetPage.titleTextbox.waitFor({ state: 'attached' });
+
+    await elementWebPage.approveWidgetIdentity();
+
+    await editMeetingWidgetPage.waitForAvailableWidgets();
+
+    return editMeetingWidgetPage;
   }
 }
diff --git a/e2e/src/pages/cockpitWidgetPage.ts b/e2e/src/pages/cockpitWidgetPage.ts
index d8bb348b..e5e39059 100644
--- a/e2e/src/pages/cockpitWidgetPage.ts
+++ b/e2e/src/pages/cockpitWidgetPage.ts
@@ -15,7 +15,7 @@
  */
 
 import { FrameLocator, Locator, Page } from '@playwright/test';
-import { MMeetingDetailsPage } from './MMeetingDetailsPage';
+import { MeetingDetailsPage } from './meetingDetailsPage';
 
 export class CockpitWidgetPage {
   public readonly backToParentRoomButton: Locator;
@@ -33,8 +33,8 @@ export class CockpitWidgetPage {
     await this.backToParentRoomButton.click();
   }
 
-  getMeeting(): MMeetingDetailsPage {
-    return new MMeetingDetailsPage(
+  getMeeting(): MeetingDetailsPage {
+    return new MeetingDetailsPage(
       this.page,
       this.widget,
       this.widget.getByRole('region', { name: 'Meeting details' })
diff --git a/e2e/src/pages/meetingsWidgetPage.ts b/e2e/src/pages/meetingsWidgetPage.ts
index fc09cc2c..cd23afe0 100644
--- a/e2e/src/pages/meetingsWidgetPage.ts
+++ b/e2e/src/pages/meetingsWidgetPage.ts
@@ -18,7 +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 { MeetingDetailsPage } from './meetingDetailsPage';
 import { ScheduleMeetingWidgetPage } from './scheduleMeetingWidgetPage';
 
 export type CalendarView = 'list' | 'day' | 'week' | 'work week' | 'month';
@@ -113,6 +113,8 @@ export class MeetingsWidgetPage {
     await elementWebPage.approveWidgetIdentity();
 
     return new CalendarEventDetailsPage(
+      this.page,
+      this.widget,
       this.widget.getByRole('dialog', { name: title })
     );
   }
@@ -121,8 +123,16 @@ export class MeetingsWidgetPage {
 class CalendarEventDetailsPage {
   public readonly meetingDetails: MeetingDetailsPage;
 
-  constructor(private readonly dialog: Locator) {
-    this.meetingDetails = new MeetingDetailsPage(this.dialog);
+  constructor(
+    private readonly page: Page,
+    private readonly widget: FrameLocator,
+    private readonly dialog: Locator
+  ) {
+    this.meetingDetails = new MeetingDetailsPage(
+      this.page,
+      this.widget,
+      this.widget.getByRole('region', { name: 'Meeting details' })
+    );
   }
 
   async close() {
diff --git a/e2e/src/recurringMeetings.spec.ts b/e2e/src/recurringMeetings.spec.ts
index 95fc831f..4d32a085 100644
--- a/e2e/src/recurringMeetings.spec.ts
+++ b/e2e/src/recurringMeetings.spec.ts
@@ -46,11 +46,15 @@ test.describe('Recurring Meetings', () => {
 
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
 
+    await aliceElementWebPage.approveWidgetIdentity();
+
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText(
-      'Oct 3, 2040, 10:30 AM – 11:30 AM. Recurrence: Every day for 5 times'
-    );
+    ).toHaveText('October 3, 2040, 10:30 – 11:30 AM');
+
+    await expect(
+      aliceCockpitWidgetPage.getMeeting().meetingRecurrenceRuleText
+    ).toHaveText('Every day for 5 times');
   });
 
   test('should show meeting recurrences in meeting list', async ({
@@ -118,7 +122,7 @@ test.describe('Recurring Meetings', () => {
     ).toHaveCount(5);
   });
 
-  test('should edit recurring meeting', async ({
+  test.skip('should edit recurring meeting', async ({
     aliceMeetingsWidgetPage,
     aliceElementWebPage,
   }) => {
@@ -183,7 +187,7 @@ test.describe('Recurring Meetings', () => {
     ).toBeVisible();
   });
 
-  test('should covert a recurring meeting into a single meeting', async ({
+  test.skip('should covert a recurring meeting into a single meeting', async ({
     aliceMeetingsWidgetPage,
     aliceElementWebPage,
   }) => {
@@ -237,7 +241,7 @@ test.describe('Recurring Meetings', () => {
     ).toBeVisible();
   });
 
-  test('should convert a single meeting into a recurring meeting', async ({
+  test.skip('should convert a single meeting into a recurring meeting', async ({
     aliceMeetingsWidgetPage,
     aliceElementWebPage,
   }) => {

From 7662aaa345eb6373298513ed7f004d4ba88117f1 Mon Sep 17 00:00:00 2001
From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
Date: Thu, 6 Jul 2023 08:59:23 +0200
Subject: [PATCH 06/10] fix chat permission e2e2 test

Signed-off-by: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
---
 e2e/src/meetingRoom.spec.ts       | 6 +++---
 e2e/src/openXchange.spec.ts       | 6 +++---
 e2e/src/pages/index.ts            | 1 +
 e2e/src/recurringMeetings.spec.ts | 6 +++---
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/e2e/src/meetingRoom.spec.ts b/e2e/src/meetingRoom.spec.ts
index c0db119c..ec1c1592 100644
--- a/e2e/src/meetingRoom.spec.ts
+++ b/e2e/src/meetingRoom.spec.ts
@@ -159,7 +159,7 @@ test.describe('Meeting Room', () => {
       ]);
   });
 
-  test.skip('should toggle whether users can use the chat', async ({
+  test('should toggle whether users can use the chat', async ({
     aliceElementWebPage,
     aliceCockpitWidgetPage,
     bobElementWebPage,
@@ -180,10 +180,10 @@ test.describe('Meeting Room', () => {
     await aliceElementWebPage.sendMessage('I am Alice');
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
     const meetingCard = aliceCockpitWidgetPage.getMeeting();
+    await aliceElementWebPage.approveWidgetIdentity();
     let aliceEditMeetingWidgetPage = await meetingCard.editMeeting();
     await aliceEditMeetingWidgetPage.toggleChatPermission();
     await aliceEditMeetingWidgetPage.submit();
-    await aliceElementWebPage.approveWidgetIdentity();
     await aliceElementWebPage.sendMessage('I am still here');
     await expect(bobElementWebPage.noChatPermissionText).toBeVisible();
     aliceEditMeetingWidgetPage = await meetingCard.editMeeting();
@@ -191,7 +191,7 @@ test.describe('Meeting Room', () => {
     await aliceEditMeetingWidgetPage.submit();
     await expect(bobElementWebPage.noChatPermissionText).toBeHidden();
     await bobElementWebPage.sendMessage('I am Bob again');
-    await aliceElementWebPage.sendMessage('I am Alice again'); */
+    await aliceElementWebPage.sendMessage('I am Alice again');
   });
 
   test('should cancel the meeting', async ({
diff --git a/e2e/src/openXchange.spec.ts b/e2e/src/openXchange.spec.ts
index 10638566..ee03e183 100644
--- a/e2e/src/openXchange.spec.ts
+++ b/e2e/src/openXchange.spec.ts
@@ -198,7 +198,7 @@ test.describe('OpenXchange', () => {
     );
   });
 
-  test.skip('should convert a recurring OX meeting into a single meeting', async ({
+  test('should convert a recurring OX meeting into a single meeting', async ({
     alice,
     alicePage,
     aliceElementWebPage,
@@ -257,7 +257,7 @@ test.describe('OpenXchange', () => {
     ).toBeVisible();
   });
 
-  test.skip('should convert a single OX meeting into a recurring meeting', async ({
+  test('should convert a single OX meeting into a recurring meeting', async ({
     alice,
     alicePage,
     aliceElementWebPage,
@@ -305,7 +305,7 @@ test.describe('OpenXchange', () => {
       aliceElementWebPage.locateChatMessageInRoom(
         /Repeat meeting: Every day for 5 times/
       )
-    ).ktoBeVisible();
+    ).toBeVisible();
 
     await expect(
       aliceElementWebPage.locateChatMessageInRoom(
diff --git a/e2e/src/pages/index.ts b/e2e/src/pages/index.ts
index 1c0e0712..ccd7678f 100644
--- a/e2e/src/pages/index.ts
+++ b/e2e/src/pages/index.ts
@@ -19,6 +19,7 @@ export { CockpitWidgetPage } from './cockpitWidgetPage';
 export { ElementWebPage } from './elementWebPage';
 export type { OpenIdToken } from './elementWebPage';
 export { JitsiWidgetPage } from './jitsiWidgetPage';
+export { MeetingDetailsPage } from './meetingDetailsPage';
 export { MeetingsBotApi } from './meetingsBotApi';
 export { MeetingsWidgetPage } from './meetingsWidgetPage';
 export { ScheduleBreakoutSessionsWidgetPage } from './scheduleBreakoutSessionsWidgetPage';
diff --git a/e2e/src/recurringMeetings.spec.ts b/e2e/src/recurringMeetings.spec.ts
index 4d32a085..6f9f1622 100644
--- a/e2e/src/recurringMeetings.spec.ts
+++ b/e2e/src/recurringMeetings.spec.ts
@@ -122,7 +122,7 @@ test.describe('Recurring Meetings', () => {
     ).toHaveCount(5);
   });
 
-  test.skip('should edit recurring meeting', async ({
+  test('should edit recurring meeting', async ({
     aliceMeetingsWidgetPage,
     aliceElementWebPage,
   }) => {
@@ -187,7 +187,7 @@ test.describe('Recurring Meetings', () => {
     ).toBeVisible();
   });
 
-  test.skip('should covert a recurring meeting into a single meeting', async ({
+  test('should covert a recurring meeting into a single meeting', async ({
     aliceMeetingsWidgetPage,
     aliceElementWebPage,
   }) => {
@@ -241,7 +241,7 @@ test.describe('Recurring Meetings', () => {
     ).toBeVisible();
   });
 
-  test.skip('should convert a single meeting into a recurring meeting', async ({
+  test('should convert a single meeting into a recurring meeting', async ({
     aliceMeetingsWidgetPage,
     aliceElementWebPage,
   }) => {

From f4f0838e14e2de2cbe33c71ff9d75e0471239227 Mon Sep 17 00:00:00 2001
From: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>
Date: Thu, 6 Jul 2023 10:14:59 +0300
Subject: [PATCH 07/10] e2e test fixed

Signed-off-by: Mikhail Aheichyk <mikhail.aheichyk@nordeck.net>
---
 e2e/src/openXchange.spec.ts                                    | 2 ++
 e2e/src/pages/{MeetingDetailsPage.ts => meetingDetailsPage.ts} | 0
 2 files changed, 2 insertions(+)
 rename e2e/src/pages/{MeetingDetailsPage.ts => meetingDetailsPage.ts} (100%)

diff --git a/e2e/src/openXchange.spec.ts b/e2e/src/openXchange.spec.ts
index ee03e183..a8aaedc7 100644
--- a/e2e/src/openXchange.spec.ts
+++ b/e2e/src/openXchange.spec.ts
@@ -279,6 +279,8 @@ test.describe('OpenXchange', () => {
 
     await aliceElementWebPage.showWidgetInSidebar('NeoDateFix Details');
 
+    await aliceElementWebPage.approveWidgetIdentity();
+
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
     ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
diff --git a/e2e/src/pages/MeetingDetailsPage.ts b/e2e/src/pages/meetingDetailsPage.ts
similarity index 100%
rename from e2e/src/pages/MeetingDetailsPage.ts
rename to e2e/src/pages/meetingDetailsPage.ts

From b000d8bfe1fee983c71f357bdbf57369276e8e62 Mon Sep 17 00:00:00 2001
From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
Date: Thu, 6 Jul 2023 12:38:46 +0200
Subject: [PATCH 08/10] hide the join button in the sidebar

Signed-off-by: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
---
 .../MeetingDetailsHeader.test.tsx             | 20 +++++++++++++++++++
 .../MeetingDetailsHeader.tsx                  | 12 ++++++-----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx
index b43b8acf..a2f1578e 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx
@@ -136,6 +136,26 @@ describe('<MeetingDetailsHeader/>', () => {
     expect(onClose).toBeCalled();
   });
 
+  it('should hide join and close button in meeting details sidebar', async () => {
+    render(
+      <MeetingDetailsHeader
+        meeting={mockMeeting()}
+        isSettingMeeting
+        onClose={onClose}
+      />,
+      {
+        wrapper: Wrapper,
+      }
+    );
+
+    expect(
+      screen.queryByRole('button', { name: 'Join' })
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Close' })
+    ).not.toBeInTheDocument();
+  });
+
   it('should edit the meeting', async () => {
     widgetApi
       .observeRoomEvents('net.nordeck.meetings.meeting.update')
diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
index 49403966..2b93d0d7 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
@@ -191,11 +191,13 @@ export function MeetingDetailsHeader({
             {meeting?.title}
           </DialogTitle>
           <Box display="flex" flexWrap="wrap" alignItems="baseline" ml={3}>
-            <MeetingDetailsJoinButton
-              aria-describedby={joinButtonTitleId}
-              meetingType={meeting.type}
-              roomId={meeting.meetingId}
-            />
+            {!isSettingMeeting && (
+              <MeetingDetailsJoinButton
+                aria-describedby={joinButtonTitleId}
+                meetingType={meeting.type}
+                roomId={meeting.meetingId}
+              />
+            )}
             {canUpdateMeeting && isExternalReference && (
               <OpenXchangeButton reference={openXChangeReference}>
                 {t(

From 2a019c8afe84e6155d8900b15f01bde526ae2eab Mon Sep 17 00:00:00 2001
From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
Date: Thu, 13 Jul 2023 09:25:44 +0200
Subject: [PATCH 09/10] change request

Signed-off-by: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
---
 .changeset/stale-cycles-sort.md               |  2 +-
 e2e/src/meetingRoom.spec.ts                   |  2 +-
 e2e/src/openXchange.spec.ts                   | 16 ++---
 e2e/src/recurringMeetings.spec.ts             |  2 +-
 .../cockpit/CockpitPanel/CockpitPanel.tsx     | 18 +++---
 .../MeetingDetails/MeetingDetails.tsx         |  6 +-
 .../MeetingDetailsHeader.test.tsx             | 61 ++++++++++++++-----
 .../MeetingDetailsHeader.tsx                  |  8 +--
 8 files changed, 72 insertions(+), 43 deletions(-)

diff --git a/.changeset/stale-cycles-sort.md b/.changeset/stale-cycles-sort.md
index c03c23c6..a9cabd1e 100644
--- a/.changeset/stale-cycles-sort.md
+++ b/.changeset/stale-cycles-sort.md
@@ -2,4 +2,4 @@
 '@nordeck/matrix-meetings-widget': minor
 ---
 
-Add the expended meeting view to the meeting setting widget
+Add the expended meeting view to the cockpit widget
diff --git a/e2e/src/meetingRoom.spec.ts b/e2e/src/meetingRoom.spec.ts
index ec1c1592..5b1077ed 100644
--- a/e2e/src/meetingRoom.spec.ts
+++ b/e2e/src/meetingRoom.spec.ts
@@ -71,7 +71,7 @@ test.describe('Meeting Room', () => {
     );
     await expect(meetingDetails.meetingTitleText).toHaveText('My Meeting');
     await expect(meetingDetails.meetingTimeRangeText).toHaveText(
-      'October 3, 2040, 10:30 – 11:30 AM'
+      'October 3, 2040, 10:30 – 11:30 AM'
     );
   });
 
diff --git a/e2e/src/openXchange.spec.ts b/e2e/src/openXchange.spec.ts
index a8aaedc7..f8269d7a 100644
--- a/e2e/src/openXchange.spec.ts
+++ b/e2e/src/openXchange.spec.ts
@@ -60,7 +60,7 @@ test.describe('OpenXchange', () => {
       'My Description'
     );
     await expect(meetingDetails.meetingTimeRangeText).toHaveText(
-      'October 3, 2040, 10:30 – 11:00 AM'
+      'October 3, 2040, 10:30 – 11:00 AM'
     );
 
     await expect(meetingDetails.editInOpenXchangeMenuItem).toHaveAttribute(
@@ -104,7 +104,7 @@ test.describe('OpenXchange', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingRecurrenceRuleText
     ).toHaveText('Every day for 5 times');
@@ -133,7 +133,7 @@ test.describe('OpenXchange', () => {
 
     const meetingDetails = aliceCockpitWidgetPage.getMeeting();
     await expect(meetingDetails.meetingTimeRangeText).toHaveText(
-      'October 3, 2040, 10:30 – 11:00 AM'
+      'October 3, 2040, 10:30 – 11:00 AM'
     );
 
     await meetingsBotApi.updateMeeting({
@@ -154,7 +154,7 @@ test.describe('OpenXchange', () => {
     ).toBeVisible();
 
     await expect(meetingDetails.meetingTimeRangeText).toHaveText(
-      'October 4, 2040, 10:30 – 11:00 AM'
+      'October 4, 2040, 10:30 – 11:00 AM'
     );
   });
 
@@ -223,7 +223,7 @@ test.describe('OpenXchange', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingRecurrenceRuleText
@@ -240,7 +240,7 @@ test.describe('OpenXchange', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
 
     await aliceElementWebPage.approveWidgetIdentity();
 
@@ -283,7 +283,7 @@ test.describe('OpenXchange', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
 
     await meetingsBotApi.updateMeeting({
       roomId,
@@ -297,7 +297,7 @@ test.describe('OpenXchange', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
+    ).toHaveText('October 3, 2040, 10:30 – 11:00 AM');
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingRecurrenceRuleText
diff --git a/e2e/src/recurringMeetings.spec.ts b/e2e/src/recurringMeetings.spec.ts
index 6f9f1622..492ef5d3 100644
--- a/e2e/src/recurringMeetings.spec.ts
+++ b/e2e/src/recurringMeetings.spec.ts
@@ -50,7 +50,7 @@ test.describe('Recurring Meetings', () => {
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingTimeRangeText
-    ).toHaveText('October 3, 2040, 10:30 – 11:30 AM');
+    ).toHaveText('October 3, 2040, 10:30 – 11:30 AM');
 
     await expect(
       aliceCockpitWidgetPage.getMeeting().meetingRecurrenceRuleText
diff --git a/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx b/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx
index ad8da453..140c25fa 100644
--- a/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx
+++ b/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx
@@ -64,16 +64,14 @@ export const CockpitPanel = withCurrentRoomMeeting(
         )}
 
         <Box px={2}>
-          <Box position="relative">
-            <MeetingDetails
-              meetingTimeId={meetingTimeId}
-              recurrenceId={meeting.recurrenceId}
-              roomId={meeting.meetingId}
-              titleId={titleId}
-              uid={meeting.calendarUid}
-              isSettingMeeting={true}
-            />
-          </Box>
+          <MeetingDetails
+            meetingTimeId={meetingTimeId}
+            recurrenceId={meeting.recurrenceId}
+            roomId={meeting.meetingId}
+            titleId={titleId}
+            uid={meeting.calendarUid}
+            showJoinButton={false}
+          />
         </Box>
       </Stack>
     );
diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
index 4b752999..7fba1745 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
@@ -31,7 +31,7 @@ type MeetingDetailsProps = WithMeetingProps & {
 
   onClose?: () => void;
 
-  isSettingMeeting?: boolean;
+  showJoinButton?: boolean;
 };
 
 export const MeetingDetails = withRoomIdMeeting(
@@ -40,7 +40,7 @@ export const MeetingDetails = withRoomIdMeeting(
     titleId,
     meetingTimeId,
     onClose,
-    isSettingMeeting,
+    showJoinButton = true,
   }: MeetingDetailsProps) => {
     return (
       <div role="region" aria-label="Meeting details">
@@ -48,7 +48,7 @@ export const MeetingDetails = withRoomIdMeeting(
           meeting={meeting}
           onClose={onClose}
           titleId={titleId}
-          isSettingMeeting={isSettingMeeting}
+          showJoinButton={showJoinButton}
         />
         <Divider variant="middle" />
         <MeetingDetailsContent
diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx
index a2f1578e..80bc8c49 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx
@@ -100,9 +100,16 @@ describe('<MeetingDetailsHeader/>', () => {
   });
 
   it('should render without exploding', () => {
-    render(<MeetingDetailsHeader meeting={mockMeeting()} onClose={onClose} />, {
-      wrapper: Wrapper,
-    });
+    render(
+      <MeetingDetailsHeader
+        showJoinButton={true}
+        meeting={mockMeeting()}
+        onClose={onClose}
+      />,
+      {
+        wrapper: Wrapper,
+      }
+    );
 
     expect(
       screen.getByRole('heading', { level: 3, name: /An important meeting/i })
@@ -116,7 +123,11 @@ describe('<MeetingDetailsHeader/>', () => {
 
   it('should have no accessibility violations', async () => {
     const { container } = render(
-      <MeetingDetailsHeader meeting={mockMeeting()} onClose={onClose} />,
+      <MeetingDetailsHeader
+        showJoinButton
+        meeting={mockMeeting()}
+        onClose={onClose}
+      />,
       { wrapper: Wrapper }
     );
 
@@ -124,9 +135,16 @@ describe('<MeetingDetailsHeader/>', () => {
   });
 
   it('should close the expended meeting dialog', async () => {
-    render(<MeetingDetailsHeader meeting={mockMeeting()} onClose={onClose} />, {
-      wrapper: Wrapper,
-    });
+    render(
+      <MeetingDetailsHeader
+        showJoinButton
+        meeting={mockMeeting()}
+        onClose={onClose}
+      />,
+      {
+        wrapper: Wrapper,
+      }
+    );
 
     await userEvent.click(
       await screen.findByRole('button', { name: /Close/i }),
@@ -138,11 +156,7 @@ describe('<MeetingDetailsHeader/>', () => {
 
   it('should hide join and close button in meeting details sidebar', async () => {
     render(
-      <MeetingDetailsHeader
-        meeting={mockMeeting()}
-        isSettingMeeting
-        onClose={onClose}
-      />,
+      <MeetingDetailsHeader showJoinButton={false} meeting={mockMeeting()} />,
       {
         wrapper: Wrapper,
       }
@@ -195,6 +209,7 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
+        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -342,6 +357,7 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
+        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -426,6 +442,7 @@ describe('<MeetingDetailsHeader/>', () => {
   it('should skip editing the meeting if the user aborts the action', async () => {
     render(
       <MeetingDetailsHeader
+        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -499,6 +516,7 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
+        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -570,6 +588,7 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
+        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -642,6 +661,7 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
+        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -713,6 +733,7 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
+        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -768,6 +789,7 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
+        showJoinButton
         meeting={mockMeeting({
           room_id: '!room-id',
           parentRoomId: '!parent-room-id',
@@ -820,9 +842,16 @@ describe('<MeetingDetailsHeader/>', () => {
       .observeRoomEvents('net.nordeck.meetings.meeting.close')
       .subscribe(acknowledgeAllEvents(widgetApi));
 
-    render(<MeetingDetailsHeader meeting={mockMeeting()} onClose={onClose} />, {
-      wrapper: Wrapper,
-    });
+    render(
+      <MeetingDetailsHeader
+        showJoinButton
+        meeting={mockMeeting()}
+        onClose={onClose}
+      />,
+      {
+        wrapper: Wrapper,
+      }
+    );
 
     await userEvent.click(
       await screen.findByRole('button', { name: /Delete/i })
@@ -858,6 +887,7 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
+        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -917,6 +947,7 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
+        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: undefined,
diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
index 2b93d0d7..a4e448ad 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
@@ -67,12 +67,12 @@ export function MeetingDetailsHeader({
   meeting,
   onClose,
   titleId,
-  isSettingMeeting,
+  showJoinButton,
 }: {
   meeting: Meeting;
   onClose?: DispatchWithoutAction;
   titleId?: string;
-  isSettingMeeting?: boolean;
+  showJoinButton: boolean;
 }) {
   const widgetApi = useWidgetApi();
   const { t } = useTranslation();
@@ -191,7 +191,7 @@ export function MeetingDetailsHeader({
             {meeting?.title}
           </DialogTitle>
           <Box display="flex" flexWrap="wrap" alignItems="baseline" ml={3}>
-            {!isSettingMeeting && (
+            {showJoinButton && (
               <MeetingDetailsJoinButton
                 aria-describedby={joinButtonTitleId}
                 meetingType={meeting.type}
@@ -239,7 +239,7 @@ export function MeetingDetailsHeader({
             )}
           </Box>
         </Box>
-        {!isSettingMeeting && (
+        {onClose && (
           <Tooltip onClick={onClose} title={t('close', 'Close')}>
             <IconButton autoFocus sx={{ mr: 3 }}>
               <CloseIcon />

From 78c4c5518fcec483cc2e8ce31597dd147347afde Mon Sep 17 00:00:00 2001
From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
Date: Thu, 13 Jul 2023 12:12:44 +0200
Subject: [PATCH 10/10] change request

Signed-off-by: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
---
 .../cockpit/CockpitPanel/CockpitPanel.tsx     |  2 +-
 .../MeetingDetails/MeetingDetails.tsx         |  6 +-
 .../MeetingDetailsHeader.test.tsx             | 64 ++++---------------
 .../MeetingDetailsHeader.tsx                  |  6 +-
 4 files changed, 20 insertions(+), 58 deletions(-)

diff --git a/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx b/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx
index 140c25fa..f85b6d91 100644
--- a/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx
+++ b/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx
@@ -70,7 +70,7 @@ export const CockpitPanel = withCurrentRoomMeeting(
             roomId={meeting.meetingId}
             titleId={titleId}
             uid={meeting.calendarUid}
-            showJoinButton={false}
+            hideJoinButton
           />
         </Box>
       </Stack>
diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
index 7fba1745..75ff15d2 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
@@ -31,7 +31,7 @@ type MeetingDetailsProps = WithMeetingProps & {
 
   onClose?: () => void;
 
-  showJoinButton?: boolean;
+  hideJoinButton?: boolean;
 };
 
 export const MeetingDetails = withRoomIdMeeting(
@@ -40,7 +40,7 @@ export const MeetingDetails = withRoomIdMeeting(
     titleId,
     meetingTimeId,
     onClose,
-    showJoinButton = true,
+    hideJoinButton,
   }: MeetingDetailsProps) => {
     return (
       <div role="region" aria-label="Meeting details">
@@ -48,7 +48,7 @@ export const MeetingDetails = withRoomIdMeeting(
           meeting={meeting}
           onClose={onClose}
           titleId={titleId}
-          showJoinButton={showJoinButton}
+          hideJoinButton={hideJoinButton}
         />
         <Divider variant="middle" />
         <MeetingDetailsContent
diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx
index 80bc8c49..4d679c1e 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx
@@ -100,16 +100,9 @@ describe('<MeetingDetailsHeader/>', () => {
   });
 
   it('should render without exploding', () => {
-    render(
-      <MeetingDetailsHeader
-        showJoinButton={true}
-        meeting={mockMeeting()}
-        onClose={onClose}
-      />,
-      {
-        wrapper: Wrapper,
-      }
-    );
+    render(<MeetingDetailsHeader meeting={mockMeeting()} onClose={onClose} />, {
+      wrapper: Wrapper,
+    });
 
     expect(
       screen.getByRole('heading', { level: 3, name: /An important meeting/i })
@@ -123,11 +116,7 @@ describe('<MeetingDetailsHeader/>', () => {
 
   it('should have no accessibility violations', async () => {
     const { container } = render(
-      <MeetingDetailsHeader
-        showJoinButton
-        meeting={mockMeeting()}
-        onClose={onClose}
-      />,
+      <MeetingDetailsHeader meeting={mockMeeting()} onClose={onClose} />,
       { wrapper: Wrapper }
     );
 
@@ -135,16 +124,9 @@ describe('<MeetingDetailsHeader/>', () => {
   });
 
   it('should close the expended meeting dialog', async () => {
-    render(
-      <MeetingDetailsHeader
-        showJoinButton
-        meeting={mockMeeting()}
-        onClose={onClose}
-      />,
-      {
-        wrapper: Wrapper,
-      }
-    );
+    render(<MeetingDetailsHeader meeting={mockMeeting()} onClose={onClose} />, {
+      wrapper: Wrapper,
+    });
 
     await userEvent.click(
       await screen.findByRole('button', { name: /Close/i }),
@@ -155,12 +137,9 @@ describe('<MeetingDetailsHeader/>', () => {
   });
 
   it('should hide join and close button in meeting details sidebar', async () => {
-    render(
-      <MeetingDetailsHeader showJoinButton={false} meeting={mockMeeting()} />,
-      {
-        wrapper: Wrapper,
-      }
-    );
+    render(<MeetingDetailsHeader hideJoinButton meeting={mockMeeting()} />, {
+      wrapper: Wrapper,
+    });
 
     expect(
       screen.queryByRole('button', { name: 'Join' })
@@ -209,7 +188,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -357,7 +335,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -442,7 +419,6 @@ describe('<MeetingDetailsHeader/>', () => {
   it('should skip editing the meeting if the user aborts the action', async () => {
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -516,7 +492,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -588,7 +563,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -661,7 +635,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -733,7 +706,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -789,7 +761,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!room-id',
           parentRoomId: '!parent-room-id',
@@ -842,16 +813,9 @@ describe('<MeetingDetailsHeader/>', () => {
       .observeRoomEvents('net.nordeck.meetings.meeting.close')
       .subscribe(acknowledgeAllEvents(widgetApi));
 
-    render(
-      <MeetingDetailsHeader
-        showJoinButton
-        meeting={mockMeeting()}
-        onClose={onClose}
-      />,
-      {
-        wrapper: Wrapper,
-      }
-    );
+    render(<MeetingDetailsHeader meeting={mockMeeting()} onClose={onClose} />, {
+      wrapper: Wrapper,
+    });
 
     await userEvent.click(
       await screen.findByRole('button', { name: /Delete/i })
@@ -887,7 +851,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -947,7 +910,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: undefined,
diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
index a4e448ad..d5b7662d 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
@@ -67,12 +67,12 @@ export function MeetingDetailsHeader({
   meeting,
   onClose,
   titleId,
-  showJoinButton,
+  hideJoinButton,
 }: {
   meeting: Meeting;
   onClose?: DispatchWithoutAction;
   titleId?: string;
-  showJoinButton: boolean;
+  hideJoinButton?: boolean;
 }) {
   const widgetApi = useWidgetApi();
   const { t } = useTranslation();
@@ -191,7 +191,7 @@ export function MeetingDetailsHeader({
             {meeting?.title}
           </DialogTitle>
           <Box display="flex" flexWrap="wrap" alignItems="baseline" ml={3}>
-            {showJoinButton && (
+            {!hideJoinButton && (
               <MeetingDetailsJoinButton
                 aria-describedby={joinButtonTitleId}
                 meetingType={meeting.type}