fix(quay): migrate MUIv4 to MUIv5

workspaces/quay/.changeset/quiet-maps-dream.md

@@ -0,0 +1,5 @@
+---
+'@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` 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.

workspaces/quay/.prettierignore

@@ -4,3 +4,5 @@ coverage
 knip-report.md
 .vscode
 .eslintrc.js
+report.api.md
+report-alpha.api.md

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,
+};

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",

workspaces/quay/packages/app/package.json

@@ -45,11 +45,14 @@
     "@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",
     "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",

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 = (
   <EntityTechdocsContent>

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 (
     <svg

workspaces/quay/packages/app/src/components/Root/LogoIcon.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: 28,
@@ -26,7 +26,7 @@ const useStyles = makeStyles({
 });
 
 const LogoIcon = () => {
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   return (
     <svg

workspaces/quay/packages/app/src/components/Root/Root.tsx

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { PropsWithChildren } from 'react';
+
 import {
   Link,
   Sidebar,
@@ -31,19 +33,20 @@ import {
   Settings as SidebarSettings,
   UserSettingsSignInAvatar,
 } from '@backstage/plugin-user-settings';
-import { makeStyles } from '@material-ui/core';
-import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
-import ExtensionIcon from '@material-ui/icons/Extension';
-import HomeIcon from '@material-ui/icons/Home';
-import LibraryBooks from '@material-ui/icons/LibraryBooks';
-import MenuIcon from '@material-ui/icons/Menu';
-import GroupIcon from '@material-ui/icons/People';
-import SearchIcon from '@material-ui/icons/Search';
-import { PropsWithChildren } from 'react';
+
+import CreateComponentIcon from '@mui/icons-material/AddCircleOutline';
+import ExtensionIcon from '@mui/icons-material/Extension';
+import HomeIcon from '@mui/icons-material/Home';
+import LibraryBooks from '@mui/icons-material/LibraryBooks';
+import MenuIcon from '@mui/icons-material/Menu';
+import GroupIcon from '@mui/icons-material/People';
+import SearchIcon from '@mui/icons-material/Search';
+import { makeStyles } from 'tss-react/mui';
+
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
 
-const useSidebarLogoStyles = makeStyles({
+const useSidebarLogoStyles = makeStyles()({
   root: {
     width: sidebarConfig.drawerWidthClosed,
     height: 3 * sidebarConfig.logoHeight,
@@ -59,7 +62,7 @@ const useSidebarLogoStyles = makeStyles({
 });
 
 const SidebarLogo = () => {
-  const classes = useSidebarLogoStyles();
+  const { classes } = useSidebarLogoStyles();
   const { isOpen } = useSidebarOpenState();
 
   return (
@@ -80,7 +83,6 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
       </SidebarGroup>
       <SidebarDivider />
       <SidebarGroup label="Menu" icon={<MenuIcon />}>
-        {/* Global nav, not org-specific */}
         <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
         <MyGroupsSidebarItem
           singularTitle="My Group"
@@ -90,11 +92,8 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
         <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
         <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
         <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
-        {/* End global nav */}
         <SidebarDivider />
-        <SidebarScrollWrapper>
-          {/* Items in this group will be scrollable if they run out of space */}
-        </SidebarScrollWrapper>
+        <SidebarScrollWrapper />
       </SidebarGroup>
       <SidebarSpace />
       <SidebarDivider />

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: {

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

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

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

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',
+  },
+});

workspaces/quay/plugins/quay/.prettierignore

@@ -10,3 +10,5 @@ renovate.json
 dist-dynamic
 dist-scalprum
 playwright-report
+report.api.md
+report-alpha.api.md

workspaces/quay/plugins/quay/package.json

@@ -43,9 +43,10 @@
     "@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",
     "filesize": "^11.0.0",
     "luxon": "^3.6.1",
     "react-use": "^17.4.0"

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 (

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,15 +69,15 @@ export function QuayRepository(_props: QuayRepositoryProps) {
         data={data}
         columns={columns}
         emptyContent={
-          <Box data-testid="quay-repo-table-empty" padding={2}>
+          <Box data-testid="quay-repo-table-empty" p={2}>
             <Typography component="h3" align="center" variant="h6" gutterBottom>
               No container images found
             </Typography>
             <Typography
               component="p"
               align="center"
               variant="body1"
-              color="textSecondary"
+              color="text.secondary"
               gutterBottom
             >
               This repository doesn't contain any images yet, or there might be

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<QuayTagData>[] = [
   {
     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<QuayTagData>[] = [
       a.manifest_digest_raw.localeCompare(b.manifest_digest_raw),
   },
 ];
-
-export const useStyles = makeStyles(theme => ({
-  empty: {
-    padding: theme.spacing(2),
-    display: 'flex',
-    justifyContent: 'center',
-  },
-}));