From f3ef65ef603e3fcf661a698a518d3de6903a9421 Mon Sep 17 00:00:00 2001 From: jaydonkrooss <147423601+jaydonkrooss@users.noreply.github.com> Date: Tue, 26 Mar 2024 17:23:55 -0400 Subject: [PATCH] 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) --- ccm_web/client/src/components/Alert.tsx | 46 +++--- ccm_web/client/src/components/CustomTable.tsx | 4 - ccm_web/client/src/components/ErrorAlert.tsx | 10 +- .../client/src/components/InlineTextEdit.tsx | 3 +- .../src/components/SectionSelectorWidget.tsx | 19 ++- .../client/src/components/TablePagination.tsx | 2 +- .../client/src/components/WorkflowStepper.tsx | 1 + .../client/src/pages/BulkSectionCreate.tsx | 2 +- .../src/pages/FormatThirdPartyGradebook.tsx | 2 +- ccm_web/client/src/pages/GradebookCanvas.tsx | 2 +- ccm_web/client/src/pages/MergeSections.tsx | 2 +- ccm_web/package-lock.json | 136 +++++++----------- ccm_web/package.json | 11 +- 13 files changed, 100 insertions(+), 140 deletions(-) diff --git a/ccm_web/client/src/components/Alert.tsx b/ccm_web/client/src/components/Alert.tsx index 6738b1ad..f6ae57b3 100644 --- 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 = ( - + {title} {icon} {children} - + ) if (embedded === true) return core return ( - + {core} ) diff --git a/ccm_web/client/src/components/CustomTable.tsx b/ccm_web/client/src/components/CustomTable.tsx index 7ff9d32f..4c49c44b 100644 --- a/ccm_web/client/src/components/CustomTable.tsx +++ b/ccm_web/client/src/components/CustomTable.tsx @@ -78,10 +78,6 @@ function CustomTable (props: TableProps): 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 index 9255a006..61d8aef0 100644 --- 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 { :
    {messages.map((m, i) =>
  1. {m}
    2. )}
return ( - } + icon={icon !== undefined ? icon : } embedded={embedded} > {Boolean(messages?.length) && preface} {messageBlock} {tryAgain !== undefined && } - + ) } diff --git a/ccm_web/client/src/components/InlineTextEdit.tsx b/ccm_web/client/src/components/InlineTextEdit.tsx index eee790b0..352bf983 100644 --- 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 { - {props.text} + {props.text} diff --git a/ccm_web/client/src/components/SectionSelectorWidget.tsx b/ccm_web/client/src/components/SectionSelectorWidget.tsx index 906e5781..fe94e761 100644 --- 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 ( - - Search By + + Search By