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/misc/bgprocess/static/js/BgProcessNotify.jsx
+++ b/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx
@@ -1,24 +1,28 @@
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 import CloseIcon from '@mui/icons-material/CloseRounded';
 import { DefaultButton, PgIconButton } from '../../../../static/js/components/Buttons';
-import clsx from 'clsx';
 import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
 import { BgProcessManagerProcessState } from './BgProcessConstants';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 import pgAdmin from 'sources/pgadmin';

-
-const useStyles = makeStyles((theme)=>({
-  container: {
-    borderRadius: theme.shape.borderRadius,
-    padding: '0.25rem 1rem 1rem',
-    minWidth: '325px',
-    ...theme.mixins.panelBorder.all,
+const StyledBox = styled(Box)(({theme}) => ({
+  borderRadius: theme.shape.borderRadius,
+  padding: '0.25rem 1rem 1rem',
+  minWidth: '325px',
+  ...theme.mixins.panelBorder.all,
+  '&.BgProcessNotify-containerSuccess': {
+    borderColor: theme.palette.success.main,
+    backgroundColor: theme.palette.success.light,
  },
-  containerHeader: {
+  '&.BgProcessNotify-containerError': {
+    borderColor: theme.palette.error.main,
+    backgroundColor: theme.palette.error.light,
+  },
+  '& .BgProcessNotify-containerHeader': {
    height: '32px',
    display: 'flex',
    justifyContent: 'space-between',
@@ -26,36 +30,27 @@ const useStyles = makeStyles((theme)=>({
    alignItems: 'center',
    borderTopLeftRadius: 'inherit',
    borderTopRightRadius: 'inherit',
+    '& .BgProcessNotify-iconSuccess': {
+      color: theme.palette.success.main,
+    },
+    '& .BgProcessNotify-iconError': {
+      color: theme.palette.error.main,
+    }
  },
-  containerBody: {
+  '&.BgProcessNotify-containerBody': {
    marginTop: '1rem',
    overflowWrap: 'break-word',
  },
-  containerSuccess: {
-    borderColor: theme.palette.success.main,
-    backgroundColor: theme.palette.success.light,
-  },
-  iconSuccess: {
-    color: theme.palette.success.main,
-  },
-  containerError: {
-    borderColor: theme.palette.error.main,
-    backgroundColor: theme.palette.error.light,
-  },
-  iconError: {
-    color: theme.palette.error.main,
-  },
 }));

 function ProcessNotifyMessage({title, desc, onClose, onViewProcess, success=true, dataTestSuffix=''}) {
-  const classes = useStyles();
  return (
-    <Box className={clsx(classes.container, (success ? classes.containerSuccess : classes.containerError))} data-test={'process-popup-' + dataTestSuffix}>
-      <Box display="flex" justifyContent="space-between" className={classes.containerHeader}>
+    <StyledBox className={(success ? 'BgProcessNotify-containerSuccess' : 'BgProcessNotify-containerError')} data-test={'process-popup-' + dataTestSuffix}>
+      <Box display="flex" justifyContent="space-between" className='BgProcessNotify-containerHeader'>
        <Box marginRight={'1rem'}>{title}</Box>
-        <PgIconButton size="xs" noBorder icon={<CloseIcon />} onClick={onClose} title={'Close'} className={success ? classes.iconSuccess : classes.iconError} />
+        <PgIconButton size="xs" noBorder icon={<CloseIcon />} onClick={onClose} title={'Close'} className={success ? 'BgProcessNotify-iconSuccess' : 'BgProcessNotify-iconError'} />
      </Box>
-      <Box className={classes.containerBody}>
+      <Box className='BgProcessNotify-containerBody'>
        <Box>{desc}</Box>
        <Box marginTop={'1rem'} display="flex">
          <DefaultButton startIcon={<DescriptionOutlinedIcon />} onClick={()=>{
@@ -64,7 +59,7 @@ function ProcessNotifyMessage({title, desc, onClose, onViewProcess, success=true
          }}>View Processes</DefaultButton>
        </Box>
      </Box>
-    </Box>
+    </StyledBox>
  );
 }
 ProcessNotifyMessage.propTypes = {
--- a/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx
+++ b/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx
@@ -8,10 +8,10 @@
 //////////////////////////////////////////////////////////////

 import React, { useState, useMemo } from 'react';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import PropTypes from 'prop-types';
 import { MESSAGE_TYPE, NotifierMessage } from '../../../../static/js/components/FormComponents';
 import { BgProcessManagerProcessState } from './BgProcessConstants';
@@ -24,16 +24,14 @@ import pgAdmin from 'sources/pgadmin';
 import FolderSharedRoundedIcon from '@mui/icons-material/FolderSharedRounded';


-const useStyles = makeStyles((theme)=>({
-  container: {
-    backgroundColor: theme.palette.background.default,
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    padding: '8px',
-    userSelect: 'text',
-  },
-  cmd: {
+const StyledBox = styled(Box)(({theme}) => ({
+  backgroundColor: theme.palette.background.default,
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '8px',
+  userSelect: 'text',
+  '& .ProcessDetails-cmd': {
    ...theme.mixins.panelBorder.all,
    borderRadius: theme.shape.borderRadius,
    backgroundColor: theme.otherVars.inputDisabledBg,
@@ -41,19 +39,7 @@ const useStyles = makeStyles((theme)=>({
    margin: '8px 0px',
    padding: '4px',
  },
-  logs: {
-    flexGrow: 1,
-    borderRadius: theme.shape.borderRadius,
-    padding: '4px',
-    overflow: 'auto',
-    textOverflow: 'wrap-text',
-    margin: '8px 0px',
-    ...theme.mixins.panelBorder.all,
-  },
-  logErr: {
-    color: theme.palette.error.main,
-  },
-  terminateBtn: {
+  '& .ProcessDetails-terminateBtn': {
    backgroundColor: theme.palette.error.main,
    color: theme.palette.error.contrastText,
    border: 0,
@@ -65,7 +51,20 @@ const useStyles = makeStyles((theme)=>({
      color: theme.palette.error.contrastText + ' !important',
      border: 0,
    }
-  }
+  },
+  '& .ProcessDetails-logs': {
+    flexGrow: 1,
+    borderRadius: theme.shape.borderRadius,
+    padding: '4px',
+    overflow: 'auto',
+    textOverflow: 'wrap-text',
+    margin: '8px 0px',
+    ...theme.mixins.panelBorder.all,
+
+    '& .ProcessDetails-logErr': {
+      color: theme.palette.error.main,
+    },
+  },
 }));

 async function getDetailedStatus(api, jobId, out, err) {
@@ -80,7 +79,6 @@ async function getDetailedStatus(api, jobId, out, err) {
 }

 export default function ProcessDetails({data}) {
-  const classes = useStyles();
  const api = useMemo(()=>getApiInstance());
  const [logs, setLogs] = useState(null);
  const [completed, setCompleted] = useState(false);
@@ -149,15 +147,15 @@ export default function ProcessDetails({data}) {

  const errRe = new RegExp(': (' + gettext('error') + '|' + gettext('fatal') + '):', 'i');
  return (
-    <Box display="flex" flexDirection="column" className={classes.container} data-test="process-details">
+    <StyledBox display="flex" flexDirection="column" data-test="process-details">
      <Box data-test="process-message">{data.details?.message}</Box>
      {data.details?.cmd && <>
        <Box>{gettext('Running command')}:</Box>
-        <Box data-test="process-cmd" className={classes.cmd}>{data.details.cmd}</Box>
+        <Box data-test="process-cmd" className='ProcessDetails-cmd'>{data.details.cmd}</Box>
      </>}
      {data.details?.query && <>
        <Box>{gettext('Running query')}:</Box>
-        <Box data-test="process-cmd" className={classes.cmd}>{data.details.query}</Box>
+        <Box data-test="process-cmd" className='ProcessDetails-cmd'>{data.details.query}</Box>
      </>}
      <Box display="flex" justifyContent="space-between" alignItems="center" flexWrap="wrap">
        <Box><span><AccessTimeRoundedIcon /> {gettext('Start time')}: {new Date(data.stime).toString()}</span></Box>
@@ -167,12 +165,12 @@ export default function ProcessDetails({data}) {
            pgAdmin.Tools.FileManager.openStorageManager(data.current_storage_dir);
          }} style={{marginRight: '4px'}} />}
          <DefaultButton disabled={process_state != BgProcessManagerProcessState.PROCESS_STARTED || data.server_id != null}
-            startIcon={<HighlightOffRoundedIcon />} className={classes.terminateBtn} onClick={onStopProcess}>
+            startIcon={<HighlightOffRoundedIcon />} className='ProcessDetails-terminateBtn' onClick={onStopProcess}>
              Stop Process
          </DefaultButton>
        </Box>
      </Box>
-      <Box flexGrow={1} className={classes.logs}>
+      <Box flexGrow={1} className='ProcessDetails-logs'>
        {logs == null && <span data-test="loading-logs">{gettext('Loading process logs...')}</span>}
        {logs?.length == 0 && gettext('No logs available.')}
        {logs?.map((log, i)=>{
@@ -181,14 +179,14 @@ export default function ProcessDetails({data}) {
            if(i==logs.length-1) {
              el?.scrollIntoView();
            }
-          }} key={id} className={errRe.test(log) ? classes.logErr : ''}>{log}</div>;
+          }} key={id} className={errRe.test(log) ? 'ProcessDetails-logErr' : ''}>{log}</div>;
        })}
      </Box>
      <Box display="flex" alignItems="center">
        <NotifierMessage type={notifyType} message={notifyText} closable={false} textCenter={true} style={{flexGrow: 1, marginRight: '8px'}} />
        <Box>{gettext('Execution time')}: {timeTaken} {gettext('seconds')}</Box>
      </Box>
-    </Box>
+    </StyledBox>
  );
 }

--- a/web/pgadmin/misc/bgprocess/static/js/Processes.jsx
+++ b/web/pgadmin/misc/bgprocess/static/js/Processes.jsx
@@ -8,10 +8,10 @@
 //////////////////////////////////////////////////////////////

 import React, { useCallback, useEffect, useMemo } from 'react';
+import { styled } from '@mui/material/styles';
 import PgTable from 'sources/components/PgTable';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import { BgProcessManagerEvents, BgProcessManagerProcessState } from './BgProcessConstants';
 import { PgButtonGroup, PgIconButton } from '../../../../static/js/components/Buttons';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -26,67 +26,36 @@ import ErrorBoundary from '../../../../static/js/helpers/ErrorBoundary';
 import ProcessDetails from './ProcessDetails';


-const useStyles = makeStyles((theme) => ({
-  stopButton: {
+const Root = styled('div')(({theme}) => ({
+  height: '100%',
+  '& .Processes-stopButton': {
    color: theme.palette.error.main
  },
-  buttonClick: {
-    backgroundColor: theme.palette.grey[400]
-  },
-  emptyPanel: {
-    minHeight: '100%',
-    minWidth: '100%',
-    background: theme.otherVars.emptySpaceBg,
-    overflow: 'auto',
-    padding: '8px',
-    display: 'flex',
-  },
-  panelIcon: {
-    width: '80%',
-    margin: '0 auto',
-    marginTop: '25px !important',
-    position: 'relative',
-    textAlign: 'center',
-  },
-  panelMessage: {
-    marginLeft: '0.5rem',
-    fontSize: '0.875rem',
-  },
-  autoResizer: {
-    height: '100% !important',
-    width: '100% !important',
-    background: theme.palette.grey[400],
-    padding: '7.5px',
-    overflow: 'auto !important',
-    minHeight: '100%',
-    minWidth: '100%',
-  },
-  noPadding: {
-    padding: 0,
-  },
-  bgSucess: {
-    backgroundColor: theme.palette.success.light,
-    height: '100%',
-    padding: '4px',
-  },
-  bgFailed: {
-    backgroundColor: theme.palette.error.light,
-    height: '100%',
-    padding: '4px',
-  },
-  bgTerm: {
-    backgroundColor: theme.palette.warning.light,
-    height: '100%',
-    padding: '4px',
-  },
-  bgRunning: {
-    backgroundColor: theme.palette.primary.light,
-    height: '100%',
-    padding: '4px',
+  '& .Processes-noPadding': {
+    padding: '0 !important',
+    '& .Processes-bgSucess': {
+      backgroundColor: theme.palette.success.light,
+      height: '100%',
+      padding: '4px',
+    },
+    '& .Processes-bgFailed': {
+      backgroundColor: theme.palette.error.light,
+      height: '100%',
+      padding: '4px',
+    },
+    '& .Processes-bgTerm': {
+      backgroundColor: theme.palette.warning.light,
+      height: '100%',
+      padding: '4px',
+    },
+    '& .Processes-bgRunning': {
+      backgroundColor: theme.palette.primary.light,
+      height: '100%',
+      padding: '4px',
+    }
  },
 }));

-
 const ProcessStateTextAndColor = {
  [BgProcessManagerProcessState.PROCESS_NOT_STARTED]: [gettext('Not started'), 'bgRunning'],
  [BgProcessManagerProcessState.PROCESS_STARTED]: [gettext('Running'), 'bgRunning'],
@@ -96,7 +65,7 @@ const ProcessStateTextAndColor = {
  [BgProcessManagerProcessState.PROCESS_FAILED]: [gettext('Failed'), 'bgFailed'],
 };
 export default function Processes() {
-  const classes = useStyles();
+
  const pgAdmin = usePgAdmin();
  const [tableData, setTableData] = React.useState([]);
  const [selectedRows, setSelectedRows] = React.useState({});
@@ -130,7 +99,7 @@ export default function Processes() {
          size="xs"
          noBorder
          icon={<CancelIcon />}
-          className={classes.stopButton}
+          className='Processes-stopButton'
          disabled={row.original.process_state != BgProcessManagerProcessState.PROCESS_STARTED
            || row.original.server_id != null}
          onClick={(e) => {
@@ -165,7 +134,7 @@ export default function Processes() {

    const StatusCell = ({row})=>{
      const [text, bgcolor] = ProcessStateTextAndColor[row.original.process_state];
-      return <Box className={classes[bgcolor]}>{text}</Box>;
+      return <Box className={'Processes-'+bgcolor}>{text}</Box>;
    };
    StatusCell.displayName = 'StatusCell';
    StatusCell.propTypes = cellPropTypes;
@@ -247,7 +216,7 @@ export default function Processes() {
      width: 120,
      minWidth: 120,
      accessorFn: (row)=>ProcessStateTextAndColor[row.process_state][0],
-      dataClassName: classes.noPadding,
+      dataClassName: 'Processes-noPadding',
      cell: StatusCell,
    },
    {
@@ -274,48 +243,48 @@ export default function Processes() {
  }, []);

  return (
-    <PgTable
-      data-test="processes"
-      className={classes.autoResizer}
-      columns={columns}
-      data={tableData}
-      sortOptions={[{id: 'stime', desc: true}]}
-      selectedRows={selectedRows}
-      setSelectedRows={setSelectedRows}
-      hasSelectRow={true}
-      tableProps={{
-        getRowId: (row)=>{
-          return row.id;
-        }
-      }}
-      CustomHeader={()=>{
-        return (
-          <Box>
-            <PgButtonGroup>
-              <PgIconButton
-                icon={<DeleteIcon style={{height: '1.4rem'}}/>}
-                aria-label="Acknowledge and Remove"
-                title={gettext('Acknowledge and Remove')}
-                onClick={() => {
-                  pgAdmin.Browser.notifier.confirm(gettext('Remove Processes'), gettext('Are you sure you want to remove the selected processes?'), ()=>{
-                    pgAdmin.Browser.BgProcessManager.acknowledge(selectedRowIDs);
-                    setSelectedRows({});
-                  });
-                }}
-                disabled={selectedRowIDs.length <= 0}
-              ></PgIconButton>
-              <PgIconButton
-                icon={<HelpIcon style={{height: '1.4rem'}}/>}
-                aria-label="Help"
-                title={gettext('Help')}
-                onClick={() => {
-                  window.open(url_for('help.static', {'filename': 'processes.html'}));
-                }}
-              ></PgIconButton>
-            </PgButtonGroup>
-          </Box>
-        );
-      }}
-    ></PgTable>
+    <Root>
+      <PgTable
+        data-test="processes"
+        columns={columns}
+        data={tableData}
+        sortOptions={[{id: 'stime', desc: true}]}
+        selectedRows={selectedRows}
+        setSelectedRows={setSelectedRows}
+        hasSelectRow={true}
+        tableProps={{
+          getRowId: (row)=>{
+            return row.id;
+          }
+        }}
+        CustomHeader={()=>{
+          return (
+            <Box>
+              <PgButtonGroup>
+                <PgIconButton
+                  icon={<DeleteIcon style={{height: '1.4rem'}}/>}
+                  aria-label="Acknowledge and Remove"
+                  title={gettext('Acknowledge and Remove')}
+                  onClick={() => {
+                    pgAdmin.Browser.notifier.confirm(gettext('Remove Processes'), gettext('Are you sure you want to remove the selected processes?'), ()=>{
+                      pgAdmin.Browser.BgProcessManager.acknowledge(selectedRowIDs);
+                      setSelectedRows({});
+                    });
+                  }}
+                  disabled={selectedRowIDs.length <= 0}
+                ></PgIconButton>
+                <PgIconButton
+                  icon={<HelpIcon style={{height: '1.4rem'}}/>}
+                  aria-label="Help"
+                  title={gettext('Help')}
+                  onClick={() => {
+                    window.open(url_for('help.static', {'filename': 'processes.html'}));
+                  }}
+                ></PgIconButton>
+              </PgButtonGroup>
+            </Box>
+          );
+        }}
+      ></PgTable></Root>
  );
 }