[AXON 401] Onboarding quick pick experiment implementation (#423)

* AXON-400: init spike implementation

* AXON-400: do cloud login

* AXON-400 init server login

* [AXON-400] some fixes for tests

rebase

* AXON-400: add analytics and support going back func during server login process

* AXON-400: cleaning up + adding utils file

rebase

* AXON-400: add exp

* AXON-400: add view flow event

* AXON-400: reset flow when starting

* AXON-400: better error handling + fix bb remote auth

* AXON-400: add UT

* AXON-400: more utils + UT

* AXON-400: refactor for better readability + more UTs

* AXON-400: more updates

* AXON-400: cleanup duped code

* AXON-400: changelog

* AXON-400 update content

* AXON-400: fix type

* AXON-400: hide modal after completion

Author: cabella-dot

CHANGELOG.md

@@ -396,6 +396,11 @@
                 "command": "atlascode.disableHelpExplorer",
                 "title": "Disable Help Explorer",
                 "category": "Atlassian"
+            },
+            {
+                "command": "atlascode.showOnboardingFlow",
+                "title": "Show Onboarding Flow",
+                "category": "Atlassian"
             }
         ],
         "viewsContainers": {

package.json

@@ -76,9 +76,18 @@ export async function featureChangeEvent(featureId: string, enabled: boolean): P
     return trackEvent(action, 'feature', { actionSubjectId: featureId });
 }
 
-export async function authenticatedEvent(site: DetailedSiteInfo, isOnboarding?: boolean): Promise<TrackEvent> {
+export async function authenticatedEvent(
+    site: DetailedSiteInfo,
+    isOnboarding?: boolean,
+    source?: string,
+): Promise<TrackEvent> {
     return instanceTrackEvent(site, 'authenticated', 'atlascode', {
-        attributes: { machineId: Container.machineId, hostProduct: site.product.name, onboarding: isOnboarding },
+        attributes: {
+            machineId: Container.machineId,
+            hostProduct: site.product.name,
+            onboarding: isOnboarding,
+            authSource: source,
+        },
     });
 }
 
@@ -503,6 +512,7 @@ export async function authenticateButtonEvent(
     isCloud: boolean,
     isRemote: boolean,
     isWebUI: boolean,
+    isSkipped: boolean = false,
 ): Promise<UIEvent> {
     const e = {
         tenantIdType: null,
@@ -518,6 +528,7 @@ export async function authenticateButtonEvent(
                 hostProduct: site.product.name,
                 isRemote: isRemote,
                 isWebUI: isWebUI,
+                isSkipped: isSkipped,
             },
         },
     };

src/analytics.ts

@@ -115,7 +115,7 @@ describe('LoginManager', () => {
             await loginManager.userInitiatedOAuthLogin(site, 'callback');
 
             expect(oauthDancer.doDance).toHaveBeenCalledWith(provider, site, 'callback');
-            expect(loginManager['saveDetails']).toHaveBeenCalledWith(provider, site, resp, undefined);
+            expect(loginManager['saveDetails']).toHaveBeenCalledWith(provider, site, resp, undefined, undefined);
         });
     });
 

src/atlclients/loginManager.test.ts

@@ -45,14 +45,19 @@ export class LoginManager {
     }
 
     // this is *only* called when login buttons are clicked by the user
-    public async userInitiatedOAuthLogin(site: SiteInfo, callback: string, isOnboarding?: boolean): Promise<void> {
+    public async userInitiatedOAuthLogin(
+        site: SiteInfo,
+        callback: string,
+        isOnboarding?: boolean,
+        source?: string,
+    ): Promise<void> {
         const provider = oauthProviderForSite(site);
         if (!provider) {
             throw new Error(`No provider found for ${site.host}`);
         }
 
         const resp = await this._dancer.doDance(provider, site, callback);
-        await this.saveDetails(provider, site, resp, isOnboarding);
+        await this.saveDetails(provider, site, resp, isOnboarding, source);
     }
 
     public async initRemoteAuth(state: Object) {
@@ -72,7 +77,13 @@ export class LoginManager {
         await this.saveDetails(provider, site, resp, false);
     }
 
-    private async saveDetails(provider: OAuthProvider, site: SiteInfo, resp: OAuthResponse, isOnboarding?: boolean) {
+    private async saveDetails(
+        provider: OAuthProvider,
+        site: SiteInfo,
+        resp: OAuthResponse,
+        isOnboarding?: boolean,
+        source?: string,
+    ) {
         try {
             const oauthInfo: OAuthInfo = {
                 access: resp.access,
@@ -95,7 +106,7 @@ export class LoginManager {
                 siteDetails.map(async (siteInfo) => {
                     await this._credentialManager.saveAuthInfo(siteInfo, oauthInfo);
                     this._siteManager.addSites([siteInfo]);
-                    authenticatedEvent(siteInfo, isOnboarding).then((e) => {
+                    authenticatedEvent(siteInfo, isOnboarding, source).then((e) => {
                         this._analyticsClient.sendTrackEvent(e);
                     });
                 }),
@@ -122,12 +133,17 @@ export class LoginManager {
         return [];
     }
 
-    public async userInitiatedServerLogin(site: SiteInfo, authInfo: AuthInfo, isOnboarding?: boolean): Promise<void> {
+    public async userInitiatedServerLogin(
+        site: SiteInfo,
+        authInfo: AuthInfo,
+        isOnboarding?: boolean,
+        source?: string,
+    ): Promise<void> {
         if (isBasicAuthInfo(authInfo) || isPATAuthInfo(authInfo)) {
             try {
                 const siteDetails = await this.saveDetailsForSite(site, authInfo);
 
-                authenticatedEvent(siteDetails, isOnboarding).then((e) => {
+                authenticatedEvent(siteDetails, isOnboarding, source).then((e) => {
                     this._analyticsClient.sendTrackEvent(e);
                 });
             } catch (err) {

src/atlclients/loginManager.ts

@@ -91,6 +91,7 @@ export enum Commands {
     ToDoIssue = 'atlascode.jira.todoIssue',
     InProgressIssue = 'atlascode.jira.inProgressIssue',
     DoneIssue = 'atlascode.jira.doneIssue',
+    ShowOnboardingFlow = 'atlascode.showOnboardingFlow',
 }
 
 export function registerCommands(vscodeContext: ExtensionContext) {
@@ -235,5 +236,6 @@ export function registerCommands(vscodeContext: ExtensionContext) {
         commands.registerCommand(Commands.BitbucketOpenPullRequest, (data: { pullRequestUrl: string }) => {
             Container.openPullRequestHandler(data.pullRequestUrl);
         }),
+        commands.registerCommand(Commands.ShowOnboardingFlow, () => Container.onboardingProvider.start()),
     );
 }

src/commands.ts

@@ -27,6 +27,7 @@ import { SectionChangeMessage } from './lib/ipc/toUI/config';
 import { StartWorkIssueMessage } from './lib/ipc/toUI/startWork';
 import { CommonActionMessageHandler } from './lib/webview/controller/common/commonActionMessageHandler';
 import { Logger } from './logger';
+import OnboardingProvider from './onboarding/onboardingProvider';
 import { Pipeline } from './pipelines/model';
 import { SiteManager } from './siteManager';
 import { AtlascodeUriHandler, ONBOARDING_URL, SETTINGS_URL } from './uriHandler';
@@ -195,6 +196,8 @@ export class Container {
         SearchJiraHelper.initialize();
         context.subscriptions.push(new CustomJQLViewProvider());
         context.subscriptions.push((this._assignedWorkItemsView = new AssignedWorkItemsViewProvider()));
+
+        this._onboardingProvider = new OnboardingProvider();
     }
 
     static focus() {
@@ -391,4 +394,9 @@ export class Container {
     public static get pmfStats() {
         return this._pmfStats;
     }
+
+    private static _onboardingProvider: OnboardingProvider;
+    public static get onboardingProvider() {
+        return this._onboardingProvider;
+    }
 }

src/container.ts

@@ -23,7 +23,7 @@ import {
 } from './pipelines/yaml/pipelinesYamlHelper';
 import { registerResources } from './resources';
 import { GitExtension } from './typings/git';
-import { FeatureFlagClient, Features } from './util/featureFlags';
+import { Experiments, FeatureFlagClient, Features } from './util/featureFlags';
 import { NotificationManagerImpl } from './views/notifications/notificationManager';
 
 const AnalyticDelay = 5000;
@@ -72,7 +72,12 @@ export async function activate(context: ExtensionContext) {
 
     // new user for auth exp
     if (previousVersion === undefined) {
-        showOnboardingPage();
+        const expVal = FeatureFlagClient.checkExperimentValue(Experiments.AtlascodeOnboardingExperiment);
+        if (expVal) {
+            commands.executeCommand(Commands.ShowOnboardingFlow);
+        } else {
+            commands.executeCommand(Commands.ShowOnboardingPage);
+        }
     } else {
         showWelcomePage(atlascodeVersion, previousVersion);
     }
@@ -188,10 +193,6 @@ async function sendAnalytics(version: string, globalState: Memento) {
     });
 }
 
-function showOnboardingPage() {
-    commands.executeCommand(Commands.ShowOnboardingPage);
-}
-
 // this method is called when your extension is deactivated
 export function deactivate() {
     unregisterErrorReporting();

src/extension.ts

@@ -0,0 +1,178 @@
+// @ts-nocheck
+
+jest.mock('vscode', () => {
+    return {
+        window: {
+            showErrorMessage: jest.fn(),
+        },
+        commands: {
+            executeCommand: jest.fn(),
+        },
+        env: {
+            remoteName: undefined,
+            uiKind: 1,
+            openExternal: jest.fn(),
+        },
+        ThemeIcon: jest.fn((id: string) => ({ id })),
+        QuickInputButtons: {
+            Back: { iconPath: 'back', tooltip: 'Back' },
+        },
+        Uri: {
+            parse: jest.fn((url: string) => ({ url })),
+        },
+        Disposable: jest.fn(),
+        UIKind: {
+            Desktop: 1,
+            Web: 2,
+            Remote: 3,
+        },
+    };
+});
+
+jest.mock('../commands', () => ({
+    Commands: {
+        RefreshAssignedWorkItemsExplorer: 'RefreshAssignedWorkItemsExplorer',
+        RefreshCustomJqlExplorer: 'RefreshCustomJqlExplorer',
+        BitbucketRefreshPullRequests: 'BitbucketRefreshPullRequests',
+        RefreshPipelines: 'RefreshPipelines',
+    },
+}));
+
+jest.mock('../uriHandler/atlascodeUriHandler', () => ({
+    AtlascodeUriHandler: jest.fn(),
+}));
+
+import { window } from 'vscode';
+
+import { ProductJira } from '../atlclients/authInfo';
+import { Container } from '../container';
+import { EXTENSION_URL } from '../uriHandler/atlascodeUriHandler';
+import OnboardingProvider from './onboardingProvider';
+import { OnboardingStep } from './utils';
+
+jest.mock('../container', () => ({
+    Container: {
+        analyticsClient: {
+            sendScreenEvent: jest.fn(),
+            sendUIEvent: jest.fn(),
+            sendTrackEvent: jest.fn(),
+        },
+        loginManager: {
+            userInitiatedOAuthLogin: jest.fn(() => Promise.resolve()),
+            userInitiatedServerLogin: jest.fn(() => Promise.resolve()),
+        },
+        focus: jest.fn(),
+    },
+}));
+
+jest.mock('../analytics', () => ({
+    authenticateButtonEvent: jest.fn(() => Promise.resolve({})),
+    errorEvent: jest.fn(() => Promise.resolve({})),
+    viewScreenEvent: jest.fn((id) => Promise.resolve(id)),
+}));
+
+jest.mock('./utils', () => ({
+    OnboardingStep: {
+        Jira: 1,
+        Bitbucket: 2,
+    },
+    onboardingQuickPickItems: jest.fn(),
+}));
+
+jest.mock('./onboardingQuickPickManager', () => {
+    return {
+        default: jest.fn().mockImplementation(() => ({
+            show: jest.fn(),
+            hide: jest.fn(),
+            setBusy: jest.fn(),
+        })),
+    };
+});
+
+jest.mock('./onboardingQuickInputManager', () => {
+    return {
+        default: jest.fn().mockImplementation(() => ({
+            start: jest.fn(),
+        })),
+    };
+});
+
+describe('OnboardingProvider', () => {
+    let provider: OnboardingProvider;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        provider = new OnboardingProvider();
+    });
+
+    it('should initialize with correct objects', () => {
+        expect(provider).toBeDefined();
+        expect(provider._analyticsClient).toBeDefined();
+        expect(provider._jiraQuickPickManager).toBeDefined();
+        expect(provider._bitbucketQuickPickManager).toBeDefined();
+        expect(provider._quickInputManager).toBeDefined();
+    });
+
+    it('should show Jira onboarding quick pick on start', () => {
+        provider.start();
+
+        expect(Container.focus).toHaveBeenCalled();
+        expect(provider._jiraQuickPickManager.show).toHaveBeenCalled();
+    });
+
+    it('should handle Jira quick pick accept for cloud', async () => {
+        const item = { onboardingId: 'onboarding:cloud' };
+        const showSpy = jest.spyOn(provider, '_handleCloud');
+
+        await provider._quickPickOnDidAccept(item, ProductJira);
+
+        expect(showSpy).toHaveBeenCalledWith(ProductJira);
+    });
+
+    it('should handle Jira quick pick accept for server', async () => {
+        const item = { onboardingId: 'onboarding:server' };
+
+        await provider._quickPickOnDidAccept(item, ProductJira);
+
+        expect(provider._quickInputManager.start).toHaveBeenCalledWith(ProductJira, 'Server');
+    });
+
+    it('should handle Jira quick pick accept for skip', async () => {
+        const item = { onboardingId: 'onboarding:skip' };
+        const skipSpy = jest.spyOn(provider, '_handleSkip');
+        await provider._quickPickOnDidAccept(item, ProductJira);
+
+        expect(skipSpy).toHaveBeenCalledWith(ProductJira);
+    });
+
+    it('should envoke userInitiatedOAuthLogin on Jira cloud onboarding', async () => {
+        const item = { onboardingId: 'onboarding:cloud' };
+        const siteInfo = { product: ProductJira, host: 'atlassian.net' };
+        const nextSpy = jest.spyOn(provider, '_handleNext');
+        await provider._quickPickOnDidAccept(item, ProductJira);
+
+        expect(Container.loginManager.userInitiatedOAuthLogin).toHaveBeenCalledWith(
+            siteInfo,
+            EXTENSION_URL,
+            true,
+            'atlascodeOnboardingQuickPick',
+        );
+        expect(nextSpy).toHaveBeenCalledWith(OnboardingStep.Jira);
+    });
+
+    it('should handle error during Jira cloud onboarding', async () => {
+        const item = { onboardingId: 'onboarding:cloud' };
+        const error = new Error('Test error');
+        jest.spyOn(Container.loginManager, 'userInitiatedOAuthLogin').mockRejectedValue(error);
+
+        const returnMessage = 'Failed to authenticate with Jira Cloud: Test error';
+
+        const errorSpy = jest.spyOn(provider, '_handleError');
+
+        provider._quickPickOnDidAccept(item, ProductJira);
+
+        await new Promise(process.nextTick);
+        expect(errorSpy).toHaveBeenCalledWith(returnMessage, Error(returnMessage));
+        expect(window.showErrorMessage).toHaveBeenCalledWith(returnMessage);
+    });
+});