From 0ae062d9c55d08526e88baf548efffaadfd5e4d2 Mon Sep 17 00:00:00 2001 From: Yi Cai Date: Mon, 15 Jun 2026 02:22:41 -0400 Subject: [PATCH 1/4] fix(quay): migrate MUIv4 to MUIv5 Signed-off-by: Yi Cai --- .../quay/.changeset/quiet-maps-dream.md | 7 + workspaces/quay/.prettierignore | 2 + workspaces/quay/.prettierrc.js | 23 ++ workspaces/quay/package.json | 1 - workspaces/quay/packages/app/knip-report.md | 6 + workspaces/quay/packages/app/package.json | 10 +- .../app/src/components/EntityPage.tsx | 3 +- .../app/src/components/Root/LogoFull.tsx | 7 +- .../app/src/components/Root/LogoIcon.tsx | 6 +- .../packages/app/src/components/Root/Root.tsx | 31 +- .../app/src/components/SearchPage.tsx | 11 +- .../quay/plugins/quay-actions/.prettierignore | 2 + .../quay/plugins/quay-backend/.prettierignore | 2 + .../quay/plugins/quay-common/.prettierignore | 2 + workspaces/quay/plugins/quay/.eslintrc.js | 6 +- workspaces/quay/plugins/quay/.prettierignore | 2 + workspaces/quay/plugins/quay/package.json | 8 +- .../PermissionAlert/PermissionAlert.tsx | 3 +- .../QuayRepository/QuayRepository.tsx | 7 +- .../QuayRepository/tableHeading.tsx | 13 +- .../components/QuayTagDetails/component.tsx | 19 +- .../src/components/QuayWidget/QuayWidget.tsx | 3 +- .../quay/plugins/quay/src/hooks/quay.tsx | 11 +- workspaces/quay/yarn.lock | 294 +++++++++++++----- 24 files changed, 332 insertions(+), 147 deletions(-) create mode 100644 workspaces/quay/.changeset/quiet-maps-dream.md create mode 100644 workspaces/quay/.prettierrc.js diff --git a/workspaces/quay/.changeset/quiet-maps-dream.md b/workspaces/quay/.changeset/quiet-maps-dream.md new file mode 100644 index 00000000000..30bbca1bf07 --- /dev/null +++ b/workspaces/quay/.changeset/quiet-maps-dream.md @@ -0,0 +1,7 @@ +--- +'@backstage-community/plugin-quay': patch +--- + +Migrated the Quay plugin and dev app from Material UI v4 to MUI v5. Replaced `@material-ui/*` with `@mui/material`, `@mui/icons-material`, and `@mui/styles`; migrated `makeStyles` in the plugin to `@mui/styles` and in the dev app to `tss-react/mui`. Existing `@backstage/ui` CSS imports are unchanged. No breaking API changes. + +--- diff --git a/workspaces/quay/.prettierignore b/workspaces/quay/.prettierignore index c89db3d14be..9717b04e24e 100644 --- a/workspaces/quay/.prettierignore +++ b/workspaces/quay/.prettierignore @@ -4,3 +4,5 @@ coverage knip-report.md .vscode .eslintrc.js +report.api.md +report-alpha.api.md diff --git a/workspaces/quay/.prettierrc.js b/workspaces/quay/.prettierrc.js new file mode 100644 index 00000000000..6ddbc10b39a --- /dev/null +++ b/workspaces/quay/.prettierrc.js @@ -0,0 +1,23 @@ +/* + * Copyright 2026 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** @type {import('prettier').Config} */ +module.exports = { + ...require('@backstage/cli/config/prettier'), + // api-reports formats report.api.md from the workspace root; disable + // auto-loading prettier-plugin-sort-imports (declaration-only TS blocks). + pluginSearchDirs: false, +}; diff --git a/workspaces/quay/package.json b/workspaces/quay/package.json index 21da43440ad..086590d514e 100644 --- a/workspaces/quay/package.json +++ b/workspaces/quay/package.json @@ -55,7 +55,6 @@ "@types/react-dom": "^18", "refractor@npm:3.6.0/prismjs": "^1.30.0" }, - "prettier": "@backstage/cli/config/prettier", "lint-staged": { "*.{js,jsx,ts,tsx,mjs,cjs}": [ "eslint --fix", diff --git a/workspaces/quay/packages/app/knip-report.md b/workspaces/quay/packages/app/knip-report.md index 2661c353270..2ac0e006561 100644 --- a/workspaces/quay/packages/app/knip-report.md +++ b/workspaces/quay/packages/app/knip-report.md @@ -1,2 +1,8 @@ # Knip report +## Unused dependencies (1) + +| Name | Location | Severity | +| :---------- | :---------------- | :------- | +| @mui/styles | package.json:52:6 | error | + diff --git a/workspaces/quay/packages/app/package.json b/workspaces/quay/packages/app/package.json index f1ef5879017..e2c2ccfaf06 100644 --- a/workspaces/quay/packages/app/package.json +++ b/workspaces/quay/packages/app/package.json @@ -45,11 +45,15 @@ "@backstage/plugin-user-settings": "^0.9.3", "@backstage/theme": "^0.7.3", "@backstage/ui": "^0.15.0", - "@material-ui/core": "^4.12.2", - "@material-ui/icons": "^4.9.1", + "@emotion/react": "^11.13.0", + "@emotion/styled": "^11.13.0", + "@mui/icons-material": "^5.16.7", + "@mui/material": "^5.16.7", + "@mui/styles": "^5.16.7", "react": "^18.0.2", "react-dom": "^18.0.2", - "react-router-dom": "^6.3.0" + "react-router-dom": "^6.3.0", + "tss-react": "^4.9.10" }, "devDependencies": { "@testing-library/dom": "^10.4.1", diff --git a/workspaces/quay/packages/app/src/components/EntityPage.tsx b/workspaces/quay/packages/app/src/components/EntityPage.tsx index 311aa9c5816..93a67c7da41 100644 --- a/workspaces/quay/packages/app/src/components/EntityPage.tsx +++ b/workspaces/quay/packages/app/src/components/EntityPage.tsx @@ -70,7 +70,8 @@ import { import { EntityTechdocsContent } from '@backstage/plugin-techdocs'; import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; -import { Button, Grid } from '@material-ui/core'; +import Button from '@mui/material/Button'; +import Grid from '@mui/material/Grid'; const techdocsContent = ( diff --git a/workspaces/quay/packages/app/src/components/Root/LogoFull.tsx b/workspaces/quay/packages/app/src/components/Root/LogoFull.tsx index d1f2e9e6c0b..1b9db5b15d9 100644 --- a/workspaces/quay/packages/app/src/components/Root/LogoFull.tsx +++ b/workspaces/quay/packages/app/src/components/Root/LogoFull.tsx @@ -13,9 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from 'tss-react/mui'; -const useStyles = makeStyles({ +const useStyles = makeStyles()({ svg: { width: 'auto', height: 30, @@ -24,8 +24,9 @@ const useStyles = makeStyles({ fill: '#7df3e1', }, }); + const LogoFull = () => { - const classes = useStyles(); + const { classes } = useStyles(); return ( { - const classes = useStyles(); + const { classes } = useStyles(); return ( { - const classes = useSidebarLogoStyles(); + const { classes } = useSidebarLogoStyles(); const { isOpen } = useSidebarOpenState(); return ( @@ -80,7 +83,6 @@ export const Root = ({ children }: PropsWithChildren<{}>) => ( }> - {/* Global nav, not org-specific */} ) => ( - {/* End global nav */} - - {/* Items in this group will be scrollable if they run out of space */} - + diff --git a/workspaces/quay/packages/app/src/components/SearchPage.tsx b/workspaces/quay/packages/app/src/components/SearchPage.tsx index e6d9d8e959b..12fb0c15a3c 100644 --- a/workspaces/quay/packages/app/src/components/SearchPage.tsx +++ b/workspaces/quay/packages/app/src/components/SearchPage.tsx @@ -35,9 +35,13 @@ import { useSearch, } from '@backstage/plugin-search-react'; import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs'; -import { Grid, makeStyles, Paper, Theme } from '@material-ui/core'; -const useStyles = makeStyles((theme: Theme) => ({ +import Grid from '@mui/material/Grid'; +import Paper from '@mui/material/Paper'; +import { Theme } from '@mui/material/styles'; +import { makeStyles } from 'tss-react/mui'; + +const useStyles = makeStyles()((theme: Theme) => ({ bar: { padding: theme.spacing(1, 0), }, @@ -53,7 +57,7 @@ const useStyles = makeStyles((theme: Theme) => ({ })); const SearchPage = () => { - const classes = useStyles(); + const { classes } = useStyles(); const { types } = useSearch(); const catalogApi = useApi(catalogApiRef); @@ -91,7 +95,6 @@ const SearchPage = () => { label="Entity" name="name" values={async () => { - // Return a list of entities which are documented. const { items } = await catalogApi.getEntities({ fields: ['metadata.name'], filter: { diff --git a/workspaces/quay/plugins/quay-actions/.prettierignore b/workspaces/quay/plugins/quay-actions/.prettierignore index fc8357d99e3..db08a054a05 100644 --- a/workspaces/quay/plugins/quay-actions/.prettierignore +++ b/workspaces/quay/plugins/quay-actions/.prettierignore @@ -10,3 +10,5 @@ renovate.json dist-dynamic dist-scalprum playwright-report +report.api.md +report-alpha.api.md diff --git a/workspaces/quay/plugins/quay-backend/.prettierignore b/workspaces/quay/plugins/quay-backend/.prettierignore index fc8357d99e3..db08a054a05 100644 --- a/workspaces/quay/plugins/quay-backend/.prettierignore +++ b/workspaces/quay/plugins/quay-backend/.prettierignore @@ -10,3 +10,5 @@ renovate.json dist-dynamic dist-scalprum playwright-report +report.api.md +report-alpha.api.md diff --git a/workspaces/quay/plugins/quay-common/.prettierignore b/workspaces/quay/plugins/quay-common/.prettierignore index fc8357d99e3..db08a054a05 100644 --- a/workspaces/quay/plugins/quay-common/.prettierignore +++ b/workspaces/quay/plugins/quay-common/.prettierignore @@ -10,3 +10,5 @@ renovate.json dist-dynamic dist-scalprum playwright-report +report.api.md +report-alpha.api.md diff --git a/workspaces/quay/plugins/quay/.eslintrc.js b/workspaces/quay/plugins/quay/.eslintrc.js index 8bd689af97c..f6c77e902b3 100644 --- a/workspaces/quay/plugins/quay/.eslintrc.js +++ b/workspaces/quay/plugins/quay/.eslintrc.js @@ -13,4 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -module.exports = require('@backstage/cli/config/eslint-factory')(__dirname); +module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, { + rules: { + '@backstage/no-top-level-material-ui-4-imports': 'error', + }, +}); diff --git a/workspaces/quay/plugins/quay/.prettierignore b/workspaces/quay/plugins/quay/.prettierignore index fc8357d99e3..db08a054a05 100644 --- a/workspaces/quay/plugins/quay/.prettierignore +++ b/workspaces/quay/plugins/quay/.prettierignore @@ -10,3 +10,5 @@ renovate.json dist-dynamic dist-scalprum playwright-report +report.api.md +report-alpha.api.md diff --git a/workspaces/quay/plugins/quay/package.json b/workspaces/quay/plugins/quay/package.json index e67c26cdadb..1c479f6d464 100644 --- a/workspaces/quay/plugins/quay/package.json +++ b/workspaces/quay/plugins/quay/package.json @@ -43,9 +43,11 @@ "@backstage/plugin-catalog-react": "^3.0.0", "@backstage/plugin-permission-react": "^0.5.1", "@backstage/theme": "^0.7.3", - "@material-ui/core": "^4.12.2", - "@material-ui/icons": "^4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", + "@emotion/react": "^11.13.0", + "@emotion/styled": "^11.13.0", + "@mui/icons-material": "^5.16.7", + "@mui/material": "^5.16.7", + "@mui/styles": "^5.16.7", "filesize": "^11.0.0", "luxon": "^3.6.1", "react-use": "^17.4.0" diff --git a/workspaces/quay/plugins/quay/src/components/PermissionAlert/PermissionAlert.tsx b/workspaces/quay/plugins/quay/src/components/PermissionAlert/PermissionAlert.tsx index b57a0726e7f..2095d4214e5 100644 --- a/workspaces/quay/plugins/quay/src/components/PermissionAlert/PermissionAlert.tsx +++ b/workspaces/quay/plugins/quay/src/components/PermissionAlert/PermissionAlert.tsx @@ -13,7 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Alert, AlertTitle } from '@material-ui/lab'; +import Alert from '@mui/material/Alert'; +import AlertTitle from '@mui/material/AlertTitle'; const PermissionAlert = () => { return ( diff --git a/workspaces/quay/plugins/quay/src/components/QuayRepository/QuayRepository.tsx b/workspaces/quay/plugins/quay/src/components/QuayRepository/QuayRepository.tsx index 6450adddb25..616766a2f77 100644 --- a/workspaces/quay/plugins/quay/src/components/QuayRepository/QuayRepository.tsx +++ b/workspaces/quay/plugins/quay/src/components/QuayRepository/QuayRepository.tsx @@ -16,7 +16,8 @@ import { Link, Progress, Table } from '@backstage/core-components'; import { useApi } from '@backstage/core-plugin-api'; -import { Box, Typography } from '@material-ui/core'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; import { quayApiRef } from '../../api'; import { DOC_LINKS } from '../../doc-links'; @@ -68,7 +69,7 @@ export function QuayRepository(_props: QuayRepositoryProps) { data={data} columns={columns} emptyContent={ - + No container images found @@ -76,7 +77,7 @@ export function QuayRepository(_props: QuayRepositoryProps) { component="p" align="center" variant="body1" - color="textSecondary" + color="text.secondary" gutterBottom > This repository doesn't contain any images yet, or there might be diff --git a/workspaces/quay/plugins/quay/src/components/QuayRepository/tableHeading.tsx b/workspaces/quay/plugins/quay/src/components/QuayRepository/tableHeading.tsx index 9aab39e6ae6..1a88e4fa612 100644 --- a/workspaces/quay/plugins/quay/src/components/QuayRepository/tableHeading.tsx +++ b/workspaces/quay/plugins/quay/src/components/QuayRepository/tableHeading.tsx @@ -17,8 +17,7 @@ import type { ReactNode } from 'react'; import { Link, Progress, TableColumn } from '@backstage/core-components'; -import { Tooltip } from '@material-ui/core'; -import makeStyles from '@material-ui/core/styles/makeStyles'; +import Tooltip from '@mui/material/Tooltip'; import { securityScanComparator, vulnerabilitySummary } from '../../lib/utils'; import type { QuayTagData } from '../../types'; @@ -83,7 +82,7 @@ export const columns: TableColumn[] = [ { title: 'Size', field: 'size', - type: 'numeric', + type: 'string', customSort: (a: QuayTagData, b: QuayTagData) => a.rawSize - b.rawSize, }, { @@ -100,11 +99,3 @@ export const columns: TableColumn[] = [ a.manifest_digest_raw.localeCompare(b.manifest_digest_raw), }, ]; - -export const useStyles = makeStyles(theme => ({ - empty: { - padding: theme.spacing(2), - display: 'flex', - justifyContent: 'center', - }, -})); diff --git a/workspaces/quay/plugins/quay/src/components/QuayTagDetails/component.tsx b/workspaces/quay/plugins/quay/src/components/QuayTagDetails/component.tsx index 5893f0efbad..36920e7b76d 100644 --- a/workspaces/quay/plugins/quay/src/components/QuayTagDetails/component.tsx +++ b/workspaces/quay/plugins/quay/src/components/QuayTagDetails/component.tsx @@ -18,10 +18,12 @@ import type { ReactNode } from 'react'; import { Link, Table, TableColumn } from '@backstage/core-components'; import type { RouteFunc } from '@backstage/core-plugin-api'; -import { makeStyles, TableContainer, TableHead } from '@material-ui/core'; -import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'; -import LinkIcon from '@material-ui/icons/Link'; -import WarningIcon from '@material-ui/icons/Warning'; +import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'; +import LinkIcon from '@mui/icons-material/Link'; +import WarningIcon from '@mui/icons-material/Warning'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import { makeStyles } from '@mui/styles'; import { SEVERITY_COLORS } from '../../lib/utils'; import { @@ -50,7 +52,7 @@ const columns: TableColumn[] = [ {rowData.Name} {rowData.Link.trim().length > 0 ? ( - + ) : null} @@ -73,9 +75,7 @@ const columns: TableColumn[] = [
{rowData.Severity}
@@ -135,9 +135,6 @@ export const QuayTagDetails = ({ feat => typeof feat.Vulnerabilities !== 'undefined', ) .map(feature => { - // TS doesn't seem to register this list as never being undefined from the above filter - // so we cast it into the list - // NOSONAR - irrelevant as per above comment return (feature.Vulnerabilities as Vulnerability[]).map( (v: Vulnerability): VulnerabilityListItem => { return { diff --git a/workspaces/quay/plugins/quay/src/components/QuayWidget/QuayWidget.tsx b/workspaces/quay/plugins/quay/src/components/QuayWidget/QuayWidget.tsx index b7d86787d34..64e2c3ffb33 100644 --- a/workspaces/quay/plugins/quay/src/components/QuayWidget/QuayWidget.tsx +++ b/workspaces/quay/plugins/quay/src/components/QuayWidget/QuayWidget.tsx @@ -19,7 +19,8 @@ import { useEntity, } from '@backstage/plugin-catalog-react'; -import { Card, CardHeader } from '@material-ui/core'; +import Card from '@mui/material/Card'; +import CardHeader from '@mui/material/CardHeader'; import { QUAY_ANNOTATION_REPOSITORY } from '../../hooks'; import { isQuayAvailable } from '../../plugin'; diff --git a/workspaces/quay/plugins/quay/src/hooks/quay.tsx b/workspaces/quay/plugins/quay/src/hooks/quay.tsx index 97a76e1122e..a1acf265576 100644 --- a/workspaces/quay/plugins/quay/src/hooks/quay.tsx +++ b/workspaces/quay/plugins/quay/src/hooks/quay.tsx @@ -20,7 +20,9 @@ import { Entity } from '@backstage/catalog-model'; import { useApi } from '@backstage/core-plugin-api'; import { useEntity } from '@backstage/plugin-catalog-react'; -import { Box, Chip, makeStyles } from '@material-ui/core'; +import Box from '@mui/material/Box'; +import Chip from '@mui/material/Chip'; +import { makeStyles } from '@mui/styles'; import { quayApiRef } from '../api'; import { Layer, QuayTagData, Tag } from '../types'; @@ -115,14 +117,9 @@ export const useTags = ( securityDetails: tagManifestLayers[tag.manifest_digest], securityStatus: tagManifestStatuses[tag.manifest_digest], manifest_digest_raw: tag.manifest_digest, - // is_manifest_list: tag.is_manifest_list, - // reversion: tag.reversion, - // start_ts: tag.start_ts, - // end_ts: tag.end_ts, - // manifest_list: tag.manifest_list, }; }); - }, [tags, localClasses.chip, tagManifestLayers, tagManifestStatuses]); + }, [tags, tagManifestLayers, tagManifestStatuses, localClasses]); return { loading, data }; }; diff --git a/workspaces/quay/yarn.lock b/workspaces/quay/yarn.lock index bf7302feb34..bbac18ea3f1 100644 --- a/workspaces/quay/yarn.lock +++ b/workspaces/quay/yarn.lock @@ -1623,9 +1623,11 @@ __metadata: "@backstage/test-utils": "npm:^1.7.18" "@backstage/theme": "npm:^0.7.3" "@backstage/ui": "npm:^0.15.0" - "@material-ui/core": "npm:^4.12.2" - "@material-ui/icons": "npm:^4.11.3" - "@material-ui/lab": "npm:4.0.0-alpha.61" + "@emotion/react": "npm:^11.13.0" + "@emotion/styled": "npm:^11.13.0" + "@mui/icons-material": "npm:^5.16.7" + "@mui/material": "npm:^5.16.7" + "@mui/styles": "npm:^5.16.7" "@playwright/test": "npm:1.60.0" "@testing-library/dom": "npm:^10.4.1" "@testing-library/jest-dom": "npm:^6.0.0" @@ -4594,7 +4596,7 @@ __metadata: languageName: node linkType: hard -"@emotion/cache@npm:^11.13.5, @emotion/cache@npm:^11.14.0": +"@emotion/cache@npm:*, @emotion/cache@npm:^11.13.5, @emotion/cache@npm:^11.14.0": version: 11.14.0 resolution: "@emotion/cache@npm:11.14.0" dependencies: @@ -4614,7 +4616,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: 10/379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387 @@ -4653,7 +4655,7 @@ __metadata: languageName: node linkType: hard -"@emotion/react@npm:^11.10.5": +"@emotion/react@npm:^11.10.5, @emotion/react@npm:^11.13.0": version: 11.14.0 resolution: "@emotion/react@npm:11.14.0" dependencies: @@ -4674,7 +4676,7 @@ __metadata: languageName: node linkType: hard -"@emotion/serialize@npm:^1.3.3": +"@emotion/serialize@npm:*, @emotion/serialize@npm:^1.3.3": version: 1.3.3 resolution: "@emotion/serialize@npm:1.3.3" dependencies: @@ -4694,9 +4696,9 @@ __metadata: languageName: node linkType: hard -"@emotion/styled@npm:^11.10.5": - version: 11.14.0 - resolution: "@emotion/styled@npm:11.14.0" +"@emotion/styled@npm:^11.10.5, @emotion/styled@npm:^11.13.0": + version: 11.14.1 + resolution: "@emotion/styled@npm:11.14.1" dependencies: "@babel/runtime": "npm:^7.18.3" "@emotion/babel-plugin": "npm:^11.13.5" @@ -4710,7 +4712,7 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 10/64bb3fd8c5d3042ba803eb2052fddf8e057b927682677f8fc41ecfe2b1abcc0da03944fde79fac8f2f55a56383d5c9547b93d4641bb51452cf59415c02dd9b10 + checksum: 10/b20ffaaac76e16538051da8d417f1da75f47f0974000edf0999f39f309b23ee0a91ba7dc1d5f60c4017d29fadfed48631ae4a8f697e3662a88318c667d072117 languageName: node linkType: hard @@ -4730,7 +4732,7 @@ __metadata: languageName: node linkType: hard -"@emotion/utils@npm:^1.4.2": +"@emotion/utils@npm:*, @emotion/utils@npm:^1.4.2": version: 1.4.2 resolution: "@emotion/utils@npm:1.4.2" checksum: 10/e5f3b8bca066b3361a7ad9064baeb9d01ed1bf51d98416a67359b62cb3affec6bb0249802c4ed11f4f8030f93cc4b67506909420bdb110adec6983d712897208 @@ -5358,30 +5360,30 @@ __metadata: languageName: unknown linkType: soft -"@internationalized/date@npm:^3.12.0, @internationalized/date@npm:^3.12.1": - version: 3.12.1 - resolution: "@internationalized/date@npm:3.12.1" +"@internationalized/date@npm:^3.12.0, @internationalized/date@npm:^3.12.1, @internationalized/date@npm:^3.12.2": + version: 3.12.2 + resolution: "@internationalized/date@npm:3.12.2" dependencies: "@swc/helpers": "npm:^0.5.0" - checksum: 10/a8178a73e65cb86357008e39e589bf5899b47a4ebd6123d96b54e3b19aade31c136d8e5f9c48c4627110f26d857e15aa4be9e189e56386a4b26c616df4ea1795 + checksum: 10/5a01927e21eb51756a006976a96a1dd499099ba8d2457437a09762f9682f7606e9dd4d4bb87165c9357dc0488fc2c9b5212e55de4d9115dd72087aad1aa9ad87 languageName: node linkType: hard -"@internationalized/number@npm:^3.6.6": - version: 3.6.6 - resolution: "@internationalized/number@npm:3.6.6" +"@internationalized/number@npm:^3.6.6, @internationalized/number@npm:^3.6.7": + version: 3.6.7 + resolution: "@internationalized/number@npm:3.6.7" dependencies: "@swc/helpers": "npm:^0.5.0" - checksum: 10/7a7c8290a91bae3c1b22ab006c036b50f041162a383446360d0dd8194aa491a370057df1b2aa2cdfbccefd335cf6f4679e14608f5c24031b6852375654fa59df + checksum: 10/bdf2a21d338789825e7ba0f2b0d7000c3dbc4a5ee2e395e7a347ee094927eb271327bf10467de17e4c23c4a51f9467aa9de7f3e568407c84487a34960c7f7fda languageName: node linkType: hard -"@internationalized/string@npm:^3.2.8": - version: 3.2.8 - resolution: "@internationalized/string@npm:3.2.8" +"@internationalized/string@npm:^3.2.8, @internationalized/string@npm:^3.2.9": + version: 3.2.9 + resolution: "@internationalized/string@npm:3.2.9" dependencies: "@swc/helpers": "npm:^0.5.0" - checksum: 10/2054baf8b2d5f32c7904b5a584e724d00ae781b3efb22c113c18d6a604f700569faf006be28929032831972272693d7dd863d324550a7385068715e3a67b8a56 + checksum: 10/4706a762dc88fc21c8d197b63769a8fa5e18dbfc1ead68ed870c6bcf930941a0acb73476f8c7888fa83050714470c3370bf7342c41a1833af3e89a4264d22f30 languageName: node linkType: hard @@ -6519,22 +6521,38 @@ __metadata: languageName: node linkType: hard -"@mui/core-downloads-tracker@npm:^5.16.14": - version: 5.16.14 - resolution: "@mui/core-downloads-tracker@npm:5.16.14" - checksum: 10/a25658362a69a89f35cdc12ded01b998b7f02df43648029f2523813fc7f259cc85f62bd1877059359d462e7c163e82308bd4cc74fa2d35651d302c5d8bbbc7f4 +"@mui/core-downloads-tracker@npm:^5.18.0": + version: 5.18.0 + resolution: "@mui/core-downloads-tracker@npm:5.18.0" + checksum: 10/065b46739d2bd84b880ad2f6a0a2062d60e3a296ce18ff380cad22ab5b2cb3de396755f322f4bea3a422ffffe1a9244536fc3c9623056ff3873c996e6664b1b9 + languageName: node + linkType: hard + +"@mui/icons-material@npm:^5.16.7": + version: 5.18.0 + resolution: "@mui/icons-material@npm:5.18.0" + dependencies: + "@babel/runtime": "npm:^7.23.9" + peerDependencies: + "@mui/material": ^5.0.0 + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/f55f3da3c375ec3bad5417f5588122587ccf6a02093de286ca723bb6d01692f2cdf81dea413abc396eba87d6f7ab7443cc51e3dd024da8099764e55e12fa4176 languageName: node linkType: hard -"@mui/material@npm:^5.12.2": - version: 5.16.14 - resolution: "@mui/material@npm:5.16.14" +"@mui/material@npm:^5.12.2, @mui/material@npm:^5.16.7": + version: 5.18.0 + resolution: "@mui/material@npm:5.18.0" dependencies: "@babel/runtime": "npm:^7.23.9" - "@mui/core-downloads-tracker": "npm:^5.16.14" - "@mui/system": "npm:^5.16.14" - "@mui/types": "npm:^7.2.15" - "@mui/utils": "npm:^5.16.14" + "@mui/core-downloads-tracker": "npm:^5.18.0" + "@mui/system": "npm:^5.18.0" + "@mui/types": "npm:~7.2.15" + "@mui/utils": "npm:^5.17.1" "@popperjs/core": "npm:^2.11.8" "@types/react-transition-group": "npm:^4.4.10" clsx: "npm:^2.1.0" @@ -6555,16 +6573,16 @@ __metadata: optional: true "@types/react": optional: true - checksum: 10/4fe36ebe4d5f65e420895d114db81c0b8a5061e39bc18cdbebf6204953dae34cdc04af9827b65eb136e5a6853f4500a736ed3d52cce4ea37057a749eca5c3fad + checksum: 10/4b72e07c76c7c4b1076db82ef42a06dfab7d73d73f0d272019b2e0b200fc25c27bb295a8672577e1094168054159bed387cf9af74fec30e98aead7d97fad0a57 languageName: node linkType: hard -"@mui/private-theming@npm:^5.16.14": - version: 5.16.14 - resolution: "@mui/private-theming@npm:5.16.14" +"@mui/private-theming@npm:^5.17.1": + version: 5.17.1 + resolution: "@mui/private-theming@npm:5.17.1" dependencies: "@babel/runtime": "npm:^7.23.9" - "@mui/utils": "npm:^5.16.14" + "@mui/utils": "npm:^5.17.1" prop-types: "npm:^15.8.1" peerDependencies: "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 @@ -6572,16 +6590,17 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 10/19cb67ccb7f9702cc2c3de99861607cc9d4109c7df578d39e6cf662f9b0108a2f4a9bf59f6c23c4e5c30a269ad7964ebd7dc2342b7f469fb9abea762a4b00bbc + checksum: 10/f8b849f545e8ab29eac959f174f56702e5b72ffda85c3b0621750e294a3f64d15873ebdb792cf478564db1c3cf4b366eabcd4156897d811949f2df079b424c8c languageName: node linkType: hard -"@mui/styled-engine@npm:^5.16.14": - version: 5.16.14 - resolution: "@mui/styled-engine@npm:5.16.14" +"@mui/styled-engine@npm:^5.18.0": + version: 5.18.0 + resolution: "@mui/styled-engine@npm:5.18.0" dependencies: "@babel/runtime": "npm:^7.23.9" "@emotion/cache": "npm:^11.13.5" + "@emotion/serialize": "npm:^1.3.3" csstype: "npm:^3.1.3" prop-types: "npm:^15.8.1" peerDependencies: @@ -6593,19 +6612,50 @@ __metadata: optional: true "@emotion/styled": optional: true - checksum: 10/d1cf2c713bab684313c6993ce63e12928f88a5033a562fa039dec4d1ce33eef3b94767470979f608b3a993dcb0ed01ef5a5a2dd9c4d4fd80419d989607ba8d75 + checksum: 10/8468a82bafb6dba40b7a3add845dd49868bcbcda3e9a0226a08f74b715dcbe2360186944ef94c44b2abe85f79335a470c0634195b9e48ccf6b5439df4bc17a90 + languageName: node + linkType: hard + +"@mui/styles@npm:^5.16.7": + version: 5.18.0 + resolution: "@mui/styles@npm:5.18.0" + dependencies: + "@babel/runtime": "npm:^7.23.9" + "@emotion/hash": "npm:^0.9.1" + "@mui/private-theming": "npm:^5.17.1" + "@mui/types": "npm:~7.2.15" + "@mui/utils": "npm:^5.17.1" + clsx: "npm:^2.1.0" + csstype: "npm:^3.1.3" + hoist-non-react-statics: "npm:^3.3.2" + jss: "npm:^10.10.0" + jss-plugin-camel-case: "npm:^10.10.0" + jss-plugin-default-unit: "npm:^10.10.0" + jss-plugin-global: "npm:^10.10.0" + jss-plugin-nested: "npm:^10.10.0" + jss-plugin-props-sort: "npm:^10.10.0" + jss-plugin-rule-value-function: "npm:^10.10.0" + jss-plugin-vendor-prefixer: "npm:^10.10.0" + prop-types: "npm:^15.8.1" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/b02cc02f7c8eafe0bd5b8bc1121ee0cee50bb48e876b652313aad4c61ae466c411423e8e82f603a386ecf569c537ecfa92b6c7dabd0c798d6727e935df7fa1e6 languageName: node linkType: hard -"@mui/system@npm:^5.16.14": - version: 5.16.14 - resolution: "@mui/system@npm:5.16.14" +"@mui/system@npm:^5.18.0": + version: 5.18.0 + resolution: "@mui/system@npm:5.18.0" dependencies: "@babel/runtime": "npm:^7.23.9" - "@mui/private-theming": "npm:^5.16.14" - "@mui/styled-engine": "npm:^5.16.14" - "@mui/types": "npm:^7.2.15" - "@mui/utils": "npm:^5.16.14" + "@mui/private-theming": "npm:^5.17.1" + "@mui/styled-engine": "npm:^5.18.0" + "@mui/types": "npm:~7.2.15" + "@mui/utils": "npm:^5.17.1" clsx: "npm:^2.1.0" csstype: "npm:^3.1.3" prop-types: "npm:^15.8.1" @@ -6621,28 +6671,28 @@ __metadata: optional: true "@types/react": optional: true - checksum: 10/71892070ffe1d7b626b894776c395a748d0d8fb37c11bd22f79559d889c7b83fcbb095fab74b930d2a704d3b575720b6be4675473e7a50c92bd86411f6740232 + checksum: 10/4584a4d4f62ddaecc8b047f1a3b24ecde2ea4198963b5db3c006fd8109cd16085099862dbf935fad545ee146a3c06f119e0dd9bdc987cf45f900bab611a4afe7 languageName: node linkType: hard -"@mui/types@npm:^7.2.15": - version: 7.2.22 - resolution: "@mui/types@npm:7.2.22" +"@mui/types@npm:~7.2.15": + version: 7.2.24 + resolution: "@mui/types@npm:7.2.24" peerDependencies: "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 peerDependenciesMeta: "@types/react": optional: true - checksum: 10/fca63bf0b082366c8bb70d5798ae348363f7f88b7523d91bcb49dfdf9c147edfc2795b58b849caec6874a445347778572e6d7cdee22151e6e325161dfb23ab20 + checksum: 10/5ed4f90ec62c7df901e58b53011bf6b377b48e13b07de9eeb15c7a6f3f759310f0682b64685c7762f660fad6edf4c8e05595313c93810fc63c54270b899b4a75 languageName: node linkType: hard -"@mui/utils@npm:^5.14.15, @mui/utils@npm:^5.16.14": - version: 5.16.14 - resolution: "@mui/utils@npm:5.16.14" +"@mui/utils@npm:^5.14.15, @mui/utils@npm:^5.17.1": + version: 5.17.1 + resolution: "@mui/utils@npm:5.17.1" dependencies: "@babel/runtime": "npm:^7.23.9" - "@mui/types": "npm:^7.2.15" + "@mui/types": "npm:~7.2.15" "@types/prop-types": "npm:^15.7.12" clsx: "npm:^2.1.1" prop-types: "npm:^15.8.1" @@ -6653,7 +6703,7 @@ __metadata: peerDependenciesMeta: "@types/react": optional: true - checksum: 10/29bb7ca0a6e9be7bc5ab5505621566ace279fd7a2da149f0937984502d349f2b78dd42f475c5e22b546b1b27d063bd8eb8e92093b0530a814169a535dc250cdc + checksum: 10/26efae9a9f84a817b016a93ab3e3c3d08533947f62b19d4a5f8cd67ebf6932b1f68c4e4ae677dc0d3397ecd1bf1cc8cb47ab83a345bcaa9b4f45c401ec9d3926 languageName: node linkType: hard @@ -8033,12 +8083,12 @@ __metadata: languageName: node linkType: hard -"@react-types/shared@npm:^3.34.0": - version: 3.34.0 - resolution: "@react-types/shared@npm:3.34.0" +"@react-types/shared@npm:^3.34.0, @react-types/shared@npm:^3.35.0": + version: 3.35.0 + resolution: "@react-types/shared@npm:3.35.0" peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 - checksum: 10/d28b0a3a3f68f94167fd7b4f474803430093b1a31f5f50cef6ddd755b923ba3af35dde40ffcc1f320926892744823a039b4a396c671f7c59aa49634811f0c43a + checksum: 10/6fb5e95e3736f37edc1e472693663e83974788c348a37af98c0345be12f1bca9ebd4415f90b7f12ba7047d6a8274ddddf0aa3ff71dc9ebe56dc5ae490fec8b3b languageName: node linkType: hard @@ -8105,7 +8155,7 @@ __metadata: languageName: node linkType: hard -"@remixicon/react@npm:>=4.6.0 <4.9.0, @remixicon/react@npm:^4.6.0": +"@remixicon/react@npm:>=4.6.0 <4.9.0": version: 4.8.0 resolution: "@remixicon/react@npm:4.8.0" peerDependencies: @@ -8114,6 +8164,15 @@ __metadata: languageName: node linkType: hard +"@remixicon/react@npm:^4.6.0": + version: 4.9.0 + resolution: "@remixicon/react@npm:4.9.0" + peerDependencies: + react: ">=18.2.0" + checksum: 10/3d8f1d86b2bb20ab5e44d15f18811e928b0886f7710eb7a1516afb9913ba72e46facec5dfee382825139d800bcbb6704c15d0c760d0f977c12257d4af8db3295 + languageName: node + linkType: hard + "@rjsf/core@npm:5.24.13": version: 5.24.13 resolution: "@rjsf/core@npm:5.24.13" @@ -12341,8 +12400,11 @@ __metadata: "@backstage/plugin-user-settings": "npm:^0.9.3" "@backstage/theme": "npm:^0.7.3" "@backstage/ui": "npm:^0.15.0" - "@material-ui/core": "npm:^4.12.2" - "@material-ui/icons": "npm:^4.9.1" + "@emotion/react": "npm:^11.13.0" + "@emotion/styled": "npm:^11.13.0" + "@mui/icons-material": "npm:^5.16.7" + "@mui/material": "npm:^5.16.7" + "@mui/styles": "npm:^5.16.7" "@testing-library/dom": "npm:^10.4.1" "@testing-library/jest-dom": "npm:^6.0.0" "@testing-library/react": "npm:^16.0.0" @@ -12350,6 +12412,7 @@ __metadata: react: "npm:^18.0.2" react-dom: "npm:^18.0.2" react-router-dom: "npm:^6.3.0" + tss-react: "npm:^4.9.10" languageName: unknown linkType: soft @@ -20330,7 +20393,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: @@ -20341,7 +20404,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: @@ -20351,7 +20414,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: @@ -20361,7 +20424,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: @@ -20372,7 +20435,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: @@ -20382,7 +20445,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: @@ -20393,7 +20456,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: @@ -20404,7 +20467,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: @@ -25223,7 +25286,24 @@ __metadata: languageName: node linkType: hard -"react-aria-components@npm:^1.14.0, react-aria-components@npm:~1.17.0": +"react-aria-components@npm:^1.14.0": + version: 1.18.0 + resolution: "react-aria-components@npm:1.18.0" + dependencies: + "@internationalized/date": "npm:^3.12.2" + "@react-types/shared": "npm:^3.35.0" + "@swc/helpers": "npm:^0.5.0" + client-only: "npm:^0.0.1" + react-aria: "npm:3.49.0" + react-stately: "npm:3.47.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/9c9a45778eb9ccf72102e6e1e28232abb4668b51ad5e2869b4e87f401ccc74e56b8c1161582b1499e9aebcfb65ba7732dc62f94cd2fe050aea618ec848ec9b2b + languageName: node + linkType: hard + +"react-aria-components@npm:~1.17.0": version: 1.17.0 resolution: "react-aria-components@npm:1.17.0" dependencies: @@ -25260,6 +25340,26 @@ __metadata: languageName: node linkType: hard +"react-aria@npm:3.49.0": + version: 3.49.0 + resolution: "react-aria@npm:3.49.0" + dependencies: + "@internationalized/date": "npm:^3.12.2" + "@internationalized/number": "npm:^3.6.7" + "@internationalized/string": "npm:^3.2.9" + "@react-types/shared": "npm:^3.35.0" + "@swc/helpers": "npm:^0.5.0" + aria-hidden: "npm:^1.2.3" + clsx: "npm:^2.0.0" + react-stately: "npm:3.47.0" + use-sync-external-store: "npm:^1.6.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/e68920bb9bbef2c6d9e855430b87b4a4e05d174425d9126ee599f41e00732293eb287172a5f5197b0e6c60b954bfcf7823b455f7e62f864e8d03d2d98564b9e8 + languageName: node + linkType: hard + "react-beautiful-dnd@npm:^13.0.0": version: 13.1.1 resolution: "react-beautiful-dnd@npm:13.1.1" @@ -25696,6 +25796,22 @@ __metadata: languageName: node linkType: hard +"react-stately@npm:3.47.0": + version: 3.47.0 + resolution: "react-stately@npm:3.47.0" + dependencies: + "@internationalized/date": "npm:^3.12.2" + "@internationalized/number": "npm:^3.6.7" + "@internationalized/string": "npm:^3.2.9" + "@react-types/shared": "npm:^3.35.0" + "@swc/helpers": "npm:^0.5.0" + use-sync-external-store: "npm:^1.6.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + checksum: 10/be1d9a04b4c914abbddf0b99c0bfcab86eaf5d4ee5ce609d8798f9a53ae2e75778aad40ea3d13e5914c23a67311874b7754d90e02c2c0044768e5bbc1a7d8586 + languageName: node + linkType: hard + "react-style-singleton@npm:^2.2.2, react-style-singleton@npm:^2.2.3": version: 2.2.3 resolution: "react-style-singleton@npm:2.2.3" @@ -28937,6 +29053,28 @@ __metadata: languageName: node linkType: hard +"tss-react@npm:^4.9.10": + version: 4.9.21 + resolution: "tss-react@npm:4.9.21" + dependencies: + "@emotion/cache": "npm:*" + "@emotion/serialize": "npm:*" + "@emotion/utils": "npm:*" + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/server": ^11.4.0 + "@mui/material": ^5.0.0 || ^6.0.0 || ^7.0.0 || ^9.0.0 + "@types/react": ^16.8.0 || ^17.0.2 || ^18.0.0 || ^19.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@emotion/server": + optional: true + "@mui/material": + optional: true + checksum: 10/69f86e93db6338e5166e6d738d16af1ee961897a7349436caa62b971e2716b99eb93e19e14df8a30f2e789832369479484a2179055fb11f69dfcd43de51bee12 + languageName: node + linkType: hard + "tsyringe@npm:^4.10.0": version: 4.10.0 resolution: "tsyringe@npm:4.10.0" From cf5a114f846edf6ea1d3ae8dc15dec2e00308b0f Mon Sep 17 00:00:00 2001 From: Yi Cai Date: Mon, 15 Jun 2026 10:11:14 -0400 Subject: [PATCH 2/4] addressed review comments Signed-off-by: Yi Cai --- workspaces/quay/.changeset/quiet-maps-dream.md | 2 -- workspaces/quay/packages/app/package.json | 1 - workspaces/quay/yarn.lock | 1 - 3 files changed, 4 deletions(-) diff --git a/workspaces/quay/.changeset/quiet-maps-dream.md b/workspaces/quay/.changeset/quiet-maps-dream.md index 30bbca1bf07..6cf6325bdb8 100644 --- a/workspaces/quay/.changeset/quiet-maps-dream.md +++ b/workspaces/quay/.changeset/quiet-maps-dream.md @@ -3,5 +3,3 @@ --- Migrated the Quay plugin and dev app from Material UI v4 to MUI v5. Replaced `@material-ui/*` with `@mui/material`, `@mui/icons-material`, and `@mui/styles`; migrated `makeStyles` in the plugin to `@mui/styles` and in the dev app to `tss-react/mui`. Existing `@backstage/ui` CSS imports are unchanged. No breaking API changes. - ---- diff --git a/workspaces/quay/packages/app/package.json b/workspaces/quay/packages/app/package.json index e2c2ccfaf06..eab1adea4e6 100644 --- a/workspaces/quay/packages/app/package.json +++ b/workspaces/quay/packages/app/package.json @@ -49,7 +49,6 @@ "@emotion/styled": "^11.13.0", "@mui/icons-material": "^5.16.7", "@mui/material": "^5.16.7", - "@mui/styles": "^5.16.7", "react": "^18.0.2", "react-dom": "^18.0.2", "react-router-dom": "^6.3.0", diff --git a/workspaces/quay/yarn.lock b/workspaces/quay/yarn.lock index bbac18ea3f1..85bba7fae7c 100644 --- a/workspaces/quay/yarn.lock +++ b/workspaces/quay/yarn.lock @@ -12404,7 +12404,6 @@ __metadata: "@emotion/styled": "npm:^11.13.0" "@mui/icons-material": "npm:^5.16.7" "@mui/material": "npm:^5.16.7" - "@mui/styles": "npm:^5.16.7" "@testing-library/dom": "npm:^10.4.1" "@testing-library/jest-dom": "npm:^6.0.0" "@testing-library/react": "npm:^16.0.0" From e961c2e4c78eaec1a4efcf2a3f085d8e2c406765 Mon Sep 17 00:00:00 2001 From: Yi Cai Date: Mon, 15 Jun 2026 10:43:18 -0400 Subject: [PATCH 3/4] updated knip-report.md Signed-off-by: Yi Cai --- workspaces/quay/packages/app/knip-report.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/workspaces/quay/packages/app/knip-report.md b/workspaces/quay/packages/app/knip-report.md index 2ac0e006561..2661c353270 100644 --- a/workspaces/quay/packages/app/knip-report.md +++ b/workspaces/quay/packages/app/knip-report.md @@ -1,8 +1,2 @@ # Knip report -## Unused dependencies (1) - -| Name | Location | Severity | -| :---------- | :---------------- | :------- | -| @mui/styles | package.json:52:6 | error | - From da5d0277c0e996a31bf8bb0e2dc6aef2eaf0a684 Mon Sep 17 00:00:00 2001 From: Yi Cai Date: Mon, 15 Jun 2026 11:17:48 -0400 Subject: [PATCH 4/4] improvement Signed-off-by: Yi Cai --- .../quay/.changeset/quiet-maps-dream.md | 2 +- workspaces/quay/plugins/quay/package.json | 1 - .../components/QuayTagDetails/component.tsx | 31 ++++-------- .../quay/plugins/quay/src/hooks/quay.tsx | 22 ++++---- workspaces/quay/yarn.lock | 50 ++++--------------- 5 files changed, 28 insertions(+), 78 deletions(-) diff --git a/workspaces/quay/.changeset/quiet-maps-dream.md b/workspaces/quay/.changeset/quiet-maps-dream.md index 6cf6325bdb8..9b71db28027 100644 --- a/workspaces/quay/.changeset/quiet-maps-dream.md +++ b/workspaces/quay/.changeset/quiet-maps-dream.md @@ -2,4 +2,4 @@ '@backstage-community/plugin-quay': patch --- -Migrated the Quay plugin and dev app from Material UI v4 to MUI v5. Replaced `@material-ui/*` with `@mui/material`, `@mui/icons-material`, and `@mui/styles`; migrated `makeStyles` in the plugin to `@mui/styles` and in the dev app to `tss-react/mui`. Existing `@backstage/ui` CSS imports are unchanged. No breaking API changes. +Migrated the Quay plugin and dev app from Material UI v4 to MUI v5. Replaced `@material-ui/*` with `@mui/material` and `@mui/icons-material`; migrated plugin styling to the `sx` prop and dev app `makeStyles` to `tss-react/mui`. Existing `@backstage/ui` CSS imports are unchanged. No breaking API changes. diff --git a/workspaces/quay/plugins/quay/package.json b/workspaces/quay/plugins/quay/package.json index 1c479f6d464..900a6451fd3 100644 --- a/workspaces/quay/plugins/quay/package.json +++ b/workspaces/quay/plugins/quay/package.json @@ -47,7 +47,6 @@ "@emotion/styled": "^11.13.0", "@mui/icons-material": "^5.16.7", "@mui/material": "^5.16.7", - "@mui/styles": "^5.16.7", "filesize": "^11.0.0", "luxon": "^3.6.1", "react-use": "^17.4.0" diff --git a/workspaces/quay/plugins/quay/src/components/QuayTagDetails/component.tsx b/workspaces/quay/plugins/quay/src/components/QuayTagDetails/component.tsx index 36920e7b76d..6e0967499fd 100644 --- a/workspaces/quay/plugins/quay/src/components/QuayTagDetails/component.tsx +++ b/workspaces/quay/plugins/quay/src/components/QuayTagDetails/component.tsx @@ -21,9 +21,9 @@ import type { RouteFunc } from '@backstage/core-plugin-api'; import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'; import LinkIcon from '@mui/icons-material/Link'; import WarningIcon from '@mui/icons-material/Warning'; +import Box from '@mui/material/Box'; import TableContainer from '@mui/material/TableContainer'; import TableHead from '@mui/material/TableHead'; -import { makeStyles } from '@mui/styles'; import { SEVERITY_COLORS } from '../../lib/utils'; import { @@ -109,28 +109,11 @@ const columns: TableColumn[] = [ }, ]; -const useStyles = makeStyles({ - link: { - display: 'flex', - alignItems: 'center', - }, - linkText: { - marginLeft: '0.5rem', - fontSize: '1.1rem', - }, - tableHead: { - display: 'flex', - alignItems: 'center', - marginBottom: '1rem', - }, -}); - export const QuayTagDetails = ({ layer, rootLink, digest, }: QuayTagDetailsProps) => { - const classes = useStyles(); const vulnerabilities = layer.Features.filter( feat => typeof feat.Vulnerabilities !== 'undefined', ) @@ -155,10 +138,14 @@ export const QuayTagDetails = ({ return ( - - - - Back to repository + + + + + + Back to repository + + span': { - padding: '.3em', - }, +const digestChipSx = { + m: 0, + mr: '.2em', + height: '1.5em', + '& > span': { + p: '.3em', }, -}); +}; export const useTags = ( instanceName: string | undefined, @@ -52,7 +49,6 @@ export const useTags = ( const [tagManifestStatuses, setTagManifestStatuses] = useState< Record >({}); - const localClasses = useLocalStyles(); const fetchSecurityDetails = async (tag: Tag) => { const securityDetails = await quayClient.getSecurityDetails( @@ -107,7 +103,7 @@ export const useTags = ( rawSize: tag.size, manifest_digest: ( - + {shortHash} ), @@ -119,7 +115,7 @@ export const useTags = ( manifest_digest_raw: tag.manifest_digest, }; }); - }, [tags, tagManifestLayers, tagManifestStatuses, localClasses]); + }, [tags, tagManifestLayers, tagManifestStatuses]); return { loading, data }; }; diff --git a/workspaces/quay/yarn.lock b/workspaces/quay/yarn.lock index 85bba7fae7c..ab757755a01 100644 --- a/workspaces/quay/yarn.lock +++ b/workspaces/quay/yarn.lock @@ -1627,7 +1627,6 @@ __metadata: "@emotion/styled": "npm:^11.13.0" "@mui/icons-material": "npm:^5.16.7" "@mui/material": "npm:^5.16.7" - "@mui/styles": "npm:^5.16.7" "@playwright/test": "npm:1.60.0" "@testing-library/dom": "npm:^10.4.1" "@testing-library/jest-dom": "npm:^6.0.0" @@ -4616,7 +4615,7 @@ __metadata: languageName: node linkType: hard -"@emotion/hash@npm:^0.9.1, @emotion/hash@npm:^0.9.2": +"@emotion/hash@npm:^0.9.2": version: 0.9.2 resolution: "@emotion/hash@npm:0.9.2" checksum: 10/379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387 @@ -6616,37 +6615,6 @@ __metadata: languageName: node linkType: hard -"@mui/styles@npm:^5.16.7": - version: 5.18.0 - resolution: "@mui/styles@npm:5.18.0" - dependencies: - "@babel/runtime": "npm:^7.23.9" - "@emotion/hash": "npm:^0.9.1" - "@mui/private-theming": "npm:^5.17.1" - "@mui/types": "npm:~7.2.15" - "@mui/utils": "npm:^5.17.1" - clsx: "npm:^2.1.0" - csstype: "npm:^3.1.3" - hoist-non-react-statics: "npm:^3.3.2" - jss: "npm:^10.10.0" - jss-plugin-camel-case: "npm:^10.10.0" - jss-plugin-default-unit: "npm:^10.10.0" - jss-plugin-global: "npm:^10.10.0" - jss-plugin-nested: "npm:^10.10.0" - jss-plugin-props-sort: "npm:^10.10.0" - jss-plugin-rule-value-function: "npm:^10.10.0" - jss-plugin-vendor-prefixer: "npm:^10.10.0" - prop-types: "npm:^15.8.1" - peerDependencies: - "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 - react: ^17.0.0 || ^18.0.0 || ^19.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 10/b02cc02f7c8eafe0bd5b8bc1121ee0cee50bb48e876b652313aad4c61ae466c411423e8e82f603a386ecf569c537ecfa92b6c7dabd0c798d6727e935df7fa1e6 - languageName: node - linkType: hard - "@mui/system@npm:^5.18.0": version: 5.18.0 resolution: "@mui/system@npm:5.18.0" @@ -20392,7 +20360,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-camel-case@npm:^10.10.0, jss-plugin-camel-case@npm:^10.5.1": +"jss-plugin-camel-case@npm:^10.5.1": version: 10.10.0 resolution: "jss-plugin-camel-case@npm:10.10.0" dependencies: @@ -20403,7 +20371,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-default-unit@npm:^10.10.0, jss-plugin-default-unit@npm:^10.5.1": +"jss-plugin-default-unit@npm:^10.5.1": version: 10.10.0 resolution: "jss-plugin-default-unit@npm:10.10.0" dependencies: @@ -20413,7 +20381,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-global@npm:^10.10.0, jss-plugin-global@npm:^10.5.1": +"jss-plugin-global@npm:^10.5.1": version: 10.10.0 resolution: "jss-plugin-global@npm:10.10.0" dependencies: @@ -20423,7 +20391,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-nested@npm:^10.10.0, jss-plugin-nested@npm:^10.5.1": +"jss-plugin-nested@npm:^10.5.1": version: 10.10.0 resolution: "jss-plugin-nested@npm:10.10.0" dependencies: @@ -20434,7 +20402,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-props-sort@npm:^10.10.0, jss-plugin-props-sort@npm:^10.5.1": +"jss-plugin-props-sort@npm:^10.5.1": version: 10.10.0 resolution: "jss-plugin-props-sort@npm:10.10.0" dependencies: @@ -20444,7 +20412,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-rule-value-function@npm:^10.10.0, jss-plugin-rule-value-function@npm:^10.5.1": +"jss-plugin-rule-value-function@npm:^10.5.1": version: 10.10.0 resolution: "jss-plugin-rule-value-function@npm:10.10.0" dependencies: @@ -20455,7 +20423,7 @@ __metadata: languageName: node linkType: hard -"jss-plugin-vendor-prefixer@npm:^10.10.0, jss-plugin-vendor-prefixer@npm:^10.5.1": +"jss-plugin-vendor-prefixer@npm:^10.5.1": version: 10.10.0 resolution: "jss-plugin-vendor-prefixer@npm:10.10.0" dependencies: @@ -20466,7 +20434,7 @@ __metadata: languageName: node linkType: hard -"jss@npm:10.10.0, jss@npm:^10.10.0, jss@npm:^10.5.1, 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: