clean up more mui5 -> mui4

Signed-off-by: Kurt King <[email protected]>

.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.

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',
       },
     },
   };

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' },

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: (

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,

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,
     },
   };
 });

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';

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',
       },
     },
   };

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',
       },
     },
   };

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;