From 5bcf9661df66404112a77482ed5fe87d5cfa78e4 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Mon, 3 Jun 2024 12:51:35 -0400
Subject: [PATCH 1/5] Add the ability to check your own username from the
 frontend

---
 .../MainLayout/Header/ProfileSection/index.js | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/layout/MainLayout/Header/ProfileSection/index.js b/src/layout/MainLayout/Header/ProfileSection/index.js
index 737fe9eb..671efcce 100644
--- a/src/layout/MainLayout/Header/ProfileSection/index.js
+++ b/src/layout/MainLayout/Header/ProfileSection/index.js
@@ -161,6 +161,8 @@ function ProfileSection() {
 
     const [open, setOpen] = useState(false);
 
+    const [username, setUsername] = useState('');
+
     const anchorRef = React.useRef(null);
 
     const handleToggle = () => {
@@ -183,6 +185,25 @@ function ProfileSection() {
         prevOpen.current = open;
     }, [open]);
 
+    // Grab the user key for the logged in user
+    useEffect(() => {
+        fetch(`/query/whoami`)
+            .then((response) => {
+                if (response.ok) {
+                    return response.json();
+                }
+                console.log(`whoami could not determine logged in user: ${response}`);
+                throw new Error(`${response}`);
+            })
+            .then((response) => {
+                setUsername(response?.key);
+            })
+            .catch((error) => {
+                console.log(`Whoami error: ${error}`);
+                return '';
+            });
+    }, []);
+
     const setSite = () => {
         switch (SITE) {
             case 'BCGSC':
@@ -243,10 +264,10 @@ function ProfileSection() {
                                     <CardContent className={classes.cardContent}>
                                         <Grid container direction="column" spacing={0}>
                                             <Grid item className={classes.flex}>
-                                                <Typography variant="h4">Hello!</Typography>
-                                                {/* <Typography component="span" variant="h4" className={classes.name}>
-                                                    First Name Last Name
-                                                </Typography> */}
+                                                <Typography variant="h4">Hello,</Typography>
+                                                <Typography component="span" variant="h4" className={classes.name}>
+                                                    {username}
+                                                </Typography>
                                             </Grid>
                                             <Grid item className={classes.usernamePadding}>
                                                 <Typography variant="subtitle2">{SITE}</Typography>

From 0c6d3a9fc02b263ef33f59d8cb2fad56bf12cbb5 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Mon, 3 Jun 2024 13:48:07 -0400
Subject: [PATCH 2/5] Adjust styling of the profile button

---
 .../MainLayout/Header/ProfileSection/index.js | 51 +++++++++++++++----
 1 file changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/layout/MainLayout/Header/ProfileSection/index.js b/src/layout/MainLayout/Header/ProfileSection/index.js
index 671efcce..674cd758 100644
--- a/src/layout/MainLayout/Header/ProfileSection/index.js
+++ b/src/layout/MainLayout/Header/ProfileSection/index.js
@@ -50,7 +50,10 @@ const classes = {
     name: `${PREFIX}-name`,
     ScrollHeight: `${PREFIX}-ScrollHeight`,
     badgeWarning: `${PREFIX}-badgeWarning`,
-    usernamePadding: `${PREFIX}-usernamePadding`
+    loggedInAs: `${PREFIX}-loggedInAs`,
+    usernamePadding: `${PREFIX}-usernamePadding`,
+    username: `${PREFIX}-username`,
+    smallAvatar: `${PREFIX}-smallAvatar`
 };
 
 const ChipRoot = styled(Chip)(({ theme }) => ({
@@ -148,6 +151,21 @@ const PopperRoot = styled(Popper)(({ theme }) => ({
 
     [`& .${classes.usernamePadding}`]: {
         paddingBottom: '1em'
+    },
+
+    [`& .${classes.loggedInAs}`]: {
+        fontSize: 18
+    },
+
+    [`& .${classes.username}`]: {
+        fontSize: 16
+    },
+
+    [`& .${classes.smallAvatar}`]: {
+        cursor: 'pointer',
+        ...theme.typography.mediumAvatar,
+        marginLeft: 'auto',
+        marginRight: 0
     }
 }));
 
@@ -262,15 +280,30 @@ function ProfileSection() {
                             <ClickAwayListener onClickAway={handleClose}>
                                 <MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]}>
                                     <CardContent className={classes.cardContent}>
-                                        <Grid container direction="column" spacing={0}>
-                                            <Grid item className={classes.flex}>
-                                                <Typography variant="h4">Hello,</Typography>
-                                                <Typography component="span" variant="h4" className={classes.name}>
-                                                    {username}
-                                                </Typography>
+                                        <Grid container direction="row" spacing={0}>
+                                            <Grid item xs={8} className={classes.flex}>
+                                                <Grid container direction="column" spacing={0}>
+                                                    <Grid item className={classes.flex}>
+                                                        <Typography variant="h4" className={classes.loggedInAs}>
+                                                            Logged in as:
+                                                        </Typography>
+                                                    </Grid>
+                                                    <Grid item className={classes.usernamePadding}>
+                                                        <Typography variant="body1" className={classes.username}>
+                                                            {username}, {SITE}
+                                                        </Typography>
+                                                    </Grid>
+                                                </Grid>
                                             </Grid>
-                                            <Grid item className={classes.usernamePadding}>
-                                                <Typography variant="subtitle2">{SITE}</Typography>
+                                            <Grid item xs={4} className={classes.flex}>
+                                                <Avatar
+                                                    src={setSite()}
+                                                    className={classes.smallAvatar}
+                                                    ref={anchorRef}
+                                                    aria-controls={open ? 'menu-list-grow' : undefined}
+                                                    aria-haspopup="true"
+                                                    color="inherit"
+                                                />
                                             </Grid>
                                         </Grid>
                                         <Divider />

From 1c0a00bc6cb1f49959522601416aa9e821df9499 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Mon, 10 Jun 2024 10:22:18 -0400
Subject: [PATCH 3/5] Remove unused import

---
 src/views/clinicalGenomic/search/SearchHandler.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/clinicalGenomic/search/SearchHandler.js b/src/views/clinicalGenomic/search/SearchHandler.js
index 9ff5deda..d2e302ff 100644
--- a/src/views/clinicalGenomic/search/SearchHandler.js
+++ b/src/views/clinicalGenomic/search/SearchHandler.js
@@ -4,7 +4,6 @@ import { trackPromise } from 'react-promise-tracker';
 
 import { useSearchResultsWriterContext, useSearchQueryReaderContext } from '../SearchResultsContext';
 import { fetchFederationStat, fetchFederation, query, queryDiscovery } from 'store/api';
-import { invertkatsu } from 'utils/utils';
 
 // NB: I assign to lastPromise a bunch to keep track of whether or not we need to chain promises together
 // However, the linter really dislikes this, and assumes I want to put everything inside one useEffect?

From f042108e43cc94c3962a6ebff0397114fa141fc1 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Mon, 17 Jun 2024 14:22:04 -0400
Subject: [PATCH 4/5] Remove overflow scrollbar

---
 .../MainLayout/Header/ProfileSection/index.js | 35 ++++++++-----------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/layout/MainLayout/Header/ProfileSection/index.js b/src/layout/MainLayout/Header/ProfileSection/index.js
index 674cd758..7757839e 100644
--- a/src/layout/MainLayout/Header/ProfileSection/index.js
+++ b/src/layout/MainLayout/Header/ProfileSection/index.js
@@ -19,9 +19,6 @@ import {
 } from '@mui/material';
 import ListItemButton from '@mui/material/ListItemButton';
 
-// third-party
-import PerfectScrollbar from 'react-perfect-scrollbar';
-
 // project imports
 import MainCard from 'ui-component/cards/MainCard';
 import Transitions from 'ui-component/extended/Transitions';
@@ -93,6 +90,7 @@ const PopperRoot = styled(Popper)(({ theme }) => ({
         minWidth: '300px',
         backgroundColor: theme.palette.background.paper,
         borderRadius: '10px',
+        overflow: 'hidden',
         [theme.breakpoints.down('md')]: {
             minWidth: '100%'
         }
@@ -141,7 +139,7 @@ const PopperRoot = styled(Popper)(({ theme }) => ({
     [`& .${classes.ScrollHeight}`]: {
         height: '100%',
         maxHeight: 'calc(100vh - 250px)',
-        overflowX: 'hidden'
+        overflow: 'hidden'
     },
 
     [`& .${classes.badgeWarning}`]: {
@@ -307,22 +305,19 @@ function ProfileSection() {
                                             </Grid>
                                         </Grid>
                                         <Divider />
-                                        <PerfectScrollbar className={classes.ScrollHeight}>
-                                            <Divider />
-                                            <List component="nav" className={classes.navContainer}>
-                                                <ListItemButton
-                                                    className={classes.listItem}
-                                                    sx={{ borderRadius: `${customization.borderRadius}px` }}
-                                                    selected={selectedIndex === 4}
-                                                    to="/auth/logout"
-                                                >
-                                                    <ListItemIcon>
-                                                        <IconLogout stroke={1.5} size="1.3rem" />
-                                                    </ListItemIcon>
-                                                    <ListItemText primary={<Typography variant="body2">Logout</Typography>} />
-                                                </ListItemButton>
-                                            </List>
-                                        </PerfectScrollbar>
+                                        <List component="nav" className={classes.navContainer}>
+                                            <ListItemButton
+                                                className={classes.listItem}
+                                                sx={{ borderRadius: `${customization.borderRadius}px` }}
+                                                selected={selectedIndex === 4}
+                                                to="/auth/logout"
+                                            >
+                                                <ListItemIcon>
+                                                    <IconLogout stroke={1.5} size="1.3rem" />
+                                                </ListItemIcon>
+                                                <ListItemText primary={<Typography variant="body2">Logout</Typography>} />
+                                            </ListItemButton>
+                                        </List>
                                     </CardContent>
                                 </MainCard>
                             </ClickAwayListener>

From 28f9926d7d65094b586a7254f3d81cff5e436fe3 Mon Sep 17 00:00:00 2001
From: fnguyen <OrdinaryNeumann@gmail.com>
Date: Mon, 17 Jun 2024 14:35:44 -0400
Subject: [PATCH 5/5] Fixup profile popper anchor element behaviour

---
 .../MainLayout/Header/ProfileSection/index.js | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/src/layout/MainLayout/Header/ProfileSection/index.js b/src/layout/MainLayout/Header/ProfileSection/index.js
index 7757839e..5f4af1be 100644
--- a/src/layout/MainLayout/Header/ProfileSection/index.js
+++ b/src/layout/MainLayout/Header/ProfileSection/index.js
@@ -179,28 +179,19 @@ function ProfileSection() {
 
     const [username, setUsername] = useState('');
 
-    const anchorRef = React.useRef(null);
+    const anchorEl = React.useRef(null);
 
     const handleToggle = () => {
         setOpen((prevOpen) => !prevOpen);
     };
     const handleClose = (event) => {
-        if (anchorRef.current && anchorRef.current.contains(event.target)) {
+        if (anchorEl?.current?.contains(event.target)) {
             return;
         }
 
         setOpen(false);
     };
 
-    const prevOpen = React.useRef(open);
-    useEffect(() => {
-        if (prevOpen.current === true && open === false) {
-            anchorRef.current.focus();
-        }
-
-        prevOpen.current = open;
-    }, [open]);
-
     // Grab the user key for the logged in user
     useEffect(() => {
         fetch(`/query/whoami`)
@@ -240,7 +231,6 @@ function ProfileSection() {
                     <Avatar
                         src={setSite()}
                         className={classes.headerAvatar}
-                        ref={anchorRef}
                         aria-controls={open ? 'menu-list-grow' : undefined}
                         aria-haspopup="true"
                         color="inherit"
@@ -248,16 +238,16 @@ function ProfileSection() {
                 }
                 label={<IconSettings stroke={1.5} size="1.5rem" color={theme.palette.primary.main} />}
                 variant="outlined"
-                ref={anchorRef}
                 aria-controls={open ? 'menu-list-grow' : undefined}
                 aria-haspopup="true"
                 onClick={handleToggle}
+                ref={anchorEl}
                 color="primary"
             />
             <PopperRoot
                 placement="bottom-end"
                 open={open}
-                anchorEl={anchorRef.current}
+                anchorEl={anchorEl.current}
                 role={undefined}
                 transition
                 className={classes.showOnTop}
@@ -297,7 +287,6 @@ function ProfileSection() {
                                                 <Avatar
                                                     src={setSite()}
                                                     className={classes.smallAvatar}
-                                                    ref={anchorRef}
                                                     aria-controls={open ? 'menu-list-grow' : undefined}
                                                     aria-haspopup="true"
                                                     color="inherit"