feat(fe2): Create/Join Workspace as part of signup flow

packages/frontend-2/components/onboarding/JoinTeammates.vue

@@ -1,3 +1,4 @@
+<!-- FF-CLEANUP: Remove when workspaces plans released -->
 <template>
   <div class="flex flex-col items-center gap-2 w-full">
     <CommonCard

packages/frontend-2/components/projects/DashboardHeader.vue

@@ -13,22 +13,24 @@
         :invite="invite"
       />
       <WorkspaceInviteDiscoverableWorkspaceBanner
-        v-for="workspace in discoverableWorkspaces"
+        v-for="workspace in filteredDiscoverableWorkspaces"
         :key="workspace.id"
         :workspace="workspace"
+        @dismiss="handleDismiss"
       />
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import type { MaybeNullOrUndefined } from '@speckle/shared'
 import { useSynchronizedCookie } from '~/lib/common/composables/reactiveCookie'
 import { graphql } from '~/lib/common/generated/gql'
 import type {
   ProjectsDashboardHeaderProjects_UserFragment,
   ProjectsDashboardHeaderWorkspaces_UserFragment
 } from '~/lib/common/generated/gql/graphql'
 import { CookieKeys } from '~/lib/common/helpers/constants'
-import type { MaybeNullOrUndefined } from '@speckle/shared'
+import { useDiscoverableWorkspaces } from '~/lib/workspaces/composables/discoverableWorkspaces'
 
 graphql(`
   fragment ProjectsDashboardHeaderProjects_User on User {
@@ -40,9 +42,6 @@ graphql(`
 
 graphql(`
   fragment ProjectsDashboardHeaderWorkspaces_User on User {
-    discoverableWorkspaces {
-      ...WorkspaceInviteDiscoverableWorkspaceBanner_LimitedWorkspace
-    }
     workspaceInvites {
       ...WorkspaceInviteBanner_PendingWorkspaceCollaborator
     }
@@ -61,10 +60,12 @@ const dismissedDiscoverableWorkspaces = useSynchronizedCookie<string[]>(
   }
 )
 
+const { discoverableWorkspaces } = useDiscoverableWorkspaces()
+
 const workspaceInvites = computed(() => props.workspacesInvites?.workspaceInvites || [])
-const discoverableWorkspaces = computed(
+const filteredDiscoverableWorkspaces = computed(
   () =>
-    props.workspacesInvites?.discoverableWorkspaces?.filter(
+    discoverableWorkspaces.value?.filter(
       (workspace) => !dismissedDiscoverableWorkspaces.value.includes(workspace.id)
     ) || []
 )
@@ -73,7 +74,14 @@ const hasBanners = computed(() => {
   return (
     props.projectsInvites?.projectInvites?.length ||
     workspaceInvites.value.length ||
-    discoverableWorkspaces.value.length
+    filteredDiscoverableWorkspaces.value.length
   )
 })
+
+const handleDismiss = (workspaceId: string) => {
+  dismissedDiscoverableWorkspaces.value = [
+    ...dismissedDiscoverableWorkspaces.value,
+    workspaceId
+  ]
+}
 </script>

packages/frontend-2/components/settings/workspaces/regions/Select.vue

@@ -14,7 +14,7 @@
     </template>
     <template #nothing-selected>
       <span class="min-w-64 block">
-        {{ multiple ? 'Select regions' : 'Select a region' }}
+        {{ multiple ? 'Select default data regions' : 'Select default data region' }}
       </span>
     </template>
     <template #something-selected="{ value }">

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

@@ -9,10 +9,26 @@
       />
     </template>
     <template #header-right>
-      <FormButton size="sm" color="outline" @click="onCancelClick">Cancel</FormButton>
+      <FormButton v-if="isForcedCreation" size="sm" color="outline" @click="logout()">
+        Sign out
+      </FormButton>
+      <FormButton v-else size="sm" color="outline" @click="onCancelClick">
+        Cancel
+      </FormButton>
     </template>
 
     <WorkspaceWizard :workspace-id="workspaceId" />
+
+    <div v-if="isForcedCreation && isFirstStep" class="w-full max-w-sm mx-auto mt-4">
+      <CommonAlert color="neutral" size="xs" hide-icon>
+        <template #title>Why am I seeing this?</template>
+        <template #description>
+          This server now requires you to be a member of a workspace. Please create a
+          new workspace to continue.
+        </template>
+      </CommonAlert>
+    </div>
+
     <WorkspaceWizardCancelDialog
       v-model:open="isCancelDialogOpen"
       :workspace-id="workspaceId"
@@ -25,18 +41,37 @@ import { workspacesRoute } from '~~/lib/common/helpers/route'
 import { WizardSteps } from '~/lib/workspaces/helpers/types'
 import { useWorkspacesWizard } from '~/lib/workspaces/composables/wizard'
 import { useMixpanel } from '~/lib/core/composables/mp'
+import { useAuthManager } from '~/lib/auth/composables/auth'
 
 defineProps<{
   workspaceId?: string
 }>()
 
 const { currentStep, resetWizardState } = useWorkspacesWizard()
 const mixpanel = useMixpanel()
+const { logout } = useAuthManager()
+const isWorkspaceNewPlansEnabled = useWorkspaceNewPlansEnabled()
+const { activeUser } = useActiveUser()
 
 const isCancelDialogOpen = ref(false)
 
 const isFirstStep = computed(() => currentStep.value === WizardSteps.Details)
 
+const hasDiscoverableWorkspaces = computed(() => {
+  return (
+    (activeUser.value?.workspaceJoinRequests?.items?.length ?? 0) > 0 ||
+    (activeUser.value?.discoverableWorkspaces?.length ?? 0) > 0
+  )
+})
+
+const isForcedCreation = computed(() => {
+  return (
+    isWorkspaceNewPlansEnabled.value &&
+    activeUser.value?.workspaces?.items?.length === 0 &&
+    !hasDiscoverableWorkspaces.value
+  )
+})
+
 const onCancelClick = () => {
   if (isFirstStep.value) {
     navigateTo(workspacesRoute)

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

@@ -0,0 +1,95 @@
+<template>
+  <div class="flex flex-col items-center gap-2 w-full max-w-lg mx-auto">
+    <h1 class="text-heading-xl text-forefround mb-2 font-normal mt-4">
+      Join teammates
+    </h1>
+    <p class="text-center text-body-sm text-foreground-2 mb-8">
+      {{ description }}
+    </p>
+    <CommonCard
+      v-for="workspace in allWorkspaces"
+      :key="workspace.id"
+      class="w-full bg-foundation"
+    >
+      <div class="flex gap-4">
+        <div>
+          <WorkspaceAvatar :name="workspace.name" :logo="workspace.logo" size="xl" />
+        </div>
+        <div class="flex flex-col sm:flex-row gap-4 justify-between flex-1">
+          <div class="flex flex-col flex-1">
+            <h6 class="text-heading-sm">{{ workspace.name }}</h6>
+            <p class="text-body-2xs text-foreground-2">
+              {{ workspace.team?.totalCount }}
+              {{ workspace.team?.totalCount === 1 ? 'member' : 'members' }}
+            </p>
+          </div>
+          <FormButton
+            v-if="workspace.status !== 'Request to join'"
+            color="outline"
+            size="sm"
+            disabled
+            class="capitalize"
+            @click="() => processRequest(true, workspace.id)"
+          >
+            {{ workspace.status }}
+          </FormButton>
+          <FormButton
+            v-else
+            color="outline"
+            size="sm"
+            @click="() => processRequest(true, workspace.id)"
+          >
+            {{ workspace.status }}
+          </FormButton>
+        </div>
+      </div>
+    </CommonCard>
+    <div class="mt-2 w-full">
+      <FormButton
+        size="lg"
+        full-width
+        color="outline"
+        @click="navigateTo(workspaceCreateRoute())"
+      >
+        Create a new workspace
+      </FormButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { workspaceCreateRoute } from '~~/lib/common/helpers/route'
+import { useDiscoverableWorkspaces } from '~/lib/workspaces/composables/discoverableWorkspaces'
+
+const { discoverableWorkspaces, workspaceJoinRequests, processRequest } =
+  useDiscoverableWorkspaces()
+
+const description = computed(() => {
+  const discoverableCount = discoverableWorkspaces.value.length
+  const requestCount =
+    'items' in workspaceJoinRequests.value
+      ? workspaceJoinRequests.value.items.length
+      : 0
+
+  const totalCount = discoverableCount + requestCount
+  return totalCount === 1
+    ? 'We found a workspace that matches your email domain'
+    : 'We found workspaces that match your email domain'
+})
+
+const allWorkspaces = computed(() => {
+  const requested = (
+    'items' in workspaceJoinRequests.value ? workspaceJoinRequests.value.items : []
+  ).map((request) => ({
+    ...request.workspace,
+    status: request.status
+  }))
+
+  const discoverable = discoverableWorkspaces.value.map((workspace) => ({
+    ...workspace,
+    status: 'Request to join'
+  }))
+
+  return [...requested, ...discoverable]
+})
+</script>

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

@@ -0,0 +1,26 @@
+<template>
+  <HeaderWithEmptyPage empty-header>
+    <template #header-left>
+      <HeaderLogoBlock :active="false" class="min-w-40 cursor-pointer" no-link />
+    </template>
+    <template #header-right>
+      <FormButton
+        size="sm"
+        color="outline"
+        @click="() => logout({ skipRedirect: false })"
+      >
+        Sign out
+      </FormButton>
+    </template>
+
+    <WorkspaceDiscoverableWorkspaces />
+  </HeaderWithEmptyPage>
+</template>
+
+<script setup lang="ts">
+import { useAuthManager } from '~/lib/auth/composables/auth'
+
+defineEmits(['next'])
+
+const { logout } = useAuthManager()
+</script>

packages/frontend-2/components/workspace/invite/DiscoverableWorkspaceBanner.vue

@@ -1,5 +1,5 @@
 <template>
-  <InviteBanner :invite="invite" @processed="processRequest">
+  <InviteBanner :invite="invite" @processed="handleRequest">
     <template #message>
       Your team is already using Workspaces, request to join the
       <span class="font-medium">{{ workspace.name }}</span>
@@ -9,41 +9,17 @@
 </template>
 
 <script setup lang="ts">
-import { useMutation } from '@vue/apollo-composable'
-import { useSynchronizedCookie } from '~/lib/common/composables/reactiveCookie'
-import { graphql } from '~/lib/common/generated/gql'
-import type { WorkspaceInviteDiscoverableWorkspaceBanner_LimitedWorkspaceFragment } from '~/lib/common/generated/gql/graphql'
-import { CookieKeys } from '~/lib/common/helpers/constants'
+import { useDiscoverableWorkspaces } from '~/lib/workspaces/composables/discoverableWorkspaces'
 import { useMixpanel } from '~~/lib/core/composables/mp'
-import { dashboardRequestToJoinWorkspaceMutation } from '~~/lib/dashboard/graphql/mutations'
-import {
-  convertThrowIntoFetchResult,
-  getFirstErrorMessage
-} from '~~/lib/common/helpers/graphql'
-
-graphql(`
-  fragment WorkspaceInviteDiscoverableWorkspaceBanner_LimitedWorkspace on LimitedWorkspace {
-    id
-    name
-    slug
-    description
-    logo
-  }
-`)
+import type { LimitedWorkspace } from '~/lib/common/generated/gql/graphql'
 
 const props = defineProps<{
-  workspace: WorkspaceInviteDiscoverableWorkspaceBanner_LimitedWorkspaceFragment
+  workspace: LimitedWorkspace
 }>()
 
-const { mutate: requestToJoin } = useMutation(dashboardRequestToJoinWorkspaceMutation)
+const { processRequest } = useDiscoverableWorkspaces()
 const mixpanel = useMixpanel()
 const { triggerNotification } = useGlobalToast()
-const dismissedDiscoverableWorkspaces = useSynchronizedCookie<string[]>(
-  CookieKeys.DismissedDiscoverableWorkspaces,
-  {
-    default: () => []
-  }
-)
 
 const invite = computed(() => ({
   workspace: {
@@ -53,52 +29,22 @@ const invite = computed(() => ({
   }
 }))
 
-const processRequest = async (accept: boolean) => {
-  if (accept) {
-    const result = await requestToJoin({
-      input: { workspaceId: props.workspace.id }
-    }).catch(convertThrowIntoFetchResult)
-
-    if (result?.data) {
-      // Dismiss it show it doesnt show again
-      dismissedDiscoverableWorkspaces.value = [
-        ...dismissedDiscoverableWorkspaces.value,
-        props.workspace.id
-      ]
-
-      mixpanel.track('Workspace Join Request Sent', {
-        workspaceId: props.workspace.id,
-        location: 'discovery banner',
-        // eslint-disable-next-line camelcase
-        workspace_id: props.workspace.id
-      })
+const emit = defineEmits<{
+  (e: 'dismiss', workspaceId: string): void
+}>()
 
-      triggerNotification({
-        title: 'Request sent',
-        description: 'Your request to join the workspace has been sent.',
-        type: ToastNotificationType.Success
-      })
-    } else {
-      const errorMessage = getFirstErrorMessage(result?.errors)
-      triggerNotification({
-        title: 'Failed to send request',
-        description: errorMessage,
-        type: ToastNotificationType.Danger
-      })
-    }
+const handleRequest = async (accept: boolean) => {
+  if (accept) {
+    await processRequest(true, props.workspace.id)
+    emit('dismiss', props.workspace.id)
   } else {
-    dismissedDiscoverableWorkspaces.value = [
-      ...dismissedDiscoverableWorkspaces.value,
-      props.workspace.id
-    ]
-
+    emit('dismiss', props.workspace.id)
     mixpanel.track('Workspace Discovery Banner Dismissed', {
       workspaceId: props.workspace.id,
       location: 'discovery banner',
       // eslint-disable-next-line camelcase
       workspace_id: props.workspace.id
     })
-
     triggerNotification({
       title: 'Discoverable workspace dismissed',
       type: ToastNotificationType.Info

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

@@ -18,6 +18,7 @@
       <WorkspaceWizardStepInvites v-else-if="currentStep === WizardSteps.Invites" />
       <WorkspaceWizardStepPricing v-else-if="currentStep === WizardSteps.Pricing" />
       <WorkspaceWizardStepRegion v-else-if="currentStep === WizardSteps.Region" />
+      <WorkspaceWizardStepSso v-else-if="currentStep === WizardSteps.Sso" />
     </template>
   </div>
 </template>