mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2026-11-01 07:48:03 -06:00
Ashesh Vashi
5c10c322d1
Supersedes dependabot #9843 and #9888, which must land together because date-pickers v9 requires @mui/material v9 as a peer. @mui/material skipped v8 on npm (7.x -> 9.x), so only v9's breaking changes apply. ## Manifest changes - @mui/material ^7.3.10 -> ^9.0.0 (resolved 9.0.1) - @mui/icons-material ^7.3.10 -> ^9.0.0 (resolved 9.0.1) - @mui/x-date-pickers ^8.28.3 -> ^9.0.2 (resolved 9.2.0) ## Source changes (98 files, mostly mechanical) 1. Two legacy icon imports renamed (v9 removed these in favor of the *Outlined variants): -import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; +import ErrorOutlineIcon from '@mui/icons-material/ErrorOutlined'; -import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; +import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutlined'; Both in web/pgadmin/static/js/Explain/AIInsights.jsx. 2. `styled(Box)` -> `styled('div')` across 50 files. v9's `Box` stopped filtering CSS-property-named keys (flexDirection, marginLeft, etc.) out of the props it forwarded to the DOM, so any `styled(Box)(({theme}) => ({ flexDirection: 'column', ... }))` leaked those CSS keys to the underlying `<div>` as React props. Using `styled('div')` keeps the CSS-in-JS layer working as expected and removes the now-redundant Box layer (every affected styled wrapper was a pure styling container, not using Box's sx-passthrough or component-swap behavior). 3. Box / Stack / Typography / Link / Grid / DialogContentText / TimelineContent / TimelineOppositeContent system props moved to `sx`. v9 removed individual system-prop syntax from these components; `<Box flexGrow={1}>` is now `<Box sx={{flexGrow: 1}}>`. Applied via the official codemod: npx @mui/codemod@latest v9.0.0/system-props pgadmin 65 files transformed, 6 Jinja-templated `.js` files skipped (parse errors, not real JS; no MUI usage in them). 4. One test updated for v9's class-name split. Button's variant+color combo class (`MuiButton-containedPrimary`) is now emitted as two separate classes (`MuiButton-contained` + `MuiButton-colorPrimary`). web/regression/javascript/components/Buttons.spec.js ## Test plan - [x] `yarn install` resolved cleanly - [x] `yarn run test:js-once` -> 140/0/0 suites, 824/0/0 tests - [x] `yarn run linter` -> clean (silent) - [ ] CI matrix (Linux/Mac/Windows) passes - [ ] Visual sweep of main UI surfaces in `yarn start`: login screen, browser tree, query tool, ERD, schema dialogs (table/function/trigger/index), theme switcher (light/dark/high-contrast), file manager, debugger panel, backup/restore dialogs. ## Notes for reviewers The major risk surface for this PR is not API breakage (all caught by jest) but **visual regression**. v9's "sx prop performance" and "deprecated API cleanup" work shifts a few pixels in places — most notably ListItemIcon spacing (which v9 changed from hardcoded `minWidth` to theme spacing). Worth a careful look at menus and toolbars. The other Box-related changes (system props -> sx) preserve behavior 1:1 — they're a pure syntactic migration. `@mui/x-date-pickers`'s legacy `LocalizationProvider` API was removed, but we already use the modern `dateAdapter={AdapterDateFns}` form in `Theme/index.jsx`, so no change needed there.
62 lines
1.4 KiB
React
62 lines
1.4 KiB
React
/////////////////////////////////////////////////////////////
|
|
//
|
|
// pgAdmin 4 - PostgreSQL Tools
|
|
//
|
|
// Copyright (C) 2013 - 2026, The pgAdmin Development Team
|
|
// This software is released under the PostgreSQL Licence
|
|
//
|
|
//////////////////////////////////////////////////////////////
|
|
|
|
import { styled } from '@mui/material/styles';
|
|
import CustomPropTypes from '../custom_prop_types';
|
|
import { Box } from '@mui/material';
|
|
|
|
const StyledBox = styled('div')(({theme})=>({
|
|
backgroundColor: theme.palette.background.default,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
'& .ModalContent-footer': {
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
padding: '0.5rem',
|
|
...theme.mixins.panelBorder?.top,
|
|
gap: '5px',
|
|
'&.ModalContent-iconButtonStyle': {
|
|
marginLeft: 'auto',
|
|
marginRight: '4px'
|
|
},
|
|
},
|
|
}));
|
|
|
|
export function ModalContent(
|
|
{
|
|
ref,
|
|
children,
|
|
...props
|
|
}
|
|
) {
|
|
return (
|
|
<StyledBox style={{height: '100%'}} ref={ref} {...props}>{children}</StyledBox>
|
|
);
|
|
};
|
|
ModalContent.displayName = 'ModalContent';
|
|
ModalContent.propTypes = {
|
|
children: CustomPropTypes.children,
|
|
};
|
|
|
|
|
|
export function ModalFooter({children, classNameRoot, ...props}) {
|
|
return (
|
|
<StyledBox className={[classNameRoot]} {...props}>
|
|
<Box className='ModalContent-footer'>
|
|
{children}
|
|
</Box>
|
|
</StyledBox>
|
|
);
|
|
}
|
|
|
|
ModalFooter.propTypes = {
|
|
children: CustomPropTypes.children,
|
|
classNameRoot: CustomPropTypes.className
|
|
};
|