change request

Signed-off-by: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>
nordeck · Jul 13, 2023 · 2a019c8 · 2a019c8
1 parent b000d8b
commit 2a019c8
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -31,7 +31,7 @@ type MeetingDetailsProps = WithMeetingProps & {
 
   onClose?: () => void;
 
-  isSettingMeeting?: boolean;
+  showJoinButton?: boolean;
 };
 
 export const MeetingDetails = withRoomIdMeeting(
@@ -40,15 +40,15 @@ export const MeetingDetails = withRoomIdMeeting(
     titleId,
     meetingTimeId,
     onClose,
-    isSettingMeeting,
+    showJoinButton = true,
   }: MeetingDetailsProps) => {
     return (
       <div role="region" aria-label="Meeting details">
         <MeetingDetailsHeader
           meeting={meeting}
           onClose={onClose}
           titleId={titleId}
-          isSettingMeeting={isSettingMeeting}
+          showJoinButton={showJoinButton}
         />
         <Divider variant="middle" />
         <MeetingDetailsContent

diff --git a/...src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx b/...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,17 +123,28 @@ 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 }
     );
 
     expect(await axe(container)).toHaveNoViolations();
   });
 
   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/...dget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx b/...dget/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 />