220 Frontend deps: Material UI and React upgrade

ccm_web/client/src/components/APIErrorMessage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
 
 import { CanvasError } from '../utils/handleErrors'
 

ccm_web/client/src/components/Accordion.tsx

@@ -1,21 +1,39 @@
 import React, { useState } from 'react'
+import { styled } from '@mui/material/styles'
 import {
-  Accordion as MUIAccordion, AccordionDetails as MUIAccordionDetails, AccordionSummary as MUIAccordionSummary,
-  makeStyles
-} from '@material-ui/core'
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+  Accordion as MUIAccordion,
+  AccordionDetails as MUIAccordionDetails,
+  AccordionSummary as MUIAccordionSummary
+} from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 
-const useStyles = makeStyles((theme) => ({
-  container: {
+const PREFIX = 'Accordion'
+
+const classes = {
+  container: `${PREFIX}-container`,
+  summary: `${PREFIX}-summary`,
+  summaryFocusVisible: `${PREFIX}-summaryFocusVisible`,
+  summaryFocusNotVisible: `${PREFIX}-summaryFocusNotVisible`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.container}`]: {
     paddingTop: theme.spacing(1)
   },
-  summary: {
+
+  [`& .${classes.summary}`]: {
     backgroundColor: theme.palette.primary.main
   },
-  summaryFocusVisible: {
+
+  [`& .${classes.summaryFocusVisible}`]: {
     color: theme.palette.primary.main
   },
-  summaryFocusNotVisible: {
+
+  [`& .${classes.summaryFocusNotVisible}`]: {
     color: theme.palette.primary.contrastText
   }
 }))
@@ -27,17 +45,16 @@ interface AccordionProps {
 }
 
 export default function Accordion (props: AccordionProps): JSX.Element {
-  const classes = useStyles()
   const [isSummaryFocusVisible, setIsSummaryFocusVisible] = useState(false)
   const summaryTextClass = isSummaryFocusVisible ? classes.summaryFocusVisible : classes.summaryFocusNotVisible
 
   return (
-    <div className={classes.container}>
+    <Root className={classes.container}>
       <MUIAccordion defaultExpanded>
         <MUIAccordionSummary
           className={classes.summary}
-          classes={{ root: summaryTextClass, expandIcon: summaryTextClass }}
-          expandIcon={<ExpandMoreIcon />}
+          classes={{ root: summaryTextClass }}
+          expandIcon={<ExpandMoreIcon classes={{ root: summaryTextClass }}/>}
           id={`${props.id}-header`}
           aria-controls={`${props.id}-content`}
           onFocusVisible={() => setIsSummaryFocusVisible(true)}
@@ -49,6 +66,6 @@ export default function Accordion (props: AccordionProps): JSX.Element {
           {props.children}
         </MUIAccordionDetails>
       </MUIAccordion>
-    </div>
+    </Root>
   )
 }

ccm_web/client/src/components/Alert.tsx

@@ -1,14 +1,29 @@
 import React from 'react'
-import { Grid, makeStyles, Paper, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Grid, Paper, Typography } from '@mui/material'
 
-const useStyles = makeStyles((theme) => ({
-  padding: {
+const PREFIX = 'Alert'
+
+const classes = {
+  padding: `${PREFIX}-padding`,
+  standalone: `${PREFIX}-standalone`,
+  dialog: `${PREFIX}-dialog`
+}
+
+const StyledGrid = styled(Grid)((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.padding}`]: {
     padding: theme.spacing(1)
   },
-  standalone: {
+
+  [`&.${classes.standalone}`]: {
     margin: 'auto'
   },
-  dialog: {
+
+  [`& .${classes.dialog}`]: {
     textAlign: 'center',
     margin: 'auto',
     marginTop: 30,
@@ -31,7 +46,6 @@ interface AlertProps {
 }
 
 export default function Alert (props: AlertProps): JSX.Element {
-  const classes = useStyles()
   const { title, icon, embedded, children } = props
 
   const core = (
@@ -44,8 +58,8 @@ export default function Alert (props: AlertProps): JSX.Element {
 
   if (embedded === true) return core
   return (
-    <Grid item xs={12} sm={9} md={6} className={classes.standalone}>
+    <StyledGrid item xs={12} sm={9} md={6} className={classes.standalone}>
       {core}
-    </Grid>
+    </StyledGrid>
   )
 }

ccm_web/client/src/components/AuthorizePrompt.tsx

@@ -1,14 +1,23 @@
 import React from 'react'
-import { Button, makeStyles, Typography } from '@material-ui/core'
+import { styled } from '@mui/material/styles'
+import { Button, Typography } from '@mui/material'
 
 import Help from './Help'
 
-const useStyles = makeStyles(() => ({
-  root: {
+const PREFIX = 'AuthorizePrompt'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  button: `${PREFIX}-button`
+}
+
+const Root = styled('div')(() => ({
+  [`&.${classes.root}`]: {
     padding: 25,
     textAlign: 'left'
   },
-  button: {
+
+  [`& .${classes.button}`]: {
     marginTop: 15
   }
 }))
@@ -18,9 +27,8 @@ interface AuthorizePromptProps {
 }
 
 export default function AuthorizePrompt (props: AuthorizePromptProps): JSX.Element {
-  const classes = useStyles()
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Help baseHelpURL={props.helpURL} />
       <Typography variant='h5' component='h1' gutterBottom>
         Authorize Course Manager to Access Your Canvas Account
@@ -43,6 +51,6 @@ export default function AuthorizePrompt (props: AuthorizePromptProps): JSX.Eleme
       >
         GO TO AUTHORIZE PAGE
       </Button>
-    </div>
+    </Root>
   )
 }

ccm_web/client/src/components/Breadcrumbs.tsx

@@ -1,12 +1,19 @@
 import React from 'react'
+import { styled } from '@mui/material/styles'
 import { Link as RouterLink } from 'react-router-dom'
-import { Breadcrumbs as MuiBreadcrumbs, Link, makeStyles, Typography } from '@material-ui/core'
-import NavigateNextIcon from '@material-ui/icons/NavigateNext'
+import { Breadcrumbs as MuiBreadcrumbs, Link, Typography } from '@mui/material'
+import NavigateNextIcon from '@mui/icons-material/NavigateNext'
 
 import { FeatureUIProps } from '../models/FeatureUIData'
 
-const useStyles = makeStyles(() => ({
-  breadcrumbs: {
+const PREFIX = 'Breadcrumbs'
+
+const classes = {
+  breadcrumbs: `${PREFIX}-breadcrumbs`
+}
+
+const StyledMuiBreadcrumbs = styled(MuiBreadcrumbs)(() => ({
+  [`& .${classes.breadcrumbs}`]: {
     fontSize: '1.125rem'
   }
 }))
@@ -37,10 +44,9 @@ export interface BreadcrumbsProps {
 }
 
 function Breadcrumbs (props: BreadcrumbsProps): JSX.Element {
-  const classes = useStyles()
   const { features, pathnames } = props
   return (
-    <MuiBreadcrumbs
+    <StyledMuiBreadcrumbs
       aria-label='breadcrumb'
       separator={<NavigateNextIcon fontSize='small' />}
     >
@@ -62,7 +68,7 @@ function Breadcrumbs (props: BreadcrumbsProps): JSX.Element {
             })
           )
         }
-    </MuiBreadcrumbs>
+    </StyledMuiBreadcrumbs>
   )
 }
 

ccm_web/client/src/components/BulkApiErrorContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
 
 import APIErrorsTable from './APIErrorsTable'
 import CSVFileName from './CSVFileName'

ccm_web/client/src/components/BulkEnrollUMUserConfirmationTable.tsx

@@ -1,32 +1,32 @@
-import React, { useState } from 'react'
-
-import CustomTable from './CustomTable'
-import { RowNumberedAddEnrollment } from '../models/enrollment'
-
-interface BulkEnrollUMUserConfirmationTableProps {
-  enrollments: RowNumberedAddEnrollment[]
-}
-
-interface TableHeaderColumnInfoShouldUseMatUIType {
-  id: keyof RowNumberedAddEnrollment
-  label: string
-  minWidth: number
-  align?: 'left' | 'right' | undefined
-}
-
-const columns: TableHeaderColumnInfoShouldUseMatUIType[] = [
-  { id: 'rowNumber', label: 'Row Number', minWidth: 25 },
-  { id: 'loginId', label: 'Login ID', minWidth: 100 },
-  { id: 'role', label: 'Role', minWidth: 100 }
-]
-
-function BulkEnrollUMUserConfirmationTable (props: BulkEnrollUMUserConfirmationTableProps): JSX.Element {
-  const [page, setPage] = useState<number>(0)
-
-  const tableRows = props.enrollments
-  const caption = `Data was found for ${props.enrollments.length} enrollments.`
-
-  return <CustomTable<RowNumberedAddEnrollment> {...{ tableRows, columns, page, setPage, caption }} />
-}
-
-export default BulkEnrollUMUserConfirmationTable
+import React, { useState } from 'react'
+
+import CustomTable from './CustomTable'
+import { RowNumberedAddEnrollment } from '../models/enrollment'
+
+interface BulkEnrollUMUserConfirmationTableProps {
+  enrollments: RowNumberedAddEnrollment[]
+}
+
+interface TableHeaderColumnInfoShouldUseMatUIType {
+  id: keyof RowNumberedAddEnrollment
+  label: string
+  minWidth: number
+  align?: 'left' | 'right' | undefined
+}
+
+const columns: TableHeaderColumnInfoShouldUseMatUIType[] = [
+  { id: 'rowNumber', label: 'Row Number', minWidth: 25 },
+  { id: 'loginId', label: 'Login ID', minWidth: 100 },
+  { id: 'role', label: 'Role', minWidth: 100 }
+]
+
+function BulkEnrollUMUserConfirmationTable (props: BulkEnrollUMUserConfirmationTableProps): JSX.Element {
+  const [page, setPage] = useState<number>(0)
+
+  const tableRows = props.enrollments
+  const caption = `Data was found for ${props.enrollments.length} enrollments.`
+
+  return <CustomTable<RowNumberedAddEnrollment> {...{ tableRows, columns, page, setPage, caption }} />
+}
+
+export default BulkEnrollUMUserConfirmationTable

ccm_web/client/src/components/BulkSectionCreateUploadConfirmationTable.tsx

@@ -1,35 +1,35 @@
-import React, { useState } from 'react'
-import CustomTable from './CustomTable'
-
-interface Section {
-  rowNumber: number
-  sectionName: string
-}
-
-interface BulkSectionCreateUploadConfirmationTableProps {
-  sectionNames: Section[]
-}
-
-interface TableHeaderColumnInfoShouldUseMatUIType {
-  id: keyof Section
-  label: string
-  minWidth: number
-  align?: 'left' | 'right' | undefined
-}
-
-const columns: TableHeaderColumnInfoShouldUseMatUIType[] = [
-  { id: 'rowNumber', label: 'Row Number', minWidth: 25 },
-  { id: 'sectionName', label: 'Section Name', minWidth: 100 }
-]
-
-function BulkSectionCreateUploadConfirmationTable (props: BulkSectionCreateUploadConfirmationTableProps): JSX.Element {
-  const [page, setPage] = useState<number>(0)
-
-  const tableRows = props.sectionNames.sort((a, b) => (a.rowNumber < b.rowNumber ? -1 : 1))
-  const caption = `Data was found for ${props.sectionNames.length} sections.`
-
-  return <CustomTable<Section> {...{ tableRows, columns, page, setPage, caption }} />
-}
-
-export type { BulkSectionCreateUploadConfirmationTableProps, Section }
-export default BulkSectionCreateUploadConfirmationTable
+import React, { useState } from 'react'
+import CustomTable from './CustomTable'
+
+interface Section {
+  rowNumber: number
+  sectionName: string
+}
+
+interface BulkSectionCreateUploadConfirmationTableProps {
+  sectionNames: Section[]
+}
+
+interface TableHeaderColumnInfoShouldUseMatUIType {
+  id: keyof Section
+  label: string
+  minWidth: number
+  align?: 'left' | 'right' | undefined
+}
+
+const columns: TableHeaderColumnInfoShouldUseMatUIType[] = [
+  { id: 'rowNumber', label: 'Row Number', minWidth: 25 },
+  { id: 'sectionName', label: 'Section Name', minWidth: 100 }
+]
+
+function BulkSectionCreateUploadConfirmationTable (props: BulkSectionCreateUploadConfirmationTableProps): JSX.Element {
+  const [page, setPage] = useState<number>(0)
+
+  const tableRows = props.sectionNames.sort((a, b) => (a.rowNumber < b.rowNumber ? -1 : 1))
+  const caption = `Data was found for ${props.sectionNames.length} sections.`
+
+  return <CustomTable<Section> {...{ tableRows, columns, page, setPage, caption }} />
+}
+
+export type { BulkSectionCreateUploadConfirmationTableProps, Section }
+export default BulkSectionCreateUploadConfirmationTable