add deploy local steps

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

@@ -25,10 +25,30 @@ export function CreateCluster() {
   const [curStep, setCurStep] = useState<CreateClusterStepKey>(
     CreateClusterStepKey.HostingOptions
   )
-  const [hostingOption, setHostingOption] = useState<'local' | 'cloud'>('cloud')
+  const [hostingOption, setHostingOption] = useState<'local' | 'cloud'>('local')
+  const [finishEnabled, setFinishEnabled] = useState(false)
   const steps = hostingOption === 'local' ? localSteps : cloudSteps
   const curStepIndex = steps.findIndex((step) => step.key === curStep)
 
+  const context = useMemo(
+    () => ({
+      curStep,
+      setCurStep,
+      hostingOption,
+      setHostingOption,
+      finishEnabled,
+      setFinishEnabled,
+    }),
+    [
+      curStep,
+      setCurStep,
+      hostingOption,
+      setHostingOption,
+      finishEnabled,
+      setFinishEnabled,
+    ]
+  )
+
   return (
     <MainWrapperSC>
       <SidebarWrapperSC>
@@ -60,12 +80,7 @@ export function CreateCluster() {
             Contact sales
           </Button>
         </ContentHeaderSC>
-        <CreateClusterContext.Provider
-          value={useMemo(
-            () => ({ curStep, setCurStep, hostingOption, setHostingOption }),
-            [curStep, setCurStep, hostingOption, setHostingOption]
-          )}
-        >
+        <CreateClusterContext.Provider value={context}>
           <OnboardingCard title={steps[curStepIndex]?.stepTitle}>
             {steps[curStepIndex]?.component}
             <CreateClusterActions />

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

@@ -9,13 +9,18 @@ import {
 
 export function CreateClusterActions() {
   const theme = useTheme()
-  const { curStep, setCurStep, hostingOption } = useCreateClusterContext()
+  const { curStep, setCurStep, hostingOption, finishEnabled } =
+    useCreateClusterContext()
 
   const steps = hostingOption === 'local' ? localSteps : cloudSteps
   const curStepIndex = steps.findIndex((step) => step.key === curStep)
   const prevStep = steps[curStepIndex - 1]?.key
   const nextStep = steps[curStepIndex + 1]?.key
 
+  const handleFinish = () => {
+    // TODO
+  }
+
   return (
     <>
       <Divider
@@ -45,8 +50,15 @@ export function CreateClusterActions() {
               Back
             </Button>
           )}
-          {nextStep && (
+          {nextStep ? (
             <Button onClick={() => setCurStep(nextStep)}>Continue</Button>
+          ) : (
+            <Button
+              disabled={!finishEnabled}
+              onClick={handleFinish}
+            >
+              Finish
+            </Button>
           )}
         </Flex>
       </Flex>

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

@@ -35,6 +35,8 @@ type CreateClusterContextType = {
   setHostingOption: (option: HostingOption) => void
   curStep: CreateClusterStepKey
   setCurStep: (step: CreateClusterStepKey) => void
+  finishEnabled: boolean
+  setFinishEnabled: (enabled: boolean) => void
 }
 
 export const CreateClusterContext = createContext<

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

@@ -1,3 +1,67 @@
+import { Callout, Checkbox, Codeline, Flex } from '@pluralsh/design-system'
+import { CSSProp, useTheme } from 'styled-components'
+
+import { useCreateClusterContext } from '../CreateClusterWizard'
+
 export function DeployLocallyStep() {
-  return <div>DeployLocallyStep</div>
+  const theme = useTheme()
+  const { finishEnabled, setFinishEnabled } = useCreateClusterContext()
+
+  return (
+    <Flex
+      direction="column"
+      gap="xlarge"
+    >
+      <Callout title="This command may take 30 or more minutes to complete">
+        We recommend keeping this tab open and proceeding once your control
+        plane is deployed.
+      </Callout>
+      <Flex
+        direction="column"
+        gap="small"
+      >
+        <span css={theme.partials.text.body2}>
+          Now that you've installed the Plural CLI, all that's needed is to run
+          one command. This will provide everything you need to run your control
+          plane.
+        </span>
+        <Codeline css={{ background: theme.colors['fill-two'] }}>
+          plural up
+        </Codeline>
+        <span css={theme.partials.text.body2}>
+          For a full guide on properly deploying your cloud instance and cluster
+          with `plural up`,{' '}
+          <a
+            css={theme.partials.text.inlineLink}
+            href="https://docs.plural.sh/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            visit our documentation.
+          </a>
+        </span>
+      </Flex>
+      <Flex
+        direction="column"
+        gap="small"
+        css={{ marginTop: theme.spacing.medium }}
+      >
+        <Checkbox
+          small
+          checked={finishEnabled}
+          onChange={(e) => setFinishEnabled(e.target.checked)}
+          css={
+            {
+              '& .label': {
+                userSelect: 'none',
+              },
+            } as CSSProp
+          }
+        >
+          The `plural up` command has finished running.
+          <span css={{ color: theme.colors['text-danger'] }}>*</span>
+        </Checkbox>
+      </Flex>
+    </Flex>
+  )
 }

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

@@ -1,37 +1,24 @@
-import { CloudIcon, Flex } from '@pluralsh/design-system'
+import { CloudIcon, ConsoleIcon, Flex } from '@pluralsh/design-system'
 import { CloudOption } from 'components/shell/onboarding/sections/cloud/CloudOption'
 
-import { useTheme } from 'styled-components'
-
 import { useCreateClusterContext } from '../CreateClusterWizard'
 
 export function HostingOptionsStep() {
-  const theme = useTheme()
   const { hostingOption, setHostingOption } = useCreateClusterContext()
 
   return (
     <Flex gap="large">
       <CloudOption
         selected={hostingOption === 'local'}
         onClick={() => setHostingOption('local')}
-        icon={
-          <CloudIcon
-            size={40}
-            color={theme.colors['text-light']}
-          />
-        }
+        icon={<CloudIcon size={40} />}
         header="Deploy Yourself"
         description="Host your control plane in your own cloud."
       />
       <CloudOption
         selected={hostingOption === 'cloud'}
         onClick={() => setHostingOption('cloud')}
-        icon={
-          <CloudIcon
-            size={40}
-            color={theme.colors['text-light']}
-          />
-        }
+        icon={<ConsoleIcon size={40} />}
         header="Use Plural Cloud"
         description="Host your control plane in a Plural Cloud instance."
       />

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

@@ -1,3 +1,23 @@
+import { Callout, Flex } from '@pluralsh/design-system'
+import { CliInstallationBaseInfo } from 'components/shell/onboarding/sections/cli/CLIInstallationStep'
+
+import { useCreateClusterContext } from '../CreateClusterWizard'
+
 export function InstallCliStep() {
-  return <div>InstallCliStep</div>
+  const { hostingOption } = useCreateClusterContext()
+
+  return (
+    <Flex
+      direction="column"
+      gap="xlarge"
+    >
+      {hostingOption === 'cloud' && (
+        <Callout title="The next two steps are in your local terminal">
+          This will help to setup and properly configure the control plane and
+          Plural Cloud instance with your local environment.
+        </Callout>
+      )}
+      <CliInstallationBaseInfo />
+    </Flex>
+  )
 }

www/src/components/shell/onboarding/sections/cli/CLIInstallationStep.tsx

@@ -9,6 +9,7 @@ import {
   TabList,
   TabPanel,
 } from '@pluralsh/design-system'
+import { useTheme } from 'styled-components'
 
 const TAB_MAC = 'TAB_MAC'
 const TAB_CURL = 'TAB_CURL'
@@ -43,6 +44,29 @@ const DIRECTORY = [
 ]
 
 function CliInstallation({ onBack, onNext }) {
+  return (
+    <>
+      <CliInstallationBaseInfo />
+      <Flex
+        gap="medium"
+        justify="space-between"
+        borderTop="1px solid border"
+        paddingTop="large"
+        marginTop="xlarge"
+      >
+        <Button
+          secondary
+          onClick={onBack}
+        >
+          Back
+        </Button>
+        <Button onClick={onNext}>Continue</Button>
+      </Flex>
+    </>
+  )
+}
+export function CliInstallationBaseInfo() {
+  const theme = useTheme()
   const [tab, setTab] = useState(TAB_MAC)
   const tabStateRef = useRef<any>(null)
   const currentTab = useMemo(() => DIRECTORY.find((t) => t.key === tab), [tab])
@@ -110,9 +134,14 @@ function CliInstallation({ onBack, onNext }) {
           <>
             <Div marginTop="small">
               {tab === TAB_MAC ? (
-                <Codeline>{currentTab?.command}</Codeline>
+                <Codeline css={{ background: theme.colors['fill-two'] }}>
+                  {currentTab?.command}
+                </Codeline>
               ) : (
-                <Code onSelectedTabChange={() => {}}>
+                <Code
+                  css={{ background: theme.colors['fill-two'] }}
+                  onSelectedTabChange={() => {}}
+                >
                   {currentTab?.command || ''}
                 </Code>
               )}
@@ -184,22 +213,6 @@ function CliInstallation({ onBack, onNext }) {
           </>
         )}
       </TabPanel>
-
-      <Flex
-        gap="medium"
-        justify="space-between"
-        borderTop="1px solid border"
-        paddingTop="large"
-        marginTop="xlarge"
-      >
-        <Button
-          secondary
-          onClick={onBack}
-        >
-          Back
-        </Button>
-        <Button onClick={onNext}>Continue</Button>
-      </Flex>
     </>
   )
 }