Delete update (#235)

* refactor:direct user to docs for procedure to delete management cluster. * chore:sort clusters by type. * fix: review changes
konstructio · Aug 16, 2023 · 286faee · 286faee
1 parent fc4d8f4
commit 286faee
Show file tree

Hide file tree

Showing 12 changed files with 298 additions and 149 deletions.
diff --git a/assets/frame.svg b/assets/frame.svg
diff --git a/components/clusterTable/clusterTable.stories.tsx b/components/clusterTable/clusterTable.stories.tsx
@@ -4,6 +4,7 @@ import { Story } from '@storybook/react';
 import { ClusterStatus, ClusterType } from '../../types/provision';
 import { InstallationType } from '../../types/redux';
 import { noop } from '../../utils/noop';
+import { sortClustersByType } from '../../utils/sortClusterByType';
 
 import { ClusterTable, ClusterInfo } from './clusterTable';
 
@@ -14,7 +15,7 @@ export default {
 
 const clusters: ClusterInfo[] = [
   {
-    clusterName: 'kuberfirst-mgmt2',
+    clusterName: 'kuberfirst-mgmt',
     type: ClusterType.MANAGEMENT,
     cloudProvider: InstallationType.AWS,
     cloudRegion: 'ap-southeast-1',
@@ -27,8 +28,8 @@ const clusters: ClusterInfo[] = [
     nodes: 2,
   },
   {
-    clusterName: 'kuberfirst-mgmt2',
-    type: ClusterType.MANAGEMENT,
+    clusterName: 'kuberfirst-worker-1',
+    type: ClusterType.WORKLOAD,
     cloudProvider: InstallationType.CIVO,
     cloudRegion: 'ap-southeast-1',
     nodes: 2,
@@ -40,8 +41,8 @@ const clusters: ClusterInfo[] = [
     domainName: 'yourdomain.com',
   },
   {
-    clusterName: 'kuberfirst-mgmt2',
-    type: ClusterType.MANAGEMENT,
+    clusterName: 'kuberfirst-worker-2',
+    type: ClusterType.WORKLOAD,
     cloudProvider: InstallationType.DIGITAL_OCEAN,
     cloudRegion: 'ap-southeast-1',
     nodes: 2,
@@ -53,7 +54,7 @@ const clusters: ClusterInfo[] = [
     domainName: 'yourdomain.com',
   },
   {
-    clusterName: 'kuberfirst-mgmt2',
+    clusterName: 'kuberfirst-worker-3',
     type: ClusterType.WORKLOAD,
     cloudProvider: InstallationType.DIGITAL_OCEAN,
     cloudRegion: 'ap-southeast-1',
@@ -66,7 +67,7 @@ const clusters: ClusterInfo[] = [
     domainName: 'yourdomain.com',
   },
   {
-    clusterName: 'kuberfirst-mgmt2',
+    clusterName: 'kuberfirst-worker-4',
     type: ClusterType.WORKLOAD,
     cloudProvider: InstallationType.VULTR,
     cloudRegion: 'ap-southeast-1',
@@ -80,8 +81,19 @@ const clusters: ClusterInfo[] = [
   },
 ];
 
-const DefaultTemplate: Story = (args) => (
-  <ClusterTable clusters={clusters} {...args} onMenuOpenClose={noop} onDeleteCluster={noop} />
-);
+const { managementCluster, workloadClusters } = sortClustersByType(clusters);
+
+const DefaultTemplate: Story = (args) =>
+  managementCluster ? (
+    <ClusterTable
+      {...args}
+      onMenuOpenClose={noop}
+      onDeleteCluster={noop}
+      managementCluster={managementCluster}
+      workloadClusters={workloadClusters}
+    />
+  ) : (
+    <></>
+  );
 
 export const Default = DefaultTemplate.bind({});
diff --git a/components/clusterTable/clusterTable.styled.ts b/components/clusterTable/clusterTable.styled.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { styled as muiStyled } from '@mui/material/styles';
 import TableCell, { tableCellClasses } from '@mui/material/TableCell';
 import {
@@ -7,14 +7,21 @@ import {
   tableRowClasses,
   tableBodyClasses,
   IconButton,
-  iconButtonClasses,
   typographyClasses,
   Box,
+  TableContainer,
+  Table,
 } from '@mui/material';
 
 import Typography from '../typography';
 import Tag from '../tag';
-import { CHEFS_HAT, PASTEL_LIGHT_BLUE, SALTBOX_BLUE, VOLCANIC_SAND } from '../../constants/colors';
+import {
+  CHEFS_HAT,
+  PASTEL_LIGHT_BLUE,
+  ROCK_BLUE,
+  SALTBOX_BLUE,
+  VOLCANIC_SAND,
+} from '../../constants/colors';
 
 export const Menu = styled(Box)`
   position: absolute;
@@ -28,12 +35,20 @@ export const Menu = styled(Box)`
   z-index: 1;
 `;
 
-export const StyledIconButton = muiStyled(IconButton)(() => ({
-  [`&.${iconButtonClasses.root}`]: {
-    opacity: 0,
-    pointerEvents: 'none',
-  },
-}));
+export const StyledIconButton = styled(IconButton)<{ expanded?: boolean }>`
+  svg {
+    color: ${ROCK_BLUE};
+    transition: transform 0.3s ease;
+  }
+
+  ${({ expanded }) =>
+    expanded &&
+    css`
+      svg {
+        transform: rotate(180deg);
+      }
+    `}
+`;
 
 export const StyledTableBody = muiStyled(TableBody)(() => ({
   [`&.${tableBodyClasses.root}`]: {
@@ -90,3 +105,15 @@ export const StyledCellText = muiStyled(Typography)(() => ({
     fontWeight: 400,
   },
 }));
+
+export const StyledTable = styled(Table)`
+  border-collapse: collapse;
+  margin: 5px;
+  height: fit-content;
+  margin: 0 28px;
+`;
+
+export const StyledTableContainer = styled(TableContainer)`
+  display: flex;
+  height: 100%;
+`;