VIDCS-3321: Implement participant list toggle button, chat button, report issue button on mobile

frontend/src/components/MeetingRoom/ArchivingButton/ArchivingButton.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';
 
 /**
  * ArchivingButton Component
@@ -67,6 +68,7 @@ const ArchivingButton = (): ReactElement => {
     handleDialogClick(isRecording ? 'stop' : 'start');
   };
 
+  const isSmallViewport = useIsSmallViewport();
   return (
     <>
       <Tooltip title={title} aria-label="video layout">
@@ -78,6 +80,10 @@ const ArchivingButton = (): ReactElement => {
               style={{ color: `${isRecording ? 'rgb(239 68 68)' : 'white'}` }}
             />
           }
+          sx={{
+            marginTop: isSmallViewport ? '0px' : '4px',
+          }}
+          isSmallViewPort={isSmallViewport}
         />
       </Tooltip>
       <PopupDialog

frontend/src/components/MeetingRoom/ChatButton/ChatButton.tsx

@@ -3,6 +3,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { blue } from '@mui/material/colors';
 import { ReactElement } from 'react';
 import ToolbarButton from '../ToolbarButton';
+import useIsSmallViewport from '../../../hooks/useIsSmallViewport';
 import UnreadMessagesBadge from '../UnreadMessagesBadge';
 
 export type ChatButtonProps = {
@@ -21,16 +22,19 @@ export type ChatButtonProps = {
  * @returns {ReactElement} - ChatButton
  */
 const ChatButton = ({ handleClick, isOpen }: ChatButtonProps): ReactElement => {
+  const isSmallViewport = useIsSmallViewport();
   return (
     <Tooltip title={isOpen ? 'Close chat' : 'Open chat'} aria-label="toggle chat">
       <UnreadMessagesBadge>
         <ToolbarButton
+          data-testid="chat-button"
           sx={{
             marginTop: '0px',
             marginRight: '0px',
           }}
           onClick={handleClick}
           icon={<ChatIcon sx={{ color: isOpen ? blue.A100 : 'white' }} />}
+          isSmallViewPort={isSmallViewport}
         />
       </UnreadMessagesBadge>
     </Tooltip>

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 (
     <>
       <Tooltip title="Express yourself" aria-label="open sendable emoji menu">
@@ -42,6 +43,10 @@ const EmojiGridButton = ({
           }
           ref={anchorRef}
           data-testid="emoji-grid-button"
+          sx={{
+            marginTop: isSmallViewport ? '0px' : '4px',
+          }}
+          isSmallViewPort={isSmallViewport}
         />
       </Tooltip>
 

frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.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 LayoutButtonProps = {
   isScreenSharePresent: boolean;
@@ -34,6 +35,8 @@ const LayoutButton = ({ isScreenSharePresent }: LayoutButtonProps): ReactElement
     return isGrid ? 'Switch to Active Speaker layout' : 'Switch to Grid layout';
   };
 
+  const isSmallViewport = useIsSmallViewport();
+
   return (
     <Tooltip title={getTooltipTitle()} aria-label="video layout">
       <ToolbarButton
@@ -48,7 +51,11 @@ 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}
       />
     </Tooltip>
   );

frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantListButton.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 ParticipantListButton = ({
   isOpen,
   participantCount,
 }: ParticipantListButtonProps): ReactElement => {
+  const isSmallViewport = useIsSmallViewport();
   return (
     <div className="pr-3">
       <Tooltip
@@ -43,12 +45,14 @@ const ParticipantListButton = ({
           overlap="circular"
         >
           <ToolbarButton
+            data-testid="participant-list-button"
             sx={{
               marginTop: '0px',
               marginRight: '0px',
             }}
             onClick={handleClick}
             icon={<PeopleIcon sx={{ color: isOpen ? blue.A100 : 'white' }} />}
+            isSmallViewPort={isSmallViewport}
           />
         </Badge>
       </Tooltip>

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,8 +18,9 @@ export type ReportIssueButtonProps = {
  */
 const ReportIssueButton = ({ handleClick, isOpen }: ReportIssueButtonProps): ReactElement => {
   const anchorRef = useRef<HTMLButtonElement>(null);
+  const isSmallViewport = useIsSmallViewport();
   return (
-    <div className={`hidden ${displayOnDesktop()} px-3`}>
+    <div className="pr-3">
       <Tooltip title="Report issue" aria-label="open report issue menu">
         <ToolbarButton
           data-testid="report-issue-button"
@@ -30,6 +31,7 @@ const ReportIssueButton = ({ handleClick, isOpen }: ReportIssueButtonProps): Rea
           onClick={handleClick}
           icon={<FeedbackIcon style={{ color: `${!isOpen ? 'white' : 'rgb(138, 180, 248)'}` }} />}
           ref={anchorRef}
+          isSmallViewPort={isSmallViewport}
         />
       </Tooltip>
     </div>

frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx

@@ -8,6 +8,7 @@ export type ToolbarButtonProps = {
   icon: ReactElement;
   sx?: SxProps;
   id?: string;
+  isSmallViewPort?: boolean;
 };
 
 /**
@@ -16,14 +17,16 @@ 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(
   props: ToolbarButtonProps,
   ref: ForwardedRef<HTMLButtonElement>
 ) {
-  const { icon: Icon, sx = {}, ...rest } = props;
+  const { icon: Icon, sx = {}, isSmallViewPort, ...rest } = props;
 
   return (
     <IconButton
@@ -35,8 +38,8 @@ const ToolbarButton = forwardRef(function ToolbarButton(
         marginLeft: '0px',
         marginTop: '4px',
         marginRight: '12px',
-        width: '48px',
-        height: '48px',
+        width: isSmallViewPort ? '42px' : '48px',
+        height: isSmallViewPort ? '42px' : '48px',
         backgroundColor: 'rgba(60, 64, 67, 0.55)',
         '&:hover': {
           backgroundColor: 'rgba(60, 64, 67, 0.42)',

frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx

@@ -42,4 +42,26 @@ 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(<TestComponent defaultOpen />);
+    expect(screen.getByTestId('layout-button')).toBeVisible();
+    expect(screen.getByTestId('archiving-button')).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();
+  });
+
+  it('does not render Report Issue button in overflow menu if it was disabled', () => {
+    vi.stubEnv('VITE_ENABLE_REPORT_ISSUE', 'false');
+    render(<TestComponent defaultOpen />);
+    expect(screen.getByTestId('layout-button')).toBeVisible();
+    expect(screen.getByTestId('archiving-button')).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();
+  });
 });

frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.tsx

@@ -3,6 +3,9 @@ import { Grow, Paper, Popper } from '@mui/material';
 import { Dispatch, ReactElement, RefObject, SetStateAction } from 'react';
 import ArchivingButton from '../ArchivingButton';
 import EmojiGridButton from '../EmojiGridButton';
+import ParticipantListButton from '../ParticipantListButton';
+import ChatButton from '../ChatButton';
+import ReportIssueButton from '../ReportIssueButton';
 import LayoutButton from '../LayoutButton';
 import useSessionContext from '../../../hooks/useSessionContext';
 
@@ -33,9 +36,17 @@ const ToolbarOverflowMenu = ({
   anchorRef,
   handleClickAway,
 }: ToolbarOverflowMenuProps): ReactElement => {
-  const { subscriberWrappers } = useSessionContext();
+  const {
+    subscriberWrappers,
+    rightPanelActiveTab,
+    toggleParticipantList,
+    toggleChat,
+    toggleReportIssue,
+  } = 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 (
     <Popper
       open={isToolbarOverflowMenuOpen}
@@ -82,6 +93,18 @@ const ToolbarOverflowMenu = ({
                   isParentOpen={isToolbarOverflowMenuOpen}
                 />
                 <ArchivingButton />
+                {isReportIssueEnabled && (
+                  <ReportIssueButton
+                    isOpen={rightPanelActiveTab === 'issues'}
+                    handleClick={toggleReportIssue}
+                  />
+                )}
+                <ParticipantListButton
+                  isOpen={rightPanelActiveTab === 'participant-list'}
+                  handleClick={toggleParticipantList}
+                  participantCount={participantCount}
+                />
+                <ChatButton isOpen={rightPanelActiveTab === 'chat'} handleClick={toggleChat} />
               </Paper>
             </ClickAwayListener>
           </div>