From 51ccfe9f96c60af9079a261fa62f51268d1e9070 Mon Sep 17 00:00:00 2001 From: Misha Behei Date: Mon, 24 Feb 2025 15:48:45 -0600 Subject: [PATCH 01/11] more buttons --- .../ArchivingToggle/ArchivingToggle.tsx | 6 ++++ .../ChatToggleButton/ChatToggleButton.tsx | 5 +++ .../EmojiGridButton/EmojiGridButton.tsx | 7 +++- .../LayoutToggleButton/LayoutToggleButton.tsx | 5 +++ .../ParticipantListToggleButton.tsx | 5 +++ .../ReportIssueButton/ReportIssueButton.tsx | 7 ++-- .../ToolbarOverflowMenu.spec.tsx | 20 ++++++++++++ .../ToolbarOverflowMenu.tsx | 32 +++++++++++++++++-- 8 files changed, 82 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/MeetingRoom/ArchivingToggle/ArchivingToggle.tsx b/frontend/src/components/MeetingRoom/ArchivingToggle/ArchivingToggle.tsx index 6702c732..6d6f048e 100644 --- a/frontend/src/components/MeetingRoom/ArchivingToggle/ArchivingToggle.tsx +++ b/frontend/src/components/MeetingRoom/ArchivingToggle/ArchivingToggle.tsx @@ -6,6 +6,7 @@ import ToolbarButton from '../ToolbarButton'; import PopupDialog, { DialogTexts } from '../PopupDialog'; import { startArchiving, stopArchiving } from '../../../api/archiving'; import useSessionContext from '../../../hooks/useSessionContext'; +import useIsSmallViewport from '../../../hooks/useIsSmallViewport'; /** * ArchivingToggle Component @@ -67,6 +68,7 @@ const ArchivingToggle = (): ReactElement => { handleDialogClick(isRecording ? 'stop' : 'start'); }; + const isSmallViewport = useIsSmallViewport(); return ( <> @@ -78,6 +80,10 @@ const ArchivingToggle = (): ReactElement => { style={{ color: `${isRecording ? 'rgb(239 68 68)' : 'white'}` }} /> } + sx={{ + width: isSmallViewport ? '42px' : '48px', + height: isSmallViewport ? '42px' : '48px', + }} /> void; @@ -27,6 +28,7 @@ const ChatToggleButton = ({ isOpen, unreadCount, }: ChatToggleButtonProps): ReactElement => { + const isSmallViewport = useIsSmallViewport(); return ( } diff --git a/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx b/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx index 995d345c..e269e169 100644 --- a/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx +++ b/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx @@ -3,6 +3,7 @@ import { EmojiEmotions } from '@mui/icons-material'; import { Dispatch, ReactElement, SetStateAction, useRef } from 'react'; import ToolbarButton from '../ToolbarButton'; import EmojiGrid from '../EmojiGrid/EmojiGrid'; +import useIsSmallViewport from '../../../hooks/useIsSmallViewport'; export type EmojiGridProps = { isEmojiGridOpen: boolean; @@ -29,7 +30,7 @@ const EmojiGridButton = ({ const handleToggle = () => { setIsEmojiGridOpen((prevOpen) => !prevOpen); }; - + const isSmallViewport = useIsSmallViewport(); return ( <> @@ -40,6 +41,10 @@ const EmojiGridButton = ({ style={{ color: `${!isEmojiGridOpen ? 'white' : 'rgb(138, 180, 248)'}` }} /> } + sx={{ + width: isSmallViewport ? '42px' : '48px', + height: isSmallViewport ? '42px' : '48px', + }} ref={anchorRef} data-testid="emoji-grid-toggle" /> diff --git a/frontend/src/components/MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx b/frontend/src/components/MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx index 36729de1..5e64f38e 100644 --- a/frontend/src/components/MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx +++ b/frontend/src/components/MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx @@ -4,6 +4,7 @@ import WindowIcon from '@mui/icons-material/Window'; import { ReactElement } from 'react'; import useSessionContext from '../../../hooks/useSessionContext'; import ToolbarButton from '../ToolbarButton'; +import useIsSmallViewport from '../../../hooks/useIsSmallViewport'; type LayoutToggleButtonProps = { isScreenSharePresent: boolean; @@ -34,6 +35,8 @@ const LayoutToggleButton = ({ isScreenSharePresent }: LayoutToggleButtonProps): return isGrid ? 'Switch to Active Speaker layout' : 'Switch to Grid layout'; }; + const isSmallViewport = useIsSmallViewport(); + return ( diff --git a/frontend/src/components/MeetingRoom/ParticipantListToggleButton/ParticipantListToggleButton.tsx b/frontend/src/components/MeetingRoom/ParticipantListToggleButton/ParticipantListToggleButton.tsx index 349a9648..d73bab29 100644 --- a/frontend/src/components/MeetingRoom/ParticipantListToggleButton/ParticipantListToggleButton.tsx +++ b/frontend/src/components/MeetingRoom/ParticipantListToggleButton/ParticipantListToggleButton.tsx @@ -4,6 +4,7 @@ import { blue } from '@mui/material/colors'; import { Badge } from '@mui/material'; import { ReactElement } from 'react'; import ToolbarButton from '../ToolbarButton'; +import useIsSmallViewport from '../../../hooks/useIsSmallViewport'; export type ParticipantListButtonProps = { handleClick: () => void; @@ -26,6 +27,7 @@ const ParticipantListToggleButton = ({ isOpen, participantCount, }: ParticipantListButtonProps): ReactElement => { + const isSmallViewport = useIsSmallViewport(); return (
} diff --git a/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx b/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx index a8ef9bf8..13e1c963 100644 --- a/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx +++ b/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx @@ -2,7 +2,7 @@ import { Tooltip } from '@mui/material'; import { ReactElement, useRef } from 'react'; import FeedbackIcon from '@mui/icons-material/Feedback'; import ToolbarButton from '../ToolbarButton'; -import displayOnDesktop from '../../../utils/displayOnDesktop'; +import useIsSmallViewport from '../../../hooks/useIsSmallViewport'; export type ReportIssueButtonProps = { handleClick: () => void; @@ -18,14 +18,17 @@ export type ReportIssueButtonProps = { */ const ReportIssueButton = ({ handleClick, isOpen }: ReportIssueButtonProps): ReactElement => { const anchorRef = useRef(null); + const isSmallViewport = useIsSmallViewport(); return ( -
+
} diff --git a/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx b/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx index ee50979f..ca718211 100644 --- a/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx +++ b/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx @@ -42,4 +42,24 @@ describe('ToolbarOverflowMenu', () => { expect(screen.queryByTestId('toolbar-overflow-menu')).not.toBeInTheDocument(); }); + + it('renders all the available buttons including the Report Issue button if enabled', () => { + vi.stubEnv('VITE_ENABLE_REPORT_ISSUE', 'true'); + render(); + expect(screen.getByTestId('layout-toggle')).toBeVisible(); + expect(screen.getByTestId('archiving-toggle')).toBeVisible(); + expect(screen.getByTestId('report-issue-button')).toBeVisible(); + expect(screen.getByTestId('participant-list-toggle')).toBeVisible(); + expect(screen.getByTestId('chat-toggle')).toBeVisible(); + }); + + it('does not render Report Issue button in overflow menu if it was disabled', () => { + vi.stubEnv('VITE_ENABLE_REPORT_ISSUE', 'false'); + render(); + expect(screen.getByTestId('layout-toggle')).toBeVisible(); + expect(screen.getByTestId('archiving-toggle')).toBeVisible(); + expect(screen.queryByTestId('report-issue-button')).not.toBeInTheDocument(); + expect(screen.getByTestId('participant-list-toggle')).toBeVisible(); + expect(screen.getByTestId('chat-toggle')).toBeVisible(); + }); }); diff --git a/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.tsx b/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.tsx index eb7cd499..3b55087d 100644 --- a/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.tsx +++ b/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.tsx @@ -4,6 +4,9 @@ import { Dispatch, ReactElement, RefObject, SetStateAction } from 'react'; import ArchivingToggle from '../ArchivingToggle'; import EmojiGridButton from '../EmojiGridButton'; import LayoutToggleButton from '../LayoutToggleButton'; +import ParticipantListToggleButton from '../ParticipantListToggleButton'; +import ChatToggleButton from '../ChatToggleButton'; +import ReportIssueButton from '../ReportIssueButton'; import useSessionContext from '../../../hooks/useSessionContext'; export type ToolbarOverflowMenuProps = { @@ -33,9 +36,18 @@ const ToolbarOverflowMenu = ({ anchorRef, handleClickAway, }: ToolbarOverflowMenuProps): ReactElement => { - const { subscriberWrappers } = useSessionContext(); + const { + subscriberWrappers, + rightPanelActiveTab, + toggleParticipantList, + toggleChat, + toggleReportIssue, + unreadCount, + } = useSessionContext(); const isViewingScreenShare = subscriberWrappers.some((subWrapper) => subWrapper.isScreenshare); - + const participantCount = + subscriberWrappers.filter(({ isScreenshare }) => !isScreenshare).length + 1; + const isReportIssueEnabled = import.meta.env.VITE_ENABLE_REPORT_ISSUE === 'true'; return ( + {isReportIssueEnabled && ( + + )} + +
From 817f02becef485a7e71c02c02f9fabafe14bdba0 Mon Sep 17 00:00:00 2001 From: Misha Behei Date: Mon, 24 Feb 2025 15:57:12 -0600 Subject: [PATCH 02/11] forgot it here --- .../MeetingRoom/ReportIssueButton/ReportIssueButton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx b/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx index 13e1c963..f473a0df 100644 --- a/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx +++ b/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx @@ -27,8 +27,8 @@ const ReportIssueButton = ({ handleClick, isOpen }: ReportIssueButtonProps): Rea sx={{ marginTop: '0px', marginRight: '0px', - width: isSmallViewport ? '42px' : undefined, - height: isSmallViewport ? '42px' : undefined, + width: isSmallViewport ? '42px' : '48px', + height: isSmallViewport ? '42px' : '48px', }} onClick={handleClick} icon={} From e161457a74311630ca50121a02dda98a3f61c83e Mon Sep 17 00:00:00 2001 From: Misha Behei Date: Mon, 24 Feb 2025 19:48:05 -0600 Subject: [PATCH 03/11] feedback --- .../MeetingRoom/ArchivingToggle/ArchivingToggle.tsx | 5 +---- .../MeetingRoom/ChatToggleButton/ChatToggleButton.tsx | 3 +-- .../MeetingRoom/EmojiGridButton/EmojiGridButton.tsx | 5 +---- .../MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx | 3 +-- .../MeetingRoom/ReportIssueButton/ReportIssueButton.tsx | 3 +-- .../components/MeetingRoom/ToolbarButton/ToolbarButton.tsx | 7 +++++-- .../ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx | 2 ++ 7 files changed, 12 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/MeetingRoom/ArchivingToggle/ArchivingToggle.tsx b/frontend/src/components/MeetingRoom/ArchivingToggle/ArchivingToggle.tsx index 6d6f048e..5efc9986 100644 --- a/frontend/src/components/MeetingRoom/ArchivingToggle/ArchivingToggle.tsx +++ b/frontend/src/components/MeetingRoom/ArchivingToggle/ArchivingToggle.tsx @@ -80,10 +80,7 @@ const ArchivingToggle = (): ReactElement => { style={{ color: `${isRecording ? 'rgb(239 68 68)' : 'white'}` }} /> } - sx={{ - width: isSmallViewport ? '42px' : '48px', - height: isSmallViewport ? '42px' : '48px', - }} + isSmallViewPort={isSmallViewport} /> } + isSmallViewPort={isSmallViewport} /> diff --git a/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx b/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx index e269e169..a20dc28a 100644 --- a/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx +++ b/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx @@ -41,12 +41,9 @@ const EmojiGridButton = ({ style={{ color: `${!isEmojiGridOpen ? 'white' : 'rgb(138, 180, 248)'}` }} /> } - sx={{ - width: isSmallViewport ? '42px' : '48px', - height: isSmallViewport ? '42px' : '48px', - }} ref={anchorRef} data-testid="emoji-grid-toggle" + isSmallViewPort={isSmallViewport} /> diff --git a/frontend/src/components/MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx b/frontend/src/components/MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx index 5e64f38e..5e80473c 100644 --- a/frontend/src/components/MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx +++ b/frontend/src/components/MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx @@ -51,9 +51,8 @@ const LayoutToggleButton = ({ isScreenSharePresent }: LayoutToggleButtonProps): } sx={{ cursor: isScreenSharePresent ? 'not-allowed' : 'pointer', - width: isSmallViewport ? '42px' : '48px', - height: isSmallViewport ? '42px' : '48px', }} + isSmallViewPort={isSmallViewport} /> ); diff --git a/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx b/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx index f473a0df..65e9b3e4 100644 --- a/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx +++ b/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx @@ -27,12 +27,11 @@ const ReportIssueButton = ({ handleClick, isOpen }: ReportIssueButtonProps): Rea sx={{ marginTop: '0px', marginRight: '0px', - width: isSmallViewport ? '42px' : '48px', - height: isSmallViewport ? '42px' : '48px', }} onClick={handleClick} icon={} ref={anchorRef} + isSmallViewPort={isSmallViewport} />
diff --git a/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx b/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx index b970a0c6..bbc8ef2e 100644 --- a/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx +++ b/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx @@ -8,6 +8,7 @@ export type ToolbarButtonProps = { icon: ReactElement; sx?: SxProps; id?: string; + isSmallViewPort?: boolean; }; /** @@ -16,7 +17,9 @@ export type ToolbarButtonProps = { * @param {ToolbarButtonProps} props - props for the component * @property {Function} onClick - on click handler * @property {ReactElement} icon - MUI Icon for button - * @property {SxProps} sx- optional MUI style object + * @property {SxProps} sx - (optional) MUI style object + * @property {string} id - (optional) the data-testid used in unit tests + * @property {boolean} isSmallViewPort - (optional) indicates whether the device is a small view port. * @returns {ReactElement} */ const ToolbarButton = forwardRef(function ToolbarButton( @@ -35,7 +38,7 @@ const ToolbarButton = forwardRef(function ToolbarButton( marginLeft: '0px', marginTop: '4px', marginRight: '12px', - width: '48px', + width: props.isSmallViewPort ? '42px' : '48px', height: '48px', backgroundColor: 'rgba(60, 64, 67, 0.55)', '&:hover': { diff --git a/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx b/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx index ca718211..c32e06bc 100644 --- a/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx +++ b/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx @@ -48,6 +48,7 @@ describe('ToolbarOverflowMenu', () => { render(); expect(screen.getByTestId('layout-toggle')).toBeVisible(); expect(screen.getByTestId('archiving-toggle')).toBeVisible(); + expect(screen.getByTestId('emoji-grid-toggle')).toBeVisible(); expect(screen.getByTestId('report-issue-button')).toBeVisible(); expect(screen.getByTestId('participant-list-toggle')).toBeVisible(); expect(screen.getByTestId('chat-toggle')).toBeVisible(); @@ -58,6 +59,7 @@ describe('ToolbarOverflowMenu', () => { render(); expect(screen.getByTestId('layout-toggle')).toBeVisible(); expect(screen.getByTestId('archiving-toggle')).toBeVisible(); + expect(screen.getByTestId('emoji-grid-toggle')).toBeVisible(); expect(screen.queryByTestId('report-issue-button')).not.toBeInTheDocument(); expect(screen.getByTestId('participant-list-toggle')).toBeVisible(); expect(screen.getByTestId('chat-toggle')).toBeVisible(); From d1905e173674c8304200792c22b4c1d522fdbd50 Mon Sep 17 00:00:00 2001 From: Misha Behei Date: Mon, 24 Feb 2025 19:51:45 -0600 Subject: [PATCH 04/11] forgot height --- .../src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx b/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx index bbc8ef2e..c73eb6dc 100644 --- a/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx +++ b/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx @@ -39,7 +39,7 @@ const ToolbarButton = forwardRef(function ToolbarButton( marginTop: '4px', marginRight: '12px', width: props.isSmallViewPort ? '42px' : '48px', - height: '48px', + height: props.isSmallViewPort ? '42px' : '48px', backgroundColor: 'rgba(60, 64, 67, 0.55)', '&:hover': { backgroundColor: 'rgba(60, 64, 67, 0.42)', From 1fe7848cdb441a9b05fc9b49e23c0d80b87f846f Mon Sep 17 00:00:00 2001 From: Misha Behei Date: Tue, 25 Feb 2025 12:36:32 -0600 Subject: [PATCH 05/11] bring it down --- .../components/MeetingRoom/ArchivingToggle/ArchivingToggle.tsx | 3 +++ .../components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx | 3 +++ .../MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx | 1 + 3 files changed, 7 insertions(+) diff --git a/frontend/src/components/MeetingRoom/ArchivingToggle/ArchivingToggle.tsx b/frontend/src/components/MeetingRoom/ArchivingToggle/ArchivingToggle.tsx index 5efc9986..da20e91e 100644 --- a/frontend/src/components/MeetingRoom/ArchivingToggle/ArchivingToggle.tsx +++ b/frontend/src/components/MeetingRoom/ArchivingToggle/ArchivingToggle.tsx @@ -80,6 +80,9 @@ const ArchivingToggle = (): ReactElement => { style={{ color: `${isRecording ? 'rgb(239 68 68)' : 'white'}` }} /> } + sx={{ + marginTop: isSmallViewport ? '0px' : '4px', + }} isSmallViewPort={isSmallViewport} /> diff --git a/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx b/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx index a20dc28a..69163c4d 100644 --- a/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx +++ b/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx @@ -43,6 +43,9 @@ const EmojiGridButton = ({ } ref={anchorRef} data-testid="emoji-grid-toggle" + sx={{ + marginTop: isSmallViewport ? '0px' : '4px', + }} isSmallViewPort={isSmallViewport} /> diff --git a/frontend/src/components/MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx b/frontend/src/components/MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx index 05fdabf1..b08b58e4 100644 --- a/frontend/src/components/MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx +++ b/frontend/src/components/MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx @@ -53,6 +53,7 @@ const LayoutToggleButton = ({ } sx={{ cursor: isScreenSharePresent ? 'not-allowed' : 'pointer', + marginTop: isSmallViewport ? '0px' : '4px', }} isSmallViewPort={isSmallViewport} /> From 5ce13734d147708a08630ed05d1a5a67459e3300 Mon Sep 17 00:00:00 2001 From: Misha Behei Date: Tue, 25 Feb 2025 15:51:24 -0600 Subject: [PATCH 06/11] missed it here --- .../ParticipantListToggleButton.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/components/MeetingRoom/ParticipantListToggleButton/ParticipantListToggleButton.tsx b/frontend/src/components/MeetingRoom/ParticipantListToggleButton/ParticipantListToggleButton.tsx index d73bab29..11d65061 100644 --- a/frontend/src/components/MeetingRoom/ParticipantListToggleButton/ParticipantListToggleButton.tsx +++ b/frontend/src/components/MeetingRoom/ParticipantListToggleButton/ParticipantListToggleButton.tsx @@ -49,11 +49,10 @@ const ParticipantListToggleButton = ({ sx={{ marginTop: '0px', marginRight: '0px', - width: isSmallViewport ? '42px' : '48px', - height: isSmallViewport ? '42px' : '48px', }} onClick={handleClick} icon={} + isSmallViewPort={isSmallViewport} /> From 7e13973a18e05bc725f4021ef6c2b674414e5e63 Mon Sep 17 00:00:00 2001 From: Misha Behei Date: Wed, 26 Feb 2025 11:05:57 -0800 Subject: [PATCH 07/11] fix up da tests --- .../components/MeetingRoom/ChatButton/ChatButton.tsx | 2 +- .../EmojiGridButton/EmojiGridButton.spec.tsx | 4 ++-- .../components/MeetingRoom/Toolbar/Toolbar.spec.tsx | 4 ++-- .../ToolbarOverflowButton.spec.tsx | 4 ++-- .../ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx | 12 ++++++------ 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/MeetingRoom/ChatButton/ChatButton.tsx b/frontend/src/components/MeetingRoom/ChatButton/ChatButton.tsx index c156afcb..43fcc73e 100644 --- a/frontend/src/components/MeetingRoom/ChatButton/ChatButton.tsx +++ b/frontend/src/components/MeetingRoom/ChatButton/ChatButton.tsx @@ -27,7 +27,7 @@ const ChatButton = ({ handleClick, isOpen }: ChatButtonProps): ReactElement => { { it('renders', () => { render(); - expect(screen.getByTestId('emoji-grid-button')).toBeVisible(); + expect(screen.getByTestId('emoji-grid-toggle')).toBeVisible(); }); it('clicking opens the emoji grid', () => { @@ -42,7 +42,7 @@ describe('EmojiGridButton', () => { expect(screen.queryByTestId('emoji-grid')).not.toBeInTheDocument(); act(() => { - screen.getByTestId('emoji-grid-button').click(); + screen.getByTestId('emoji-grid-toggle').click(); }); rerender(); diff --git a/frontend/src/components/MeetingRoom/Toolbar/Toolbar.spec.tsx b/frontend/src/components/MeetingRoom/Toolbar/Toolbar.spec.tsx index 46b81a2f..e6a9ab0a 100644 --- a/frontend/src/components/MeetingRoom/Toolbar/Toolbar.spec.tsx +++ b/frontend/src/components/MeetingRoom/Toolbar/Toolbar.spec.tsx @@ -71,7 +71,7 @@ describe('Toolbar', () => { expect(screen.queryByTestId('archiving-button')).not.toBeInTheDocument(); expect(screen.queryByTestId('screensharing-button')).not.toBeInTheDocument(); expect(screen.queryByTestId('archiving-button')).not.toBeInTheDocument(); - expect(screen.queryByTestId('emoji-grid-button')).not.toBeInTheDocument(); + expect(screen.queryByTestId('emoji-grid-toggle')).not.toBeInTheDocument(); }); it('on a normal viewport, displays all of the toolbar buttons', () => { @@ -83,6 +83,6 @@ describe('Toolbar', () => { expect(screen.queryByTestId('archiving-button')).toBeVisible(); expect(screen.queryByTestId('screensharing-button')).toBeVisible(); expect(screen.queryByTestId('archiving-button')).toBeVisible(); - expect(screen.queryByTestId('emoji-grid-button')).toBeVisible(); + expect(screen.queryByTestId('emoji-grid-toggle')).toBeVisible(); }); }); diff --git a/frontend/src/components/MeetingRoom/ToolbarOverflowButton/ToolbarOverflowButton.spec.tsx b/frontend/src/components/MeetingRoom/ToolbarOverflowButton/ToolbarOverflowButton.spec.tsx index 5606bbfd..da8a0dc1 100644 --- a/frontend/src/components/MeetingRoom/ToolbarOverflowButton/ToolbarOverflowButton.spec.tsx +++ b/frontend/src/components/MeetingRoom/ToolbarOverflowButton/ToolbarOverflowButton.spec.tsx @@ -42,7 +42,7 @@ describe('ToolbarOverflowButton', () => { render(); expect(screen.queryByTestId('layout-button')).not.toBeInTheDocument(); - expect(screen.queryByTestId('emoji-grid-button')).not.toBeInTheDocument(); + expect(screen.queryByTestId('emoji-grid-toggle')).not.toBeInTheDocument(); expect(screen.queryByTestId('archiving-button')).not.toBeInTheDocument(); act(() => { @@ -50,7 +50,7 @@ describe('ToolbarOverflowButton', () => { }); expect(screen.queryByTestId('layout-button')).toBeVisible(); - expect(screen.queryByTestId('emoji-grid-button')).toBeVisible(); + expect(screen.queryByTestId('emoji-grid-toggle')).toBeVisible(); expect(screen.queryByTestId('archiving-button')).toBeVisible(); }); diff --git a/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx b/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx index c32e06bc..614b8235 100644 --- a/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx +++ b/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx @@ -46,22 +46,22 @@ describe('ToolbarOverflowMenu', () => { it('renders all the available buttons including the Report Issue button if enabled', () => { vi.stubEnv('VITE_ENABLE_REPORT_ISSUE', 'true'); render(); - expect(screen.getByTestId('layout-toggle')).toBeVisible(); - expect(screen.getByTestId('archiving-toggle')).toBeVisible(); + expect(screen.getByTestId('layout-button')).toBeVisible(); + expect(screen.getByTestId('archiving-button')).toBeVisible(); expect(screen.getByTestId('emoji-grid-toggle')).toBeVisible(); expect(screen.getByTestId('report-issue-button')).toBeVisible(); expect(screen.getByTestId('participant-list-toggle')).toBeVisible(); - expect(screen.getByTestId('chat-toggle')).toBeVisible(); + expect(screen.getByTestId('chat-button')).toBeVisible(); }); it('does not render Report Issue button in overflow menu if it was disabled', () => { vi.stubEnv('VITE_ENABLE_REPORT_ISSUE', 'false'); render(); - expect(screen.getByTestId('layout-toggle')).toBeVisible(); - expect(screen.getByTestId('archiving-toggle')).toBeVisible(); + expect(screen.getByTestId('layout-button')).toBeVisible(); + expect(screen.getByTestId('archiving-button')).toBeVisible(); expect(screen.getByTestId('emoji-grid-toggle')).toBeVisible(); expect(screen.queryByTestId('report-issue-button')).not.toBeInTheDocument(); expect(screen.getByTestId('participant-list-toggle')).toBeVisible(); - expect(screen.getByTestId('chat-toggle')).toBeVisible(); + expect(screen.getByTestId('chat-button')).toBeVisible(); }); }); From 3bcdebf00b483ee28eae8ea1186f9daa40bf92fe Mon Sep 17 00:00:00 2001 From: Misha Behei Date: Wed, 26 Feb 2025 11:14:10 -0800 Subject: [PATCH 08/11] deconstruct --- .../components/MeetingRoom/ToolbarButton/ToolbarButton.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx b/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx index c73eb6dc..556c3b53 100644 --- a/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx +++ b/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx @@ -26,7 +26,7 @@ const ToolbarButton = forwardRef(function ToolbarButton( props: ToolbarButtonProps, ref: ForwardedRef ) { - const { icon: Icon, sx = {}, ...rest } = props; + const { icon: Icon, sx = {}, isSmallViewPort, ...rest } = props; return ( Date: Wed, 26 Feb 2025 15:25:55 -0800 Subject: [PATCH 09/11] need to align a bit better --- .../src/components/MeetingRoom/LayoutButton/LayoutButton.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.tsx b/frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.tsx index b1ec9d11..fc500061 100644 --- a/frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.tsx +++ b/frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.tsx @@ -51,7 +51,9 @@ const LayoutButton = ({ isScreenSharePresent }: LayoutButtonProps): ReactElement } sx={{ cursor: isScreenSharePresent ? 'not-allowed' : 'pointer', + // on the small view port devices we need to align the button marginTop: isSmallViewport ? '0px' : '4px', + marginLeft: isSmallViewport ? '12px' : '0px', }} isSmallViewPort={isSmallViewport} /> From afd5b01967365cc388654450d7dc440ed2fef21d Mon Sep 17 00:00:00 2001 From: Misha Behei Date: Mon, 3 Mar 2025 10:41:09 -0600 Subject: [PATCH 10/11] participant list --- .../ParticipantListButton/ParticipantListButton.tsx | 2 +- .../ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantListButton.tsx b/frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantListButton.tsx index 9092621e..3e3eb01a 100644 --- a/frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantListButton.tsx +++ b/frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantListButton.tsx @@ -45,7 +45,7 @@ const ParticipantListButton = ({ overlap="circular" > { expect(screen.getByTestId('archiving-button')).toBeVisible(); expect(screen.getByTestId('emoji-grid-toggle')).toBeVisible(); expect(screen.getByTestId('report-issue-button')).toBeVisible(); - expect(screen.getByTestId('participant-list-toggle')).toBeVisible(); + expect(screen.getByTestId('participant-list-button')).toBeVisible(); expect(screen.getByTestId('chat-button')).toBeVisible(); }); @@ -61,7 +61,7 @@ describe('ToolbarOverflowMenu', () => { expect(screen.getByTestId('archiving-button')).toBeVisible(); expect(screen.getByTestId('emoji-grid-toggle')).toBeVisible(); expect(screen.queryByTestId('report-issue-button')).not.toBeInTheDocument(); - expect(screen.getByTestId('participant-list-toggle')).toBeVisible(); + expect(screen.getByTestId('participant-list-button')).toBeVisible(); expect(screen.getByTestId('chat-button')).toBeVisible(); }); }); From e0314a237182819c641df6f1ac88acfe766a0b8b Mon Sep 17 00:00:00 2001 From: Misha Behei Date: Mon, 3 Mar 2025 10:42:50 -0600 Subject: [PATCH 11/11] emoji --- .../MeetingRoom/EmojiGridButton/EmojiGridButton.spec.tsx | 4 ++-- .../MeetingRoom/EmojiGridButton/EmojiGridButton.tsx | 2 +- frontend/src/components/MeetingRoom/Toolbar/Toolbar.spec.tsx | 4 ++-- .../ToolbarOverflowButton/ToolbarOverflowButton.spec.tsx | 4 ++-- .../ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx | 4 ++-- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.spec.tsx b/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.spec.tsx index 039e229d..3172bc7b 100644 --- a/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.spec.tsx +++ b/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.spec.tsx @@ -34,7 +34,7 @@ describe('EmojiGridButton', () => { it('renders', () => { render(); - expect(screen.getByTestId('emoji-grid-toggle')).toBeVisible(); + expect(screen.getByTestId('emoji-grid-button')).toBeVisible(); }); it('clicking opens the emoji grid', () => { @@ -42,7 +42,7 @@ describe('EmojiGridButton', () => { expect(screen.queryByTestId('emoji-grid')).not.toBeInTheDocument(); act(() => { - screen.getByTestId('emoji-grid-toggle').click(); + screen.getByTestId('emoji-grid-button').click(); }); rerender(); diff --git a/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx b/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx index 69163c4d..9eaa1114 100644 --- a/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx +++ b/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx @@ -42,7 +42,7 @@ const EmojiGridButton = ({ /> } ref={anchorRef} - data-testid="emoji-grid-toggle" + data-testid="emoji-grid-button" sx={{ marginTop: isSmallViewport ? '0px' : '4px', }} diff --git a/frontend/src/components/MeetingRoom/Toolbar/Toolbar.spec.tsx b/frontend/src/components/MeetingRoom/Toolbar/Toolbar.spec.tsx index e6a9ab0a..46b81a2f 100644 --- a/frontend/src/components/MeetingRoom/Toolbar/Toolbar.spec.tsx +++ b/frontend/src/components/MeetingRoom/Toolbar/Toolbar.spec.tsx @@ -71,7 +71,7 @@ describe('Toolbar', () => { expect(screen.queryByTestId('archiving-button')).not.toBeInTheDocument(); expect(screen.queryByTestId('screensharing-button')).not.toBeInTheDocument(); expect(screen.queryByTestId('archiving-button')).not.toBeInTheDocument(); - expect(screen.queryByTestId('emoji-grid-toggle')).not.toBeInTheDocument(); + expect(screen.queryByTestId('emoji-grid-button')).not.toBeInTheDocument(); }); it('on a normal viewport, displays all of the toolbar buttons', () => { @@ -83,6 +83,6 @@ describe('Toolbar', () => { expect(screen.queryByTestId('archiving-button')).toBeVisible(); expect(screen.queryByTestId('screensharing-button')).toBeVisible(); expect(screen.queryByTestId('archiving-button')).toBeVisible(); - expect(screen.queryByTestId('emoji-grid-toggle')).toBeVisible(); + expect(screen.queryByTestId('emoji-grid-button')).toBeVisible(); }); }); diff --git a/frontend/src/components/MeetingRoom/ToolbarOverflowButton/ToolbarOverflowButton.spec.tsx b/frontend/src/components/MeetingRoom/ToolbarOverflowButton/ToolbarOverflowButton.spec.tsx index da8a0dc1..5606bbfd 100644 --- a/frontend/src/components/MeetingRoom/ToolbarOverflowButton/ToolbarOverflowButton.spec.tsx +++ b/frontend/src/components/MeetingRoom/ToolbarOverflowButton/ToolbarOverflowButton.spec.tsx @@ -42,7 +42,7 @@ describe('ToolbarOverflowButton', () => { render(); expect(screen.queryByTestId('layout-button')).not.toBeInTheDocument(); - expect(screen.queryByTestId('emoji-grid-toggle')).not.toBeInTheDocument(); + expect(screen.queryByTestId('emoji-grid-button')).not.toBeInTheDocument(); expect(screen.queryByTestId('archiving-button')).not.toBeInTheDocument(); act(() => { @@ -50,7 +50,7 @@ describe('ToolbarOverflowButton', () => { }); expect(screen.queryByTestId('layout-button')).toBeVisible(); - expect(screen.queryByTestId('emoji-grid-toggle')).toBeVisible(); + expect(screen.queryByTestId('emoji-grid-button')).toBeVisible(); expect(screen.queryByTestId('archiving-button')).toBeVisible(); }); diff --git a/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx b/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx index 23f9639f..b0ccb2a2 100644 --- a/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx +++ b/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx @@ -48,7 +48,7 @@ describe('ToolbarOverflowMenu', () => { render(); expect(screen.getByTestId('layout-button')).toBeVisible(); expect(screen.getByTestId('archiving-button')).toBeVisible(); - expect(screen.getByTestId('emoji-grid-toggle')).toBeVisible(); + expect(screen.getByTestId('emoji-grid-button')).toBeVisible(); expect(screen.getByTestId('report-issue-button')).toBeVisible(); expect(screen.getByTestId('participant-list-button')).toBeVisible(); expect(screen.getByTestId('chat-button')).toBeVisible(); @@ -59,7 +59,7 @@ describe('ToolbarOverflowMenu', () => { render(); expect(screen.getByTestId('layout-button')).toBeVisible(); expect(screen.getByTestId('archiving-button')).toBeVisible(); - expect(screen.getByTestId('emoji-grid-toggle')).toBeVisible(); + expect(screen.getByTestId('emoji-grid-button')).toBeVisible(); expect(screen.queryByTestId('report-issue-button')).not.toBeInTheDocument(); expect(screen.getByTestId('participant-list-button')).toBeVisible(); expect(screen.getByTestId('chat-button')).toBeVisible();