Remove the usage of MUI makeStyles as it doesn't support React 18. #7363

2025-02-25 18:55:31 -06:00 · 2024-06-06 17:13:12 +05:30
parent f66bd4bcfb
commit cc999ae5a5
129 changed files with 3129 additions and 4066 deletions
--- a/web/pgadmin/dashboard/static/js/Dashboard.jsx
+++ b/web/pgadmin/dashboard/static/js/Dashboard.jsx
@@ -7,12 +7,12 @@
 //
 //////////////////////////////////////////////////////////////
 import React, { useEffect, useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
 import getApiInstance from 'sources/api_instance';
 import PgTable from 'sources/components/PgTable';
 import { InputCheckbox } from '../../../static/js/components/FormComponents';
-import { makeStyles } from '@mui/styles';
 import url_for from 'sources/url_for';
 import Graphs from './Graphs';
 import { Box, Tab, Tabs } from '@mui/material';
@@ -48,88 +48,39 @@ function parseData(data) {
  return res;
 }

-const useStyles = makeStyles((theme) => ({
-  emptyPanel: {
+const Root = styled('div')(({theme}) => ({
+  height: '100%',
+  width: '100%',
+  '& .Dashboard-dashboardPanel': {
+    height: '100%',
+    background: theme.palette.grey[400],
+    '& .Dashboard-panelContent': {
+      ...theme.mixins.panelBorder.all,
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden !important',
+      height: '100%',
+      width: '100%',
+      minHeight: '400px',
+      padding: '4px',
+      '& .Dashboard-mainTabs': {
+        ...theme.mixins.panelBorder.all,
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        '& .Dashboard-terminateButton': {
+          color: theme.palette.error.main
+        },
+      },
+    },
+  },
+  '& .Dashboard-emptyPanel': {
    width: '100%',
    background: theme.otherVars.emptySpaceBg,
    overflow: 'auto',
    padding: '8px',
    display: 'flex',
  },
-  dashboardPanel: {
-    height: '100%',
-    background: theme.palette.grey[400],
-  },
-  cardHeader: {
-    padding: '0.25rem 0.5rem',
-    fontWeight: 'bold !important',
-    backgroundColor: theme.otherVars.tableBg,
-    borderBottom: '1px solid',
-    borderBottomColor: theme.otherVars.borderColor,
-  },
-  searchPadding: {
-    display: 'flex',
-    flex: 2.5,
-  },
-  component: {
-    padding: '8px',
-  },
-  searchInput: {
-    flex: 1,
-  },
-  panelIcon: {
-    width: '80%',
-    margin: '0 auto',
-    marginTop: '25px !important',
-    position: 'relative',
-    textAlign: 'center',
-  },
-  panelMessage: {
-    marginLeft: '0.5rem',
-    fontSize: '0.875rem',
-  },
-  panelContent: {
-    ...theme.mixins.panelBorder.all,
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden !important',
-    height: '100%',
-    width: '100%',
-    minHeight: '400px',
-    padding: '4px'
-  },
-  mainTabs: {
-    ...theme.mixins.panelBorder.all,
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  terminateButton: {
-    color: theme.palette.error.main
-  },
-  chartCard: {
-    border: '1px solid '+theme.otherVars.borderColor,
-  },
-  chartCardContent: {
-    padding: '0.25rem 0.5rem',
-    height: '165px',
-    display: 'flex',
-  },
-  chartLegend: {
-    marginLeft: 'auto',
-    '& > div': {
-      display: 'flex',
-      fontWeight: 'normal',
-      flexWrap: 'wrap',
-
-      '& .legend-value': {
-        marginLeft: '4px',
-        '& .legend-label': {
-          marginLeft: '4px',
-        }
-      }
-    }
-  }
 }));

 let activeQSchemaObj = new ActiveQuery();
@@ -138,7 +89,7 @@ function Dashboard({
  nodeItem, nodeData, node, treeNodeInfo,
  ...props
 }) {
-  const classes = useStyles();
+
  let tabs = [gettext('Sessions'), gettext('Locks'), gettext('Prepared Transactions')];
  let mainTabs = [gettext('General'), gettext('System Statistics')];
  if(treeNodeInfo?.server?.replication_type) {
@@ -261,7 +212,7 @@ function Dashboard({
            size="xs"
            noBorder
            icon={<CancelIcon />}
-            className={classes.terminateButton}
+            className='Dashboard-terminateButton'
            onClick={() => {
              if (
                !canTakeAction(row, 'terminate')
@@ -796,8 +747,8 @@ function Dashboard({
  const showDefaultContents = () => {
    return (
      sid && !serverConnected ? (
-        <Box className={classes.dashboardPanel}>
-          <div className={classes.emptyPanel}>
+        <Box className='Dashboard-dashboardPanel'>
+          <div className='Dashboard-emptyPanel'>
            <EmptyPanelMessage text={msg}/>
          </div>
        </Box>
@@ -823,7 +774,7 @@ function Dashboard({
      <InputCheckbox
        label={gettext('Active sessions only')}
        labelPlacement="end"
-        className={classes.searchInput}
+        className='Dashboard-searchInput'
        onChange={(e) => {
          e.preventDefault();
          setActiveOnly(e.target.checked);
@@ -834,11 +785,11 @@ function Dashboard({
  };

  return (
-    <>
+    (<Root>
      {sid && serverConnected ? (
-        <Box className={classes.dashboardPanel}>
-          <Box className={classes.panelContent}>
-            <Box className={classes.mainTabs}>
+        <Box className='Dashboard-dashboardPanel'>
+          <Box className='Dashboard-panelContent'>
+            <Box className='Dashboard-mainTabs'>
              <Box>
                <Tabs
                  value={mainTabVal}
@@ -850,7 +801,7 @@ function Dashboard({
                </Tabs>
              </Box>
              {/* General Statistics */}
-              <TabPanel value={mainTabVal} index={0} classNameRoot={classes.tabPanel}>
+              <TabPanel value={mainTabVal} index={0}>
                {!_.isUndefined(preferences) && preferences.show_graphs && (
                  <Graphs
                    key={sid + did}
@@ -876,7 +827,7 @@ function Dashboard({
                        }}/>
                      </Tabs>
                    </Box>
-                    <TabPanel value={tabVal} index={0} classNameRoot={classes.tabPanel}>
+                    <TabPanel value={tabVal} index={0}>
                      <PgTable
                        caveTable={false}
                        tableNoBorder={false}
@@ -886,7 +837,7 @@ function Dashboard({
                        schema={activeQSchemaObj}
                      ></PgTable>
                    </TabPanel>
-                    <TabPanel value={tabVal} index={1} classNameRoot={classes.tabPanel}>
+                    <TabPanel value={tabVal} index={1}>
                      <PgTable
                        caveTable={false}
                        tableNoBorder={false}
@@ -894,7 +845,7 @@ function Dashboard({
                        data={dashData}
                      ></PgTable>
                    </TabPanel>
-                    <TabPanel value={tabVal} index={2} classNameRoot={classes.tabPanel}>
+                    <TabPanel value={tabVal} index={2}>
                      <PgTable
                        caveTable={false}
                        tableNoBorder={false}
@@ -902,7 +853,7 @@ function Dashboard({
                        data={dashData}
                      ></PgTable>
                    </TabPanel>
-                    <TabPanel value={tabVal} index={3} classNameRoot={classes.tabPanel}>
+                    <TabPanel value={tabVal} index={3}>
                      <PgTable
                        caveTable={false}
                        tableNoBorder={false}
@@ -914,7 +865,7 @@ function Dashboard({
                )}
              </TabPanel>
              {/* System Statistics */}
-              <TabPanel value={mainTabVal} index={1} classNameRoot={classes.tabPanel}>
+              <TabPanel value={mainTabVal} index={1} classNameRoot='Dashboard-tabPanel'>
                <Box height="100%" display="flex" flexDirection="column">
                  {ssMsg === 'installed' && did === ldid ?
                    <ErrorBoundary>
@@ -928,7 +879,7 @@ function Dashboard({
                          })}
                        </Tabs>
                      </Box>
-                      <TabPanel value={systemStatsTabVal} index={0} classNameRoot={classes.tabPanel}>
+                      <TabPanel value={systemStatsTabVal} index={0} classNameRoot='Dashboard-tabPanel'>
                        <Summary
                          key={sid + did}
                          preferences={preferences}
@@ -938,7 +889,7 @@ function Dashboard({
                          serverConnected={serverConnected}
                        />
                      </TabPanel>
-                      <TabPanel value={systemStatsTabVal} index={1} classNameRoot={classes.tabPanel}>
+                      <TabPanel value={systemStatsTabVal} index={1} classNameRoot='Dashboard-tabPanel'>
                        <CPU
                          key={sid + did}
                          preferences={preferences}
@@ -948,7 +899,7 @@ function Dashboard({
                          serverConnected={serverConnected}
                        />
                      </TabPanel>
-                      <TabPanel value={systemStatsTabVal} index={2} classNameRoot={classes.tabPanel}>
+                      <TabPanel value={systemStatsTabVal} index={2} classNameRoot='Dashboard-tabPanel'>
                        <Memory
                          key={sid + did}
                          preferences={preferences}
@@ -958,7 +909,7 @@ function Dashboard({
                          serverConnected={serverConnected}
                        />
                      </TabPanel>
-                      <TabPanel value={systemStatsTabVal} index={3} classNameRoot={classes.tabPanel}>
+                      <TabPanel value={systemStatsTabVal} index={3} classNameRoot='Dashboard-tabPanel'>
                        <Storage
                          key={sid + did}
                          preferences={preferences}
@@ -970,14 +921,14 @@ function Dashboard({
                        />
                      </TabPanel>
                    </ErrorBoundary> :
-                    <div className={classes.emptyPanel}>
+                    <div className='Dashboard-emptyPanel'>
                      <EmptyPanelMessage text={ssMsg}/>
                    </div>
                  }
                </Box>
              </TabPanel>
              {/* Replication */}
-              <TabPanel value={mainTabVal} index={2} classNameRoot={classes.tabPanel}>
+              <TabPanel value={mainTabVal} index={2} classNameRoot='Dashboard-tabPanel'>
                <Replication key={sid} sid={sid} node={node}
                  preferences={preferences} treeNodeInfo={treeNodeInfo} nodeData={nodeData} pageVisible={props.isActive} />
              </TabPanel>
@@ -985,7 +936,7 @@ function Dashboard({
          </Box>
        </Box>
      ) : showDefaultContents() }
-    </>
+    </Root>)
  );
 }

--- a/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx
@@ -11,7 +11,6 @@ import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
 import PgTable from 'sources/components/PgTable';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import {getGCD, getEpoch} from 'sources/utils';
 import ChartContainer from '../components/ChartContainer';
 import { Box, Grid } from '@mui/material';
@@ -23,40 +22,6 @@ import { getStatsUrl, transformData, statsReducer, X_AXIS_LENGTH } from './utili
 import { toPrettySize } from '../../../../static/js/utils';
 import SectionContainer from '../components/SectionContainer.jsx';

-const useStyles = makeStyles((theme) => ({
-  autoResizer: {
-    height: '100% !important',
-    width: '100% !important',
-    background: theme.palette.grey[400],
-    padding: '8px',
-    overflowX: 'auto !important',
-    overflowY: 'hidden !important',
-    minHeight: '100%',
-    minWidth: '100%',
-  },
-  container: {
-    height: 'auto',
-    padding: '0px !important',
-    marginBottom: '4px',
-  },
-  fixedContainer: {
-    flexGrow: 1,
-    padding: '0px !important',
-    marginBottom: '4px',
-  },
-  tableContainer: {
-    padding: '6px',
-    width: '100%',
-  },
-  containerHeader: {
-    fontSize: '15px',
-    fontWeight: 'bold',
-    display: 'flex',
-    alignItems: 'center',
-    height: '100%',
-  },
-}));
-
 const chartsDefault = {
  'cpu_stats': {'User Normal': [], 'User Niced': [], 'Kernel': [], 'Idle': []},
  'la_stats': {'1 min': [], '5 mins': [], '10 mins': [], '15 mins': []},
@@ -246,15 +211,14 @@ CPU.propTypes = {
 };

 export function CPUWrapper(props) {
-  const classes = useStyles();
  const options = useMemo(()=>({
    showDataPoints: props.showDataPoints,
    showTooltip: props.showTooltip,
    lineBorderWidth: props.lineBorderWidth,
  }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
  return (
-    <Box display="flex" flexDirection="column" height="100%">
-      <Grid container spacing={0.5} className={classes.container}>
+    (<Box display="flex" flexDirection="column" height="100%">
+      <Grid container spacing={0.5} sx={{marginBottom: '4px'}}>
        <Grid item 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} />
@@ -269,7 +233,6 @@ export function CPUWrapper(props) {
      <Box flexGrow={1} minHeight={0}>
        <SectionContainer title={gettext('Process CPU usage')}>
          <PgTable
-            className={classes.autoResizer}
            columns={props.tableHeader}
            data={props.processCpuUsageStats}
            msg={props.errorMsg}
@@ -280,6 +243,7 @@ export function CPUWrapper(props) {
        </SectionContainer>
      </Box>
    </Box>
+    )
  );
 }

--- a/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
@@ -10,7 +10,6 @@ import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
 import PgTable from 'sources/components/PgTable';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import {getGCD, getEpoch} from 'sources/utils';
 import ChartContainer from '../components/ChartContainer';
 import { Box, Grid } from '@mui/material';
@@ -22,39 +21,6 @@ import { getStatsUrl, transformData, statsReducer, X_AXIS_LENGTH } from './utili
 import { toPrettySize } from '../../../../static/js/utils';
 import SectionContainer from '../components/SectionContainer.jsx';

-const useStyles = makeStyles((theme) => ({
-  autoResizer: {
-    height: '100% !important',
-    width: '100% !important',
-    background: theme.palette.grey[400],
-    padding: '8px',
-    overflowX: 'auto !important',
-    overflowY: 'hidden !important',
-    minHeight: '100%',
-    minWidth: '100%',
-  },
-  container: {
-    height: 'auto',
-    padding: '0px !important',
-    marginBottom: '4px',
-  },
-  fixedContainer: {
-    flexGrow: 1,
-    padding: '0px !important',
-    marginBottom: '4px',
-  },
-  tableContainer: {
-    padding: '6px',
-    width: '100%',
-  },
-  containerHeader: {
-    fontSize: '15px',
-    fontWeight: 'bold',
-    display: 'flex',
-    alignItems: 'center',
-    height: '100%',
-  }
-}));

 const chartsDefault = {
  'm_stats': {'Total': [], 'Used': [], 'Free': []},
@@ -248,7 +214,7 @@ Memory.propTypes = {
 };

 export function MemoryWrapper(props) {
-  const classes = useStyles();
+
  const options = useMemo(()=>({
    showDataPoints: props.showDataPoints,
    showTooltip: props.showTooltip,
@@ -256,35 +222,36 @@ export function MemoryWrapper(props) {
  }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);

  return (
-    <Box display="flex" flexDirection="column" height="100%">
-      <Grid container spacing={0.5} className={classes.container}>
-        <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>
+    (
+      <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>
        </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>
-      </Grid>
-      <Box flexGrow={1} minHeight={0}>
-        <SectionContainer title={gettext('Process memory usage')}>
-          <PgTable
-            className={classes.autoResizer}
-            columns={props.tableHeader}
-            data={props.processMemoryUsageStats}
-            msg={props.errorMsg}
-            type={'panel'}
-            caveTable={false}
-            tableNoBorder={false}
-          ></PgTable>
-        </SectionContainer>
+        <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>
-    </Box>
+    )
  );
 }

--- a/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
@@ -7,9 +7,9 @@
 //
 //////////////////////////////////////////////////////////////
 import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import url_for from 'sources/url_for';
 import {getGCD, getEpoch} from 'sources/utils';
 import ChartContainer from '../components/ChartContainer';
@@ -21,52 +21,29 @@ import axios from 'axios';
 import { BarChart, PieChart } from '../../../../static/js/chartjs';
 import { getStatsUrl, transformData, X_AXIS_LENGTH } from './utility.js';
 import { toPrettySize } from '../../../../static/js/utils';
-import clsx from 'clsx';
-import { commonTableStyles } from '../../../../static/js/Theme';
+import Table from '../../../../static/js/components/Table';
 import SectionContainer from '../components/SectionContainer.jsx';

-const useStyles = makeStyles((theme) => ({
-  container: {
-    height: 'auto',
-    padding: '8px',
-    marginBottom: '6px',
-  },
-  driveContainer: {
-    width: '100%',
-  },
-  diskInfoCharts: {
-    marginBottom: '4px',
-  },
-  containerHeaderText: {
-    fontWeight: 'bold',
-    padding: '4px 8px',
-  },
-  tableContainer: {
+
+const Root = styled('div')(({theme}) => ({
+  '& .Storage-tableContainer': {
    background: theme.otherVars.tableBg,
+    padding: '0px',
    border: '1px solid '+theme.otherVars.borderColor,
    borderCollapse: 'collapse',
    borderRadius: '4px',
    overflow: 'auto',
    width: '100%',
-    marginBottom: '4px',
-  },
-  tableWhiteSpace: {
-    '& td, & th': {
-      whiteSpace: 'break-spaces !important',
+    margin: '4px 4px 4px 4px',
+    '& .Storage-containerHeaderText': {
+      fontWeight: 'bold',
+      padding: '4px 8px',
+    },
+    '& .Storage-tableWhiteSpace': {
+      '& td, & th': {
+        whiteSpace: 'break-spaces !important',
+      },
    },
-  },
-  driveContainerHeader: {
-    height: 'auto',
-    padding: '5px 0px 0px 0px',
-    background: theme.otherVars.tableBg,
-    marginBottom: '5px',
-    borderRadius: '4px 4px 0px 0px',
-  },
-  driveContainerBody: {
-    height: 'auto',
-    padding: '0px',
-    background: theme.otherVars.tableBg,
-    borderRadius: '0px 0px 4px 4px',
  },
 }));

@@ -122,12 +99,11 @@ const chartsDefault = {


 const DiskStatsTable = (props) => {
-  const tableClasses = commonTableStyles();
-  const classes = useStyles();
+
  const tableHeader = props.tableHeader;
  const data = props.data;
  return (
-    <table className={clsx(tableClasses.table, classes.tableWhiteSpace)}>
+    <Table classNameRoot='Storage-tableWhiteSpace'>
      <thead>
        <tr>
          {tableHeader.map((item, index) => (
@@ -144,7 +120,7 @@ const DiskStatsTable = (props) => {
          </tr>
        ))}
      </tbody>
-    </table>
+    </Table>
  );
 };

@@ -358,7 +334,7 @@ export default function Storage({preferences, sid, did, pageVisible, enablePoll=
  }, enablePoll ? pollDelay : -1);

  return (
-    <>
+    (<Root>
      <div data-testid='graph-poll-delay' style={{display: 'none'}}>{pollDelay}</div>
      {chartDrawnOnce &&
        <StorageWrapper
@@ -373,7 +349,7 @@ export default function Storage({preferences, sid, did, pageVisible, enablePoll=
          isTest={false}
        />
      }
-    </>
+    </Root>)
  );
 }

@@ -387,7 +363,7 @@ Storage.propTypes = {
 };

 export function StorageWrapper(props) {
-  const classes = useStyles();
+
  const options = useMemo(()=>({
    showDataPoints: props.showDataPoints,
    showTooltip: props.showTooltip,
@@ -414,10 +390,10 @@ export function StorageWrapper(props) {
    },
  };

-  return (
-    <>
-      <div className={classes.tableContainer}>
-        <div className={classes.containerHeaderText}>{gettext('Disk information')}</div>
+  return ( 
+    <Root>
+      <div className='Storage-tableContainer'>
+        <div className='Storage-containerHeaderText'>{gettext('Disk information')}</div>
        <DiskStatsTable tableHeader={props.tableHeader} data={props.diskStats} />
      </div>
      <Grid container spacing={0.5} sx={{marginBottom: '4px'}}>
@@ -511,7 +487,7 @@ export function StorageWrapper(props) {
          </Grid>
        </SectionContainer>
      ))}
-    </>
+    </Root>
  );
 }

--- a/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx
@@ -7,9 +7,9 @@
 //
 //////////////////////////////////////////////////////////////
 import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import url_for from 'sources/url_for';
 import getApiInstance from 'sources/api_instance';
 import {getGCD, getEpoch} from 'sources/utils';
@@ -20,31 +20,22 @@ import StreamingChart from '../../../../static/js/components/PgChart/StreamingCh
 import {useInterval, usePrevious} from 'sources/custom_hooks';
 import axios from 'axios';
 import { getStatsUrl, transformData,statsReducer, X_AXIS_LENGTH } from './utility.js';
-import clsx from 'clsx';
-import { commonTableStyles } from '../../../../static/js/Theme';
+import Table from '../../../../static/js/components/Table';

-const useStyles = makeStyles((theme) => ({
-  container: {
-    height: 'auto',
-    padding: '0px !important',
-    marginBottom: '4px',
-  },
-  tableContainer: {
+const Root = styled('div')(({theme}) => ({
+  '& .Summary-tableContainer': {
    background: theme.otherVars.tableBg,
    padding: '0px',
    border: '1px solid '+theme.otherVars.borderColor,
    borderCollapse: 'collapse',
    borderRadius: '4px',
    overflow: 'hidden',
-  },
-  chartContainer: {
-    padding: '4px',
-  },
-  containerHeader: {
-    fontWeight: 'bold',
-    marginBottom: '0px',
-    borderBottom: '1px solid '+theme.otherVars.borderColor,
-    padding: '4px 8px',
+    '& .Summary-containerHeader': {
+      fontWeight: 'bold',
+      marginBottom: '0px',
+      borderBottom: '1px solid '+theme.otherVars.borderColor,
+      padding: '4px 8px',
+    }
  },
 }));

@@ -53,10 +44,9 @@ const chartsDefault = {
 };

 const SummaryTable = (props) => {
-  const tableClasses = commonTableStyles();
  const data = props.data;
  return (
-    <table className={clsx(tableClasses.table)}>
+    <Table >
      <thead>
        <tr>
          <th>Property</th>
@@ -71,7 +61,7 @@ const SummaryTable = (props) => {
          </tr>
        ))}
      </tbody>
-    </table>
+    </Table>
  );
 };

@@ -224,7 +214,7 @@ export default function Summary({preferences, sid, did, pageVisible, enablePoll=
  }, enablePoll ? pollDelay : -1);

  return (
-    <>
+    (<Root>
      <div data-testid='graph-poll-delay' style={{display: 'none'}}>{pollDelay}</div>
      {chartDrawnOnce &&
        <SummaryWrapper
@@ -238,7 +228,7 @@ export default function Summary({preferences, sid, did, pageVisible, enablePoll=
          isTest={false}
        />
      }
-    </>
+    </Root>)
  );
 }

@@ -251,7 +241,7 @@ Summary.propTypes = {
 };

 function SummaryWrapper(props) {
-  const classes = useStyles();
+
  const options = useMemo(()=>({
    showDataPoints: props.showDataPoints,
    showTooltip: props.showTooltip,
@@ -259,23 +249,23 @@ function SummaryWrapper(props) {
  }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
  return (
    <>
-      <Grid container spacing={0.5} className={classes.container}>
+      <Grid container spacing={0.5} sx={{height: 'auto', padding: '0px !important', marginBottom: '4px'}}>
        <Grid item md={6}>
-          <div className={classes.tableContainer}>
-            <div className={classes.containerHeader}>{gettext('OS information')}</div>
+          <div className='Summary-tableContainer'>
+            <div className='Summary-containerHeader'>{gettext('OS information')}</div>
            <SummaryTable data={props.osStats} />
          </div>
        </Grid>
-        <Grid item md={6}className={classes.chartContainer}>
+        <Grid item md={6} sx={{padding: '4px'}}>
          <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} className={classes.container}>
+      <Grid container spacing={0.5} sx={{height: 'auto', padding: '0px !important', marginBottom: '4px'}}>
        <Grid item md={6}>
-          <div className={classes.tableContainer}>
-            <div className={classes.containerHeader}>{gettext('CPU information')}</div>
+          <div className='Summary-tableContainer'>
+            <div className='Summary-containerHeader'>{gettext('CPU information')}</div>
            <SummaryTable data={props.cpuStats} />
          </div>
        </Grid>
--- a/web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx
+++ b/web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx
@@ -8,96 +8,111 @@
 //////////////////////////////////////////////////////////////

 import React from 'react';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import pgAdmin from 'sources/pgadmin';
 import PgAdminLogo from './PgAdminLogo';
 import { Link } from '@mui/material';

-const useStyles = makeStyles((theme) => ({
-  emptyPanel: {
-    background: theme.palette.grey[400],
-    overflow: 'hidden',
-    padding: '8px',
-    display: 'flex',
-    flexDirection: 'column',
-    flexGrow: 1,
-    height: '100%'

-  },
-  dashboardContainer: {
+const Root = styled('div')(({theme}) => ({
+  background: theme.palette.grey[400],
+  overflow: 'hidden',
+  padding: '8px',
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  height: '100%',
+  '& .WelcomeDashboard-dashboardContainer': {
    paddingBottom: '8px',
-    minHeight: '100%'
-  },
-  card: {
-    position: 'relative',
-    minWidth: 0,
-    wordWrap: 'break-word',
-    backgroundColor: theme.otherVars.tableBg,
-    backgroundClip: 'border-box',
-    border: '1px solid' + theme.otherVars.borderColor,
-    borderRadius: theme.shape.borderRadius,
-    marginTop: 8
-  },
-  row: {
-    marginRight: '-8px',
-    marginLeft: '-8px'
-  },
-  rowContent: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    marginRight: '-7.5px',
-    marginLeft: '-7.5px'
-  },
-  cardHeader: {
-    padding: '0.25rem 0.5rem',
-    fontWeight: 'bold',
-    backgroundColor: theme.otherVars.tableBg,
-    borderBottom: '1px solid',
-    borderBottomColor: theme.otherVars.borderColor,
-  },
-  dashboardLink: {
-    color: theme.otherVars.colorFg + '!important',
-    flex: '0 0 50%',
-    maxWidth: '50%',
-    textAlign: 'center',
-    cursor: 'pointer'
-  },
-  gettingStartedLink: {
-    flex: '0 0 25%',
-    maxWidth: '50%',
-    textAlign: 'center',
-    cursor: 'pointer'
-  },
-  link: {
-    color: theme.palette.text.primary + '!important',
-  },
-  cardColumn: {
-    flex: '0 0 100%',
-    maxWidth: '100%',
-    margin: '8px'
-  },
-  cardBody: {
-    flex: '1 1 auto',
-    minHeight: '1px',
-    padding: '0.5rem !important',
-  },
-  welcomeLogo: {
-    width: '400px',
-    '& .app-name': {
-      fill: theme.otherVars.colorBrand
+    minHeight: '100%',
+
+    '& .WelcomeDashboard-row': {
+      marginRight: '-8px',
+      marginLeft: '-8px'
    },
-    '& .app-name-underline': {
-      stroke: theme.palette.text.primary
+    '& .WelcomeDashboard-cardColumn': {
+      flex: '0 0 100%',
+      maxWidth: '100%',
+      margin: '8px',
+
+      '& .WelcomeDashboard-card': {
+        position: 'relative',
+        minWidth: 0,
+        wordWrap: 'break-word',
+        backgroundColor: theme.otherVars.tableBg,
+        backgroundClip: 'border-box',
+        border: '1px solid' + theme.otherVars.borderColor,
+        borderRadius: theme.shape.borderRadius,
+        marginTop: 8,
+
+        '& .WelcomeDashboard-cardHeader': {
+          padding: '0.25rem 0.5rem',
+          fontWeight: 'bold',
+          backgroundColor: theme.otherVars.tableBg,
+          borderBottom: '1px solid',
+          borderBottomColor: theme.otherVars.borderColor,
+        },
+        '& .WelcomeDashboard-cardBody': {
+          flex: '1 1 auto',
+          minHeight: '1px',
+          padding: '0.5rem !important',
+
+          '& .WelcomeDashboard-welcomeLogo': {
+            width: '400px',
+            '& .app-name': {
+              fill: theme.otherVars.colorBrand
+            },
+            '& .app-name-underline': {
+              stroke: theme.palette.text.primary
+            },
+            '& .app-tagline': {
+              fill: theme.palette.text.primary
+            }
+          },
+
+          '& .WelcomeDashboard-rowContent': {
+            display: 'flex',
+            flexWrap: 'wrap',
+            marginRight: '-7.5px',
+            marginLeft: '-7.5px',
+
+            '& .WelcomeDashboard-dashboardLink': {
+              color: theme.palette.text.primary + ' !important',
+              flex: '0 0 50%',
+              maxWidth: '50%',
+              textAlign: 'center',
+              cursor: 'pointer',
+
+              '& .WelcomeDashboard-link': {
+                color: theme.palette.text.primary + ' !important',
+
+                '& .WelcomeDashboard-dashboardIcon': {
+                  color: theme.otherVars.colorBrand
+                }
+              },
+            },
+
+            '& .WelcomeDashboard-gettingStartedLink': {
+              flex: '0 0 25%',
+              maxWidth: '50%',
+              textAlign: 'center',
+              cursor: 'pointer',
+
+              '& .WelcomeDashboard-link': {
+                color: theme.palette.text.primary + ' !important',
+
+                '& .WelcomeDashboard-dashboardIcon': {
+                  color: theme.otherVars.colorBrand
+                }
+              },
+            },
+          },
+        },
+      },
    },
-    '& .app-tagline': {
-      fill: theme.palette.text.primary
-    }
-  },
-  dashboardIcon: {
-    color: theme.otherVars.colorBrand
  },
 }));

@@ -130,18 +145,15 @@ function AddNewServer(pgBrowser) {
 }

 export default function WelcomeDashboard({ pgBrowser }) {
-
-  const classes = useStyles();
-
  return (
-    <div className={classes.emptyPanel}>
-      <div className={classes.dashboardContainer}>
-        <div className={classes.row}>
-          <div className={classes.cardColumn}>
-            <div className={classes.card}>
-              <div className={classes.cardHeader}>{gettext('Welcome')}</div>
-              <div className={classes.cardBody}>
-                <div className={classes.welcomeLogo}>
+    <Root>
+      <div className='WelcomeDashboard-dashboardContainer'>
+        <div className='WelcomeDashboard-row'>
+          <div className='WelcomeDashboard-cardColumn'>
+            <div className='WelcomeDashboard-card'>
+              <div className='WelcomeDashboard-cardHeader'>{gettext('Welcome')}</div>
+              <div className='WelcomeDashboard-cardBody'>
+                <div className='WelcomeDashboard-welcomeLogo'>
                  <PgAdminLogo />
                </div>
                <h4>
@@ -157,15 +169,15 @@ export default function WelcomeDashboard({ pgBrowser }) {
            </div>
          </div>
        </div>
-        <div className={classes.row}>
-          <div className={classes.cardColumn}>
-            <div className={classes.card}>
-              <div className={classes.cardHeader}>{gettext('Quick Links')}</div>
-              <div className={classes.cardBody}>
-                <div className={classes.rowContent}>
-                  <div className={classes.dashboardLink}>
-                    <Link onClick={() => { AddNewServer(pgBrowser); }} className={classes.link}>
-                      <div className={classes.dashboardIcon}>
+        <div className='WelcomeDashboard-row'>
+          <div className='WelcomeDashboard-cardColumn'>
+            <div className='WelcomeDashboard-card'>
+              <div className='WelcomeDashboard-cardHeader'>{gettext('Quick Links')}</div>
+              <div className='WelcomeDashboard-cardBody'>
+                <div className='WelcomeDashboard-rowContent'>
+                  <div className='WelcomeDashboard-dashboardLink'>
+                    <Link onClick={() => { AddNewServer(pgBrowser); }} className='WelcomeDashboard-link'>
+                      <div className='WelcomeDashboard-dashboardIcon'>
                        <span
                          className="fa fa-4x fa-server"
                          aria-hidden="true"
@@ -174,9 +186,9 @@ export default function WelcomeDashboard({ pgBrowser }) {
                      {gettext('Add New Server')}
                    </Link>
                  </div>
-                  <div className={classes.dashboardLink}>
-                    <Link onClick={() => pgAdmin.Preferences.show()} className={classes.link}>
-                      <div className={classes.dashboardIcon}>
+                  <div className='WelcomeDashboard-dashboardLink'>
+                    <Link onClick={() => pgAdmin.Preferences.show()} className='WelcomeDashboard-link'>
+                      <div className='WelcomeDashboard-dashboardIcon'>
                        <span
                          id="mnu_preferences"
                          className="fa fa-4x fa-cogs"
@@ -191,19 +203,19 @@ export default function WelcomeDashboard({ pgBrowser }) {
            </div>
          </div>
        </div>
-        <div className={classes.row}>
-          <div className={classes.cardColumn}>
-            <div className={classes.card}>
-              <div className={classes.cardHeader}>{gettext('Getting Started')}</div>
-              <div className={classes.cardBody}>
-                <div className={classes.rowContent}>
-                  <div className={classes.gettingStartedLink}>
+        <div className='WelcomeDashboard-row'>
+          <div className='WelcomeDashboard-cardColumn'>
+            <div className='WelcomeDashboard-card'>
+              <div className='WelcomeDashboard-cardHeader'>{gettext('Getting Started')}</div>
+              <div className='WelcomeDashboard-cardBody'>
+                <div className='WelcomeDashboard-rowContent'>
+                  <div className='WelcomeDashboard-gettingStartedLink'>
                    <a
                      href="https://www.postgresql.org/docs"
                      target="postgres_help"
-                      className={classes.link}
+                      className='WelcomeDashboard-link'
                    >
-                      <div className={classes.dashboardIcon}>
+                      <div className='WelcomeDashboard-dashboardIcon'>
                        <span
                          className="fa fa-4x dashboard-pg-doc"
                          aria-hidden="true"
@@ -212,9 +224,9 @@ export default function WelcomeDashboard({ pgBrowser }) {
                      {gettext('PostgreSQL Documentation')}
                    </a>
                  </div>
-                  <div className={classes.gettingStartedLink}>
-                    <a href="https://www.pgadmin.org" target="pgadmin_website" className={classes.link}>
-                      <div className={classes.dashboardIcon}>
+                  <div className='WelcomeDashboard-gettingStartedLink'>
+                    <a href="https://www.pgadmin.org" target="pgadmin_website" className='WelcomeDashboard-link'>
+                      <div className='WelcomeDashboard-dashboardIcon'>
                        <span
                          className="fa fa-4x fa-globe"
                          aria-hidden="true"
@@ -223,13 +235,13 @@ export default function WelcomeDashboard({ pgBrowser }) {
                      {gettext('pgAdmin Website')}
                    </a>
                  </div>
-                  <div className={classes.gettingStartedLink}>
+                  <div className='WelcomeDashboard-gettingStartedLink'>
                    <a
                      href="https://planet.postgresql.org"
                      target="planet_website"
-                      className={classes.link}
+                      className='WelcomeDashboard-link'
                    >
-                      <div className={classes.dashboardIcon}>
+                      <div className='WelcomeDashboard-dashboardIcon'>
                        <span
                          className="fa fa-4x fa-book"
                          aria-hidden="true"
@@ -238,13 +250,13 @@ export default function WelcomeDashboard({ pgBrowser }) {
                      {gettext('Planet PostgreSQL')}
                    </a>
                  </div>
-                  <div className={classes.gettingStartedLink}>
+                  <div className='WelcomeDashboard-gettingStartedLink'>
                    <a
                      href="https://www.postgresql.org/community"
                      target="postgres_website"
-                      className={classes.link}
+                      className='WelcomeDashboard-link'
                    >
-                      <div className={classes.dashboardIcon}>
+                      <div className='WelcomeDashboard-dashboardIcon'>
                        <span
                          className="fa fa-4x fa-users"
                          aria-hidden="true"
@@ -259,7 +271,7 @@ export default function WelcomeDashboard({ pgBrowser }) {
          </div>
        </div>
      </div>
-    </div>
+    </Root>
  );
 }

--- a/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx
+++ b/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx
@@ -7,29 +7,20 @@
 //
 //////////////////////////////////////////////////////////////
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { Box, Card, CardContent, CardHeader } from '@mui/material';
-import { makeStyles } from '@mui/styles';

 import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';

-
-const useStyles = makeStyles((theme) => ({
-  chartCard: {
-    border: '1px solid '+theme.otherVars.borderColor,
-    height: '100%',
-  },
-  chartCardContent: {
-    padding: '0.25rem 0.5rem',
-    height: '165px',
-    display: 'flex',
-  },
-  chartLegend: {
+const StyledCard = styled(Card)(({theme}) => ({
+  border: '1px solid '+theme.otherVars.borderColor,
+  height: '100%',
+  '& .ChartContainer-chartLegend': {
    marginLeft: 'auto',
    '& > div': {
      display: 'flex',
      fontWeight: 'normal',
-
      '& .legend-value': {
        marginLeft: '4px',
        '& .legend-label': {
@@ -37,17 +28,22 @@ const useStyles = makeStyles((theme) => ({
        }
      }
    }
+  },
+  '& .ChartContainer-cardContent': {
+    padding: '0.25rem 0.5rem',
+    height: '165px',
+    display: 'flex',
  }
 }));

 export default function ChartContainer(props) {
-  const classes = useStyles();
+

  return (
-    <Card className={classes.chartCard} elevation={0} data-testid="chart-container">
+    <StyledCard elevation={0} data-testid="chart-container">
      <CardHeader title={<Box display="flex" justifyContent="space-between">
        <div id={props.id}>{props.title}</div>
-        <div className={classes.chartLegend}>
+        <div className='ChartContainer-chartLegend'>
          <div style={{display: 'flex', flexWrap: 'wrap'}}>
            {props.datasets?.map((datum)=>(
              <div className="legend-value" key={datum.label}>
@@ -58,11 +54,11 @@ export default function ChartContainer(props) {
          </div>
        </div>
      </Box>} />
-      <CardContent className={classes.chartCardContent}>
+      <CardContent className='ChartContainer-cardContent'>
        {!props.errorMsg && !props.isTest && props.children}
        {props.errorMsg && <EmptyPanelMessage text={props.errorMsg}/>}
      </CardContent>
-    </Card>
+    </StyledCard>
  );
 }

--- a/web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx
+++ b/web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx
@@ -8,36 +8,33 @@
 //////////////////////////////////////////////////////////////

 import React from 'react';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
 import { PgIconButton } from '../../../../static/js/components/Buttons';
-import { makeStyles } from '@mui/styles';
 import PropTypes from 'prop-types';

-const useStyles = makeStyles((theme) => ({
-  refreshButton: {
+const StyledPgIconButton = styled(PgIconButton)(({theme}) => ({
+  '&.RefreshButtons': {
    marginLeft: 'auto',
-    height:  '1.9rem',
-    width:  '2.2rem',
+    height: '1.9rem !important',
+    width: '2.2rem !important',
    ...theme.mixins.panelBorder,
-  },
+  }
 }));

-
 export default function RefreshButton({onClick}) {
-  const classes = useStyles();
-
-  return(
-    <PgIconButton
+  return (
+    <StyledPgIconButton
      size="xs"
      noBorder
-      className={classes.refreshButton}
+      className='RefreshButtons'
      icon={<CachedOutlinedIcon />}
      onClick={onClick}
      color="default"
      aria-label="Refresh"
      title={gettext('Refresh')}
-    ></PgIconButton>
+    ></StyledPgIconButton>
  );
 }

--- a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
+++ b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
@@ -7,42 +7,37 @@
 //
 //////////////////////////////////////////////////////////////
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';

-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    ...theme.mixins.panelBorder.all,
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden !important',
-    height: '100%',
-    width: '100%',
-    minHeight: '400px',
-    borderRadius: theme.shape.borderRadius,
-  },
-  cardHeader: {
+const StyledBox = styled(Box)(({theme}) => ({
+  ...theme.mixins.panelBorder.all,
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden !important',
+  height: '100%',
+  width: '100%',
+  minHeight: '400px',
+  borderRadius: theme.shape.borderRadius,
+  '& .SectionContainer-cardHeader': {
    backgroundColor: theme.otherVars.tableBg,
    borderBottom: '1px solid',
    borderBottomColor: theme.otherVars.borderColor,
    display: 'flex',
    alignItems: 'center',
+    '& .SectionContainer-cardTitle': {
+      padding: '0.25rem 0.5rem',
+      fontWeight: 'bold',
+    }
  },
-  cardTitle: {
-    padding: '0.25rem 0.5rem',
-    fontWeight: 'bold',
-  }
 }));

 export default function SectionContainer({title, titleExtras, children, style}) {
-  const classes = useStyles();
-
  return (
-    <Box className={classes.root} style={style}>
-      <Box className={classes.cardHeader} title={title}>
-        <div className={classes.cardTitle}>{title}</div>
+    <StyledBox style={style}>
+      <Box className='SectionContainer-cardHeader' title={title}>
+        <div className='SectionContainer-cardTitle'>{title}</div>
        <div style={{marginLeft: 'auto'}}>
          {titleExtras}
        </div>
@@ -50,7 +45,7 @@ export default function SectionContainer({title, titleExtras, children, style})
      <Box height="100%" display="flex" flexDirection="column" minHeight={0}>
        {children}
      </Box>
-    </Box>
+    </StyledBox>
  );
 }