VIDCS-3473: Use Popper instead of Menu and close after clicking pin

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

@@ -32,6 +32,16 @@ describe('ParticipantListItem', () => {
     mockUseSessionContext.mockImplementation(() => mockSessionContext);
   });
 
+  it('closes menu after clicking menu item', async () => {
+    render(<ParticipantListItemMenu {...defaultProps} />);
+    const menuButton = screen.getByRole('button');
+    await act(() => menuButton.click());
+    expect(screen.getByTestId('pin-menu-item')).toBeVisible();
+    const pinButton = await screen.getByText('Pin John Doe');
+    await act(() => pinButton.click());
+    expect(screen.queryByTestId('pin-menu-item')).not.toBeInTheDocument();
+  });
+
   it('can pin participant', async () => {
     render(<ParticipantListItemMenu {...defaultProps} />);
     const menuButton = screen.getByRole('button');

frontend/src/components/MeetingRoom/ParticipantListItemMenu/ParticipantListItemMenu.tsx

@@ -1,5 +1,5 @@
 import { useState, MouseEvent, ReactElement } from 'react';
-import { IconButton, Menu } from '@mui/material';
+import { ClickAwayListener, IconButton, Paper, Popper } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { SubscriberWrapper } from '../../../types/session';
 import ParticipantPinMenuItem from './ParticipantPinMenuItem';
@@ -35,20 +35,25 @@ const ParticipantListItemMenu = ({
       <IconButton onClick={handleClick} sx={{ marginRight: '-8px' }}>
         <MoreVertIcon sx={{ fontSize: '18px' }} />
       </IconButton>
-      <Menu
-        anchorEl={anchorEl}
-        open={isOpen}
-        onClose={handleClose}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 250,
-        }}
-      >
-        <ParticipantPinMenuItem
-          subscriberWrapper={subscriberWrapper}
-          participantName={participantName}
-        />
-      </Menu>
+      <Popper open={isOpen} anchorEl={anchorEl} placement="bottom-start">
+        <ClickAwayListener onClickAway={handleClose}>
+          <Paper
+            elevation={4}
+            sx={{
+              paddingTop: 1,
+              paddingBottom: 1,
+              borderRadius: 1,
+              position: 'relative',
+            }}
+          >
+            <ParticipantPinMenuItem
+              handleClick={handleClose}
+              subscriberWrapper={subscriberWrapper}
+              participantName={participantName}
+            />
+          </Paper>
+        </ClickAwayListener>
+      </Popper>
     </>
   );
 };

frontend/src/components/MeetingRoom/ParticipantListItemMenu/ParticipantPinMenuItem.tsx

@@ -6,6 +6,7 @@ import PushPinOffIcon from '../../Icons/PushPinOffIcon';
 import useSessionContext from '../../../hooks/useSessionContext';
 
 export type ParticipantPinMenuItemProps = {
+  handleClick: () => void;
   participantName: string;
   subscriberWrapper: SubscriberWrapper;
 };
@@ -14,11 +15,13 @@ export type ParticipantPinMenuItemProps = {
  * ParticipantPinMenuItem
  * renders a MenuItem button to pin or unpin a participant
  * @param {ParticipantPinMenuItemProps} props - component props.
+ *  @property {Function} handleClick - click handler for item
  *  @property {string} participantName - participant name.
  *  @property {SubscriberWrapper} subscriberWrapper -  The SubscriberWrapper for the participant.
  * @returns {ReactElement} - ParticipantPinMenuItem
  */
 const ParticipantPinMenuItem = ({
+  handleClick,
   participantName,
   subscriberWrapper,
 }: ParticipantPinMenuItemProps): ReactElement => {
@@ -39,9 +42,15 @@ const ParticipantPinMenuItem = ({
     if (!isDisabled) {
       pinSubscriber(id);
     }
+    handleClick();
   };
   return (
-    <MenuItem disabled={isDisabled} sx={{ width: '280px' }} onClick={handlePinClick}>
+    <MenuItem
+      data-testid="pin-menu-item"
+      disabled={isDisabled}
+      sx={{ width: '280px' }}
+      onClick={handlePinClick}
+    >
       <ListItemIcon>
         {isPinned ? (
           <PushPinOffIcon fontSize="small" sx={{ color: 'black' }} />