DT-1152: Migrate Components from @mui/styles (#1751)

Author: rushtong

src/components/common/AddUserAccess.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import _ from 'lodash';
-import { CustomTheme } from '@mui/material/styles';
-import { createStyles, WithStyles, withStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import {
   Typography,
   Autocomplete,
@@ -10,63 +9,31 @@ import {
   SelectChangeEvent,
   MenuItem,
   Button,
+  Box,
 } from '@mui/material';
-import clsx from 'clsx';
 import isEmail from 'validator/lib/isEmail';
 
-const styles = (theme: CustomTheme) =>
-  createStyles({
-    sharingArea: {
-      display: 'flex',
-      'flex-direction': 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-    },
-    emailEntryArea: {
-      display: 'flex',
-    },
-    sharingCol: {
-      flexGrow: 1,
-      marginRight: '1rem',
-    },
-    permissionsCol: {
-      flexGrow: 'unset',
-      width: 150,
-    },
-    input: {
-      backgroundColor: theme.palette.common.white,
-      borderRadius: theme.spacing(0.5),
-    },
-    sharingButtonContainer: {
-      paddingTop: 22,
-    },
-    button: {
-      backgroundColor: theme.palette.common.link,
-      color: theme.palette.common.white,
-      '&:hover': {
-        backgroundColor: theme.palette.common.link,
-      },
-    },
-    section: {
-      margin: `${theme.spacing(1)} 0px`,
-      overflowX: 'hidden',
-    },
-    errMessage: {
-      color: theme.palette.error.main,
-    },
-  });
+// Styled components (>3 styles)
+const SharingArea = styled(Box)({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
 
 export interface AccessPermission {
   policy: string;
   disabled: boolean;
 }
 
-interface AddUserAccessProps extends WithStyles<typeof styles> {
-  permissions: AccessPermission[];
-  onAdd: (policyName: string, usersToAdd: string[]) => void;
+interface AddUserAccessProps {
+  readonly permissions: AccessPermission[];
+  readonly onAdd: (policyName: string, usersToAdd: string[]) => void;
 }
 
-function AddUserAccess({ classes, permissions, onAdd }: AddUserAccessProps) {
+// The rest can use sx prop as they have ≤3 styles
+function AddUserAccess(props: AddUserAccessProps) {
+  const { permissions, onAdd } = props;
   const [policyName, setPolicyName] = useState(permissions[0].policy);
   const permissionDisplays = permissions.map((perm) =>
     perm.policy
@@ -123,8 +90,8 @@ function AddUserAccess({ classes, permissions, onAdd }: AddUserAccessProps) {
 
   return (
     <>
-      <div className={classes.sharingArea} data-cy="manageAccessContainer">
-        <div className={classes.sharingCol}>
+      <SharingArea data-cy="manageAccessContainer">
+        <Box sx={{ flexGrow: 1, marginRight: '1rem' }}>
           <Typography variant="subtitle2">People</Typography>
           <Autocomplete
             multiple
@@ -134,7 +101,10 @@ function AddUserAccess({ classes, permissions, onAdd }: AddUserAccessProps) {
                 {...params}
                 variant="outlined"
                 fullWidth
-                className={classes.input}
+                sx={{
+                  backgroundColor: 'common.white',
+                  borderRadius: 0.5,
+                }}
                 placeholder="enter email addresses"
                 onChange={parseEmail}
                 data-cy="enterEmailBox"
@@ -145,14 +115,23 @@ function AddUserAccess({ classes, permissions, onAdd }: AddUserAccessProps) {
             inputValue={addEmailInput}
             options={[]}
           />
-        </div>
-        <div className={clsx(classes.sharingCol, classes.permissionsCol)}>
+        </Box>
+        <Box
+          sx={{
+            flexGrow: 'unset',
+            width: '150px',
+            marginRight: '1rem',
+          }}
+        >
           <Typography variant="subtitle2">Permissions</Typography>
           <Select
             value={policyName}
             variant="outlined"
-            className={classes.input}
             fullWidth
+            sx={{
+              backgroundColor: 'common.white',
+              borderRadius: 0.5,
+            }}
             onChange={(event: SelectChangeEvent) => setPolicyName(event.target.value)}
             data-cy="roleSelect"
           >
@@ -167,24 +146,31 @@ function AddUserAccess({ classes, permissions, onAdd }: AddUserAccessProps) {
               </MenuItem>
             ))}
           </Select>
-        </div>
-        <div className={classes.sharingButtonContainer}>
+        </Box>
+        <Box sx={{ paddingTop: '22px' }}>
           <Button
             variant="contained"
             color="primary"
             disableElevation
             disabled={!isEmail(addEmailInput) && !_.some(usersToAdd, (user) => isEmail(user))}
-            className={clsx(classes.button, classes.section)}
+            sx={{
+              backgroundColor: 'common.link',
+              color: 'common.white',
+              margin: '8px 0px',
+              '&:hover': {
+                backgroundColor: 'common.link',
+              },
+            }}
             onClick={invite}
             data-cy="inviteButton"
           >
             Add
           </Button>
-        </div>
-      </div>
-      {err && <div className={classes.errMessage}>{err}</div>}
+        </Box>
+      </SharingArea>
+      {err && <Box sx={{ color: 'error.main' }}>{err}</Box>}
     </>
   );
 }
 
-export default withStyles(styles)(AddUserAccess);
+export default AddUserAccess;

src/components/common/Failure.jsx

@@ -1,35 +1,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@mui/styles';
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
 import ErrorIcon from 'media/icons/warning-standard-solid.svg?react';
 
-const styles = (theme) => ({
-  text: {
-    alignSelf: 'center',
-    fontFamily: theme.typography.fontFamily,
-    fontSize: 12,
-    fontWeight: 600,
-    padding: `0 0 0 ${theme.spacing(2)}px`,
-  },
-  icon: {
-    fill: theme.palette.primary.contrastText,
-    height: theme.spacing(4),
-  },
-});
+// Use styled component for text since it has >3 styles
+const StyledText = styled(Box)(({ theme }) => ({
+  alignSelf: 'center',
+  fontFamily: theme.typography.fontFamily,
+  fontSize: '12px',
+  fontWeight: 600,
+  padding: `0 0 0 ${theme.spacing(2)}`,
+}));
 
-function Failure({ errString, classes }) {
+function Failure({ errString }) {
+  // Use sx prop for icon since it has ≤3 styles
   return (
-    <div>
-      <ErrorIcon className={classes.icon} alt="logo" />
-      <div className={classes.text}>{errString}</div>
-    </div>
+    <Box>
+      <ErrorIcon
+        sx={{
+          fill: (theme) => theme.palette.primary.contrastText,
+          height: (theme) => theme.spacing(4),
+        }}
+        alt="logo"
+      />
+      <StyledText>{errString}</StyledText>
+    </Box>
   );
 }
 
 Failure.propTypes = {
-  classes: PropTypes.object.isRequired,
   errString: PropTypes.string,
 };
 
-export default withStyles(styles)(Failure);
+export default Failure;

src/components/common/FullViewSnapshotButton.test.tsx

@@ -1,6 +1,6 @@
 import { mount } from 'cypress/react';
 import { Router } from 'react-router-dom';
-import { ThemeProvider } from '@mui/styles';
+import { ThemeProvider } from '@mui/material/styles';
 import { Provider } from 'react-redux';
 import React from 'react';
 import createMockStore from 'redux-mock-store';

src/components/common/FullViewSnapshotButton.tsx

@@ -14,8 +14,11 @@ import {
   FormLabel,
   Link,
   TextField,
+  Box,
   CustomTheme,
+  useTheme,
 } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import React, { Dispatch } from 'react';
 import {
   BillingProfileModel,
@@ -25,28 +28,23 @@ import {
 import { Action } from 'redux';
 import { connect } from 'react-redux';
 import { isEmpty, now, uniq } from 'lodash';
-import { createStyles, withStyles, WithStyles } from '@mui/styles';
 import { ManagedGroupMembershipEntry } from 'models/group';
 import TerraTooltip from './TerraTooltip';
 import JadeDropdown from '../dataset/data/JadeDropdown';
 import { useOnMount } from '../../libs/utils';
 
-const styles = (theme: CustomTheme) =>
-  createStyles({
-    jadeLink: {
-      ...theme.mixins.jadeLink,
-    },
-  });
+const StyledLink = styled('span')(({ theme }: { theme: CustomTheme }) => ({
+  ...theme.mixins.jadeLink,
+}));
 
-interface FullViewSnapshotButtonProps extends WithStyles<typeof styles> {
+interface FullViewSnapshotButtonProps {
   dispatch: Dispatch<Action>;
   dataset: DatasetModel;
   billingProfiles: Array<BillingProfileModel>;
   userGroups: Array<ManagedGroupMembershipEntry>;
 }
 
 function FullViewSnapshotButton({
-  classes,
   dataset,
   dispatch,
   billingProfiles,
@@ -120,7 +118,7 @@ function FullViewSnapshotButton({
         <DialogTitle id="customized-dialog-title" sx={{ fontSize: '1rem' }}>
           Creating snapshot - select a billing project
         </DialogTitle>
-        <div style={{ padding: '0px 24px 16px 24px' }}>
+        <Box sx={{ padding: '0px 24px 16px 24px' }}>
           <FormLabel sx={{ fontWeight: 600, color: 'black' }} htmlFor="snapshot-name" required>
             Snapshot Name
           </FormLabel>
@@ -151,15 +149,15 @@ function FullViewSnapshotButton({
             Do you want to use the Google Billing Project associated with this dataset or would you
             like to select a different one?
           </Typography>
-          <div style={{ marginTop: 8 }}>
+          <Box sx={{ marginTop: '8px' }}>
             <FormLabel
               sx={{ fontWeight: 600, color: 'black' }}
               htmlFor="billing-profile-select"
               required
             >
               Google Billing Project
             </FormLabel>
-          </div>
+          </Box>
           <JadeDropdown
             sx={{ height: '2.5rem' }}
             disabled={billingProfiles.length <= 1}
@@ -178,15 +176,18 @@ function FullViewSnapshotButton({
             }
             value={selectedBillingProfile?.profileName || ''}
           />
-          <div style={{ marginTop: 8 }}>
+          <Box sx={{ marginTop: '8px' }}>
             <FormLabel
               sx={{ fontWeight: 600, color: 'black' }}
               htmlFor="select-authorization-domain-select"
             >
               Authorization Domain
-              <span style={{ fontWeight: 400, color: 'black' }}> - (optional)</span>
+              <Box component="span" sx={{ fontWeight: 400, color: 'black' }}>
+                {' '}
+                - (optional)
+              </Box>
             </FormLabel>
-          </div>
+          </Box>
           <JadeDropdown
             sx={{ height: '2.5rem' }}
             disabled={userGroups ? userGroups.length <= 1 : true}
@@ -196,7 +197,7 @@ function FullViewSnapshotButton({
             value={selectedAuthDomain || ''}
             includeNoneOption={true}
           />
-          <div>
+          <Box>
             Authorization Domains restrict data access to only specified individuals in a group and
             are intended to fulfill requirements you may have for data governed by a compliance
             standard, such as federal controlled-access data or HIPAA protected data. They follow
@@ -205,10 +206,10 @@ function FullViewSnapshotButton({
               href="https://support.terra.bio/hc/en-us/articles/360026775691-Overview-Managing-access-to-controlled-data-with-Authorization-Domains#h_01J94P49XS1NE5KE4B3NA3A413"
               target="_blank"
             >
-              <span className={classes.jadeLink}>When to use an Authorization Domain</span>
+              <StyledLink theme={useTheme()}>When to use an Authorization Domain</StyledLink>
             </Link>
             .
-          </div>
+          </Box>
           <DialogActions sx={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Button onClick={onDismiss} variant="outlined">
               Cancel
@@ -226,7 +227,7 @@ function FullViewSnapshotButton({
               Create
             </Button>
           </DialogActions>
-        </div>
+        </Box>
       </Dialog>
     </>
   );
@@ -240,4 +241,4 @@ function mapStateToProps(state: TdrState) {
   };
 }
 
-export default connect(mapStateToProps)(withStyles(styles)(FullViewSnapshotButton));
+export default connect(mapStateToProps)(FullViewSnapshotButton);