fix: [M3-8764] - Kubernetes UI issues

packages/manager/.changeset/pr-11217-fixed-1730913381751.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Kubernetes details page UI issues ([#11217](https://github.com/linode/manager/pull/11217))

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx

@@ -32,7 +32,6 @@ interface Props {
 
 const useStyles = makeStyles()((theme: Theme) => ({
   iconTextOuter: {
-    flexBasis: '72%',
     minWidth: 115,
   },
   item: {
@@ -45,16 +44,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
     paddingBottom: theme.spacing(1),
     paddingTop: theme.spacing(1),
   },
-  mainGridContainer: {
-    position: 'relative',
-    [theme.breakpoints.up('lg')]: {
-      justifyContent: 'space-between',
-    },
-  },
-  root: {
-    marginBottom: theme.spacing(3),
-    padding: `${theme.spacing(2.5)} ${theme.spacing(2.5)} ${theme.spacing(3)}`,
-  },
   tooltip: {
     '& .MuiTooltip-tooltip': {
       minWidth: 320,
@@ -147,7 +136,7 @@ export const KubeClusterSpecs = React.memo((props: Props) => {
   };
 
   return (
-    <Grid container direction="row" lg={3} spacing={0} xs={12}>
+    <Grid container direction="row" lg={3} xs={12}>
       <Grid lg={6}>{kubeSpecsLeft.map(kubeSpecItem)}</Grid>
       <Grid lg={6}>{kubeSpecsRight.map(kubeSpecItem)}</Grid>
     </Grid>

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx

@@ -1,5 +1,4 @@
 import { Box } from '@linode/ui';
-import Grid from '@mui/material/Unstable_Grid2';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
@@ -8,6 +7,7 @@ import DetailsIcon from 'src/assets/icons/code-file.svg';
 import DownloadIcon from 'src/assets/icons/lke-download.svg';
 import ResetIcon from 'src/assets/icons/reset.svg';
 import { MaskableText } from 'src/components/MaskableText/MaskableText';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 import {
   useAllKubernetesClusterAPIEndpointsQuery,
@@ -135,8 +135,8 @@ export const KubeConfigDisplay = (props: Props) => {
   };
 
   return (
-    <>
-      <Grid xs={12}>
+    <Stack spacing={1}>
+      <Box>
         <Typography className={classes.label}>
           Kubernetes API Endpoint:
         </Typography>
@@ -147,8 +147,8 @@ export const KubeConfigDisplay = (props: Props) => {
           endpointsLoading,
           endpointsError?.[0].reason
         )}
-      </Grid>
-      <Grid xs={12}>
+      </Box>
+      <Box>
         <Typography className={classes.label} style={{ marginTop: 8 }}>
           Kubeconfig:
         </Typography>
@@ -189,7 +189,7 @@ export const KubeConfigDisplay = (props: Props) => {
             </Typography>
           </Box>
         </div>
-      </Grid>
-    </>
+      </Box>
+    </Stack>
   );
 };

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx

@@ -1,7 +1,6 @@
 import { Box } from '@linode/ui';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { useTheme } from '@mui/material/styles';
-import Grid from '@mui/material/Unstable_Grid2';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
@@ -29,9 +28,10 @@ import { KubeConfigDisplay } from './KubeConfigDisplay';
 import { KubeConfigDrawer } from './KubeConfigDrawer';
 import { KubeControlPlaneACLDrawer } from './KubeControlPaneACLDrawer';
 import { KubeEntityDetailFooter } from './KubeEntityDetailFooter';
-import { StyledActionRowGrid } from './KubeSummaryPanel.styles';
 
 import type { KubernetesCluster } from '@linode/api-v4/lib/kubernetes';
+import { Hidden } from 'src/components/Hidden';
+import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 
 interface Props {
   cluster: KubernetesCluster;
@@ -95,55 +95,32 @@ export const KubeSummaryPanel = React.memo((props: Props) => {
     setDrawerOpen(true);
   };
 
-  const sxSpacing = {
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(1),
-  };
-
-  const sxMainGridContainer = {
-    paddingBottom: theme.spacing(2.5),
-    paddingTop: theme.spacing(2),
-    position: 'relative',
-  };
-
   return (
-    <Stack sx={{ marginBottom: theme.spacing(3) }}>
+    <Box>
       <EntityDetail
         body={
-          <Grid
-            container
-            spacing={2}
-            sx={{ ...sxSpacing, ...sxMainGridContainer }}
-          >
+          <Stack direction="row" flexWrap="wrap" gap={2} px={3} py={2}>
             <KubeClusterSpecs cluster={cluster} />
-            <Grid container direction="column" lg={4} xs={12}>
-              <KubeConfigDisplay
-                clusterId={cluster.id}
-                clusterLabel={cluster.label}
-                handleOpenDrawer={handleOpenDrawer}
-                isResettingKubeConfig={isResettingKubeConfig}
-                setResetKubeConfigDialogOpen={setResetKubeConfigDialogOpen}
+            <KubeConfigDisplay
+              clusterId={cluster.id}
+              clusterLabel={cluster.label}
+              handleOpenDrawer={handleOpenDrawer}
+              isResettingKubeConfig={isResettingKubeConfig}
+              setResetKubeConfigDialogOpen={setResetKubeConfigDialogOpen}
+            />
+            {cluster.control_plane.high_availability && (
+              <Chip
+                sx={(theme) => ({
+                  borderColor: theme.color.green,
+                  position: 'absolute',
+                  right: theme.spacing(3),
+                })}
+                label="HA CLUSTER"
+                size="small"
+                variant="outlined"
               />
-            </Grid>
-            <Grid
-              container
-              direction="column"
-              justifyContent="space-between"
-              lg={5}
-              xs={12}
-            >
-              <StyledActionRowGrid>
-                {cluster.control_plane.high_availability && (
-                  <Chip
-                    label="HA CLUSTER"
-                    size="small"
-                    sx={(theme) => ({ borderColor: theme.color.green })}
-                    variant="outlined"
-                  />
-                )}
-              </StyledActionRowGrid>
-            </Grid>
-          </Grid>
+            )}
+          </Stack>
         }
         footer={
           <KubeEntityDetailFooter
@@ -163,45 +140,46 @@ export const KubeSummaryPanel = React.memo((props: Props) => {
           <EntityHeader>
             <Box
               sx={{
-                ...sxSpacing,
                 paddingBottom: theme.spacing(),
+                paddingLeft: theme.spacing(3),
+                paddingRight: theme.spacing(1),
                 paddingTop: theme.spacing(),
               }}
             >
               <Typography variant="h2">Summary</Typography>
             </Box>
-            <Box display="flex" justifyContent="end">
-              <StyledActionButton
-                onClick={() => {
-                  window.open(dashboard?.url, '_blank');
-                }}
-                sx={{
-                  '& svg': {
-                    height: '14px',
-                    marginLeft: '4px',
-                  },
-                  alignItems: 'center',
-                  display: 'flex',
-                }}
-                disabled={Boolean(dashboardError) || !dashboard}
-              >
-                Kubernetes Dashboard
-                <OpenInNewIcon />
-              </StyledActionButton>
-              <StyledActionButton
-                sx={{
-                  [theme.breakpoints.up('md')]: {
-                    paddingRight: '8px',
-                  },
-                }}
-                onClick={() => setIsDeleteDialogOpen(true)}
-              >
-                Delete Cluster
-              </StyledActionButton>
+            <Box>
+              <Hidden smUp>
+                <ActionMenu
+                  actionsList={[
+                    {
+                      disabled: Boolean(dashboardError) || !dashboard,
+                      onClick: () => window.open(dashboard?.url, '_blank'),
+                      title: 'Kubernetes Dashboard',
+                    },
+                    {
+                      onClick: () => setIsDeleteDialogOpen(true),
+                      title: 'Delete Cluster',
+                    },
+                  ]}
+                  ariaLabel={`Action menu for Kubernetes Cluster ${cluster.label}`}
+                />
+              </Hidden>
+              <Hidden smDown>
+                <StyledActionButton
+                  disabled={Boolean(dashboardError) || !dashboard}
+                  endIcon={<OpenInNewIcon sx={{ height: '14px' }} />}
+                  onClick={() => window.open(dashboard?.url, '_blank')}
+                >
+                  Kubernetes Dashboard
+                </StyledActionButton>
+                <StyledActionButton onClick={() => setIsDeleteDialogOpen(true)}>
+                  Delete Cluster
+                </StyledActionButton>
+              </Hidden>
             </Box>
           </EntityHeader>
         }
-        noBodyBottomBorder
       />
 
       <KubeConfigDrawer
@@ -254,6 +232,6 @@ export const KubeSummaryPanel = React.memo((props: Props) => {
         will no longer be able to access this cluster via your previous
         Kubeconfig file. This action cannot be undone.
       </ConfirmationDialog>
-    </Stack>
+    </Box>
   );
 });

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx

@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Unstable_Grid2';
+import { Box } from '@linode/ui';
 import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useLocation, useParams } from 'react-router-dom';
@@ -7,6 +7,7 @@ import { CircleProgress } from 'src/components/CircleProgress';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
+import { Stack } from 'src/components/Stack';
 import { getKubeHighAvailability } from 'src/features/Kubernetes/kubeUtils';
 import { useAPLAvailability } from 'src/features/Kubernetes/kubeUtils';
 import { useAccount } from 'src/queries/account/account';
@@ -78,16 +79,13 @@ export const KubernetesClusterDetail = () => {
   };
 
   return (
-    <>
+    <Box>
       <DocumentTitleSegment segment={`Kubernetes Cluster ${cluster?.label}`} />
-      <Grid>
-        <UpgradeKubernetesVersionBanner
-          clusterID={cluster?.id}
-          clusterLabel={cluster?.label}
-          currentVersion={cluster?.k8s_version}
-        />
-      </Grid>
-
+      <UpgradeKubernetesVersionBanner
+        clusterID={cluster?.id}
+        clusterLabel={cluster?.label}
+        currentVersion={cluster?.k8s_version}
+      />
       <LandingHeader
         breadcrumbProps={{
           breadcrumbDataAttrs: { 'data-qa-breadcrumb': true },
@@ -110,37 +108,33 @@ export const KubernetesClusterDetail = () => {
         docsLink="https://techdocs.akamai.com/cloud-computing/docs/getting-started-with-lke-linode-kubernetes-engine"
         title="Kubernetes Cluster Details"
       />
-      <Grid>
+      <Stack spacing={1}>
         <KubeSummaryPanel cluster={cluster} />
-      </Grid>
-      {showAPL && cluster.apl_enabled && (
-        <>
-          <LandingHeader
-            docsLabel="Docs"
-            docsLink="https://apl-docs.net/"
-            removeCrumbX={[1, 2, 3]}
-            title="Application Platform for LKE"
-          />
-          <Grid>
+        {showAPL && cluster.apl_enabled && (
+          <Box>
+            <LandingHeader
+              docsLabel="Docs"
+              docsLink="https://apl-docs.net/"
+              removeCrumbX={[1, 2, 3]}
+              title="Application Platform for LKE"
+            />
             <APLSummaryPanel cluster={cluster} />
-          </Grid>
-        </>
-      )}
-      <Grid>
+          </Box>
+        )}
         <NodePoolsDisplay
           clusterID={cluster.id}
           clusterLabel={cluster.label}
           clusterRegionId={cluster.region}
           regionsData={regionsData || []}
         />
-      </Grid>
+      </Stack>
       <UpgradeKubernetesClusterToHADialog
         clusterID={cluster.id}
         onClose={() => setIsUpgradeToHAOpen(false)}
         open={isUpgradeToHAOpen}
         regionID={cluster.region}
       />
-    </>
+    </Box>
   );
 };