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

web/pgadmin/tools/import_export_servers/static/js/ImportExportServers.jsx

@@ -8,11 +8,11 @@
 //////////////////////////////////////////////////////////////
 
 import gettext from 'sources/gettext';
+import { styled } from '@mui/material/styles';
 import _ from 'lodash';
 import url_for from 'sources/url_for';
 import React from 'react';
 import { Box, Paper} from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import Wizard from '../../../../static/js/helpers/wizard/Wizard';
 import WizardStep from '../../../../static/js/helpers/wizard/WizardStep';
 import { FormFooterMessage, MESSAGE_TYPE, FormNote } from '../../../../static/js/components/FormComponents';
@@ -22,39 +22,33 @@ import ImportExportSelectionSchema from './import_export_selection.ui';
 import CheckBoxTree from '../../../../static/js/components/CheckBoxTree';
 import getApiInstance from '../../../../static/js/api_instance';
 import PropTypes from 'prop-types';
-import { commonTableStyles } from '../../../../static/js/Theme';
-import clsx from 'clsx';
 import pgAdmin from 'sources/pgadmin';
+import Table from '../../../../static/js/components/Table';
 
-const useStyles = makeStyles(() =>
+const StyledBox = styled(Box)(() =>
   ({
-    root: {
-      height: '100%'
-    },
-    treeContainer: {
-      flexGrow: 1,
-      minHeight: 0,
-    },
-    boxText: {
-      paddingBottom: '5px'
-    },
-    noOverflow: {
-      overflow: 'hidden'
-    },
-    summaryContainer: {
-      flexGrow: 1,
-      minHeight: 0,
-      overflow: 'auto',
-    },
-    noteContainer: {
-      marginTop: '5px',
+    height: '100%',
+    '& .ImportExportServers-noOverflow': {
+      overflow: 'hidden',
+      '& .ImportExportServers-treeContainer': {
+        flexGrow: 1,
+        minHeight: 0,
+      },
+      '& .ImportExportServers-boxText': {
+        paddingBottom: '5px'
+      },
+      '& .ImportExportServers-summaryContainer': {
+        flexGrow: 1,
+        minHeight: 0,
+        overflow: 'auto',
+      },
+      '& .ImportExportServers-noteContainer': {
+        marginTop: '5px',
+      }
     }
-  }),
-);
+  }));
 
 export default function ImportExportServers({onClose}) {
-  const classes = useStyles();
-  const tableClasses = commonTableStyles();
 
   let steps = [gettext('Import/Export'), gettext('Database Servers'), gettext('Summary')];
   const [loaderText, setLoaderText] = React.useState('');
@@ -202,7 +196,7 @@ export default function ImportExportServers({onClose}) {
   };
 
   return (
-    <Box className={classes.root}>
+    <StyledBox>
       <Loader message={loaderText} />
       <Wizard
         title={gettext('Import/Export Servers')}
@@ -227,18 +221,18 @@ export default function ImportExportServers({onClose}) {
           />
           <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={errMsg} onClose={onErrClose} />
         </WizardStep>
-        <WizardStep stepId={1} className={classes.noOverflow}>
-          <Box className={classes.boxText}>{gettext('Select the Server Groups/Servers to import/export:')}</Box>
-          <Box className={classes.treeContainer}>
+        <WizardStep stepId={1} className='ImportExportServers-noOverflow'>
+          <Box className='ImportExportServers-boxText'>{gettext('Select the Server Groups/Servers to import/export:')}</Box>
+          <Box className='ImportExportServers-treeContainer'>
             <CheckBoxTree treeData={serverData} getSelectedServers={(selServers) => {
               setSelectedServers(selServers);
             }}/>
           </Box>
         </WizardStep>
-        <WizardStep stepId={2} className={classes.noOverflow}>
-          <Box className={classes.boxText}>{gettext(summaryText)}</Box>
-          <Paper variant="outlined" elevation={0} className={classes.summaryContainer}>
-            <table className={clsx(tableClasses.table)}>
+        <WizardStep stepId={2} className='ImportExportServers-noOverflow'>
+          <Box className='ImportExportServers-boxText'>{gettext(summaryText)}</Box>
+          <Paper variant="outlined" elevation={0} className='ImportExportServers-summaryContainer'>
+            <Table>
               <thead>
                 <tr>
                   <th>Server Group</th>
@@ -255,13 +249,13 @@ export default function ImportExportServers({onClose}) {
                   </tr>
                 ))}
               </tbody>
-            </table>
+            </Table>
           </Paper>
           {selectionFormData.imp_exp == 'i' &&
-          <FormNote className={classes.noteContainer} text={noteText}/> }
+          <FormNote className='ImportExportServers-noteContainer' text={noteText}/> }
         </WizardStep>
       </Wizard>
-    </Box>
+    </StyledBox>
   );
 }
 ImportExportServers.propTypes = {