Skip to content

Commit

Permalink
Significant changes to use ReactJS extensively.
Browse files Browse the repository at this point in the history
1. Replace the current layout library wcDocker with ReactJS based rc-dock. #6479
2. Have close buttons on individual panel tabs instead of common. #2821
3. Changes in the context menu on panel tabs - Add close, close all and close others menu items. #5394
4. Allow closing all the tabs, including SQL and Properties. #4733
5. Changes in docking behaviour of different tabs based on user requests and remove lock layout menu.
6. Fix an issue where the scroll position of panels was not remembered on Firefox. #2986
7. Reset layout now will not require page refresh and is done spontaneously.
8. Use the zustand store for storing preferences instead of plain JS objects. This will help reflecting preferences immediately.
9. The above fix incorrect format (no indent) of SQL stored functions/procedures. #6720
10. New version check is moved to an async request now instead of app start to improve startup performance.
11. Remove jQuery and Bootstrap completely.
12. Replace jasmine and karma test runner with jest. Migrate all the JS test cases to jest. This will save time in writing and debugging JS tests.
13. Other important code improvements and cleanup.
  • Loading branch information
adityatoshniwal authored Oct 23, 2023
1 parent 6d55564 commit 862f101
Show file tree
Hide file tree
Showing 373 changed files with 11,155 additions and 14,842 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/run-javascript-tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,4 @@ jobs:
- name: Run the tests
run: |
cd web
yarn run test:karma-once
yarn run test:js-once
3 changes: 2 additions & 1 deletion Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@ RUN export CPPFLAGS="-DPNG_ARM_NEON_OPT=0" && \
.[^.]* \
babel.cfg \
webpack.* \
karma.conf.js \
jest.config.js \
babel.* \
./pgadmin/static/js/generated/.cache

#########################################################################
Expand Down
6 changes: 3 additions & 3 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ linter:
cd web && yarn run linter

check: install-node bundle linter check-pep8
cd web && yarn run karma start --single-run && python regression/runtests.py
cd web && yarn run test:js-once && python regression/runtests.py

check-audit:
cd web && yarn run audit
Expand Down Expand Up @@ -77,10 +77,10 @@ check-feature: install-node bundle
cd web && python regression/runtests.py --pkg feature_tests

check-js: install-node linter
cd web && yarn run karma start --single-run
cd web && yarn run test:js-once

check-js-coverage:
cd web && yarn run test:karma-coverage
cd web && yarn run test:js-coverage

# Include all clean sub-targets in clean
clean: clean-appbundle clean-debian clean-dist clean-docs clean-node clean-pip clean-redhat clean-src
Expand Down
35 changes: 17 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
# pgAdmin 4
# pgAdmin 4

pgAdmin 4 is a rewrite of the popular pgAdmin3 management tool for the
PostgreSQL (http://www.postgresql.org) database.
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 in Python, using jQuery and Bootstrap
for the client side processing and UI. On the server side, Flask is being
utilised.
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/
Expand All @@ -22,7 +21,7 @@ which will execute the Python server and display the UI.

To build the runtime, the following packages must be installed:

* NodeJS 12+
* NodeJS 16+
* Yarn

Change into the runtime directory, and run *yarn install*. This will install the
Expand Down Expand Up @@ -59,41 +58,41 @@ simple - adapt as required for your distribution:
```bash
$ python3 -m venv venv
```

2. Now activate the virtual environment:

```bash
$ source venv/bin/activate
```

3. Some of the components used by pgAdmin require a very recent version of *pip*,
so update that to the latest:

```bash
$ pip install --upgrade pip
```

4. 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:

```bash
(venv) $ PATH=$PATH:/usr/local/pgsql/bin pip install -r $PGADMIN4_SRC/requirements.txt
```

If you are planning to run the regression tests, you also need to install
additional requirements from web/regression/requirements.txt:

```bash
(venv) $ pip install -r $PGADMIN4_SRC/web/regression/requirements.txt
```

5. 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:

```python
from config import *

Expand Down Expand Up @@ -126,7 +125,7 @@ simple - adapt as required for your distribution:
'pgadmin4-server.db'
)
```

This configuration allows easy switching between server and desktop modes
for testing.

Expand All @@ -137,13 +136,13 @@ simple - adapt as required for your distribution:
```bash
(venv) $ python3 $PGADMIN4_SRC/web/setup.py
```

or by starting pgAdmin 4:

```bash
(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.
Expand Down Expand Up @@ -228,7 +227,7 @@ To build a source tarball:
(venv) $ make src
```

To build a PIP Wheel, activate either a Python 3 virtual environment, configured
To build a PIP Wheel, activate either a Python 3 virtual environment, configured
with all the required packages, and then run:

```bash
Expand Down Expand Up @@ -266,7 +265,7 @@ See https://www.pgadmin.org/support/ for support options.

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.
Expand Down
2 changes: 1 addition & 1 deletion docs/en_US/code_overview.rst
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
**********************

The bulk of pgAdmin is a Python web application written using the Flask framework
on the backend, and HTML5 with CSS3, Bootstrap and jQuery on the front end. A
on the backend, and HTML5 with CSS3,ReactJS on the front end. A
desktop runtime is also included for users that prefer a desktop application to
a web application, which is written using NWjs (Node Webkit).

Expand Down
2 changes: 1 addition & 1 deletion docs/en_US/coding_standards.rst
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ All HTML must be HTML 5 compliant.
Javascript
**********

Client-side code is written in Javascript using jQuery and various plugins.
Client-side code is written in Javascript using ReactJS and various plugins.
Whilst much of the code is rendered from static files, there is also code that
is rendered from templates using Jinja2 (often to inject the users settings) or
constructed on the fly from module hooks.
Expand Down
3 changes: 0 additions & 3 deletions docs/en_US/menu_bar.rst
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,6 @@ Use the *File* menu to access the following options:
+-------------------------+---------------------------------------------------------------------------------------------------------+
| *Reset Layout* | If you have modified the workspace, click to restore the default layout. |
+-------------------------+---------------------------------------------------------------------------------------------------------+
| *Lock Layout* | Click to open a submenu to select the level for locking the UI layout |
| | This can also be changed from browser display :ref:`preferences <preferences>` |
+-------------------------+---------------------------------------------------------------------------------------------------------+
| *Runtime* | Click to open a submenu to Configure, View Log and Zoom settings. Only visible when pgAdmin4 runs in |
| | desktop mode. To know more about runtime menu :ref:`click here <desktop_deployment>` |
+-------------------------+---------------------------------------------------------------------------------------------------------+
Expand Down
13 changes: 0 additions & 13 deletions docs/en_US/preferences.rst
Original file line number Diff line number Diff line change
Expand Up @@ -46,19 +46,6 @@ Use the fields on the *Display* panel to specify general display preferences:
* When the *Hide shared servers?* switch is set to *True*, the client will hide
all the shared servers from the object explorer.

* Use the *Lock layout* field to lock the UI layout at different levels. This
can also be changed from File menu on the :ref:`menu bar <menu_bar>`

+---------------------+-------------------------------------------------------------------+
| Option | Action |
+=====================+===================================================================+
| *None* | No locking. Every panel is resizable and dockable. |
+---------------------+-------------------------------------------------------------------+
| *Prevent docking* | This will disable the docking/undocking of the panels |
+---------------------+-------------------------------------------------------------------+
| *Full* | This will disable resizing, docking/undocking of the panels |
+---------------------+-------------------------------------------------------------------+

* When the *Show empty object collections?* switch is turned off, then all object
collections which are empty will be hidden from browser tree.
* When the *Show system objects?* switch is set to *True*, the client will
Expand Down
3 changes: 2 additions & 1 deletion docs/en_US/theme/pgadmin4/static/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@

html{
background-color: #fff;

}

body {
font-weight: 400;
font-family: Roboto, Helvetica Neue, -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
-webkit-font-smoothing: antialiased;
background-color: #fff;
height: 100vh;
}

div.body {
Expand Down
2 changes: 1 addition & 1 deletion pkg/linux/build-functions.sh
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ _copy_code() {
cp "${SOURCEDIR}/pkg/linux/config_distro.py" "${SERVERROOT}/usr/${APP_NAME}/web/"
cd "${SERVERROOT}/usr/${APP_NAME}/web/" || exit
rm -f pgadmin4.db config_local.*
rm -rf karma.conf.js package.json node_modules/ regression/ tools/ pgadmin/static/js/generated/.cache
rm -rf jest.config.js babel.* package.json node_modules/ regression/ tools/ pgadmin/static/js/generated/.cache
find . -name "tests" -type d -print0 | xargs -0 rm -rf
find . -name "feature_tests" -type d -print0 | xargs -0 rm -rf
find . -name "__pycache__" -type d -print0 | xargs -0 rm -rf
Expand Down
2 changes: 1 addition & 1 deletion pkg/mac/build-functions.sh
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@ _complete_bundle() {
cp -r "${SOURCE_DIR}/web" "${BUNDLE_DIR}/Contents/Resources/"
cd "${BUNDLE_DIR}/Contents/Resources/web" || exit
rm -f pgadmin4.db config_local.*
rm -rf karma.conf.js package.json .yarn* yarn* .editorconfig .eslint* node_modules/ regression/ tools/ pgadmin/static/js/generated/.cache
rm -rf jest.config.js babel.* package.json .yarn* yarn* .editorconfig .eslint* node_modules/ regression/ tools/ pgadmin/static/js/generated/.cache
find . -name "tests" -type d -print0 | xargs -0 rm -rf
find . -name "feature_tests" -type d -print0 | xargs -0 rm -rf
find . -name "__pycache__" -type d -print0 | xargs -0 rm -rf
Expand Down
1 change: 0 additions & 1 deletion runtime/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ module.exports = {
'browser': true,
'es6': true,
'amd': true,
'jasmine': true,
},
'extends': [
'eslint:recommended',
Expand Down
14 changes: 12 additions & 2 deletions web/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ module.exports = {
'browser': true,
'es6': true,
'amd': true,
'jasmine': true,
},
'extends': [
'eslint:recommended',
Expand Down Expand Up @@ -41,10 +40,11 @@ module.exports = {
'plugins': [
'react',
'@babel',
'jest'
],
'overrides': [
{
'files': ['**/*.ts', '**/*.tsx'],
'files': ['**/*.{ts,tsx}'],
'plugins': [
'@typescript-eslint',
],
Expand All @@ -55,10 +55,20 @@ module.exports = {
'@typescript-eslint/no-this-alias': ['off'],
}
},
{
'files': ['**/*{spec,test}.{js,jsx}', './regression/javascript/**/*.{js}'],
'extends': ['eslint:recommended'],
'env': {
'jest': true
}
},
],
'globals': {
'_': true,
'module': true,
'__dirname': true,
'global': true,
'jest': true
},
'rules': {
'indent': [
Expand Down
4 changes: 4 additions & 0 deletions web/babel.config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"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"]
}
57 changes: 57 additions & 0 deletions web/jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
const webpackShimAlias = require('./webpack.shim').resolveAlias;

const webpackAliasToJestModules = ()=>{
const ret = {
'\\.svg': '<rootDir>/regression/javascript/__mocks__/svg.js'
};
Object.keys(webpackShimAlias).forEach((an)=>{
// eg - sources: ./pgadmin/static/js/ to '^sources/(.*)$': '<rootDir>/pgadmin/static/js/$1'
let ap = webpackShimAlias[an].replace(__dirname, '<rootDir>');
if(ap.endsWith('/')) {
ret[`^${an}/(.*)$`] = ap + '$1';
return;
}
ret[`^${an}$`] = ap;
});

// Overrides
ret['^translations$'] = '<rootDir>/regression/javascript/fake_translations';
ret['^pgadmin.browser.messages$'] = '<rootDir>/regression/javascript/fake_messages';
ret['^pgadmin.browser.endpoints$'] = '<rootDir>/regression/javascript/fake_endpoints';
ret['^pgadmin.browser.translations$'] = '<rootDir>/regression/javascript/fake_translations';
ret['^pgadmin.user_management.current_user$'] = '<rootDir>/regression/javascript/fake_current_user';
ret['^pgadmin.server.supported_servers$'] = '<rootDir>/regression/javascript/fake_supported_servers';

const sources = ret['^sources/(.*)$'];
delete ret['^sources/(.*)$'];

ret['^sources/pgadmin$'] = '<rootDir>/regression/javascript/fake_pgadmin';
ret['^sources/gettext$'] = '<rootDir>/regression/javascript/fake_gettext';
ret['^sources/(.*)$'] = sources;

// Only for tests
ret['^pgadmin.schema.dir/(.*)$'] = '<rootDir>/pgadmin/browser/server_groups/servers/databases/schemas/static/js/$1';
ret['^browser/(.*)$'] = '<rootDir>/pgadmin/browser/static/js/$1';

return ret;
};

module.exports = {
'roots': ['<rootDir>/pgadmin/', '<rootDir>/regression/javascript'],
'moduleFileExtensions': ['js', 'jsx', 'ts', 'tsx'],
'moduleNameMapper': webpackAliasToJestModules(),
'transform': {
'^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': 'babel-jest',
},
'setupFilesAfterEnv': [
'<rootDir>/regression/javascript/setup-jest.js',
],
'testMatch': [
'<rootDir>/regression/javascript/**/*{spec,test}.{js,jsx,ts,tsx}'
],
'testEnvironment': 'jsdom',
'transformIgnorePatterns': [
'[/\\\\]node_modules[/\\\\](?!react-dnd|dnd-core|@react-dnd).+\\.(js|jsx|mjs|cjs|ts|tsx)$',
'^.+\\.module\\.(css|sass|scss)$'
]
};
Loading

0 comments on commit 862f101

Please sign in to comment.