Simplify onboarding flow in integrations

CrowdDotDev · Jan 9, 2024 · d312a83 · d312a83
1 parent 761c142
commit d312a83
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 39 deletions.
diff --git a/frontend/src/integrations/github/components/github-connect.vue b/frontend/src/integrations/github/components/github-connect.vue
@@ -8,7 +8,6 @@ import config from '@/config';
 import ConfirmDialog from '@/shared/dialog/confirm-dialog';
 import { useRoute, useRouter } from 'vue-router';
 
-const emit = defineEmits(['inviteColleagues']);
 defineProps({
   integration: {
     type: Object,
@@ -29,8 +28,9 @@ const connect = () => {
       'Are you the admin of your GitHub organization?',
     titleClass: 'text-lg pt-2',
     message:
-      `Only GitHub users with admin permissions are able to connect crowd.dev's GitHub integration.
-      If you are an organization contact, you will need an approval from the GitHub workspace admin. <a href="https://docs.crowd.dev/docs/github-integration" target="_blank">Read more</a>`,
+      route.name !== 'onboard' ? `Only GitHub users with admin permissions are able to connect crowd.dev's GitHub integration.
+      If you are an organization contact, you will need an approval from the GitHub workspace admin. <a href="https://docs.crowd.dev/docs/github-integration" target="_blank">Read more</a>`
+        : 'Only GitHub users with admin permissions are able to connect crowd.dev\'s GitHub integration. You can request admin permissions or connect GitHub later by inviting your organization\'s admin to the workspace. <a href="https://docs.crowd.dev/docs/github-integration" target="_blank">Read more</a>',
     icon: 'ri-information-line',
     confirmButtonText: 'I\'m the GitHub organization admin',
     cancelButtonText: 'Invite organization admin to this workspace',
@@ -40,17 +40,14 @@ const connect = () => {
     distinguishCancelAndClose: true,
     autofocus: false,
     messageClass: 'text-xs !leading-5 !mt-1 text-gray-600',
+    showCancelButton: route.name !== 'onboard',
   }).then(() => {
     window.open(githubConnectUrl.value, '_self');
   }).catch((action) => {
     if (action === 'cancel') {
-      if (route.name === 'onboard') {
-        emit('inviteColleagues');
-      } else {
-        router.push({
-          name: 'settings',
-        });
-      }
+      router.push({
+        name: 'settings',
+      });
     }
   });
 };

diff --git a/frontend/src/modules/integration/components/integration-connect.vue b/frontend/src/modules/integration/components/integration-connect.vue
@@ -6,7 +6,6 @@
         && props.integration.connectComponent
     "
     :integration="props.integration"
-    @invite-colleagues="emit('inviteColleagues')"
   >
     <template
       #default="{
@@ -74,7 +73,6 @@ const props = defineProps({
     default: () => ({}),
   },
 });
-const emit = defineEmits(['inviteColleagues']);
 
 const isCalDialogOpen = ref();
 

diff --git a/frontend/src/modules/onboard/components/onboard-integration-item.vue b/frontend/src/modules/onboard/components/onboard-integration-item.vue
@@ -48,7 +48,6 @@
 
         <app-integration-connect
           :integration="integration"
-          @invite-colleagues="emit('inviteColleagues')"
         >
           <template
             #default="{
@@ -105,7 +104,7 @@
 import { ref, computed } from 'vue';
 import AppIntegrationConnect from '@/modules/integration/components/integration-connect.vue';
 
-const emit = defineEmits(['allowRedirect', 'inviteColleagues']);
+const emit = defineEmits(['allowRedirect']);
 const props = defineProps({
   integration: {
     type: Object,

diff --git a/frontend/src/modules/onboard/components/onboard-sync-data-step.vue b/frontend/src/modules/onboard/components/onboard-sync-data-step.vue
@@ -18,7 +18,6 @@
         <app-onboard-integration-item
           :integration="highlightedIntegration"
           @allow-redirect="onConnect"
-          @invite-colleagues="emit('inviteColleagues')"
         />
       </div>
       <div class="panel !p-0">
@@ -58,7 +57,7 @@ import AppOnboardIntegrationItem from '@/modules/onboard/components/onboard-inte
 import { minValue } from '@vuelidate/validators';
 import useVuelidate from '@vuelidate/core';
 
-const emit = defineEmits(['allowRedirect', 'inviteColleagues']);
+const emit = defineEmits(['allowRedirect']);
 const props = defineProps({
   modelValue: {
     type: Object,

diff --git a/frontend/src/modules/onboard/config/steps/invite-colleagues.ts b/frontend/src/modules/onboard/config/steps/invite-colleagues.ts
@@ -10,13 +10,6 @@ const inviteColleagues: OnboardStepConfig = {
   name: 'Invite colleagues',
   component: AppOnboardInviteColleaguesStep,
   cta: 'Finish setup',
-  ctaTooltip: ({ activeIntegrations }) => {
-    if (!activeIntegrations) {
-      return 'To proceed, go back and click on the Sync data step to connect at least 1 integration';
-    }
-
-    return null;
-  },
   textColor: (currentStep: number) => ({
     'text-gray-400': currentStep < 3,
     'text-brand-400': currentStep > 3,

diff --git a/frontend/src/modules/onboard/config/steps/sync-data.ts b/frontend/src/modules/onboard/config/steps/sync-data.ts
@@ -5,7 +5,7 @@ const syncData: OnboardStepConfig = {
   name: 'Sync data',
   component: AppOnboardSyncDataStep,
   cta: 'Continue',
-  ctaTooltip: () => 'Connect at least 1 integration to proceed',
+  ctaTooltip: 'Connect at least 1 integration to proceed',
   submitActionInfo: 'Although you have integrations getting set up, you can proceed with the workspace setup.',
   sideInfo: [
     {

diff --git a/frontend/src/modules/onboard/pages/onboard-page.vue b/frontend/src/modules/onboard/pages/onboard-page.vue
@@ -54,7 +54,6 @@
         :is="stepConfig.component"
         v-model="form"
         @allow-redirect="onConnect"
-        @invite-colleagues="onInviteColleagues"
       />
     </main>
     <div v-if="stepConfig.sideInfo?.length" class="flex-1 pr-8 sticky top-21 h-full pt-10">
@@ -75,8 +74,8 @@
       </div>
       <el-tooltip
         placement="top"
-        :disabled="!stepConfig.ctaTooltip?.(form) || !$v.$invalid"
-        :content="stepConfig.ctaTooltip?.(form)"
+        :disabled="!stepConfig.ctaTooltip || !$v.$invalid"
+        :content="stepConfig.ctaTooltip"
       >
         <div>
           <el-button
@@ -179,6 +178,19 @@ watch(activeIntegrations, (integrations) => {
   }
 });
 
+watch(form, (updatedForm) => {
+  if (currentStep.value === 3) {
+    const parsedIntegrations = updatedForm.invitedUsers.map((u) => (u.emails.some((e) => !e) ? ({
+      ...u,
+      emails: [],
+    }) : u));
+
+    form.invitedUsers = parsedIntegrations;
+  }
+}, {
+  deep: true,
+});
+
 const $v = useVuelidate({}, form);
 
 // Steps Submit action
@@ -210,10 +222,6 @@ const onStepClick = (index: number) => {
 const onConnect = (val: boolean) => {
   allowRedirect.value = val;
 };
-
-const onInviteColleagues = () => {
-  currentStep.value = 3;
-};
 </script>
 
 <style lang="scss" scoped>

diff --git a/frontend/src/modules/onboard/types/OnboardStepsConfig.ts b/frontend/src/modules/onboard/types/OnboardStepsConfig.ts
@@ -8,14 +8,7 @@ export interface OnboardStepConfig {
     [key: string]: boolean;
   };
   cta: string;
-  ctaTooltip?: (form: {
-    tenantName: string;
-    activeIntegrations: number;
-    invitedUsers: {
-      emails: string[];
-      roles: string[];
-    }[];
-  }) => string | null;
+  ctaTooltip?: string;
   submitActionInfo?: string;
   sideInfo?: {
     icon: string;