From 88d9ab371f98879990043f7fa94aacf39caf437d Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Fri, 27 Oct 2023 17:44:52 +0200
Subject: [PATCH] Use @mui/utils instead

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 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<CatalogTableRow>[] = useMemo(() => {
     return [
       columnFactories.createTitleColumn({ hidden: true }),
@@ -168,7 +147,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
         icon: () => (
           <>
             {/* eslint-disable-next-line react/forbid-elements */}
-            <span className={classes.visuallyHidden}>{title}</span>
+            <span style={visuallyHidden}>{title}</span>
             <OpenInNew fontSize="small" />
           </>
         ),
@@ -188,7 +167,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
         icon: () => (
           <>
             {/* eslint-disable-next-line react/forbid-elements */}
-            <span className={classes.visuallyHidden}>{title}</span>
+            <span style={visuallyHidden}>{title}</span>
             <Edit fontSize="small" />
           </>
         ),
@@ -209,7 +188,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
         icon: () => (
           <>
             {/* eslint-disable-next-line react/forbid-elements */}
-            <span className={classes.visuallyHidden}>{title}</span>
+            <span style={visuallyHidden}>{title}</span>
             {isStarred ? <YellowStar /> : <StarBorder />}
           </>
         ),
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"