From ae3a04098c585437c3d03b3dbfc50b825fd4a35c Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Thu, 22 Jun 2023 14:28:08 -0400
Subject: [PATCH 1/2] migrate styles for SelectableTableRow

---
 .../SelectableTableRow/SelectableTableRow.tsx | 79 ++++++++++---------
 .../components/SelectableTableRow/index.tsx   |  1 -
 .../LinodeTransferTable.tsx                   |  2 +-
 3 files changed, 41 insertions(+), 41 deletions(-)
 delete mode 100644 packages/manager/src/components/SelectableTableRow/index.tsx

diff --git a/packages/manager/src/components/SelectableTableRow/SelectableTableRow.tsx b/packages/manager/src/components/SelectableTableRow/SelectableTableRow.tsx
index 42ee843fbe6..c7e0f1f000c 100644
--- a/packages/manager/src/components/SelectableTableRow/SelectableTableRow.tsx
+++ b/packages/manager/src/components/SelectableTableRow/SelectableTableRow.tsx
@@ -1,50 +1,51 @@
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import CheckBox from 'src/components/CheckBox';
-import { makeStyles } from '@mui/styles';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 
-const useStyles = makeStyles(() => ({
-  root: {
-    '& td': {
-      padding: '0px 15px',
-    },
-  },
-  checkBox: {
-    textAlign: 'center',
-    width: 25,
-    paddingLeft: 0,
-    paddingRight: 0,
-    '& svg': {
-      width: 20,
-      height: 20,
-    },
-  },
-}));
-
-interface Props {
+interface SelectableTableRowProps {
   children: JSX.Element[];
   isChecked: boolean;
   handleToggleCheck: () => void;
 }
 
-export const SelectableTableRow: React.FC<Props> = (props) => {
-  const { isChecked, handleToggleCheck } = props;
-  const classes = useStyles();
-  return (
-    <TableRow className={classes.root}>
-      <TableCell className={classes.checkBox}>
-        <CheckBox
-          checked={isChecked}
-          onChange={handleToggleCheck}
-          inputProps={{
-            'aria-label': `Select all entities on page`,
-          }}
-        />
-      </TableCell>
-      {props.children}
-    </TableRow>
-  );
-};
+export const SelectableTableRow = React.memo(
+  (props: SelectableTableRowProps) => {
+    const { isChecked, handleToggleCheck } = props;
 
-export default React.memo(SelectableTableRow);
+    return (
+      <TableRow
+        sx={{
+          '& td': {
+            padding: '0px 15px',
+          },
+        }}
+      >
+        <StyledTableCell>
+          <CheckBox
+            checked={isChecked}
+            onChange={handleToggleCheck}
+            inputProps={{
+              'aria-label': `Select all entities on page`,
+            }}
+          />
+        </StyledTableCell>
+        {props.children}
+      </TableRow>
+    );
+  }
+);
+
+const StyledTableCell = styled(TableCell, {
+  label: 'StyledTableCell',
+})({
+  textAlign: 'center',
+  width: 25,
+  paddingLeft: 0,
+  paddingRight: 0,
+  '& svg': {
+    width: 20,
+    height: 20,
+  },
+});
diff --git a/packages/manager/src/components/SelectableTableRow/index.tsx b/packages/manager/src/components/SelectableTableRow/index.tsx
deleted file mode 100644
index 4018f8ce15f..00000000000
--- a/packages/manager/src/components/SelectableTableRow/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SelectableTableRow';
diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx
index ead692b81cb..4469b503172 100644
--- a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx
+++ b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx
@@ -4,7 +4,7 @@ import Hidden from 'src/components/core/Hidden';
 import { useTheme } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import SelectableTableRow from 'src/components/SelectableTableRow';
+import { SelectableTableRow } from 'src/components/SelectableTableRow/SelectableTableRow';
 import { TableCell } from 'src/components/TableCell';
 import { TableContentWrapper } from 'src/components/TableContentWrapper/TableContentWrapper';
 import { useSpecificTypes } from 'src/queries/types';

From efb917827fe94716ed6943cea1cec0c150585d21 Mon Sep 17 00:00:00 2001
From: Hana Xu <hxu@akamai.com>
Date: Thu, 22 Jun 2023 14:32:28 -0400
Subject: [PATCH 2/2] Added changeset: MUI v5 Migration - `Components >
 SelectableTableRow`

---
 .../manager/.changeset/pr-9299-tech-stories-1687458748557.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-9299-tech-stories-1687458748557.md

diff --git a/packages/manager/.changeset/pr-9299-tech-stories-1687458748557.md b/packages/manager/.changeset/pr-9299-tech-stories-1687458748557.md
new file mode 100644
index 00000000000..4a99299edf4
--- /dev/null
+++ b/packages/manager/.changeset/pr-9299-tech-stories-1687458748557.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+MUI v5 Migration - `Components > SelectableTableRow` ([#9299](https://github.com/linode/manager/pull/9299))