From ff71fbec16bffcb5ffa24f4782fc9765f9154ba4 Mon Sep 17 00:00:00 2001
From: Derrick Hawkins <derrick.b.hawkins@gmail.com>
Date: Tue, 24 Oct 2023 10:22:06 -0700
Subject: [PATCH 1/6] simplify/improve table menu click away action

---
 .../clusterTable/clusterTable.stories.tsx     | 27 -------
 components/clusterTable/clusterTable.tsx      | 78 +++++++++----------
 .../deleteCluster/deleteCluster.stories.tsx   |  2 +-
 components/deleteCluster/index.tsx            | 19 ++---
 .../clusterManagement.styled.ts               | 17 ++++
 containers/clusterManagement/index.tsx        | 62 ++++-----------
 6 files changed, 73 insertions(+), 132 deletions(-)

diff --git a/components/clusterTable/clusterTable.stories.tsx b/components/clusterTable/clusterTable.stories.tsx
index f53c1fd0..9486166d 100644
--- a/components/clusterTable/clusterTable.stories.tsx
+++ b/components/clusterTable/clusterTable.stories.tsx
@@ -1,11 +1,8 @@
-import React, { FunctionComponent } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { noop } from '../../utils/noop';
 import { mapClusterFromRaw } from '../../utils/mapClustersFromRaw';
 import { mockClusterResponse } from '../../tests/mocks/mockClusterResponse';
-import { useAppDispatch, useAppSelector } from '../../redux/store';
-import { setPresentedClusterId } from '../../redux/slices/api.slice';
 
 import { ClusterTable } from './clusterTable';
 
@@ -17,33 +14,9 @@ const meta: Meta<typeof ClusterTable> = {
 
 export default meta;
 
-const ClusterTableWithHooks: FunctionComponent = () => {
-  const { presentedClusterId, managementCluster, clusterMap } = useAppSelector(({ api }) => api);
-
-  const dispatch = useAppDispatch();
-
-  return managementCluster ? (
-    <ClusterTable
-      clusters={clusterMap}
-      managementCluster={managementCluster}
-      presentedClusterId={presentedClusterId}
-      onMenuButtonClick={(presentedClusterId) =>
-        dispatch(setPresentedClusterId(presentedClusterId))
-      }
-      onDeleteCluster={noop}
-    />
-  ) : (
-    <div>No management cluster</div>
-  );
-};
-
 export const Default: StoryObj<typeof ClusterTable> = {
   args: {
     onDeleteCluster: noop,
     managementCluster,
   },
 };
-
-export const WithSelectableRows: StoryObj<typeof ClusterTable> = {
-  render: () => <ClusterTableWithHooks />,
-};
diff --git a/components/clusterTable/clusterTable.tsx b/components/clusterTable/clusterTable.tsx
index fff62144..f7285c6c 100644
--- a/components/clusterTable/clusterTable.tsx
+++ b/components/clusterTable/clusterTable.tsx
@@ -1,4 +1,5 @@
 import React, { useState, FunctionComponent, useMemo, ComponentPropsWithRef } from 'react';
+import { ClickAwayListener } from '@mui/material';
 import TableHead from '@mui/material/TableHead';
 import IconButton from '@mui/material/IconButton';
 import List from '@mui/material/List';
@@ -46,6 +47,8 @@ import {
   StyledTable,
 } from './clusterTable.styled';
 
+import useToggle from '@/hooks/useToggle';
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const CLOUD_LOGO_OPTIONS: Record<InstallationType, any> = {
   [InstallationType.LOCAL]: k3dLogo,
@@ -67,9 +70,7 @@ type ClusterRowProps = {
   expanded?: boolean;
   showExpandButton?: boolean;
   onExpanseClick?: () => void;
-  onDeleteCluster: () => void;
-  presentedClusterId?: string;
-  onMenuButtonClick?: (clusterId: Cluster['clusterId']) => void;
+  onDeleteCluster: (clusterId: string) => void;
 };
 
 const ClusterRow: FunctionComponent<ClusterRowProps> = ({
@@ -78,9 +79,9 @@ const ClusterRow: FunctionComponent<ClusterRowProps> = ({
   showExpandButton,
   onExpanseClick = noop,
   onDeleteCluster,
-  onMenuButtonClick = noop,
-  presentedClusterId,
 }) => {
+  const { isOpen, close, toggle } = useToggle();
+
   const {
     clusterId,
     clusterName,
@@ -98,12 +99,10 @@ const ClusterRow: FunctionComponent<ClusterRowProps> = ({
   const { iconLabel, iconType, bgColor } = CLUSTER_TAG_CONFIG[status ?? ClusterStatus.PROVISIONED];
   const { nameLabel, typeLabel } = FORMATTED_CLUSTER_TYPE[type ?? ClusterType.MANAGEMENT];
 
-  const selected = clusterId === presentedClusterId;
-
   return (
     <>
-      <StyledTableRow selected={selected}>
-        <StyledTableCell align="right" style={{ width: '50px' }} selected={selected}>
+      <StyledTableRow selected={isOpen}>
+        <StyledTableCell align="right" style={{ width: '50px' }} selected={isOpen}>
           {type === ClusterType.MANAGEMENT && showExpandButton && (
             <StyledIconButton
               aria-label="expand row"
@@ -115,7 +114,7 @@ const ClusterRow: FunctionComponent<ClusterRowProps> = ({
             </StyledIconButton>
           )}
         </StyledTableCell>
-        <StyledTableCell scope="row" selected={selected}>
+        <StyledTableCell scope="row" selected={isOpen}>
           <StyledCellText variant="body2" style={{ fontWeight: 500 }}>
             {clusterName}
           </StyledCellText>
@@ -123,56 +122,58 @@ const ClusterRow: FunctionComponent<ClusterRowProps> = ({
             {nameLabel}
           </StyledCellText>
         </StyledTableCell>
-        <StyledTableCell selected={selected}>
+        <StyledTableCell selected={isOpen}>
           <StyledCellText variant="body2">{typeLabel}</StyledCellText>
         </StyledTableCell>
-        <StyledTableCell selected={selected}>
+        <StyledTableCell selected={isOpen}>
           <StyledCellText variant="body2">
             {environment && <Tag text={environment.name ?? ''} bgColor={environment.color} />}
           </StyledCellText>
         </StyledTableCell>
-        <StyledTableCell align="left" selected={selected}>
+        <StyledTableCell align="left" selected={isOpen}>
           <Image src={cloudLogoSrc} height={18} width={30} alt={cloudProvider ?? ''} />
         </StyledTableCell>
-        <StyledTableCell selected={selected}>
+        <StyledTableCell selected={isOpen}>
           <StyledCellText variant="body2">{cloudRegion}</StyledCellText>
         </StyledTableCell>
-        <StyledTableCell align="center" selected={selected}>
+        <StyledTableCell align="center" selected={isOpen}>
           <StyledCellText variant="body2">{nodeCount}</StyledCellText>
         </StyledTableCell>
-        <StyledTableCell selected={selected}>
+        <StyledTableCell selected={isOpen}>
           {creationDate && (
             <StyledCellText variant="body2">
               {moment(+creationDate).format('DD MMM YYYY')}
             </StyledCellText>
           )}
         </StyledTableCell>
-        <StyledTableCell selected={selected}>
+        <StyledTableCell selected={isOpen}>
           <StyledCellText variant="body2">{gitUser}</StyledCellText>
         </StyledTableCell>
-        <StyledTableCell selected={selected}>
+        <StyledTableCell selected={isOpen}>
           <StyledTag text={iconLabel} bgColor={bgColor} icon={iconType} />
         </StyledTableCell>
-        <StyledTableCell style={{ position: 'relative' }} selected={selected}>
+        <StyledTableCell style={{ position: 'relative' }} selected={isOpen}>
           <IconButton
             aria-label="more info"
-            onClick={() => onMenuButtonClick(clusterId)}
+            onClick={toggle}
             disabled={status === ClusterStatus.DELETED}
           >
             <MoreHorizIcon />
           </IconButton>
-          {selected && (
-            <Menu>
-              <List>
-                <ListItem disablePadding>
-                  <ListItemButton onClick={onDeleteCluster}>
-                    <Typography variant="body2" style={{ color: `${FIRE_BRICK}` }}>
-                      Delete cluster
-                    </Typography>
-                  </ListItemButton>
-                </ListItem>
-              </List>
-            </Menu>
+          {isOpen && (
+            <ClickAwayListener onClickAway={close}>
+              <Menu>
+                <List>
+                  <ListItem disablePadding>
+                    <ListItemButton onClick={() => onDeleteCluster(clusterId)}>
+                      <Typography variant="body2" style={{ color: `${FIRE_BRICK}` }}>
+                        Delete cluster
+                      </Typography>
+                    </ListItemButton>
+                  </ListItem>
+                </List>
+              </Menu>
+            </ClickAwayListener>
           )}
         </StyledTableCell>
       </StyledTableRow>
@@ -256,9 +257,7 @@ const ClusterTableHead: FunctionComponent<ClusterTableHeadProps> = ({ orderBy, o
 interface ClusterTableProps extends Omit<ComponentPropsWithRef<'tbody'>, 'key'> {
   managementCluster: ManagementCluster;
   clusters: ClusterCache;
-  onDeleteCluster: () => void;
-  onMenuButtonClick?: (clusterId: Cluster['clusterId']) => void;
-  presentedClusterId?: string;
+  onDeleteCluster: (clusterId: string) => void;
   customRef?: React.Ref<HTMLTableSectionElement>;
 }
 
@@ -266,9 +265,6 @@ export const ClusterTable: FunctionComponent<ClusterTableProps> = ({
   managementCluster,
   clusters,
   onDeleteCluster,
-  onMenuButtonClick,
-  presentedClusterId,
-  customRef,
   ...rest
 }) => {
   const [expanded, setExpanded] = useState(true);
@@ -298,15 +294,13 @@ export const ClusterTable: FunctionComponent<ClusterTableProps> = ({
     <StyledTableContainer {...rest}>
       <StyledTable aria-label="collapsible table">
         <ClusterTableHead onSort={handleRequestSort} order={order} orderBy={orderBy} />
-        <StyledTableBody ref={customRef}>
+        <StyledTableBody>
           <ClusterRow
             cluster={managementCluster}
             onDeleteCluster={onDeleteCluster}
-            onMenuButtonClick={onMenuButtonClick}
             expanded={expanded}
             showExpandButton={!!filteredWorkloadClusters.length}
             onExpanseClick={() => setExpanded(!expanded)}
-            presentedClusterId={presentedClusterId}
           />
 
           {expanded &&
@@ -315,8 +309,6 @@ export const ClusterTable: FunctionComponent<ClusterTableProps> = ({
                 key={cluster.clusterName}
                 cluster={cluster}
                 onDeleteCluster={onDeleteCluster}
-                onMenuButtonClick={onMenuButtonClick}
-                presentedClusterId={presentedClusterId}
               />
             ))}
         </StyledTableBody>
diff --git a/components/deleteCluster/deleteCluster.stories.tsx b/components/deleteCluster/deleteCluster.stories.tsx
index 35b76b16..4ab383e0 100644
--- a/components/deleteCluster/deleteCluster.stories.tsx
+++ b/components/deleteCluster/deleteCluster.stories.tsx
@@ -60,7 +60,7 @@ const DeleteClusterWithHooks: FunctionComponent<DeleteClusterProps> = (props) =>
   const [open, setOpen] = useState(true);
   return (
     <>
-      <DeleteCluster {...props} isOpen={open} onClose={() => setOpen(false)} onDelete={noop} />
+      <DeleteCluster {...props} isOpen={open} onCloseModal={() => setOpen(false)} onDelete={noop} />
       <Button variant="contained" color="primary" onClick={() => setOpen(!open)}>
         {open ? 'Close' : 'Open'}
       </Button>
diff --git a/components/deleteCluster/index.tsx b/components/deleteCluster/index.tsx
index df119708..df30833e 100644
--- a/components/deleteCluster/index.tsx
+++ b/components/deleteCluster/index.tsx
@@ -5,7 +5,7 @@ import LaunchOutlinedIcon from '@mui/icons-material/LaunchOutlined';
 
 import Typography from '../typography';
 import TextFieldWithRef from '../textField';
-import Modal from '../modal';
+import Modal, { IModalProps } from '../modal';
 import { LAUGHING_ORANGE } from '../../constants/colors';
 import Button from '../button';
 import { Cluster, ClusterType, DraftCluster } from '../../types/provision';
@@ -13,25 +13,18 @@ import CopyText from '../copyText';
 
 import { Content, CopyTextContainer, Footer, Header, NextLink } from './deleteCluster.styled';
 
-export interface DeleteClusterProps {
+export interface DeleteClusterProps extends Omit<IModalProps, 'children'> {
   cluster: Cluster | DraftCluster;
-  isOpen: boolean;
-  onClose: () => void;
   onDelete: () => void;
 }
 
-const DeleteCluster: FunctionComponent<DeleteClusterProps> = ({
-  cluster,
-  isOpen,
-  onClose,
-  onDelete,
-}) => {
+const DeleteCluster: FunctionComponent<DeleteClusterProps> = ({ cluster, onDelete, ...rest }) => {
   const [matchingClusterName, setMatchingClusterName] = useState('');
 
   const isManagementCluster = cluster.type === ClusterType.MANAGEMENT;
 
   return (
-    <Modal isOpen={isOpen}>
+    <Modal {...rest}>
       <Box sx={{ width: '500px', backgroundColor: 'white' }}>
         <Header>
           <ErrorOutlineIcon htmlColor={LAUGHING_ORANGE} />
@@ -70,12 +63,12 @@ const DeleteCluster: FunctionComponent<DeleteClusterProps> = ({
           )}
         </Content>
         <Footer>
-          <Button variant="text" onClick={onClose} color="info">
+          <Button variant="text" onClick={rest.onCloseModal} color="info">
             Cancel
           </Button>
           <Button
             variant="contained"
-            onClick={isManagementCluster ? onClose : onDelete}
+            onClick={isManagementCluster ? rest.onCloseModal : onDelete}
             color={isManagementCluster ? 'primary' : 'error'}
             disabled={cluster.clusterName !== matchingClusterName && !isManagementCluster}
           >
diff --git a/containers/clusterManagement/clusterManagement.styled.ts b/containers/clusterManagement/clusterManagement.styled.ts
index da6d759b..d34a3b97 100644
--- a/containers/clusterManagement/clusterManagement.styled.ts
+++ b/containers/clusterManagement/clusterManagement.styled.ts
@@ -1,11 +1,14 @@
 'use client';
 import Link from 'next/link';
 import styled from 'styled-components';
+import { styled as muiStyled } from '@mui/material';
 
 import Typography from '../../components/typography';
 import Column from '../../components/column';
 import Row from '../../components/row';
 
+import Drawer from '@/components/drawer';
+
 export const Container = styled(Column)`
   flex: 1;
   margin: 0 auto;
@@ -35,3 +38,17 @@ export const LearnMoreLink = styled(Link)`
   color: ${({ theme }) => theme.colors.primary};
   text-decoration: none;
 `;
+
+export const StyledDrawer = muiStyled(Drawer)(() => ({
+  '&.MuiDrawer-root': {
+    '.MuiBackdrop-root': {
+      backgroundColor: 'transparent',
+    },
+  },
+  '.MuiDrawer-paper': {
+    top: '65px',
+    boxShadow: '0px 2px 4px rgba(100, 116, 139, 0.16)',
+    width: '684px',
+    height: 'calc(100% - 65px)',
+  },
+}));
diff --git a/containers/clusterManagement/index.tsx b/containers/clusterManagement/index.tsx
index 3418e171..85b89edb 100644
--- a/containers/clusterManagement/index.tsx
+++ b/containers/clusterManagement/index.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
 import Tabs from '@mui/material/Tabs';
 
@@ -16,7 +16,6 @@ import { Cluster, ClusterCreationStep, ClusterStatus, ClusterType } from '../../
 import useToggle from '../../hooks/useToggle';
 import Drawer from '../../components/drawer';
 import useModal from '../../hooks/useModal';
-import { useOnClickOutside } from '../../hooks/useOnClickOutside';
 import DeleteCluster from '../../components/deleteCluster';
 import TabPanel, { Tab, a11yProps } from '../../components/tab';
 import { BISCAY, SALTBOX_BLUE } from '../../constants/colors';
@@ -33,7 +32,7 @@ import { setNotifiedOfBetaPhysicalClusters } from '../../redux/slices/notificati
 import { getAllEnvironments } from '../../redux/thunks/environments.thunk';
 
 import { CreateClusterFlow } from './createClusterFlow';
-import { Container, Content, Header } from './clusterManagement.styled';
+import { Container, Content, Header, StyledDrawer } from './clusterManagement.styled';
 
 import { InstallationType } from '@/types/redux';
 import useFeatureFlag from '@/hooks/useFeatureFlag';
@@ -171,13 +170,6 @@ const ClusterManagement: FunctionComponent = () => {
     [dispatch, openCreateClusterFlow],
   );
 
-  const handleMenuButtonClick = useCallback(
-    (clusterId: Cluster['clusterId']) => {
-      dispatch(setPresentedClusterId(presentedClusterId === clusterId ? undefined : clusterId));
-    },
-    [dispatch, presentedClusterId],
-  );
-
   const handleAddWorkloadCluster = useCallback(() => {
     if (clusterCreationStep === ClusterCreationStep.CONFIG && managementCluster) {
       dispatch(createDraftCluster());
@@ -206,6 +198,14 @@ const ClusterManagement: FunctionComponent = () => {
     dispatch(setNotifiedOfBetaPhysicalClusters(true));
   }, [dispatch]);
 
+  const handleDeleteMenuClick = useCallback(
+    (id: string) => {
+      dispatch(setPresentedClusterId(id));
+      openDeleteModal();
+    },
+    [dispatch, openDeleteModal],
+  );
+
   useEffect(() => {
     dispatch(getAllEnvironments());
   }, [dispatch]);
@@ -225,18 +225,6 @@ const ClusterManagement: FunctionComponent = () => {
     }
   }, [clusterQueue, dispatch]);
 
-  const tableRef = useRef<HTMLTableSectionElement>(null);
-
-  const isListView = useMemo(() => activeTab === MANAGEMENT_TABS.LIST_VIEW, [activeTab]);
-
-  const handleClickOutside = useCallback(() => {
-    if (presentedClusterId && isListView && !createClusterFlowOpen && !isDeleteModalOpen) {
-      dispatch(setPresentedClusterId(undefined));
-    }
-  }, [dispatch, presentedClusterId, isListView, isDeleteModalOpen, createClusterFlowOpen]);
-
-  useOnClickOutside(tableRef, handleClickOutside);
-
   return (
     <Container>
       <Header>
@@ -271,12 +259,9 @@ const ClusterManagement: FunctionComponent = () => {
         <TabPanel value={activeTab} index={MANAGEMENT_TABS.LIST_VIEW}>
           {managementCluster && (
             <ClusterTable
-              ref={tableRef}
               clusters={clusterMap}
               managementCluster={managementCluster}
-              onDeleteCluster={openDeleteModal}
-              onMenuButtonClick={handleMenuButtonClick}
-              presentedClusterId={presentedClusterId}
+              onDeleteCluster={handleDeleteMenuClick}
             />
           )}
         </TabPanel>
@@ -284,26 +269,7 @@ const ClusterManagement: FunctionComponent = () => {
           <Flow onNodeClick={handleNodeClick} />
         </TabPanel>
       </Content>
-      <Drawer
-        open={createClusterFlowOpen}
-        onClose={handleMenuClose}
-        anchor="right"
-        PaperProps={{
-          sx: {
-            top: '65px',
-            boxShadow: '0px 2px 4px rgba(100, 116, 139, 0.16)',
-            width: '684px',
-            height: 'calc(100% - 65px)',
-          },
-        }}
-        sx={{
-          '&.MuiDrawer-root': {
-            '.MuiBackdrop-root': {
-              backgroundColor: 'transparent',
-            },
-          },
-        }}
-      >
+      <StyledDrawer open={createClusterFlowOpen} onClose={handleMenuClose} anchor="right">
         <CreateClusterFlow
           cluster={clusterMap[presentedClusterId ?? '']}
           managementCluster={managementCluster}
@@ -316,11 +282,11 @@ const ClusterManagement: FunctionComponent = () => {
           notifiedOfBetaPhysicalClusters={notifiedOfBetaPhysicalClusters}
           onNotificationClose={handleNotificationClose}
         />
-      </Drawer>
+      </StyledDrawer>
       {presentedClusterId && (
         <DeleteCluster
           isOpen={isDeleteModalOpen}
-          onClose={closeDeleteModal}
+          onCloseModal={closeDeleteModal}
           onDelete={handleDeleteCluster}
           cluster={clusterMap[presentedClusterId]}
         />

From 2bdb34cadd4eef5197198265d4feff0c7eea1660 Mon Sep 17 00:00:00 2001
From: Derrick Hawkins <derrick.b.hawkins@gmail.com>
Date: Tue, 24 Oct 2023 10:23:15 -0700
Subject: [PATCH 2/6] remove unused

---
 containers/clusterManagement/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/containers/clusterManagement/index.tsx b/containers/clusterManagement/index.tsx
index 85b89edb..ad3b9544 100644
--- a/containers/clusterManagement/index.tsx
+++ b/containers/clusterManagement/index.tsx
@@ -14,7 +14,6 @@ import {
 } from '../../redux/thunks/api.thunk';
 import { Cluster, ClusterCreationStep, ClusterStatus, ClusterType } from '../../types/provision';
 import useToggle from '../../hooks/useToggle';
-import Drawer from '../../components/drawer';
 import useModal from '../../hooks/useModal';
 import DeleteCluster from '../../components/deleteCluster';
 import TabPanel, { Tab, a11yProps } from '../../components/tab';

From 53f51573c7b3f09824b023a6b2e62950ab422398 Mon Sep 17 00:00:00 2001
From: Derrick Hawkins <derrick.b.hawkins@gmail.com>
Date: Tue, 24 Oct 2023 13:46:34 -0700
Subject: [PATCH 3/6] have form give prefilled values for instance size and
 node count dependent on cloud provider

---
 .../numberInput/numberInput.stories.tsx           |  7 ++++++-
 components/numberInput/index.tsx                  |  2 +-
 constants/index.ts                                | 15 +++++++++++++++
 .../clusterForms/shared/setupForm/index.tsx       |  7 +++++--
 containers/provision/index.tsx                    |  9 ++++++++-
 redux/thunks/api.thunk.ts                         |  2 +-
 6 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/components/controlledFields/numberInput/numberInput.stories.tsx b/components/controlledFields/numberInput/numberInput.stories.tsx
index cc61de04..f4e005bc 100644
--- a/components/controlledFields/numberInput/numberInput.stories.tsx
+++ b/components/controlledFields/numberInput/numberInput.stories.tsx
@@ -19,7 +19,12 @@ const ControlledNumberInputWithHooks = () => {
   });
   return (
     <form onSubmit={() => action('onSubmit')}>
-      <ControlledNumberInput label="Number of nodes" name="numberOfNodes" control={control} />
+      <ControlledNumberInput
+        numberInputProps={{ defaultValue: 3 }}
+        label="Number of nodes"
+        name="numberOfNodes"
+        control={control}
+      />
       <button type="submit">Submit</button>
     </form>
   );
diff --git a/components/numberInput/index.tsx b/components/numberInput/index.tsx
index 966bb1c2..e8193db3 100644
--- a/components/numberInput/index.tsx
+++ b/components/numberInput/index.tsx
@@ -22,7 +22,7 @@ const NumberInput = forwardRef<HTMLLabelElement | null, NumberInputProps>(functi
   { label, onChange = noop, inputProps = {}, ...rest },
   ref,
 ) {
-  const [value, setValue] = useState(Number(inputProps.min ?? 0));
+  const [value, setValue] = useState(Number(inputProps.defaultValue ?? 0));
   return (
     <Root {...rest} ref={ref}>
       {label && (
diff --git a/constants/index.ts b/constants/index.ts
index 299b5918..f445f1ee 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -1,6 +1,8 @@
 import { TagColor, TagIconOption } from '../components/tag';
 import { ClusterStatus, ClusterType } from '../types/provision';
 
+import { InstallationType } from '@/types/redux';
+
 export const AWS_REGIONS = [
   { label: 'US East (Ohio) (us-east-2)', value: 'us-east-2' },
   { label: 'US East (N. Virginia) (us-east-1)', value: 'us-east-1' },
@@ -52,8 +54,21 @@ export const CLUSTER_TAG_CONFIG: Record<
 };
 
 export const MIN_NODE_COUNT = 1;
+export const SUGGESTED_WORKLOAD_NODE_COUNT = 2;
 
 export const WORKLOAD_CLUSTER_OPTIONS = [
   { label: 'Physical', value: ClusterType.WORKLOAD },
   { label: 'Virtual', value: ClusterType.WORKLOAD_V_CLUSTER },
 ];
+
+export const DEFAULT_CLOUD_INSTANCE_SIZES: Record<
+  InstallationType,
+  { instanceSize: string; nodeCount: number }
+> = {
+  [InstallationType.AWS]: { instanceSize: 'm5.large', nodeCount: 6 },
+  [InstallationType.CIVO]: { instanceSize: 'Medium - Standard', nodeCount: 6 },
+  [InstallationType.DIGITAL_OCEAN]: { instanceSize: 's-4vcpu-8gb', nodeCount: 4 },
+  [InstallationType.GOOGLE]: { instanceSize: 'e2-medium', nodeCount: 3 },
+  [InstallationType.VULTR]: { instanceSize: 'vc2-4c-8gb', nodeCount: 5 },
+  [InstallationType.LOCAL]: { instanceSize: '', nodeCount: 3 },
+};
diff --git a/containers/clusterForms/shared/setupForm/index.tsx b/containers/clusterForms/shared/setupForm/index.tsx
index cadaed53..e8ee5777 100644
--- a/containers/clusterForms/shared/setupForm/index.tsx
+++ b/containers/clusterForms/shared/setupForm/index.tsx
@@ -44,12 +44,15 @@ const SetupForm: FunctionComponent = () => {
   const {
     control,
     setValue,
+    getValues,
     formState: { errors },
     watch,
   } = useFormContext<InstallValues>();
 
   const [domainName, subDomain] = watch(['domainName', 'subDomain']);
 
+  const { instanceSize, nodeCount } = getValues();
+
   const subDomainHelperText = !subDomain ? '' : `${subDomain}.${domainName}`;
 
   const {
@@ -181,14 +184,14 @@ const SetupForm: FunctionComponent = () => {
           label: instanceSize,
           value: instanceSize,
         }))}
-        defaultValue={values?.instanceSize}
+        defaultValue={instanceSize}
       />
       <Box sx={{ width: 136 }}>
         <ControlledNumberInput
           label="Number of nodes"
           control={control}
           name="nodeCount"
-          numberInputProps={{ min: MIN_NODE_COUNT }}
+          numberInputProps={{ min: MIN_NODE_COUNT, defaultValue: nodeCount }}
         />
       </Box>
       <ControlledAutocomplete
diff --git a/containers/provision/index.tsx b/containers/provision/index.tsx
index 83b051fa..47990133 100644
--- a/containers/provision/index.tsx
+++ b/containers/provision/index.tsx
@@ -27,7 +27,7 @@ import {
 import { useInstallation } from '../../hooks/useInstallation';
 import { InstallValues, InstallationType } from '../../types/redux';
 import { GitProvider } from '../../types';
-import { AUTHENTICATION_ERROR_MSG } from '../../constants';
+import { AUTHENTICATION_ERROR_MSG, DEFAULT_CLOUD_INSTANCE_SIZES } from '../../constants';
 import { useQueue } from '../../hooks/useQueue';
 import { ClusterStatus, ClusterType } from '../../types/provision';
 
@@ -71,8 +71,15 @@ const Provision: FunctionComponent = () => {
       installationStep,
       !!isMarketplace,
     );
+
+  const { instanceSize, nodeCount } =
+    DEFAULT_CLOUD_INSTANCE_SIZES[installType ?? InstallationType.LOCAL];
   const methods = useForm<InstallValues>({
     mode: 'onChange',
+    defaultValues: {
+      instanceSize,
+      nodeCount,
+    },
   });
   const {
     formState: { isValid: isFormValid },
diff --git a/redux/thunks/api.thunk.ts b/redux/thunks/api.thunk.ts
index 2e166255..5b102cf7 100644
--- a/redux/thunks/api.thunk.ts
+++ b/redux/thunks/api.thunk.ts
@@ -236,7 +236,7 @@ export const getCloudRegions = createAsyncThunk<
 
   const res = await axios.post<{ regions: Array<string> }>('/api/proxy', {
     url: `/region/${installType || (values as Cluster).cloudProvider}`,
-    body: installType === InstallationType.AWS ? { ...values, cloud_region: 'us-east-1' } : values,
+    body: values,
   });
 
   if ('error' in res) {

From 475175b0290eeda584db14da9ccf16b71bb80e7f Mon Sep 17 00:00:00 2001
From: Derrick Hawkins <derrick.b.hawkins@gmail.com>
Date: Tue, 24 Oct 2023 14:06:15 -0700
Subject: [PATCH 4/6] pass along non hard coded cloud_region in request

---
 redux/thunks/api.thunk.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/redux/thunks/api.thunk.ts b/redux/thunks/api.thunk.ts
index 5b102cf7..50a2e76f 100644
--- a/redux/thunks/api.thunk.ts
+++ b/redux/thunks/api.thunk.ts
@@ -236,7 +236,10 @@ export const getCloudRegions = createAsyncThunk<
 
   const res = await axios.post<{ regions: Array<string> }>('/api/proxy', {
     url: `/region/${installType || (values as Cluster).cloudProvider}`,
-    body: values,
+    body:
+      installType === InstallationType.AWS
+        ? { ...values, cloud_region: values.cloudRegion }
+        : values,
   });
 
   if ('error' in res) {

From d32a03c43a424574612f3bf3727de582a5296227 Mon Sep 17 00:00:00 2001
From: Derrick Hawkins <derrick.b.hawkins@gmail.com>
Date: Tue, 24 Oct 2023 14:29:07 -0700
Subject: [PATCH 5/6] mark instance size field as required

---
 containers/clusterForms/shared/setupForm/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/containers/clusterForms/shared/setupForm/index.tsx b/containers/clusterForms/shared/setupForm/index.tsx
index e8ee5777..803b8f5c 100644
--- a/containers/clusterForms/shared/setupForm/index.tsx
+++ b/containers/clusterForms/shared/setupForm/index.tsx
@@ -179,6 +179,7 @@ const SetupForm: FunctionComponent = () => {
         control={control}
         name="instanceSize"
         label="Instance size"
+        required
         rules={{ required: true }}
         options={instanceSizes.map((instanceSize) => ({
           label: instanceSize,

From 279fc069710d0281ad7c562551e300323328b7b6 Mon Sep 17 00:00:00 2001
From: Derrick Hawkins <derrick.b.hawkins@gmail.com>
Date: Fri, 27 Oct 2023 10:52:27 -0700
Subject: [PATCH 6/6] reverse that change.

---
 redux/thunks/api.thunk.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/redux/thunks/api.thunk.ts b/redux/thunks/api.thunk.ts
index 50a2e76f..2e166255 100644
--- a/redux/thunks/api.thunk.ts
+++ b/redux/thunks/api.thunk.ts
@@ -236,10 +236,7 @@ export const getCloudRegions = createAsyncThunk<
 
   const res = await axios.post<{ regions: Array<string> }>('/api/proxy', {
     url: `/region/${installType || (values as Cluster).cloudProvider}`,
-    body:
-      installType === InstallationType.AWS
-        ? { ...values, cloud_region: values.cloudRegion }
-        : values,
+    body: installType === InstallationType.AWS ? { ...values, cloud_region: 'us-east-1' } : values,
   });
 
   if ('error' in res) {