Add popup menu fpr user informations #12

Lena created 4 years ago

Change summary

webui/src/components/CurrentIdentity/CurrentIdentity.graphql |  2 
webui/src/components/CurrentIdentity/CurrentIdentity.tsx     | 63 +++++
2 files changed, 62 insertions(+), 3 deletions(-)

Detailed changes

webui/src/components/CurrentIdentity/CurrentIdentity.graphql

@@ -1,6 +1,8 @@
 query CurrentIdentity {
   repository {
     userIdentity {
+      humanId
+      email
       displayName
       avatarUrl
     }

webui/src/components/CurrentIdentity/CurrentIdentity.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
+import {
+  Button,
+  ClickAwayListener,
+  Grow,
+  MenuItem,
+  MenuList,
+  Paper,
+  Popper,
+} from '@material-ui/core';
 import Avatar from '@material-ui/core/Avatar';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -15,14 +24,62 @@ const CurrentIdentity = () => {
   const classes = useStyles();
   const { loading, error, data } = useCurrentIdentityQuery();
 
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef<HTMLButtonElement>(null);
+
   if (error || loading || !data?.repository?.userIdentity) return null;
 
   const user = data.repository.userIdentity;
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = (event: any) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+
   return (
     <>
-      <Avatar src={user.avatarUrl ? user.avatarUrl : undefined}>
-        {user.displayName.charAt(0).toUpperCase()}
-      </Avatar>
+      <Button
+        ref={anchorRef}
+        aria-controls={open ? 'menu-list-grow' : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+      >
+        <Avatar src={user.avatarUrl ? user.avatarUrl : undefined}>
+          {user.displayName.charAt(0).toUpperCase()}
+        </Avatar>
+      </Button>
+      <Popper
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        disablePortal
+      >
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement === 'bottom' ? 'center top' : 'center bottom',
+            }}
+          >
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList autoFocusItem={open} id="menu-list-grow">
+                  <MenuItem>Display Name: {user.displayName}</MenuItem>
+                  <MenuItem>Human Id: {user.humanId}</MenuItem>
+                  <MenuItem>Email: {user.email}</MenuItem>
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
       <div className={classes.displayName}>{user.displayName}</div>
     </>
   );