Login / Logout button (#1718)

* first pass auth button

* only pop anno dialogue if authenticated

* add config to ignore

* remove config

.gitignore

@@ -44,6 +44,7 @@ __pycache__
 *.DS_Store*
 data
 tags
+myconfig.yaml
 
 # Jekyll
 docs/_site/

client/src/components/autosave/filenameDialog.js

@@ -13,6 +13,7 @@ import {
 @connect((state) => ({
   idhash: state.config?.parameters?.["annotations-user-data-idhash"] ?? null,
   annotations: state.annotations,
+  auth: state.config?.authentication,
   writableCategoriesEnabled: state.config?.parameters?.annotations ?? false,
 }))
 class FilenameDialog extends React.Component {
@@ -90,12 +91,13 @@ class FilenameDialog extends React.Component {
   };
 
   render() {
-    const { writableCategoriesEnabled, annotations, idhash } = this.props;
+    const { writableCategoriesEnabled, annotations, idhash, auth } = this.props;
     const { filenameText } = this.state;
 
     return writableCategoriesEnabled &&
       !annotations.dataCollectionNameIsReadOnly &&
-      !annotations.dataCollectionName ? (
+      !annotations.dataCollectionName &&
+      auth.is_authenticated ? (
       <Dialog
         icon="tag"
         title="Annotations Collection"

client/src/components/menubar/authButtons.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { AnchorButton, Tooltip } from "@blueprintjs/core";
+import * as globals from "../../globals";
+import styles from "./menubar.css";
+
+const Auth = React.memo((props) => {
+  const { auth } = props;
+
+  if (!auth || (auth && !auth.requires_client_login)) return null;
+
+  return (
+    <div className={`bp3-button-group ${styles.menubarButton}`}>
+      <Tooltip
+        content="Log in or log out of cellxgene"
+        position="bottom"
+        hoverOpenDelay={globals.tooltipHoverOpenDelay}
+      >
+        <AnchorButton
+          type="button"
+          data-testid="auth-button"
+          disabled={false}
+          icon={!auth.is_authenticated ? "log-in" : "log-out"}
+          href={!auth.is_authenticated ? auth.login : auth.logout}
+        >
+          {!auth.is_authenticated ? "Log In" : "Log Out"}
+        </AnchorButton>
+      </Tooltip>
+    </div>
+  );
+});
+
+export default Auth;

client/src/components/menubar/index.js

@@ -6,6 +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";
@@ -40,6 +41,7 @@ import { getEmbSubsetView } from "../../util/stateManager/viewStackHelpers";
     celllist1: state.differential.celllist1,
     celllist2: state.differential.celllist2,
     libraryVersions: state.config?.["library_versions"],
+    auth: state.config?.authentication,
     undoDisabled: state["@@undoable/past"].length === 0,
     redoDisabled: state["@@undoable/future"].length === 0,
     aboutLink: state.config?.links?.["about-dataset"],
@@ -218,6 +220,7 @@ class MenuBar extends React.PureComponent {
       subsetPossible,
       subsetResetPossible,
       enableReembedding,
+      auth,
     } = this.props;
     const { pendingClipPercentiles } = this.state;
 
@@ -243,6 +246,7 @@ class MenuBar extends React.PureComponent {
           zIndex: 3,
         }}
       >
+        <AuthButtons auth={auth} />
         <InformationMenu
           libraryVersions={libraryVersions}
           aboutLink={aboutLink}