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/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",
           }}