From 102e0a983956be57fdb63abb356b5b8fcb8b74ba Mon Sep 17 00:00:00 2001 From: Yogesh Mahajan Date: Tue, 9 Apr 2024 08:21:14 +0530 Subject: [PATCH] - Update MUI v4 to v5 - Remove the SCSS dependency completely and use MUI for theming. - Update - date-fns, @date-io, notistack. Remove - popper.js, sass-loader. - Cleanup webpack config. - Port PSQL tool to use MUI themes instead of SCSS theme. - Theme change will reflect realtime without refreshing pgAdmin. --- web/package.json | 31 +- web/pgadmin.themes.json | 7 - web/pgadmin/__init__.py | 3 - .../about/static/js/AboutComponent.jsx | 8 +- web/pgadmin/authenticate/mfa/tests/utils.py | 3 - web/pgadmin/browser/__init__.py | 6 +- .../servers/static/scss/_servers.scss | 12 - .../servers/templates/servers/password.html | 41 - .../templates/servers/tunnel_password.html | 62 -- web/pgadmin/browser/static/js/node.js | 2 +- web/pgadmin/browser/static/scss/_browser.scss | 65 -- web/pgadmin/browser/static/scss/_wizard.scss | 51 - .../browser/templates/browser/js/utils.js | 1 + web/pgadmin/dashboard/static/js/Dashboard.jsx | 17 +- web/pgadmin/dashboard/static/js/Graphs.jsx | 11 +- .../dashboard/static/js/Replication/index.jsx | 2 +- .../dashboard/static/js/SystemStats/CPU.jsx | 12 +- .../static/js/SystemStats/Memory.jsx | 12 +- .../static/js/SystemStats/Storage.jsx | 8 +- .../static/js/SystemStats/Summary.jsx | 14 +- .../dashboard/static/js/WelcomeDashboard.jsx | 94 +- .../static/js/components/ChartContainer.jsx | 3 +- .../static/js/components/RefreshButtons.jsx | 4 +- .../static/js/components/SectionContainer.jsx | 3 +- .../dashboard/static/scss/_dashboard.scss | 90 -- .../bgprocess/static/js/BgProcessNotify.jsx | 8 +- .../bgprocess/static/js/ProcessDetails.jsx | 9 +- .../misc/bgprocess/static/js/Processes.jsx | 12 +- .../misc/cloud/static/js/CloudWizard.jsx | 4 +- web/pgadmin/misc/cloud/static/js/aws.js | 2 +- web/pgadmin/misc/cloud/static/js/azure.js | 2 +- .../misc/cloud/static/js/cloud_components.jsx | 8 +- web/pgadmin/misc/cloud/static/js/google.js | 2 +- .../dependencies/static/js/Dependencies.jsx | 2 +- .../misc/dependents/static/js/Dependents.jsx | 2 +- .../static/js/components/FileManager.jsx | 27 +- .../static/js/components/GridView.jsx | 11 +- .../static/js/components/ListView.jsx | 10 +- .../static/js/components/Uploader.jsx | 5 +- .../properties/CollectionNodeProperties.jsx | 10 +- web/pgadmin/misc/properties/Properties.jsx | 3 +- web/pgadmin/misc/sql/static/js/SQL.jsx | 2 +- .../misc/statistics/static/js/Statistics.jsx | 2 +- web/pgadmin/misc/themes/__init__.py | 47 +- .../js/components/PreferencesComponent.jsx | 14 +- .../preferences/static/scss/_preferences.scss | 15 - web/pgadmin/static/css/style.css | 5 + .../resources/dark => img}/dark_preview.png | Bin .../high_contrast_preview.png | Bin .../resources => img}/standard_preview.png | Bin web/pgadmin/static/js/AppMenuBar.jsx | 7 +- .../js/Dialogs/ChangeOwnershipContent.jsx | 2 +- .../js/Dialogs/ChangePasswordContent.jsx | 2 +- .../static/js/Dialogs/ConfirmSaveContent.jsx | 8 +- .../js/Dialogs/ConnectServerContent.jsx | 6 +- .../js/Dialogs/MasterPasswordContent.jsx | 10 +- .../static/js/Dialogs/NamedRestoreContent.jsx | 6 +- .../static/js/Dialogs/RenameTabContent.jsx | 6 +- .../static/js/Dialogs/UrlDialogContent.jsx | 6 +- web/pgadmin/static/js/Explain/Analysis.jsx | 6 +- .../static/js/Explain/ExplainStatistics.jsx | 3 +- web/pgadmin/static/js/Explain/Graphical.jsx | 15 +- web/pgadmin/static/js/Explain/index.jsx | 4 +- web/pgadmin/static/js/PgTreeView/index.jsx | 11 +- web/pgadmin/static/js/QuickSearch/index.jsx | 12 +- .../static/js/SchemaView/DataGridView.jsx | 12 +- .../static/js/SchemaView/FieldSetView.jsx | 6 +- web/pgadmin/static/js/SchemaView/FormView.jsx | 7 +- web/pgadmin/static/js/SchemaView/index.jsx | 21 +- .../static/js/SecurityPages/BasePage.jsx | 5 +- .../static/js/SecurityPages/LoginPage.jsx | 2 +- .../js/SecurityPages/MfaRegisterPage.jsx | 4 +- web/pgadmin/static/js/Theme/dark.js | 19 +- web/pgadmin/static/js/Theme/high_contrast.js | 20 +- web/pgadmin/static/js/Theme/index.jsx | 918 ++++++++++------- .../js/Theme/overrides/codemirror.override.js | 4 +- .../js/Theme/overrides/jsoneditor.override.js | 442 ++++++++ .../overrides/pgadmin.classes.override.js | 20 + .../js/Theme/overrides/rcdock.override.js | 4 +- .../js/Theme/overrides/reactaspen.override.js | 230 +++++ web/pgadmin/static/js/Theme/standard.js | 22 +- web/pgadmin/static/js/components/Buttons.jsx | 30 +- .../static/js/components/CheckBoxTree.jsx | 12 +- .../js/components/EmptyPanelMessage.jsx | 6 +- .../static/js/components/ExternalIcon.jsx | 3 +- web/pgadmin/static/js/components/FieldSet.jsx | 2 +- .../static/js/components/FormComponents.jsx | 61 +- .../js/components/KeyboardShortcuts.jsx | 3 +- web/pgadmin/static/js/components/Loader.jsx | 3 +- web/pgadmin/static/js/components/Menu.jsx | 7 +- .../js/components/ObjectBreadcrumbs.jsx | 9 +- .../js/components/PgChart/StreamingChart.jsx | 2 +- .../static/js/components/PgReactDataGrid.jsx | 7 +- web/pgadmin/static/js/components/PgTable.jsx | 10 +- .../js/components/PgTree/scss/styles.scss | 284 ----- .../static/js/components/Privilege.jsx | 2 +- .../static/js/components/QueryThresholds.jsx | 3 +- .../ReactCodeMirror/components/Editor.jsx | 6 +- .../ReactCodeMirror/components/FindDialog.jsx | 13 +- .../ReactCodeMirror/components/GotoDialog.jsx | 5 +- .../js/components/ReactCodeMirror/index.jsx | 8 +- .../static/js/components/SelectRefresh.jsx | 4 +- .../static/js/components/SelectThemes.jsx | 3 +- .../static/js/components/ShortcutTitle.jsx | 2 +- web/pgadmin/static/js/components/TabPanel.jsx | 3 +- .../js/helpers/DataGridViewWithHeaderForm.jsx | 3 +- .../js/helpers/Layout/LayoutIframeTab.jsx | 2 +- .../static/js/helpers/Layout/index.jsx | 8 +- .../static/js/helpers/MainMoreToolbar.jsx | 4 +- .../static/js/helpers/ModalProvider.jsx | 7 +- web/pgadmin/static/js/helpers/Notifier.jsx | 10 +- .../js/helpers/ObjectExplorerToolbar.jsx | 6 +- .../static/js/helpers/wizard/Wizard.jsx | 16 +- .../static/scss/_jsoneditor.overrides.scss | 465 --------- web/pgadmin/static/scss/_pgadmin.style.scss | 967 ------------------ web/pgadmin/static/scss/pgadmin.scss | 23 - .../static/scss/resources/_default.style.scss | 163 --- .../scss/resources/_default.variables.scss | 376 ------- .../resources/_theme.variables.scss.sample | 71 -- .../scss/resources/dark/_theme.variables.scss | 147 --- .../high_contrast/_theme.variables.scss | 211 ---- .../scss/resources/pgadmin.resources.scss | 4 - web/pgadmin/templates/base.html | 20 +- .../components/DebuggerArgumentComponent.jsx | 11 +- .../js/components/DebuggerComponent.jsx | 2 +- .../static/js/components/DebuggerEditor.jsx | 4 +- .../static/js/components/DebuggerMessages.jsx | 2 +- .../js/components/LocalVariablesAndParams.jsx | 6 +- .../debugger/static/js/components/Results.jsx | 4 +- .../debugger/static/js/components/Stack.jsx | 8 +- .../debugger/static/js/components/ToolBar.jsx | 19 +- .../tools/debugger/static/scss/_debugger.scss | 22 - .../js/erd_tool/components/ConnectionBar.jsx | 3 +- .../static/js/erd_tool/components/ERDTool.jsx | 3 +- .../js/erd_tool/components/FloatingNote.jsx | 5 +- .../js/erd_tool/components/MainToolBar.jsx | 40 +- .../js/erd_tool/links/OneToManyLink.jsx | 2 +- .../static/js/erd_tool/nodes/TableNode.jsx | 10 +- .../grant_wizard/static/js/GrantWizard.jsx | 6 +- .../static/scss/_grant_wizard.scss | 130 --- .../static/js/ImportExportServers.jsx | 4 +- web/pgadmin/tools/psql/__init__.py | 25 +- .../tools/psql/static/js/PsqlModule.js | 202 ++++ .../static/js/components/PsqlComponent.jsx | 203 ++++ web/pgadmin/tools/psql/static/js/index.js | 15 +- .../tools/psql/static/js/psql_module.js | 342 ------- .../tools/psql/templates/editor_template.html | 34 - .../tools/psql/templates/psql/index.html | 56 + .../static/js/components/InputComponent.jsx | 4 +- .../js/components/ResultGridComponent.jsx | 10 +- .../static/js/components/Results.jsx | 8 +- .../components/SchemaDiffButtonComponent.jsx | 14 +- .../js/components/SchemaDiffCompare.jsx | 8 +- .../js/components/SchemaDiffComponent.jsx | 3 +- .../static/js/SearchObjects.jsx | 7 +- .../js/components/QueryToolComponent.jsx | 2 +- .../components/QueryToolDataGrid/Editors.jsx | 7 +- .../QueryToolDataGrid/Formatters.jsx | 2 +- .../js/components/QueryToolDataGrid/index.jsx | 9 +- .../components/dialogs/CloseRunningDialog.jsx | 6 +- .../dialogs/ConfirmPromotionContent.jsx | 7 +- .../dialogs/ConfirmTransactionContent.jsx | 4 +- .../js/components/dialogs/FilterDialog.jsx | 2 +- .../js/components/dialogs/MacrosDialog.jsx | 2 +- .../dialogs/NewConnectionDialog.jsx | 2 +- .../js/components/sections/ConnectionBar.jsx | 16 +- .../js/components/sections/GeometryViewer.jsx | 4 +- .../components/sections/GraphVisualiser.jsx | 14 +- .../js/components/sections/MainToolBar.jsx | 30 +- .../js/components/sections/Messages.jsx | 2 +- .../static/js/components/sections/Query.jsx | 34 +- .../js/components/sections/QueryHistory.jsx | 12 +- .../js/components/sections/ResultSet.jsx | 4 +- .../components/sections/ResultSetToolbar.jsx | 16 +- .../js/components/sections/StatusBar.jsx | 4 +- .../static/js/UserManagementDialog.jsx | 2 +- .../static/scss/_user_management.scss | 31 - .../feature_tests/keyboard_shortcut_test.py | 6 +- .../pg_datatype_validation_test.py | 7 +- .../pg_utilities_backup_restore_test.py | 6 +- .../test_copy_sql_to_query_tool.py | 6 +- .../xss_checks_roles_control_test.py | 4 +- web/regression/feature_utils/locators.py | 9 +- web/regression/feature_utils/pgadmin_page.py | 24 +- .../core.jsx => @mui/material.jsx} | 2 +- .../javascript/__mocks__/popper.js.js | 9 - .../javascript/components/Buttons.spec.js | 3 +- .../javascript/erd/onetomany_link_spec.js | 5 +- .../quick_search/quick_search_spec.js | 5 +- web/regression/javascript/setup-jest.js | 3 +- web/webpack.config.js | 356 ++----- web/webpack.shim.js | 13 - web/yarn.lock | 946 ++++++++++------- 193 files changed, 3110 insertions(+), 5313 deletions(-) delete mode 100644 web/pgadmin.themes.json delete mode 100644 web/pgadmin/browser/server_groups/servers/static/scss/_servers.scss delete mode 100644 web/pgadmin/browser/server_groups/servers/templates/servers/password.html delete mode 100644 web/pgadmin/browser/server_groups/servers/templates/servers/tunnel_password.html delete mode 100644 web/pgadmin/browser/static/scss/_browser.scss delete mode 100644 web/pgadmin/browser/static/scss/_wizard.scss delete mode 100644 web/pgadmin/dashboard/static/scss/_dashboard.scss delete mode 100644 web/pgadmin/preferences/static/scss/_preferences.scss rename web/pgadmin/static/{scss/resources/dark => img}/dark_preview.png (100%) rename web/pgadmin/static/{scss/resources/high_contrast => img}/high_contrast_preview.png (100%) rename web/pgadmin/static/{scss/resources => img}/standard_preview.png (100%) create mode 100644 web/pgadmin/static/js/Theme/overrides/jsoneditor.override.js create mode 100644 web/pgadmin/static/js/Theme/overrides/pgadmin.classes.override.js create mode 100644 web/pgadmin/static/js/Theme/overrides/reactaspen.override.js delete mode 100644 web/pgadmin/static/js/components/PgTree/scss/styles.scss delete mode 100644 web/pgadmin/static/scss/_jsoneditor.overrides.scss delete mode 100644 web/pgadmin/static/scss/_pgadmin.style.scss delete mode 100644 web/pgadmin/static/scss/pgadmin.scss delete mode 100644 web/pgadmin/static/scss/resources/_default.style.scss delete mode 100644 web/pgadmin/static/scss/resources/_default.variables.scss delete mode 100644 web/pgadmin/static/scss/resources/_theme.variables.scss.sample delete mode 100644 web/pgadmin/static/scss/resources/dark/_theme.variables.scss delete mode 100644 web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss delete mode 100644 web/pgadmin/static/scss/resources/pgadmin.resources.scss delete mode 100644 web/pgadmin/tools/debugger/static/scss/_debugger.scss delete mode 100644 web/pgadmin/tools/grant_wizard/static/scss/_grant_wizard.scss create mode 100644 web/pgadmin/tools/psql/static/js/PsqlModule.js create mode 100644 web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx delete mode 100644 web/pgadmin/tools/psql/static/js/psql_module.js delete mode 100644 web/pgadmin/tools/psql/templates/editor_template.html create mode 100644 web/pgadmin/tools/psql/templates/psql/index.html delete mode 100644 web/pgadmin/tools/user_management/static/scss/_user_management.scss rename web/regression/javascript/__mocks__/{@material-ui/core.jsx => @mui/material.jsx} (92%) delete mode 100644 web/regression/javascript/__mocks__/popper.js.js diff --git a/web/package.json b/web/package.json index acd3f4596..b33f84fd5 100644 --- a/web/package.json +++ b/web/package.json @@ -17,7 +17,7 @@ "@babel/preset-typescript": "^7.22.5", "@emotion/core": "^10.0.14", "@emotion/memoize": "^0.7.5", - "@emotion/react": "^11.1.5", + "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@emotion/utils": "^1.0.0", "@svgr/webpack": "^8.1.0", @@ -56,16 +56,13 @@ "process": "^0.11.10", "prop-types": "^15.7.2", "resize-observer-polyfill": "^1.5.1", - "sass": "^1.24.4", - "sass-loader": "^11.0.0", - "sass-resources-loader": "^2.2.1", "shim-loader": "^1.0.1", "style-loader": "^3.3.2", "stylis": "^4.0.7", "svgo": "^2.7.0", "svgo-loader": "^2.2.0", "terser-webpack-plugin": "^5.1.1", - "typescript": "^3.2.2", + "typescript": "^4.9.5", "url-loader": "^4.1.1", "webfonts-loader": "^8.0.1", "webpack": "^5.88.2", @@ -77,20 +74,21 @@ "@babel/plugin-proposal-class-properties": "^7.10.4", "@babel/preset-react": "^7.12.13", "@codemirror/lang-sql": "^6.6.3", - "@date-io/core": "^1.3.6", - "@date-io/date-fns": "1.x", + "@date-io/core": "^3.0.0", + "@date-io/date-fns": "3.x", "@emotion/sheet": "^1.0.1", "@fortawesome/fontawesome-free": "latest", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "^4.11.2", - "@material-ui/lab": "4.0.0-alpha.61", - "@material-ui/pickers": "3.3.10", + "@mui/icons-material": "^5.15.10", + "@mui/lab": "^5.0.0-alpha.165", + "@mui/material": "^5.15.10", + "@mui/styles": "^5.15.10", + "@mui/x-date-pickers": "^6.19.7", "@projectstorm/react-diagrams": "^6.6.1", "@simonwep/pickr": "^1.5.1", "@szhsin/react-menu": "^2.2.0", "@types/classnames": "^2.2.6", - "@types/react": "^16.7.18", - "@types/react-dom": "^17.0.11", + "@types/react": "^17.0.80", + "@types/react-dom": "^17.0.25", "ajv": "^8.8.2", "anti-trojan-source": "^1.4.0", "aspen-decorations": "^1.0.2", @@ -107,7 +105,7 @@ "convert-units": "^2.3.4", "cssnano": "^5.0.2", "dagre": "^0.8.4", - "date-fns": "^2.24.0", + "date-fns": "^3.6.0", "diff-arrays-of-objects": "^1.1.8", "hotkeys-js": "^3.13.3", "html-to-image": "^1.11.11", @@ -122,11 +120,10 @@ "moment": "^2.29.4", "moment-timezone": "^0.5.34", "notificar": "^1.0.1", - "notistack": "^1.0.10", + "notistack": "^2.0.8", "path-fx": "^2.0.0", "pathfinding": "^0.4.18", "paths-js": "^0.4.9", - "popper.js": "^1.16.1", "postcss": "^8.4.31", "raf": "^3.4.1", "rc-dock": "^3.2.9", @@ -172,7 +169,7 @@ "bundle:watch": "yarn run linter && yarn run webpacker:watch", "bundle:dev": "yarn run linter && yarn run webpacker", "bundle:analyze": "cross-env NODE_ENV=production ANALYZE=true yarn run bundle:dev", - "bundle": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=2048 yarn run bundle:dev", + "bundle": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=3072 yarn run bundle:dev", "test:js-once": "yarn run linter && yarn run jest --maxWorkers=50%", "test:js": "yarn run test:js-once --watch", "test:js-file": "yarn run test:js-once -t", diff --git a/web/pgadmin.themes.json b/web/pgadmin.themes.json deleted file mode 100644 index 5291ba004..000000000 --- a/web/pgadmin.themes.json +++ /dev/null @@ -1,7 +0,0 @@ - { - "dark": { - "disp_name": "dark_(Beta)", - "cssfile": "pgadmin.theme.dark", - "preview_img": "dark_preview.png" - } -} \ No newline at end of file diff --git a/web/pgadmin/__init__.py b/web/pgadmin/__init__.py index c20016bbc..9f49e8214 100644 --- a/web/pgadmin/__init__.py +++ b/web/pgadmin/__init__.py @@ -890,9 +890,6 @@ def create_app(app_name=None): from flask_compress import Compress Compress(app) - from pgadmin.misc.themes import themes - themes(app) - @app.context_processor def inject_blueprint(): """ diff --git a/web/pgadmin/about/static/js/AboutComponent.jsx b/web/pgadmin/about/static/js/AboutComponent.jsx index 4b6c2ca85..5a4aba8e0 100644 --- a/web/pgadmin/about/static/js/AboutComponent.jsx +++ b/web/pgadmin/about/static/js/AboutComponent.jsx @@ -10,9 +10,9 @@ import gettext from 'sources/gettext'; import url_for from 'sources/url_for'; import React, { useEffect, useState, useRef } from 'react'; -import { Box, Grid, InputLabel } from '@material-ui/core'; +import { Box, Grid, InputLabel } from '@mui/material'; import { DefaultButton } from '../../../static/js/components/Buttons'; -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@mui/styles'; import { InputText } from '../../../static/js/components/FormComponents'; import getApiInstance from '../../../static/js/api_instance'; import { copyToClipboard } from '../../../static/js/clipboard'; @@ -141,11 +141,11 @@ export default function AboutComponent() { }}>{copyText} - } ); -} \ No newline at end of file +} diff --git a/web/pgadmin/authenticate/mfa/tests/utils.py b/web/pgadmin/authenticate/mfa/tests/utils.py index 50fb766c4..5a9536db3 100644 --- a/web/pgadmin/authenticate/mfa/tests/utils.py +++ b/web/pgadmin/authenticate/mfa/tests/utils.py @@ -53,7 +53,6 @@ def init_dummy_auth_class(): def test_create_dummy_app(name=__name__): import os import pgadmin - from pgadmin.misc.themes import themes def index(): return Response("logged in") @@ -88,8 +87,6 @@ def test_create_dummy_app(name=__name__): app.register_logout_hook = types.MethodType(__dummy_logout_hook, app) - themes(app) - return app diff --git a/web/pgadmin/browser/__init__.py b/web/pgadmin/browser/__init__.py index c67b63173..78cfc88de 100644 --- a/web/pgadmin/browser/__init__.py +++ b/web/pgadmin/browser/__init__.py @@ -474,10 +474,13 @@ def utils(): snippets = [] prefs = Preferences.module('paths') - pg_help_path_pref = prefs.preference('pg_help_path') pg_help_path = pg_help_path_pref.get() + # Added to have theme value available at app start page loading + prefs = Preferences.module('misc') + theme = prefs.preference('theme').get() + # Get sqleditor options prefs = Preferences.module('sqleditor') @@ -539,6 +542,7 @@ def utils(): render_template( 'browser/js/utils.js', layout=layout, + theme=theme, jssnippets=snippets, pg_help_path=pg_help_path, editor_tab_size=editor_tab_size, diff --git a/web/pgadmin/browser/server_groups/servers/static/scss/_servers.scss b/web/pgadmin/browser/server_groups/servers/static/scss/_servers.scss deleted file mode 100644 index 6b83f891c..000000000 --- a/web/pgadmin/browser/server_groups/servers/static/scss/_servers.scss +++ /dev/null @@ -1,12 +0,0 @@ -.bg-model-duplicate { - @extend .bg-warning-light; -} - -.icon-server-connecting { - background-image: $loader-icon-small !important; - background-repeat: no-repeat; - background-size: 18px !important; - align-content: center; - vertical-align: middle; - height: 1.3em; -} diff --git a/web/pgadmin/browser/server_groups/servers/templates/servers/password.html b/web/pgadmin/browser/server_groups/servers/templates/servers/password.html deleted file mode 100644 index 5ed1fc4af..000000000 --- a/web/pgadmin/browser/server_groups/servers/templates/servers/password.html +++ /dev/null @@ -1,41 +0,0 @@ -
-
-
- {% if username %} - {{ _('Please enter the password for the user \'{0}\' to connect the server - "{1}"').format(username, - server_label) }} - {% else %} - {{ _('Please enter the password for the user to connect the server - "{0}"').format(server_label) }} - {% endif %} -
-
- -
- -
-
-
-   -
-
- - -
-
-
- {% if errmsg %} -
-
-
-
- -
- -
-
-
- {% endif %} -
-
diff --git a/web/pgadmin/browser/server_groups/servers/templates/servers/tunnel_password.html b/web/pgadmin/browser/server_groups/servers/templates/servers/tunnel_password.html deleted file mode 100644 index e34a257f2..000000000 --- a/web/pgadmin/browser/server_groups/servers/templates/servers/tunnel_password.html +++ /dev/null @@ -1,62 +0,0 @@ -
-
- {% if prompt_tunnel_password %} - {% if tunnel_identity_file %} -
- {% else %} -
- {% endif %} -
-
- -
-
-
-
-
- - -
-
-
- {% endif %} - {% if prompt_password %} -
-
-
- -
-
-
-
-
- - -
-
-
- {% endif %} - {% if errmsg %} -
-
-
-
- -
- -
-
-
- {% endif %} -
-
diff --git a/web/pgadmin/browser/static/js/node.js b/web/pgadmin/browser/static/js/node.js index cf2541f89..b4b9bda43 100644 --- a/web/pgadmin/browser/static/js/node.js +++ b/web/pgadmin/browser/static/js/node.js @@ -664,7 +664,7 @@ define('pgadmin.browser.node', [ t = pgBrowser.tree, i = input.item || t.selected(), d = i ? t.itemData(i) : undefined; - pgBrowser.psql.psql_tool(d, i, true); + pgAdmin.Tools.Psql.openPsqlTool(d, i); }, // Logic to change the server background colour diff --git a/web/pgadmin/browser/static/scss/_browser.scss b/web/pgadmin/browser/static/scss/_browser.scss deleted file mode 100644 index 91b48aecb..000000000 --- a/web/pgadmin/browser/static/scss/_browser.scss +++ /dev/null @@ -1,65 +0,0 @@ -.browser-tab-bar { - padding-left: 5px; - padding-top: 5px; - background-color: $color-gray-lighter; -} - -code, -kbd, -pre, -samp { - font-family: $font-family-editor !important; -} - -.sql-editor-grid-container { - font-family: $font-family-primary !important; -} - -.select2-btn-container { - padding: 3px 0px; - background-color: $color-primary; - margin-bottom: 3px; -} - -.pg-sp-container { - position: absolute; - min-width: 100%; - min-height: 100%; - background: $loading-bg; - z-index: 1056; - top: 0; - - .pg-sp-content { - position: absolute; - width: 100%; - top: 40%; - } -} -.pg-sp-icon { - background: $loader-icon center center no-repeat; - height: 75px; - width: 100%; - text-align: center; -} -.pg-sp-text { - font-size: 20px; - text-align: center; - color: $loading-fg; -} - -.pg-toolbar-btn { - margin-left: 0.25rem; - border-style: solid; - border-width: 1px; - font-size: 1.15em; - - color: $color-fg; - border-color: $border-color; - background-color: $color-secondary; -} - -.pg-toolbar-psql { - padding-top: 0em; - font-size: inherit; - align-items: center; -} diff --git a/web/pgadmin/browser/static/scss/_wizard.scss b/web/pgadmin/browser/static/scss/_wizard.scss deleted file mode 100644 index b8985fd73..000000000 --- a/web/pgadmin/browser/static/scss/_wizard.scss +++ /dev/null @@ -1,51 +0,0 @@ -.wizard-header { - padding: 6px!important; - min-height: $title-height; - max-height: $title-height; - background-color: $alert-header-bg; - font-size: $font-size-base; - font-weight: bold; - color: $alert-header-fg; - overflow: hidden; - white-space: nowrap; - border-radius: 0rem; - border-top-left-radius: $panel-border-radius; - border-top-right-radius: $panel-border-radius; - border-bottom: none; -} - -.wizard-content { - position: absolute; - overflow: auto; - top: $title-height; - bottom: $footer-height-calc; - left: 0; - right: 0; -} - -.pgadmin-wizard .wizard-buttons { - border-top: $panel-border; - padding: $footer-padding -} - -/* match the footer */ -.pgadmin-wizard .wizard-footer { - min-height: $footer-min-height; - border: none; - position: absolute; - left: 0; - right: 0; - bottom: 0; - margin: 0; -} - -/* Error message css */ -.pgadmin-wizard .error_msg_div { - background: $color-bg; - font-size: 13px; -} - -.pgadmin-wizard .error_msg_div p { - background: $color-bg; - color: $color-danger; -} diff --git a/web/pgadmin/browser/templates/browser/js/utils.js b/web/pgadmin/browser/templates/browser/js/utils.js index 35e41dfde..2d85a1d09 100644 --- a/web/pgadmin/browser/templates/browser/js/utils.js +++ b/web/pgadmin/browser/templates/browser/js/utils.js @@ -87,6 +87,7 @@ define('pgadmin.browser.utils', pgBrowser.utils = { layout: '{{ layout }}', + theme: '{{ theme }}', pg_help_path: '{{ pg_help_path }}', tabSize: '{{ editor_tab_size }}', wrapCode: '{{ editor_wrap_code }}' == 'True', diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx index a2f8604d0..f038151c0 100644 --- a/web/pgadmin/dashboard/static/js/Dashboard.jsx +++ b/web/pgadmin/dashboard/static/js/Dashboard.jsx @@ -12,13 +12,13 @@ import PropTypes from 'prop-types'; import getApiInstance from 'sources/api_instance'; import PgTable from 'sources/components/PgTable'; import { InputCheckbox } from '../../../static/js/components/FormComponents'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; import url_for from 'sources/url_for'; import Graphs from './Graphs'; -import { Box, Tab, Tabs } from '@material-ui/core'; +import { Box, Tab, Tabs } from '@mui/material'; import { PgIconButton } from '../../../static/js/components/Buttons'; -import CancelIcon from '@material-ui/icons/Cancel'; -import StopSharpIcon from '@material-ui/icons/StopSharp'; +import CancelIcon from '@mui/icons-material/Cancel'; +import StopSharpIcon from '@mui/icons-material/StopSharp'; import WelcomeDashboard from './WelcomeDashboard'; import ActiveQuery from './ActiveQuery.ui'; import _ from 'lodash'; @@ -62,7 +62,7 @@ const useStyles = makeStyles((theme) => ({ }, cardHeader: { padding: '0.25rem 0.5rem', - fontWeight: 'bold', + fontWeight: 'bold !important', backgroundColor: theme.otherVars.tableBg, borderBottom: '1px solid', borderBottomColor: theme.otherVars.borderColor, @@ -96,7 +96,7 @@ const useStyles = makeStyles((theme) => ({ height: '100%', width: '100%', minHeight: '400px', - padding: '8px' + padding: '4px' }, mainTabs: { ...theme.mixins.panelBorder.all, @@ -165,7 +165,8 @@ function Dashboard({ const prefStore = usePreferences(); const preferences = _.merge( usePreferences().getPreferencesForModule('dashboards'), - usePreferences().getPreferencesForModule('graphs') + usePreferences().getPreferencesForModule('graphs'), + usePreferences().getPreferencesForModule('misc') ); if (!did) { @@ -294,7 +295,6 @@ function Dashboard({ } ); }} - color="default" aria-label="Terminate Session?" title={gettext('Terminate Session?')} > @@ -363,7 +363,6 @@ function Dashboard({ } ); }} - color="default" aria-label="Cancel the query" title={gettext('Cancel the active query')} > diff --git a/web/pgadmin/dashboard/static/js/Graphs.jsx b/web/pgadmin/dashboard/static/js/Graphs.jsx index 17c6236c5..de85bfb4f 100644 --- a/web/pgadmin/dashboard/static/js/Graphs.jsx +++ b/web/pgadmin/dashboard/static/js/Graphs.jsx @@ -16,7 +16,7 @@ import {getGCD, getEpoch} from 'sources/utils'; import {useInterval, usePrevious} from 'sources/custom_hooks'; import PropTypes from 'prop-types'; import StreamingChart from '../../../static/js/components/PgChart/StreamingChart'; -import { Grid } from '@material-ui/core'; +import { Grid } from '@mui/material'; export const X_AXIS_LENGTH = 75; @@ -221,6 +221,7 @@ export default function Graphs({preferences, sid, did, pageVisible, enablePoll=t showTooltip={preferences['graph_mouse_track']} showDataPoints={preferences['graph_data_points']} lineBorderWidth={preferences['graph_line_border_width']} + theme={preferences['theme']} isDatabase={did > 0} isTest={isTest} /> @@ -249,11 +250,12 @@ export function GraphsWrapper(props) { showDataPoints: props.showDataPoints, showTooltip: props.showTooltip, lineBorderWidth: props.lineBorderWidth, - }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]); + theme: props.theme, + }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth, props.theme]); return ( <> - + @@ -266,7 +268,7 @@ export function GraphsWrapper(props) { - + @@ -301,6 +303,7 @@ GraphsWrapper.propTypes = { showTooltip: PropTypes.bool.isRequired, showDataPoints: PropTypes.bool.isRequired, lineBorderWidth: PropTypes.number.isRequired, + theme: PropTypes.string, isDatabase: PropTypes.bool.isRequired, isTest: PropTypes.bool, }; diff --git a/web/pgadmin/dashboard/static/js/Replication/index.jsx b/web/pgadmin/dashboard/static/js/Replication/index.jsx index 63459040d..abc772ac6 100644 --- a/web/pgadmin/dashboard/static/js/Replication/index.jsx +++ b/web/pgadmin/dashboard/static/js/Replication/index.jsx @@ -7,7 +7,7 @@ // ////////////////////////////////////////////////////////////// -import { Box } from '@material-ui/core'; +import { Box } from '@mui/material'; import React, { useEffect, useState } from 'react'; import gettext from 'sources/gettext'; diff --git a/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx b/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx index 40fc761a8..3c0a68285 100644 --- a/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx +++ b/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx @@ -11,10 +11,10 @@ import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react'; import PgTable from 'sources/components/PgTable'; import gettext from 'sources/gettext'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; import {getGCD, getEpoch} from 'sources/utils'; import ChartContainer from '../components/ChartContainer'; -import { Box, Grid } from '@material-ui/core'; +import { Box, Grid } from '@mui/material'; import { DATA_POINT_SIZE } from 'sources/chartjs'; import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart'; import {useInterval, usePrevious} from 'sources/custom_hooks'; @@ -263,19 +263,19 @@ export function CPUWrapper(props) { }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]); return ( <> - - + + - + - +
- - + + - + - +
- + {Object.keys(props.ioInfo).map((drive, index) => (
{gettext(drive)}
 - + {Object.keys(props.ioInfo[drive]).map((type, innerKeyIndex) => ( diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx index 874cd8d03..83ac9d489 100644 --- a/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx +++ b/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx @@ -9,12 +9,12 @@ import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react'; import gettext from 'sources/gettext'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; import url_for from 'sources/url_for'; import getApiInstance from 'sources/api_instance'; import {getGCD, getEpoch} from 'sources/utils'; import ChartContainer from '../components/ChartContainer'; -import { Grid } from '@material-ui/core'; +import { Grid } from '@mui/material'; import { DATA_POINT_SIZE } from 'sources/chartjs'; import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart'; import {useInterval, usePrevious} from 'sources/custom_hooks'; @@ -267,21 +267,21 @@ function SummaryWrapper(props) { }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]); return ( <> - - + +
{gettext('OS information')}
 - + - - + +
{gettext('CPU information')}
diff --git a/web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx b/web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx index 6c6bd9c4d..86fa1e516 100644 --- a/web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx +++ b/web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx @@ -11,10 +11,10 @@ import React from 'react'; import gettext from 'sources/gettext'; import _ from 'lodash'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; import pgAdmin from 'sources/pgadmin'; import PgAdminLogo from './PgAdminLogo'; -import { Link } from '@material-ui/core'; +import { Link } from '@mui/material'; const useStyles = makeStyles((theme) => ({ emptyPanel: { @@ -83,7 +83,22 @@ const useStyles = makeStyles((theme) => ({ flex: '1 1 auto', minHeight: '1px', padding: '0.5rem !important', - } + }, + welcomeLogo: { + width: '400px', + '& .app-name': { + fill: theme.otherVars.colorBrand + }, + '& .app-name-underline': { + stroke: theme.palette.text.primary + }, + '& .app-tagline': { + fill: theme.palette.text.primary + } + }, + dashboardIcon: { + color: theme.otherVars.colorBrand + }, })); @@ -126,7 +141,9 @@ export default function WelcomeDashboard({ pgBrowser }) {
{gettext('Welcome')}
- +
+ +

{gettext('Feature rich')} | {gettext('Maximises PostgreSQL')}{' '} | {gettext('Open Source')}{' '} @@ -148,22 +165,24 @@ export default function WelcomeDashboard({ pgBrowser }) {
{ AddNewServer(pgBrowser); }} className={classes.link}> - -
+
+ +
{gettext('Add New Server')}
pgAdmin.Preferences.show()} className={classes.link}> - -
+
+ +
{gettext('Configure pgAdmin')}
@@ -184,21 +203,23 @@ export default function WelcomeDashboard({ pgBrowser }) { target="postgres_help" className={classes.link} > - -
+
+ +
{gettext('PostgreSQL Documentation')}
@@ -208,11 +229,12 @@ export default function WelcomeDashboard({ pgBrowser }) { target="planet_website" className={classes.link} > - -
+
+ +
{gettext('Planet PostgreSQL')}

@@ -222,11 +244,12 @@ export default function WelcomeDashboard({ pgBrowser }) { target="postgres_website" className={classes.link} > - -
+
+ +
{gettext('Community Support')}
@@ -244,4 +267,3 @@ export default function WelcomeDashboard({ pgBrowser }) { WelcomeDashboard.propTypes = { pgBrowser: PropTypes.object.isRequired }; - diff --git a/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx b/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx index 587d545c1..dcbfc77d5 100644 --- a/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx +++ b/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx @@ -8,7 +8,8 @@ ////////////////////////////////////////////////////////////// import React from 'react'; import PropTypes from 'prop-types'; -import { Box, Card, CardContent, CardHeader, makeStyles } from '@material-ui/core'; +import { Box, Card, CardContent, CardHeader } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage'; diff --git a/web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx b/web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx index 4350d814b..781abae1f 100644 --- a/web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx +++ b/web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx @@ -9,9 +9,9 @@ import React from 'react'; import gettext from 'sources/gettext'; -import CachedOutlinedIcon from '@material-ui/icons/CachedOutlined'; +import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined'; import { PgIconButton } from '../../../../static/js/components/Buttons'; -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@mui/styles'; import PropTypes from 'prop-types'; const useStyles = makeStyles((theme) => ({ diff --git a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx index 5adf17851..6077b00b3 100644 --- a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx +++ b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx @@ -8,7 +8,8 @@ ////////////////////////////////////////////////////////////// import React from 'react'; import PropTypes from 'prop-types'; -import { Box, makeStyles } from '@material-ui/core'; +import { Box } from '@mui/material'; +import { makeStyles } from '@mui/styles'; const useStyles = makeStyles((theme) => ({ diff --git a/web/pgadmin/dashboard/static/scss/_dashboard.scss b/web/pgadmin/dashboard/static/scss/_dashboard.scss deleted file mode 100644 index f28d5cdfc..000000000 --- a/web/pgadmin/dashboard/static/scss/_dashboard.scss +++ /dev/null @@ -1,90 +0,0 @@ -.dashboard-icon { - color: $color-brand; -} - -.dashboard-container { - padding-top: math.div($grid-gutter-width, 2); - padding-bottom: math.div($grid-gutter-width, 2); - min-height: 100%; -} - -.dashboard-row { - margin-bottom: math.div($grid-gutter-width, 2); -} - -.graph-error { - background-color: inherit; - padding-top: 20px -} - -.grid-error { - background-color: $color-gray-lighter; - padding-top: 20px; - padding-bottom: 40px; -} - -.grid-container { - width: 100%; - overflow: auto; - border-radius: $card-border-radius; - border: $panel-border; -} - -.dashboard-link a { - cursor: pointer; - color: $color-fg; -} - -.dashboard-graph { - & .legend { - font-size: $tree-font-size; - & .legend-value { - font-weight: normal; - margin-left: 0.25rem; - & .legend-label { - margin-left: 0.25rem; - } - } - } - - & .dashboard-graph-body { - padding: 0.25rem 0.5rem; - height: 165px; - - & .flotr-labels { - color: $color-fg !important; - } - & .flotr-legend { - border: none !important; - padding: 0.25rem 0.5rem; - & .flotr-legend-label { - color: $color-fg !important; - padding-left: 0.25rem; - } - - & .flotr-legend-color-box>div { - border: none !important; - &>div { - border: none !important; - } - } - - & .flotr-legend-bg { - border-radius: $border-radius; - } - } - } -} - -.welcome-logo { - width: 400px; - & .app-name { - fill: $color-brand; - } - & .app-name-underline { - stroke: $color-fg; - } - & .app-tagline { - fill: $color-fg; - } -} diff --git a/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx b/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx index 26a99245f..4671f55c6 100644 --- a/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx +++ b/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx @@ -1,9 +1,10 @@ -import { Box, makeStyles } from '@material-ui/core'; +import { Box } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import React from 'react'; -import CloseIcon from '@material-ui/icons/CloseRounded'; +import CloseIcon from '@mui/icons-material/CloseRounded'; import { DefaultButton, PgIconButton } from '../../../../static/js/components/Buttons'; import clsx from 'clsx'; -import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined'; +import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'; import { BgProcessManagerProcessState } from './BgProcessConstants'; import PropTypes from 'prop-types'; import gettext from 'sources/gettext'; @@ -99,4 +100,3 @@ export function processCompleted(desc, process_state, onViewProcess) { null ); } - diff --git a/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx b/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx index d7bc90210..a18b0da9e 100644 --- a/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx +++ b/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx @@ -10,17 +10,18 @@ import React, { useState, useMemo } from 'react'; import gettext from 'sources/gettext'; import url_for from 'sources/url_for'; -import { Box, makeStyles } from '@material-ui/core'; +import { Box } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import PropTypes from 'prop-types'; import { MESSAGE_TYPE, NotifierMessage } from '../../../../static/js/components/FormComponents'; import { BgProcessManagerProcessState } from './BgProcessConstants'; import { DefaultButton, PgIconButton } from '../../../../static/js/components/Buttons'; -import HighlightOffRoundedIcon from '@material-ui/icons/HighlightOffRounded'; -import AccessTimeRoundedIcon from '@material-ui/icons/AccessTimeRounded'; +import HighlightOffRoundedIcon from '@mui/icons-material/HighlightOffRounded'; +import AccessTimeRoundedIcon from '@mui/icons-material/AccessTimeRounded'; import { useInterval } from '../../../../static/js/custom_hooks'; import getApiInstance from '../../../../static/js/api_instance'; import pgAdmin from 'sources/pgadmin'; -import FolderSharedRoundedIcon from '@material-ui/icons/FolderSharedRounded'; +import FolderSharedRoundedIcon from '@mui/icons-material/FolderSharedRounded'; const useStyles = makeStyles((theme)=>({ diff --git a/web/pgadmin/misc/bgprocess/static/js/Processes.jsx b/web/pgadmin/misc/bgprocess/static/js/Processes.jsx index cddf730cc..1d093c3f8 100644 --- a/web/pgadmin/misc/bgprocess/static/js/Processes.jsx +++ b/web/pgadmin/misc/bgprocess/static/js/Processes.jsx @@ -11,15 +11,15 @@ import React, { useCallback, useEffect, useMemo } from 'react'; import PgTable from 'sources/components/PgTable'; import gettext from 'sources/gettext'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; import { BgProcessManagerEvents, BgProcessManagerProcessState } from './BgProcessConstants'; import { PgButtonGroup, PgIconButton } from '../../../../static/js/components/Buttons'; -import CancelIcon from '@material-ui/icons/Cancel'; -import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined'; -import DeleteIcon from '@material-ui/icons/Delete'; -import HelpIcon from '@material-ui/icons/HelpRounded'; +import CancelIcon from '@mui/icons-material/Cancel'; +import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'; +import DeleteIcon from '@mui/icons-material/Delete'; +import HelpIcon from '@mui/icons-material/HelpRounded'; import url_for from 'sources/url_for'; -import { Box } from '@material-ui/core'; +import { Box } from '@mui/material'; import { usePgAdmin } from '../../../../static/js/BrowserComponent'; import { BROWSER_PANELS } from '../../../../browser/static/js/constants'; import ErrorBoundary from '../../../../static/js/helpers/ErrorBoundary'; diff --git a/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx b/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx index 99a872ea1..cc98cb024 100644 --- a/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx +++ b/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx @@ -10,8 +10,8 @@ import gettext from 'sources/gettext'; import url_for from 'sources/url_for'; import React from 'react'; -import { Box, Paper } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; +import { Box, Paper } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import Wizard from '../../../../static/js/helpers/wizard/Wizard'; import WizardStep from '../../../../static/js/helpers/wizard/WizardStep'; import {FormFooterMessage, MESSAGE_TYPE } from '../../../../static/js/components/FormComponents'; diff --git a/web/pgadmin/misc/cloud/static/js/aws.js b/web/pgadmin/misc/cloud/static/js/aws.js index e5b7bc151..40fa6a353 100644 --- a/web/pgadmin/misc/cloud/static/js/aws.js +++ b/web/pgadmin/misc/cloud/static/js/aws.js @@ -16,7 +16,7 @@ import url_for from 'sources/url_for'; import getApiInstance from '../../../../static/js/api_instance'; import { isEmptyString } from 'sources/validators'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; import gettext from 'sources/gettext'; const useStyles = makeStyles(() => diff --git a/web/pgadmin/misc/cloud/static/js/azure.js b/web/pgadmin/misc/cloud/static/js/azure.js index 16f0a741b..0e87bce10 100644 --- a/web/pgadmin/misc/cloud/static/js/azure.js +++ b/web/pgadmin/misc/cloud/static/js/azure.js @@ -18,7 +18,7 @@ import getApiInstance from '../../../../static/js/api_instance'; import { CloudWizardEventsContext } from './CloudWizard'; import {MESSAGE_TYPE } from '../../../../static/js/components/FormComponents'; import gettext from 'sources/gettext'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; const useStyles = makeStyles(() => ({ diff --git a/web/pgadmin/misc/cloud/static/js/cloud_components.jsx b/web/pgadmin/misc/cloud/static/js/cloud_components.jsx index 3d601a8a5..95e2e7d6f 100644 --- a/web/pgadmin/misc/cloud/static/js/cloud_components.jsx +++ b/web/pgadmin/misc/cloud/static/js/cloud_components.jsx @@ -8,16 +8,16 @@ ////////////////////////////////////////////////////////////// import React from 'react'; -import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab'; -import CheckRoundedIcon from '@material-ui/icons/CheckRounded'; +import { ToggleButton, ToggleButtonGroup } from '@mui/material'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; import { DefaultButton, PrimaryButton } from '../../../../static/js/components/Buttons'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; import PropTypes from 'prop-types'; import { getAWSSummary } from './aws'; import {getAzureSummary} from './azure'; import { getBigAnimalSummary } from './biganimal'; import { commonTableStyles } from '../../../../static/js/Theme'; -import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core'; +import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'; import clsx from 'clsx'; import gettext from 'sources/gettext'; import { getGoogleSummary } from './google'; diff --git a/web/pgadmin/misc/cloud/static/js/google.js b/web/pgadmin/misc/cloud/static/js/google.js index c090cb297..f7425333f 100644 --- a/web/pgadmin/misc/cloud/static/js/google.js +++ b/web/pgadmin/misc/cloud/static/js/google.js @@ -18,7 +18,7 @@ import getApiInstance from '../../../../static/js/api_instance'; import { CloudWizardEventsContext } from './CloudWizard'; import {MESSAGE_TYPE } from '../../../../static/js/components/FormComponents'; import gettext from 'sources/gettext'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; const useStyles = makeStyles(() => ({ diff --git a/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx b/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx index 00e1eb52d..971b4b685 100644 --- a/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx +++ b/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx @@ -13,7 +13,7 @@ import PgTable from 'sources/components/PgTable'; import gettext from 'sources/gettext'; import PropTypes from 'prop-types'; import getApiInstance from 'sources/api_instance'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; import { getURL } from '../../../static/utils/utils'; import Loader from 'sources/components/Loader'; import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage'; diff --git a/web/pgadmin/misc/dependents/static/js/Dependents.jsx b/web/pgadmin/misc/dependents/static/js/Dependents.jsx index d59f1df1c..3afa2ef92 100644 --- a/web/pgadmin/misc/dependents/static/js/Dependents.jsx +++ b/web/pgadmin/misc/dependents/static/js/Dependents.jsx @@ -13,7 +13,7 @@ import PgTable from 'sources/components/PgTable'; import gettext from 'sources/gettext'; import PropTypes from 'prop-types'; import getApiInstance from 'sources/api_instance'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; import { getURL } from '../../../static/utils/utils'; import Loader from 'sources/components/Loader'; import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage'; diff --git a/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx b/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx index 64c60c0f1..dbffcb0db 100644 --- a/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx +++ b/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx @@ -6,21 +6,22 @@ // This software is released under the PostgreSQL Licence // ////////////////////////////////////////////////////////////// -import { Box, makeStyles } from '@material-ui/core'; +import { Box } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { DefaultButton, PgButtonGroup, PgIconButton, PrimaryButton } from '../../../../../static/js/components/Buttons'; import { useModalStyles } from '../../../../../static/js/helpers/ModalProvider'; -import CloseIcon from '@material-ui/icons/CloseRounded'; -import FolderSharedIcon from '@material-ui/icons/FolderShared'; -import FolderIcon from '@material-ui/icons/Folder'; -import CheckRoundedIcon from '@material-ui/icons/CheckRounded'; -import HomeRoundedIcon from '@material-ui/icons/HomeRounded'; -import ArrowUpwardRoundedIcon from '@material-ui/icons/ArrowUpwardRounded'; -import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'; -import MoreHorizRoundedIcon from '@material-ui/icons/MoreHorizRounded'; -import SyncRoundedIcon from '@material-ui/icons/SyncRounded'; -import CreateNewFolderRoundedIcon from '@material-ui/icons/CreateNewFolderRounded'; -import GetAppRoundedIcon from '@material-ui/icons/GetAppRounded'; +import CloseIcon from '@mui/icons-material/CloseRounded'; +import FolderSharedIcon from '@mui/icons-material/FolderShared'; +import FolderIcon from '@mui/icons-material/Folder'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import HomeRoundedIcon from '@mui/icons-material/HomeRounded'; +import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded'; +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; +import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded'; +import SyncRoundedIcon from '@mui/icons-material/SyncRounded'; +import CreateNewFolderRoundedIcon from '@mui/icons-material/CreateNewFolderRounded'; +import GetAppRoundedIcon from '@mui/icons-material/GetAppRounded'; import gettext from 'sources/gettext'; import clsx from 'clsx'; import { FormFooterMessage, InputSelectNonSearch, InputText, MESSAGE_TYPE } from '../../../../../static/js/components/FormComponents'; @@ -709,7 +710,7 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS { await openDir(fmUtilsObj.dirname(fmUtilsObj.currPath), selectedSS); }} icon={} disabled={!fmUtilsObj.dirname(fmUtilsObj.currPath) || showUploader} /> - { diff --git a/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx b/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx index 73d91615c..acef14e79 100644 --- a/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx +++ b/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx @@ -6,12 +6,13 @@ // This software is released under the PostgreSQL Licence // ////////////////////////////////////////////////////////////// -import { Box, makeStyles } from '@material-ui/core'; +import { Box } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import React, {useState, useEffect, useRef, useLayoutEffect} from 'react'; -import FolderIcon from '@material-ui/icons/Folder'; -import DescriptionIcon from '@material-ui/icons/Description'; -import LockRoundedIcon from '@material-ui/icons/LockRounded'; -import StorageRoundedIcon from '@material-ui/icons/StorageRounded'; +import FolderIcon from '@mui/icons-material/Folder'; +import DescriptionIcon from '@mui/icons-material/Description'; +import LockRoundedIcon from '@mui/icons-material/LockRounded'; +import StorageRoundedIcon from '@mui/icons-material/StorageRounded'; import PropTypes from 'prop-types'; import gettext from 'sources/gettext'; diff --git a/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx b/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx index 15854f35c..998c56a6c 100644 --- a/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx +++ b/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx @@ -6,13 +6,13 @@ // This software is released under the PostgreSQL Licence // ////////////////////////////////////////////////////////////// -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@mui/styles'; import React, { useRef, useEffect } from 'react'; import PgReactDataGrid from '../../../../../static/js/components/PgReactDataGrid'; -import FolderIcon from '@material-ui/icons/Folder'; -import StorageRoundedIcon from '@material-ui/icons/StorageRounded'; -import DescriptionIcon from '@material-ui/icons/Description'; -import LockRoundedIcon from '@material-ui/icons/LockRounded'; +import FolderIcon from '@mui/icons-material/Folder'; +import StorageRoundedIcon from '@mui/icons-material/StorageRounded'; +import DescriptionIcon from '@mui/icons-material/Description'; +import LockRoundedIcon from '@mui/icons-material/LockRounded'; import PropTypes from 'prop-types'; import gettext from 'sources/gettext'; diff --git a/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx b/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx index 6fec92d2a..d66957203 100644 --- a/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx +++ b/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx @@ -7,8 +7,9 @@ // ////////////////////////////////////////////////////////////// import React, { useCallback, useReducer, useEffect, useMemo } from 'react'; -import { Box, List, ListItem, makeStyles } from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/CloseRounded'; +import { Box, List, ListItem } from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import CloseIcon from '@mui/icons-material/CloseRounded'; import { PgIconButton } from '../../../../../static/js/components/Buttons'; import gettext from 'sources/gettext'; import {useDropzone} from 'react-dropzone'; diff --git a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx index 71636732b..7cda4911d 100644 --- a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx +++ b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx @@ -8,17 +8,17 @@ ////////////////////////////////////////////////////////////// import React from 'react'; import getApiInstance from 'sources/api_instance'; -import { makeStyles } from '@material-ui/core/styles'; -import { Box } from '@material-ui/core'; +import { makeStyles } from '@mui/styles'; +import { Box } from '@mui/material'; import { generateCollectionURL } from '../../browser/static/js/node_ajax'; import gettext from 'sources/gettext'; import PgTable from 'sources/components/PgTable'; import Theme from 'sources/Theme'; import PropTypes from 'prop-types'; import { PgButtonGroup, PgIconButton } from '../../static/js/components/Buttons'; -import DeleteIcon from '@material-ui/icons/Delete'; -import DeleteSweepIcon from '@material-ui/icons/DeleteSweep'; -import DeleteForeverIcon from '@material-ui/icons/DeleteForever'; +import DeleteIcon from '@mui/icons-material/Delete'; +import DeleteSweepIcon from '@mui/icons-material/DeleteSweep'; +import DeleteForeverIcon from '@mui/icons-material/DeleteForever'; import EmptyPanelMessage from '../../static/js/components/EmptyPanelMessage'; import Loader from 'sources/components/Loader'; import { evalFunc } from '../../static/js/utils'; diff --git a/web/pgadmin/misc/properties/Properties.jsx b/web/pgadmin/misc/properties/Properties.jsx index 146761be6..aa8fdc53c 100644 --- a/web/pgadmin/misc/properties/Properties.jsx +++ b/web/pgadmin/misc/properties/Properties.jsx @@ -15,7 +15,8 @@ import { BROWSER_PANELS } from '../../browser/static/js/constants'; import ObjectNodeProperties from './ObjectNodeProperties'; import EmptyPanelMessage from '../../static/js/components/EmptyPanelMessage'; import gettext from 'sources/gettext'; -import { Box, makeStyles } from '@material-ui/core'; +import { Box } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import { usePgAdmin } from '../../static/js/BrowserComponent'; import PropTypes from 'prop-types'; import _ from 'lodash'; diff --git a/web/pgadmin/misc/sql/static/js/SQL.jsx b/web/pgadmin/misc/sql/static/js/SQL.jsx index 0303001ff..e04bd5061 100644 --- a/web/pgadmin/misc/sql/static/js/SQL.jsx +++ b/web/pgadmin/misc/sql/static/js/SQL.jsx @@ -12,7 +12,7 @@ import { generateNodeUrl } from '../../../../browser/static/js/node_ajax'; import gettext from 'sources/gettext'; import PropTypes from 'prop-types'; import getApiInstance from 'sources/api_instance'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; import CodeMirror from '../../../../static/js/components/ReactCodeMirror'; import Loader from 'sources/components/Loader'; import withStandardTabInfo from '../../../../static/js/helpers/withStandardTabInfo'; diff --git a/web/pgadmin/misc/statistics/static/js/Statistics.jsx b/web/pgadmin/misc/statistics/static/js/Statistics.jsx index 4758ca503..e50e056a3 100644 --- a/web/pgadmin/misc/statistics/static/js/Statistics.jsx +++ b/web/pgadmin/misc/statistics/static/js/Statistics.jsx @@ -13,7 +13,7 @@ import PgTable from 'sources/components/PgTable'; import gettext from 'sources/gettext'; import PropTypes from 'prop-types'; import getApiInstance from 'sources/api_instance'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; import { getURL } from '../../../static/utils/utils'; import Loader from 'sources/components/Loader'; import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage'; diff --git a/web/pgadmin/misc/themes/__init__.py b/web/pgadmin/misc/themes/__init__.py index c54762e7b..8602c1fff 100644 --- a/web/pgadmin/misc/themes/__init__.py +++ b/web/pgadmin/misc/themes/__init__.py @@ -4,47 +4,18 @@ from pgadmin.utils.preferences import Preferences def get_all_themes(): - # Themes file is copied in generated directory - theme_file_path = os.path.join( - os.path.dirname(os.path.realpath(__file__)), - '../../static/js/generated', - 'pgadmin.themes.json' - ) - all_themes = { "standard": { "disp_name": "Standard", - "cssfile": "pgadmin", "preview_img": "standard_preview.png" - } + }, + "dark": { + "disp_name": "dark", + "preview_img": "dark_preview.png" + }, + "high_contrast": { + "disp_name": "high_contrast", + "preview_img": "high_contrast_preview.png" + }, } - - try: - all_themes.update(json.load(open(theme_file_path))) - except Exception: - pass - return all_themes - - -def themes(app): - @app.context_processor - def inject_theme_func(): - def get_theme_css(): - all_themes = get_all_themes() - theme_css = all_themes['standard']['cssfile'] + '.css' - theme = 'standard' - try: - misc_preference = Preferences.module('misc') - theme = misc_preference.preference('theme').get() - if theme in all_themes: - theme_css = all_themes[theme]['cssfile'] + '.css' - except Exception: - # Let the default theme go if exception occurs - pass - - return theme_css, theme - - return { - 'get_theme_css': get_theme_css, - } diff --git a/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx b/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx index b60a47441..7c9e280fa 100644 --- a/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx +++ b/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx @@ -12,14 +12,14 @@ import _ from 'lodash'; import url_for from 'sources/url_for'; import React, { useEffect, useMemo } from 'react'; import { FileType } from 'react-aspen'; -import { Box } from '@material-ui/core'; +import { Box } from '@mui/material'; import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@mui/styles'; import SchemaView from '../../../../static/js/SchemaView'; import getApiInstance from '../../../../static/js/api_instance'; -import CloseSharpIcon from '@material-ui/icons/CloseSharp'; -import HelpIcon from '@material-ui/icons/HelpRounded'; -import SaveSharpIcon from '@material-ui/icons/SaveSharp'; +import CloseSharpIcon from '@mui/icons-material/CloseSharp'; +import HelpIcon from '@mui/icons-material/HelpRounded'; +import SaveSharpIcon from '@mui/icons-material/SaveSharp'; import clsx from 'clsx'; import pgAdmin from 'sources/pgadmin'; import { DefaultButton, PgIconButton, PrimaryButton } from '../../../../static/js/components/Buttons'; @@ -528,10 +528,6 @@ export default function PreferencesComponent({ ...props }) { } function checkRefreshRequired(pref, requires_refresh) { - if (pref.name == 'theme') { - requires_refresh = true; - } - if (pref.name == 'user_language') { requires_refresh = true; } diff --git a/web/pgadmin/preferences/static/scss/_preferences.scss b/web/pgadmin/preferences/static/scss/_preferences.scss deleted file mode 100644 index 14b52d32f..000000000 --- a/web/pgadmin/preferences/static/scss/_preferences.scss +++ /dev/null @@ -1,15 +0,0 @@ -.preferences_tree{ - padding: 0px; - padding-top: 2px; - height: 100%; - overflow: auto; - border-right: $panel-border; -} - -.btn-checkbox { - padding: $btn-checkbox-padding; - - & input[type="checkbox"]{ - margin-top: 0px !important; - } -} diff --git a/web/pgadmin/static/css/style.css b/web/pgadmin/static/css/style.css index c190c1740..a4d049145 100644 --- a/web/pgadmin/static/css/style.css +++ b/web/pgadmin/static/css/style.css @@ -9,3 +9,8 @@ @import 'node_modules/@simonwep/pickr/dist/themes/monolith.min.css'; @import 'node_modules/uplot/dist/uPlot.min.css'; + +@import 'node_modules/rc-dock/dist/rc-dock.css'; +@import 'node_modules/@szhsin/react-menu/dist/index.css'; + +@import './pgadmin.css'; diff --git a/web/pgadmin/static/scss/resources/dark/dark_preview.png b/web/pgadmin/static/img/dark_preview.png similarity index 100% rename from web/pgadmin/static/scss/resources/dark/dark_preview.png rename to web/pgadmin/static/img/dark_preview.png diff --git a/web/pgadmin/static/scss/resources/high_contrast/high_contrast_preview.png b/web/pgadmin/static/img/high_contrast_preview.png similarity index 100% rename from web/pgadmin/static/scss/resources/high_contrast/high_contrast_preview.png rename to web/pgadmin/static/img/high_contrast_preview.png diff --git a/web/pgadmin/static/scss/resources/standard_preview.png b/web/pgadmin/static/img/standard_preview.png similarity index 100% rename from web/pgadmin/static/scss/resources/standard_preview.png rename to web/pgadmin/static/img/standard_preview.png diff --git a/web/pgadmin/static/js/AppMenuBar.jsx b/web/pgadmin/static/js/AppMenuBar.jsx index ca5ccbba1..286dd8a7c 100644 --- a/web/pgadmin/static/js/AppMenuBar.jsx +++ b/web/pgadmin/static/js/AppMenuBar.jsx @@ -1,9 +1,10 @@ -import { Box, makeStyles } from '@material-ui/core'; +import { Box } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import React, { useState, useEffect } from 'react'; import { PrimaryButton } from './components/Buttons'; import { PgMenu, PgMenuDivider, PgMenuItem, PgSubMenu } from './components/Menu'; -import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'; -import AccountCircleRoundedIcon from '@material-ui/icons/AccountCircleRounded'; +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; +import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded'; import { usePgAdmin } from '../../static/js/BrowserComponent'; const useStyles = makeStyles((theme)=>({ diff --git a/web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx b/web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx index 14930decd..889a2b578 100644 --- a/web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx +++ b/web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx @@ -7,7 +7,7 @@ // ////////////////////////////////////////////////////////////// -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@mui/styles'; import React from 'react'; import PropTypes from 'prop-types'; import gettext from 'sources/gettext'; diff --git a/web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx b/web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx index 8f00f30d9..f5441611e 100644 --- a/web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx +++ b/web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx @@ -7,7 +7,7 @@ // ////////////////////////////////////////////////////////////// -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@mui/styles'; import React from 'react'; import PropTypes from 'prop-types'; import gettext from 'sources/gettext'; diff --git a/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx b/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx index 2838c6bec..2cd2a926d 100644 --- a/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx +++ b/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx @@ -1,11 +1,11 @@ import React from 'react'; import { useModalStyles } from '../helpers/ModalProvider'; import gettext from 'sources/gettext'; -import { Box } from '@material-ui/core'; +import { Box } from '@mui/material'; import { DefaultButton, PrimaryButton } from '../components/Buttons'; -import CloseIcon from '@material-ui/icons/CloseRounded'; -import CheckRoundedIcon from '@material-ui/icons/CheckRounded'; -import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded'; +import CloseIcon from '@mui/icons-material/CloseRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded'; import HTMLReactParser from 'html-react-parser'; import PropTypes from 'prop-types'; diff --git a/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx b/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx index 3729d8ca3..c22543c1c 100644 --- a/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx +++ b/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx @@ -9,10 +9,10 @@ import React, { useState, useRef, useEffect, useLayoutEffect } from 'react'; import gettext from 'sources/gettext'; -import { Box } from '@material-ui/core'; +import { Box } from '@mui/material'; import { DefaultButton, PrimaryButton } from '../components/Buttons'; -import CloseIcon from '@material-ui/icons/CloseRounded'; -import CheckRoundedIcon from '@material-ui/icons/CheckRounded'; +import CloseIcon from '@mui/icons-material/CloseRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; import PropTypes from 'prop-types'; import { useModalStyles } from '../helpers/ModalProvider'; import { FormFooterMessage, InputCheckbox, InputText, MESSAGE_TYPE } from '../components/FormComponents'; diff --git a/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx b/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx index 745bbe2f9..73d97934a 100644 --- a/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx +++ b/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx @@ -12,11 +12,11 @@ import PropTypes from 'prop-types'; import gettext from 'sources/gettext'; import url_for from 'sources/url_for'; -import { Box } from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/CloseRounded'; -import DeleteForeverIcon from '@material-ui/icons/DeleteForever'; -import CheckRoundedIcon from '@material-ui/icons/CheckRounded'; -import HelpIcon from '@material-ui/icons/Help'; +import { Box } from '@mui/material'; +import CloseIcon from '@mui/icons-material/CloseRounded'; +import DeleteForeverIcon from '@mui/icons-material/DeleteForever'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; +import HelpIcon from '@mui/icons-material/Help'; import { DefaultButton, PrimaryButton, PgIconButton } from '../components/Buttons'; import { useModalStyles } from '../helpers/ModalProvider'; diff --git a/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx b/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx index c2b165c1c..a101ab452 100644 --- a/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx +++ b/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx @@ -9,10 +9,10 @@ import React, { useState, useRef, useEffect } from 'react'; import gettext from 'sources/gettext'; -import { Box } from '@material-ui/core'; +import { Box } from '@mui/material'; import { DefaultButton, PrimaryButton } from '../components/Buttons'; -import CloseIcon from '@material-ui/icons/CloseRounded'; -import CheckRoundedIcon from '@material-ui/icons/CheckRounded'; +import CloseIcon from '@mui/icons-material/CloseRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; import PropTypes from 'prop-types'; import { useModalStyles } from '../helpers/ModalProvider'; import { InputText } from '../components/FormComponents'; diff --git a/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx b/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx index c0422c3e5..cbd2d91a4 100644 --- a/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx +++ b/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx @@ -11,9 +11,9 @@ import _ from 'lodash'; import React, { useState, useRef, useMemo } from 'react'; import PropTypes from 'prop-types'; -import { Box } from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/CloseRounded'; -import CheckRoundedIcon from '@material-ui/icons/CheckRounded'; +import { Box } from '@mui/material'; +import CloseIcon from '@mui/icons-material/CloseRounded'; +import CheckRoundedIcon from '@mui/icons-material/CheckRounded'; import gettext from 'sources/gettext'; diff --git a/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx b/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx index e1be32166..688470b3a 100644 --- a/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx +++ b/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx @@ -12,9 +12,9 @@ import PropTypes from 'prop-types'; import gettext from 'sources/gettext'; import url_for from 'sources/url_for'; -import { Box } from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/CloseRounded'; -import HelpIcon from '@material-ui/icons/Help'; +import { Box } from '@mui/material'; +import CloseIcon from '@mui/icons-material/CloseRounded'; +import HelpIcon from '@mui/icons-material/Help'; import { DefaultButton, PgIconButton } from '../components/Buttons'; import { useModalStyles } from '../helpers/ModalProvider'; diff --git a/web/pgadmin/static/js/Explain/Analysis.jsx b/web/pgadmin/static/js/Explain/Analysis.jsx index 1e977c2f2..749dfd1ec 100644 --- a/web/pgadmin/static/js/Explain/Analysis.jsx +++ b/web/pgadmin/static/js/Explain/Analysis.jsx @@ -6,12 +6,12 @@ // This software is released under the PostgreSQL Licence // ////////////////////////////////////////////////////////////// -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@mui/styles'; import React from 'react'; import clsx from 'clsx'; import _ from 'lodash'; -import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; -import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'; +import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'; +import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'; import HTMLReactParse from 'html-react-parser'; import { commonTableStyles } from '../Theme'; import PropTypes from 'prop-types'; diff --git a/web/pgadmin/static/js/Explain/ExplainStatistics.jsx b/web/pgadmin/static/js/Explain/ExplainStatistics.jsx index 5bffceb3c..a402985f7 100644 --- a/web/pgadmin/static/js/Explain/ExplainStatistics.jsx +++ b/web/pgadmin/static/js/Explain/ExplainStatistics.jsx @@ -7,7 +7,8 @@ // ////////////////////////////////////////////////////////////// import React from 'react'; -import { Box, Grid, makeStyles } from '@material-ui/core'; +import { Box, Grid } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import gettext from 'sources/gettext'; import { commonTableStyles } from '../Theme'; import clsx from 'clsx'; diff --git a/web/pgadmin/static/js/Explain/Graphical.jsx b/web/pgadmin/static/js/Explain/Graphical.jsx index 5f27440c2..1c397dcbc 100644 --- a/web/pgadmin/static/js/Explain/Graphical.jsx +++ b/web/pgadmin/static/js/Explain/Graphical.jsx @@ -6,19 +6,20 @@ // This software is released under the PostgreSQL Licence // ////////////////////////////////////////////////////////////// -import { Box, Card, CardContent, CardHeader, makeStyles, useTheme } from '@material-ui/core'; +import { Box, Card, CardContent, CardHeader, useTheme } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import React, {useEffect} from 'react'; import _ from 'lodash'; import { PgButtonGroup, PgIconButton } from '../components/Buttons'; -import ZoomInIcon from '@material-ui/icons/ZoomIn'; -import ZoomOutIcon from '@material-ui/icons/ZoomOut'; -import ZoomOutMapIcon from '@material-ui/icons/ZoomOutMap'; -import SaveAltIcon from '@material-ui/icons/SaveAlt'; +import ZoomInIcon from '@mui/icons-material/ZoomIn'; +import ZoomOutIcon from '@mui/icons-material/ZoomOut'; +import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap'; +import SaveAltIcon from '@mui/icons-material/SaveAlt'; import gettext from 'sources/gettext'; import ReactDOMServer from 'react-dom/server'; import url_for from 'sources/url_for'; import { downloadSvg } from './svg_download'; -import CloseIcon from '@material-ui/icons/CloseRounded'; +import CloseIcon from '@mui/icons-material/CloseRounded'; import { commonTableStyles } from '../Theme'; import clsx from 'clsx'; import PropTypes from 'prop-types'; @@ -406,7 +407,7 @@ export default function Graphical({planData, ctx}) { return ( - + } onClick={()=>onCmdClick('in')}/> } onClick={()=>onCmdClick()}/> diff --git a/web/pgadmin/static/js/Explain/index.jsx b/web/pgadmin/static/js/Explain/index.jsx index 433e0e706..dee22cd49 100644 --- a/web/pgadmin/static/js/Explain/index.jsx +++ b/web/pgadmin/static/js/Explain/index.jsx @@ -6,14 +6,14 @@ // This software is released under the PostgreSQL Licence // ////////////////////////////////////////////////////////////// -import { Box, Tab, Tabs } from '@material-ui/core'; +import { Box, Tab, Tabs } from '@mui/material'; import React from 'react'; import _ from 'lodash'; import Graphical from './Graphical'; import TabPanel from '../components/TabPanel'; import gettext from 'sources/gettext'; import ImageMapper from './ImageMapper'; -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@mui/styles'; import Analysis from './Analysis'; import ExplainStatistics from './ExplainStatistics'; import PropTypes from 'prop-types'; diff --git a/web/pgadmin/static/js/PgTreeView/index.jsx b/web/pgadmin/static/js/PgTreeView/index.jsx index 928397601..fba60b84e 100644 --- a/web/pgadmin/static/js/PgTreeView/index.jsx +++ b/web/pgadmin/static/js/PgTreeView/index.jsx @@ -1,15 +1,16 @@ -import { Checkbox, makeStyles } from '@material-ui/core'; +import { Checkbox } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import clsx from 'clsx'; import gettext from 'sources/gettext'; import React, { useEffect, useRef } from 'react'; import { Tree } from 'react-arborist'; import AutoSizer from 'react-virtualized-auto-sizer'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import PropTypes from 'prop-types'; -import IndeterminateCheckBoxIcon from '@material-ui/icons/IndeterminateCheckBox'; +import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox'; import EmptyPanelMessage from '../components/EmptyPanelMessage'; -import CheckBoxIcon from '@material-ui/icons/CheckBox'; +import CheckBoxIcon from '@mui/icons-material/CheckBox'; const useStyles = makeStyles((theme) => ({ diff --git a/web/pgadmin/static/js/QuickSearch/index.jsx b/web/pgadmin/static/js/QuickSearch/index.jsx index d0b364074..42a0c9141 100644 --- a/web/pgadmin/static/js/QuickSearch/index.jsx +++ b/web/pgadmin/static/js/QuickSearch/index.jsx @@ -7,7 +7,8 @@ // ////////////////////////////////////////////////////////////// import React, {useRef,useState, useEffect} from 'react'; -import { CircularProgress, Typography, makeStyles } from '@material-ui/core'; +import { CircularProgress, Typography } from '@mui/material'; +import { makeStyles } from '@mui/styles'; import clsx from 'clsx'; import {useDelayDebounce} from 'sources/custom_hooks'; import {onlineHelpSearch} from './online_help'; @@ -103,14 +104,7 @@ HelpArticleContents.propTypes = { isMenuLoading: PropTypes.bool }; -const useModalStyles = makeStyles(() => ({ - setTop: { - marginTop: '-20px', - } -})); - export default function QuickSearch({closeModal}) { - const modalClasses = useModalStyles(); const classes = useStyles(); const wrapperRef = useRef(null); const [searchTerm, setSearchTerm] = useState(''); @@ -266,7 +260,7 @@ export default function QuickSearch({closeModal}) { return (
{/* no need */}}>
, -