refactor: drop non-session auth from frontend (#2419)

client/src/components/autosave/filenameDialog.js

@@ -14,8 +14,6 @@ import {
 @connect((state) => ({
   idhash: state.config?.parameters?.["annotations-user-data-idhash"] ?? null,
   annotations: state.annotations,
-  auth: state.config?.authentication,
-  userInfo: state.userInfo,
   writableCategoriesEnabled: state.config?.parameters?.annotations ?? false,
   writableGenesetsEnabled: !(
     state.config?.parameters?.annotations_genesets_readonly ?? true
@@ -101,15 +99,13 @@ class FilenameDialog extends React.Component {
       writableGenesetsEnabled,
       annotations,
       idhash,
-      userInfo,
     } = this.props;
     const { filenameText } = this.state;
 
     return (writableCategoriesEnabled || writableGenesetsEnabled) &&
       annotations.promptForFilename &&
       !annotations.dataCollectionNameIsReadOnly &&
-      !annotations.dataCollectionName &&
-      userInfo.is_authenticated ? (
+      !annotations.dataCollectionName ? (
       <Dialog
         icon="tag"
         title="User Generated Data Directory"

client/src/components/categorical/index.js

@@ -13,7 +13,6 @@ import actions from "../../actions";
 @connect((state) => ({
   writableCategoriesEnabled: state.config?.parameters?.annotations ?? false,
   schema: state.annoMatrix?.schema,
-  userInfo: state.userInfo,
 }))
 class Categories extends React.Component {
   constructor(props) {
@@ -98,11 +97,8 @@ class Categories extends React.Component {
     this.setState({ newCategoryText: name });
   };
 
-  instruction = (name) => labelPrompt(
-      this.categoryNameError(name),
-      "New, unique category name",
-      ":"
-    );
+  instruction = (name) =>
+    labelPrompt(this.categoryNameError(name), "New, unique category name", ":");
 
   onExpansionChange = (catName) => {
     const { expandedCats } = this.state;
@@ -124,7 +120,7 @@ class Categories extends React.Component {
       newCategoryText,
       expandedCats,
     } = this.state;
-    const { writableCategoriesEnabled, schema, userInfo } = this.props;
+    const { writableCategoriesEnabled, schema } = this.props;
     /* all names, sorted in display order.  Will be rendered in this order */
     const allCategoryNames =
       ControlsHelpers.selectableCategoryNames(schema).sort();
@@ -174,11 +170,7 @@ class Categories extends React.Component {
         {writableCategoriesEnabled ? (
           <div style={{ marginBottom: 10 }}>
             <Tooltip
-              content={
-                userInfo.is_authenticated
-                  ? "Create a new category"
-                  : "You must be logged in to create new categorical fields"
-              }
+              content="Create a new category"
               position={Position.RIGHT}
               boundary="viewport"
               hoverOpenDelay={globals.tooltipHoverOpenDelay}
@@ -192,7 +184,6 @@ class Categories extends React.Component {
                 data-testid="open-annotation-dialog"
                 onClick={this.handleEnableAnnoMode}
                 intent="primary"
-                disabled={!userInfo.is_authenticated}
               >
                 Create new <strong>category</strong>
               </AnchorButton>

client/src/components/menubar/authButtons.js

@@ -1,175 +0,0 @@
-import React, { useState } from "react";
-
-import {
-  AnchorButton,
-  Button,
-  MenuItem,
-  Tooltip,
-  Popover,
-  Menu,
-  Elevation,
-  PopoverPosition,
-  Checkbox,
-  Card,
-} from "@blueprintjs/core";
-
-import { IconNames } from "@blueprintjs/icons";
-
-import * as globals from "../../globals";
-
-import styles from "./menubar.css";
-
-import { storageGet, storageSet, KEYS } from "../util/localStorage";
-
-const BASE_EMOJI = [0x1f9d1, 0x1f468, 0x1f469];
-const SKIN_TONES = [0x1f3fb, 0x1f3fc, 0x1f3fd, 0x1f3fe, 0x1f3ff];
-const MICROSCOPE = 0x1f52c;
-const ZERO_WIDTH_JOINER = 0x0200d;
-
-const LOGIN_PROMPT_OFF = "off";
-
-const Auth = React.memo((props) => {
-  const [isPromptOpen, setIsPromptOpen] = useState(shouldShowPrompt());
-
-  const { auth, userInfo } = props;
-
-  const isAuthenticated = userInfo && userInfo.is_authenticated;
-
-  window.userInfo = userInfo;
-
-  const randomInt = Math.random() * 15;
-  const sexIndex = Math.floor(randomInt / 5);
-  const skinToneIndex = Math.floor(randomInt % 5);
-
-  const scientist = String.fromCodePoint(
-    BASE_EMOJI[sexIndex],
-    SKIN_TONES[skinToneIndex],
-    ZERO_WIDTH_JOINER,
-    MICROSCOPE
-  );
-
-  if (!shouldShowAuth()) return null;
-
-  if (isAuthenticated) {
-    const PopoverContent = (
-      <Menu>
-        <MenuItem
-          data-testid="user-email"
-          text={`Logged in as: ${userInfo.email}`}
-        />
-        <MenuItem
-          data-testid="log-out"
-          text="Log Out"
-          href={auth.logout}
-          icon={IconNames.LOG_OUT}
-        />
-      </Menu>
-    );
-
-    return (
-      <Popover content={PopoverContent}>
-        <Button
-          data-testid="user-info"
-          className={styles.menubarButton}
-          style={{ padding: 0 }}
-        >
-          {/*  eslint-disable-next-line no-constant-condition -- disable profile picture until CSP is tweaked */}
-          {userInfo?.picture && false ? (
-            <img alt="profile" size="21px" src={userInfo?.picture} />
-          ) : (
-            <span style={{ fontSize: "18px" }}>{scientist}</span>
-          )}
-        </Button>
-      </Popover>
-    );
-  }
-
-  const LoginButton = (
-    <Tooltip
-      content="Log in to cellxgene"
-      position="bottom"
-      hoverOpenDelay={globals.tooltipHoverOpenDelay}
-    >
-      <AnchorButton
-        type="button"
-        data-testid="log-in"
-        href={auth.login}
-        className={styles.menubarButton}
-      >
-        Log In
-      </AnchorButton>
-    </Tooltip>
-  );
-
-  if (isPromptOpen) {
-    return (
-      <Popover
-        position={PopoverPosition.AUTO_END}
-        isOpen
-        content={<PromptContent setIsPromptOpen={setIsPromptOpen} />}
-        onInteraction={setIsPromptOpen}
-      >
-        {LoginButton}
-      </Popover>
-    );
-  }
-
-  return LoginButton;
-
-  function shouldShowAuth() {
-    return auth && auth.requires_client_login;
-  }
-
-  function shouldShowPrompt() {
-    if (storageGet(KEYS.LOGIN_PROMPT) === LOGIN_PROMPT_OFF) return false;
-
-    return shouldShowAuth && !isAuthenticated;
-  }
-});
-
-function PromptContent({ setIsPromptOpen }) {
-  const [isChecked, setIsChecked] = useState(false);
-
-  function handleOKClick() {
-    if (isChecked) {
-      storageSet(KEYS.LOGIN_PROMPT, LOGIN_PROMPT_OFF);
-    }
-
-    setIsPromptOpen(false);
-  }
-
-  function handleCheckboxChange() {
-    setIsChecked(!isChecked);
-  }
-
-  return (
-    <Card style={{ width: "500px" }} elevation={Elevation.TWO}>
-      <p>
-        Logging in will enable you to create your own categories and labels.
-        Logging in later will reset cellxgene to the default view and cause you
-        to lose progress.
-      </p>
-      <Checkbox
-        style={{ width: "230px" }}
-        checked={isChecked}
-        onChange={handleCheckboxChange}
-        data-testid="login-hint-do-not-show-again"
-      >
-        Do not show me this message again
-      </Checkbox>
-      <div
-        style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}
-      >
-        <Button
-          onClick={handleOKClick}
-          intent="primary"
-          data-testid="login-hint-yes"
-        >
-          Acknowledge
-        </Button>
-      </div>
-    </Card>
-  );
-}
-
-export default Auth;

client/src/components/menubar/index.js

@@ -7,7 +7,6 @@ import styles from "./menubar.css";
 import actions from "../../actions";
 import Clip from "./clip";
 
-import AuthButtons from "./authButtons";
 import Subset from "./subset";
 import UndoRedoReset from "./undoRedo";
 import DiffexpButtons from "./diffexpButtons";
@@ -36,8 +35,6 @@ import { getEmbSubsetView } from "../../util/stateManager/viewStackHelpers";
     scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
     scatterplotYYaccessor: state.controls.scatterplotYYaccessor,
     libraryVersions: state.config?.library_versions,
-    auth: state.config?.authentication,
-    userInfo: state.userInfo,
     undoDisabled: state["@@undoable/past"].length === 0,
     redoDisabled: state["@@undoable/future"].length === 0,
     aboutLink: state.config?.links?.["about-dataset"],
@@ -209,8 +206,6 @@ class MenuBar extends React.PureComponent {
       colorAccessor,
       subsetPossible,
       subsetResetPossible,
-      userInfo,
-      auth,
     } = this.props;
     const { pendingClipPercentiles } = this.state;
 
@@ -236,7 +231,6 @@ class MenuBar extends React.PureComponent {
           zIndex: 3,
         }}
       >
-        <AuthButtons {...{ auth, userInfo }} />
         <UndoRedoReset
           dispatch={dispatch}
           undoDisabled={undoDisabled}

client/src/components/util/localStorage.js

@@ -1,6 +1,5 @@
 export const KEYS = {
   COOKIE_DECISION: "cxg.cookieDecision",
-  LOGIN_PROMPT: "cxg.LOGIN_PROMPT",
 };
 
 export function storageGet(key, defaultValue = null) {