feat(argocd): migrate ArgoCD plugin from Material UI v4 to v5 by its-mitesh-kumar · Pull Request #9708 · backstage/community-plugins

its-mitesh-kumar · 2026-06-28T10:42:33Z

Description

Migrate the ArgoCD plugin from Material UI v4 (@material-ui/*) to Material UI v5 (@mui/material, @mui/icons-material). This replaces all makeStyles/createStyles patterns with MUI v5 styled() components and sx prop, updates all component imports to per-path MUI v5 imports, handles API breaking changes (e.g. palette.type → palette.mode, Chip/Drawer/Menu prop updates), and removes the legacy @material-ui/* dependencies from package.json.

Fixed

https://redhat.atlassian.net/browse/RHIDP-13693

UI before Changes

S_.2026-06-28.at.7.mp4

UI after changes

S_.2026-06-28.at.3.58.57.PM.mov

S_.2026-06-28.at.4.01.43.PM.mov

✔️ Checklist

A changeset describing the change and affected packages. (more info)
Added or Updated documentation
Tests for new functionality and regression tests for bug fixes
Screenshots attached (for UI changes)

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> Co-authored-by: Cursor <cursoragent@cursor.com>

backstage-goalie · 2026-06-28T10:42:56Z

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@backstage-community/plugin-argocd	workspaces/argocd/plugins/argocd	minor	`v2.9.0`

Copilot

Pull request overview

Migrates the @backstage-community/plugin-argocd frontend plugin from Material UI v4 (@material-ui/*) to MUI v5 (@mui/material, @mui/icons-material) by updating component imports and replacing makeStyles/createStyles usage with styled()/sx.

Changes:

Removed legacy @material-ui/* dependencies and updated lockfile accordingly.
Replaced style hooks with sx/styled() patterns across ArgoCD UI components.
Updated affected unit tests to align with the new component structure/styling approach.

Reviewed changes

Copilot reviewed 42 out of 43 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
workspaces/argocd/yarn.lock	Removes legacy `@material-ui/*` entries.
workspaces/argocd/plugins/argocd/src/hooks/useIconStyles.ts	Replaces `makeStyles` icon styles with `styled()`/inline style exports.
workspaces/argocd/plugins/argocd/src/hooks/useDarkTheme.ts	Switches theme access to MUI v5 `palette.mode`.
workspaces/argocd/plugins/argocd/src/components/DeploymentSummary/DeploymentSummary.tsx	Updates MUI imports to v5 component paths.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/RolloutStatusIcon.tsx	Replaces class-based icon styling/spin with wrapper + inline styles.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/RolloutStatus.tsx	Updates Chip import to MUI v5.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/Rollouts.tsx	Replaces `makeStyles` with `sx` layout styles.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/Rollout.tsx	Replaces `makeStyles` container styles with `sx`.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/revisions/RevisionType.tsx	Updates Chip import/props for MUI v5.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/revisions/RevisionStatus.tsx	Replaces class-based icon styling/spin with wrapper + inline styles.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/revisions/RevisionImage.tsx	Updates Typography import to MUI v5.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/revisions/CanaryRevision.tsx	Replaces `makeStyles` with `sx` on Card.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/revisions/BlueGreenRevision.tsx	Updates MUI imports to v5 component paths.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/revisions/AnalysisRuns/AnalysisRunStatus.tsx	Replaces class-based icon styling/spin with wrapper + inline styles.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/revisions/AnalysisRuns/AnalysisRuns.tsx	Updates MUI imports and Chip usage for MUI v5.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/tests/RolloutStatusIcon.test.tsx	Updates test expectations for SpinWrapper structure.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/ResourcesTableRow.tsx	Replaces `makeStyles` with `sx`/inline styles for table rows.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/ResourcesTableHeader.tsx	Replaces `makeStyles` with `sx` on header cells.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/ResourcesTable.tsx	Replaces `makeStyles` with `sx`/inline styles and updates MUI imports.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/ResourcesSearchBar.tsx	Replaces `makeStyles` and v4 icons with MUI v5 `sx` + icons.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/ResourcesKebabMenuOptions.tsx	Updates Menu/IconButton imports and styling approach for MUI v5.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/resource/DeploymentMetadata.tsx	Replaces `makeStyles` with a shared style object used via `sx`.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/resource/DeploymentHistoryCommit.tsx	Converts `className` usage to `sx` and updates imports.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/resource/DeploymentHistory.tsx	Converts container styling to `sx` and updates imports.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/tests/ResourcesTable.test.tsx	Updates pagination label assertion for MUI v5.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycleHeader.tsx	Updates IconButton import to MUI v5.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycleDrawer.tsx	Replaces Drawer `classes` styling with `PaperProps.sx` and updates imports.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycleCard.tsx	Replaces `makeStyles` with `sx` on Card.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycle.tsx	Replaces `makeStyles` with a `styled()` container and updates theme mode usage.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/tests/DeploymentLifecycle.test.tsx	Updates ThemeProvider/createTheme usage for MUI v5 and `palette.mode`.
workspaces/argocd/plugins/argocd/src/components/Common/PermissionAlert.tsx	Replaces `@material-ui/lab` Alert imports with MUI v5 equivalents.
workspaces/argocd/plugins/argocd/src/components/Common/MetadataItemWithTooltip.tsx	Updates Typography/Tooltip imports to MUI v5.
workspaces/argocd/plugins/argocd/src/components/Common/MetadataItem.tsx	Updates Typography import to MUI v5.
workspaces/argocd/plugins/argocd/src/components/Common/Metadata.tsx	Updates Typography import to MUI v5.
workspaces/argocd/plugins/argocd/src/components/Common/AppServerLink.tsx	Updates Tooltip/Typography imports to MUI v5.
workspaces/argocd/plugins/argocd/src/components/Common/AppNamespace.tsx	Updates Chip/Typography imports and Chip variant for MUI v5.
workspaces/argocd/plugins/argocd/src/components/Common/AppCommitLink.tsx	Replaces `makeStyles` and v4 Skeleton import with MUI v5 patterns.
workspaces/argocd/plugins/argocd/src/components/AppStatus/StatusIcons.tsx	Replaces class-based icon styling/spin with wrapper + inline styles.
workspaces/argocd/plugins/argocd/src/components/AppStatus/AppSyncStatus.tsx	Updates Chip import to MUI v5.
workspaces/argocd/plugins/argocd/src/components/AppStatus/AppHealthStatus.tsx	Updates Chip import to MUI v5.
workspaces/argocd/plugins/argocd/package.json	Removes legacy `@material-ui/*` dependencies and adds/keeps MUI v5 deps.
workspaces/argocd/plugins/argocd/dev/index.tsx	Updates Box import to MUI v5.
workspaces/argocd/.changeset/migrate-argocd-mui-v5.md	Adds a changeset documenting the MUI v4→v5 migration.

Comments suppressed due to low confidence (1)

workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/resource/DeploymentHistoryCommit.tsx:69

aria-disabled is currently set to true when commitUrl exists (!!commitUrl), which is inverted. Also, when commitUrl is null this renders href="", creating a focusable link to the current page. Set aria-disabled when there is no URL and omit href when absent.

          <Link
            aria-disabled={!!commitUrl}
            href={commitUrl ?? ''}
            target="_blank"
            rel="noopener"
          >

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

Copilot

Pull request overview

Copilot reviewed 44 out of 45 changed files in this pull request and generated 2 comments.

+      sx={theme => ({
+        border: `1px solid ${theme.palette.grey.A100}`,
+        ml: 1.875,
+        borderRadius: 0.5,
+      })}


    "@mui/icons-material": "^6.0.0",
    "@mui/material": "^5.15.16",


feat(argocd): migrate ArgoCD plugin from Material UI v4 to v5

ecc4217

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> Co-authored-by: Cursor <cursoragent@cursor.com>

Copilot AI review requested due to automatic review settings June 28, 2026 10:42

its-mitesh-kumar requested review from a team, CryptoRodeo, Eswaraiahsapram, HusneShabbir, caugello, christoph-jerolimov, ciiay, debsmita1, divyanshiGupta, djanickova, dzemanov, jrichter1, karthikjeeyar, lokanandaprabhu and rohitkrai03 as code owners June 28, 2026 10:42

its-mitesh-kumar requested a review from awanlin June 28, 2026 10:42

backstage-service added the workspace/argocd label Jun 28, 2026

Copilot started reviewing on behalf of its-mitesh-kumar June 28, 2026 10:42 View session

Copilot AI reviewed Jun 28, 2026

View reviewed changes

its-mitesh-kumar added 2 commits June 28, 2026 17:24

addressing copilot comments

1426846

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

updating e2e tests

3d241d6

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

Copilot AI review requested due to automatic review settings June 28, 2026 13:20

Copilot started reviewing on behalf of its-mitesh-kumar June 28, 2026 13:20 View session

Copilot AI reviewed Jun 28, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(argocd): migrate ArgoCD plugin from Material UI v4 to v5#9708

feat(argocd): migrate ArgoCD plugin from Material UI v4 to v5#9708
its-mitesh-kumar wants to merge 3 commits into
backstage:mainfrom
its-mitesh-kumar:feat/argocd-mui-v4-to-v5-migration

its-mitesh-kumar commented Jun 28, 2026 •

edited

Loading

Uh oh!

backstage-goalie Bot commented Jun 28, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		"@mui/icons-material": "^6.0.0",
		"@mui/material": "^5.15.16",

Uh oh!

Conversation

its-mitesh-kumar commented Jun 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Fixed

UI before Changes

UI after changes

✔️ Checklist

Uh oh!

backstage-goalie Bot commented Jun 28, 2026

Changed Packages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

its-mitesh-kumar commented Jun 28, 2026 •

edited

Loading