Skip to content

Commit 328f198

Browse files
its-mitesh-kumarcursoragent
its-mitesh-kumar
and
cursoragent
authored
feat(argocd): migrate ArgoCD plugin from Material UI v4 to v5 (#9708)
* feat(argocd): migrate ArgoCD plugin from Material UI v4 to v5 Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> Co-authored-by: Cursor <cursoragent@cursor.com> * addressing copilot comments Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * updating e2e tests Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * addressing copilot comments Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * addressing the review comments Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> * addressing co-pilot comment Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> --------- Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 07a0064 commit 328f198

47 files changed

Lines changed: 348 additions & 479 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎workspaces/argocd/.changeset/migrate-argocd-mui-v5.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@backstage-community/plugin-argocd': minor
3+
---
4+
5+
Migrated from Material UI v4 (`@material-ui/*`) to MUI v5 (`@mui/material`, `@mui/icons-material`). Replaced `makeStyles`/`createStyles` with MUI v5 `styled()` and `sx` prop patterns. Removed `@material-ui/core`, `@material-ui/icons`, `@material-ui/lab`, and `@material-ui/styles` dependencies.

‎workspaces/argocd/eslint.frontend-shared.cjs‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/*
2+
* Copyright 2026 The Backstage Authors
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
module.exports = function materialUiMigrationEslintConfig(packageDir) {
18+
return require('@backstage/cli/config/eslint-factory')(packageDir, {
19+
restrictedImports: [
20+
{
21+
name: '@material-ui/core',
22+
message: 'Use @mui/material instead of Material UI v4.',
23+
},
24+
{
25+
name: '@material-ui/lab',
26+
message: 'Use @mui/material or @mui/lab instead of Material UI v4.',
27+
},
28+
{
29+
name: '@mui/styles',
30+
message:
31+
'Avoid @mui/styles/makeStyles. Use @mui/material sx/styled, or Backstage UI instead of makeStyles.',
32+
},
33+
{
34+
name: '@material-ui/icons',
35+
message:
36+
"Use '@mui/icons-material/<Icon>' instead of Material UI v4 (e.g. import MenuIcon from '@mui/icons-material/Menu').",
37+
},
38+
],
39+
});
40+
};

‎workspaces/argocd/plugins/argocd/.eslintrc.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
1+
// eslint-disable-next-line @backstage/no-relative-monorepo-imports -- workspace ESLint shared config
2+
module.exports = require('../../eslint.frontend-shared.cjs')(__dirname);

‎workspaces/argocd/plugins/argocd/dev/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import {
2828
import { permissionApiRef } from '@backstage/plugin-permission-react';
2929
import { mockApis, TestApiProvider } from '@backstage/test-utils';
3030

31-
import { Box } from '@material-ui/core';
31+
import Box from '@mui/material/Box';
3232

3333
import {
3434
ArgoCDApi,

‎workspaces/argocd/plugins/argocd/package.json‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,7 @@
5656
"@backstage/theme": "^0.7.3",
5757
"@backstage/ui": "^0.14.3",
5858
"@kubernetes/client-node": "^1.0.0",
59-
"@material-ui/core": "^4.9.13",
60-
"@material-ui/icons": "^4.9.1",
61-
"@material-ui/lab": "^4.0.0-alpha.61",
62-
"@material-ui/styles": "^4.11.5",
63-
"@mui/icons-material": "^6.0.0",
59+
"@mui/icons-material": "^5.15.16",
6460
"@mui/material": "^5.15.16",
6561
"@patternfly/react-core": "^6.0.0",
6662
"@patternfly/react-icons": "^6.0.0",

‎workspaces/argocd/plugins/argocd/src/components/AppStatus/AppHealthStatus.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*/
1616
import type { FC } from 'react';
1717

18-
import { Chip } from '@material-ui/core';
18+
import Chip from '@mui/material/Chip';
1919

2020
import {
2121
Application,

‎workspaces/argocd/plugins/argocd/src/components/AppStatus/AppSyncStatus.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*/
1616
import type { FC } from 'react';
1717

18-
import { Chip } from '@material-ui/core';
18+
import Chip from '@mui/material/Chip';
1919

2020
import {
2121
Application,

‎workspaces/argocd/plugins/argocd/src/components/AppStatus/StatusIcons.tsx‎

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -29,36 +29,34 @@ import {
2929
SyncStatusCode,
3030
SyncStatuses,
3131
} from '@backstage-community/plugin-argocd-common';
32-
import useIconStyles from '../../hooks/useIconStyles';
32+
import { iconStyle, SpinWrapper } from '../../hooks/useIconStyles';
3333

3434
export const SyncIcon: FC<{ status: SyncStatusCode }> = ({
3535
status,
3636
}): ReactNode => {
37-
const classes = useIconStyles();
3837
switch (status) {
3938
case SyncStatuses.Synced:
4039
return (
4140
<CheckCircleIcon
4241
data-testid="synced-icon"
43-
className={`${classes.icon}`}
44-
style={{ height: '1em', color: 'green' }}
42+
style={{ ...iconStyle, color: 'green' }}
4543
/>
4644
);
4745
case SyncStatuses.OutOfSync:
4846
return (
4947
<ArrowCircleUpIcon
5048
data-testid="outofsync-icon"
51-
className={`${classes.icon}`}
52-
style={{ height: '1em', color: '#f4c030' }}
49+
style={{ ...iconStyle, color: '#f4c030' }}
5350
/>
5451
);
5552
case SyncStatuses.Unknown:
5653
return (
57-
<CircleNotchIcon
58-
data-testid="unknown-icon"
59-
className={`${classes.icon} ${classes['icon-spin']}`}
60-
style={{ height: '1em', color: '#0DADEA' }}
61-
/>
54+
<SpinWrapper>
55+
<CircleNotchIcon
56+
data-testid="unknown-icon"
57+
style={{ ...iconStyle, color: '#0DADEA' }}
58+
/>
59+
</SpinWrapper>
6260
);
6361
default:
6462
return null;
@@ -68,54 +66,49 @@ export const SyncIcon: FC<{ status: SyncStatusCode }> = ({
6866
export const AppHealthIcon: FC<{ status: HealthStatus }> = ({
6967
status,
7068
}): ReactNode => {
71-
const classes = useIconStyles();
72-
7369
switch (status) {
7470
case HealthStatus.Healthy:
7571
return (
7672
<HeartIcon
7773
data-testid="healthy-icon"
78-
className={`${classes.icon}`}
79-
style={{ height: '1em', color: 'green' }}
74+
style={{ ...iconStyle, color: 'green' }}
8075
/>
8176
);
8277
case HealthStatus.Suspended:
8378
return (
8479
<PauseCircleIcon
8580
data-testid="suspended-icon"
86-
className={`${classes.icon}`}
87-
style={{ height: '1em', color: '#766f94' }}
81+
style={{ ...iconStyle, color: '#766f94' }}
8882
/>
8983
);
9084
case HealthStatus.Degraded:
9185
return (
9286
<HeartBrokenIcon
9387
data-testid="degraded-icon"
94-
className={`${classes.icon}`}
95-
style={{ height: '1em', color: '#E96D76' }}
88+
style={{ ...iconStyle, color: '#E96D76' }}
9689
/>
9790
);
9891
case HealthStatus.Progressing:
9992
return (
100-
<CircleNotchIcon
101-
data-testid="progressing-icon"
102-
className={`${classes.icon} ${classes['icon-spin']}`}
103-
style={{ height: '1em', color: '#0DADEA' }}
104-
/>
93+
<SpinWrapper>
94+
<CircleNotchIcon
95+
data-testid="progressing-icon"
96+
style={{ ...iconStyle, color: '#0DADEA' }}
97+
/>
98+
</SpinWrapper>
10599
);
106100
case HealthStatus.Missing:
107101
return (
108102
<GhostIcon
109103
data-testid="missing-icon"
110-
className={`${classes.icon}`}
111-
style={{ height: '1em', color: '#f4c030' }}
104+
style={{ ...iconStyle, color: '#f4c030' }}
112105
/>
113106
);
114107
default:
115108
return (
116109
<QuestionCircleIcon
117110
data-testid="unknown-icon"
118-
style={{ height: '1em', color: 'green' }}
111+
style={{ ...iconStyle, color: 'green' }}
119112
/>
120113
);
121114
}

‎workspaces/argocd/plugins/argocd/src/components/Common/AppCommitLink.tsx‎

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,12 @@ import {
1919
RevisionInfo,
2020
History,
2121
} from '@backstage-community/plugin-argocd-common';
22-
import {
23-
Chip,
24-
Typography,
25-
Tooltip,
26-
makeStyles,
27-
Theme,
28-
} from '@material-ui/core';
22+
import Box from '@mui/material/Box';
23+
import Chip from '@mui/material/Chip';
24+
import Typography from '@mui/material/Typography';
25+
import Tooltip from '@mui/material/Tooltip';
26+
import Skeleton from '@mui/material/Skeleton';
2927
import GitLabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
30-
import { Skeleton } from '@material-ui/lab';
3128
import { getCommitUrl } from '../../utils/utils';
3229
import { Entity } from '@backstage/catalog-model';
3330

@@ -39,26 +36,13 @@ interface CommitLinkProps {
3936
showAuthor?: boolean;
4037
}
4138

42-
const useCommitStyles = makeStyles<Theme>(theme => ({
43-
commitContainer: {
44-
maxWidth: theme.spacing(35),
45-
},
46-
commitMessage: {
47-
textOverflow: 'ellipsis',
48-
whiteSpace: 'nowrap',
49-
overflow: 'hidden',
50-
},
51-
}));
52-
5339
const AppCommitLink: FC<CommitLinkProps> = ({
5440
entity,
5541
application,
5642
revisions,
5743
latestRevision,
5844
showAuthor = false,
5945
}) => {
60-
const classes = useCommitStyles();
61-
6246
// If we have a multi-source application,
6347
// lets only use the first source to keep things simple for now.
6448
const latestRevisionSha =
@@ -92,7 +76,7 @@ const AppCommitLink: FC<CommitLinkProps> = ({
9276
};
9377

9478
return revisions && latestRevision ? (
95-
<div className={classes.commitContainer}>
79+
<Box sx={{ maxWidth: theme => theme.spacing(35) }}>
9680
<Chip
9781
data-testid={`${latestRevisionSha.slice(0, 5)}-commit-link`}
9882
size="small"
@@ -106,7 +90,11 @@ const AppCommitLink: FC<CommitLinkProps> = ({
10690
<Typography
10791
variant="body2"
10892
color="textSecondary"
109-
className={classes.commitMessage}
93+
sx={{
94+
textOverflow: 'ellipsis',
95+
whiteSpace: 'nowrap',
96+
overflow: 'hidden',
97+
}}
11098
>
11199
{!!revisionInfo ? (
112100
<Tooltip
@@ -119,7 +107,7 @@ const AppCommitLink: FC<CommitLinkProps> = ({
119107
<Skeleton />
120108
)}
121109
</Typography>
122-
</div>
110+
</Box>
123111
) : (
124112
<>-</>
125113
);

‎workspaces/argocd/plugins/argocd/src/components/Common/AppNamespace.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
*/
1616
import type { FC } from 'react';
1717

18-
import { Chip, Typography } from '@material-ui/core';
18+
import Chip from '@mui/material/Chip';
19+
import Typography from '@mui/material/Typography';
1920
import { Flex, FlexItem } from '@patternfly/react-core';
2021

2122
import { Application } from '@backstage-community/plugin-argocd-common';
@@ -32,7 +33,7 @@ const AppNamespace: FC<{ app: Application }> = ({ app }) => {
3233
<FlexItem>
3334
<Chip
3435
size="small"
35-
variant="default"
36+
variant="filled"
3637
color="primary"
3738
label="NS"
3839
style={{ background: 'green' }}

0 commit comments

Comments
 (0)