Feature 2244 avatar click

web-ui/src/components/edit_skills/EditSkillsCard.test.jsx

@@ -5,7 +5,6 @@ import { AppContextProvider } from '../../context/AppContext';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 import { BrowserRouter } from 'react-router-dom';
-import { act } from '@testing-library/react';
 
 const currentUserProfile = {
   id: 9876,

web-ui/src/components/menu/Menu.jsx

@@ -17,7 +17,6 @@ import { UPDATE_TOAST } from '../../context/actions';
 import { useLocation, Link } from 'react-router-dom';
 import { AppContext } from '../../context/AppContext';
 import { getAvatarURL } from '../../api/api';
-import AvatarMenu from '@mui/material/Menu';
 
 import MenuIcon from '@mui/icons-material/Menu';
 import { styled, useTheme } from '@mui/material/styles';
@@ -32,7 +31,6 @@ import {
   List,
   ListItem,
   ListItemText,
-  MenuItem,
   Modal,
   Toolbar
 } from '@mui/material';
@@ -149,7 +147,6 @@ function Menu() {
 
   const [mobileOpen, setMobileOpen] = useState(false);
   const [open, setOpen] = useState(false);
-  const [anchorEl, setAnchorEl] = useState(null);
   const [showHoursUpload, setShowHoursUpload] = useState(false);
   const [selectedFile, setSelectedFile] = useState(null);
   const feedbackLinks = getFeedbackLinks(isAdmin, isPDL, isSupervisor);
@@ -180,10 +177,6 @@ function Menu() {
     return links;
   };
 
-  const handleClick = event => {
-    setAnchorEl(event.currentTarget);
-  };
-
   const uploadFile = async file => {
     if (!file) {
       return;
@@ -278,10 +271,6 @@ function Menu() {
     setFeedbackOpen(false);
   };
 
-  const closeAvatarMenu = () => {
-    setAnchorEl(null);
-  };
-
   const closeHoursUpload = () => {
     setShowHoursUpload(false);
     setSelectedFile(null);
@@ -305,7 +294,6 @@ function Menu() {
         component={Link}
         to={path}
         className={isSubLink ? classes.nested : null}
-        button
         onClick={
           isSubLink
             ? undefined
@@ -413,14 +401,8 @@ function Menu() {
             <MenuIcon />
           </IconButton>
         </Toolbar>
-        <div
-          ref={anchorRef}
-          aria-controls={open ? 'menu-list-grow' : undefined}
-          aria-haspopup="true"
-          onClick={handleToggle}
-        >
+        <Link to={`/profile/${id}`}>
           <Avatar
-            onClick={handleClick}
             src={getAvatarURL(workEmail)}
             style={{
               position: 'absolute',
@@ -430,32 +412,7 @@ function Menu() {
               textDecoration: 'none'
             }}
           />
-          <AvatarMenu
-            id="simple-menu"
-            anchorEl={anchorEl}
-            keepMounted
-            open={Boolean(anchorEl)}
-            onClose={closeAvatarMenu}
-          >
-            <MenuItem
-              component={Link}
-              onClick={closeAvatarMenu}
-              to={`/profile/${id}`}
-            >
-              Profile
-            </MenuItem>
-            {isAdmin && (
-              <MenuItem
-                onClick={() => {
-                  closeAvatarMenu();
-                  openHoursUpload();
-                }}
-              >
-                Upload Hours
-              </MenuItem>
-            )}
-          </AvatarMenu>
-        </div>
+        </Link>
       </AppBar>
       <nav className={classes.drawer}>
         <Drawer

web-ui/src/components/menu/Menu.test.jsx

@@ -1,13 +1,17 @@
 import React from 'react';
+import { render } from '@testing-library/react';
 import Menu from './Menu';
+import { BrowserRouter } from 'react-router-dom';
 import { MemoryRouter } from 'react-router-dom';
 import { AppContextProvider } from '../../context/AppContext';
 
+const testId = 'some-id';
 const initialState = {
   state: {
     userProfile: {
       name: 'holmes',
       memberProfile: {
+        id: testId,
         pdlId: '',
         title: 'Tester',
         workEmail: 'test@tester.com'
@@ -84,4 +88,19 @@ describe('<Menu />', () => {
       </AppContextProvider>
     );
   });
+
+  it('adds link to avatar', () => {
+    const { container } = render(
+      <AppContextProvider value={initialState}>
+        <BrowserRouter>
+          <Menu />
+        </BrowserRouter>
+      </AppContextProvider>
+    );
+    const link = container.querySelector('header > a');
+    const href = link.getAttribute('href');
+    const lastIndex = href.lastIndexOf('/');
+    const id = href.substring(lastIndex + 1);
+    expect(id).toBe(testId);
+  });
 });