From 27bd28ee97fac7b4d3e8f3298462bb79201e8d11 Mon Sep 17 00:00:00 2001
From: Aditya Toshniwal <aditya.toshniwal@enterprisedb.com>
Date: Tue, 6 May 2025 19:39:33 +0530
Subject: [PATCH] Replace Grid with Grid2 as the former is deprecated by MUI

---
 .../about/static/js/AboutComponent.jsx        | 42 +++++++-------
 web/pgadmin/dashboard/static/js/Graphs.jsx    | 12 ++--
 .../static/js/Replication/PGDReplication.jsx  |  6 +-
 .../static/js/SystemStats/CpuDetails.jsx      | 11 ++--
 .../static/js/SystemStats/Memory.jsx          | 56 +++++++++----------
 .../static/js/SystemStats/Storage.jsx         |  8 +--
 .../static/js/SystemStats/Summary.jsx         | 10 ++--
 .../static/js/Explain/ExplainStatistics.jsx   |  6 +-
 .../static/js/SchemaView/InlineView.jsx       |  2 +-
 .../static/js/components/FormComponents.jsx   | 12 ++--
 .../static/js/components/QueryThresholds.jsx  | 12 ++--
 .../extensions/breakpointGutter.js            |  4 +-
 .../static/js/components/SelectThemes.jsx     |  6 +-
 .../static/js/helpers/Layout/index.jsx        |  2 +-
 web/pgadmin/static/js/helpers/Menu.js         |  2 +-
 .../static/js/components/InputComponent.jsx   | 10 ++--
 .../js/components/SchemaDiffCompare.jsx       | 10 ++--
 .../js/components/QueryToolDataGrid/index.jsx |  4 +-
 .../js/components/sections/QueryHistory.jsx   | 14 ++---
 19 files changed, 113 insertions(+), 116 deletions(-)

diff --git a/web/pgadmin/about/static/js/AboutComponent.jsx b/web/pgadmin/about/static/js/AboutComponent.jsx
index cc69e1aca..5068ee214 100644
--- a/web/pgadmin/about/static/js/AboutComponent.jsx
+++ b/web/pgadmin/about/static/js/AboutComponent.jsx
@@ -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>
diff --git a/web/pgadmin/dashboard/static/js/Graphs.jsx b/web/pgadmin/dashboard/static/js/Graphs.jsx
index 882f18680..858d1632e 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, 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>
diff --git a/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx b/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx
index c5f229cc3..bc613e146 100644
--- a/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx
+++ b/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx
@@ -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} />
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/CpuDetails.jsx b/web/pgadmin/dashboard/static/js/SystemStats/CpuDetails.jsx
index 04d05e4b4..078fb3c8c 100644
--- a/web/pgadmin/dashboard/static/js/SystemStats/CpuDetails.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/CpuDetails.jsx
@@ -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>
-    )
   );
 }
 
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
index e501dbb67..3f9846519 100644
--- a/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
@@ -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>
   );
 }
 
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
index f37693a82..d08fbafe3 100644
--- a/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
@@ -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)=>{
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx
index 5036553bd..45fa142db 100644
--- a/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx
@@ -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>
     </>
diff --git a/web/pgadmin/static/js/Explain/ExplainStatistics.jsx b/web/pgadmin/static/js/Explain/ExplainStatistics.jsx
index 735b7a839..4b236cacc 100644
--- a/web/pgadmin/static/js/Explain/ExplainStatistics.jsx
+++ b/web/pgadmin/static/js/Explain/ExplainStatistics.jsx
@@ -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>
diff --git a/web/pgadmin/static/js/SchemaView/InlineView.jsx b/web/pgadmin/static/js/SchemaView/InlineView.jsx
index 5d3a53206..5f6b65110 100644
--- a/web/pgadmin/static/js/SchemaView/InlineView.jsx
+++ b/web/pgadmin/static/js/SchemaView/InlineView.jsx
@@ -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';
 
diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx
index 8cafba53d..0bd337e71 100644
--- a/web/pgadmin/static/js/components/FormComponents.jsx
+++ b/web/pgadmin/static/js/components/FormComponents.jsx
@@ -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 (
diff --git a/web/pgadmin/static/js/components/QueryThresholds.jsx b/web/pgadmin/static/js/components/QueryThresholds.jsx
index f6fd85b13..341fc15cb 100644
--- a/web/pgadmin/static/js/components/QueryThresholds.jsx
+++ b/web/pgadmin/static/js/components/QueryThresholds.jsx
@@ -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>
diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/extensions/breakpointGutter.js b/web/pgadmin/static/js/components/ReactCodeMirror/extensions/breakpointGutter.js
index 030cc06e4..62cab0020 100644
--- a/web/pgadmin/static/js/components/ReactCodeMirror/extensions/breakpointGutter.js
+++ b/web/pgadmin/static/js/components/ReactCodeMirror/extensions/breakpointGutter.js
@@ -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,
diff --git a/web/pgadmin/static/js/components/SelectThemes.jsx b/web/pgadmin/static/js/components/SelectThemes.jsx
index d73430d29..53574cb66 100644
--- a/web/pgadmin/static/js/components/SelectThemes.jsx
+++ b/web/pgadmin/static/js/components/SelectThemes.jsx
@@ -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...')} />
diff --git a/web/pgadmin/static/js/helpers/Layout/index.jsx b/web/pgadmin/static/js/helpers/Layout/index.jsx
index c91d76a90..eec050b2b 100644
--- a/web/pgadmin/static/js/helpers/Layout/index.jsx
+++ b/web/pgadmin/static/js/helpers/Layout/index.jsx
@@ -247,7 +247,7 @@ export class LayoutDocker {
         if(child.children) {
           flattenLayout(child, arr);
         } else {
-          arr.push(...child.tabs??[]);
+          arr.push(...(child.tabs ?? []));
         }
       });
     };
diff --git a/web/pgadmin/static/js/helpers/Menu.js b/web/pgadmin/static/js/helpers/Menu.js
index 6f5a57a29..6c7cd2566 100644
--- a/web/pgadmin/static/js/helpers/Menu.js
+++ b/web/pgadmin/static/js/helpers/Menu.js
@@ -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 })
     };
   }
 
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx b/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx
index a98e175c8..c23857b42 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx
@@ -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}
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx
index 00f9fc0f1..777d33186 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx
@@ -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,
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
index b2d680d42..a5f284229 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
@@ -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',
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
index 6a51f09ed..6be6e6a4a 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
@@ -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>