418 FE deps update fix UI bugs and unmerging issue (#422)

* 418 FE deps update fix UI bugs and unmerging issue * codacy issue: restore newlines * simplify Alert component (linting)
tl-its-umich-edu · Mar 26, 2024 · f3ef65e · f3ef65e
1 parent c7c79b1
commit f3ef65e
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 140 deletions.
diff --git a/ccm_web/client/src/components/Alert.tsx b/ccm_web/client/src/components/Alert.tsx
@@ -2,41 +2,29 @@ import React from 'react'
 import { styled } from '@mui/material/styles'
 import { Grid, Paper, Typography } from '@mui/material'
 
-const PREFIX = 'Alert'
+const StyledGrid = styled(Grid)(() => ({
+  margin: 'auto'
 
-const classes = {
-  padding: `${PREFIX}-padding`,
-  standalone: `${PREFIX}-standalone`,
-  dialog: `${PREFIX}-dialog`
-}
+}))
 
-const StyledGrid = styled(Grid)((
+const StyledCorePaper = styled(Paper)((
   {
     theme
   }
 ) => ({
-  [`& .${classes.padding}`]: {
-    padding: theme.spacing(1)
-  },
-
-  [`&.${classes.standalone}`]: {
+  textAlign: 'center',
+  padding: theme.spacing(1),
+  margin: 'auto',
+  marginTop: 30,
+  marginBottom: 15,
+  '& ol': {
     margin: 'auto'
   },
-
-  [`& .${classes.dialog}`]: {
-    textAlign: 'center',
-    margin: 'auto',
-    marginTop: 30,
-    marginBottom: 15,
-    '& ol': {
-      margin: 'auto'
-    },
-    '& li': {
-      textAlign: 'left',
-      marginBottom: 10
-    }
+  '& li': {
+    textAlign: 'left',
+    marginBottom: 10
   }
-}))
+  }));
 
 interface AlertProps {
   children: React.ReactNode
@@ -49,16 +37,16 @@ export default function Alert (props: AlertProps): JSX.Element {
   const { title, icon, embedded, children } = props
 
   const core = (
-    <Paper className={`${classes.dialog} ${classes.padding}`} role='alert'>
+    <StyledCorePaper role='alert'>
       <Typography gutterBottom>{title}</Typography>
       {icon}
       {children}
-    </Paper>
+    </StyledCorePaper>
   )
 
   if (embedded === true) return core
   return (
-    <StyledGrid item xs={12} sm={9} md={6} className={classes.standalone}>
+    <StyledGrid item xs={12} sm={9} md={6}>
       {core}
     </StyledGrid>
   )

diff --git a/ccm_web/client/src/components/CustomTable.tsx b/ccm_web/client/src/components/CustomTable.tsx
@@ -78,10 +78,6 @@ function CustomTable<T extends TableEntity> (props: TableProps<T>): JSX.Element
               count={tableRows.length}
               rowsPerPage={rowsPerPage}
               page={page}
-              SelectProps={{
-                inputProps: { 'aria-label': 'rows per page' },
-                native: true
-              }}
               onPageChange={handleChangePage}
               ActionsComponent={TablePaginationActions}
               aria-live='polite'

diff --git a/ccm_web/client/src/components/ErrorAlert.tsx b/ccm_web/client/src/components/ErrorAlert.tsx
@@ -11,12 +11,12 @@ const classes = {
   dialogIcon: `${PREFIX}-dialogIcon`
 }
 
-const StyledAlert = styled(Alert)((
+const StyledErrorIcon = styled(ErrorIcon)((
   {
     theme
   }
 ) => ({
-  [`& .${classes.dialogIcon}`]: {
+  [`&.${classes.dialogIcon}`]: {
     color: theme.palette.error.main
   }
 }))
@@ -42,14 +42,14 @@ export default function ErrorAlert (props: ErrorAlertProps): JSX.Element {
       : <ol>{messages.map((m, i) => <li key={i}>{m}</li>)}</ol>
 
   return (
-    <StyledAlert
+    <Alert
       title={title !== undefined ? title : 'Some errors occurred'}
-      icon={icon !== undefined ? icon : <ErrorIcon className={classes.dialogIcon} fontSize='large' />}
+      icon={icon !== undefined ? icon : <StyledErrorIcon className={classes.dialogIcon} fontSize='large' />}
       embedded={embedded}
     >
       {Boolean(messages?.length) && preface}
       {messageBlock}
       {tryAgain !== undefined && <Button color='primary' onClick={props.tryAgain}>Try Again</Button>}
-    </StyledAlert>
+    </Alert>
   )
 }
diff --git a/ccm_web/client/src/components/InlineTextEdit.tsx b/ccm_web/client/src/components/InlineTextEdit.tsx
@@ -107,6 +107,7 @@ function InlineTextEdit (props: InlineTextEditProps): JSX.Element {
                   <Grid item md={9} sm={7} xs={7}>
                     <TextField
                       className={classes.buttonSep}
+                      variant='standard'
                       aria-readonly={false}
                       onClick={toggleEdit}
                       fullWidth={true}
@@ -149,7 +150,7 @@ function InlineTextEdit (props: InlineTextEditProps): JSX.Element {
             )
           : (
               <>
-              <Typography className={classes.buttonSep} variant='inherit'>{props.text}</Typography>
+              <Typography className={classes.buttonSep} variant='inherit' component="span">{props.text}</Typography>
               <Button onClick={toggleEdit} disabled={props.isSaving} aria-label='Edit course name'>
                 <EditIcon className={classes.editIcon} style={{ fontSize: props.fontSize }} />
               </Button>

diff --git a/ccm_web/client/src/components/SectionSelectorWidget.tsx b/ccm_web/client/src/components/SectionSelectorWidget.tsx
@@ -65,7 +65,7 @@ const Root = styled('div')((
   [`& .${classes.listContainer}`]: {
     overflow: 'auto',
     marginBottom: '5px',
-    '&& .Mui-disabled': {
+    '& .Mui-disabled': {
       opacity: 1,
       '& > .MuiListItemAvatar-root': {
         opacity: theme.palette.action.disabledOpacity
@@ -85,7 +85,12 @@ const Root = styled('div')((
 
   [`& .${classes.listItemRoot}`]: {
     paddingTop: '0px',
-    paddingBottom: '0px'
+    paddingBottom: '0px',
+    paddingRight: '0px',
+    display: 'block',
+    '& > .MuiListItemSecondaryAction-root': {
+      position: 'relative',
+    },
   },
 
   [`& .${classes.listButton}`]: {
@@ -174,7 +179,8 @@ const Root = styled('div')((
   },
 
   [`& .${classes.button}`]: {
-    margin: theme.spacing(1)
+    margin: theme.spacing(1),
+    marginLeft: '24px'
   }
 }))
 
@@ -354,8 +360,8 @@ function SectionSelectorWidget (props: ISectionSelectorWidgetProps): JSX.Element
 
   const getSearchTypeAdornment = (): JSX.Element => {
     return (
-      <FormControl className={classes.searchEndAdnornment}>
-      <InputLabel id="demo-simple-select-label">Search By</InputLabel>
+      <FormControl variant="standard" className={classes.searchEndAdnornment}>
+        <InputLabel id="demo-simple-select-label">Search By</InputLabel>
       <Select
         labelId="demo-simple-select-label"
         id="demo-simple-select"
@@ -419,7 +425,6 @@ function SectionSelectorWidget (props: ISectionSelectorWidgetProps): JSX.Element
                 </Typography>
               )
             }
-            {unmergeButton(section)}
             <span style={props.showCourseName === true ? { float: 'right' } : undefined}>
               {`${section.total_students ?? '?'} students`}
             </span>
@@ -594,7 +599,7 @@ function SectionSelectorWidget (props: ISectionSelectorWidgetProps): JSX.Element
                 divider
                 disableGutters
                 classes={{ root: classes.listItemRoot }}
-                selected={isSelected}
+                secondaryAction={unmergeButton(section)}
                 className={(section.locked !== true && props.highlightUnlocked === true) ? classes.highlighted : undefined}
               >
                 <ButtonBase

diff --git a/ccm_web/client/src/components/TablePagination.tsx b/ccm_web/client/src/components/TablePagination.tsx
@@ -8,7 +8,7 @@ const classes = {
 }
 
 const Root = styled('div')(({ theme }) => ({
-  [`& .${classes.root}`]: {
+  [`&.${classes.root}`]: {
     flexShrink: 0,
     marginLeft: theme.spacing(2.5)
   }

diff --git a/ccm_web/client/src/components/WorkflowStepper.tsx b/ccm_web/client/src/components/WorkflowStepper.tsx
@@ -15,6 +15,7 @@ const StyledMUIStepper = styled(MUIStepper)((
 ) => ({
   [`&.${classes.stepper}`]: {
     textAlign: 'center',
+    padding: 24,
     paddingTop: theme.spacing(2)
   }
 }))

diff --git a/ccm_web/client/src/pages/BulkSectionCreate.tsx b/ccm_web/client/src/pages/BulkSectionCreate.tsx
@@ -46,7 +46,7 @@ const Root = styled('div')((
     theme
   }
 ) => ({
-  [`& .${classes.root}`]: {
+  [`&.${classes.root}`]: {
     textAlign: 'left'
   },
 

diff --git a/ccm_web/client/src/pages/FormatThirdPartyGradebook.tsx b/ccm_web/client/src/pages/FormatThirdPartyGradebook.tsx
@@ -46,7 +46,7 @@ const Root = styled('div')((
     theme
   }
 ) => ({
-  [`& .${classes.root}`]: {
+  [`&.${classes.root}`]: {
     textAlign: 'left'
   },
 

diff --git a/ccm_web/client/src/pages/GradebookCanvas.tsx b/ccm_web/client/src/pages/GradebookCanvas.tsx
@@ -33,7 +33,7 @@ const Root = styled('div')((
     theme
   }
 ) => ({
-  [`& .${classes.root}`]: {
+  [`&.${classes.root}`]: {
     textAlign: 'left'
   },
 

diff --git a/ccm_web/client/src/pages/MergeSections.tsx b/ccm_web/client/src/pages/MergeSections.tsx
@@ -37,7 +37,7 @@ const Root = styled('div')((
     theme
   }
 ) => ({
-  [`& .${classes.root}`]: {
+  [`&.${classes.root}`]: {
     textAlign: 'left'
   },