change: [M3-8346] – UI modications for LKE Details summary panel & No…

…de Pool tables (linode#10685)
bnussman-akamai · Jul 17, 2024 · 669f54d · 669f54d
1 parent 45bc895
commit 669f54d
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 147 deletions.
diff --git a/packages/manager/.changeset/pr-10685-changed-1721235038298.md b/packages/manager/.changeset/pr-10685-changed-1721235038298.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+UI improvements to LKE Detail summary panel and Node Pool tables ([#10685](https://github.com/linode/manager/pull/10685))
diff --git a/packages/manager/src/components/EntityDetail/EntityDetail.tsx b/packages/manager/src/components/EntityDetail/EntityDetail.tsx
@@ -1,13 +1,14 @@
-import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
 import { omittedProps } from '../../utilities/omittedProps';
 
 export interface EntityDetailProps {
   body?: JSX.Element;
-  footer: JSX.Element;
+  footer?: JSX.Element;
   header: JSX.Element;
+  noBodyBottomBorder?: boolean;
 }
 
 /**
@@ -18,22 +19,38 @@ export interface EntityDetailProps {
  * Provide a Header, Body, and Footer and this component provides the proper positioning for each.
  */
 export const EntityDetail = (props: EntityDetailProps) => {
-  const { body, footer, header } = props;
+  const { body, footer, header, noBodyBottomBorder } = props;
 
   return (
     <>
       {header}
-      {body !== undefined && <GridBody xs={12}>{body}</GridBody>}
-      <GridFooter body={body} xs={12}>
-        {footer}
-      </GridFooter>
+      {body !== undefined && (
+        <GridBody
+          footer={footer}
+          noBodyBottomBorder={noBodyBottomBorder}
+          xs={12}
+        >
+          {body}
+        </GridBody>
+      )}
+      {footer !== undefined && (
+        <GridFooter body={body} xs={12}>
+          {footer}
+        </GridFooter>
+      )}
     </>
   );
 };
 
-const GridBody = styled(Grid)(({ theme }) => ({
+const GridBody = styled(Grid, {
+  label: 'EntityDetailGridBody',
+  shouldForwardProp: omittedProps(['footer', 'noBodyBottomBorder']),
+})<Partial<EntityDetailProps>>(({ theme, ...props }) => ({
   backgroundColor: theme.bg.bgPaper,
-  borderBottom: `1px solid ${theme.borderColors.borderTable}`,
+  borderBottom:
+    props.footer === undefined && props.noBodyBottomBorder
+      ? undefined
+      : `1px solid ${theme.borderColors.borderTable}`, // @TODO LKE-E: This conditional can be removed when/if the footer is introduced in M3-8348
   borderTop: `1px solid ${theme.borderColors.borderTable}`,
   paddingBottom: theme.spacing(),
   paddingRight: theme.spacing(),

diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx
@@ -1,15 +1,20 @@
 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';
 import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Button } from 'src/components/Button/Button';
+import { Box } from 'src/components/Box';
+import { StyledActionButton } from 'src/components/Button/StyledActionButton';
 import { Chip } from 'src/components/Chip';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
-import { Paper } from 'src/components/Paper';
+import { EntityDetail } from 'src/components/EntityDetail/EntityDetail';
+import { EntityHeader } from 'src/components/EntityHeader/EntityHeader';
+import { Stack } from 'src/components/Stack';
 import { TagCell } from 'src/components/TagCell/TagCell';
+import { Typography } from 'src/components/Typography';
 import { KubeClusterSpecs } from 'src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs';
 import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import {
@@ -43,22 +48,14 @@ const useStyles = makeStyles()((theme: Theme) => ({
       height: 14,
       marginLeft: 4,
     },
+    alignItems: 'center',
+    display: 'flex',
   },
   deleteClusterBtn: {
-    paddingRight: '0px',
     [theme.breakpoints.up('md')]: {
       paddingRight: '8px',
     },
   },
-  mainGridContainer: {
-    position: 'relative',
-  },
-  root: {
-    marginBottom: theme.spacing(3),
-    padding: `${theme.spacing(2.5)} ${theme.spacing(1)} ${theme.spacing(
-      2.5
-    )} ${theme.spacing(3)}`,
-  },
   tags: {
     // Tags Panel wrapper
     '& > div:last-child': {
@@ -103,8 +100,12 @@ interface Props {
 
 export const KubeSummaryPanel = React.memo((props: Props) => {
   const { cluster } = props;
+
   const { classes } = useStyles();
+  const theme = useTheme();
+
   const { enqueueSnackbar } = useSnackbar();
+
   const [drawerOpen, setDrawerOpen] = React.useState<boolean>(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false);
 
@@ -153,69 +154,98 @@ export const KubeSummaryPanel = React.memo((props: Props) => {
     });
   };
 
+  const sxSpacing = {
+    paddingLeft: theme.spacing(3),
+    paddingRight: theme.spacing(1),
+  };
+
+  const sxMainGridContainer = {
+    paddingBottom: theme.spacing(2.5),
+    paddingTop: theme.spacing(2),
+    position: 'relative',
+  };
+
   return (
-    <>
-      <Paper className={classes.root}>
-        <Grid className={classes.mainGridContainer} container spacing={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}
-            />
-          </Grid>
+    <Stack sx={{ marginBottom: theme.spacing(3) }}>
+      <EntityDetail
+        body={
           <Grid
             container
-            direction="column"
-            justifyContent="space-between"
-            lg={5}
-            xs={12}
+            spacing={2}
+            sx={{ ...sxSpacing, ...sxMainGridContainer }}
           >
-            <Grid className={classes.actionRow}>
-              {cluster.control_plane.high_availability && (
-                <Chip
-                  label="HA CLUSTER"
-                  size="small"
-                  sx={(theme) => ({ borderColor: theme.color.green })}
-                  variant="outlined"
+            <KubeClusterSpecs cluster={cluster} />
+            <Grid container direction="column" lg={4} xs={12}>
+              <KubeConfigDisplay
+                clusterId={cluster.id}
+                clusterLabel={cluster.label}
+                handleOpenDrawer={handleOpenDrawer}
+                isResettingKubeConfig={isResettingKubeConfig}
+                setResetKubeConfigDialogOpen={setResetKubeConfigDialogOpen}
+              />
+            </Grid>
+            <Grid
+              container
+              direction="column"
+              justifyContent="space-between"
+              lg={5}
+              xs={12}
+            >
+              <Grid className={classes.actionRow}>
+                {cluster.control_plane.high_availability && (
+                  <Chip
+                    label="HA CLUSTER"
+                    size="small"
+                    sx={(theme) => ({ borderColor: theme.color.green })}
+                    variant="outlined"
+                  />
+                )}
+              </Grid>
+              <Grid className={classes.tags}>
+                <TagCell
+                  disabled={isClusterReadOnly}
+                  entityLabel={cluster.label}
+                  tags={cluster.tags}
+                  updateTags={handleUpdateTags}
+                  view="inline"
                 />
-              )}
-              <Button
+              </Grid>
+            </Grid>
+          </Grid>
+        }
+        header={
+          <EntityHeader>
+            <Box
+              sx={{
+                ...sxSpacing,
+                paddingBottom: theme.spacing(),
+                paddingTop: theme.spacing(),
+              }}
+            >
+              <Typography variant="h2">Summary</Typography>
+            </Box>
+            <Box display="flex" justifyContent="end">
+              <StyledActionButton
                 onClick={() => {
                   window.open(dashboard?.url, '_blank');
                 }}
-                buttonType="secondary"
                 className={classes.dashboard}
-                compactY
                 disabled={Boolean(dashboardError) || !dashboard}
               >
                 Kubernetes Dashboard
                 <OpenInNewIcon />
-              </Button>
-              <Button
-                buttonType="secondary"
+              </StyledActionButton>
+              <StyledActionButton
                 className={classes.deleteClusterBtn}
-                compactY
                 onClick={() => setIsDeleteDialogOpen(true)}
               >
                 Delete Cluster
-              </Button>
-            </Grid>
-            <Grid className={classes.tags}>
-              <TagCell
-                disabled={isClusterReadOnly}
-                entityLabel={cluster.label}
-                tags={cluster.tags}
-                updateTags={handleUpdateTags}
-                view="inline"
-              />
-            </Grid>
-          </Grid>
-        </Grid>
-      </Paper>
+              </StyledActionButton>
+            </Box>
+          </EntityHeader>
+        }
+        noBodyBottomBorder
+      />
 
       <KubeConfigDrawer
         closeDrawer={() => setDrawerOpen(false)}
@@ -259,6 +289,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>
   );
 });