VIDCS-3452: Clean up language for buttons in VERA (#99)

frontend/src/components/MeetingRoom/ArchivingToggle/ArchivingToggle.tsx → frontend/src/components/MeetingRoom/ArchivingButton/ArchivingButton.tsx

@@ -8,14 +8,14 @@ import { startArchiving, stopArchiving } from '../../../api/archiving';
 import useSessionContext from '../../../hooks/useSessionContext';
 
 /**
- * ArchivingToggle Component
+ * ArchivingButton Component
  *
  * Displays a button and handles the archiving functionality. If a meeting is currently being recorded,
  * will confirm that a user wishes to stop the recording. If a meeting is not being recorded, prompts
  * the user before starting the archive.
- * @returns {ReactElement} - The ArchivingToggle component.
+ * @returns {ReactElement} - The ArchivingButton component.
  */
-const ArchivingToggle = (): ReactElement => {
+const ArchivingButton = (): ReactElement => {
   const roomName = useRoomName();
   const { archiveId } = useSessionContext();
   const isRecording = !!archiveId;
@@ -72,7 +72,7 @@ const ArchivingToggle = (): ReactElement => {
       <Tooltip title={title} aria-label="video layout">
         <ToolbarButton
           onClick={handleButtonClick}
-          data-testid="archiving-toggle"
+          data-testid="archiving-button"
           icon={
             <RadioButtonCheckedIcon
               style={{ color: `${isRecording ? 'rgb(239 68 68)' : 'white'}` }}
@@ -89,4 +89,4 @@ const ArchivingToggle = (): ReactElement => {
     </>
   );
 };
-export default ArchivingToggle;
+export default ArchivingButton;

frontend/src/components/MeetingRoom/ArchivingButton/index.tsx

@@ -0,0 +1,3 @@
+import ArchivingButton from './ArchivingButton';
+
+export default ArchivingButton;

frontend/src/components/MeetingRoom/ChatToggleButton/ChatToggleButton.spec.tsx → frontend/src/components/MeetingRoom/ChatButton/ChatButton.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, Mock, vi } from 'vitest';
-import ChatToggleButton from './ChatToggleButton';
+import ChatButton from './ChatButton';
 import useSessionContext from '../../../hooks/useSessionContext';
 import { SessionContextType } from '../../../Context/SessionProvider/session';
 
@@ -10,15 +10,15 @@ const sessionContext = {
   unreadCount: 10,
 } as unknown as SessionContextType;
 
-describe('ChatToggleButton', () => {
+describe('ChatButton', () => {
   beforeEach(() => {
     mockUseSessionContext.mockReturnValue(sessionContext);
   });
 
   it('should show unread message number', () => {
-    render(<ChatToggleButton handleClick={() => {}} isOpen={false} />);
-    expect(screen.getByTestId('chat-toggle-unread-count')).toBeVisible();
-    expect(screen.getByTestId('chat-toggle-unread-count').textContent).toBe('10');
+    render(<ChatButton handleClick={() => {}} isOpen={false} />);
+    expect(screen.getByTestId('chat-button-unread-count')).toBeVisible();
+    expect(screen.getByTestId('chat-button-unread-count').textContent).toBe('10');
   });
 
   it('should not show unread message number when number is 0', () => {
@@ -27,27 +27,27 @@ describe('ChatToggleButton', () => {
       unreadCount: 0,
     } as unknown as SessionContextType;
     mockUseSessionContext.mockReturnValue(sessionContextAllRead);
-    render(<ChatToggleButton handleClick={() => {}} isOpen={false} />);
+    render(<ChatButton handleClick={() => {}} isOpen={false} />);
 
-    const badge = screen.getByTestId('chat-toggle-unread-count');
+    const badge = screen.getByTestId('chat-button-unread-count');
     // Check badge is hidden:  MUI hides badge by setting dimensions to 0x0
     expect(badge.offsetHeight).toBe(0);
     expect(badge.offsetWidth).toBe(0);
   });
 
   it('should have a white icon when the list is closed', () => {
-    render(<ChatToggleButton handleClick={() => {}} isOpen={false} />);
+    render(<ChatButton handleClick={() => {}} isOpen={false} />);
     expect(screen.getByTestId('ChatIcon')).toHaveStyle('color: rgb(255, 255, 255)');
   });
 
   it('should have a blue icon when the chat is open', () => {
-    render(<ChatToggleButton handleClick={() => {}} isOpen />);
+    render(<ChatButton handleClick={() => {}} isOpen />);
     expect(screen.getByTestId('ChatIcon')).toHaveStyle('color: rgb(130, 177, 255)');
   });
 
   it('should invoke callback on click', () => {
     const handleClick = vi.fn();
-    render(<ChatToggleButton handleClick={handleClick} isOpen />);
+    render(<ChatButton handleClick={handleClick} isOpen />);
     screen.getByRole('button').click();
     expect(handleClick).toHaveBeenCalled();
   });

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

@@ -5,22 +5,22 @@ import { ReactElement } from 'react';
 import ToolbarButton from '../ToolbarButton';
 import UnreadMessagesBadge from '../UnreadMessagesBadge';
 
-export type ChatToggleButtonProps = {
+export type ChatButtonProps = {
   handleClick: () => void;
   isOpen: boolean;
 };
 
 /**
- * ChatToggleButton Component
+ * ChatButton Component
  *
  * Toolbar button to open and close the chat panel.
  * Also displays an unread message count badge.
- * @param {ChatToggleButtonProps} props - the props for this component
+ * @param {ChatButtonProps} props - the props for this component
  *   @property {() => void} handleClick - click handler to toggle open chat panel
  *   @property {boolean} isOpen - true if chat is currently open, false if not
- * @returns {ReactElement} - ChatToggleButton
+ * @returns {ReactElement} - ChatButton
  */
-const ChatToggleButton = ({ handleClick, isOpen }: ChatToggleButtonProps): ReactElement => {
+const ChatButton = ({ handleClick, isOpen }: ChatButtonProps): ReactElement => {
   return (
     <Tooltip title={isOpen ? 'Close chat' : 'Open chat'} aria-label="toggle chat">
       <UnreadMessagesBadge>
@@ -37,4 +37,4 @@ const ChatToggleButton = ({ handleClick, isOpen }: ChatToggleButtonProps): React
   );
 };
 
-export default ChatToggleButton;
+export default ChatButton;

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

@@ -0,0 +1,3 @@
+import ChatButton from './ChatButton';
+
+export default ChatButton;

frontend/src/components/MeetingRoom/EmojiGrid/EmojiGrid.tsx

@@ -29,13 +29,11 @@ const EmojiGrid = ({
 }: EmojiGridProps): ReactElement => {
   const isSmallViewport = useIsSmallViewport();
 
-  const handleClickAway = (event: MouseEvent | TouchEvent) => {
-    const target = event.target as HTMLElement;
-
-    if (isSmallViewport && !target.closest('#emoji-grid-toggle')) {
+  const handleClickAway = () => {
+    if (isSmallViewport) {
       return;
     }
-    // If a user clicks the toggle button, we save their preference for later. If a user doesn't select
+    // If a user clicks the toggle button on mobile, we save their preference for later. If a user doesn't select
     // the toggle, the clickAwayListener will close the grid.
     setIsEmojiGridOpen(false);
   };

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

@@ -34,15 +34,15 @@ describe('EmojiGridButton', () => {
   it('renders', () => {
     render(<TestComponent />);
 
-    expect(screen.getByTestId('emoji-grid-toggle')).toBeVisible();
+    expect(screen.getByTestId('emoji-grid-button')).toBeVisible();
   });
 
   it('clicking opens the emoji grid', () => {
     const { rerender } = render(<TestComponent />);
     expect(screen.queryByTestId('emoji-grid')).not.toBeInTheDocument();
 
     act(() => {
-      screen.getByTestId('emoji-grid-toggle').click();
+      screen.getByTestId('emoji-grid-button').click();
     });
 
     rerender(<TestComponent />);

frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx

@@ -41,7 +41,7 @@ const EmojiGridButton = ({
             />
           }
           ref={anchorRef}
-          data-testid="emoji-grid-toggle"
+          data-testid="emoji-grid-button"
         />
       </Tooltip>
 

frontend/src/components/MeetingRoom/LayoutToggleButton/LayoutToggleButton.spec.tsx → frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.spec.tsx

@@ -1,30 +1,30 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi, Mock, beforeEach } from 'vitest';
 import userEvent from '@testing-library/user-event';
-import LayoutToggleButton from './LayoutToggleButton';
+import LayoutButton from './LayoutButton';
 import useSessionContext from '../../../hooks/useSessionContext';
 
 vi.mock('../../../hooks/useSessionContext');
 
-describe('LayoutToggleButton', () => {
+describe('LayoutButton', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
   it('should render the sidebar view icon if it is an active speaker layout', () => {
     (useSessionContext as Mock).mockReturnValue({ layoutMode: 'active-speaker' });
-    render(<LayoutToggleButton isScreenSharePresent={false} />);
+    render(<LayoutButton isScreenSharePresent={false} />);
     expect(screen.getByTestId('ViewSidebarIcon')).toBeInTheDocument();
   });
 
   it('should render the sidebar window icon if it is a grid layout', () => {
     (useSessionContext as Mock).mockReturnValue({ layoutMode: 'grid' });
-    render(<LayoutToggleButton isScreenSharePresent={false} />);
+    render(<LayoutButton isScreenSharePresent={false} />);
     expect(screen.getByTestId('WindowIcon')).toBeInTheDocument();
   });
 
   it('should render the tooltip title that mentions switching to grid layout', async () => {
     (useSessionContext as Mock).mockReturnValue({ layoutMode: 'active-speaker' });
-    render(<LayoutToggleButton isScreenSharePresent={false} />);
+    render(<LayoutButton isScreenSharePresent={false} />);
     const button = await screen.findByRole('button');
     await userEvent.hover(button);
     const tooltip = await screen.findByRole('tooltip');
@@ -34,7 +34,7 @@ describe('LayoutToggleButton', () => {
 
   it('should render the tooltip title that mentions switching to active speaker layout', async () => {
     (useSessionContext as Mock).mockReturnValue({ layoutMode: 'grid' });
-    render(<LayoutToggleButton isScreenSharePresent={false} />);
+    render(<LayoutButton isScreenSharePresent={false} />);
     const button = await screen.findByRole('button');
     await userEvent.hover(button);
     const tooltip = await screen.findByRole('tooltip');
@@ -44,7 +44,7 @@ describe('LayoutToggleButton', () => {
 
   it('should render the tooltip title that mentions switching layouts is not allowed when screenshare is present if currently in the grid mode', async () => {
     (useSessionContext as Mock).mockReturnValue({ layoutMode: 'grid' });
-    render(<LayoutToggleButton isScreenSharePresent />);
+    render(<LayoutButton isScreenSharePresent />);
     const button = await screen.findByRole('button');
     await userEvent.hover(button);
     const tooltip = await screen.findByRole('tooltip');
@@ -54,7 +54,7 @@ describe('LayoutToggleButton', () => {
 
   it('should render the tooltip title that mentions switching layouts is not allowed when screenshare is present if currently in the active speaker mode', async () => {
     (useSessionContext as Mock).mockReturnValue({ layoutMode: 'active-speaker' });
-    render(<LayoutToggleButton isScreenSharePresent />);
+    render(<LayoutButton isScreenSharePresent />);
     const button = await screen.findByRole('button');
     await userEvent.hover(button);
     const tooltip = await screen.findByRole('tooltip');

frontend/src/components/MeetingRoom/LayoutToggleButton/LayoutToggleButton.tsx → frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.tsx

@@ -5,20 +5,18 @@ import { ReactElement } from 'react';
 import useSessionContext from '../../../hooks/useSessionContext';
 import ToolbarButton from '../ToolbarButton';
 
-type LayoutToggleButtonProps = {
+type LayoutButtonProps = {
   isScreenSharePresent: boolean;
 };
 
 /**
- * LayoutToggleButton Component
+ * LayoutButton Component
  *
  * Displays a button to toggle the meeting room layout for the user between `grid` and `active-speaker`.
  * @param {boolean} isScreenSharePresent - Indicates whether there is a screenshare currently in the session.
- * @returns {ReactElement} The LayoutToggleButton component.
+ * @returns {ReactElement} The LayoutButton component.
  */
-const LayoutToggleButton = ({
-  isScreenSharePresent,
-}: LayoutToggleButtonProps): ReactElement | false => {
+const LayoutButton = ({ isScreenSharePresent }: LayoutButtonProps): ReactElement | false => {
   const { layoutMode, setLayoutMode } = useSessionContext();
   const isGrid = layoutMode === 'grid';
 
@@ -40,7 +38,7 @@ const LayoutToggleButton = ({
     <Tooltip title={getTooltipTitle()} aria-label="video layout">
       <ToolbarButton
         onClick={handleClick}
-        data-testid="layout-toggle"
+        data-testid="layout-button"
         icon={
           !isGrid ? (
             <ViewSidebarIcon className={isScreenSharePresent ? 'text-gray-500' : 'text-white'} />
@@ -56,4 +54,4 @@ const LayoutToggleButton = ({
   );
 };
 
-export default LayoutToggleButton;
+export default LayoutButton;

frontend/src/components/MeetingRoom/LayoutButton/index.tsx

@@ -0,0 +1,3 @@
+import LayoutButton from './LayoutButton';
+
+export default LayoutButton;

frontend/src/components/MeetingRoom/ParticipantListToggleButton/ParticipantListToggleButton.tsx → frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantListButton.tsx

@@ -11,17 +11,17 @@ export type ParticipantListButtonProps = {
   participantCount: number;
 };
 /**
- * ParticipantListToggleButton Component
+ * ParticipantListButton Component
  *
  * Toolbar button to open and close participant list
  * Also displays participant count badge
  * @param {ParticipantListButtonProps} props - the props for this component
  *   @property {() => void} handleClick - click handler to toggle open participant list
  *   @property {boolean} isOpen - true if list is currently open, false if not
  *   @property {number} participantCount - number of current participants in call, to be displayed in badge
- * @returns {ReactElement} - ParticipantListToggleButton
+ * @returns {ReactElement} - ParticipantListButton
  */
-const ParticipantListToggleButton = ({
+const ParticipantListButton = ({
   handleClick,
   isOpen,
   participantCount,
@@ -56,4 +56,4 @@ const ParticipantListToggleButton = ({
   );
 };
 
-export default ParticipantListToggleButton;
+export default ParticipantListButton;

frontend/src/components/MeetingRoom/ParticipantListToggleButton/ParticipantsListToggleButton.spec.tsx → frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantsListButton.spec.tsx

@@ -1,27 +1,23 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import ParticipantListToggleButton from './ParticipantListToggleButton';
+import ParticipantListButton from './ParticipantListButton';
 
-describe('ParticipantListToggleButton', () => {
+describe('ParticipantListButton', () => {
   it('should show participant number', () => {
-    render(
-      <ParticipantListToggleButton handleClick={() => {}} isOpen={false} participantCount={10} />
-    );
+    render(<ParticipantListButton handleClick={() => {}} isOpen={false} participantCount={10} />);
     expect(screen.getByText('10')).toBeVisible();
   });
   it('should have a white icon when the list is closed', () => {
-    render(
-      <ParticipantListToggleButton handleClick={() => {}} isOpen={false} participantCount={10} />
-    );
+    render(<ParticipantListButton handleClick={() => {}} isOpen={false} participantCount={10} />);
     expect(screen.getByTestId('PeopleIcon')).toHaveStyle('color: rgb(255, 255, 255)');
   });
   it('should have a blue icon when the list is open', () => {
-    render(<ParticipantListToggleButton handleClick={() => {}} isOpen participantCount={10} />);
+    render(<ParticipantListButton handleClick={() => {}} isOpen participantCount={10} />);
     expect(screen.getByTestId('PeopleIcon')).toHaveStyle('color: rgb(130, 177, 255)');
   });
   it('should invoke callback on click', () => {
     const handleClick = vi.fn();
-    render(<ParticipantListToggleButton handleClick={handleClick} isOpen participantCount={10} />);
+    render(<ParticipantListButton handleClick={handleClick} isOpen participantCount={10} />);
     screen.getByRole('button').click();
     expect(handleClick).toHaveBeenCalled();
   });

frontend/src/components/MeetingRoom/ParticipantListButton/index.tsx

@@ -0,0 +1,3 @@
+import ParticipantListButton from './ParticipantListButton';
+
+export default ParticipantListButton;

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

@@ -68,10 +68,10 @@ describe('Toolbar', () => {
 
     expect(screen.queryByTestId('hidden-toolbar-items')).toBeVisible();
 
-    expect(screen.queryByTestId('archiving-toggle')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('screensharing-toggle')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('archiving-toggle')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('emoji-grid-toggle')).not.toBeInTheDocument();
+    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();
   });
 
   it('on a normal viewport, displays all of the toolbar buttons', () => {
@@ -80,9 +80,9 @@ describe('Toolbar', () => {
 
     render(<Toolbar {...defaultProps} />);
 
-    expect(screen.queryByTestId('archiving-toggle')).toBeVisible();
-    expect(screen.queryByTestId('screensharing-toggle')).toBeVisible();
-    expect(screen.queryByTestId('archiving-toggle')).toBeVisible();
-    expect(screen.queryByTestId('emoji-grid-toggle')).toBeVisible();
+    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();
   });
 });