DT-1110: Migrate away from @mui/styles Part 1 (#1730)

DataBiosphere · Jan 14, 2025 · 16254bc · 16254bc
1 parent 87a9b41
commit 16254bc
Show file tree

Hide file tree

Showing 14 changed files with 349 additions and 546 deletions.
diff --git a/src/components/DatasetView.tsx b/src/components/DatasetView.tsx
@@ -1,34 +1,15 @@
 import React, { Dispatch } from 'react';
 import { connect } from 'react-redux';
 import { Action } from 'redux';
-import { WithStyles, withStyles } from '@mui/styles';
+import { Box } from '@mui/material';
 import { getDatasets, addDatasetPolicyMember } from 'actions/index';
 import { DatasetSummaryModel } from 'generated/tdr';
-import { CustomTheme } from '@mui/material';
 import { TdrState } from 'reducers';
 import { OrderDirectionOptions } from 'reducers/query';
 import DatasetTable from './table/DatasetTable';
-
 import { DatasetRoles } from '../constants';
 
-const styles = (theme: CustomTheme) => ({
-  wrapper: {
-    display: 'flex',
-    justifyContent: 'center',
-    marginTop: '1em',
-  },
-  width: {
-    ...theme.mixins.containerWidth,
-  },
-  title: {
-    color: theme.palette.primary.main,
-    fontSize: '54px',
-    lineHeight: '66px',
-    paddingBottom: theme.spacing(8),
-  },
-});
-
-interface IProps extends WithStyles<typeof styles> {
+interface IProps {
   datasets: Array<DatasetSummaryModel>;
   datasetRoleMaps: { [key: string]: Array<string> };
   datasetsCount: number;
@@ -40,56 +21,59 @@ interface IProps extends WithStyles<typeof styles> {
   userEmail: string;
 }
 
-const DatasetView = withStyles(styles)(
-  ({
-    classes,
-    datasets,
-    datasetRoleMaps,
-    datasetsCount,
-    dispatch,
-    filteredDatasetsCount,
-    loading,
-    searchString,
-    refreshCnt,
-    userEmail,
-  }: IProps) => {
-    const handleFilterDatasets = (
-      limit: number,
-      offset: number,
-      sort: string,
-      sortDirection: OrderDirectionOptions,
-      search: string,
-    ) => {
-      dispatch(getDatasets(limit, offset, sort, sortDirection, search));
-    };
+function DatasetView({
+  datasets,
+  datasetRoleMaps,
+  datasetsCount,
+  dispatch,
+  filteredDatasetsCount,
+  loading,
+  searchString,
+  refreshCnt,
+  userEmail,
+}: IProps) {
+  const handleFilterDatasets = (
+    limit: number,
+    offset: number,
+    sort: string,
+    sortDirection: OrderDirectionOptions,
+    search: string,
+  ) => {
+    dispatch(getDatasets(limit, offset, sort, sortDirection, search));
+  };
 
-    const handleMakeSteward = (datasetId: string) => {
-      dispatch(addDatasetPolicyMember(datasetId, userEmail, DatasetRoles.STEWARD));
-    };
+  const handleMakeSteward = (datasetId: string) => {
+    dispatch(addDatasetPolicyMember(datasetId, userEmail, DatasetRoles.STEWARD));
+  };
 
-    return (
-      <div className={classes.wrapper}>
-        <div className={classes.width}>
-          <div>
-            {datasets && (
-              <DatasetTable
-                datasets={datasets}
-                datasetRoleMaps={datasetRoleMaps}
-                datasetsCount={datasetsCount}
-                handleFilterDatasets={handleFilterDatasets}
-                handleMakeSteward={handleMakeSteward}
-                filteredDatasetsCount={filteredDatasetsCount}
-                searchString={searchString}
-                loading={loading}
-                refreshCnt={refreshCnt}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        marginTop: '1em',
+      }}
+    >
+      <Box sx={{ width: '100%' }}>
+        <Box>
+          {datasets && (
+            <DatasetTable
+              datasets={datasets}
+              datasetRoleMaps={datasetRoleMaps}
+              datasetsCount={datasetsCount}
+              handleFilterDatasets={handleFilterDatasets}
+              handleMakeSteward={handleMakeSteward}
+              filteredDatasetsCount={filteredDatasetsCount}
+              searchString={searchString}
+              loading={loading}
+              refreshCnt={refreshCnt}
+            />
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
 
 function mapStateToProps(state: TdrState) {
   return {

diff --git a/src/components/HomeView.tsx b/src/components/HomeView.tsx
@@ -2,13 +2,10 @@ import React, { Dispatch, useState } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Action } from 'redux';
-
-import { Button } from '@mui/material';
+import { Button, Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { AddCircle, Refresh } from '@mui/icons-material';
-import { createStyles, WithStyles, withStyles } from '@mui/styles';
-import { CustomTheme } from '@mui/material/styles';
 import { RouterLocation, RouterRootState } from 'connected-react-router';
-import { LocationState } from 'history';
 import {
   getSnapshotAccessRequests,
   refreshDatasets,
@@ -18,76 +15,42 @@ import {
 } from 'src/actions';
 import { TdrState } from 'reducers';
 import { useOnMount } from 'libs/utils';
+import { LocationState } from 'history';
 import DatasetView from './DatasetView';
 import SnapshotView from './SnapshotView';
 import JobView from './JobView';
 import SearchTable from './table/SearchTable';
 import SnapshotAccessRequestView from './SnapshotAccessRequestView';
 
-const styles = (theme: CustomTheme) =>
-  createStyles({
-    pageRoot: {
-      padding: '16px 24px',
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-    },
-    header: {
-      alignItems: 'center',
-      color: theme.typography.color,
-      display: 'flex',
-      fontWeight: 500,
-      fontSize: 16,
-      height: 21,
-      letterSpacing: 1,
-    },
-    jadeTableSpacer: {
-      paddingBottom: theme.spacing(12),
-    },
-    jadeLink: {
-      ...theme.mixins.jadeLink,
-      float: 'right',
-      fontSize: 16,
-      fontWeight: 500,
-      height: 20,
-      letterSpacing: 0.3,
-      paddingLeft: theme.spacing(4),
-      paddingTop: theme.spacing(4),
-    },
-    title: {
-      color: theme.palette.secondary.dark,
-      fontSize: '1.5rem',
-      fontWeight: 700,
-      flex: '1 1 0',
-      'padding-right': '2em',
-      display: 'flex',
-    },
-    titleText: {
-      width: '150px',
-    },
-    titleAndSearch: {
-      display: 'flex',
-      'margin-top': '1.25em',
-      'margin-bottom': '1.25em',
-    },
-    headerButton: {
-      padding: 10,
-      marginLeft: theme.spacing(2),
-      height: '45px',
-      textTransform: 'none',
-    },
-    buttonIcon: {
-      marginRight: 6,
-      fontSize: '1.5rem',
-    },
-  });
+const RootContainer = styled(Box)({
+  padding: '16px 24px',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+});
+
+const TitleContainer = styled(Box)(({ theme }) => ({
+  color: theme.palette.secondary.dark,
+  fontSize: '1.5rem',
+  fontWeight: 700,
+  flex: '1 1 0',
+  paddingRight: '2em',
+  display: 'flex',
+}));
+
+const HeaderButton = styled(Button)({
+  padding: '10px',
+  marginLeft: '16px',
+  height: '45px',
+  textTransform: 'none',
+});
 
-interface IProps extends WithStyles<typeof styles> {
+interface IProps {
   dispatch: Dispatch<Action>;
   location: RouterLocation<LocationState>;
 }
 
-function HomeView({ classes, dispatch, location }: IProps) {
+function HomeView({ dispatch, location }: IProps) {
   const [searchString, setSearchString] = useState('');
   const prefixMatcher = /\/[^/]*/;
   const tabValue = prefixMatcher.exec(location.pathname)?.[0];
@@ -115,48 +78,41 @@ function HomeView({ classes, dispatch, location }: IProps) {
     refresh = () => dispatch(refreshSnapshotAccessRequests());
   }
   const refreshButton = (
-    <Button
+    <HeaderButton
       aria-label="refresh page"
       size="medium"
-      className={classes.headerButton}
       onClick={refresh}
       variant="outlined"
       startIcon={<Refresh />}
     >
       Refresh
-    </Button>
+    </HeaderButton>
   );
   const pageHeader =
     tabValue === '/datasets' ? (
-      <div className={classes.title}>
-        <span className={classes.titleText}>{pageTitle}</span>
+      <TitleContainer>
+        <Box sx={{ width: '150px' }}>{pageTitle}</Box>
         {refreshButton}
         <Link to="datasets/new" data-cy="create-dataset-link">
-          <Button
-            className={classes.headerButton}
-            color="primary"
-            variant="outlined"
-            disableElevation
-            size="medium"
-          >
-            <AddCircle className={classes.buttonIcon} /> Create Dataset
-          </Button>
+          <HeaderButton color="primary" variant="outlined" disableElevation size="medium">
+            <AddCircle sx={{ marginRight: '6px', fontSize: '1.5rem' }} /> Create Dataset
+          </HeaderButton>
         </Link>
-      </div>
+      </TitleContainer>
     ) : (
-      <div className={classes.title}>
-        <span className={classes.titleText}>{pageTitle}</span>
+      <TitleContainer>
+        <Box sx={{ width: '150px' }}>{pageTitle}</Box>
         {refreshButton}
-      </div>
+      </TitleContainer>
     );
 
   useOnMount(() => {
     dispatch(getSnapshotAccessRequests());
   });
 
   return (
-    <div className={classes.pageRoot}>
-      <div className={classes.titleAndSearch}>
+    <RootContainer>
+      <Box sx={{ display: 'flex', marginTop: '1.25em', marginBottom: '1.25em' }}>
         {pageHeader}
         {searchable && (
           <SearchTable
@@ -165,9 +121,9 @@ function HomeView({ classes, dispatch, location }: IProps) {
             clearSearchString={() => setSearchString('')}
           />
         )}
-      </div>
+      </Box>
       {tableValue}
-    </div>
+    </RootContainer>
   );
 }
 
@@ -177,4 +133,4 @@ function mapStateToProps(state: TdrState & RouterRootState) {
   };
 }
 
-export default connect(mapStateToProps)(withStyles(styles)(HomeView));
+export default connect(mapStateToProps)(HomeView);