Revert back to MUI v4 (#524)

* revert to mui v4 Signed-off-by: Kurt King <[email protected]> * clean up more mui5 -> mui4 Signed-off-by: Kurt King <[email protected]> * fix docs Signed-off-by: Kurt King <[email protected]> * category input was already using mui Signed-off-by: Kurt King <[email protected]> --------- Signed-off-by: Kurt King <[email protected]>
procore-oss · Dec 20, 2024 · d773dcb · d773dcb
1 parent 579176c
commit d773dcb
Show file tree

Hide file tree

Showing 24 changed files with 293 additions and 310 deletions.
diff --git a/.changeset/gorgeous-beers-smell.md b/.changeset/gorgeous-beers-smell.md
@@ -0,0 +1,5 @@
+---
+'@procore-oss/backstage-plugin-announcements': minor
+---
+
+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/docs/search.md b/docs/search.md
@@ -91,7 +91,7 @@ Nicely display announcements search results:
 // packages/app/src/components/search/SearchPage.tsx
 
 import { AnnouncementSearchResultListItem } from '@procore-oss/backstage-plugin-announcements';
-import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
+import RecordVoiceOverIcon from '@material-ui/icons/RecordVoiceOver';
 
 // ...
 <SearchType.Accordion

diff --git a/plugins/announcements/dev/index.tsx b/plugins/announcements/dev/index.tsx
@@ -19,8 +19,7 @@ import {
 } from '../src/plugin';
 import { AnnouncementsTimeline, AdminPortal } from '../src/components';
 import { signalsPlugin } from '@backstage/plugin-signals';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
+import { Grid, Typography } from '@material-ui/core';
 
 const mockCatalogApi = {
   getEntityByRef: async (entityRef: string) => {

diff --git a/plugins/announcements/package.json b/plugins/announcements/package.json
@@ -64,11 +64,11 @@
     "@backstage/plugin-search-common": "^1.2.15",
     "@backstage/plugin-search-react": "^1.8.3",
     "@backstage/plugin-signals-react": "^0.0.7",
+    "@backstage/theme": "^0.5.7",
+    "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.3",
-    "@mui/icons-material": "^6.1.1",
-    "@mui/lab": "5.0.0-alpha.173",
-    "@mui/material": "^5.14.18",
-    "@mui/styles": "^5.14.18",
+    "@material-ui/lab": "4.0.0-alpha.57",
+    "@mui/material": "^5.15.6",
     "@procore-oss/backstage-plugin-announcements-common": "workspace:^",
     "@procore-oss/backstage-plugin-announcements-react": "workspace:^",
     "@uiw/react-md-editor": "^4.0.3",

diff --git a/plugins/announcements/src/alpha/navItems.tsx b/plugins/announcements/src/alpha/navItems.tsx
@@ -1,14 +1,6 @@
 import { NavItemBlueprint } from '@backstage/frontend-plugin-api';
 import { convertLegacyRouteRef } from '@backstage/core-compat-api';
 import { rootRouteRef } from '../routes';
-
-/*
-
-TODO: replace once `NavItemBlueprint.make()` supports mui v5
-      remove @material-ui dep in package.json
-
-*/
-// import NotificationsIcon from '@mui/icons-material/Notifications';
 import NotificationsIcon from '@material-ui/icons/Notifications';
 
 /**

diff --git a/plugins/announcements/src/components/Admin/AdminPortal/AdminPortal.tsx b/plugins/announcements/src/components/Admin/AdminPortal/AdminPortal.tsx
@@ -1,15 +1,12 @@
 import React, { useState } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import { Page, Header, Content } from '@backstage/core-components';
 import { AnnouncementsContent } from '../AnnouncementsContent';
 import { CategoriesContent } from '../CategoriesContent';
-import Tab from '@mui/material/Tab';
-import TabContext from '@mui/lab/TabContext';
-import TabList from '@mui/lab/TabList';
-import TabPanel from '@mui/lab/TabPanel';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { announcementCreatePermission } from '@procore-oss/backstage-plugin-announcements-common';
 import { useAnnouncementsTranslation } from '@procore-oss/backstage-plugin-announcements-react';
+import { makeStyles, Tab } from '@material-ui/core';
+import { TabContext, TabList, TabPanel } from '@material-ui/lab';
 
 const useStyles = makeStyles(() => ({
   tabPanel: {

diff --git a/plugins/announcements/src/components/Admin/AnnouncementsContent/AnnouncementsContent.tsx b/plugins/announcements/src/components/Admin/AnnouncementsContent/AnnouncementsContent.tsx
@@ -6,9 +6,6 @@ import {
   TableColumn,
 } from '@backstage/core-components';
 import { alertApiRef, useApi } from '@backstage/core-plugin-api';
-import EditIcon from '@mui/icons-material/Edit';
-import DeleteIcon from '@mui/icons-material/Delete';
-import PreviewIcon from '@mui/icons-material/Preview';
 import {
   announcementsApiRef,
   CreateAnnouncementRequest,
@@ -26,16 +23,16 @@ import { useAsyncRetry } from 'react-use';
 import { useDeleteAnnouncementDialogState } from '../../AnnouncementsPage/useDeleteAnnouncementDialogState';
 import { DeleteAnnouncementDialog } from '../../AnnouncementsPage/DeleteAnnouncementDialog';
 import { useNavigate } from 'react-router-dom';
-import Button from '@mui/material/Button';
 import { AnnouncementForm } from '../../AnnouncementForm';
 import slugify from 'slugify';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
 import {
   RequirePermission,
   usePermission,
 } from '@backstage/plugin-permission-react';
+import { Button, Grid, IconButton, Typography } from '@material-ui/core';
+import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/Edit';
+import PreviewIcon from '@material-ui/icons/Visibility';
 
 export const AnnouncementsContent = () => {
   const alertApi = useApi(alertApiRef);
@@ -264,7 +261,7 @@ export const AnnouncementsContent = () => {
             columns={columns}
             data={announcements?.results ?? []}
             emptyContent={
-              <Typography p={2}>
+              <Typography style={{ padding: 2 }}>
                 {t('admin.announecementsContent.noAnnouncementsFound')}
               </Typography>
             }

diff --git a/plugins/announcements/src/components/Admin/CategoriesContent/CategoriesContent.tsx b/plugins/announcements/src/components/Admin/CategoriesContent/CategoriesContent.tsx
@@ -16,20 +16,17 @@ import {
   announcementDeletePermission,
   Category,
 } from '@procore-oss/backstage-plugin-announcements-common';
-import Button from '@mui/material/Button';
 import { CategoriesForm } from '../../CategoriesForm';
 import { useApi, alertApiRef } from '@backstage/core-plugin-api';
-import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
 import {
   RequirePermission,
   usePermission,
 } from '@backstage/plugin-permission-react';
-import IconButton from '@mui/material/IconButton';
-import DeleteIcon from '@mui/icons-material/Delete';
 import { useDeleteCategoryDialogState } from '../../CategoriesPage/useDeleteCategoryDialogState';
 import { ResponseError } from '@backstage/errors';
 import { DeleteCategoryDialog } from '../../CategoriesPage/DeleteCategoryDialog';
+import { Button, Grid, IconButton, Typography } from '@material-ui/core';
+import DeleteIcon from '@material-ui/icons/Delete';
 
 export const CategoriesContent = () => {
   const [showNewCategoryForm, setShowNewCategoryForm] = useState(false);
@@ -130,15 +127,13 @@ export const CategoriesContent = () => {
       ),
       render: rowData => {
         return (
-          <>
-            <IconButton
-              aria-label="delete"
-              disabled={loadingDeletePermission || !canDeleteAnnouncement}
-              onClick={() => openDeleteDialog(rowData)}
-            >
-              <DeleteIcon fontSize="small" data-testid="delete-icon" />
-            </IconButton>
-          </>
+          <IconButton
+            aria-label="delete"
+            disabled={loadingDeletePermission || !canDeleteAnnouncement}
+            onClick={() => openDeleteDialog(rowData)}
+          >
+            <DeleteIcon fontSize="small" data-testid="delete-icon" />
+          </IconButton>
         );
       },
     },
@@ -172,7 +167,7 @@ export const CategoriesContent = () => {
             columns={columns}
             data={categories ?? []}
             emptyContent={
-              <Typography p={2}>
+              <Typography style={{ padding: 2 }}>
                 {t('admin.categoriesContent.table.noCategoriesFound')}
               </Typography>
             }

diff --git a/plugins/announcements/src/components/AnnouncementForm/AnnouncementForm.tsx b/plugins/announcements/src/components/AnnouncementForm/AnnouncementForm.tsx
@@ -2,31 +2,28 @@ import React, { useState } from 'react';
 import MDEditor from '@uiw/react-md-editor';
 import { InfoCard } from '@backstage/core-components';
 import { identityApiRef, useApi } from '@backstage/core-plugin-api';
-import makeStyles from '@mui/styles/makeStyles';
 import {
   CreateAnnouncementRequest,
   useAnnouncementsTranslation,
 } from '@procore-oss/backstage-plugin-announcements-react';
 import { Announcement } from '@procore-oss/backstage-plugin-announcements-common';
 import CategoryInput from './CategoryInput';
-import TextField from '@mui/material/TextField';
-import Button from '@mui/material/Button';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-import { useTheme } from '@mui/material/styles';
-
-const useStyles = makeStyles(theme => {
-  const currentTheme = useTheme();
+import {
+  makeStyles,
+  TextField,
+  FormGroup,
+  FormControlLabel,
+  Switch,
+  Button,
+} from '@material-ui/core';
 
-  return {
-    formRoot: {
-      '& > *': {
-        margin: theme.spacing ?? currentTheme.spacing(1) ?? '8px',
-      },
+const useStyles = makeStyles(theme => ({
+  formRoot: {
+    '& > *': {
+      margin: theme.spacing(1) ?? '8px',
     },
-  };
-});
+  },
+}));
 
 type AnnouncementFormProps = {
   initialData: Announcement;

diff --git 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/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/...ents/src/components/AnnouncementSearchResultListItem/AnnouncementSearchResultListItem.tsx b/...ents/src/components/AnnouncementSearchResultListItem/AnnouncementSearchResultListItem.tsx
@@ -6,13 +6,15 @@ import {
   ResultHighlight,
 } from '@backstage/plugin-search-common';
 import { HighlightedSearchResultText } from '@backstage/plugin-search-react';
-import makeStyles from '@mui/styles/makeStyles';
-import Divider from '@mui/material/Divider';
-import ListItem from '@mui/material/ListItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
 import { useAnnouncementsTranslation } from '@procore-oss/backstage-plugin-announcements-react';
+import {
+  makeStyles,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Divider,
+} from '@material-ui/core';
+import RecordVoiceOverIcon from '@material-ui/icons/RecordVoiceOver';
 
 const useStyles = makeStyles({
   createdAt: {

diff --git a/plugins/announcements/src/components/AnnouncementsCard/AnnouncementsCard.tsx b/plugins/announcements/src/components/AnnouncementsCard/AnnouncementsCard.tsx
@@ -9,8 +9,6 @@ import {
 } from '@backstage/core-components';
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { announcementEntityPermissions } from '@procore-oss/backstage-plugin-announcements-common';
-import makeStyles from '@mui/styles/makeStyles';
-import NewReleasesIcon from '@mui/icons-material/NewReleases';
 import {
   announcementCreateRouteRef,
   announcementViewRouteRef,
@@ -21,11 +19,15 @@ import {
   useAnnouncements,
   useAnnouncementsTranslation,
 } from '@procore-oss/backstage-plugin-announcements-react';
-import Alert from '@mui/material/Alert';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
+import {
+  makeStyles,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+} from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+import NewReleasesIcon from '@material-ui/icons/NewReleases';
 
 const useStyles = makeStyles({
   newAnnouncementIcon: {

diff --git a/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx b/plugins/announcements/src/components/AnnouncementsPage/AnnouncementsPage.tsx
@@ -25,11 +25,9 @@ import {
   EntityPeekAheadPopover,
   entityRouteRef,
 } from '@backstage/plugin-catalog-react';
-import Alert from '@mui/material/Alert';
-import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import makeStyles from '@mui/styles/makeStyles';
+import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/Edit';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
 import {
   announcementCreateRouteRef,
   announcementEditRouteRef,
@@ -44,32 +42,29 @@ import {
   useAnnouncements,
   useAnnouncementsTranslation,
 } from '@procore-oss/backstage-plugin-announcements-react';
-import Tooltip from '@mui/material/Tooltip';
-import IconButton from '@mui/material/IconButton';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import Card from '@mui/material/Card';
-import CardHeader from '@mui/material/CardHeader';
-import CardContent from '@mui/material/CardContent';
-import Pagination from '@mui/material/Pagination';
-import { useTheme } from '@mui/material/styles';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  IconButton,
+  ListItemIcon,
+  makeStyles,
+  Menu,
+  MenuItem,
+  Tooltip,
+} 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,
     },
   };
 });
@@ -168,7 +163,6 @@ const AnnouncementCard = ({
             data-testid="announcement-edit-menu"
             aria-label="more"
             onClick={handleOpenEditMenu}
-            size="large"
           >
             <MoreVertIcon />
           </IconButton>