Cluster management flow (#227)

* refactor: pass ref on to FinalForm for programmatic submission of form

* wip: stub out menu flow

* refactor: update cluster details component to match design.

* fix:add type to ClusterResponse

* update: type createCluster response

* update: pick adminEmail, domainName, gitProvider off cluster. add instanceSize to type

* update: rename finalForm to clusterCreation

* chore: add CreateClusterFlow to cluster management

* fix: should not have typed first arg

components/clusterDetails/clusterDetails.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+
+import ClusterDetails from '.';
+
+import { ClusterInfo } from '../clusterTable/clusterTable';
+import { ClusterStatus, ClusterType } from '../../types/provision';
+import { InstallationType } from '../../types/redux';
+
+export default {
+  title: 'Components/ClusterDetails',
+  component: ClusterDetails,
+};
+
+const cluster: ClusterInfo = {
+  clusterName: 'kuberfirst-mgmt2',
+  type: ClusterType.MANAGEMENT,
+  cloudProvider: InstallationType.AWS,
+  cloudRegion: 'ap-southeast-1',
+  creationDate: '05 Apr 2023, 12:24:56',
+  adminEmail: '[email protected]',
+  gitProvider: 'Github',
+  domainName: 'yourdomain.com',
+  gitUser: 'Eleanor Carroll',
+  status: ClusterStatus.PROVISIONED,
+  nodes: 2,
+  instanceSize: '8 CPU Cores / 64 GB RAM / 120 GB NvME storage / 8 TB Data Transfer',
+};
+
+const DefaultTemplate: Story = (args) => <ClusterDetails cluster={cluster} {...args} />;
+
+export const Default = DefaultTemplate.bind({});

components/clusterDetails/clusterDetails.styled.ts

@@ -1,33 +1,36 @@
 import styled from 'styled-components';
+import { styled as muiStyled, typographyClasses } from '@mui/material';
 
 import ColumnComponent from '../column';
 import RowComponent from '../row';
-
-export const Container = styled.div``;
-
-export const Header = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 24px;
-
-  & svg {
-    cursor: pointer;
-  }
-`;
+import Typography from '../typography';
+import { EXCLUSIVE_PLUM, VOLCANIC_SAND } from '../../constants/colors';
 
 export const Content = styled.div`
   display: flex;
   flex-direction: column;
   gap: 32px;
-  padding: 24px;
 `;
 
 export const Column = styled(ColumnComponent)`
   gap: 8px;
   justify-content: space-between;
-  width: 100%;
 `;
 
 export const Row = styled(RowComponent)`
-  width: 100%;
+  gap: 156px;
 `;
+
+export const StyledLabel = muiStyled(Typography)(() => ({
+  [`&.${typographyClasses.root}`]: {
+    color: EXCLUSIVE_PLUM,
+    width: '196px',
+  },
+}));
+
+export const StyledValue = muiStyled(Typography)(() => ({
+  [`&.${typographyClasses.root}`]: {
+    color: VOLCANIC_SAND,
+    width: '196px',
+  },
+}));

components/clusterDetails/index.tsx

@@ -1,125 +1,88 @@
-import React, { FunctionComponent } from 'react';
-import { Box, Divider } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
+import React, { ComponentPropsWithoutRef, FunctionComponent } from 'react';
 import moment from 'moment';
 
-import Typography from '../../components/typography';
-import NextLink from '../../components/nextLink';
-import { BISCAY, EXCLUSIVE_PLUM, SALTBOX_BLUE, VOLCANIC_SAND } from '../../constants/colors';
-import { Cluster } from '../../types/provision';
+import { ClusterInfo } from '../clusterTable/clusterTable';
 
-import { Content, Column, Header, Row } from './clusterDetails.styled';
+import { Content, Column, Row, StyledLabel, StyledValue } from './clusterDetails.styled';
 
-export interface ClusterDetailsProps {
-  cluster: Cluster;
-  onClose: () => void;
+export interface ClusterDetailsProps extends ComponentPropsWithoutRef<'div'> {
+  cluster: ClusterInfo;
 }
 
-const ClusterDetails: FunctionComponent<ClusterDetailsProps> = ({ cluster, onClose }) => {
+const ClusterDetails: FunctionComponent<ClusterDetailsProps> = ({ cluster, ...rest }) => {
   const {
     adminEmail,
     cloudProvider,
     cloudRegion,
-    clusterName,
     creationDate,
     domainName,
     gitProvider,
     gitUser,
+    nodes,
+    instanceSize,
   } = cluster;
   return (
-    <Box sx={{ width: '456px' }}>
-      <Header>
-        <Typography variant="subtitle2" color={BISCAY}>
-          Cluster Details
-        </Typography>
-        <CloseIcon htmlColor={SALTBOX_BLUE} onClick={onClose} />
-      </Header>
-      <Divider />
-      <Content>
-        <Row>
-          <Column>
-            <Typography variant="labelLarge" color={EXCLUSIVE_PLUM}>
-              Cluster name
-            </Typography>
-            <Typography variant="body2" color={VOLCANIC_SAND}>
-              {clusterName}
-            </Typography>
-          </Column>
-        </Row>
-        <Row>
-          <Column>
-            <Typography variant="labelLarge" color={EXCLUSIVE_PLUM}>
-              GIT provider
-            </Typography>
-            <Typography variant="body2" color={VOLCANIC_SAND}>
-              {gitProvider}
-            </Typography>
-          </Column>
-          <Column>
-            <Typography variant="labelLarge" color={EXCLUSIVE_PLUM}>
-              Cloud provider
-            </Typography>
-            <Typography variant="body2" color={VOLCANIC_SAND}>
-              {cloudProvider}
-            </Typography>
-          </Column>
-        </Row>
-        <Row>
-          <Column>
-            <Typography variant="labelLarge" color={EXCLUSIVE_PLUM}>
-              Created
-            </Typography>
-            <Typography variant="body2" color={VOLCANIC_SAND}>
-              {moment(new Date(creationDate as string)).format('DD MMM YYYY, HH:mm:ss')}
-            </Typography>
-          </Column>
-          <Column>
-            <Typography variant="labelLarge" color={EXCLUSIVE_PLUM}>
-              Created by
-            </Typography>
-            <Typography variant="body2" color={VOLCANIC_SAND}>
-              {gitUser}
-            </Typography>
-          </Column>
-        </Row>
-        <Row>
-          <Column>
-            <Typography variant="labelLarge" color={EXCLUSIVE_PLUM}>
-              Cluster domain name
-            </Typography>
-            <Typography variant="body2" color={VOLCANIC_SAND}>
-              {domainName}
-            </Typography>
-          </Column>
-          <Column>
-            <Typography variant="labelLarge" color={EXCLUSIVE_PLUM}>
-              Cloud region
-            </Typography>
-            <Typography variant="body2" color={VOLCANIC_SAND}>
-              {cloudRegion}
-            </Typography>
-          </Column>
-        </Row>
-        <Row>
-          <Column>
-            <Typography variant="labelLarge" color={EXCLUSIVE_PLUM}>
-              Alerts email
-            </Typography>
-            <Typography variant="body2" color={VOLCANIC_SAND}>
-              {adminEmail}
-            </Typography>
-          </Column>
-          <Column>
-            <Typography variant="labelLarge" color={EXCLUSIVE_PLUM}>
-              Console url
-            </Typography>
-            <NextLink href={`https://kubefirst.${domainName}/services`} target="_blank">
-              <Typography variant="labelLarge">{`kubefirst.${domainName}`}</Typography>
-            </NextLink>
-          </Column>
-        </Row>
-      </Content>
-    </Box>
+    <Content {...rest}>
+      {/* Top Row */}
+      <Row>
+        <Column>
+          <StyledLabel variant="labelLarge">Cluster domain name</StyledLabel>
+          <StyledValue variant="body2">{domainName}</StyledValue>
+        </Column>
+        <Column>
+          <StyledLabel variant="labelLarge">Alerts email</StyledLabel>
+          <StyledValue variant="body2">{adminEmail}</StyledValue>
+        </Column>
+      </Row>
+
+      {/* Second Row */}
+      <Row>
+        <Column>
+          <StyledLabel variant="labelLarge">Created</StyledLabel>
+          <StyledValue variant="body2">
+            {moment(new Date(creationDate as string)).format('DD MMM YYYY, HH:mm:ss')}
+          </StyledValue>
+        </Column>
+        <Column>
+          <StyledLabel variant="labelLarge">Created by</StyledLabel>
+          <StyledValue variant="body2">{gitUser}</StyledValue>
+        </Column>
+      </Row>
+
+      {/* Third Row */}
+      <Row>
+        <Column>
+          <StyledLabel variant="labelLarge">GIT provider</StyledLabel>
+          <StyledValue variant="body2">{gitProvider}</StyledValue>
+        </Column>
+        <Column>
+          <StyledLabel variant="labelLarge">Cloud provider</StyledLabel>
+          <StyledValue variant="body2">{cloudProvider}</StyledValue>
+        </Column>
+      </Row>
+
+      {/* Fourth Row */}
+      <Row>
+        <Column>
+          <StyledLabel variant="labelLarge">Cloud region</StyledLabel>
+          <StyledValue variant="body2">{cloudRegion}</StyledValue>
+        </Column>
+        <Column>
+          <StyledLabel variant="labelLarge">Number of nodes</StyledLabel>
+          <StyledValue variant="body2">{nodes}</StyledValue>
+        </Column>
+      </Row>
+
+      {/* Fifth Row */}
+      <Row>
+        <Column>
+          <StyledLabel variant="labelLarge">Instance size</StyledLabel>
+          <StyledValue variant="body2" style={{ width: '100%' }}>
+            {instanceSize}
+          </StyledValue>
+        </Column>
+      </Row>
+    </Content>
   );
 };
 

components/clusterTable/clusterTable.stories.tsx

@@ -20,6 +20,9 @@ const clusters: ClusterInfo[] = [
     creationDate: '05 Apr 2023, 12:24:56',
     gitUser: 'Eleanor Carroll',
     status: ClusterStatus.PROVISIONED,
+    adminEmail: '[email protected]',
+    gitProvider: 'Github',
+    domainName: 'yourdomain.com',
     nodes: 2,
   },
   {
@@ -31,6 +34,9 @@ const clusters: ClusterInfo[] = [
     creationDate: '05 Apr 2023, 12:24:56',
     gitUser: 'Eleanor Carroll',
     status: ClusterStatus.ERROR,
+    adminEmail: '[email protected]',
+    gitProvider: 'Github',
+    domainName: 'yourdomain.com',
   },
   {
     clusterName: 'kuberfirst-mgmt2',
@@ -41,6 +47,9 @@ const clusters: ClusterInfo[] = [
     creationDate: '05 Apr 2023, 12:24:56',
     gitUser: 'Eleanor Carroll',
     status: ClusterStatus.DELETING,
+    adminEmail: '[email protected]',
+    gitProvider: 'Github',
+    domainName: 'yourdomain.com',
   },
   {
     clusterName: 'kuberfirst-mgmt2',
@@ -51,6 +60,9 @@ const clusters: ClusterInfo[] = [
     creationDate: '05 Apr 2023, 12:24:56',
     gitUser: 'Eleanor Carroll',
     status: ClusterStatus.PROVISIONED,
+    adminEmail: '[email protected]',
+    gitProvider: 'Github',
+    domainName: 'yourdomain.com',
   },
   {
     clusterName: 'kuberfirst-mgmt2',
@@ -61,6 +73,9 @@ const clusters: ClusterInfo[] = [
     creationDate: '05 Apr 2023, 12:24:56',
     gitUser: 'Eleanor Carroll',
     status: ClusterStatus.PROVISIONED,
+    adminEmail: '[email protected]',
+    gitProvider: 'Github',
+    domainName: 'yourdomain.com',
   },
 ];
 

components/clusterTable/clusterTable.tsx

@@ -39,9 +39,19 @@ const CLOUD_LOGO_OPTIONS: Record<InstallationType, any> = {
 
 export type ClusterInfo = Pick<
   Cluster,
-  'clusterName' | 'type' | 'cloudProvider' | 'cloudRegion' | 'creationDate' | 'gitUser' | 'status'
+  | 'clusterName'
+  | 'type'
+  | 'domainName'
+  | 'gitProvider'
+  | 'cloudProvider'
+  | 'cloudRegion'
+  | 'creationDate'
+  | 'gitUser'
+  | 'status'
+  | 'adminEmail'
 > & {
   nodes?: number;
+  instanceSize?: string;
 };
 
 const ClusterRow: FunctionComponent<ClusterInfo> = ({

containers/clusterForms/clusterCreation/clusterCreation.stories.tsx

@@ -0,0 +1,34 @@
+import React, { useRef } from 'react';
+import { Story } from '@storybook/react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import ClusterCreationForm, { ClusterConfig } from '.';
+
+export default {
+  title: 'Forms/ClusterCreationForm',
+  component: ClusterCreationForm,
+};
+
+const DefaultTemplate: Story = () => {
+  const methods = useForm<ClusterConfig>();
+
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const handleClick = () => {
+    if (formRef.current) {
+      formRef.current.requestSubmit();
+    }
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <ClusterCreationForm
+        ref={formRef}
+        onFormSubmit={(config) => console.log('the form values =>', config)}
+      />
+      <button onClick={handleClick}>Submit me</button>
+    </FormProvider>
+  );
+};
+
+export const Default = DefaultTemplate.bind({});

containers/clusterForms/clusterCreation/clusterCreation.styled.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+`;