Azure DevOps - Migrated to MUI v5 (backstage#1805)

Signed-off-by: Andre Wanlin <awanlin@spotify.com>
CryptoRodeo · Nov 6, 2024 · c5283ca · c5283ca
1 parent 7d8f944
commit c5283ca
Show file tree

Hide file tree

Showing 18 changed files with 107 additions and 50 deletions.
diff --git a/workspaces/azure-devops/.changeset/fair-frogs-melt.md b/workspaces/azure-devops/.changeset/fair-frogs-melt.md
@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-azure-devops': patch
+---
+
+Migrated to using MUI v5
diff --git a/workspaces/azure-devops/plugins/azure-devops/package.json b/workspaces/azure-devops/plugins/azure-devops/package.json
@@ -60,8 +60,9 @@
     "@backstage/frontend-plugin-api": "^0.9.0",
     "@backstage/plugin-catalog-react": "^1.14.0",
     "@backstage/plugin-permission-react": "^0.4.27",
-    "@material-ui/core": "^4.12.2",
-    "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
+    "@mui/styles": "^5.16.7",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "humanize-duration": "^3.27.0",
     "luxon": "^3.0.0",

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 '@material-ui/core/SvgIcon';
+import SvgIcon, { SvgIconProps } from '@mui/material/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 '@material-ui/core/SvgIcon';
+import SvgIcon, { SvgIconProps } from '@mui/material/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 '@material-ui/core/SvgIcon';
+import SvgIcon, { SvgIconProps } from '@mui/material/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 '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/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 '@material-ui/core/Box';
+import Box from '@mui/material/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 '@material-ui/core/Button';
-import ButtonGroup from '@material-ui/core/ButtonGroup';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/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 ? 'primary' : 'default'}
+        color={status === PullRequestStatus.Active ? 'secondary' : 'primary'}
         onClick={() => {
           setStatus(PullRequestStatus.Active);
         }}
       >
         Active
       </Button>
       <Button
-        color={status === PullRequestStatus.Completed ? 'primary' : 'default'}
+        color={status === PullRequestStatus.Completed ? 'secondary' : 'primary'}
         onClick={() => {
           setStatus(PullRequestStatus.Completed);
         }}
       >
         Completed
       </Button>
       <Button
-        color={status === PullRequestStatus.Abandoned ? 'primary' : 'default'}
+        color={status === PullRequestStatus.Abandoned ? 'secondary' : 'primary'}
         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 '@material-ui/core/Box';
-import Chip from '@material-ui/core/Chip';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/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 '@material-ui/icons/DoneAll';
+import DoneAllIcon from '@mui/icons-material/DoneAll';
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 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 '@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 Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
+import Typography from '@mui/material/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 '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles(
   theme => ({
     card: {
       backgroundColor:
-        theme.palette.type === 'dark'
+        theme.palette.mode === '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,13 +19,14 @@ import {
   PolicyEvaluationStatus,
   PolicyType,
 } from '@backstage-community/plugin-azure-devops-common';
-import { styled, withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
+import { styled } from '@mui/material/styles';
+import withStyles from '@mui/styles/withStyles';
+import Typography from '@mui/material/Typography';
 
-import CancelIcon from '@material-ui/icons/Cancel';
-import GroupWorkIcon from '@material-ui/icons/GroupWork';
+import CancelIcon from '@mui/icons-material/Cancel';
+import GroupWorkIcon from '@mui/icons-material/GroupWork';
 import React from 'react';
-import WatchLaterIcon from '@material-ui/icons/WatchLater';
+import WatchLaterIcon from '@mui/icons-material/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 '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 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 '@material-ui/core/styles';
+import { styled } from '@mui/material/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 '@material-ui/core/styles';
+import { styled } from '@mui/material/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,9 +14,11 @@
  * limitations under the License.
  */
 
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
-import { styled, withStyles } from '@material-ui/core/styles';
+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 { PullRequestCard } from '../PullRequestCard';
 import { PullRequestGroup } from '../types';
@@ -29,7 +31,7 @@ const ColumnPaper = withStyles(theme => ({
     flex: 1,
     padding: theme.spacing(2),
     backgroundColor:
-      theme.palette.type === 'dark'
+      theme.palette.mode === '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 '@material-ui/core/Box';
-import Button from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import makeStyles from '@mui/styles/makeStyles';
 import {
   InfoCard,
   Progress,

diff --git a/workspaces/azure-devops/yarn.lock b/workspaces/azure-devops/yarn.lock
@@ -2716,8 +2716,9 @@ __metadata:
     "@backstage/plugin-catalog-react": ^1.14.0
     "@backstage/plugin-permission-react": ^0.4.27
     "@backstage/test-utils": ^1.7.0
-    "@material-ui/core": ^4.12.2
-    "@material-ui/icons": ^4.9.1
+    "@mui/icons-material": ^5.16.7
+    "@mui/material": ^5.16.7
+    "@mui/styles": ^5.16.7
     "@testing-library/dom": ^10.0.0
     "@testing-library/jest-dom": ^6.0.0
     "@testing-library/react": ^15.0.0
@@ -6240,7 +6241,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/hash@npm:^0.9.2":
+"@emotion/hash@npm:^0.9.1, @emotion/hash@npm:^0.9.2":
   version: 0.9.2
   resolution: "@emotion/hash@npm:0.9.2"
   checksum: 379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387
@@ -8646,7 +8647,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/material@npm:^5.12.2":
+"@mui/icons-material@npm:^5.16.7":
+  version: 5.16.7
+  resolution: "@mui/icons-material@npm:5.16.7"
+  dependencies:
+    "@babel/runtime": ^7.23.9
+  peerDependencies:
+    "@mui/material": ^5.0.0
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: a875f2837897d79a83173d80461e06ab090b64d08913d26433cf2cbeb8e7c7456468632a7aa495d722718f09111a8043255777d73b4dfbe9e0f863a170fc7190
+  languageName: node
+  linkType: hard
+
+"@mui/material@npm:^5.12.2, @mui/material@npm:^5.16.7":
   version: 5.16.7
   resolution: "@mui/material@npm:5.16.7"
   dependencies:
@@ -8717,6 +8734,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/styles@npm:^5.16.7":
+  version: 5.16.7
+  resolution: "@mui/styles@npm:5.16.7"
+  dependencies:
+    "@babel/runtime": ^7.23.9
+    "@emotion/hash": ^0.9.1
+    "@mui/private-theming": ^5.16.6
+    "@mui/types": ^7.2.15
+    "@mui/utils": ^5.16.6
+    clsx: ^2.1.0
+    csstype: ^3.1.3
+    hoist-non-react-statics: ^3.3.2
+    jss: ^10.10.0
+    jss-plugin-camel-case: ^10.10.0
+    jss-plugin-default-unit: ^10.10.0
+    jss-plugin-global: ^10.10.0
+    jss-plugin-nested: ^10.10.0
+    jss-plugin-props-sort: ^10.10.0
+    jss-plugin-rule-value-function: ^10.10.0
+    jss-plugin-vendor-prefixer: ^10.10.0
+    prop-types: ^15.8.1
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 1109eb150cf40782a6f24bebf6d22d55ea8c36bbf43893664c303e679b7d235a6578b2f2e1d9ee64132aa24496a15fd32f80278cb641208c3a372bd53679e1c0
+  languageName: node
+  linkType: hard
+
 "@mui/system@npm:^5.16.7":
   version: 5.16.7
   resolution: "@mui/system@npm:5.16.7"
@@ -23874,7 +23922,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jss-plugin-camel-case@npm:^10.5.1":
+"jss-plugin-camel-case@npm:^10.10.0, jss-plugin-camel-case@npm:^10.5.1":
   version: 10.10.0
   resolution: "jss-plugin-camel-case@npm:10.10.0"
   dependencies:
@@ -23885,7 +23933,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jss-plugin-default-unit@npm:^10.5.1":
+"jss-plugin-default-unit@npm:^10.10.0, jss-plugin-default-unit@npm:^10.5.1":
   version: 10.10.0
   resolution: "jss-plugin-default-unit@npm:10.10.0"
   dependencies:
@@ -23895,7 +23943,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jss-plugin-global@npm:^10.5.1":
+"jss-plugin-global@npm:^10.10.0, jss-plugin-global@npm:^10.5.1":
   version: 10.10.0
   resolution: "jss-plugin-global@npm:10.10.0"
   dependencies:
@@ -23905,7 +23953,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jss-plugin-nested@npm:^10.5.1":
+"jss-plugin-nested@npm:^10.10.0, jss-plugin-nested@npm:^10.5.1":
   version: 10.10.0
   resolution: "jss-plugin-nested@npm:10.10.0"
   dependencies:
@@ -23916,7 +23964,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jss-plugin-props-sort@npm:^10.5.1":
+"jss-plugin-props-sort@npm:^10.10.0, jss-plugin-props-sort@npm:^10.5.1":
   version: 10.10.0
   resolution: "jss-plugin-props-sort@npm:10.10.0"
   dependencies:
@@ -23926,7 +23974,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jss-plugin-rule-value-function@npm:^10.5.1":
+"jss-plugin-rule-value-function@npm:^10.10.0, jss-plugin-rule-value-function@npm:^10.5.1":
   version: 10.10.0
   resolution: "jss-plugin-rule-value-function@npm:10.10.0"
   dependencies:
@@ -23937,7 +23985,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jss-plugin-vendor-prefixer@npm:^10.5.1":
+"jss-plugin-vendor-prefixer@npm:^10.10.0, jss-plugin-vendor-prefixer@npm:^10.5.1":
   version: 10.10.0
   resolution: "jss-plugin-vendor-prefixer@npm:10.10.0"
   dependencies:
@@ -23948,7 +23996,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jss@npm:10.10.0, jss@npm:^10.5.1, jss@npm:~10.10.0":
+"jss@npm:10.10.0, jss@npm:^10.10.0, jss@npm:^10.5.1, jss@npm:~10.10.0":
   version: 10.10.0
   resolution: "jss@npm:10.10.0"
   dependencies: