Partial fix for 1830 (#1863)

* Remove door icon from log in button
* Move log in and info buttons from the top bar to in line with the cellxgene icon and dataset name
* Hover over on login button should say "Log in to cellxgene"
* Show email

closes #1830

client/src/components/menubar/authButtons.js

@@ -11,7 +11,7 @@ const Auth = React.memo((props) => {
   return (
     <ButtonGroup className={styles.menubarButton}>
       <Tooltip
-        content="Log in or log out of cellxgene"
+        content="Log in to cellxgene"
         position="bottom"
         hoverOpenDelay={globals.tooltipHoverOpenDelay}
       >
@@ -19,7 +19,6 @@ const Auth = React.memo((props) => {
           type="button"
           data-testid="auth-button"
           disabled={false}
-          icon={!userinfo.is_authenticated ? "log-in" : "log-out"}
           href={!userinfo.is_authenticated ? auth.login : auth.logout}
         >
           {!userinfo.is_authenticated ? "Log In" : "Log Out"}

client/src/components/menubar/index.js

@@ -6,8 +6,7 @@ import * as globals from "../../globals";
 import styles from "./menubar.css";
 import actions from "../../actions";
 import Clip from "./clip";
-import AuthButtons from "./authButtons";
-import InformationMenu from "./infoMenu";
+
 import Subset from "./subset";
 import UndoRedoReset from "./undoRedo";
 import DiffexpButtons from "./diffexpButtons";
@@ -204,7 +203,6 @@ class MenuBar extends React.PureComponent {
   render() {
     const {
       dispatch,
-      libraryVersions,
       disableDiffexp,
       undoDisabled,
       redoDisabled,
@@ -212,17 +210,12 @@ class MenuBar extends React.PureComponent {
       clipPercentileMin,
       clipPercentileMax,
       graphInteractionMode,
-      aboutLink,
       showCentroidLabels,
-      privacyURL,
-      tosURL,
       categoricalSelection,
       colorAccessor,
       subsetPossible,
       subsetResetPossible,
       enableReembedding,
-      auth,
-      userinfo,
     } = this.props;
     const { pendingClipPercentiles } = this.state;
 
@@ -248,10 +241,6 @@ class MenuBar extends React.PureComponent {
           zIndex: 3,
         }}
       >
-        <AuthButtons auth={auth} userinfo={userinfo} />
-        <InformationMenu
-          {...{ libraryVersions, aboutLink, tosURL, privacyURL, dispatch }}
-        />
         <UndoRedoReset
           dispatch={dispatch}
           undoDisabled={undoDisabled}

client/src/components/menubar/infoMenu.js

@@ -3,12 +3,12 @@ import React from "react";
 import {
   Button,
   ButtonGroup,
+  Classes,
   Menu,
   MenuItem,
   Popover,
   Position,
 } from "@blueprintjs/core";
-import { IconNames } from "@blueprintjs/icons";
 import styles from "./menubar.css";
 
 const handleClick = (dispatch) => {
@@ -16,7 +16,14 @@ const handleClick = (dispatch) => {
 };
 
 const InformationMenu = React.memo((props) => {
-  const { libraryVersions, tosURL, privacyURL, dispatch } = props;
+  const {
+    libraryVersions,
+    tosURL,
+    privacyURL,
+    auth,
+    userinfo,
+    dispatch,
+  } = props;
   return (
     <ButtonGroup className={`${styles.menubarButton}`}>
       <Popover
@@ -24,27 +31,30 @@ const InformationMenu = React.memo((props) => {
           <Menu>
             <MenuItem
               onClick={() => handleClick(dispatch)}
-              icon={IconNames.INFO_SIGN}
+              icon="info-sign"
               text="Dataset Overview"
             />
 
             <MenuItem
               href="https://chanzuckerberg.github.io/cellxgene/"
               target="_blank"
-              icon="help"
-              text="Help"
+              icon="book"
+              text="Documentation"
+              rel="noopener"
             />
             <MenuItem
               href="https://join-cellxgene-users.herokuapp.com/"
               target="_blank"
               icon="chat"
               text="Chat"
+              rel="noopener"
             />
             <MenuItem
               href="https://github.com/chanzuckerberg/cellxgene"
               target="_blank"
               icon="git-branch"
               text="Github"
+              rel="noopener"
             />
             <MenuItem
               target="_blank"
@@ -63,15 +73,28 @@ const InformationMenu = React.memo((props) => {
                 href={privacyURL}
                 target="_blank"
                 text="Privacy Policy"
+                rel="noopener"
               />
             ) : null}
+
+            {auth?.["requires_client_login"] &&
+            userinfo?.["is_authenticated"] ? (
+              <>
+                <MenuItem text={`Logged in as: ${userinfo.email}`} />
+                <MenuItem text="Log Out" href={auth.logout} />
+              </>
+            ) : null}
           </Menu>
         }
         position={Position.BOTTOM_RIGHT}
+        modifiers={{
+          preventOverflow: { enabled: false },
+          hide: { enabled: false },
+        }}
       >
         <Button
           type="button"
-          icon={IconNames.INFO_SIGN}
+          className={`${Classes.BUTTON} bp3-icon-info-sign`}
           style={{
             cursor: "pointer",
           }}