fix: [M3-9124] - Link styles in KubernetesClusterRow and clean up one-off styles

packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx

@@ -1,11 +1,9 @@
-import { Chip } from '@linode/ui';
-import Grid from '@mui/material/Unstable_Grid2';
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-import { makeStyles } from 'tss-react/mui';
+import { Chip, Stack } from '@linode/ui';
+import React from 'react';
 
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { Hidden } from 'src/components/Hidden';
+import { Link } from 'src/components/Link';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { useAllKubernetesNodePoolQuery } from 'src/queries/kubernetes';
@@ -23,33 +21,6 @@ import { ClusterChips } from './ClusterChips';
 
 import type { KubeNodePoolResponse, KubernetesCluster } from '@linode/api-v4';
 
-const useStyles = makeStyles()(() => ({
-  clusterRow: {
-    '&:before': {
-      display: 'none',
-    },
-  },
-  labelStatusWrapper: {
-    alignItems: 'center',
-    display: 'flex',
-    flexFlow: 'row nowrap',
-    whiteSpace: 'nowrap',
-  },
-  link: {
-    '&:hover, &:focus': {
-      textDecoration: 'underline',
-    },
-    display: 'block',
-    fontSize: '.875rem',
-    lineHeight: '1.125rem',
-  },
-  version: {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'flex-start',
-  },
-}));
-
 export interface Props {
   cluster: KubernetesCluster;
   openDeleteDialog: (
@@ -62,7 +33,6 @@ export interface Props {
 
 export const KubernetesClusterRow = (props: Props) => {
   const { cluster, openDeleteDialog, openUpgradeDialog } = props;
-  const { classes } = useStyles();
 
   const { data: pools } = useAllKubernetesNodePoolQuery(cluster.id);
   const typesQuery = useSpecificTypes(pools?.map((pool) => pool.type) ?? []);
@@ -86,46 +56,35 @@ export const KubernetesClusterRow = (props: Props) => {
 
   return (
     <TableRow
-      className={classes.clusterRow}
       data-qa-cluster-cell={cluster.id}
       data-testid={'cluster-row'}
       key={cluster.id}
     >
       <TableCell data-qa-cluster-label>
-        <Grid
-          alignItems="center"
-          container
+        <Stack
+          direction="row"
           justifyContent="space-between"
-          wrap="nowrap"
+          spacing={1}
+          alignItems="center"
         >
-          <Grid className="py0">
-            <div className={classes.labelStatusWrapper}>
-              <Link
-                className={classes.link}
-                tabIndex={0}
-                to={`/kubernetes/clusters/${cluster.id}/summary`}
-              >
-                {cluster.label}
-              </Link>
-            </div>
-          </Grid>
-          <ClusterChips cluster={cluster} sx={{ marginLeft: 1 }} />
-        </Grid>
+          <Link tabIndex={0} to={`/kubernetes/clusters/${cluster.id}/summary`}>
+            {cluster.label}
+          </Link>
+          <ClusterChips cluster={cluster} />
+        </Stack>
       </TableCell>
       <Hidden mdDown>
         <TableCell data-qa-cluster-version>
-          <div className={classes.version}>
-            {cluster.k8s_version}
-            {hasUpgrade && (
-              <Chip
-                clickable
-                label="UPGRADE"
-                onClick={openUpgradeDialog}
-                size="small"
-                sx={{ mx: 2 }}
-              />
-            )}
-          </div>
+          {cluster.k8s_version}
+          {hasUpgrade && (
+            <Chip
+              clickable
+              label="UPGRADE"
+              onClick={openUpgradeDialog}
+              size="small"
+              sx={{ mx: 2 }}
+            />
+          )}
         </TableCell>
         <TableCell data-qa-cluster-date>
           <DateTimeDisplay value={cluster.created} />