From c312664ef96117c5f5d30594381e2e8ec56017a6 Mon Sep 17 00:00:00 2001 From: Kurt King Date: Mon, 16 Dec 2024 08:49:27 -0700 Subject: [PATCH] clean up more mui5 -> mui4 Signed-off-by: Kurt King --- .changeset/gorgeous-beers-smell.md | 2 +- .../AnnouncementForm/AnnouncementForm.tsx | 5 +--- .../AnnouncementForm/CategoryInput.test.tsx | 5 +--- .../AnnouncementForm/CategoryInput.tsx | 5 ++-- .../AnnouncementPage/AnnouncementPage.tsx | 4 ++-- .../AnnouncementsPage/AnnouncementsPage.tsx | 10 ++------ .../DeleteAnnouncementDialog.tsx | 5 +--- .../CategoriesForm/CategoriesForm.tsx | 6 ++--- .../NewAnnouncementBanner.tsx | 24 +++++-------------- .../NewCategoryDialog/NewCategoryDialog.tsx | 14 ++++++----- 10 files changed, 26 insertions(+), 54 deletions(-) diff --git a/.changeset/gorgeous-beers-smell.md b/.changeset/gorgeous-beers-smell.md index 89863a36..4ee718ff 100644 --- a/.changeset/gorgeous-beers-smell.md +++ b/.changeset/gorgeous-beers-smell.md @@ -2,4 +2,4 @@ '@procore-oss/backstage-plugin-announcements': minor --- -This release reverts the MUI v5 upgrade. The plugins will stay on version 4 until there is more guidance from the maintainers on upgrading. +This release reverts the MUI v5 upgrade. The plugins will stay on version 4.x until there is a better understanding of the impact of the upgrade. diff --git a/plugins/announcements/src/components/AnnouncementForm/AnnouncementForm.tsx b/plugins/announcements/src/components/AnnouncementForm/AnnouncementForm.tsx index 8041702e..f6e3d28f 100644 --- a/plugins/announcements/src/components/AnnouncementForm/AnnouncementForm.tsx +++ b/plugins/announcements/src/components/AnnouncementForm/AnnouncementForm.tsx @@ -10,7 +10,6 @@ import { Announcement } from '@procore-oss/backstage-plugin-announcements-common import CategoryInput from './CategoryInput'; import { makeStyles, - useTheme, TextField, FormGroup, FormControlLabel, @@ -19,12 +18,10 @@ import { } from '@material-ui/core'; const useStyles = makeStyles(theme => { - const currentTheme = useTheme(); - return { formRoot: { '& > *': { - margin: theme.spacing ?? currentTheme.spacing(1) ?? '8px', + margin: theme.spacing ?? '8px', }, }, }; diff --git a/plugins/announcements/src/components/AnnouncementForm/CategoryInput.test.tsx b/plugins/announcements/src/components/AnnouncementForm/CategoryInput.test.tsx index 7cc0013d..a6680394 100644 --- a/plugins/announcements/src/components/AnnouncementForm/CategoryInput.test.tsx +++ b/plugins/announcements/src/components/AnnouncementForm/CategoryInput.test.tsx @@ -1,12 +1,9 @@ import React from 'react'; - import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { TestApiProvider } from '@backstage/test-utils'; - +import { TestApiProvider, renderInTestApp } from '@backstage/test-utils'; import CategoryInput from './CategoryInput'; import { announcementsApiRef } from '@procore-oss/backstage-plugin-announcements-react'; -import { renderInTestApp } from '@backstage/test-utils'; const categories = [ { title: 'Hello', slug: 'hello' }, diff --git a/plugins/announcements/src/components/AnnouncementForm/CategoryInput.tsx b/plugins/announcements/src/components/AnnouncementForm/CategoryInput.tsx index ba5775f8..e57c0b6d 100644 --- a/plugins/announcements/src/components/AnnouncementForm/CategoryInput.tsx +++ b/plugins/announcements/src/components/AnnouncementForm/CategoryInput.tsx @@ -1,12 +1,11 @@ import * as React from 'react'; -import TextField from '@mui/material/TextField'; -import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'; import { Category } from '@procore-oss/backstage-plugin-announcements-common'; import { useAnnouncementsTranslation, useCategories, } from '@procore-oss/backstage-plugin-announcements-react'; -import CircularProgress from '@mui/material/CircularProgress'; +import { Autocomplete, createFilterOptions } from '@material-ui/lab'; +import { CircularProgress, TextField } from '@material-ui/core'; type CategoryInputProps = { setForm: ( diff --git a/plugins/announcements/src/components/AnnouncementPage/AnnouncementPage.tsx b/plugins/announcements/src/components/AnnouncementPage/AnnouncementPage.tsx index 16cc1608..87f7e0f7 100644 --- a/plugins/announcements/src/components/AnnouncementPage/AnnouncementPage.tsx +++ b/plugins/announcements/src/components/AnnouncementPage/AnnouncementPage.tsx @@ -21,11 +21,11 @@ import { EntityPeekAheadPopover, entityRouteRef, } from '@backstage/plugin-catalog-react'; -import Alert from '@mui/material/Alert'; import { announcementViewRouteRef, rootRouteRef } from '../../routes'; import { announcementsApiRef } from '@procore-oss/backstage-plugin-announcements-react'; import { Announcement } from '@procore-oss/backstage-plugin-announcements-common'; -import Grid from '@mui/material/Grid'; +import { Grid } from '@material-ui/core'; +import { Alert } from '@material-ui/lab'; const AnnouncementDetails = ({ announcement, diff --git a/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx b/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx index 376bb62a..0efbd6a4 100644 --- a/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx +++ b/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx @@ -52,25 +52,19 @@ import { Menu, MenuItem, Tooltip, - useTheme, } from '@material-ui/core'; import { Alert, Pagination } from '@material-ui/lab'; const useStyles = makeStyles(theme => { - const currentTheme = useTheme(); - return { cardHeader: { - color: - theme?.palette?.text?.primary || - currentTheme?.palette?.text?.primary || - '#000', + color: theme?.palette?.text?.primary || '#000', fontSize: '1.5rem', }, pagination: { display: 'flex', justifyContent: 'center', - marginTop: theme?.spacing?.(4) || currentTheme?.spacing?.(4) || 32, + marginTop: theme?.spacing?.(4) || 32, }, }; }); diff --git a/plugins/announcements/src/components/AnnouncementsPage/DeleteAnnouncementDialog.tsx b/plugins/announcements/src/components/AnnouncementsPage/DeleteAnnouncementDialog.tsx index e8e4836f..2184b2e8 100644 --- a/plugins/announcements/src/components/AnnouncementsPage/DeleteAnnouncementDialog.tsx +++ b/plugins/announcements/src/components/AnnouncementsPage/DeleteAnnouncementDialog.tsx @@ -1,8 +1,5 @@ import { usePermission } from '@backstage/plugin-permission-react'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogActions from '@mui/material/DialogActions'; -import DialogTitle from '@mui/material/DialogTitle'; +import { Button, Dialog, DialogActions, DialogTitle } from '@material-ui/core'; import { announcementDeletePermission } from '@procore-oss/backstage-plugin-announcements-common'; import { useAnnouncementsTranslation } from '@procore-oss/backstage-plugin-announcements-react'; import React from 'react'; diff --git a/plugins/announcements/src/components/CategoriesForm/CategoriesForm.tsx b/plugins/announcements/src/components/CategoriesForm/CategoriesForm.tsx index 09033a78..62958a80 100644 --- a/plugins/announcements/src/components/CategoriesForm/CategoriesForm.tsx +++ b/plugins/announcements/src/components/CategoriesForm/CategoriesForm.tsx @@ -9,15 +9,13 @@ import { Category, } from '@procore-oss/backstage-plugin-announcements-common'; import { usePermission } from '@backstage/plugin-permission-react'; -import { Button, makeStyles, TextField, useTheme } from '@material-ui/core'; +import { Button, makeStyles, TextField } from '@material-ui/core'; const useStyles = makeStyles(theme => { - const currentTheme = useTheme(); - return { formRoot: { '& > *': { - margin: theme?.spacing?.(1) ?? currentTheme.spacing(1) ?? '8px', + margin: theme?.spacing?.(1) ?? '8px', }, }, }; diff --git a/plugins/announcements/src/components/NewAnnouncementBanner/NewAnnouncementBanner.tsx b/plugins/announcements/src/components/NewAnnouncementBanner/NewAnnouncementBanner.tsx index ebb8b0e8..ecca6199 100644 --- a/plugins/announcements/src/components/NewAnnouncementBanner/NewAnnouncementBanner.tsx +++ b/plugins/announcements/src/components/NewAnnouncementBanner/NewAnnouncementBanner.tsx @@ -16,7 +16,6 @@ import { import { useSignal } from '@backstage/plugin-signals-react'; import { makeStyles, - useTheme, Snackbar, SnackbarContent, IconButton, @@ -25,15 +24,13 @@ import Close from '@material-ui/icons/Close'; import { Alert } from '@material-ui/lab'; const useStyles = makeStyles(theme => { - const currentTheme = useTheme(); - return { // showing on top, as a block blockPositioning: { - padding: theme?.spacing?.(0) ?? currentTheme.spacing(0) ?? 0, + padding: theme?.spacing?.(0) ?? 0, position: 'relative', - marginBottom: theme?.spacing?.(4) ?? currentTheme.spacing(4) ?? 32, - marginTop: theme?.spacing?.(3) ?? currentTheme.spacing(3) ?? -24, + marginBottom: theme?.spacing?.(4) ?? 32, + marginTop: theme?.spacing?.(3) ?? -24, zIndex: 'unset', }, // showing on top, as a floating alert @@ -49,21 +46,12 @@ const useStyles = makeStyles(theme => { width: '100%', maxWidth: 'inherit', flexWrap: 'nowrap', - backgroundColor: - theme?.palette?.banner?.info ?? - currentTheme.palette?.banner?.info ?? - '#f0f0f0', + backgroundColor: theme?.palette?.banner?.info ?? '#f0f0f0', display: 'flex', alignItems: 'center', - color: - theme?.palette?.banner?.text ?? - currentTheme.palette?.banner?.text ?? - '#000000', + color: theme?.palette?.banner?.text ?? '#000000', '& a': { - color: - theme?.palette?.banner?.link ?? - currentTheme.palette?.banner?.link ?? - '#0068c8', + color: theme?.palette?.banner?.link ?? '#0068c8', }, }, }; diff --git a/plugins/announcements/src/components/NewCategoryDialog/NewCategoryDialog.tsx b/plugins/announcements/src/components/NewCategoryDialog/NewCategoryDialog.tsx index f9f4350f..2315e9c7 100644 --- a/plugins/announcements/src/components/NewCategoryDialog/NewCategoryDialog.tsx +++ b/plugins/announcements/src/components/NewCategoryDialog/NewCategoryDialog.tsx @@ -4,12 +4,14 @@ import { announcementsApiRef, useAnnouncementsTranslation, } from '@procore-oss/backstage-plugin-announcements-react'; -import Dialog from '@mui/material/Dialog'; -import DialogTitle from '@mui/material/DialogTitle'; -import DialogContent from '@mui/material/DialogContent'; -import TextField from '@mui/material/TextField'; -import DialogActions from '@mui/material/DialogActions'; -import Button from '@mui/material/Button'; +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + TextField, +} from '@material-ui/core'; type NewCategoryDialogProps = { open: boolean;