Success page for non direct connect (#2644)

(cherry picked from commit 94852d5)

frontend/src/app.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div class="sm:hidden md:block lg:block xl:block">
-      <lfx-header-v2 id="lfx-header" product="Community Management" />
+      <lfx-header-v2 v-if="!$route.meta.hideLfxHeader" id="lfx-header" product="Community Management" />
       <router-view v-slot="{ Component }">
         <transition>
           <component :is="Component" v-if="Component" />
@@ -71,11 +71,18 @@ export default {
 
     window.addEventListener('resize', this.handleResize);
     this.handleResize();
-    this.init();
+    const queryParameters = new URLSearchParams(window.location.search);
+    if (queryParameters.get('state') === 'noconnect' && window.location.pathname.includes('/integration')) {
+      return;
+    }
     this.listProjectGroups({
       limit: null,
       reset: true,
     });
+    if (['/auth/callback'].includes(window.location.pathname)) {
+      return;
+    }
+    this.init();
   },
 
   unmounted() {

frontend/src/modules/auth/services/auth.service.ts

@@ -1,3 +1,5 @@
+import { Auth0Service } from '@/modules/auth/services/auth0.service';
+
 class AuthServiceClass {
   setToken(token: string) {
     localStorage.setItem('jwt', token);
@@ -18,6 +20,7 @@ class AuthServiceClass {
   logout() {
     localStorage.removeItem('jwt');
     localStorage.removeItem('currentTenant');
+    Auth0Service.logout();
   }
 
   isDevmode() {

frontend/src/modules/auth/store/auth.actions.ts

@@ -12,9 +12,6 @@ import useSessionTracking from '@/shared/modules/monitoring/useSessionTracking';
 
 export default {
   init() {
-    if (window.location.pathname === '/auth/callback') {
-      return;
-    }
     Auth0Service.isAuthenticated()
       .then((isAuthenticated: boolean) => {
         if (!isAuthenticated) {

frontend/src/modules/integration/integration-routes.js

@@ -4,7 +4,10 @@ import { PermissionGuard } from '@/shared/modules/permissions/router/PermissionG
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 
 const IntegrationListPage = () => import(
-  '@/modules/integration/components/integration-list-page.vue'
+  '@/modules/integration/pages/integration-list-page.vue'
+);
+const IntegrationSuccessPage = () => import(
+  '@/modules/integration/pages/integration-success-page.vue'
 );
 
 export default [
@@ -14,7 +17,6 @@ export default [
     component: Layout,
     exact: true,
     meta: {
-      auth: true,
       title: 'Integrations',
       eventKey: PageEventKey.INTEGRATIONS,
       hideBanner: true,
@@ -25,25 +27,34 @@ export default [
         path: '/integrations',
         exact: true,
         meta: {
-          auth: true,
         },
         beforeEnter: [
-          PermissionGuard(LfPermission.integrationRead),
           (to, from, next) => {
             const segmentId = localStorage.getItem('segmentId');
             const segmentGrandparentId = localStorage.getItem('segmentGrandparentId');
+            console.log(to.query.state);
+            const state = to.query.state ?? '';
 
             // Redirect to integrations list page with correct id
-            if (segmentId && Object.keys(to.query).length) {
-              next({
-                name: 'integration',
-                params: {
-                  id: segmentId,
-                  grandparentId: segmentGrandparentId,
-                },
-                query: to.query,
-              });
-              return;
+            if (Object.keys(to.query).length) {
+              if (state === 'noconnect') {
+                next({
+                  name: 'integrationSuccess',
+                  query: to.query,
+                });
+                return;
+              }
+              if (segmentId !== 'null') {
+                next({
+                  name: 'integration',
+                  params: {
+                    id: segmentId,
+                    grandparentId: segmentGrandparentId,
+                  },
+                  query: to.query,
+                });
+                return;
+              }
             }
 
             localStorage.setItem('segmentId', null);
@@ -71,4 +82,13 @@ export default [
       },
     ],
   },
+  {
+    name: 'integrationSuccess',
+    path: '/integrations/success',
+    component: IntegrationSuccessPage,
+    exact: true,
+    meta: {
+      hideLfxHeader: true,
+    },
+  },
 ];

frontend/src/modules/integration/components/integration-list-page.vue → frontend/src/modules/integration/pages/integration-list-page.vue

@@ -92,7 +92,7 @@ import { mapGetters } from 'vuex';
 import AppLfIntegrationsPageHeader from '@/modules/lf/layout/components/lf-integrations-page-header.vue';
 import ConfirmDialog from '@/shared/dialog/confirm-dialog';
 import Message from '@/shared/message/message';
-import AppIntegrationList from './integration-list.vue';
+import AppIntegrationList from '../components/integration-list.vue';
 
 export default {
   name: 'AppIntegrationListPage',

frontend/src/modules/integration/pages/integration-success-page.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="py-10 h-screen w-full flex flex-col items-center justify-center">
+    <section class="flex justify-center items-center pb-10">
+      <div class="w-20 h-20 bg-white shadow-md rounded-full flex items-center justify-center mr-4">
+        <lf-icon name="git-repository-line" :size="40" />
+      </div>
+      <div class="flex items-center gap-2">
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+      </div>
+      <div class="px-2">
+        <lf-icon name="checkbox-circle-fill" :size="20" class="text-green-500" />
+      </div>
+      <div class="flex items-center gap-2">
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+      </div>
+      <div class="w-20 h-20 bg-white shadow-md rounded-full flex items-center justify-center ml-4">
+        <div>
+          <img alt="LFX logo" src="/images/logo/lfx.svg" />
+        </div>
+      </div>
+    </section>
+    <section class="flex flex-col items-center">
+      <h4 class="text-center pb-10">
+        LFX CM successfully installed
+      </h4>
+      <p class="text-medium text-center pb-10 max-w-148">
+        To finalize the process of connecting this GitHub organization to LFX Community Management,
+        each repository must be mapped to its corresponding sub-project.
+      </p>
+      <div class="bg-primary-50 border border-primary-100 flex items-center px-3 py-1.5 rounded-md">
+        <lf-icon name="information-line" :size="20" class="text-primary-800" />
+        <p class="ml-2 text-small text-primary-800">
+          You must have a LF account and permissions to access Community Management in order to complete this final step.
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfIntegrationSuccessPage',
+};
+</script>

frontend/src/modules/lf/segments/pages/lf-admin-panel-page.vue

@@ -53,7 +53,6 @@ import AppLfAuditLogsPage from '@/modules/lf/segments/pages/lf-audit-logs-page.v
 import LfDevmode from '@/modules/lf/segments/components/dev/devmode.vue';
 import { LfRole } from '@/shared/modules/permissions/types/Roles';
 import AppOrganizationCommonPage from '@/modules/organization/pages/organization-common-page.vue';
-// import AppOrganizationCommonPage from '@/modules/organization/pages/organization-common-page.vue';
 
 const route = useRoute();
 const router = useRouter();

frontend/tailwind.config.js

@@ -53,7 +53,8 @@ const spacing = {
   88: '22rem',
   96: '24rem',
   100: '25rem',
-  120: '30rem'
+  120: '30rem',
+  148: '37rem'
 }
 
 module.exports = {