chore: Upgrade React 18 (SCE-1) (#1079)

Co-authored-by: Timmy Huang <[email protected]>

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-78bf2226
+        tag: sha-d6c2ebd2
       replicaCount: 1
       env:
         # env vars common to all deployment stages

client/.nvmrc

@@ -1 +1 @@
-v16
+v20

client/__tests__/e2e/cellxgeneActions.ts

@@ -752,11 +752,21 @@ export async function addGeneToSearch(
   geneName: string,
   page: Page
 ): Promise<void> {
-  await page
-    .getByTestId(`gene-search`)
-    .getByPlaceholder("Quick Gene Search")
-    .fill(geneName);
-  await page.keyboard.press("Enter");
+  await tryUntil(
+    async () => {
+      await page
+        .getByTestId("gene-search")
+        .getByPlaceholder("Quick Gene Search")
+        .fill(geneName);
+      await expect(
+        page.getByTestId(`suggest-menu-item-${geneName}`)
+      ).toBeVisible();
+    },
+    { page }
+  );
+
+  await page.getByTestId(`suggest-menu-item-${geneName}`).click();
+
   expect(page.getByTestId(`histogram-${geneName}`)).toBeTruthy();
 }
 

client/__tests__/e2e/e2e.test.ts

@@ -839,7 +839,6 @@ for (const testDataset of testDatasets) {
                 coords: initialCoordinates,
                 page,
               });
-
               const newGraph = page.getByTestId("graph-wrapper");
               const newDistance =
                 (await newGraph.getAttribute("data-camera-distance")) ?? "-1";

client/package.json

@@ -30,7 +30,7 @@
   "engineStrict": true,
   "engines": {
     "npm": ">=3.0.0",
-    "node": ">=16"
+    "node": ">=20"
   },
   "eslintConfig": {
     "extends": [
@@ -85,9 +85,9 @@
     "memoize-one": "^5.1.1",
     "openseadragon": "^4.1.1",
     "pako": "^2.0.3",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-async": "^10.0.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-flip-toolkit": "^7.0.12",
     "react-icons": "^4.2.0",
     "react-redux": "^7.2.0",
@@ -117,8 +117,8 @@
     "@babel/register": "^7.13.16",
     "@babel/runtime": "^7.13.16",
     "@blueprintjs/eslint-plugin": "^0.3.0",
-    "@chromatic-com/playwright": "^0.5.3",
-    "@playwright/test": "^1.40.1",
+    "@chromatic-com/playwright": "^0.6.18",
+    "@playwright/test": "^1.46.1",
     "@sentry/webpack-plugin": "^1.15.0",
     "@storybook/addon-essentials": "^7.6.12",
     "@storybook/addon-interactions": "^7.6.12",
@@ -147,8 +147,8 @@
     "@types/node": "^20.10.6",
     "@types/openseadragon": "^3.0.10",
     "@types/pako": "^1.0.2",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.18",
     "@types/sha1": "^1.1.3",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -159,7 +159,7 @@
     "browserslist-useragent-regexp": "^3.0.2",
     "chalk": "^4.1.0",
     "cheerio": "^1.0.0-rc.6",
-    "chromatic": "^10.7.1",
+    "chromatic": "^11.7.1",
     "chromatic-playwright": "^0.4.1",
     "clean-css": "^5.1.2",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
@@ -198,12 +198,12 @@
     "prettier": "^2.0.5",
     "rimraf": "^3.0.2",
     "serve-favicon": "^2.5.0",
-    "storybook": "^7.6.12",
+    "storybook": "^8.2.9",
     "terser-webpack-plugin": "^5.1.1",
     "typescript": "^4.3.5",
     "webpack": "^5.34.0",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-middleware": "^4.1.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-middleware": "^5.3.4",
     "webpack-merge": "^5.0.9"
   },
   "babel": {

client/src/components/NavBar/index.tsx

@@ -35,7 +35,7 @@ interface HeaderProps {
   tosURL?: string;
   privacyURL?: string;
 }
-const Header = (props: HeaderProps) => {
+function Header(props: HeaderProps) {
   const { tosURL, privacyURL } = props;
   return (
     <Wrapper data-testid="header">
@@ -234,9 +234,6 @@ const Header = (props: HeaderProps) => {
   function handleDEClick(): void {
     track(EVENTS.DE_CLICK_NAV);
   }
-};
-Header.defaultProps = {
-  tosURL: undefined,
-  privacyURL: undefined,
-};
+}
+
 export default Header;

client/src/components/brushableHistogram/loading.tsx

@@ -7,11 +7,8 @@ interface StillLoadingProps {
 /**
  * Render a loading indicator for the field.
  */
-const StillLoading = ({ height = 211 }: StillLoadingProps): JSX.Element => (
-  <div style={{ height }} className={SKELETON} />
-);
-StillLoading.defaultProps = {
-  height: 211,
-};
+function StillLoading({ height = 211 }: StillLoadingProps) {
+  return <div style={{ height }} className={SKELETON} />;
+}
 
 export default StillLoading;

client/src/components/categorical/category/index.tsx

@@ -450,6 +450,7 @@ const CategoryHeader = React.memo(
             alignItems: "flex-start",
           }}
         >
+          {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO: Need to separate expand and checkbox label */}
           <label
             className={`${Classes.CONTROL} ${Classes.CHECKBOX} ignore-capture`}
             htmlFor={checkboxID}

client/src/components/categorical/value/index.tsx

@@ -1,7 +1,7 @@
 import { connect } from "react-redux";
 import React from "react";
 import * as d3 from "d3";
-import { Classes } from "@blueprintjs/core";
+import { Checkbox } from "@blueprintjs/core";
 import * as globals from "../../../globals";
 // @ts-expect-error ts-migrate(2307) FIXME: Cannot find module '../categorical.css' or its cor... Remove this comment to see the full error message
 import styles from "../categorical.css";
@@ -601,26 +601,21 @@ class CategoryValue extends React.Component<Props, InternalStateProps> {
           }}
         >
           <div style={{ display: "flex", alignItems: "baseline" }}>
-            <label
-              htmlFor={valueToggleLabel}
-              className={`${Classes.CONTROL} ${Classes.CHECKBOX} ignore-capture`}
-              style={{ margin: 0 }}
+            <span
+              className="ignore-capture"
+              style={{ margin: 0, height: "18px" }}
             >
-              <input
+              <Checkbox
                 id={valueToggleLabel}
                 onChange={isSelected ? this.toggleOff : this.toggleOn}
                 data-testid={`categorical-value-select-${metadataField}-${displayString}`}
                 checked={isSelected}
                 type="checkbox"
               />
-              <span
-                className={Classes.CONTROL_INDICATOR}
-                onMouseEnter={this.handleMouseExit}
-                onMouseLeave={this.handleMouseEnter}
-              />
-            </label>
+            </span>
             <Truncate>
-              <span
+              <label
+                htmlFor={valueToggleLabel}
                 data-testid="categorical-value"
                 tabIndex={-1}
                 style={{
@@ -642,7 +637,7 @@ class CategoryValue extends React.Component<Props, InternalStateProps> {
                 }}
               >
                 {displayString}
-              </span>
+              </label>
             </Truncate>
             {isCellInfo && (
               <InfoButtonWrapper>

client/src/components/controls/index.tsx

@@ -29,8 +29,4 @@ function Controls(props: Props): JSX.Element {
   );
 }
 
-Controls.defaultProps = {
-  bottom: undefined,
-};
-
 export default Controls;

client/src/components/framework/layout.tsx

@@ -1,7 +1,8 @@
-import React, { Children, useState } from "react";
+import React, { Children, ReactNode, useState } from "react";
 import * as globals from "../../globals";
 
 interface Props {
+  children: ReactNode;
   addTopPadding: boolean;
   renderGraph?: (viewport: HTMLDivElement) => React.ReactNode;
 }
@@ -17,11 +18,10 @@ interface Props {
   should be.
 */
 
-const Layout: React.FC<Props> = (props) => {
+function Layout({ children, addTopPadding, renderGraph = undefined }: Props) {
   const [viewportRef, setViewportRef] = useState<HTMLDivElement | null>(null);
-
-  const { children, addTopPadding, renderGraph } = props;
-  const [leftSidebar, rightSidebar] = Children.toArray(children);
+  const [leftSidebar, rightSidebar, ...restChildren] =
+    Children.toArray(children);
   let graphComponent = null;
   if (viewportRef && renderGraph) {
     graphComponent = renderGraph(viewportRef);
@@ -74,6 +74,7 @@ const Layout: React.FC<Props> = (props) => {
         }}
       >
         {graphComponent}
+        {restChildren}
       </div>
       <div
         style={{
@@ -88,9 +89,6 @@ const Layout: React.FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}
 
-Layout.defaultProps = {
-  renderGraph: undefined,
-};
 export default Layout;

client/src/components/framework/layoutSkeleton.tsx

@@ -8,12 +8,6 @@ import Layout from "./layout";
 import LeftSidebarSkeleton from "../leftSidebar/leftSidebarSkeleton";
 import RightSidebarSkeleton from "../rightSidebar/rightSidebarSkeleton";
 
-/* Padding between dataset selector and menubar */
-const PADDING_CONTROLS = 10;
-
-/* Width of menubar */
-const WIDTH_MENUBAR = 482;
-
 /**
  * Skeleton layout component displayed when in loading state.
  * @returns Markup displaying skeleton.
@@ -22,29 +16,19 @@ function LayoutSkeleton(): JSX.Element {
   return (
     <Layout addTopPadding>
       <LeftSidebarSkeleton />
-      {() => (
-        <Controls>
-          <div
-            style={{
-              height: 30,
-              position: "relative",
-              top: 8,
-              width: `calc(100% - ${WIDTH_MENUBAR}px - ${PADDING_CONTROLS}px)`,
-            }}
-            className={SKELETON}
-          />
-          <div
-            style={{
-              height: 30,
-              position: "relative",
-              top: 8,
-              width: WIDTH_MENUBAR,
-            }}
-            className={SKELETON}
-          />
-        </Controls>
-      )}
       <RightSidebarSkeleton />
+      <Controls>
+        <div
+          style={{
+            height: 30,
+            position: "relative",
+            top: 8,
+            width: "100%",
+          }}
+          className={SKELETON}
+          data-testid="menubar-skeleton"
+        />
+      </Controls>
     </Layout>
   );
 }