feat: Upgrade to React 18 (#2527)

Other than upgrading to React 18, also did the following
- Removed `prop-types` almost everywhere. There is 1 exported
`prop-types` we consume in DHE, so not removing fully yet
- Removed `defaultProps` on functional components. This is deprecated in
18 and removed completely in 19. We already had defaults with ES6
default params and having the `component.defaultProps` prints errors to
the dev console that are annoying
- Removed `react-test-renderer`. This is deprecated in 18 and removed in
19. Mainly had to update `Grid` and `IrisGrid` tests, but it was
relatively minimal changes, the tests are faster, and better because
they test simulated clicks instead of emitting the change events
directly
- Cleaned up all Jest warnings about `act` or other issues like throwing
without suppressing error logs that are expected. The only output now
should be about deprecated `defaultProps` on a `react-beautiful-dnd`
component and `findDOMNode` being deprecated for transitions
- Removed `StyleGuide.test.tsx`. We have e2e tests that are better and
this unit test was causing issues with `act` because it has a bunch of
lazy loaded components Jest can't resolve without changing the import
map
- Fixed some types in `IrisGrid` around props and state that were
incorrect
- Modified some e2e tests to be a bit more robust with the state
batching

---------

Co-authored-by: gzh2003 <germainzhanghoule@deephaven.io>

Author: mattrunyon

package-lock.json

@@ -56,8 +56,8 @@
   },
   "repository": "https://github.com/deephaven/web-client-ui",
   "devDependencies": {
-    "@babel/cli": "7.20.7",
-    "@babel/core": "7.20.12",
+    "@babel/cli": "7.22.15",
+    "@babel/core": "7.22.20",
     "@deephaven/components": "file:../components",
     "@deephaven/console": "file:../console",
     "@deephaven/eslint-config": "file:../eslint-config",
@@ -74,8 +74,7 @@
     "@fortawesome/fontawesome-common-types": "^6.1.1",
     "@playwright/test": "1.44.0",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/bootstrap": "^4.4.1",
     "@types/color-convert": "^2.0.0",
@@ -95,14 +94,12 @@
     "@types/papaparse": "5.3.2",
     "@types/plotly.js": "^3.0.0",
     "@types/pouchdb-browser": "^6.1.3",
-    "@types/prop-types": "^15.7.3",
-    "@types/react": "^17.0.2",
+    "@types/react": "^18.3.12",
     "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-is": "^17.0.2",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-is": "^18.3.1",
     "@types/react-plotly.js": "^2.6.0",
     "@types/react-router-dom": "^5.1.2",
-    "@types/react-test-renderer": "^17.0.1",
     "@types/react-transition-group": "^4.4.0",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
@@ -131,13 +128,12 @@
     "nanoid": "^5.0.7",
     "npm-run-all": "^4.1.5",
     "prettier": "3.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-redux": "^7.2.4",
-    "react-test-renderer": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^7.2.7",
     "redux": "^4.2.0",
     "rimraf": "^3.0.2",
-    "sass": "^1.39.0",
+    "sass": "1.49.9",
     "source-map-explorer": "^2.5.2",
     "stylelint": "^14.5.1",
     "typescript": "~5.6.2",

package.json

@@ -22,11 +22,7 @@
     "build:babel": "babel ./src --out-dir ./dist --extensions \".ts,.tsx,.js,.jsx\" --source-maps --root-mode upward"
   },
   "devDependencies": {
-    "@deephaven/test-utils": "file:../test-utils",
-    "react": "^17.x",
-    "react-dom": "^17.x",
-    "react-redux": "^7.x",
-    "redux": "^4.x"
+    "@deephaven/test-utils": "file:../test-utils"
   },
   "dependencies": {
     "@adobe/react-spectrum": "3.38.0",

packages/app-utils/package.json

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import classNames from 'classnames';
 import {
   DashboardUtils,
-  type DehydratedDashboardPanelProps,
+  type DehydratedPanelProps,
   LazyDashboard,
 } from '@deephaven/dashboard';
 import { useObjectFetcher } from '@deephaven/jsapi-bootstrap';
@@ -38,7 +38,7 @@ export function AppDashboards({
   const fetchObject = useObjectFetcher();
 
   const hydratePanel = useCallback(
-    (hydrateProps: DehydratedDashboardPanelProps, id: string) => {
+    (hydrateProps: DehydratedPanelProps, id: string) => {
       const { metadata } = hydrateProps;
       try {
         if (metadata != null) {

packages/app-utils/src/components/AppDashboards.tsx

@@ -45,8 +45,7 @@
     "js-cookie": "^3.0.5"
   },
   "devDependencies": {
-    "@deephaven/test-utils": "file:../test-utils",
-    "@types/react": "^17.0.2"
+    "@deephaven/test-utils": "file:../test-utils"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

packages/auth-plugins/package.json

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { ThemeProvider } from '@deephaven/components';
 import { ApiContext, ClientContext } from '@deephaven/jsapi-bootstrap';
 import { dh } from '@deephaven/jsapi-shim';
-import type { CoreClient } from '@deephaven/jsapi-types';
+import type { dh as DhType } from '@deephaven/jsapi-types';
 import AuthPluginPsk from './AuthPluginPsk';
 import { AUTH_HANDLER_TYPE_PSK as AUTH_TYPE } from './AuthHandlerTypes';
 import { type AuthConfigMap } from './AuthPlugin';
@@ -54,7 +54,7 @@ function makeCoreClient() {
 }
 
 function renderComponent(
-  client: CoreClient = makeCoreClient(),
+  client: DhType.CoreClient = makeCoreClient(),
   authConfigValues: AuthConfigMap = new Map()
 ) {
   return render(
@@ -197,11 +197,9 @@ describe('component tests', () => {
     expectMockChild().not.toBeInTheDocument();
     expect(mockLogin).not.toHaveBeenCalled();
 
-    await act(async () => {
-      await user.type(screen.getByRole('textbox', { name: 'Token' }), token);
-      await user.click(screen.getByRole('button', { name: 'Login' }));
-      await loginPromise;
-    });
+    await user.type(screen.getByRole('textbox', { name: 'Token' }), token);
+    await user.click(screen.getByRole('button', { name: 'Login' }));
+    await loginPromise;
 
     expect(mockLogin).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -228,10 +226,8 @@ describe('component tests', () => {
     expectInput().toBeInTheDocument();
     expectMockChild().not.toBeInTheDocument();
 
-    await act(async () => {
-      await user.type(screen.getByRole('textbox', { name: 'Token' }), token);
-      await user.click(screen.getByRole('button', { name: 'Login' }));
-    });
+    await user.type(screen.getByRole('textbox', { name: 'Token' }), token);
+    await user.click(screen.getByRole('button', { name: 'Login' }));
     expect(mockLogin).toHaveBeenCalledWith(
       expect.objectContaining({
         type: AUTH_TYPE,

packages/auth-plugins/src/AuthPluginPsk.test.tsx

@@ -5,8 +5,6 @@ interface TransitionProps {
   in: boolean;
 }
 
-/* eslint-disable @typescript-eslint/strict-boolean-expressions */
-/* eslint-disable react/prop-types */
 export function Transition({
   children,
   in: inProp,

packages/auth-plugins/src/__mocks__/react-transition-group.ts

@@ -15,7 +15,7 @@
     "./mockCssImportPlugin": "./mockCssImportPlugin.js"
   },
   "dependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.22.0",
     "@babel/plugin-proposal-class-properties": "^7.18.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/preset-react": "^7.18.0",

packages/babel-preset/package.json

@@ -40,8 +40,7 @@
     "lodash.set": "^4.3.2",
     "memoize-one": "^5.1.1",
     "memoizee": "^0.4.15",
-    "plotly.js": "3.1.0-rc.0",
-    "prop-types": "^15.7.2",
+    "plotly.js": "3.1.0",
     "react-plotly.js": "^2.6.0"
   },
   "peerDependencies": {

packages/chart/package.json

@@ -247,7 +247,7 @@ class Chart extends Component<ChartProps, ChartState> {
 
   plotWrapperMerged: React.RefCallback<HTMLDivElement>;
 
-  columnFormats?: FormattingRule[];
+  columnFormats?: readonly FormattingRule[];
 
   dateTimeFormatterOptions?: DateTimeColumnFormatterOptions;