Migrate pgAdmin UI to use React 19

web/.eslintrc.js

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

@@ -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/jest.config.js

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

@@ -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/pgadmin/about/static/js/AboutComponent.jsx

@@ -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/about.js

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

web/pgadmin/browser/static/js/node.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/dashboard/static/js/Dashboard.jsx

@@ -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/Graphs.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';

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

@@ -6,7 +6,6 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
-import React from 'react';
 
 export default function PgAdminLogo() {
 

web/pgadmin/dashboard/static/js/Replication/LogReplication.jsx

@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import { Box } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import gettext from 'sources/gettext';
 import ReplicationSlotsSchema from './schema_ui/replication_slots.ui';

web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx

@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import { Box, Grid, useTheme } from '@mui/material';
-import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { useEffect, useMemo, useReducer, useRef, useState } from 'react';
 
 import gettext from 'sources/gettext';
 import PgTable from 'sources/components/PgTable';

web/pgadmin/dashboard/static/js/Replication/index.jsx

@@ -8,7 +8,6 @@
 //////////////////////////////////////////////////////////////
 
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import LogReplication from './LogReplication';
 import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';

web/pgadmin/dashboard/static/js/SystemStats/CpuDetails.jsx

@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
+import { useState, useEffect, useRef, useReducer, useMemo } from 'react';
 import PgTable from 'sources/components/PgTable';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';

web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx

@@ -6,7 +6,7 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
-import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
+import { useState, useEffect, useRef, useReducer, useMemo } from 'react';
 import PgTable from 'sources/components/PgTable';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';

web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx

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

web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx

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

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

@@ -7,7 +7,6 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React from 'react';
 import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import _ from 'lodash';

web/pgadmin/dashboard/static/js/components/ChartContainer.jsx

@@ -6,7 +6,6 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
-import React from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { Box, Card, CardContent, CardHeader } from '@mui/material';

web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx

@@ -7,7 +7,6 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React from 'react';
 import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';

web/pgadmin/dashboard/static/js/components/SectionContainer.jsx

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

web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx

@@ -1,6 +1,5 @@
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import React from 'react';
 import CloseIcon from '@mui/icons-material/CloseRounded';
 import { DefaultButton, PgIconButton } from '../../../../static/js/components/Buttons';
 import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';

web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx

@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React, { useState, useMemo } from 'react';
+import { useState, useMemo } from 'react';
 import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';

web/pgadmin/misc/cloud/static/js/cloud.js

@@ -6,7 +6,6 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
-import React from 'react';
 import CloudWizard from './CloudWizard';
 import getApiInstance from '../../../../static/js/api_instance';
 import { BROWSER_PANELS } from '../../../../browser/static/js/constants';

web/pgadmin/misc/cloud/static/js/cloud_components.jsx

@@ -7,7 +7,6 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React from 'react';
 import { ToggleButton, ToggleButtonGroup, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import { DefaultButton, PrimaryButton } from '../../../../static/js/components/Buttons';

web/pgadmin/misc/file_manager/static/js/FileManagerModule.jsx

@@ -8,7 +8,6 @@
 //
 //////////////////////////////////////////////////////////////
 import gettext from 'sources/gettext';
-import React from 'react';
 import FileManager from './components/FileManager';
 import { getBrowser } from '../../../../static/js/utils';
 import pgAdmin from 'sources/pgadmin';

web/pgadmin/misc/file_manager/static/js/components/GridView.jsx

@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import React, {useState, useEffect, useRef, useLayoutEffect} from 'react';
+import {useState, useEffect, useRef, useLayoutEffect} from 'react';
 import FolderIcon from '@mui/icons-material/Folder';
 import DescriptionIcon from '@mui/icons-material/Description';
 import LockRoundedIcon from '@mui/icons-material/LockRounded';

web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx

@@ -6,7 +6,7 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
-import React, { useCallback, useReducer, useEffect, useMemo } from 'react';
+import { useCallback, useReducer, useEffect, useMemo } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, List, ListItem } from '@mui/material';
 import CloseIcon from '@mui/icons-material/CloseRounded';

web/pgadmin/misc/properties/Properties.jsx

@@ -7,7 +7,6 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React from 'react';
 import { styled } from '@mui/material/styles';
 import CollectionNodeProperties from './CollectionNodeProperties';
 import ErrorBoundary from '../../static/js/helpers/ErrorBoundary';

web/pgadmin/misc/workspaces/static/js/AdHocConnection.jsx

@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React, { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
 import _ from 'lodash';
@@ -229,7 +229,6 @@ class AdHocConnectionSchema extends BaseUISchema {
             return {type: 'text'};
           }
         },
-        optionsLoaded: (res) => this.dbs = res,
         depChange: (state) => {
           /* Once the option is selected get the name */
           return {

web/pgadmin/misc/workspaces/static/js/WorkspaceToolbar.jsx

@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { usePgAdmin } from '../../../../static/js/PgAdminProvider';
 import { Box } from '@mui/material';
 import { QueryToolIcon, SchemaDiffIcon } from '../../../../static/js/components/ExternalIcon';

web/pgadmin/misc/workspaces/static/js/WorkspaceWelcomePage.jsx

@@ -7,7 +7,6 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React from 'react';
 import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';

web/pgadmin/misc/workspaces/static/js/config.jsx

@@ -10,7 +10,6 @@
 import gettext from 'sources/gettext';
 import { BROWSER_PANELS, WORKSPACES } from '../../../../browser/static/js/constants';
 import WorkspaceWelcomePage from './WorkspaceWelcomePage';
-import React from 'react';
 import { LayoutDocker } from '../../../../static/js/helpers/Layout';
 
 const welcomeQueryToolPanelData = [{

web/pgadmin/preferences/static/js/components/LeftTree.jsx

@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React, { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Resizable } from 're-resizable';
 // Import helpers from new file

web/pgadmin/preferences/static/js/components/PreferencesHelper.jsx

@@ -11,7 +11,6 @@ import gettext from 'sources/gettext';
 import { styled } from '@mui/material/styles';
 import _ from 'lodash';
 import url_for from 'sources/url_for';
-import React from 'react';
 import { Box } from '@mui/material';
 import { DefaultButton, PrimaryButton } from '../../../../static/js/components/Buttons';
 import { getBinaryPathSchema } from './binary_path.ui';

web/pgadmin/preferences/static/js/components/RightPreference.jsx

@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import gettext from 'sources/gettext';
-import React, { useEffect, useRef, useCallback } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
 import { Box, Link } from '@mui/material';
 import PropTypes from 'prop-types';
 import SchemaView from '../../../../static/js/SchemaView';

web/pgadmin/static/bundle/app.js

@@ -7,7 +7,6 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import BrowserComponent from '../js/BrowserComponent';
 import MainMenuFactory from '../../browser/static/js/MainMenuFactory';

web/pgadmin/static/js/AppMenuBar.jsx

@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { PrimaryButton } from './components/Buttons';
 import { PgMenu, PgMenuDivider, PgMenuItem, PgSubMenu } from './components/Menu';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

web/pgadmin/static/js/BrowserComponent.jsx

@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React, {useEffect, useMemo, useState } from 'react';
+import {useEffect, useMemo, useState } from 'react';
 import AppMenuBar from './AppMenuBar';
 import ObjectBreadcrumbs from './components/ObjectBreadcrumbs';
 import Layout, { LAYOUT_EVENTS, LayoutDocker, getDefaultGroup } from './helpers/Layout';

web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 import BaseUISchema from '../SchemaView/base_schema.ui';

web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ModalContent, ModalFooter } from '../../../static/js/components/ModalContent';
 import gettext from 'sources/gettext';
 import { Box } from '@mui/material';

web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx

@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { useState, useRef, useEffect, useLayoutEffect } from 'react';
 import gettext from 'sources/gettext';
 import { Box } from '@mui/material';
 import { DefaultButton, PrimaryButton } from '../components/Buttons';