Azure DevOps - Revert MUI v5 Migration (#2095)

* Revert "Azure DevOps - Migrated to MUI v5 (#1805)" This reverts commit c5283ca. Signed-off-by: Andre Wanlin <awanlin@spotify.com> * Revert "fix(azure-devops): corrected api report (#1871)" This reverts commit 1fbf57e. Signed-off-by: Andre Wanlin <awanlin@spotify.com> * Added changeset Signed-off-by: Andre Wanlin <awanlin@spotify.com> --------- Signed-off-by: Andre Wanlin <awanlin@spotify.com>
backstage · Nov 29, 2024 · d71fade · d71fade
1 parent 57d34dc
commit d71fade
Show file tree

Hide file tree

Showing 19 changed files with 56 additions and 103 deletions.
diff --git a/workspaces/azure-devops/.changeset/dirty-pens-argue.md b/workspaces/azure-devops/.changeset/dirty-pens-argue.md
@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-azure-devops': patch
+---
+
+Reverted the MUI v5 migration
diff --git a/workspaces/azure-devops/plugins/azure-devops/package.json b/workspaces/azure-devops/plugins/azure-devops/package.json
@@ -60,9 +60,8 @@
     "@backstage/frontend-plugin-api": "^0.9.0",
     "@backstage/plugin-catalog-react": "^1.14.0",
     "@backstage/plugin-permission-react": "^0.4.27",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/material": "^5.16.7",
-    "@mui/styles": "^5.16.7",
+    "@material-ui/core": "^4.12.2",
+    "@material-ui/icons": "^4.9.1",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "humanize-duration": "^3.27.0",
     "luxon": "^3.0.0",

diff --git a/workspaces/azure-devops/plugins/azure-devops/report.api.md b/workspaces/azure-devops/plugins/azure-devops/report.api.md
@@ -22,7 +22,7 @@ import { Readme } from '@backstage-community/plugin-azure-devops-common';
 import { ReadmeConfig } from '@backstage-community/plugin-azure-devops-common';
 import { RepoBuild } from '@backstage-community/plugin-azure-devops-common';
 import { RepoBuildOptions } from '@backstage-community/plugin-azure-devops-common';
-import { SvgIconProps } from '@mui/material/SvgIcon';
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import { Team } from '@backstage-community/plugin-azure-devops-common';
 
 // @public (undocumented)

diff --git a/...es/azure-devops/plugins/azure-devops/src/components/AzureGitTagsIcon/AzureGitTagsIcon.tsx b/...es/azure-devops/plugins/azure-devops/src/components/AzureGitTagsIcon/AzureGitTagsIcon.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
 
 import React from 'react';
 

diff --git a/...zure-devops/plugins/azure-devops/src/components/AzurePipelinesIcon/AzurePipelinesIcon.tsx b/...zure-devops/plugins/azure-devops/src/components/AzurePipelinesIcon/AzurePipelinesIcon.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
 
 import React from 'react';
 

diff --git a/...evops/plugins/azure-devops/src/components/AzurePullRequestsIcon/AzurePullRequestsIcon.tsx b/...evops/plugins/azure-devops/src/components/AzurePullRequestsIcon/AzurePullRequestsIcon.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
 
 /** @public */
 export const AzurePullRequestsIcon = (props: SvgIconProps) => (

diff --git a/workspaces/azure-devops/plugins/azure-devops/src/components/BuildTable/BuildTable.tsx b/workspaces/azure-devops/plugins/azure-devops/src/components/BuildTable/BuildTable.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
 import {
   BuildResult,
   BuildRun,

diff --git a/workspaces/azure-devops/plugins/azure-devops/src/components/GitTagTable/GitTagTable.tsx b/workspaces/azure-devops/plugins/azure-devops/src/components/GitTagTable/GitTagTable.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import Box from '@mui/material/Box';
+import Box from '@material-ui/core/Box';
 import {
   Link,
   ResponseErrorPanel,

diff --git a/...azure-devops/src/components/PullRequestStatusButtonGroup/PullRequestStatusButtonGroup.tsx b/...azure-devops/src/components/PullRequestStatusButtonGroup/PullRequestStatusButtonGroup.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import Button from '@mui/material/Button';
-import ButtonGroup from '@mui/material/ButtonGroup';
+import Button from '@material-ui/core/Button';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
 
 import { PullRequestStatus } from '@backstage-community/plugin-azure-devops-common';
 import React from 'react';
@@ -30,23 +30,23 @@ export const PullRequestStatusButtonGroup = ({
   return (
     <ButtonGroup aria-label="outlined button group">
       <Button
-        color={status === PullRequestStatus.Active ? 'secondary' : 'primary'}
+        color={status === PullRequestStatus.Active ? 'primary' : 'default'}
         onClick={() => {
           setStatus(PullRequestStatus.Active);
         }}
       >
         Active
       </Button>
       <Button
-        color={status === PullRequestStatus.Completed ? 'secondary' : 'primary'}
+        color={status === PullRequestStatus.Completed ? 'primary' : 'default'}
         onClick={() => {
           setStatus(PullRequestStatus.Completed);
         }}
       >
         Completed
       </Button>
       <Button
-        color={status === PullRequestStatus.Abandoned ? 'secondary' : 'primary'}
+        color={status === PullRequestStatus.Abandoned ? 'primary' : 'default'}
         onClick={() => {
           setStatus(PullRequestStatus.Abandoned);
         }}

diff --git a/...es/azure-devops/plugins/azure-devops/src/components/PullRequestTable/PullRequestTable.tsx b/...es/azure-devops/plugins/azure-devops/src/components/PullRequestTable/PullRequestTable.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import Box from '@mui/material/Box';
-import Chip from '@mui/material/Chip';
+import Box from '@material-ui/core/Box';
+import Chip from '@material-ui/core/Chip';
 import {
   Link,
   ResponseErrorPanel,

diff --git a/...ns/azure-devops/src/components/PullRequestsPage/lib/AutoCompleteIcon/AutoCompleteIcon.tsx b/...ns/azure-devops/src/components/PullRequestsPage/lib/AutoCompleteIcon/AutoCompleteIcon.tsx
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import DoneAllIcon from '@mui/icons-material/DoneAll';
+import DoneAllIcon from '@material-ui/icons/DoneAll';
 import React from 'react';
-import makeStyles from '@mui/styles/makeStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   root: (props: { hasAutoComplete: boolean }) => ({

diff --git a/...gins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx b/...gins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx
@@ -15,24 +15,24 @@
  */
 
 import { Avatar, Link } from '@backstage/core-components';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardHeader from '@mui/material/CardHeader';
-import Typography from '@mui/material/Typography';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import CardHeader from '@material-ui/core/CardHeader';
+import Typography from '@material-ui/core/Typography';
 
 import { AutoCompleteIcon } from '../AutoCompleteIcon';
 import { DashboardPullRequest } from '@backstage-community/plugin-azure-devops-common';
 import { DateTime } from 'luxon';
 import { PullRequestCardPolicies } from './PullRequestCardPolicies';
 import { PullRequestCardReviewers } from './PullRequestCardReviewers';
 import React from 'react';
-import makeStyles from '@mui/styles/makeStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(
   theme => ({
     card: {
       backgroundColor:
-        theme.palette.mode === 'dark'
+        theme.palette.type === 'dark'
           ? theme.palette.grey[700]
           : theme.palette.common.white,
     },

diff --git a/...zure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicy.tsx b/...zure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardPolicy.tsx
@@ -19,14 +19,13 @@ import {
   PolicyEvaluationStatus,
   PolicyType,
 } from '@backstage-community/plugin-azure-devops-common';
-import { styled } from '@mui/material/styles';
-import withStyles from '@mui/styles/withStyles';
-import Typography from '@mui/material/Typography';
+import { styled, withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
 
-import CancelIcon from '@mui/icons-material/Cancel';
-import GroupWorkIcon from '@mui/icons-material/GroupWork';
+import CancelIcon from '@material-ui/icons/Cancel';
+import GroupWorkIcon from '@material-ui/icons/GroupWork';
 import React from 'react';
-import WatchLaterIcon from '@mui/icons-material/WatchLater';
+import WatchLaterIcon from '@material-ui/icons/WatchLater';
 
 const PolicyRequiredIcon = withStyles(
   theme => ({

diff --git a/...re-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardReviewer.tsx b/...re-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardReviewer.tsx
@@ -17,7 +17,7 @@
 import { Avatar } from '@backstage/core-components';
 import React from 'react';
 import { Reviewer } from '@backstage-community/plugin-azure-devops-common';
-import makeStyles from '@mui/styles/makeStyles';
+import { makeStyles } from '@material-ui/core/styles';
 
 type PullRequestCardReviewerProps = {
   reviewer: Reviewer;

diff --git a/...e-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardReviewers.tsx b/...e-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardReviewers.tsx
@@ -18,7 +18,7 @@ import { PullRequestCardReviewer } from './PullRequestCardReviewer';
 import React from 'react';
 import { Reviewer } from '@backstage-community/plugin-azure-devops-common';
 import { reviewerFilter } from '../utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@material-ui/core/styles';
 
 const PullRequestCardReviewersContainer = styled('div')({
   '& > *': {

diff --git a/...gins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGrid/PullRequestGrid.tsx b/...gins/azure-devops/src/components/PullRequestsPage/lib/PullRequestGrid/PullRequestGrid.tsx
@@ -17,7 +17,7 @@
 import { PullRequestGridColumn } from '../PullRequestGridColumn';
 import { PullRequestGroup } from '../types';
 import React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled } from '@material-ui/core/styles';
 
 const GridDiv = styled('div')(({ theme }) => ({
   display: 'flex',

diff --git a/...evops/src/components/PullRequestsPage/lib/PullRequestGridColumn/PullRequestGridColumn.tsx b/...evops/src/components/PullRequestsPage/lib/PullRequestGridColumn/PullRequestGridColumn.tsx
@@ -14,11 +14,9 @@
  * limitations under the License.
  */
 
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-
-import withStyles from '@mui/styles/withStyles';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import { styled, withStyles } from '@material-ui/core/styles';
 
 import { PullRequestCard } from '../PullRequestCard';
 import { PullRequestGroup } from '../types';
@@ -31,7 +29,7 @@ const ColumnPaper = withStyles(theme => ({
     flex: 1,
     padding: theme.spacing(2),
     backgroundColor:
-      theme.palette.mode === 'dark'
+      theme.palette.type === 'dark'
         ? theme.palette.grey[800]
         : theme.palette.grey[300],
     height: '100%',

diff --git a/workspaces/azure-devops/plugins/azure-devops/src/components/ReadmeCard/ReadmeCard.tsx b/workspaces/azure-devops/plugins/azure-devops/src/components/ReadmeCard/ReadmeCard.tsx
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import makeStyles from '@mui/styles/makeStyles';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import { makeStyles } from '@material-ui/core/styles';
 import {
   InfoCard,
   Progress,