[DT-1151] Migrate away from @mui/styles - part 3 - src/components

src/components/EditableFieldView.tsx

@@ -1,57 +1,34 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import ReactDOMServer from 'react-dom/server';
-import { CustomTheme } from '@mui/material/styles';
-import { Button, CircularProgress, IconButton, TextField, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, IconButton, TextField, Typography } from '@mui/material';
+import { styled } from '@mui/system';
 import { SimpleMdeReact } from 'react-simplemde-editor';
 import SimpleMDE from 'easymde';
 import 'easymde/dist/easymde.min.css';
-import { createStyles, WithStyles, withStyles } from '@mui/styles';
 import TextContent from './common/TextContent';
 import WithoutStylesMarkdownContent from './common/WithoutStylesMarkdownContent';
 import InfoHoverButton from './common/InfoHoverButton';
 
-const styles = (theme: CustomTheme) =>
-  createStyles({
-    editor: {
-      width: '100%',
-      display: 'flex',
-      alignItems: 'top',
-    },
-    markdownPreview: {
-      width: '100%',
-      display: 'flex',
-      textAlign: 'left',
-    },
-    textInputDiv: {
-      width: '100%',
-    },
-    textInput: {
-      width: '100%',
-    },
-    editIconButton: {
-      boxShadow: 'none',
-      color: theme.palette.primary.main,
-      marginTop: '-8px',
-      marginBottom: '-6px',
-      '&:hover': {
-        color: theme.palette.primary.hover,
-      },
-    },
-    saveButton: {
-      boxShadow: 'none',
-      margin: theme.spacing(1),
-      '&:hover': {
-        backgroundColor: theme.palette.primary.hover,
-        boxShadow: 'none',
-      },
-    },
-    title: {
-      display: 'inline',
-      textAlign: 'center',
-    },
-  } as const);
+const EditIconButton = styled(IconButton)(({ theme }) => ({
+  boxShadow: 'none',
+  color: theme.palette.primary.main,
+  marginTop: '-8px',
+  marginBottom: '-6px',
+  '&:hover': {
+    color: theme.palette.primary.hover,
+  },
+}));
+
+const SaveButton = styled(Button)(({ theme }) => ({
+  boxShadow: 'none',
+  margin: theme.spacing(1),
+  '&:hover': {
+    backgroundColor: theme.palette.primary.hover,
+    boxShadow: 'none',
+  },
+}));
 
-interface EditableFieldViewProps extends WithStyles<typeof styles> {
+interface EditableFieldViewProps {
   canEdit: boolean;
   isPendingSave: boolean;
   fieldValue: string | undefined;
@@ -64,7 +41,6 @@ interface EditableFieldViewProps extends WithStyles<typeof styles> {
 function EditableFieldView({
   canEdit,
   isPendingSave,
-  classes,
   fieldValue,
   fieldName,
   infoButtonText,
@@ -133,41 +109,40 @@ function EditableFieldView({
   }, [fieldValue]);
 
   return (
-    <div data-cy={`${cypressFieldNameFormatted}-editable-field-view`}>
-      <div>
+    <Box data-cy={`${cypressFieldNameFormatted}-editable-field-view`}>
+      <Box>
         <Typography
-          className={classes.title}
+          sx={{ display: 'inline', textAlign: 'center' }}
           data-cy={`${cypressFieldNameFormatted}-field-name`}
           variant="h6"
         >
           {`${fieldName}:`}
           {canEdit && (
-            <IconButton
+            <EditIconButton
               aria-label={`Edit ${fieldName}`}
-              className={classes.editIconButton}
               data-cy={`${cypressFieldNameFormatted}-edit-button`}
               disableFocusRipple={true}
               disableRipple={true}
               onClick={onEditClick}
             >
               <i className="fa-solid fa-pen-circle" />
-            </IconButton>
+            </EditIconButton>
           )}
           {infoButtonText && <InfoHoverButton infoText={infoButtonText} fieldName={fieldName} />}
         </Typography>
-      </div>
+      </Box>
       {!canEdit && (
-        <span className={classes.markdownPreview}>
+        <Box sx={{ width: '100%', display: 'flex', textAlign: 'left' }}>
           <TextContent text={updatedFieldValue} markdown={true} />
-        </span>
+        </Box>
       )}
       {canEdit && (
-        <div className={classes.editor}>
-          <div className={classes.textInputDiv}>
+        <Box sx={{ width: '100%', display: 'flex', alignItems: 'top' }}>
+          <Box sx={{ width: '100%' }}>
             {!isEditing && (
-              <span className={classes.markdownPreview}>
+              <Box sx={{ width: '100%', display: 'flex', textAlign: 'left' }}>
                 <TextContent text={updatedFieldValue} markdown={true} />
-              </span>
+              </Box>
             )}
             {isEditing && (
               <>
@@ -181,17 +156,16 @@ function EditableFieldView({
                 {!useMarkdown && (
                   <TextField
                     id="outlined-basic"
-                    className={classes.textInput}
+                    sx={{ width: '100%' }}
                     data-cy={`${cypressFieldNameFormatted}-text-field`}
                     defaultValue={updatedFieldValue}
                     disabled={isPendingSave}
                     onChange={onChangeEvent}
                     variant="outlined"
                   />
                 )}
-                <Button
+                <SaveButton
                   aria-label={`Save ${fieldName} changes`}
-                  className={classes.saveButton}
                   color="primary"
                   data-cy={`${cypressFieldNameFormatted}-save-button`}
                   disabled={!hasFieldValueChanged || isPendingSave}
@@ -200,7 +174,7 @@ function EditableFieldView({
                   variant="contained"
                 >
                   {isPendingSave ? <CircularProgress size={25} /> : 'SAVE'}
-                </Button>
+                </SaveButton>
                 <Button
                   aria-label={`Cancel ${fieldName} changes`}
                   data-cy={`${cypressFieldNameFormatted}-cancel-button`}
@@ -215,10 +189,11 @@ function EditableFieldView({
                 </Button>
               </>
             )}
-          </div>
-        </div>
+          </Box>
+        </Box>
       )}
-    </div>
+    </Box>
   );
 }
-export default withStyles(styles)(EditableFieldView);
+
+export default EditableFieldView;

src/components/IdleStatusMonitor.jsx

@@ -1,27 +1,25 @@
 import _ from 'lodash/fp';
 import React, { useEffect, useState } from 'react';
-import { lastActiveTimeStore } from 'libs/state'; // stub
+import { lastActiveTimeStore } from 'libs/state';
 import * as Utils from 'libs/utils';
 import PropTypes from 'prop-types';
-import { Dialog, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material';
-import { withStyles } from '@mui/styles';
+import { Box, Dialog, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material';
+import { styled } from '@mui/system';
 import moment from 'moment';
 
-// Styles
-const styles = (theme) => ({
-  buttonBar: {
-    marginTop: '1rem',
-    display: 'flex',
-    alignItem: 'baseline',
-    justifyContent: 'flex-end',
-  },
-  timer: {
-    color: theme?.palette.primary.dark,
-    whiteSpace: 'pre',
-    textAlign: 'center',
-    fontSize: '4rem',
-  },
-});
+const ButtonBar = styled(Box)(({ theme }) => ({
+  marginTop: '1rem',
+  display: 'flex',
+  alignItems: 'baseline',
+  justifyContent: 'flex-end',
+}));
+
+const Timer = styled(Box)(({ theme }) => ({
+  color: theme?.palette.primary.dark,
+  whiteSpace: 'pre',
+  textAlign: 'center',
+  fontSize: '4rem',
+}));
 
 // Helpers
 const displayRemainingTime = (remainingSeconds) => {
@@ -50,23 +48,25 @@ const getIdleData = ({ currentTime, lastRecordedActivity, timeout, countdownStar
 };
 
 // Components
-const CountdownModal = withStyles(styles)(({ classes, onSignOut, countdown }) => (
-  <Dialog open={true}>
-    <DialogTitle>Your session is about to expire!</DialogTitle>
-    <DialogContent>
-      <DialogContentText>
-        To maintain security and protect clinical data, you will be logged out in
-      </DialogContentText>
-      <div className={classes.timer}>{displayRemainingTime(countdown / 1000)}</div>
-      <DialogContentText>You can extend your session to continue working</DialogContentText>
-      <div className={classes.buttonBar}>
-        <Button>Extend Session</Button>
-        {/* For this specific dialog, we need to use a mousedown to handle the log out before the timeout is reset */}
-        <Button onMouseDown={onSignOut}>Log Out</Button>
-      </div>
-    </DialogContent>
-  </Dialog>
-));
+function CountdownModal({ onSignOut, countdown }) {
+  return (
+    <Dialog open={true}>
+      <DialogTitle>Your session is about to expire!</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          To maintain security and protect clinical data, you will be logged out in
+        </DialogContentText>
+        <Timer>{displayRemainingTime(countdown / 1000)}</Timer>
+        <DialogContentText>You can extend your session to continue working</DialogContentText>
+        <ButtonBar>
+          <Button>Extend Session</Button>
+          {/* For this specific dialog, we need to use a mousedown to handle the log out before the timeout is reset */}
+          <Button onMouseDown={onSignOut}>Log Out</Button>
+        </ButtonBar>
+      </DialogContent>
+    </Dialog>
+  );
+}
 
 CountdownModal.propTypes = {
   countdown: PropTypes.number,
@@ -141,12 +141,12 @@ LogoutIframe.propTypes = {
   id: PropTypes.string.isRequired,
 };
 
-export const IdleStatusMonitor = ({
+export function IdleStatusMonitor({
   timeout = moment.duration(15, 'minutes').asMilliseconds(),
   countdownStart = moment.duration(13, 'minutes').asMilliseconds(),
   user = {},
   signOut,
-}) => {
+}) {
   // State
   const [signOutRequired, setSignOutRequired] = useState(false);
 
@@ -175,4 +175,4 @@ export const IdleStatusMonitor = ({
     ],
     () => null,
   );
-};
+}

src/components/Logo.jsx

@@ -1,48 +1,42 @@
 import React from 'react';
-import { withStyles } from '@mui/styles';
-import PropTypes from 'prop-types';
+import { Box, Typography } from '@mui/material';
+import { styled } from '@mui/system';
 import { push } from 'modules/hist';
 
 import TerraIcon from 'media/brand/logo-wShadow.svg?react';
 
-const styles = (theme) => ({
-  logoContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-  },
-  logo: {
-    alignItems: 'flex-start',
-    display: 'inline-flex',
-    height: theme.spacing(8),
-  },
-  logoTitle: {
-    color: '#fff',
-    fontFamily: theme.typography.fontFamily,
-    fontSize: '18px',
-    fontWeight: '500',
-    paddingLeft: theme.spacing(1),
-  },
-});
+const StyledTitle = styled(Typography)(({ theme }) => ({
+  color: '#fff',
+  fontFamily: theme.typography.fontFamily,
+  fontSize: '18px',
+  fontWeight: '500',
+  paddingLeft: theme.spacing(1),
+}));
 
-class Logo extends React.PureComponent {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-  };
+const StyledTerraIcon = styled(TerraIcon)(({ theme }) => ({
+  alignItems: 'flex-start',
+  display: 'inline-flex',
+  height: theme.spacing(8),
+}));
 
-  handleGoHome = () => {
+function Logo() {
+  const handleGoHome = () => {
     push('/');
   };
 
-  render() {
-    const { classes } = this.props;
-    return (
-      <div className={classes.logoContainer} onClick={this.handleGoHome}>
-        <TerraIcon className={classes.logo} alt="logo" />
-        <span className={classes.logoTitle}>Data Repository</span>
-      </div>
-    );
-  }
+  return (
+    <Box
+      onClick={handleGoHome}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'pointer',
+      }}
+    >
+      <StyledTerraIcon alt="logo" />
+      <StyledTitle>Data Repository</StyledTitle>
+    </Box>
+  );
 }
 
-export default withStyles(styles)(Logo);
+export default Logo;