showing UserProfileMenu on hovering name in appbar

compliance-web/src/components/Shared/CopyButton.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { IconButton } from "@mui/material";
+import { FileCopy, FileCopyOutlined } from "@mui/icons-material";
+import { BCPalette } from "epic.theme";
+
+const iconStyles = { color: BCPalette.theme.primaryBlue[90], fontSize: "1rem" };
+
+const CopyButton = ({ ...props }) => {
+  const copyHandler = (text: string) => {
+    // showNotification("Copied to clipboard", {
+    //   type: "success",
+    // });
+    navigator.clipboard.writeText(text);
+  };
+
+  const [hover, setHover] = React.useState<boolean>(false);
+
+  return (
+    <IconButton
+      color="primary"
+      onClick={() => copyHandler(props.copyText)}
+      sx={{
+        width: "2rem",
+        height: "2rem",
+        borderRadius: "0.25rem",
+      }}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      {hover ? (
+        <FileCopy sx={iconStyles} />
+      ) : (
+        <FileCopyOutlined sx={iconStyles} />
+      )}
+    </IconButton>
+  );
+};
+
+export default CopyButton;

compliance-web/src/components/Shared/EAOAppBar.tsx → compliance-web/src/components/Shared/Header/EAOAppBar.tsx

@@ -10,17 +10,17 @@ import {
   useTheme,
 } from "@mui/material";
 import BC_Logo from "@/assets/images/bcgovLogoWhite.svg";
-import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import { AppConfig } from "@/utils/config";
 import { useAuth } from "react-oidc-context";
 import EnvironmentBanner from "./EnvironmentBanner";
-import { forwardRef, HTMLProps } from "react";
-
+import { forwardRef, HTMLProps, useState } from "react";
+import UserProfileMenu from "./UserProfileMenu";
 
 type EAOAppBarProps = HTMLProps<HTMLDivElement>;
 interface AppBarProps extends MuiAppBarProps {
   open?: boolean;
 }
+
 const AppBar = styled(MuiAppBar, {
   shouldForwardProp: (prop) => prop !== "open",
 })<AppBarProps>(({ theme }) => ({
@@ -34,6 +34,18 @@ const AppBar = styled(MuiAppBar, {
 const EAOAppBar = forwardRef<HTMLDivElement, EAOAppBarProps>((_props, ref) => {
   const theme = useTheme();
   const auth = useAuth();
+
+  const [profileMenuAnchorEl, setProfileMenuAnchorEl] =
+    useState<null | HTMLElement>(null);
+
+  const handleOpenProfileMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setProfileMenuAnchorEl(event.currentTarget);
+  };
+
+  const handleCloseProfileMenu = () => {
+    setProfileMenuAnchorEl(null);
+  };
+
   return (
     <>
       <AppBar ref={ref} position="static" color="primary" open={true}>
@@ -62,43 +74,29 @@ const EAOAppBar = forwardRef<HTMLDivElement, EAOAppBarProps>((_props, ref) => {
             alignItems="center"
             paddingRight={"0.75rem"}
           >
-            <AccountCircleIcon
-              fontSize="large"
-              color="primary"
-              sx={{ marginRight: "0.25rem" }}
-            ></AccountCircleIcon>
             {auth.isAuthenticated ? (
-              <>
-                <Box
-                  display={"flex"}
-                  flexDirection={"column"}
-                  marginRight={"1rem"}
-                >
-                  <Typography variant="h6" color="inherit">
-                    Hello, {auth.user?.profile.name}
-                  </Typography>
-                </Box>
-                {/* <Button
-                  variant="outlined"
-                  color="inherit"
-                  onClick={() => auth.signoutRedirect()}
-                >
-                  Sign Out
-                </Button> */}
+              <Box
+                display={"flex"}
+                alignItems={"center"}
+                onMouseEnter={handleOpenProfileMenu}
+              >
+                <Typography variant="h6" color="inherit" marginRight={"1rem"}>
+                  Hello, {auth.user?.profile.name}
+                </Typography>
                 <Avatar
                   sx={{
                     bgcolor: theme.palette.background.default,
-                    color: theme.palette.primary.main,
                     width: "2rem",
                     height: "2rem",
                   }}
                 >
                   <Typography
                     variant="body1"
                     fontWeight={700}
+                    color={theme.palette.primary.main}
                   >{`${auth.user?.profile?.given_name?.charAt(0)}${auth.user?.profile?.family_name?.charAt(0)}`}</Typography>
                 </Avatar>
-              </>
+              </Box>
             ) : (
               <Button
                 variant="outlined"
@@ -110,7 +108,11 @@ const EAOAppBar = forwardRef<HTMLDivElement, EAOAppBarProps>((_props, ref) => {
             )}
           </Grid>
         </Grid>
-        <EnvironmentBanner></EnvironmentBanner>
+        <UserProfileMenu
+          anchorEl={profileMenuAnchorEl}
+          handleClose={handleCloseProfileMenu}
+        />
+        <EnvironmentBanner />
       </AppBar>
     </>
   );

compliance-web/src/components/Shared/Header/UserProfileMenu.tsx

@@ -0,0 +1,96 @@
+import { Menu, Box, Avatar, Typography } from "@mui/material";
+import { BCPalette } from "epic.theme";
+import CopyButton from "@/components/Shared/CopyButton";
+import { theme } from "@/styles/theme";
+import { useAuth } from "react-oidc-context";
+
+export default function UserProfileMenu({ ...props }) {
+  const { user } = useAuth();
+
+  return (
+    <Menu
+      id="profile-menu"
+      anchorEl={props.anchorEl}
+      open={Boolean(props.anchorEl)}
+      onClose={props.handleClose}
+      MenuListProps={{
+        style: {
+          paddingTop: 0,
+          paddingBottom: 0,
+          pointerEvents: "auto",
+        },
+      }}
+    >
+      <Box sx={{ display: "flex", flexDirection: "column", width: 320 }}>
+        <Box
+          sx={{
+            display: "flex",
+            gap: "0.5rem",
+            padding: "1rem",
+            bgcolor: BCPalette.components.background.lightGray,
+            borderBottom: `1px solid ${BCPalette.components.border.light}`,
+            alignItems: "center",
+          }}
+        >
+          <Avatar
+            sx={{
+              bgcolor: theme.palette.primary.main,
+              width: "2rem",
+              height: "2rem",
+            }}
+          >
+            <Typography
+              variant="body2"
+              fontWeight={700}
+              color={theme.palette.primary.contrastText}
+            >{`${user?.profile?.given_name?.charAt(0)}${user?.profile?.family_name?.charAt(0)}`}</Typography>
+          </Avatar>
+          <Typography
+            variant="body2"
+            fontWeight={700}
+          >{`${user?.profile?.name}`}</Typography>
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            gap: "8px",
+            padding: "1rem",
+            flexDirection: "column",
+          }}
+        >
+          <Typography variant="body2" fontWeight={700}>
+            Contact
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            {userDetails(user?.profile?.email)}
+            {userDetails(user?.profile?.phone_number)}
+          </Box>
+        </Box>
+      </Box>
+    </Menu>
+  );
+
+  function userDetails(detail?: string) {
+    return (
+      detail && (
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <Typography variant="body2" color={BCPalette.theme.primaryBlue[90]}>
+            {detail}
+          </Typography>
+          <CopyButton copyText={detail} />
+        </Box>
+      )
+    );
+  }
+}

compliance-web/src/routes/__root.tsx

@@ -1,4 +1,4 @@
-import EAOAppBar from "@/components/Shared/EAOAppBar";
+import EAOAppBar from "@/components/Shared/Header/EAOAppBar";
 import PageNotFound from "@/components/Shared/PageNotFound";
 import SideNavBar from "@/components/Shared/SideNav/SideNavBar";
 import { Box } from "@mui/system";

compliance-web/src/routes/oidc-callback.tsx

@@ -17,6 +17,6 @@ function OidcCallback() {
   }
 
   if(!isLoading && isAuthenticated) {
-    return <Navigate to="/"></Navigate>
+    return <Navigate to="/ce-database/case-files"></Navigate>
   }
 }