From 5c10c322d1d8428fd8a8cdd4ac5b85fc4e8c5f17 Mon Sep 17 00:00:00 2001 From: Ashesh Vashi Date: Wed, 20 May 2026 17:18:22 +0530 Subject: [PATCH] chore(deps): bump @mui/material 7 -> 9 and @mui/x-date-pickers 8 -> 9 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Supersedes dependabot #9843 and #9888, which must land together because date-pickers v9 requires @mui/material v9 as a peer. @mui/material skipped v8 on npm (7.x -> 9.x), so only v9's breaking changes apply. ## Manifest changes - @mui/material ^7.3.10 -> ^9.0.0 (resolved 9.0.1) - @mui/icons-material ^7.3.10 -> ^9.0.0 (resolved 9.0.1) - @mui/x-date-pickers ^8.28.3 -> ^9.0.2 (resolved 9.2.0) ## Source changes (98 files, mostly mechanical) 1. Two legacy icon imports renamed (v9 removed these in favor of the *Outlined variants): -import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; +import ErrorOutlineIcon from '@mui/icons-material/ErrorOutlined'; -import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; +import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutlined'; Both in web/pgadmin/static/js/Explain/AIInsights.jsx. 2. `styled(Box)` -> `styled('div')` across 50 files. v9's `Box` stopped filtering CSS-property-named keys (flexDirection, marginLeft, etc.) out of the props it forwarded to the DOM, so any `styled(Box)(({theme}) => ({ flexDirection: 'column', ... }))` leaked those CSS keys to the underlying `
` as React props. Using `styled('div')` keeps the CSS-in-JS layer working as expected and removes the now-redundant Box layer (every affected styled wrapper was a pure styling container, not using Box's sx-passthrough or component-swap behavior). 3. Box / Stack / Typography / Link / Grid / DialogContentText / TimelineContent / TimelineOppositeContent system props moved to `sx`. v9 removed individual system-prop syntax from these components; `` is now ``. Applied via the official codemod: npx @mui/codemod@latest v9.0.0/system-props pgadmin 65 files transformed, 6 Jinja-templated `.js` files skipped (parse errors, not real JS; no MUI usage in them). 4. One test updated for v9's class-name split. Button's variant+color combo class (`MuiButton-containedPrimary`) is now emitted as two separate classes (`MuiButton-contained` + `MuiButton-colorPrimary`). web/regression/javascript/components/Buttons.spec.js ## Test plan - [x] `yarn install` resolved cleanly - [x] `yarn run test:js-once` -> 140/0/0 suites, 824/0/0 tests - [x] `yarn run linter` -> clean (silent) - [ ] CI matrix (Linux/Mac/Windows) passes - [ ] Visual sweep of main UI surfaces in `yarn start`: login screen, browser tree, query tool, ERD, schema dialogs (table/function/trigger/index), theme switcher (light/dark/high-contrast), file manager, debugger panel, backup/restore dialogs. ## Notes for reviewers The major risk surface for this PR is not API breakage (all caught by jest) but **visual regression**. v9's "sx prop performance" and "deprecated API cleanup" work shifts a few pixels in places — most notably ListItemIcon spacing (which v9 changed from hardcoded `minWidth` to theme spacing). Worth a careful look at menus and toolbars. The other Box-related changes (system props -> sx) preserve behavior 1:1 — they're a pure syntactic migration. `@mui/x-date-pickers`'s legacy `LocalizationProvider` API was removed, but we already use the modern `dateAdapter={AdapterDateFns}` form in `Theme/index.jsx`, so no change needed there. --- web/package.json | 6 +- .../about/static/js/AboutComponent.jsx | 15 +- web/pgadmin/browser/static/js/keyboard.js | 12 +- web/pgadmin/dashboard/static/js/Dashboard.jsx | 88 ++++++---- .../static/js/Replication/LogReplication.jsx | 7 +- .../static/js/Replication/PGDReplication.jsx | 7 +- .../static/js/SystemStats/CpuDetails.jsx | 20 ++- .../static/js/SystemStats/Memory.jsx | 20 ++- .../static/js/SystemStats/Storage.jsx | 4 +- .../static/js/components/ChartContainer.jsx | 6 +- .../static/js/components/SectionContainer.jsx | 10 +- web/pgadmin/llm/static/js/AIReport.jsx | 2 +- web/pgadmin/llm/static/js/SecurityReport.jsx | 2 +- .../bgprocess/static/js/BgProcessNotify.jsx | 19 +- .../bgprocess/static/js/ProcessDetails.jsx | 18 +- .../misc/cloud/static/js/CloudWizard.jsx | 8 +- .../static/js/components/FileManager.jsx | 28 ++- .../static/js/components/GridView.jsx | 8 +- .../static/js/components/Uploader.jsx | 29 ++- .../properties/CollectionNodeProperties.jsx | 2 +- web/pgadmin/misc/properties/Properties.jsx | 6 +- .../workspaces/static/js/WorkspaceToolbar.jsx | 4 +- .../static/js/WorkspaceWelcomePage.jsx | 2 +- .../js/components/PreferencesComponent.jsx | 2 +- .../js/components/PreferencesHelper.jsx | 8 +- web/pgadmin/static/js/AppMenuBar.jsx | 3 +- .../static/js/Dialogs/ConfirmSaveContent.jsx | 6 +- .../js/Dialogs/ConnectServerContent.jsx | 27 ++- .../js/Dialogs/MasterPasswordContent.jsx | 23 ++- .../static/js/Dialogs/NamedRestoreContent.jsx | 10 +- .../static/js/Dialogs/RenameTabContent.jsx | 8 +- .../static/js/Dialogs/UrlDialogContent.jsx | 4 +- web/pgadmin/static/js/Explain/AIInsights.jsx | 24 +-- .../static/js/Explain/ExplainStatistics.jsx | 4 +- web/pgadmin/static/js/Explain/Graphical.jsx | 19 +- web/pgadmin/static/js/Explain/index.jsx | 2 +- .../js/SchemaView/DataGridView/formHeader.jsx | 2 +- .../static/js/SchemaView/InlineView.jsx | 4 +- .../static/js/SchemaView/SchemaDialogView.jsx | 4 +- .../static/js/SchemaView/StyledComponents.jsx | 7 +- web/pgadmin/static/js/SchemaView/common.js | 24 +-- .../static/js/SecurityPages/BasePage.jsx | 25 ++- .../static/js/SecurityPages/LoginPage.jsx | 6 +- .../js/SecurityPages/MfaRegisterPage.jsx | 13 +- web/pgadmin/static/js/ToolErrorView.jsx | 4 +- .../js/components/EmptyPanelMessage.jsx | 3 +- .../static/js/components/FormComponents.jsx | 8 +- .../js/components/KeyboardShortcuts.jsx | 13 +- web/pgadmin/static/js/components/Loader.jsx | 2 +- .../static/js/components/ModalContent.jsx | 2 +- .../js/components/ObjectBreadcrumbs.jsx | 3 +- .../static/js/components/PgReactDataGrid.jsx | 7 +- web/pgadmin/static/js/components/PgTable.jsx | 4 +- .../static/js/components/QueryThresholds.jsx | 4 +- .../ReactCodeMirror/components/FindDialog.jsx | 11 +- .../ReactCodeMirror/components/GotoDialog.jsx | 4 +- .../static/js/components/SelectRefresh.jsx | 2 +- web/pgadmin/static/js/components/TabPanel.jsx | 2 +- .../static/js/helpers/Layout/index.jsx | 38 +++- .../static/js/helpers/MainMoreToolbar.jsx | 6 +- .../static/js/helpers/ModalProvider.jsx | 19 +- web/pgadmin/static/js/helpers/Notifier.jsx | 13 +- .../js/helpers/appAutoUpdateNotifier.jsx | 30 +++- .../static/js/helpers/wizard/Wizard.jsx | 6 +- .../ObjectExplorer/ObjectExplorerToolbar.jsx | 7 +- .../static/vendor/require/require.min.js | 2 +- .../components/DebuggerArgumentComponent.jsx | 6 +- .../js/components/DebuggerComponent.jsx | 11 +- .../debugger/static/js/components/ToolBar.jsx | 3 +- .../js/erd_tool/components/ConnectionBar.jsx | 15 +- .../static/js/erd_tool/components/ERDTool.jsx | 3 +- .../js/erd_tool/components/MainToolBar.jsx | 4 +- .../static/js/erd_tool/nodes/TableNode.jsx | 22 ++- .../static/js/ImportExportServers.jsx | 2 +- .../static/js/components/PsqlComponent.jsx | 4 +- .../static/js/components/InputComponent.jsx | 4 +- .../js/components/ResultGridComponent.jsx | 2 +- .../js/components/SchemaDiffCompare.jsx | 8 +- .../js/components/SchemaDiffComponent.jsx | 3 +- .../static/js/SearchObjects.jsx | 11 +- .../js/components/QueryToolComponent.jsx | 11 +- .../components/QueryToolDataGrid/Editors.jsx | 15 +- .../js/components/QueryToolDataGrid/index.jsx | 14 +- .../components/dialogs/CloseRunningDialog.jsx | 6 +- .../dialogs/ConfirmPromotionContent.jsx | 6 +- .../dialogs/ConfirmTransactionContent.jsx | 6 +- .../js/components/dialogs/MacrosDialog.jsx | 3 +- .../js/components/sections/ConnectionBar.jsx | 23 ++- .../js/components/sections/GeometryViewer.jsx | 3 +- .../components/sections/GraphVisualiser.jsx | 9 +- .../js/components/sections/MainToolBar.jsx | 3 +- .../js/components/sections/NLQChatPanel.jsx | 27 +-- .../js/components/sections/QueryHistory.jsx | 74 ++++++-- .../js/components/sections/ResultSet.jsx | 8 +- .../components/sections/ResultSetToolbar.jsx | 14 +- .../js/components/sections/StatusBar.jsx | 2 +- .../javascript/components/Buttons.spec.js | 5 +- web/yarn.lock | 166 +++++++++--------- 98 files changed, 849 insertions(+), 382 deletions(-) diff --git a/web/package.json b/web/package.json index af7b0cf8852..e235758abbb 100644 --- a/web/package.json +++ b/web/package.json @@ -79,9 +79,9 @@ "@emotion/sheet": "^1.4.0", "@fluentui/keyboard-key": "^0.4.23", "@fortawesome/fontawesome-free": "latest", - "@mui/icons-material": "^7.3.10", - "@mui/material": "^7.3.10", - "@mui/x-date-pickers": "^8.28.3", + "@mui/icons-material": "^9.0.0", + "@mui/material": "^9.0.0", + "@mui/x-date-pickers": "^9.0.2", "@nozbe/microfuzz": "^1.0.0", "@projectstorm/react-diagrams": "^7.0.4", "@simonwep/pickr": "^1.9.1", diff --git a/web/pgadmin/about/static/js/AboutComponent.jsx b/web/pgadmin/about/static/js/AboutComponent.jsx index 85d7b2344a2..23ebc8f1f52 100644 --- a/web/pgadmin/about/static/js/AboutComponent.jsx +++ b/web/pgadmin/about/static/js/AboutComponent.jsx @@ -122,11 +122,22 @@ export default function AboutComponent() { } { aboutData.settings && - + {gettext('pgAdmin Server Configuration')} - + 0) { this.keyboardShortcut = { - ...(prefStore.getPreferences('browser', 'main_menu_file')?.value) && {'file_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_file')?.value)}, - ...(prefStore.getPreferences('browser', 'main_menu_object')?.value) && {'object_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_object')?.value)}, - ...(prefStore.getPreferences('browser', 'main_menu_tools')?.value) && {'tools_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_tools')?.value)}, - ...(prefStore.getPreferences('browser', 'main_menu_help')?.value) && {'help_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_help')?.value)}, + ...((prefStore.getPreferences('browser', 'main_menu_file')?.value) && {'file_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_file')?.value)}), + ...((prefStore.getPreferences('browser', 'main_menu_object')?.value) && {'object_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_object')?.value)}), + ...((prefStore.getPreferences('browser', 'main_menu_tools')?.value) && {'tools_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_tools')?.value)}), + ...((prefStore.getPreferences('browser', 'main_menu_help')?.value) && {'help_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_help')?.value)}), 'left_tree_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'browser_tree')?.value), 'tabbed_panel_backward': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'tabbed_panel_backward')?.value), 'tabbed_panel_forward': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'tabbed_panel_forward')?.value), @@ -56,11 +56,11 @@ _.extend(pgBrowser.keyboardNavigation, { }; this.shortcutMethods = { - ...(prefStore.getPreferences('browser', 'main_menu_file')?.value) && {'bindMainMenu': { + ...((prefStore.getPreferences('browser', 'main_menu_file')?.value) && {'bindMainMenu': { 'shortcuts': [this.keyboardShortcut.file_shortcut, this.keyboardShortcut.object_shortcut, this.keyboardShortcut.tools_shortcut, this.keyboardShortcut.help_shortcut], - }}, // Main menu + }}), // Main menu 'bindRightPanel': {'shortcuts': [this.keyboardShortcut.tabbed_panel_backward, this.keyboardShortcut.tabbed_panel_forward, this.keyboardShortcut.close_tab_panel]}, // Main window panels 'bindLeftTree': {'shortcuts': this.keyboardShortcut.left_tree_shortcut}, // Main menu, 'bindSubMenuQueryTool': {'shortcuts': this.keyboardShortcut.sub_menu_query_tool}, // Sub menu - Open Query Tool, diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx index de673617413..835b273eaec 100644 --- a/web/pgadmin/dashboard/static/js/Dashboard.jsx +++ b/web/pgadmin/dashboard/static/js/Dashboard.jsx @@ -948,41 +948,48 @@ function Dashboard({ label: gettext('Table based logs'), }; const CustomLogHeader = () => { - return ( - { - setLogFormat(val); - }} - options={logConfigFormat} - controlProps={CustomLogHeaderLabel} - labelGridBasis={3} - controlGridBasis={3} - > - { - setDashData([]); - setLogCol(e.target.checked); - }} - controlProps={CustomLogHeaderLabel} - labelGridBasis={3} - controlGridBasis={3} - > -
} - onClick={downloadServerLogs} - aria-label="Download" - title={gettext('Download logs ')} - >
- ); + return ( + + { + setLogFormat(val); + }} + options={logConfigFormat} + controlProps={CustomLogHeaderLabel} + labelGridBasis={3} + controlGridBasis={3} + > + { + setDashData([]); + setLogCol(e.target.checked); + }} + controlProps={CustomLogHeaderLabel} + labelGridBasis={3} + controlGridBasis={3} + > +
} + onClick={downloadServerLogs} + aria-label="Download" + title={gettext('Download logs ')} + >
+ + ); }; @@ -1021,7 +1028,7 @@ function Dashboard({ }; return ( - ( + {sid && serverConnected ? ( @@ -1133,7 +1140,12 @@ function Dashboard({ {/* System Statistics */} - + {ssMsg === 'installed' && did === ldid ? @@ -1203,7 +1215,7 @@ function Dashboard({ ) : showDefaultContents() } - ) + ); } diff --git a/web/pgadmin/dashboard/static/js/Replication/LogReplication.jsx b/web/pgadmin/dashboard/static/js/Replication/LogReplication.jsx index 32369c03d95..8803996d4bc 100644 --- a/web/pgadmin/dashboard/static/js/Replication/LogReplication.jsx +++ b/web/pgadmin/dashboard/static/js/Replication/LogReplication.jsx @@ -165,7 +165,12 @@ export default function LogReplication({treeNodeInfo, pageVisible}) { }, [pageVisible ]); return ( - + { getReplicationData('replication_stats', setReplicationStats); diff --git a/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx b/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx index 07b721769da..c163fb64730 100644 --- a/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx +++ b/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx @@ -404,7 +404,12 @@ export default function PGDReplication({preferences, treeNodeInfo, pageVisible, const replicationLagBytesData = useMemo(()=>transformData(replicationLagBytes, preferences['pgd_replication_lag_refresh'], theme.name), [replicationLagBytes, theme.name]); return ( - + +
{pollDelay}
{chartDrawnOnce && + @@ -230,7 +240,11 @@ export function CPUWrapper(props) { - + +
{pollDelay}
{chartDrawnOnce && + @@ -239,7 +249,11 @@ export function MemoryWrapper(props) { - + {Object.keys(props.ioInfo).map((drive) => ( - + {Object.keys(props.ioInfo[drive]).map((type, innerKeyIndex) => ( diff --git a/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx b/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx index d9ead7cf0af..3ddd5e755a0 100644 --- a/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx +++ b/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx @@ -40,7 +40,11 @@ export default function ChartContainer(props) { return ( - +
{props.title}
diff --git a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx index 0df81463c99..a9395e734c8 100644 --- a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx +++ b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx @@ -11,7 +11,7 @@ import PropTypes from 'prop-types'; import { Box } from '@mui/material'; import { Resizable } from 're-resizable'; -const StyledBox = styled(Box)(({theme}) => ({ +const StyledBox = styled('div')(({theme}) => ({ ...theme.mixins.panelBorder.all, display: 'flex', flexDirection: 'column', @@ -48,7 +48,13 @@ export default function SectionContainer({title, titleExtras, children, style, r {titleExtras}
- + {children} diff --git a/web/pgadmin/llm/static/js/AIReport.jsx b/web/pgadmin/llm/static/js/AIReport.jsx index 6b3ad23feee..a5498427901 100644 --- a/web/pgadmin/llm/static/js/AIReport.jsx +++ b/web/pgadmin/llm/static/js/AIReport.jsx @@ -48,7 +48,7 @@ marked.setOptions({ }); -const StyledBox = styled(Box)(({ theme }) => ({ +const StyledBox = styled('div')(({ theme }) => ({ display: 'flex', flexDirection: 'column', height: '100%', diff --git a/web/pgadmin/llm/static/js/SecurityReport.jsx b/web/pgadmin/llm/static/js/SecurityReport.jsx index ff8033bb9d1..d557b66b296 100644 --- a/web/pgadmin/llm/static/js/SecurityReport.jsx +++ b/web/pgadmin/llm/static/js/SecurityReport.jsx @@ -30,7 +30,7 @@ marked.setOptions({ }); -const StyledBox = styled(Box)(({ theme }) => ({ +const StyledBox = styled('div')(({ theme }) => ({ display: 'flex', flexDirection: 'column', height: '100%', diff --git a/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx b/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx index e43937c5b84..281b3cbd296 100644 --- a/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx +++ b/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx @@ -8,7 +8,7 @@ import PropTypes from 'prop-types'; import gettext from 'sources/gettext'; import pgAdmin from 'sources/pgadmin'; -const StyledBox = styled(Box)(({theme}) => ({ +const StyledBox = styled('div')(({theme}) => ({ borderRadius: theme.shape.borderRadius, padding: '0.25rem 1rem 1rem', minWidth: '325px', @@ -46,13 +46,24 @@ const AUTO_HIDE_DURATION = 10000; // In milliseconds function ProcessNotifyMessage({title, desc, onClose, onViewProcess, success=true, dataTestSuffix=''}) { return ( - - {title} + + {title} } onClick={onClose} title={'Close'} className={success ? 'BgProcessNotify-iconSuccess' : 'BgProcessNotify-iconError'} /> {desc} - + } onClick={()=>{ onViewProcess(); onClose(); diff --git a/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx b/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx index 42b38dd2968..ed4d95c1b23 100644 --- a/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx +++ b/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx @@ -24,7 +24,7 @@ import pgAdmin from 'sources/pgadmin'; import FolderSharedRoundedIcon from '@mui/icons-material/FolderSharedRounded'; -const StyledBox = styled(Box)(({theme}) => ({ +const StyledBox = styled('div')(({theme}) => ({ backgroundColor: theme.palette.background.default, height: '100%', display: 'flex', @@ -161,7 +161,13 @@ export default function ProcessDetails({data}) { {gettext('Running query')}: {data.details.query} } - + {gettext('Start time')}: {new Date(data.stime).toString()} {pgAdmin.server_mode == 'True' && data.current_storage_dir && @@ -174,7 +180,7 @@ export default function ProcessDetails({data}) { - + {logs == null && {gettext('Loading process logs...')}} {logs?.length == 0 && gettext('No logs available.')} {logs?.map((log, i)=>{ @@ -186,7 +192,11 @@ export default function ProcessDetails({data}) { }} key={id} className={errRe.test(log) ? 'ProcessDetails-logErr' : ''}>{log}
; })} - + {gettext('Execution time')}: {timeTaken} {gettext('seconds')} diff --git a/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx b/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx index 85cfaedfe15..488b43b1230 100644 --- a/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx +++ b/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx @@ -425,10 +425,14 @@ export default function CloudWizard({ nodeInfo, nodeData, onClose, cloudPanelId} {cloudProvider == CLOUD_PROVIDERS.AWS && } { cloudProvider == CLOUD_PROVIDERS.AZURE && - + } - + {cloudProvider == CLOUD_PROVIDERS.GOOGLE && } 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 818c6b54358..4ca25b14e47 100644 --- a/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx +++ b/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx @@ -37,7 +37,7 @@ import ErrorBoundary from '../../../../../static/js/helpers/ErrorBoundary'; import { MY_STORAGE } from './FileManagerConstants'; import _ from 'lodash'; -const StyledBox = styled(Box)(({theme}) => ({ +const StyledBox = styled('div')(({theme}) => ({ backgroundColor: theme.palette.background.default, '& .FileManager-toolbar': { padding: '4px', @@ -452,8 +452,12 @@ export class FileManagerUtils { function ConfirmFile({text, onYes, onNo}) { return ( - - {text}{} + + {text}{} } onClick={onNo} >{gettext('No')} } @@ -771,7 +775,14 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS return ( - + {Boolean(confirmText) && setConfirmFile([null, null])} onYes={onConfirmYes}/>} @@ -869,7 +880,14 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS } - + {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 88eb3c5d357..6165126d76f 100644 --- a/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx +++ b/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx @@ -16,7 +16,7 @@ import StorageRoundedIcon from '@mui/icons-material/StorageRounded'; import PropTypes from 'prop-types'; import gettext from 'sources/gettext'; -const StyledBox = styled(Box)(({theme}) => ({ +const StyledBox = styled('div')(({theme}) => ({ '& .GridView-grid': { display: 'flex', fontSize: '13px', @@ -143,7 +143,11 @@ export default function GridView({items, operation, onItemSelect, onItemEnter}) onItemEnter={onItemEnter} onEditComplete={operation.idx==i ? onEditComplete : null} />) )}
- {items.length == 0 && {gettext('No files/folders found')}} + {items.length == 0 && {gettext('No files/folders found')}} ); } 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 f6f68e3fd59..3a248b5a95d 100644 --- a/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx +++ b/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx @@ -19,7 +19,7 @@ import _ from 'lodash'; import PropTypes from 'prop-types'; -const StyledBox = styled(Box)(({theme}) => ({ +const StyledBox = styled('div')(({theme}) => ({ position: 'absolute', top: 0, bottom: 0, @@ -104,9 +104,17 @@ export function UploadedFile({upfile, removeFile}) { return ( - - {upfile.file.name} - + + {upfile.file.name} + } size="xs" noBorder onClick={removeFile} /> @@ -166,10 +174,19 @@ export default function Uploader({fmUtilsObj, onClose}) { return ( - + } size="xs" noBorder onClick={onClose} /> - + {gettext('Drop files here, or click to select files.')} diff --git a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx index dfacb235289..ac7c756c288 100644 --- a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx +++ b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx @@ -25,7 +25,7 @@ import { usePgAdmin } from '../../static/js/PgAdminProvider'; import { getSwitchCell } from '../../static/js/components/PgReactTableStyled'; import { parseApiError } from '../../static/js/api_instance'; -const StyledBox = styled(Box)(({theme}) => ({ +const StyledBox = styled('div')(({theme}) => ({ height: '100%', '&.CollectionNodeProperties-emptyPanel': { minHeight: '100%', diff --git a/web/pgadmin/misc/properties/Properties.jsx b/web/pgadmin/misc/properties/Properties.jsx index 7c258a33c08..3102d4d8f3e 100644 --- a/web/pgadmin/misc/properties/Properties.jsx +++ b/web/pgadmin/misc/properties/Properties.jsx @@ -20,7 +20,7 @@ import { usePgAdmin } from '../../static/js/PgAdminProvider'; import PropTypes from 'prop-types'; import _ from 'lodash'; -const StyledBox = styled(Box)(({theme}) => ({ +const StyledBox = styled('div')(({theme}) => ({ height: '100%', background: theme.otherVars.emptySpaceBg, display: 'flex', @@ -41,7 +41,9 @@ function Properties(props) { if(noPropertyMsg) { return ( - + diff --git a/web/pgadmin/misc/workspaces/static/js/WorkspaceToolbar.jsx b/web/pgadmin/misc/workspaces/static/js/WorkspaceToolbar.jsx index 3140db071bd..a1a4ad4e2e1 100644 --- a/web/pgadmin/misc/workspaces/static/js/WorkspaceToolbar.jsx +++ b/web/pgadmin/misc/workspaces/static/js/WorkspaceToolbar.jsx @@ -133,7 +133,9 @@ export default function WorkspaceToolbar() { } value={WORKSPACES.QUERY_TOOL} title={gettext('Query Tool Workspace')} tooltipPlacement="right" options={{permission: AllPermissionTypes.TOOLS_QUERY_TOOL}} /> {pgAdmin['enable_psql'] && } value={WORKSPACES.PSQL_TOOL} title={gettext('PSQL Tool Workspace')} tooltipPlacement="right" options={{permission: AllPermissionTypes.TOOLS_PSQL_TOOL}} />} } value={WORKSPACES.SCHEMA_DIFF_TOOL} title={gettext('Schema Diff Workspace')} tooltipPlacement="right" options={{permission: AllPermissionTypes.TOOLS_SCHEMA_DIFF}} /> - + } menuItem={menus['settings']} title={gettext('Preferences')} tooltipPlacement="right" /> diff --git a/web/pgadmin/misc/workspaces/static/js/WorkspaceWelcomePage.jsx b/web/pgadmin/misc/workspaces/static/js/WorkspaceWelcomePage.jsx index 1d07424b548..9d517cfb344 100644 --- a/web/pgadmin/misc/workspaces/static/js/WorkspaceWelcomePage.jsx +++ b/web/pgadmin/misc/workspaces/static/js/WorkspaceWelcomePage.jsx @@ -73,7 +73,7 @@ const Root = styled('div')(({theme}) => ({ } })); -const BackgroundSVG = styled(Box)(() => ({ +const BackgroundSVG = styled('div')(() => ({ position: 'absolute', top: 0, bottom: 0, diff --git a/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx b/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx index 3e70c486b00..6c93627050e 100644 --- a/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx +++ b/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx @@ -40,7 +40,7 @@ import LeftTree from './LeftTree'; import RightPreference from './RightPreference'; // --- Styled Components --- -const Root = styled(Box)(({ theme }) => ({ +const Root = styled('div')(({ theme }) => ({ height: '100%', display: 'flex', flexDirection: 'column', diff --git a/web/pgadmin/preferences/static/js/components/PreferencesHelper.jsx b/web/pgadmin/preferences/static/js/components/PreferencesHelper.jsx index e8dcb1c78f4..3d58b02ddce 100644 --- a/web/pgadmin/preferences/static/js/components/PreferencesHelper.jsx +++ b/web/pgadmin/preferences/static/js/components/PreferencesHelper.jsx @@ -303,7 +303,7 @@ export function getCollectionValue(_metadata, value, initVals) { return val; } -const StyledBox = styled(Box)(({ theme }) => ({ +const StyledBox = styled('div')(({ theme }) => ({ '& .Alert-footer': { display: 'flex', justifyContent: 'flex-end', @@ -348,7 +348,11 @@ export function showResetPrefModal(api, pgAdmin, preferencesStore, onReset) { return ( - + {HTMLReactParser(text)} diff --git a/web/pgadmin/static/js/AppMenuBar.jsx b/web/pgadmin/static/js/AppMenuBar.jsx index 4f2af8c014f..ff9a0375fbd 100644 --- a/web/pgadmin/static/js/AppMenuBar.jsx +++ b/web/pgadmin/static/js/AppMenuBar.jsx @@ -6,7 +6,6 @@ // This software is released under the PostgreSQL Licence // ////////////////////////////////////////////////////////////// -import { Box } from '@mui/material'; import { styled } from '@mui/material/styles'; import { useEffect } from 'react'; import { PrimaryButton } from './components/Buttons'; @@ -17,7 +16,7 @@ import { usePgAdmin } from '../../static/js/PgAdminProvider'; import { useForceUpdate } from './custom_hooks'; -const StyledBox = styled(Box)(({theme}) => ({ +const StyledBox = styled('div')(({theme}) => ({ height: '30px', backgroundColor: theme.palette.primary.main, color: theme.palette.primary.contrastText, diff --git a/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx b/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx index e7e3e6c4286..e827118206b 100644 --- a/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx +++ b/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx @@ -11,7 +11,11 @@ import PropTypes from 'prop-types'; export default function ConfirmSaveContent({closeModal, text, onDontSave, onSave}) { return ( - {typeof(text) == 'string' ? HTMLReactParser(text) : text} + {typeof(text) == 'string' ? HTMLReactParser(text) : text} } onClick={()=>{ closeModal(); diff --git a/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx b/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx index 796e1441c3a..60c06b32d11 100644 --- a/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx +++ b/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx @@ -59,7 +59,11 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight, return ( - + {data.prompt_tunnel_password && <> @@ -69,11 +73,18 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight, } - + onTextChange(e, 'tunnel_password')} onKeyDown={(e)=>onKeyDown(e)} /> - + onTextChange(e.target.checked, 'save_tunnel_password')} disabled={!data.allow_save_tunnel_password} /> @@ -87,7 +98,9 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight, } - + { if(!data.prompt_tunnel_password) { /* Set only if no tunnel password asked */ @@ -96,7 +109,11 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight, }} type="password" value={formData['password']} controlProps={{maxLength:null}} onChange={(e)=>onTextChange(e, 'password')} onKeyDown={(e)=>onKeyDown(e)}/> - + onTextChange(e.target.checked, 'save_password')} disabled={!data.allow_save_password} /> diff --git a/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx b/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx index 5134eda2fa9..8ac04790b6d 100644 --- a/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx +++ b/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx @@ -57,7 +57,11 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO return ( {isKeyring ? - + {gettext('Please enter your master password.')} @@ -67,7 +71,9 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO - + onTextChange(e, 'password')} onKeyDown={(e) => onKeyDown(e)}/> @@ -75,7 +81,11 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO position: 'unset', padding: '12px 0px 0px' }} /> : - + {isPWDPresent ? gettext('Please enter your master password.') : gettext('Please set a master password for pgAdmin.')} @@ -85,7 +95,9 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO {isPWDPresent ? gettext('This is required to unlock saved passwords and reconnect to the database server(s).') : gettext('This will be used to secure and later unlock saved passwords and other credentials.')} - + onTextChange(e, 'password')} onKeyDown={(e) => onKeyDown(e)} controlProps={{autoComplete: 'new-password'}}/> @@ -129,7 +141,8 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO {gettext('OK')} - ); + + ); } MasterPasswordContent.propTypes = { diff --git a/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx b/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx index df3bc941c06..aa699974c2e 100644 --- a/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx +++ b/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx @@ -55,13 +55,19 @@ export default function NamedRestoreContent({closeModal, onOK, setHeight}) { return ( - + {gettext('Enter the name of the restore point to add')} - + onTextChange(e, 'namedRestorePoint')} onKeyDown={(e)=>onKeyDown(e)}/> diff --git a/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx b/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx index 7cb2b2b9f7d..5d90027652a 100644 --- a/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx +++ b/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx @@ -63,8 +63,12 @@ export default function RenameTabContent({ panelId, panelDocker, closeModal}) { return ( - - Current: {initialTitle} + + Current: {initialTitle} onTextChange(e, 'title')} onKeyDown={(e) => onKeyDown(e)} autoFocus /> diff --git a/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx b/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx index be6f1f7df38..e44f5dc0d7c 100644 --- a/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx +++ b/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx @@ -21,7 +21,9 @@ import { ModalContent, ModalFooter }from '../../../static/js/components/ModalCon export default function UrlDialogContent({ url, helpFile, onClose }) { return ( - +