configure cloud instance step progress

www/src/components/create-cluster/CreateCluster.tsx

@@ -7,7 +7,7 @@ import {
 import { useNavigate } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
 
-import { useMemo, useState } from 'react'
+import { ReactElement, useMemo, useState } from 'react'
 
 import OnboardingCard from 'components/shell/onboarding/OnboardingCard'
 
@@ -27,6 +27,8 @@ export function CreateCluster() {
   )
   const [hostingOption, setHostingOption] = useState<'local' | 'cloud'>('local')
   const [finishEnabled, setFinishEnabled] = useState(false)
+  const [continueBtn, setContinueBtn] = useState<ReactElement | undefined>()
+
   const steps = hostingOption === 'local' ? localSteps : cloudSteps
   const curStepIndex = steps.findIndex((step) => step.key === curStep)
 
@@ -38,6 +40,8 @@ export function CreateCluster() {
       setHostingOption,
       finishEnabled,
       setFinishEnabled,
+      continueBtn,
+      setContinueBtn,
     }),
     [
       curStep,
@@ -46,6 +50,8 @@ export function CreateCluster() {
       setHostingOption,
       finishEnabled,
       setFinishEnabled,
+      continueBtn,
+      setContinueBtn,
     ]
   )
 

www/src/components/create-cluster/CreateClusterActions.tsx

@@ -9,7 +9,7 @@ import {
 
 export function CreateClusterActions() {
   const theme = useTheme()
-  const { curStep, setCurStep, hostingOption, finishEnabled } =
+  const { curStep, setCurStep, hostingOption, finishEnabled, continueBtn } =
     useCreateClusterContext()
 
   const steps = hostingOption === 'local' ? localSteps : cloudSteps
@@ -51,7 +51,9 @@ export function CreateClusterActions() {
             </Button>
           )}
           {nextStep ? (
-            <Button onClick={() => setCurStep(nextStep)}>Continue</Button>
+            continueBtn || (
+              <Button onClick={() => setCurStep(nextStep)}>Continue</Button>
+            )
           ) : (
             <Button
               disabled={!finishEnabled}

www/src/components/create-cluster/CreateClusterWizard.tsx

@@ -6,7 +6,7 @@ import {
   StepperSteps,
 } from '@pluralsh/design-system'
 
-import React, { createContext, useContext } from 'react'
+import React, { ReactElement, createContext, useContext } from 'react'
 
 import { HostingOptionsStep } from './steps/HostingOptionsStep'
 import { InstallCliStep } from './steps/InstallCliStep'
@@ -37,6 +37,8 @@ type CreateClusterContextType = {
   setCurStep: (step: CreateClusterStepKey) => void
   finishEnabled: boolean
   setFinishEnabled: (enabled: boolean) => void
+  continueBtn?: ReactElement
+  setContinueBtn: (continueBtn?: ReactElement) => void
 }
 
 export const CreateClusterContext = createContext<

www/src/components/create-cluster/steps/ConfigureCloudInstanceStep.tsx

@@ -1,3 +1,126 @@
+import {
+  Button,
+  Callout,
+  Flex,
+  FormField,
+  Input,
+  ListBoxItem,
+  Select,
+} from '@pluralsh/design-system'
+import { CloudProvider, ConsoleSize } from 'generated/graphql'
+import { useLayoutEffect, useState } from 'react'
+import styled, { useTheme } from 'styled-components'
+
+import {
+  CreateClusterStepKey,
+  useCreateClusterContext,
+} from '../CreateClusterWizard'
+
 export function ConfigureCloudInstanceStep() {
-  return <div>ConfigureCloudInstanceStep</div>
+  const theme = useTheme()
+  const { setCurStep, setContinueBtn } = useCreateClusterContext()
+
+  const [clusterName, setClusterName] = useState('')
+  const [clusterSize, setClusterSize] = useState<ConsoleSize>(ConsoleSize.Small)
+  const [cloudProvider, setCloudProvider] = useState<CloudProvider>(
+    CloudProvider.Aws
+  )
+  const [region, setRegion] = useState<string | undefined>(regions[0])
+
+  const canSubmit = !!(
+    clusterName &&
+    clusterSize &&
+    cloudProvider &&
+    (cloudProvider === CloudProvider.Aws ? region : true)
+  )
+
+  // using layout effect to avoid flickering
+  useLayoutEffect(() => {
+    setContinueBtn(
+      <Button
+        key="create"
+        disabled={!canSubmit}
+        onClick={() => setCurStep(CreateClusterStepKey.InstallCli)}
+      >
+        Continue
+      </Button>
+    )
+
+    return () => {
+      setContinueBtn(undefined)
+    }
+  }, [canSubmit, setContinueBtn, setCurStep])
+
+  return (
+    <Flex
+      flexDirection="column"
+      gap="medium"
+    >
+      <Callout
+        css={{ marginBottom: theme.spacing.medium }}
+        title="Your Console may take a few minutes to deploy."
+      >
+        After completing this step it may take a few minutes for your Console to
+        deploy. It will run in the background as you proceed.
+      </Callout>
+      <FormFieldSC label="Cluster name">
+        <Input
+          placeholder="Enter cluster name"
+          value={clusterName}
+          onChange={(e) => setClusterName(e.target.value)}
+        />
+      </FormFieldSC>
+      <FormFieldSC label="Cluster size">
+        <Select
+          selectedKey={clusterSize}
+          onSelectionChange={(size) => setClusterSize(size as ConsoleSize)}
+        >
+          {Object.values(ConsoleSize)
+            .reverse()
+            .map((value) => (
+              <ListBoxItem
+                key={value}
+                label={value}
+              />
+            ))}
+        </Select>
+      </FormFieldSC>
+      <FormFieldSC label="Cloud">
+        <Select
+          selectedKey={cloudProvider}
+          onSelectionChange={(cloudProvider) =>
+            setCloudProvider(cloudProvider as CloudProvider)
+          }
+        >
+          {Object.values(CloudProvider).map((value) => (
+            <ListBoxItem
+              key={value}
+              label={value}
+            />
+          ))}
+        </Select>
+      </FormFieldSC>
+      {cloudProvider === CloudProvider.Aws && (
+        <FormFieldSC label="Region">
+          <Select
+            selectedKey={region}
+            onSelectionChange={(region) => setRegion(region as string)}
+          >
+            {regions.map((region) => (
+              <ListBoxItem
+                key={region}
+                label={region}
+              />
+            ))}
+          </Select>
+        </FormFieldSC>
+      )}
+    </Flex>
+  )
 }
+
+const FormFieldSC = styled(FormField)(({ theme }) => ({
+  color: theme.colors.text,
+}))
+
+const regions = ['us-east-1']