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/categorical/index.js

@@ -187,7 +187,7 @@ class Categories extends React.Component {
         {allCategoryNames.map((catName) =>
           !schema.annotations.obsByName[catName].writable &&
           (schema.annotations.obsByName[catName].categories?.length > 1 ||
-          !schema.annotations.obsByName[catName].categories) ? (
+            !schema.annotations.obsByName[catName].categories) ? (
             <Category
               key={catName}
               metadataField={catName}

client/src/components/leftSidebar/topLeftLogoAndTitle.js

@@ -7,11 +7,19 @@ import * as globals from "../../globals";
 import Logo from "../framework/logo";
 import Truncate from "../util/truncate";
 import InfoDrawer from "../infoDrawer/infoDrawer";
+import AuthButtons from "../menubar/authButtons";
+import InformationMenu from "../menubar/infoMenu";
 
 const DATASET_TITLE_FONT_SIZE = 14;
 
 @connect((state) => ({
   datasetTitle: state.config?.displayNames?.dataset ?? "",
+  auth: state.config?.authentication,
+  userinfo: state.userinfo,
+  libraryVersions: state.config?.["library_versions"],
+  aboutLink: state.config?.links?.["about-dataset"],
+  tosURL: state.config?.parameters?.["about_legal_tos"],
+  privacyURL: state.config?.parameters?.["about_legal_privacy"],
 }))
 class LeftSideBar extends React.Component {
   handleClick = () => {
@@ -20,7 +28,16 @@ class LeftSideBar extends React.Component {
   };
 
   render() {
-    const { datasetTitle } = this.props;
+    const {
+      datasetTitle,
+      auth,
+      userinfo,
+      libraryVersions,
+      aboutLink,
+      privacyURL,
+      tosURL,
+      dispatch,
+    } = this.props;
 
     return (
       <div
@@ -30,49 +47,70 @@ class LeftSideBar extends React.Component {
           width: globals.leftSidebarWidth,
           zIndex: 1,
           borderBottom: `1px solid ${globals.lighterGrey}`,
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
         }}
       >
-        <Logo size={30} />
-        <span
-          style={{
-            fontSize: 28,
-            position: "relative",
-            top: -6,
-            fontWeight: "bold",
-            marginLeft: 5,
-            color: globals.logoColor,
-            userSelect: "none",
-          }}
-        >
-          cell
+        <div>
+          <Logo size={28} />
           <span
             style={{
-              position: "relative",
-              top: 1,
-              fontWeight: 300,
               fontSize: 24,
+              position: "relative",
+              top: -6,
+              fontWeight: "bold",
+              marginLeft: 5,
+              color: globals.logoColor,
+              userSelect: "none",
             }}
           >
-            ×
-          </span>
-          gene
-        </span>
-        <Button
-          minimal
-          style={{
-            fontSize: DATASET_TITLE_FONT_SIZE,
-            position: "absolute",
-            right: 10,
-          }}
-          onClick={this.handleClick}
-        >
-          <Truncate>
-            <span style={{ maxWidth: 155 }} data-testid="header">
-              {datasetTitle}
+            cell
+            <span
+              style={{
+                position: "relative",
+                top: 1,
+                fontWeight: 300,
+                fontSize: 24,
+              }}
+            >
+              ×
             </span>
-          </Truncate>
-        </Button>
-        <InfoDrawer />
+            gene
+          </span>
+        </div>
+        <div style={{ marginRight: 5, position: "relative", top: -7 }}>
+          <Button
+            minimal
+            style={{
+              fontSize: DATASET_TITLE_FONT_SIZE,
+              position: "relative",
+              top: -1,
+            }}
+            onClick={this.handleClick}
+          >
+            <Truncate>
+              <span style={{ maxWidth: 155 }} data-testid="header">
+                {datasetTitle}
+              </span>
+            </Truncate>
+          </Button>
+          <InfoDrawer />
+          <InformationMenu
+            {...{
+              libraryVersions,
+              aboutLink,
+              tosURL,
+              privacyURL,
+              auth,
+              dispatch,
+              userinfo,
+            }}
+          />
+          {!userinfo.is_authenticated ? (
+            <AuthButtons auth={auth} userinfo={userinfo} />
+          ) : null}
+        </div>
       </div>
     );
   }

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

server/auth/auth_test.py

@@ -47,6 +47,7 @@ class AuthTypeTest(AuthTypeClientBase):
         return_to = args.get("dataset", "/")
         session[self.CXGUID] = args.get("userid", self.user_id)
         session[self.CXGUNAME] = args.get("username", self.user_name)
+        session[self.CXGUEMAIL] = args.get("email", self.user_email)
         return redirect(return_to)
 
     def logout(self):