Feat: Enable workspace wizard (#3634)

packages/frontend-2/components/dashboard/Sidebar.vue

@@ -164,12 +164,6 @@
     </template>
 
     <FeedbackDialog v-model:open="showFeedbackDialog" />
-
-    <WorkspaceCreateDialog
-      v-model:open="showWorkspaceCreateDialog"
-      navigate-on-success
-      event-source="sidebar"
-    />
   </div>
 </template>
 <script setup lang="ts">
@@ -187,7 +181,8 @@ import {
   projectsRoute,
   workspaceRoute,
   workspacesRoute,
-  downloadManagerUrl
+  downloadManagerUrl,
+  workspaceCreateRoute
 } from '~/lib/common/helpers/route'
 import { useRoute } from 'vue-router'
 import { useActiveUser } from '~~/lib/auth/composables/activeUser'
@@ -220,7 +215,6 @@ const mixpanel = useMixpanel()
 
 const isOpenMobile = ref(false)
 const showFeedbackDialog = ref(false)
-const showWorkspaceCreateDialog = ref(false)
 
 const { result: workspaceResult, onResult: onWorkspaceResult } = useQuery(
   settingsSidebarQuery,
@@ -274,7 +268,7 @@ const openFeedbackDialog = () => {
 }
 
 const openWorkspaceCreateDialog = () => {
-  showWorkspaceCreateDialog.value = true
+  navigateTo(workspaceCreateRoute())
   mixpanel.track('Create Workspace Button Clicked', {
     source: 'sidebar'
   })

packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue

@@ -156,6 +156,7 @@ const isMatchingInterval = computed(
     (props.yearlyIntervalSelected ? BillingInterval.Yearly : BillingInterval.Monthly)
 )
 const isSelectable = computed(() => {
+  if (!props.isAdmin) return false
   // Always enable buttons during trial
   if (statusIsTrial.value) return true
 

packages/frontend-2/components/workspace/CreatePage.vue

@@ -3,13 +3,8 @@
     <nav
       class="fixed top-0 h-14 bg-foundation w-full shadow flex items-center justify-between px-2 cursor-pointer"
     >
-      <HeaderLogoBlock
-        :active="false"
-        class="mr-0"
-        no-link
-        @click="isCancelDialogOpen = true"
-      />
-      <FormButton color="outline" @click="isCancelDialogOpen = true">Cancel</FormButton>
+      <HeaderLogoBlock :active="false" class="mr-0" no-link @click="onCancelClick" />
+      <FormButton color="outline" @click="onCancelClick">Cancel</FormButton>
     </nav>
     <div class="h-dvh w-dvh overflow-hidden flex flex-col">
       <!-- Static Spacer to allow for absolutely positioned HeaderNavBar  -->
@@ -29,9 +24,25 @@
 </template>
 
 <script setup lang="ts">
+import { workspacesRoute } from '~~/lib/common/helpers/route'
+import { WizardSteps } from '~/lib/workspaces/helpers/types'
+import { useWorkspacesWizard } from '~/lib/workspaces/composables/wizard'
+
 defineProps<{
   workspaceId?: string
 }>()
 
+const { currentStep } = useWorkspacesWizard()
+
 const isCancelDialogOpen = ref(false)
+
+const isFirstStep = computed(() => currentStep.value === WizardSteps.Details)
+
+const onCancelClick = () => {
+  if (isFirstStep.value) {
+    navigateTo(workspacesRoute)
+  } else {
+    isCancelDialogOpen.value = true
+  }
+}
 </script>

packages/frontend-2/components/workspace/wizard/CancelDialog.vue

@@ -1,13 +1,13 @@
 <template>
   <LayoutDialog
     v-model:open="isOpen"
-    title="Confirm cancellation"
+    title="Discard new workspace?"
     :buttons="dialogButtons"
     max-width="xs"
   >
     <div class="flex flex-col gap-2">
       <p class="text-body-xs text-foreground font-medium">
-        You have unsaved changes. Are you sure you want to leave?
+        You'll loose all the information entered for this workspace.
       </p>
     </div>
   </LayoutDialog>
@@ -49,7 +49,7 @@ const dialogButtons = computed((): LayoutDialogButton[] => [
     }
   },
   {
-    text: 'Continue',
+    text: 'Discard',
     props: { color: 'primary' },
     onClick: onConfirm
   }

packages/frontend-2/components/workspace/wizard/Wizard.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="py-3 md:py-6">
-    <CommonLoadingIcon
-      v-if="loading || !isClientReady"
-      class="my-10 justify-self-center"
-    />
+    <CommonLoadingIcon v-if="loading || !isClientReady" class="my-10 mx-auto" />
     <template v-else>
       <CommonAlert
         v-if="showPaymentError"

packages/frontend-2/components/workspaces/Promo/Page.vue

@@ -59,12 +59,6 @@
       <h4 class="text-foreground text-heading mb-6">Pricing</h4>
       <SettingsWorkspacesBillingPricingTable />
     </section>
-
-    <WorkspaceCreateDialog
-      v-model:open="showWorkspaceCreateDialog"
-      navigate-on-success
-      event-source="promo-page"
-    />
   </div>
 </template>
 <script setup lang="ts">
@@ -76,13 +70,12 @@ import {
   GlobeAltIcon,
   PlusIcon
 } from '@heroicons/vue/24/outline'
+import { workspaceCreateRoute } from '~~/lib/common/helpers/route'
 
 const mixpanel = useMixpanel()
 
-const showWorkspaceCreateDialog = ref(false)
-
 const openWorkspaceCreateDialog = () => {
-  showWorkspaceCreateDialog.value = true
+  navigateTo(workspaceCreateRoute())
   mixpanel.track('Create Workspace Button Clicked', {
     source: 'promo-page'
   })

packages/frontend-2/lib/workspaces/composables/wizard.ts

@@ -1,4 +1,7 @@
-import type { WorkspaceInviteCreateInput } from '~/lib/common/generated/gql/graphql'
+import type {
+  WorkspaceInviteCreateInput,
+  Workspace
+} from '~/lib/common/generated/gql/graphql'
 import { BillingInterval, PaidWorkspacePlans } from '~/lib/common/generated/gql/graphql'
 import { type WorkspaceWizardState, WizardSteps } from '~/lib/workspaces/helpers/types'
 import {
@@ -193,13 +196,30 @@ export const useWorkspacesWizard = () => {
       })
     }
 
-    const result = await updateWorkspaceCreationState({
-      input: {
-        state: {},
-        workspaceId,
-        completed: true
+    const result = await updateWorkspaceCreationState(
+      {
+        input: {
+          state: {},
+          workspaceId,
+          completed: true
+        }
+      },
+      {
+        update: (cache, res) => {
+          if (!res.data?.workspaceMutations) return
+
+          cache.modify<Workspace>({
+            id: getCacheId('Workspace', workspaceId),
+            fields: {
+              creationState: () => ({
+                completed: true,
+                state: {}
+              })
+            }
+          })
+        }
       }
-    }).catch(convertThrowIntoFetchResult)
+    ).catch(convertThrowIntoFetchResult)
 
     if (result?.data?.workspaceMutations.updateCreationState) {
       mixpanel.track('Workspace Created', {