feat(multi-org): add user profile icon and popover menu (#5030)

Author: ChitlangeSahas

src/identity/components/GlobalHeader/GlobalHeader.tsx

@@ -28,6 +28,7 @@ import {
   emptyOrg,
 } from 'src/identity/components/GlobalHeader/DefaultEntities'
 import {alphaSortSelectedFirst} from 'src/identity/utils/alphaSortSelectedFirst'
+import IdentityUserAvatar from 'src/identity/components/GlobalHeader/IdentityUserAvatar'
 
 export const GlobalHeader: FC = () => {
   const dispatch = useDispatch()
@@ -88,6 +89,7 @@ export const GlobalHeader: FC = () => {
           </>
         )}
       </FlexBox>
+      <IdentityUserAvatar user={identity.currentIdentity.user} />
     </FlexBox>
   )
 }

src/identity/components/GlobalHeader/IdentityUserAvatar.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import {IdentityUser} from 'src/client/unityRoutes'
+import classnames from 'classnames'
+import {
+  Button,
+  ButtonShape,
+  ClickOutside,
+  ComponentColor,
+  FlexBox,
+  FlexDirection,
+  Icon,
+  IconFont,
+} from '@influxdata/clockface'
+
+import './UserPopoverStyles.scss'
+import {Link} from 'react-router-dom'
+
+type Props = {
+  user: IdentityUser
+}
+
+type State = {
+  isPopoverOpen: boolean
+}
+
+class IdentityUserAvatar extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = {
+      isPopoverOpen: false,
+    }
+  }
+
+  private getInitials = (): string => {
+    const {user} = this.props
+    const firstName = user.firstName
+    const lastName = user.lastName
+    const initials = `${firstName.charAt(0)}${lastName.charAt(0)}`
+    return initials
+  }
+
+  private togglePopoverState = () => {
+    const {isPopoverOpen} = this.state
+    this.setState({isPopoverOpen: !isPopoverOpen})
+  }
+
+  private setPopoverStateClosed = () => {
+    this.setState({isPopoverOpen: false})
+  }
+
+  private getUserPopoverContents = () => {
+    const {user} = this.props
+    return (
+      <>
+        <div className="user-popover-header">
+          <div className="user-popover-header-name">
+            {user.firstName} {user.lastName}
+          </div>
+          <div className="user-popover-header-email">{user.email}</div>
+          <hr />
+        </div>
+        <div className="user-popover-footer">
+          <Link className="user-popover-footer--button" to="/">
+            <Icon
+              glyph={IconFont.UserOutline_New}
+              className="user-popover-footer--button-icon"
+            />
+            Profile
+          </Link>
+          <Link className="user-popover-footer--button" to="/logout">
+            <Icon
+              glyph={IconFont.Logout_New}
+              className="user-popover-footer--button-icon"
+            />
+            Log Out
+          </Link>
+        </div>
+      </>
+    )
+  }
+
+  render() {
+    const userPopoverClassName = classnames('user-popover', {
+      'user-popover--open': this.state.isPopoverOpen,
+    })
+
+    const userAvatarButtonClassName = classnames('user-avatar-button', {
+      'user-popover--open': this.state.isPopoverOpen,
+    })
+
+    const {isPopoverOpen} = this.state
+    return (
+      <ClickOutside onClickOutside={this.setPopoverStateClosed}>
+        <div>
+          {/* Button shape is ButtonShape.Square to make the height and width the same
+            so we can use the border radius to make it a circle  */}
+          <Button
+            text={this.getInitials()}
+            shape={ButtonShape.Square}
+            color={
+              isPopoverOpen ? ComponentColor.Default : ComponentColor.Tertiary
+            }
+            onClick={this.togglePopoverState}
+            className={userAvatarButtonClassName}
+          />
+          <FlexBox
+            className={userPopoverClassName}
+            direction={FlexDirection.Column}
+          >
+            {this.getUserPopoverContents()}
+          </FlexBox>
+        </div>
+      </ClickOutside>
+    )
+  }
+}
+
+export default IdentityUserAvatar

src/identity/components/GlobalHeader/UserPopoverStyles.scss

@@ -0,0 +1,71 @@
+@import '@influxdata/clockface/dist/variables.scss';
+
+.user-avatar-button {
+  box-shadow: none !important;
+  margin: 0;
+  border-radius: 50%;
+  border: 2px solid $cf-grey-65;
+
+  &.user-popover--open {
+    border: none;
+    background: linear-gradient(75.66deg, #0098f0 0%, $c-amethyst 79.64%);
+  }
+}
+
+.user-popover {
+  opacity: 0;
+  position: absolute;
+  top: 60px;
+  right: 32px;
+  z-index: 9999;
+  min-width: 250px;
+  background: rgba(241, 241, 243, 0.1);
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(42px);
+  border-radius: 2px;
+  transition: opacity 0.1s ease-in-out;
+
+  &.user-popover--open {
+    opacity: 100;
+  }
+
+  .user-popover-header-email {
+    margin-top: 2px;
+    color: $cf-grey-65;
+  }
+
+  .user-popover-header {
+    width: 100%;
+    padding: 16px 16px 0 16px;
+  }
+
+  .user-popover-footer {
+    width: 100%;
+    padding: 0px 16px 16px 16px;
+    display: inline-flex;
+    flex-direction: column;
+
+    .user-popover-footer--button {
+      margin-top: 10px;
+      cursor: pointer;
+      color: inherit;
+    }
+
+    a:hover {
+      color: $cf-grey-75;
+    }
+
+    .user-popover-footer--button-icon {
+      font-size: 18px;
+      color: $cf-grey-65;
+      margin-right: 11px;
+    }
+  }
+
+  hr {
+    background: $cf-grey-65;
+    opacity: 20%;
+    margin: 0;
+    margin-top: 10px;
+  }
+}