Make Link to User Page in Popup Menu #12

Lena created 4 years ago

Change summary

webui/src/components/CurrentIdentity/CurrentIdentity.tsx | 25 ++++++---
webui/src/pages/identity/Identity.tsx                    | 11 ++-
2 files changed, 23 insertions(+), 13 deletions(-)

Detailed changes

webui/src/components/CurrentIdentity/CurrentIdentity.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   ClickAwayListener,
   Grow,
+  Link,
   MenuItem,
   MenuList,
   Paper,
@@ -22,6 +23,9 @@ const useStyles = makeStyles((theme) => ({
   hidden: {
     display: 'none',
   },
+  profileLink: {
+    ...theme.typography.button,
+  },
 }));
 
 const CurrentIdentity = () => {
@@ -58,7 +62,10 @@ const CurrentIdentity = () => {
           {user.displayName.charAt(0).toUpperCase()}
         </Avatar>
       </Button>
-      <LockIcon color="primary" className={!user.isProtected ? '' : ''} />
+      <LockIcon
+        color="secondary"
+        className={user.isProtected ? '' : classes.hidden}
+      />
       <Popper
         open={open}
         anchorEl={anchorRef.current}
@@ -77,14 +84,14 @@ const CurrentIdentity = () => {
             <Paper>
               <ClickAwayListener onClickAway={handleClose}>
                 <MenuList autoFocusItem={open} id="menu-list-grow">
-                  <MenuItem>Name: {user.name ? user.name : 'none'}</MenuItem>
-                  <MenuItem title={user.id}>
-                    Id: {user.humanId ? user.humanId : 'none'}
-                  </MenuItem>
-                  <MenuItem>Email: {user.email ? user.email : 'none'}</MenuItem>
-                  <MenuItem>Login: {user.login ? user.login : 'none'}</MenuItem>
-                  <MenuItem className={user.isProtected ? '' : classes.hidden}>
-                    Protected: {user.isProtected}
+                  <MenuItem>
+                    <Link
+                      color="inherit"
+                      className={classes.profileLink}
+                      href="/user"
+                    >
+                      Open profile
+                    </Link>
                   </MenuItem>
                 </MenuList>
               </ClickAwayListener>

webui/src/pages/identity/Identity.tsx

@@ -49,20 +49,23 @@ const useStyles = makeStyles((theme) => ({
   control: {
     paddingBottom: theme.spacing(3),
   },
+  header: {
+    ...theme.typography.h5,
+  },
 }));
 
 const Identity = () => {
-  // eslint-disable-next-line
   const classes = useStyles();
-  // eslint-disable-next-line
-  const { loading, error, data } = useCurrentIdentityQuery();
+  const { data } = useCurrentIdentityQuery();
   const user = data?.repository?.userIdentity;
   console.log(user);
   return (
     <main className={classes.main}>
       <div className={classes.container}>
         <div className={classes.leftSidebar}>
-          <h1>{user?.displayName ? user?.displayName : 'none'}</h1>
+          <h1 className={classes.header}>
+            {user?.displayName ? user?.displayName : 'none'}
+          </h1>
           <Avatar src={user?.avatarUrl ? user.avatarUrl : undefined}>
             {user?.displayName.charAt(0).toUpperCase()}
           </Avatar>