feat: Upgrade to React 18

package.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",

packages/app-utils/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/src/components/AppDashboards.tsx

@@ -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/auth-plugins/package.json

@@ -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/src/AuthPluginPsk.test.tsx

@@ -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/__mocks__/react-transition-group.ts

@@ -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/babel-preset/package.json

@@ -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/chart/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/src/Chart.tsx

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

packages/chart/src/ChartUtils.ts

@@ -34,7 +34,7 @@ export type FilterMap = Map<string, unknown>;
 
 export interface ChartModelSettings {
   hiddenSeries?: string[];
-  type?: keyof DhType.plot.SeriesPlotStyle;
+  type?: keyof typeof DhType.plot.SeriesPlotStyle;
   series?: string[];
   xAxis?: string;
   title?: string;

packages/code-studio/package.json

@@ -51,11 +51,10 @@
     "nanoid": "^5.0.7",
     "pouchdb-browser": "^7.2.2",
     "pouchdb-find": "^7.2.2",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-beautiful-dnd": "^13.1.0",
-    "react-dom": "^17.0.2",
-    "react-redux": "^7.2.4",
+    "react": "^18.3.1",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^7.2.7",
     "react-router-dom": "^5.1.2",
     "react-transition-group": "^4.4.2",
     "redux": "^4.2.0",

packages/code-studio/src/index.tsx

@@ -1,11 +1,12 @@
+import { createRoot } from 'react-dom/client';
 import React, { Suspense } from 'react';
-import ReactDOM from 'react-dom';
 import '@deephaven/components/scss/BaseStyleSheet.scss'; // Do NOT move any lower. This needs to be imported before any other styles
 import { Provider } from 'react-redux';
 import { LoadingOverlay, preloadTheme } from '@deephaven/components';
 import { ApiBootstrap } from '@deephaven/jsapi-bootstrap';
 import { store } from '@deephaven/redux';
 import { logInit } from '@deephaven/log';
+import { assertNotNull } from '@deephaven/utils';
 
 logInit(
   parseInt(import.meta.env.VITE_LOG_LEVEL ?? '', 10),
@@ -65,7 +66,11 @@ async function getCorePlugins() {
   ];
 }
 
-ReactDOM.render(
+const rootElement = document.getElementById('root');
+assertNotNull(rootElement);
+const root = createRoot(rootElement);
+
+root.render(
   <ApiBootstrap apiUrl={apiURL.href} setGlobally>
     <Suspense
       fallback={<LoadingOverlay data-testid="code-studio-index-loading" />}
@@ -81,6 +86,5 @@ ReactDOM.render(
         </AppBootstrap>
       </Provider>
     </Suspense>
-  </ApiBootstrap>,
-  document.getElementById('root')
+  </ApiBootstrap>
 );

packages/code-studio/src/main/AppControlsMenu.tsx

@@ -23,12 +23,12 @@ import {
   vsMarkdown,
   vsDeviceCamera,
 } from '@deephaven/icons';
-import PropTypes from 'prop-types';
+import { assertNotNull } from '@deephaven/utils';
 
 const MINIMUM_DRAG_DISTANCE = 10;
 
 interface DragSourceMenuItemProps {
-  forwardedProps: {
+  forwardedProps?: {
     iconElement: ReactNode;
     displayShortcut: string;
     isMouseSelected: boolean;
@@ -50,16 +50,16 @@ interface DragSourceMenuItemProps {
  */
 
 function DragSourceMenuItem(props: DragSourceMenuItemProps): JSX.Element {
+  const { forwardedProps } = props;
+  assertNotNull(forwardedProps, 'DragSourceMenuItem forwardedProps'); // These are added by the ContextMenuItem, but not used where we declare the items
   const {
-    forwardedProps: {
-      menuItem: { action, title, disabled: menuItemDisabled },
-      iconElement,
-      displayShortcut,
-      isMouseSelected,
-      isKeyboardSelected,
-      closeMenu,
-    },
-  } = props;
+    menuItem: { action, title, disabled: menuItemDisabled },
+    iconElement,
+    displayShortcut,
+    isMouseSelected,
+    isKeyboardSelected,
+    closeMenu,
+  } = forwardedProps;
 
   const startX = useRef<number>();
   const startY = useRef<number>();
@@ -223,35 +223,4 @@ function AppControlsMenu(props: AppControlsMenuProps): ReactElement {
   );
 }
 
-AppControlsMenu.propTypes = {
-  handleControlSelect: PropTypes.func,
-  handleToolSelect: PropTypes.func,
-  onClearFilter: PropTypes.func,
-};
-
-AppControlsMenu.defaultProps = {
-  handleControlSelect: () => undefined,
-  handleToolSelect: () => undefined,
-  onClearFilter: () => undefined,
-};
-
-DragSourceMenuItem.propTypes = {
-  forwardedProps: PropTypes.shape({
-    iconElement: PropTypes.node,
-    displayShortcut: PropTypes.string,
-    isMouseSelected: PropTypes.bool.isRequired,
-    isKeyboardSelected: PropTypes.bool.isRequired,
-    closeMenu: PropTypes.func.isRequired,
-    menuItem: PropTypes.shape({
-      action: PropTypes.func,
-      title: PropTypes.string,
-      disabled: PropTypes.bool,
-    }).isRequired,
-  }),
-};
-
-DragSourceMenuItem.defaultProps = {
-  forwardedProps: null,
-};
-
 export default AppControlsMenu;