Supersedes dependabot #9843 and #9888, which must land together because date-pickers v9 requires @mui/material v9 as a peer. @mui/material skipped v8 on npm (7.x -> 9.x), so only v9's breaking changes apply. ## Manifest changes - @mui/material ^7.3.10 -> ^9.0.0 (resolved 9.0.1) - @mui/icons-material ^7.3.10 -> ^9.0.0 (resolved 9.0.1) - @mui/x-date-pickers ^8.28.3 -> ^9.0.2 (resolved 9.2.0) ## Source changes (98 files, mostly mechanical) 1. Two legacy icon imports renamed (v9 removed these in favor of the *Outlined variants): -import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; +import ErrorOutlineIcon from '@mui/icons-material/ErrorOutlined'; -import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; +import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutlined'; Both in web/pgadmin/static/js/Explain/AIInsights.jsx. 2. `styled(Box)` -> `styled('div')` across 50 files. v9's `Box` stopped filtering CSS-property-named keys (flexDirection, marginLeft, etc.) out of the props it forwarded to the DOM, so any `styled(Box)(({theme}) => ({ flexDirection: 'column', ... }))` leaked those CSS keys to the underlying `<div>` as React props. Using `styled('div')` keeps the CSS-in-JS layer working as expected and removes the now-redundant Box layer (every affected styled wrapper was a pure styling container, not using Box's sx-passthrough or component-swap behavior). 3. Box / Stack / Typography / Link / Grid / DialogContentText / TimelineContent / TimelineOppositeContent system props moved to `sx`. v9 removed individual system-prop syntax from these components; `<Box flexGrow={1}>` is now `<Box sx={{flexGrow: 1}}>`. Applied via the official codemod: npx @mui/codemod@latest v9.0.0/system-props pgadmin 65 files transformed, 6 Jinja-templated `.js` files skipped (parse errors, not real JS; no MUI usage in them). 4. One test updated for v9's class-name split. Button's variant+color combo class (`MuiButton-containedPrimary`) is now emitted as two separate classes (`MuiButton-contained` + `MuiButton-colorPrimary`). web/regression/javascript/components/Buttons.spec.js ## Test plan - [x] `yarn install` resolved cleanly - [x] `yarn run test:js-once` -> 140/0/0 suites, 824/0/0 tests - [x] `yarn run linter` -> clean (silent) - [ ] CI matrix (Linux/Mac/Windows) passes - [ ] Visual sweep of main UI surfaces in `yarn start`: login screen, browser tree, query tool, ERD, schema dialogs (table/function/trigger/index), theme switcher (light/dark/high-contrast), file manager, debugger panel, backup/restore dialogs. ## Notes for reviewers The major risk surface for this PR is not API breakage (all caught by jest) but **visual regression**. v9's "sx prop performance" and "deprecated API cleanup" work shifts a few pixels in places — most notably ListItemIcon spacing (which v9 changed from hardcoded `minWidth` to theme spacing). Worth a careful look at menus and toolbars. The other Box-related changes (system props -> sx) preserve behavior 1:1 — they're a pure syntactic migration. `@mui/x-date-pickers`'s legacy `LocalizationProvider` API was removed, but we already use the modern `dateAdapter={AdapterDateFns}` form in `Theme/index.jsx`, so no change needed there.
pgAdmin 4
pgAdmin 4 is a rewrite of the popular pgAdmin3 management tool for the PostgreSQL (http://www.postgresql.org) database.
In the following documentation and examples, $PGADMIN4_SRC/ is used to denote the top-level directory of a copy of the pgAdmin source tree, either from a tarball or a git checkout.
Architecture
pgAdmin 4 is written as a web application with Python(Flask) on the server side and ReactJS, HTML5 with CSS for the client side processing and UI.
Although developed using web technologies, pgAdmin 4 can be deployed either on a web server using a browser, or standalone on a workstation. The runtime/ subdirectory contains an Electron based runtime application intended to allow this, which will fork a Python server process and display the UI.
Prerequisites
- Install Node.js 20 and above (https://nodejs.org/en/download)
- yarn (https://yarnpkg.com/getting-started/install)
- Python 3.9 and above (https://www.python.org/downloads/)
- PostgreSQL server (https://www.postgresql.org/download)
Start by enabling Corepack, if it isn't already; this will add the yarn binary to your PATH:
corepack enable
Building the Web Assets
pgAdmin is dependent on a number of third party Javascript libraries. These, along with it's own Javascript code, CSS code and images must be compiled into a "bundle" which is transferred to the browser for execution and rendering. This is far more efficient than simply requesting each asset as it's needed by the client.
To create the bundle, you will need the 'yarn' package management tool to be installed. Then, you can run the following commands on a *nix system to download the required packages and build the bundle:
$ cd $PGADMIN4_SRC
$ make install-node
$ make bundle
On Windows systems (where "make" is not available), the following commands can be used:
C:\> cd $PGADMIN4_SRC\web
C:\$PGADMIN4_SRC\web> yarn install
C:\$PGADMIN4_SRC\web> yarn run bundle
Configuring the Python Environment
In order to run the Python code, a suitable runtime environment is required. Python version 3.9 and later are currently supported. It is recommended that a Python Virtual Environment is setup for this purpose, rather than using the system Python environment. On Linux and Mac systems, the process is fairly simple - adapt as required for your distribution:
-
Create a virtual environment in an appropriate directory. The last argument is the name of the environment; that can be changed as desired:
$ python3 -m venv venv -
Now activate the virtual environment:
$ source venv/bin/activate -
Some of the components used by pgAdmin require a very recent version of pip, so update that to the latest:
(venv) $ pip install --upgrade pip -
Ensure that a PostgreSQL installation's bin/ directory is in the path (so pg_config can be found for building psycopg3), and install the required packages:
(venv) $ PATH=$PATH:/usr/local/pgsql/bin pip install -r $PGADMIN4_SRC/requirements.txtIf you are planning to run the regression tests, you also need to install additional requirements from web/regression/requirements.txt:
(venv) $ pip install -r $PGADMIN4_SRC/web/regression/requirements.txt -
Create a local configuration file for pgAdmin. Edit $PGADMIN4_SRC/web/config_local.py and add any desired configuration options (use the config.py file as a reference - any settings duplicated in config_local.py will override those in config.py). A typical development configuration may look like:
import os import logging # Change pgAdmin data directory DATA_DIR = '/Users/myuser/.pgadmin_dev' #Change pgAdmin server and port DEFAULT_SERVER = '127.0.0.1' DEFAULT_SERVER_PORT = 5051 # Switch between server and desktop mode SERVER_MODE = True #Change pgAdmin config DB path in case external DB is used. CONFIG_DATABASE_URI="postgresql://postgres:postgres@localhost:5436/pgadmin" #Setup SMTP MAIL_SERVER = 'smtp.gmail.com' MAIL_PORT = 465 MAIL_USE_SSL = True MAIL_USERNAME = 'user@gmail.com' MAIL_PASSWORD = 'xxxxxxxxxx' # Change log level CONSOLE_LOG_LEVEL = logging.INFO FILE_LOG_LEVEL = logging.INFO # Use a different config DB for each server mode. if SERVER_MODE == False: SQLITE_PATH = os.path.join( DATA_DIR, 'pgadmin4-desktop.db' ) else: SQLITE_PATH = os.path.join( DATA_DIR, 'pgadmin4-server.db' )This configuration allows easy switching between server and desktop modes for testing.
-
The initial setup of the configuration database is interactive in server mode, and non-interactive in desktop mode. You can run it either by running:
(venv) $ python3 $PGADMIN4_SRC/web/setup.pyor by starting pgAdmin 4:
(venv) $ python3 $PGADMIN4_SRC/web/pgAdmin4.py
Whilst it is possible to automatically run setup in desktop mode by running the runtime, that will not work in server mode as the runtime doesn't allow command line interaction with the setup program.
At this point you will be able to run pgAdmin 4 from the command line in either server or desktop mode, and access it from a web browser using the URL shown in the terminal once pgAdmin has started up.
Setup of an environment on Windows is somewhat more complicated unfortunately, please see pkg/win32/README.txt for complete details.
Building the documentation
In order to build the docs, an additional Python package is required in the virtual environment. This can be installed with the pip package manager:
$ source venv/bin/activate
(venv) $ pip install Sphinx
(venv) $ pip install sphinxcontrib-youtube
The docs can then be built using the Makefile in $PGADMIN4_SRC, e.g.
(venv) $ make docs
The output can be found in $PGADMIN4_SRC/docs/en_US/_build/html/index.html
Building the Runtime
Change into the runtime directory, and run yarn install. This will install the dependencies required.
In order to use the runtime in a development environment, you'll need to copy dev_config.json.in file to dev_config.json, and edit the paths to the Python executable and pgAdmin.py file, otherwise the runtime will use the default paths it would expect to find in the standard package for your platform.
You can then execute the runtime by running something like:
yarn run start
Building packages
Most packages can be built using the Makefile in $PGADMIN4_SRC, provided all the setup and configuration above has been completed.
To build a source tarball:
(venv) $ make src
To build a PIP Wheel, activate either a Python 3 virtual environment, configured with all the required packages, and then run:
(venv) $ make pip
To build the macOS AppBundle, please see pkg/mac/README.
To build the Windows installer, please see pkg/win32/README.txt.
Create Database Migrations
In order to make changes to the SQLite DB, navigate to the 'web' directory:
(venv) $ cd $PGADMIN4_SRC/web
Create a migration file with the following command:
(venv) $ FLASK_APP=pgAdmin4.py flask db revision
This will create a file in: $PGADMIN4_SRC/web/migrations/versions/ . Add any changes to the 'upgrade' function. Increment the SCHEMA_VERSION in $PGADMIN4_SRC/web/pgadmin/model/init.py file.
There is no need to increment the SETTINGS_SCHEMA_VERSION.
Support
See https://www.pgadmin.org/support/ for support options.
Security Issues
If you would like to report a security issue with pgAdmin, please email security (at) pgadmin (dot) org.
Note that this address should only be used for reporting security issues that you believe you've found in the design or code of pgAdmin, pgAgent, and the pgAdmin website. It should not be used to ask security questions.
Project info
A GitHub project for pgAdmin 4 can be found at the address below:
https://github.com/pgadmin-org/pgadmin4
Please submit any changes as Pull Requests against the master branch of the pgadmin-org/pgadmin4 repository.
If you wish to discuss pgAdmin 4, or contribute to the project, please use the pgAdmin Hackers mailing list: