New onboarding flow (#1578)

Author: joanagmaia

backend/src/api/tenant/tenantCreate.ts

@@ -16,8 +16,7 @@ export default async (req, res) => {
     {
       id: payload.id,
       name: payload.name,
-      integrationsRequired: payload.integrationsRequired.map((i) => i.toLowerCase()),
-      communitySize: payload.communitySize,
+      onboard: !!payload.onboard,
     },
     { ...req },
   )

frontend/public/images/integrations/onboard/onboard-github-preview.png

@@ -66,15 +66,6 @@ export default {
     this.handleResize();
   },
 
-  mounted() {
-    this.$router.isReady().then(() => {
-      const { ref } = this.$route.query;
-      if (ref && ref === 'eagle-eye') {
-        localStorage.setItem('onboardType', 'eagle-eye');
-      }
-    });
-  },
-
   unmounted() {
     window.removeEventListener('resize', this.handleResize);
   },

frontend/src/app.vue

@@ -7,6 +7,9 @@ export default {
   borderColor: '#E5E7EB',
   description:
     'Connect DEV to sync profile information and comments on articles.',
+  onboard: {
+    description: 'Sync profile information and comments on articles.',
+  },
   image:
     'https://cdn-icons-png.flaticon.com/512/5969/5969051.png',
   connectComponent: DevtoConnect,

frontend/src/integrations/devto/config.js

@@ -7,6 +7,9 @@ export default {
   borderColor: '#dee0fc',
   description:
     'Connect Discord to sync messages, threads, forum channels, and new joiners.',
+  onboard: {
+    description: 'Sync messages, threads, forum channels, and new joiners.',
+  },
   image:
     'https://cdn-icons-png.flaticon.com/512/5968/5968756.png',
   connectComponent: DiscordConnect,

frontend/src/integrations/discord/config.js

@@ -286,7 +286,7 @@ const rules = {
 
 const $externalResults = ref({});
 
-const $v = useVuelidate(rules, form, { $externalResults });
+const $v = useVuelidate(rules, form, { $externalResults, $stopPropagation: true });
 
 // validate method
 async function validate() {

frontend/src/integrations/discourse/components/discourse-connect-drawer.vue

@@ -8,6 +8,9 @@ export default {
   chartColor: '#FFDE92',
   description:
     'Connect Discourse to sync topics, posts, and replies from your account forums.',
+  onboard: {
+    description: 'Sync topics, posts, and replies from your account forums.',
+  },
   image: '/images/integrations/discourse.png',
   connectComponent: DiscourseConnect,
   activityDisplay: {

frontend/src/integrations/discourse/config.js

@@ -92,7 +92,7 @@ const form = reactive({
 });
 
 const { hasFormChanged, formSnapshot } = formChangeDetector(form);
-const $v = useVuelidate({}, form);
+const $v = useVuelidate({}, form, { $stopPropagation: true });
 
 const { doGitConnect } = mapActions('integration');
 const isVisible = computed({

frontend/src/integrations/git/components/git-connect-drawer.vue

@@ -9,6 +9,9 @@ export default {
   borderColor: '#FFFFFF',
   description:
     'Connect Git to sync commit activities from your repos.',
+  onboard: {
+    description: 'Sync commit activities from your repos.',
+  },
   image:
     '/images/integrations/git.png',
   connectComponent: GitConnect,

frontend/src/integrations/git/config.js

@@ -6,15 +6,17 @@
 import { computed } from 'vue';
 import config from '@/config';
 import ConfirmDialog from '@/shared/dialog/confirm-dialog';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
+const emit = defineEmits(['inviteColleagues']);
 defineProps({
   integration: {
     type: Object,
     default: () => {},
   },
 });
 
+const route = useRoute();
 const router = useRouter();
 
 // We have 3 GitHub apps: test, test-local and prod
@@ -42,9 +44,13 @@ const connect = () => {
     window.open(githubConnectUrl.value, '_self');
   }).catch((action) => {
     if (action === 'cancel') {
-      router.push({
-        name: 'settings',
-      });
+      if (route.name === 'onboard') {
+        emit('inviteColleagues');
+      } else {
+        router.push({
+          name: 'settings',
+        });
+      }
     }
   });
 };