diff --git a/webui/src/components/CurrentIdentity/CurrentIdentity.graphql b/webui/src/components/CurrentIdentity/CurrentIdentity.graphql index 2794a40f19223b6fb8a8b0a8c3c8e83a04a05fc2..9af786b7c895aea9898aa161eeffc47d67980110 100644 --- a/webui/src/components/CurrentIdentity/CurrentIdentity.graphql +++ b/webui/src/components/CurrentIdentity/CurrentIdentity.graphql @@ -1,6 +1,8 @@ query CurrentIdentity { repository { userIdentity { + humanId + email displayName avatarUrl } diff --git a/webui/src/components/CurrentIdentity/CurrentIdentity.tsx b/webui/src/components/CurrentIdentity/CurrentIdentity.tsx index 8cd3585b06d5318404e58871ae87daacc31ce893..68e65a99d73a9ea6dd1220f4ae661d4734decc61 100644 --- a/webui/src/components/CurrentIdentity/CurrentIdentity.tsx +++ b/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(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 ( <> - - {user.displayName.charAt(0).toUpperCase()} - + + + {({ TransitionProps, placement }) => ( + + + + + Display Name: {user.displayName} + Human Id: {user.humanId} + Email: {user.email} + + + + + )} +
{user.displayName}
);