Following changes done for the framework:
- Framework for creating React based dynamic form view out of a pre-defined UI schema. Previously, it was based on Backform/Backbone.
- The new framework and components will use MaterialUI as the base. Previously, Bootstrap/Backform/jQuery components were used.
- The new code uses JSS instead of CSS since material UI and most modern React libraries also use JSS. In the future, this will allow us to change the theme in real-time without refresh.
- 90% code covered by 80-85 new jasmine test cases.
- Server group node UI Schema migration to new, with schema test cases.
- Server node UI Schema migration to new, with schema test cases.
- Database node UI Schema migration to new, with schema test cases.
- Few other UI changes.
Fixes#6130
1) Migrate from webpack 4 to webpack 5. This had a lot of breaking changes,
so updated multiple webpack plugins and changed the config accordingly.
2) Replaced iconfont-webpack-plugin with a more maintained webfonts-loader.
3) Replaced deprecated babel-eslint with @babel/eslint-parser.
4) Replaced optimize-css-assets-webpack-plugin with a more maintained css-minimizer-webpack-plugin.
5) Updated all other JS packages and made the required code changes.
Fixes#6207
1) After opening an existing project, the first table is already selected but the edit, clone, delete buttons are disabled.
2) ERD project title gets changed when 2 ERD projects are open & anyone of it edited.
3) Closing the ERD tab does not ask for a confirmation pop-up.
4) Shortcut for 'Show more/Fewer details' is missing.
5) Deleting the primary key does not delete associated links.
6) The long table & schema name are getting out of the box.
7) The long table name in the notes pop-up needs re-alignment.
8) The same table name present in ERD/canvas is allowed in Add Table dialogue. Added validation in the dialog.
9) Download image option is added, but it is not perfect yet. Image icons (table, schema, etc.) are not showing up.
10) Rename panel option should be disabled by default. It should be enabled for the tools which implement rename functionality.
11) The Toolbar is not visible in Safari for the ERD tool.
refs #1802
2) Added Dark(Beta) UI Theme option. Fixes#3741.
3) Fix an issue where a black arrow-kind image is displaying at the background of browser tree images. Fixes#4171
Changes include:
1) New theme option in preferences - Miscellaneous -> Themes. You can select the theme from the dropdown.
It also has a preview of the theme just below the dropdown. Note that, a page refresh is needed to apply changes.
On saving, a dialog appears to ask for refresh.
2) You can create your own theme and submit to hackers. README is updated to help you create a theme. Theme will be available only after the bundle.
3) Correction of SASS variables at few places and few other CSS corrections.
4) Added iconfont-webpack-plugin, which will convert all the SVG files(monochrome) used as icons for buttons to font icons.
This will allow us to change the color of the icon by using CSS color property.
5) All the .css files will bundle into a separate file now- pgadmin.style.css. This will help reduce the size of
theme CSS files as CSS in .css files will not change with the change of SASS variables.
Changes include:
1) Remove underscore-string and sprintf-js packages as we were using only %s. Instead, added a function to do the same. Also changed gettext to behave like sprintf directly.
2) backgrid.sizeable.columns was not used anywhere, removed. @babel/polyfill is deprecated, replaced it with core-js.
3) Moved few css to make sure they get minified and bundled.
4) Added Flask-Compress to send static files as compressed gzip. This will reduce network traffic and improve initial load time for pgAdmin.
5) Split few JS files to make code reusable.
6) Lazy load few modules like leaflet, wkx is required only if geometry viewer is opened. snapsvg loaded only when explain plan is executed. This will improve sqleditor initial opening time.
Reviewed By: Khushboo Vashi
Fixes#4701
Changed the SCSS/CSS for the below third party libraries to adopt the
new look 'n' feel:
- wcDocker
- Alertify dialogs, and notifications
- AciTree
- Bootstrap Navbar
- Bootstrap Tabs
- Bootstrap Drop-Down menu
- Backgrid
- Select2
Adopated the new the look 'n' feel for the dialogs, wizard, properties,
tab panels, tabs, fieldset, subnode control, spinner control, HTML
table, and other form controls.
- Font is changed to Roboto
- Using SCSS variables to define the look 'n' feel
- Designer background images for the Login, and Forget password pages in
'web' mode
- Improved the look 'n' feel for the key selection in the preferences
dialog
- Table classes consistency changes across the application
- File Open and Save dialog list view changes
Author(s): Aditya Toshniwal & Khushboo Vashi
Add package:
is-docker to select a specific setting when running the Chrome tests in Docker
Upgrade the version of:
- babel-loader
- extract-text-webpack-plugin
- jasmine-core
- jasmine-enzyme
- moment
Also, changed the 'linter' yarn-command to use this script.
This script will run the 'eslint' against all the static javascripts,
found under pgadmin and regression directories of source (excepts
'vendor', 'generated'). It also allows to run the 'eslint' against
specific javascript file[s].
In order to run eslint on all static javascript files, run the following command:
yarn run linter
node pga_eslint
In order to run eslint on specific files, run the following command:
yarn run linter --file <filename> [<filename>]
node pga_script --file <filename> [<filename>]
In order to provide eslint specific commands, run the following command:
yarn run linter [--file <filename> [<filename>]] --eslint-options
node pga_script [--file <filename> [<filename>]] --eslint-options
i.e.
yarn run linter --fix
yarn run linter --debug
node pga_eslint --fix --debug pgadmin/static/js/pgadmin.js
For some unknown reason, font-mfizz was showing the slonik icon in
italic. Even after upgrading it to the latest version of font-mfizz, the
problem was not resolved.
So - instead of using the vector font, using the PostgreSQL SVG logo as
the application icon, and documentation link on dashboard now.
This significantly speeds up loading of the application; in an average of 3 tests, v1.6
loaded in 11.5s in the runtime on a Mac, whilst the webpacked version of the code
loaded in 5.53s.
Khushboo Vashi
Aditya Toshniwal
Nikhil Mohite
Akshay Joshi
Aditya Toshniwal
Rahul Shirsat
Yogesh Mahajan
Murtuza Zabuawala
Pramod Ahire
Dave Page
Pradip Parkale
Nagesh Dhope
Ashesh Vashi
Atle Frenvik Sveen
Xuri Gong
Ashesh Vashi
Anthony Emengo
Joao Pedro De Almeida Pereira
Victoria Henry
Surinder Kumar
Teng Zhang
Sarah McAlear
Matthew Kleiman
George Gelashvili
Shruti B Iyer
Atira Odhner