pgadmin-org
/
pgadmin4
mirror of https://github.com/pgadmin-org/pgadmin4.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Replace Grid with Grid2 as the former is deprecated by MUI

pull/8736/head
Aditya Toshniwal 2025-05-06 19:39:33 +05:30
parent fb4d25d907
commit 27bd28ee97
19 changed files with 113 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/pgadmin/about/static/js/AboutComponent.jsx
View File

@ -10,7 +10,7 @@
import gettext from 'sources/gettext';
import url_for from 'sources/url_for';
import React, { useEffect, useState, useRef } from 'react';
import { Box, Grid, InputLabel } from '@mui/material';
import { Box, Grid2 as Grid, InputLabel } from '@mui/material';
import { InputSQL } from '../../../static/js/components/FormComponents';
import getApiInstance from '../../../static/js/api_instance';
import { usePgAdmin } from '../../../static/js/PgAdminProvider';
@ -34,89 +34,89 @@ export default function AboutComponent() {
return (
<Box sx={{ padding: '16px', height: '100%', display: 'flex',flexDirection: 'column'}} ref={containerRef}>
<Grid container spacing={0} style={{marginBottom: '8px'}}>
<Grid item lg={3} md={3} sm={3} xs={12}>
<Grid size={{ lg: 3, md: 3, sm: 3, xs: 12 }}>
<InputLabel style={{fontWeight: 'bold'}}>{gettext('Version')}</InputLabel>
</Grid>
<Grid item lg={9} md={9} sm={9} xs={12}>
<Grid size={{ lg: 9, md: 9, sm: 9, xs: 12 }}>
<InputLabel>{aboutData.version}</InputLabel>
</Grid>
</Grid>
<Grid container spacing={0} style={{marginBottom: '8px'}}>
<Grid item lg={3} md={3} sm={3} xs={12}>
<Grid size={{ lg: 3, md: 3, sm: 3, xs: 12 }}>
<InputLabel style={{fontWeight: 'bold'}}>{gettext('Application Mode')}</InputLabel>
</Grid>
<Grid item lg={9} md={9} sm={9} xs={12}>
<Grid size={{ lg: 9, md: 9, sm: 9, xs: 12 }}>
<InputLabel>{aboutData.app_mode}</InputLabel>
</Grid>
</Grid>
<Grid container spacing={0} style={{marginBottom: '8px'}}>
<Grid item lg={3} md={3} sm={3} xs={12}>
<Grid size={{ lg: 3, md: 3, sm: 3, xs: 12 }}>
<InputLabel style={{fontWeight: 'bold'}}>{gettext('Commit')}</InputLabel>
</Grid>
<Grid item lg={9} md={9} sm={9} xs={12}>
<Grid size={{ lg: 9, md: 9, sm: 9, xs: 12 }}>
<InputLabel>{aboutData.commit_hash}</InputLabel>
</Grid>
</Grid>
<Grid container spacing={0} style={{marginBottom: '8px'}}>
<Grid item lg={3} md={3} sm={3} xs={12}>
<Grid size={{ lg: 3, md: 3, sm: 3, xs: 12 }}>
<InputLabel style={{fontWeight: 'bold'}}>{gettext('Python Version')}</InputLabel>
</Grid>
<Grid item lg={9} md={9} sm={9} xs={12}>
<Grid size={{ lg: 9, md: 9, sm: 9, xs: 12 }}>
<InputLabel>{aboutData.python_version}</InputLabel>
</Grid>
</Grid>
<Grid container spacing={0} style={{marginBottom: '8px'}}>
<Grid item lg={3} md={3} sm={3} xs={12}>
<Grid size={{ lg: 3, md: 3, sm: 3, xs: 12 }}>
<InputLabel style={{fontWeight: 'bold'}}>{gettext('Current User')}</InputLabel>
</Grid>
<Grid item lg={9} md={9} sm={9} xs={12}>
<Grid size={{ lg: 9, md: 9, sm: 9, xs: 12 }}>
<InputLabel>{aboutData.current_user}</InputLabel>
</Grid>
</Grid>
{ aboutData.electron &&
<Grid container spacing={0} style={{marginBottom: '8px'}}>
<Grid item lg={3} md={3} sm={3} xs={12}>
<Grid size={{ lg: 3, md: 3, sm: 3, xs: 12 }}>
<InputLabel style={{fontWeight: 'bold'}}>{gettext('Electron Version')}</InputLabel>
</Grid>
<Grid item lg={9} md={9} sm={9} xs={12}>
<Grid size={{ lg: 9, md: 9, sm: 9, xs: 12 }}>
<InputLabel>{aboutData.electron}</InputLabel>
</Grid>
</Grid>
}
<Grid container spacing={0} style={{marginBottom: '8px'}}>
<Grid item lg={3} md={3} sm={3} xs={12}>
<Grid size={{ lg: 3, md: 3, sm: 3, xs: 12 }}>
<InputLabel style={{fontWeight: 'bold'}}>{gettext('Browser')}</InputLabel>
</Grid>
<Grid item lg={9} md={9} sm={9} xs={12}>
<Grid size={{ lg: 9, md: 9, sm: 9, xs: 12 }}>
<InputLabel>{aboutData.browser_details}</InputLabel>
</Grid>
</Grid>
{ aboutData.os_details &&
<Grid container spacing={0} style={{marginBottom: '8px'}}>
<Grid item lg={3} md={3} sm={3} xs={12}>
<Grid size={{ lg: 3, md: 3, sm: 3, xs: 12 }}>
<InputLabel style={{fontWeight: 'bold'}}>{gettext('Operating System')}</InputLabel>
</Grid>
<Grid item lg={9} md={9} sm={9} xs={12}>
<Grid size={{ lg: 9, md: 9, sm: 9, xs: 12 }}>
<InputLabel>{aboutData.os_details}</InputLabel>
</Grid>
</Grid>
}
{ aboutData.config_db &&
<Grid container spacing={0} style={{marginBottom: '8px'}}>
<Grid item lg={3} md={3} sm={3} xs={12}>
<Grid size={{ lg: 3, md: 3, sm: 3, xs: 12 }}>
<InputLabel style={{fontWeight: 'bold'}}>{gettext('pgAdmin Database File')}</InputLabel>
</Grid>
<Grid item lg={9} md={9} sm={9} xs={12}>
<Grid size={{ lg: 9, md: 9, sm: 9, xs: 12 }}>
<InputLabel>{aboutData.config_db}</InputLabel>
</Grid>
</Grid>
}
{ aboutData.log_file &&
<Grid container spacing={0} style={{marginBottom: '8px'}}>
<Grid item lg={3} md={3} sm={3} xs={12}>
<Grid size={{ lg: 3, md: 3, sm: 3, xs: 12 }}>
<InputLabel style={{fontWeight: 'bold'}}>{gettext('Log File')}</InputLabel>
</Grid>
<Grid item lg={9} md={9} sm={9} xs={12}>
<Grid size={{ lg: 9, md: 9, sm: 9, xs: 12 }}>
<InputLabel>{aboutData.log_file}</InputLabel>
</Grid>
</Grid>

12
web/pgadmin/dashboard/static/js/Graphs.jsx
View File

@ -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, useTheme } from '@mui/material';
import { Grid2 as Grid, useTheme } from '@mui/material';
import { getChartColor, toPrettySize } from '../../../static/js/utils';
export const X_AXIS_LENGTH = 75;
@ -253,30 +253,30 @@ export function GraphsWrapper(props) {
return (
<>
<Grid container spacing={0.5}>
<Grid item md={6}>
<Grid size={{ md: 6 }}>
<ChartContainer id='sessions-graph' title={props.isDatabase ? gettext('Database sessions') : gettext('Server sessions')}
datasets={props.sessionStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.sessionStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
</ChartContainer>
</Grid>
<Grid item md={6}>
<Grid size={{ md: 6 }}>
<ChartContainer id='tps-graph' title={gettext('Transactions per second')} datasets={props.tpsStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.tpsStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
</ChartContainer>
</Grid>
</Grid>
<Grid container spacing={0.5} style={{marginTop: '4px', marginBottom: '4px'}}>
<Grid item md={4}>
<Grid size={{ md: 4 }}>
<ChartContainer id='ti-graph' title={gettext('Tuples in')} datasets={props.tiStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.tiStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
</ChartContainer>
</Grid>
<Grid item md={4}>
<Grid size={{ md: 4 }}>
<ChartContainer id='to-graph' title={gettext('Tuples out')} datasets={props.toStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.toStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
</ChartContainer>
</Grid>
<Grid item md={4}>
<Grid size={{ md: 4 }}>
<ChartContainer id='bio-graph' title={gettext('Block I/O')} datasets={props.bioStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.bioStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
</ChartContainer>

6
web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx
View File

@ -7,7 +7,7 @@
//
//////////////////////////////////////////////////////////////
import { Box, Grid, useTheme } from '@mui/material';
import { Box, Grid2 as Grid, useTheme } from '@mui/material';
import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react';
import gettext from 'sources/gettext';
@ -406,14 +406,14 @@ export default function PGDReplication({preferences, treeNodeInfo, pageVisible,
return (
<Box height="100%" display="flex" flexDirection="column">
<Grid container spacing={0.5}>
<Grid item md={6}>
<Grid size={{ md: 6 }}>
<ChartContainer id='sessions-graph' title={gettext('Replication lag (Time)')}
datasets={replicationLagTimeData.datasets} errorMsg={errorMsg} isTest={props.isTest}>
<StreamingChart data={replicationLagTimeData} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
valueFormatter={(v)=>toPrettySize(v, 's')} />
</ChartContainer>
</Grid>
<Grid item md={6}>
<Grid size={{ md: 6 }}>
<ChartContainer id='tps-graph' title={gettext('Replication lag (Size)')} datasets={replicationLagBytesData.datasets} errorMsg={errorMsg} isTest={props.isTest}>
<StreamingChart data={replicationLagBytesData} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
valueFormatter={toPrettySize} />

11
web/pgadmin/dashboard/static/js/SystemStats/CpuDetails.jsx
View File

@ -6,14 +6,14 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
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 {getGCD, getEpoch} from 'sources/utils';
import ChartContainer from '../components/ChartContainer.jsx';
import { Box, Grid } from '@mui/material';
import { Box, Grid2 as Grid } from '@mui/material';
import { DATA_POINT_SIZE } from 'sources/chartjs';
import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart.jsx';
import {useInterval, usePrevious} from 'sources/custom_hooks';
@ -217,14 +217,14 @@ export function CPUWrapper(props) {
lineBorderWidth: props.lineBorderWidth,
}), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
return (
(<Box display="flex" flexDirection="column" height="100%">
<Box display="flex" flexDirection="column" height="100%">
<Grid container spacing={0.5} sx={{marginBottom: '4px'}}>
<Grid item md={6}>
<Grid size={{ md: 6 }}>
<ChartContainer id='cu-graph' title={gettext('CPU usage')} datasets={props.cpuUsageInfo.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.cpuUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
</ChartContainer>
</Grid>
<Grid item md={6} >
<Grid size={{ md: 6 }}>
<ChartContainer id='la-graph' title={gettext('Load average')} datasets={props.loadAvgInfo.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.loadAvgInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
</ChartContainer>
@ -243,7 +243,6 @@ export function CPUWrapper(props) {
</SectionContainer>
</Box>
</Box>
)
);
}

56
web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
View File

@ -12,7 +12,7 @@ import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import {getGCD, getEpoch} from 'sources/utils';
import ChartContainer from '../components/ChartContainer';
import { Box, Grid } from '@mui/material';
import { Box, Grid2 as 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';
@ -222,36 +222,34 @@ export function MemoryWrapper(props) {
}), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
return (
(
<Box display="flex" flexDirection="column" height="100%">
<Grid container spacing={0.5} sx={{marginBottom: '4px'}}>
<Grid item md={6}>
<ChartContainer id='m-graph' title={gettext('Memory')} datasets={props.memoryUsageInfo.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.memoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
valueFormatter={toPrettySize}/>
</ChartContainer>
</Grid>
<Grid item md={6}>
<ChartContainer id='sm-graph' title={gettext('Swap memory')} datasets={props.swapMemoryUsageInfo.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.swapMemoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
valueFormatter={toPrettySize}/>
</ChartContainer>
</Grid>
<Box display="flex" flexDirection="column" height="100%">
<Grid container spacing={0.5} sx={{marginBottom: '4px'}}>
<Grid size={{ md: 6 }}>
<ChartContainer id='m-graph' title={gettext('Memory')} datasets={props.memoryUsageInfo.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.memoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
valueFormatter={toPrettySize}/>
</ChartContainer>
</Grid>
<Box flexGrow={1} minHeight={0}>
<SectionContainer title={gettext('Process memory usage')}>
<PgTable
columns={props.tableHeader}
data={props.processMemoryUsageStats}
msg={props.errorMsg}
type={'panel'}
caveTable={false}
tableNoBorder={false}
></PgTable>
</SectionContainer>
</Box>
<Grid size={{ md: 6 }}>
<ChartContainer id='sm-graph' title={gettext('Swap memory')} datasets={props.swapMemoryUsageInfo.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.swapMemoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
valueFormatter={toPrettySize}/>
</ChartContainer>
</Grid>
</Grid>
<Box flexGrow={1} minHeight={0}>
<SectionContainer title={gettext('Process memory usage')}>
<PgTable
columns={props.tableHeader}
data={props.processMemoryUsageStats}
msg={props.errorMsg}
type={'panel'}
caveTable={false}
tableNoBorder={false}
></PgTable>
</SectionContainer>
</Box>
)
</Box>
);
}

8
web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
View File

@ -13,7 +13,7 @@ import PropTypes from 'prop-types';
import url_for from 'sources/url_for';
import {getGCD, getEpoch} from 'sources/utils';
import ChartContainer from '../components/ChartContainer';
import { Grid } from '@mui/material';
import { Grid2 as 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';
@ -424,7 +424,7 @@ export function StorageWrapper(props) {
<DiskStatsTable tableHeader={props.tableHeader} data={props.diskStats} />
</div>
<Grid container spacing={0.5} sx={{marginBottom: '4px'}}>
<Grid item md={6} sm={12}>
<Grid size={{ md: 6, sm: 12 }}>
<ChartContainer
id='t-space-graph'
title={''}
@ -450,7 +450,7 @@ export function StorageWrapper(props) {
/>
</ChartContainer>
</Grid>
<Grid item md={6} sm={12}>
<Grid size={{ md: 6, sm: 12 }}>
<ChartContainer id='ua-space-graph' title={''} datasets={[{borderColor: '#FF6384', label: 'Used space'}, {borderColor: '#36a2eb', label: 'Available space'}]} errorMsg={props.errorMsg} isTest={props.isTest}>
<BarChart data={{
labels: props.diskStats.map((item, index) => getLabel(item, index)),
@ -502,7 +502,7 @@ export function StorageWrapper(props) {
<SectionContainer key={drive} title={drive} style={{minHeight: 'unset', height: 'auto', marginBottom: '0.5px'}}>
<Grid container spacing={0.5} p={0.5}>
{Object.keys(props.ioInfo[drive]).map((type, innerKeyIndex) => (
<Grid key={`${type}-${innerKeyIndex}`} item md={4} sm={6}>
<Grid key={`${type}-${innerKeyIndex}`} size={{ md: 4, sm: 6 }}>
<ChartContainer id={`io-graph-${type}`} title={getChartContainerTitle(type)} datasets={transformData(props.ioInfo[drive][type], props.ioRefreshRate).datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={transformData(props.ioInfo[drive][type], props.ioRefreshRate)} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
valueFormatter={(v)=>{

10
web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx
View File

@ -14,7 +14,7 @@ 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 '@mui/material';
import { Grid2 as 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';
@ -250,26 +250,26 @@ function SummaryWrapper(props) {
return (
<>
<Grid container spacing={0.5} sx={{height: 'auto', padding: '0px !important', marginBottom: '4px'}}>
<Grid item md={6}>
<Grid size={{ md: 6 }}>
<div className='Summary-tableContainer'>
<div className='Summary-containerHeader'>{gettext('OS information')}</div>
<SummaryTable data={props.osStats} />
</div>
</Grid>
<Grid item md={6} sx={{padding: '4px'}}>
<Grid sx={{padding: '4px'}} size={{ md: 6 }}>
<ChartContainer id='hpc-graph' title={gettext('Process & handle count')} datasets={props.processHandleCount.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.processHandleCount} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} showSecondAxis={true} />
</ChartContainer>
</Grid>
</Grid>
<Grid container spacing={0.5} sx={{height: 'auto', padding: '0px !important', marginBottom: '4px'}}>
<Grid item md={6}>
<Grid size={{ md: 6 }}>
<div className='Summary-tableContainer'>
<div className='Summary-containerHeader'>{gettext('CPU information')}</div>
<SummaryTable data={props.cpuStats} />
</div>
</Grid>
<Grid item md={6} sm={12}>
<Grid size={{ md: 6, sm: 12 }}>
</Grid>
</Grid>
</>

6
web/pgadmin/static/js/Explain/ExplainStatistics.jsx
View File

@ -8,7 +8,7 @@
//////////////////////////////////////////////////////////////
import React from 'react';
import { styled } from '@mui/material/styles';
import { Box, Grid } from '@mui/material';
import { Box, Grid2 as Grid } from '@mui/material';
import gettext from 'sources/gettext';
import _ from 'lodash';
import PropTypes from 'prop-types';
@ -40,7 +40,7 @@ export default function ExplainStatistics({explainTable}) {
return (
<StyledBox p={1}>
<Grid container spacing={1}>
<Grid item lg={6} md={12}>
<Grid size={{ lg: 6, md: 12 }}>
<div className='ExplainStatistics-title'>{gettext('Statistics per Node Type')}</div>
<Table >
<thead>
@ -68,7 +68,7 @@ export default function ExplainStatistics({explainTable}) {
</tbody>
</Table>
</Grid>
<Grid item lg={6} md={12}>
<Grid size={{ lg: 6, md: 12 }}>
<div className='ExplainStatistics-title'>{gettext('Statistics per Relation')}</div>
<Table>
<thead>

2
web/pgadmin/static/js/SchemaView/InlineView.jsx
View File

@ -8,7 +8,7 @@
//////////////////////////////////////////////////////////////
import React, { useContext } from 'react';
import { Grid } from '@mui/material';
import { Grid2 as Grid } from '@mui/material';
import _ from 'lodash';
import PropTypes from 'prop-types';

12
web/pgadmin/static/js/components/FormComponents.jsx
View File

@ -12,7 +12,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
import { styled } from '@mui/material/styles';
import {
Box, FormControl, OutlinedInput, FormHelperText, ToggleButton, ToggleButtonGroup,
Grid, IconButton, FormControlLabel, Switch, Checkbox, useTheme, InputLabel, Paper, Select as MuiSelect, Radio, Tooltip,
Grid2 as Grid, IconButton, FormControlLabel, Switch, Checkbox, useTheme, InputLabel, Paper, Select as MuiSelect, Radio, Tooltip,
} from '@mui/material';
import ErrorRoundedIcon from '@mui/icons-material/ErrorOutlineRounded';
import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
@ -128,13 +128,13 @@ export function FormInput({ children, error, className, label, helpMessage, requ
if(!withContainer) {
return (
(<>
<StyledGrid item lg={labelGridBasis} md={labelGridBasis} sm={12} xs={12}>
<StyledGrid size={{ lg: labelGridBasis, md: labelGridBasis, sm: 12, xs: 12}}>
<InputLabel id={lid} htmlFor={lid ? undefined : cid} className={'Form-label ' + (error ? 'Form-labelError' : null)} required={required}>
{label}
<FormIcon type={MESSAGE_TYPE.ERROR} style={{ marginLeft: 'auto', visibility: error ? 'unset' : 'hidden' }} />
</InputLabel>
</StyledGrid>
<StyledGrid item lg={controlGridBasis} md={controlGridBasis} sm={12} xs={12}>
<StyledGrid size={{ lg: controlGridBasis, md: controlGridBasis, sm: 12, xs: 12}}>
<FormControl error={Boolean(error)} fullWidth>
{React.cloneElement(children, { cid, helpid })}
</FormControl>
@ -150,7 +150,7 @@ export function FormInput({ children, error, className, label, helpMessage, requ
</InputLabel>;
return (
<StyledGrid container spacing={0} className={className} data-testid="form-input">
<Grid item lg={labelGridBasis} md={labelGridBasis} sm={12} xs={12}>
<Grid size={{ lg: labelGridBasis, md: labelGridBasis, sm: 12, xs: 12 }}>
{
labelTooltip ?
<Tooltip title={labelTooltip}>
@ -158,7 +158,7 @@ export function FormInput({ children, error, className, label, helpMessage, requ
</Tooltip> : labelComponent
}
</Grid>
<Grid item lg={controlGridBasis} md={controlGridBasis} sm={12} xs={12}>
<Grid size={{ lg: controlGridBasis, md: controlGridBasis, sm: 12, xs: 12 }}>
<FormControl error={Boolean(error)} fullWidth>
{React.cloneElement(children, { cid, helpid })}
</FormControl>
@ -392,7 +392,7 @@ export const InputText = forwardRef(({
const filteredProps = _.pickBy(props, (_v, key)=>(
/* When used in ButtonGroup, following props should be skipped */
!['color', 'disableElevation', 'disableFocusRipple', 'disableRipple'].includes(key)
(!['color', 'disableElevation', 'disableFocusRipple', 'disableRipple'].includes(key))
));
return (

12
web/pgadmin/static/js/components/QueryThresholds.jsx
View File

@ -9,7 +9,7 @@
import gettext from 'sources/gettext';
import _ from 'lodash';
import { FormGroup, Grid, Typography } from '@mui/material';
import { FormGroup, Grid2 as Grid, Typography } from '@mui/material';
import React from 'react';
import { InputText } from './FormComponents';
import PropTypes from 'prop-types';
@ -40,19 +40,19 @@ export default function QueryThresholds({ value, onChange }) {
direction="row"
alignItems="center"
>
<Grid item lg={2} md={2} sm={2} xs={12}>
<Grid size={{ lg: 2, md: 2, sm: 2, xs: 12 }}>
<Typography>{gettext('Warning')}</Typography>
</Grid>
<Grid item lg={2} md={2} sm={2} xs={12}>
<Grid size={{ lg: 2, md: 2, sm: 2, xs: 12 }}>
<InputText cid={warningCid} helpid={warninghelpid} type='numeric' value={value?.warning} onChange={onWarningChange} />
</Grid>
<Grid item lg={2} md={2} sm={2} xs={12} sx={{ textAlign: 'center' }}>
<Grid sx={{ textAlign: 'center' }} size={{ lg: 2, md: 2, sm: 2, xs: 12 }}>
<Typography>{gettext('Alert')}</Typography>
</Grid>
<Grid item lg={2} md={2} sm={2} xs={12}>
<Grid size={{ lg: 2, md: 2, sm: 2, xs: 12 }}>
<InputText cid={alertCid} helpid={alerthelpid} type='numeric' value={value?.alert} onChange={onAlertChange} />
</Grid>
<Grid item lg={4} md={4} sm={4} xs={12} sx={{paddingLeft: 10 }}>
<Grid sx={{paddingLeft: 10 }} size={{ lg: 4, md: 4, sm: 4, xs: 12 }}>
<Typography>{gettext('(in minutes)')}</Typography>
</Grid>
</Grid>

4
web/pgadmin/static/js/components/ReactCodeMirror/extensions/breakpointGutter.js
View File

@ -45,9 +45,9 @@ export function clearBreakpoints(view) {
});
}
const breakpointMarker = new class extends GutterMarker {
const breakpointMarker = new (class extends GutterMarker {
toDOM() { return document.createTextNode('●'); }
};
});
const breakpointGutter = [
breakpointField,

6
web/pgadmin/static/js/components/SelectThemes.jsx
View File

@ -8,7 +8,7 @@
//////////////////////////////////////////////////////////////
import gettext from 'sources/gettext';
import { Grid, FormHelperText } from '@mui/material';
import { Grid2 as Grid, FormHelperText } from '@mui/material';
import React, { useMemo } from 'react';
import {InputSelect } from './FormComponents';
import PropTypes from 'prop-types';
@ -23,10 +23,10 @@ export default function SelectThemes({onChange, helpMessage, ...props}) {
const helpid = `h${cid}`;
return (
<Grid container direction="column" spacing={0.5}>
<Grid item lg={12} md={12} sm={12} xs={12}>
<Grid size={{ lg: 12, md: 12, sm: 12, xs: 12 }}>
<InputSelect ref={props.inputRef} onChange={onChange} {...props} />
</Grid>
<Grid item lg={12} md={12} sm={12} xs={12} sx={{paddingTop: 10}}>
<Grid sx={{paddingTop: 10}} size={{ lg: 12, md: 12, sm: 12, xs: 12 }}>
{ previewSrc && <>
<FormHelperText id={helpid} variant="outlined">{HTMLReactParse(helpMessage || '')}</FormHelperText>
<img className='img-fluid mx-auto d-block border' src={previewSrc} alt={gettext('Preview not available...')} />

2
web/pgadmin/static/js/helpers/Layout/index.jsx
View File

@ -247,7 +247,7 @@ export class LayoutDocker {
if(child.children) {
flattenLayout(child, arr);
} else {
arr.push(...child.tabs??[]);
arr.push(...(child.tabs ?? []));
}
});
};

2
web/pgadmin/static/js/helpers/Menu.js
View File

@ -176,7 +176,7 @@ export class MenuItem {
name: label,
disabled: is_disabled,
callback: self.callback.bind(self),
...(sub_ctx_item && Object.keys(sub_ctx_item).length > 0) && { items: sub_ctx_item }
...((sub_ctx_item && Object.keys(sub_ctx_item).length > 0) && { items: sub_ctx_item })
};
}

10
web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx
View File

@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
import React, { useContext, useState, useEffect } from 'react';
import { Box, Grid, Typography } from '@mui/material';
import { Box, Grid2 as Grid, Typography } from '@mui/material';
import { InputSelect } from '../../../../../static/js/components/FormComponents';
import { SchemaDiffEventsContext } from './SchemaDiffComponent';
@ -68,10 +68,10 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
direction="row"
alignItems="center"
>
<Grid item lg={2} md={2} sm={2} xs={2} sx={{padding: '0.3rem'}}>
<Grid sx={{padding: '0.3rem'}} size={{ lg: 2, md: 2, sm: 2, xs: 2 }}>
<Typography id={label}>{label}</Typography>
</Grid>
<Grid item lg={4} md={4} sm={4} xs={4} sx={{padding: '0.3rem'}}>
<Grid sx={{padding: '0.3rem'}} size={{ lg: 4, md: 4, sm: 4, xs: 4 }}>
<InputSelect
options={serverList}
optionsReloadBasis={serverList?.length}
@ -86,7 +86,7 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
></InputSelect>
</Grid>
<Grid item lg={3} md={3} sm={3} xs={3} sx={{padding: '0.3rem'}}>
<Grid sx={{padding: '0.3rem'}} size={{ lg: 3, md: 3, sm: 3, xs: 3 }}>
<InputSelect
options={databaseList}
optionsReloadBasis={databaseList?.map ? _.join(databaseList.map((c)=>c.value), ',') : null}
@ -102,7 +102,7 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
></InputSelect>
</Grid>
<Grid item lg={3} md={3} sm={3} xs={3} sx={{padding: '0.3rem'}}>
<Grid sx={{padding: '0.3rem'}} size={{ lg: 3, md: 3, sm: 3, xs: 3 }}>
<InputSelect
options={schemaList}
optionsReloadBasis={schemaList?.map ? _.join(schemaList.map((c)=>c.value), ',') : null}

10
web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx
View File

@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
import React, { useContext, useEffect, useState } from 'react';
import { Box, Grid } from '@mui/material';
import { Box, Grid2 as Grid } from '@mui/material';
import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
import HelpIcon from '@mui/icons-material/HelpRounded';
@ -693,7 +693,7 @@ export function SchemaDiffCompare({ params }) {
direction="row"
alignItems="center"
>
<Grid item lg={7} md={7} sm={10} xs={10}>
<Grid size={{ lg: 7, md: 7, sm: 10, xs: 10 }}>
<InputComponent
label={gettext('Select Source')}
serverList={sourceGroupServerList}
@ -706,7 +706,7 @@ export function SchemaDiffCompare({ params }) {
onServerSchemaChange={handleServerSchemaChange}
></InputComponent>
</Grid>
<Grid item lg={5} md={5} sm={2} xs={2} sx={{ display: 'flex',flexDirection: 'row-reverse',paddingRight: '0.3rem'}}>
<Grid sx={{ display: 'flex',flexDirection: 'row-reverse',paddingRight: '0.3rem'}} size={{ lg: 5, md: 5, sm: 2, xs: 2 }}>
<PgButtonGroup size="small">
<PgIconButton data-test='schema-diff-help' title={gettext('Help')} icon={<HelpIcon />} onClick={onHelpClick} />
</PgButtonGroup>
@ -717,7 +717,7 @@ export function SchemaDiffCompare({ params }) {
direction="row"
alignItems="center"
>
<Grid item lg={7} md={7} sm={10} xs={10}>
<Grid size={{ lg: 7, md: 7, sm: 10, xs: 10 }}>
<InputComponent
label={gettext('Select Target')}
serverList={sourceGroupServerList}
@ -731,7 +731,7 @@ export function SchemaDiffCompare({ params }) {
></InputComponent>
</Grid>
<Grid item lg={5} md={5} sm={12} xs={12}>
<Grid size={{ lg: 5, md: 5, sm: 12, xs: 12 }}>
<SchemaDiffButtonComponent
sourceData={{
'sid': selectedSourceSid,

4
web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
View File

@ -71,9 +71,9 @@ const StyledPgReactDataGrid = styled(PgReactDataGrid)(({stripedRows, theme})=>({
backgroundColor: theme.palette.primary.light + '!important',
}
},
... stripedRows && {'& .rdg-row.rdg-row-even': {
... (stripedRows && {'& .rdg-row.rdg-row-even': {
backgroundColor: theme.palette.grey[400],
}},
}}),
'& .rdg-row': {
'& .rdg-cell:nth-of-type(1)': {
backgroundColor: theme.palette.grey[600] + '!important',

14
web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
View File

@ -4,7 +4,7 @@ import { PANELS, QUERY_TOOL_EVENTS, MAX_QUERY_LENGTH } from '../QueryToolConstan
import gettext from 'sources/gettext';
import pgAdmin from 'sources/pgadmin';
import _ from 'lodash';
import { Box, Grid, List, ListItem, ListItemButton, ListSubheader } from '@mui/material';
import { Box, Grid2 as Grid, List, ListItem, ListItemButton, ListSubheader } from '@mui/material';
import url_for from 'sources/url_for';
import { QueryToolConnectionContext, QueryToolContext, QueryToolEventsContext } from '../QueryToolComponent';
import moment from 'moment';
@ -328,14 +328,14 @@ function QueryHistoryDetails({entry}) {
{entry.info && <Box className='QuerySources-infoHeader'>{entry.info}</Box>}
<Box padding="0.5rem" data-label="history-detail">
<Grid container>
<Grid item sm={4}>{getDateFormatted(entry.start_time) + ' ' + getTimeFormatted(entry.start_time)}</Grid>
<Grid item sm={4}>{entry?.row_affected > 0 && entry.row_affected}</Grid>
<Grid item sm={4}>{entry.total_time}</Grid>
<Grid size={{ sm: 4 }}>{getDateFormatted(entry.start_time) + ' ' + getTimeFormatted(entry.start_time)}</Grid>
<Grid size={{ sm: 4 }}>{entry?.row_affected > 0 && entry.row_affected}</Grid>
<Grid size={{ sm: 4 }}>{entry.total_time}</Grid>
</Grid>
<Grid container>
<Grid item sm={4}>{gettext('Date')}</Grid>
<Grid item sm={4}>{gettext('Rows affected')}</Grid>
<Grid item sm={4}>{gettext('Duration')}</Grid>
<Grid size={{ sm: 4 }}>{gettext('Date')}</Grid>
<Grid size={{ sm: 4 }}>{gettext('Rows affected')}</Grid>
<Grid size={{ sm: 4 }}>{gettext('Duration')}</Grid>
</Grid>
<Box className='QuerySources-detailsQuery'>
<DefaultButton size="xs" className='QuerySources-copyBtn' onClick={onCopyClick}>{copyText}</DefaultButton>