Compass 23919 Onboarding flow implement custom bridge method

ui/src/components/AuthPage/index.tsx

@@ -22,6 +22,7 @@ import { useAppContext } from '../../hooks/useAppContext';
 import { IncomingWebhookSectionMessage } from '../IncomingWebhookSectionMessage';
 import { GitLabRoles } from '../../types';
 import { CopyIconWrapper, FormWrapper, ReloadButtonWrapper, SectionMessageWrapper, TokenRoleWrapper } from './styles';
+import { checkOnboardingRedirection } from '../onboarding-flow-context-helper';
 
 const buildValidationMethod = (errorType: ErrorTypes) => {
   switch (errorType) {
@@ -113,6 +114,12 @@ export const AuthPage = () => {
     });
   };
 
+  const handleOnboardingRedirectIfFailedAuth = async () => {
+    await checkOnboardingRedirection('CONFIGURATION_ERROR').catch((err) => {
+      console.error('Error checking if context is in onboarding flow:', err);
+    });
+  };
+
   const handleNavigateToConnectedPage = () => {
     navigate(`..${ApplicationState.CONNECTED}`, { replace: true });
   };
@@ -132,6 +139,7 @@ export const AuthPage = () => {
         }
       } else {
         setErrorType((errors && errors[0].errorType) || AuthErrorTypes.UNEXPECTED_ERROR);
+        await handleOnboardingRedirectIfFailedAuth();
       }
 
       setLoadingConnectGroup(false);
@@ -161,6 +169,7 @@ export const AuthPage = () => {
         handleNavigateToConnectedPage();
       } else {
         setErrorType((errors && errors[0].errorType) || AuthErrorTypes.UNEXPECTED_ERROR);
+        await handleOnboardingRedirectIfFailedAuth();
       }
 
       setLoadingConnectWebhook(false);

ui/src/components/ImportResult/index.tsx

@@ -15,6 +15,7 @@ import { useImportResult } from '../../hooks/useImportResult';
 import { CenterWrapper, SectionWrapper, TableWrapper } from '../styles';
 import { clearResult } from '../../services/invokes';
 import { ErrorTypes, ImportErrorTypes } from '../../resolverTypes';
+import { checkOnboardingRedirection } from '../onboarding-flow-context-helper';
 
 export const ImportResult: FunctionComponent = () => {
   const [error, setError] = useState<ErrorTypes | null>();
@@ -43,6 +44,23 @@ export const ImportResult: FunctionComponent = () => {
     }
   }, [failedProjects, totalProjects]);
 
+  useEffect(() => {
+    const redirectOnboarding = async () => {
+      try {
+        if (failedProjects.length > 0) {
+          await checkOnboardingRedirection('IMPORT_ERROR');
+        } else {
+          await checkOnboardingRedirection();
+        }
+      } catch (err) {
+        console.error('Error checking if context is in onboarding flow:', err);
+      }
+    };
+    redirectOnboarding().catch((e) => {
+      console.error('Error redirecting to onboarding:', e);
+    });
+  }, [failedProjects]);
+
   if (isLoading) {
     return (
       <CenterWrapper>

ui/src/components/SelectImportPage/index.tsx

@@ -19,6 +19,7 @@ import { SelectorItem } from './screens/SelectProjectsScreen/buildGroupsSelector
 import { useAppContext } from '../../hooks/useAppContext';
 import { useComponentTypes } from '../../hooks/useComponentTypes';
 import { getComponentTypeOption } from '../utils';
+import { checkOnboardingRedirection } from '../onboarding-flow-context-helper';
 import { getAvailableImportComponentTypes } from './utils';
 import { useProjects } from '../../hooks/useProjects';
 import { useTeamsForImport } from '../../hooks/useTeamsForImport';
@@ -262,6 +263,9 @@ export const SelectImportPage = () => {
   };
 
   const handleNavigateToConnectedPage = async () => {
+    await checkOnboardingRedirection('CONFIGURATION_ERROR').catch((error) => {
+      console.error('Error checking if context is in onboarding flow:', error);
+    });
     await router.navigate('/compass/components');
   };
 

ui/src/components/onboarding-flow-context-helper.ts

@@ -0,0 +1,20 @@
+import { view } from '@forge/bridge';
+import { getCallBridge } from '@forge/bridge/out/bridge';
+
+export async function isRenderingInOnboardingFlow(): Promise<boolean> {
+  try {
+    const context = await view.getContext();
+    return context.extension.renderingLocation === 'onboardingFlow';
+  } catch (error) {
+    console.error('Error fetching onboarding flow context:', error);
+    return false;
+  }
+}
+
+export async function checkOnboardingRedirection(err?: string): Promise<void> {
+  const isInOnboardingFlow = await isRenderingInOnboardingFlow();
+  if (isInOnboardingFlow) {
+    const params = err ? { error: err } : undefined;
+    await getCallBridge()('redirectOnboardingTube', params);
+  }
+}

ui/src/helpers/mockHelpers.ts

@@ -56,6 +56,7 @@ export const mockGetContext = (moduleKey: string) => {
   getContext.mockImplementation(async () => {
     return {
       moduleKey,
+      extension: {},
     };
   });
 };