add restart to create cluster wizard

Author: jsladerman

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

@@ -1,5 +1,8 @@
 import {
   Button,
+  Flex,
+  IconFrame,
+  PencilIcon,
   ReturnIcon,
   SendMessageIcon,
   Stepper,
@@ -67,9 +70,7 @@ export function CreateCluster() {
   const curStepIndex = steps.findIndex((step) => step.key === curStep)
 
   const { data, error } = useConsoleInstanceQuery({
-    variables: {
-      id: consoleInstanceId ?? '',
-    },
+    variables: { id: consoleInstanceId ?? '' },
     skip: !consoleInstanceId,
     fetchPolicy: 'cache-and-network',
     pollInterval: 10_000,
@@ -114,18 +115,45 @@ export function CreateCluster() {
     ]
   )
 
+  const showClearButton =
+    cloudOption === 'cloud' &&
+    (curStep === CreateClusterStepKey.InstallCli ||
+      curStep === CreateClusterStepKey.Authentication)
+
   return (
     <CreateClusterContext.Provider value={context}>
       <MainWrapperSC>
         <SidebarWrapperSC>
-          <Button
-            css={{ width: '100%' }}
-            secondary
-            startIcon={<ReturnIcon />}
-            onClick={() => navigate('/overview/clusters/plural-cloud')}
+          <Flex
+            gap="small"
+            width="100%"
           >
-            Back home
-          </Button>
+            <Button
+              css={{ flex: 1 }}
+              secondary
+              startIcon={<ReturnIcon />}
+              onClick={() => navigate('/overview/clusters/plural-cloud')}
+            >
+              Back home
+            </Button>
+            {showClearButton && (
+              <IconFrame
+                clickable
+                type="floating"
+                size="large"
+                icon={<PencilIcon css={{ width: 16 }} />}
+                tooltip="Create a new instance (this one will continue provisioning)"
+                onClick={() => {
+                  clearCreateClusterCache()
+                  setCurStep(CreateClusterStepKey.ChooseCloud)
+                  setCloudOption('cloud')
+                  setConsoleInstanceId(null)
+                  setContinueBtn(undefined)
+                }}
+                css={{ flexShrink: 0 }}
+              />
+            )}
+          </Flex>
           <Stepper
             vertical
             steps={steps}
@@ -163,7 +191,7 @@ export function CreateCluster() {
   )
 }
 
-export function clearCreateClusterState() {
+export function clearCreateClusterCache() {
   localStorage.removeItem(`plural-${CUR_CREATE_CLUSTER_STEP_KEY}`)
   localStorage.removeItem(`plural-${CLOUD_OPTION_KEY}`)
   localStorage.removeItem(`plural-${HOSTING_OPTION_KEY}`)

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

@@ -13,7 +13,7 @@ import {
   localSteps,
   useCreateClusterContext,
 } from './CreateClusterWizard'
-import { clearCreateClusterState } from './CreateCluster'
+import { clearCreateClusterCache } from './CreateCluster'
 
 export const FINISHED_CONSOLE_INSTANCE_KEY = 'plural-finished-console-instance'
 export const FINISHED_LOCAL_CREATE_KEY = 'plural-finished-local-create'
@@ -51,7 +51,7 @@ export function CreateClusterActions() {
     if (cloudOption === 'local') {
       localStorage.setItem(FINISHED_LOCAL_CREATE_KEY, 'true')
     }
-    clearCreateClusterState()
+    clearCreateClusterCache()
     navigate(
       `/overview/clusters/${
         cloudOption === 'local' ? 'self-hosted' : 'plural-cloud'

www/src/components/overview/clusters/plural-cloud/DeleteInstance.tsx

@@ -2,7 +2,7 @@ import { useTheme } from 'styled-components'
 
 import { Button, Flex, Input, Modal } from '@pluralsh/design-system'
 import {
-  clearCreateClusterState,
+  clearCreateClusterCache,
   getUnfinishedConsoleInstanceId,
 } from 'components/create-cluster/CreateCluster'
 import { GqlError } from 'components/utils/Alert'
@@ -52,7 +52,7 @@ function DeleteInstance({
     variables: { id: instance.id },
     onCompleted: () => {
       if (instance.id === getUnfinishedConsoleInstanceId()) {
-        clearCreateClusterState()
+        clearCreateClusterCache()
       }
       onClose()
       refetch()
@@ -115,7 +115,7 @@ export function useDeleteUnfinishedInstance({
   const id = getUnfinishedConsoleInstanceId()
   const [mutation, { loading, error }] = useDeleteConsoleInstanceMutation()
   const triggerDelete = useCallback(() => {
-    clearCreateClusterState()
+    clearCreateClusterCache()
     onClear?.()
     if (id && id !== 'null' && id !== 'undefined') {
       mutation({ variables: { id } })