Migrate pgAdmin UI to use React 19. #8676

Author: adityatoshniwal

tools/get_chromedriver.py

@@ -92,7 +92,9 @@ module.exports = [
       'no-import-assign': 'off',
       ...reactjs.configs.recommended.rules,
       ...reactjs.configs['jsx-runtime'].rules,
-      'react/jsx-uses-react': 'error',
+      'react/prop-types': 'off',
+      'react/react-in-jsx-scope': 0,
+      'react/jsx-uses-react': 0,
       'react/jsx-uses-vars': 'error',
       'no-unused-vars': 'off',
       'unused-imports/no-unused-imports': 'error',

web/.eslintrc.js

@@ -1,4 +1,6 @@
 {
-  "presets": [["@babel/preset-env", {"modules": "commonjs", "useBuiltIns": "usage", "corejs": 3}], "@babel/preset-react", "@babel/preset-typescript"],
-  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/proposal-object-rest-spread", "@babel/plugin-transform-runtime"]
+  "presets": [["@babel/preset-env", {"modules": "commonjs", "useBuiltIns": "usage", "corejs": 3}], ["@babel/preset-react", {
+    "runtime": "automatic"
+  }], "@babel/preset-typescript"],
+  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/proposal-object-rest-spread"]
 }

web/babel.config.json

@@ -2,7 +2,8 @@ const webpackShimAlias = require('./webpack.shim').resolveAlias;
 
 const webpackAliasToJestModules = ()=>{
   const ret = {
-    '\\.svg': '<rootDir>/regression/javascript/__mocks__/svg.js'
+    '\\.svg\\?svgr$': '<rootDir>/regression/javascript/__mocks__/svg.js',
+    'react-dom/server': 'react-dom/server.edge',
   };
   Object.keys(webpackShimAlias).forEach((an)=>{
     // eg - sources: ./pgadmin/static/js/ to '^sources/(.*)$': '<rootDir>/pgadmin/static/js/$1'

web/jest.config.js

@@ -71,7 +71,7 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-react": "^7.27.1",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.10.0",
     "@date-io/core": "^3.0.0",
@@ -90,8 +90,8 @@
     "@tanstack/react-table": "^8.16.0",
     "@tanstack/react-virtual": "^3.13.6",
     "@types/classnames": "^2.3.4",
-    "@types/react": "^18.0.2",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-search": "^0.15.0",
     "@xterm/addon-web-links": "^0.11.0",
@@ -124,15 +124,15 @@
     "papaparse": "^5.5.2",
     "path-fx": "^2.0.0",
     "postcss": "^8.5.6",
-    "rc-dock": "^3.3.2",
-    "react": "^18.2.0",
+    "rc-dock": "^4.0.0-alpha.2",
+    "react": "^19.0.0",
     "react-arborist": "^3.2.0",
     "react-aspen": "^1.1.0",
     "react-checkbox-tree": "^1.7.2",
     "react-data-grid": "https://github.com/pgadmin-org/react-data-grid.git#3dfc2ca01a046d55c1c7a45392dcec104815dc76",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.0.0",
     "react-draggable": "^4.4.6",
     "react-dropzone": "^14.2.1",
     "react-frame-component": "^5.2.6",

web/package.json

@@ -9,7 +9,7 @@
 
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
-import React, { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { Box, Grid, InputLabel } from '@mui/material';
 import { InputSQL } from '../../../static/js/components/FormComponents';
 import getApiInstance from '../../../static/js/api_instance';

web/pgadmin/about/static/js/AboutComponent.jsx

@@ -7,7 +7,6 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React from 'react';
 import gettext from 'sources/gettext';
 import pgAdmin from 'sources/pgadmin';
 import AboutComponent from './AboutComponent';

web/pgadmin/about/static/js/about.js

@@ -10,7 +10,6 @@
 import _ from 'lodash';
 import getApiInstance from '../../../static/js/api_instance';
 import { AllPermissionTypes, BROWSER_PANELS } from './constants';
-import React from 'react';
 import ObjectNodeProperties from '../../../misc/properties/ObjectNodeProperties';
 import ErrorBoundary from '../../../static/js/helpers/ErrorBoundary';
 import toPx from '../../../static/js/to_px';

web/pgadmin/browser/static/js/node.js

@@ -6,7 +6,7 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
-import React, { useEffect, useMemo, useState, Fragment } from 'react';
+import { useEffect, useMemo, useState, Fragment } from 'react';
 import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';

web/pgadmin/dashboard/static/js/Dashboard.jsx

@@ -6,7 +6,7 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
-import React, { useEffect, useRef, useState, useReducer, useMemo } from 'react';
+import { useEffect, useRef, useState, useReducer, useMemo } from 'react';
 import { DATA_POINT_SIZE } from 'sources/chartjs';
 import ChartContainer from './components/ChartContainer';
 import url_for from 'sources/url_for';