From b357b0dc56fecc349f13fa71576493e297a6e4b7 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Wed, 25 Oct 2023 15:19:05 +0200 Subject: [PATCH 1/5] Add utility styling for screen reader typography Signed-off-by: Philipp Hugenroth --- .../components/CatalogTable/CatalogTable.tsx | 36 +++++++++++++++---- 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 24ccb22908..e7d57b6ac8 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -34,17 +34,16 @@ import { useEntityList, useStarredEntities, } from '@backstage/plugin-catalog-react'; -import { Typography } from '@material-ui/core'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles, withStyles } from '@material-ui/core/styles'; import Edit from '@material-ui/icons/Edit'; import OpenInNew from '@material-ui/icons/OpenInNew'; import Star from '@material-ui/icons/Star'; import StarBorder from '@material-ui/icons/StarBorder'; import { capitalize } from 'lodash'; +import pluralize from 'pluralize'; import React, { ReactNode, useMemo } from 'react'; import { columnFactories } from './columns'; import { CatalogTableRow } from './types'; -import pluralize from 'pluralize'; /** * Props for {@link CatalogTable}. @@ -65,6 +64,26 @@ const YellowStar = withStyles({ }, })(Star); +/** + * MUI v5 removes `srOnly` variant from `Typography` component + * + * Utility copied from https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/visuallyHidden.ts + * as `srOnly` variant was only used in this file. + */ +const useStyles = makeStyles({ + visuallyHidden: { + border: 0, + clip: 'rect(0 0 0 0)', + height: '1px', + margin: -1, + overflow: 'hidden', + padding: 0, + position: 'absolute', + whiteSpace: 'nowrap', + width: '1px', + }, +}); + const refCompare = (a: Entity, b: Entity) => { const toRef = (entity: Entity) => entity.metadata.title || @@ -81,6 +100,8 @@ export const CatalogTable = (props: CatalogTableProps) => { const { isStarredEntity, toggleStarredEntity } = useStarredEntities(); const { loading, error, entities, filters } = useEntityList(); + const classes = useStyles(); + const defaultColumns: TableColumn[] = useMemo(() => { return [ columnFactories.createTitleColumn({ hidden: true }), @@ -146,7 +167,8 @@ export const CatalogTable = (props: CatalogTableProps) => { return { icon: () => ( <> - {title} + {/* eslint-disable-next-line react/forbid-elements */} + {title} ), @@ -165,7 +187,8 @@ export const CatalogTable = (props: CatalogTableProps) => { return { icon: () => ( <> - {title} + {/* eslint-disable-next-line react/forbid-elements */} + {title} ), @@ -185,7 +208,8 @@ export const CatalogTable = (props: CatalogTableProps) => { cellStyle: { paddingLeft: '1em' }, icon: () => ( <> - {title} + {/* eslint-disable-next-line react/forbid-elements */} + {title} {isStarred ? : } ), From 7c265b9758ccd9b5123153f5e9a3a1d312352546 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Wed, 25 Oct 2023 15:23:39 +0200 Subject: [PATCH 2/5] Add changeset Signed-off-by: Philipp Hugenroth --- .changeset/odd-planes-cheat.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/odd-planes-cheat.md diff --git a/.changeset/odd-planes-cheat.md b/.changeset/odd-planes-cheat.md new file mode 100644 index 0000000000..661ecaa0d4 --- /dev/null +++ b/.changeset/odd-planes-cheat.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Fix type error on `CatalogTable` when using Material UI v5 From 88d9ab371f98879990043f7fa94aacf39caf437d Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 27 Oct 2023 17:44:52 +0200 Subject: [PATCH 3/5] Use @mui/utils instead Signed-off-by: Philipp Hugenroth --- plugins/catalog/package.json | 1 + .../components/CatalogTable/CatalogTable.tsx | 31 +++---------------- yarn.lock | 26 ++++++++++++++++ 3 files changed, 32 insertions(+), 26 deletions(-) diff --git a/plugins/catalog/package.json b/plugins/catalog/package.json index 7d5220e2fb..350d50da37 100644 --- a/plugins/catalog/package.json +++ b/plugins/catalog/package.json @@ -63,6 +63,7 @@ "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.61", + "@mui/utils": "^5.14.15", "@types/react": "^16.13.1 || ^17.0.0", "dataloader": "^2.0.0", "expiry-map": "^2.0.0", diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index e7d57b6ac8..4e338b5205 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -34,7 +34,8 @@ import { useEntityList, useStarredEntities, } from '@backstage/plugin-catalog-react'; -import { makeStyles, withStyles } from '@material-ui/core/styles'; +import { withStyles } from '@material-ui/core/styles'; +import { visuallyHidden } from '@mui/utils'; import Edit from '@material-ui/icons/Edit'; import OpenInNew from '@material-ui/icons/OpenInNew'; import Star from '@material-ui/icons/Star'; @@ -64,26 +65,6 @@ const YellowStar = withStyles({ }, })(Star); -/** - * MUI v5 removes `srOnly` variant from `Typography` component - * - * Utility copied from https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/visuallyHidden.ts - * as `srOnly` variant was only used in this file. - */ -const useStyles = makeStyles({ - visuallyHidden: { - border: 0, - clip: 'rect(0 0 0 0)', - height: '1px', - margin: -1, - overflow: 'hidden', - padding: 0, - position: 'absolute', - whiteSpace: 'nowrap', - width: '1px', - }, -}); - const refCompare = (a: Entity, b: Entity) => { const toRef = (entity: Entity) => entity.metadata.title || @@ -100,8 +81,6 @@ export const CatalogTable = (props: CatalogTableProps) => { const { isStarredEntity, toggleStarredEntity } = useStarredEntities(); const { loading, error, entities, filters } = useEntityList(); - const classes = useStyles(); - const defaultColumns: TableColumn[] = useMemo(() => { return [ columnFactories.createTitleColumn({ hidden: true }), @@ -168,7 +147,7 @@ export const CatalogTable = (props: CatalogTableProps) => { icon: () => ( <> {/* eslint-disable-next-line react/forbid-elements */} - {title} + {title} ), @@ -188,7 +167,7 @@ export const CatalogTable = (props: CatalogTableProps) => { icon: () => ( <> {/* eslint-disable-next-line react/forbid-elements */} - {title} + {title} ), @@ -209,7 +188,7 @@ export const CatalogTable = (props: CatalogTableProps) => { icon: () => ( <> {/* eslint-disable-next-line react/forbid-elements */} - {title} + {title} {isStarred ? : } ), diff --git a/yarn.lock b/yarn.lock index 6534e7d908..11daf75793 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6183,6 +6183,7 @@ __metadata: "@material-ui/core": ^4.12.2 "@material-ui/icons": ^4.9.1 "@material-ui/lab": 4.0.0-alpha.61 + "@mui/utils": ^5.14.15 "@testing-library/dom": ^9.0.0 "@testing-library/jest-dom": ^6.0.0 "@testing-library/react": ^14.0.0 @@ -14037,6 +14038,24 @@ __metadata: languageName: node linkType: hard +"@mui/utils@npm:^5.14.15": + version: 5.14.15 + resolution: "@mui/utils@npm:5.14.15" + dependencies: + "@babel/runtime": ^7.23.2 + "@types/prop-types": ^15.7.8 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 6c4270110eed03a2e9073111eed01555257073ec500f85f6656c9f67ff15019bf12ce632d537e71a2d5872598b62f2d31762a11e1e40ff9e985b7fe2beb6c066 + languageName: node + linkType: hard + "@mui/utils@npm:^5.14.17": version: 5.14.17 resolution: "@mui/utils@npm:5.14.17" @@ -19500,6 +19519,13 @@ __metadata: languageName: node linkType: hard +"@types/prop-types@npm:^15.7.8": + version: 15.7.9 + resolution: "@types/prop-types@npm:15.7.9" + checksum: c7591d3ff7593e243908a07e1d3e2bb6e8879008af5800d8378115a90d0fdf669a1cae72a6d7f69e59c4fa7bb4c8ed61f6ebc1c520fe110c6f2b03ac02414072 + languageName: node + linkType: hard + "@types/puppeteer@npm:^5.4.4": version: 5.4.7 resolution: "@types/puppeteer@npm:5.4.7" From 2a636a95b8efcb95a75b5a77cbc9f186e4beeed0 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Tue, 14 Nov 2023 10:55:54 +0100 Subject: [PATCH 4/5] catalog: switch table srOnly labels back to Typography Signed-off-by: Patrik Oldsberg --- .../src/components/CatalogTable/CatalogTable.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 4e338b5205..04584f688a 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -34,6 +34,7 @@ import { useEntityList, useStarredEntities, } from '@backstage/plugin-catalog-react'; +import Typography from '@material-ui/core/Typography'; import { withStyles } from '@material-ui/core/styles'; import { visuallyHidden } from '@mui/utils'; import Edit from '@material-ui/icons/Edit'; @@ -146,8 +147,7 @@ export const CatalogTable = (props: CatalogTableProps) => { return { icon: () => ( <> - {/* eslint-disable-next-line react/forbid-elements */} - {title} + {title} ), @@ -166,8 +166,7 @@ export const CatalogTable = (props: CatalogTableProps) => { return { icon: () => ( <> - {/* eslint-disable-next-line react/forbid-elements */} - {title} + {title} ), @@ -187,8 +186,7 @@ export const CatalogTable = (props: CatalogTableProps) => { cellStyle: { paddingLeft: '1em' }, icon: () => ( <> - {/* eslint-disable-next-line react/forbid-elements */} - {title} + {title} {isStarred ? : } ), From dbe5e9495b7e468c1fb47d8137382c53d093e31c Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Tue, 14 Nov 2023 11:08:37 +0100 Subject: [PATCH 5/5] yarn.lock: dedup @mui/utils Signed-off-by: Patrik Oldsberg --- yarn.lock | 27 +-------------------------- 1 file changed, 1 insertion(+), 26 deletions(-) diff --git a/yarn.lock b/yarn.lock index 11daf75793..1c24eacb3c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14038,25 +14038,7 @@ __metadata: languageName: node linkType: hard -"@mui/utils@npm:^5.14.15": - version: 5.14.15 - resolution: "@mui/utils@npm:5.14.15" - dependencies: - "@babel/runtime": ^7.23.2 - "@types/prop-types": ^15.7.8 - prop-types: ^15.8.1 - react-is: ^18.2.0 - peerDependencies: - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 6c4270110eed03a2e9073111eed01555257073ec500f85f6656c9f67ff15019bf12ce632d537e71a2d5872598b62f2d31762a11e1e40ff9e985b7fe2beb6c066 - languageName: node - linkType: hard - -"@mui/utils@npm:^5.14.17": +"@mui/utils@npm:^5.14.15, @mui/utils@npm:^5.14.17": version: 5.14.17 resolution: "@mui/utils@npm:5.14.17" dependencies: @@ -19519,13 +19501,6 @@ __metadata: languageName: node linkType: hard -"@types/prop-types@npm:^15.7.8": - version: 15.7.9 - resolution: "@types/prop-types@npm:15.7.9" - checksum: c7591d3ff7593e243908a07e1d3e2bb6e8879008af5800d8378115a90d0fdf669a1cae72a6d7f69e59c4fa7bb4c8ed61f6ebc1c520fe110c6f2b03ac02414072 - languageName: node - linkType: hard - "@types/puppeteer@npm:^5.4.4": version: 5.4.7 resolution: "@types/puppeteer@npm:5.4.7"