Axon 144 experiment auth UI flow statsig set up

src/lib/ipc/toUI/common.ts

@@ -5,13 +5,15 @@ export enum CommonMessageType {
     OnlineStatus = 'onlineStatus',
     PMFStatus = 'pmfStatus',
     UpdateFeatureFlags = 'updateFeatureFlags',
+    UpdateExperimentValues = 'updateExperimentValues',
 }
 
 export type CommonMessage =
     | ReducerAction<CommonMessageType.Error, HostErrorMessage>
     | ReducerAction<CommonMessageType.OnlineStatus, OnlineStatusMessage>
     | ReducerAction<CommonMessageType.PMFStatus, PMFMessage>
-    | ReducerAction<CommonMessageType.UpdateFeatureFlags, UpdateFeatureFlagsMessage>;
+    | ReducerAction<CommonMessageType.UpdateFeatureFlags, UpdateFeatureFlagsMessage>
+    | ReducerAction<CommonMessageType.UpdateExperimentValues, UpdateExperimentValuesMessage>;
 
 export interface HostErrorMessage {
     reason: string;
@@ -28,3 +30,7 @@ export interface PMFMessage {
 export interface UpdateFeatureFlagsMessage {
     featureFlags: { [key: string]: boolean };
 }
+
+export interface UpdateExperimentValuesMessage {
+    experimentValues: { [key: string]: any };
+}

src/react/atlascode/onboarding/OnboardingPage.tsx

@@ -21,6 +21,7 @@ import { CommonMessageType } from 'src/lib/ipc/toUI/common';
 import { OnboardingActionType } from 'src/lib/ipc/fromUI/onboarding';
 import { JiraOnboarding } from './JiraOnboarding';
 import { BitbucketOnboarding } from './BitbucketOnboarding';
+import { Experiments } from 'src/util/featureFlags/features';
 
 const useStyles = makeStyles((theme: Theme) => ({
     root: {
@@ -61,6 +62,7 @@ export const OnboardingPage: React.FunctionComponent = () => {
     const { authDialogController, authDialogOpen, authDialogProduct, authDialogEntry } = useAuthDialog();
     const [activeStep, setActiveStep] = React.useState(0);
     const [useAuthUI, setUseAuthUI] = React.useState(false);
+    const [useAuthExperiment, setUseAuthExperiment] = React.useState(false);
     const [jiraSignInText, setJiraSignInText] = useState('Sign In to Jira Cloud');
     const [bitbucketSignInText, setBitbucketSignInText] = useState('Sign In to Bitbucket Cloud');
     const [jiraSignInFlow, setJiraSignInFlow] = useState(jiraValueSet.cloud);
@@ -72,9 +74,21 @@ export const OnboardingPage: React.FunctionComponent = () => {
             if (message.command === CommonMessageType.UpdateFeatureFlags) {
                 const featureValue = message.featureFlags[Features.EnableAuthUI];
                 setUseAuthUI(featureValue);
+            } else if (message.command === CommonMessageType.UpdateExperimentValues) {
+                let experimentValue: boolean;
+                try {
+                    experimentValue = message.experimentValues[Experiments.NewAuthUIAA] as boolean;
+                } catch {
+                    controller.postMessage({
+                        type: OnboardingActionType.Error,
+                        error: new Error(`Experiment value not found`),
+                    });
+                    experimentValue = false;
+                }
+                setUseAuthExperiment(experimentValue);
             }
         });
-    }, []);
+    }, [controller]);
     function getSteps() {
         if (useAuthUI) {
             return ['Setup Jira', 'Setup BitBucket', 'Explore'];
@@ -362,7 +376,7 @@ export const OnboardingPage: React.FunctionComponent = () => {
                                     padding: '24px',
                                 }}
                             >
-                                {useAuthUI ? authUI_v1 : oldAuthUI}
+                                {useAuthUI && useAuthExperiment ? authUI_v1 : oldAuthUI}
                             </Box>
                         </div>
                     </Container>

src/util/featureFlags/client.ts

@@ -2,7 +2,7 @@ import { AnalyticsClient } from '../../analytics-node-client/src/client.min';
 
 import FeatureGates, { FeatureGateEnvironment, Identifiers } from '@atlaskit/feature-gate-js-client';
 import { AnalyticsClientMapper, EventBuilderInterface } from './analytics';
-import { Features } from './features';
+import { ExperimentGates, Experiments, Features } from './features';
 
 export type FeatureFlagClientOptions = {
     analyticsClient: AnalyticsClient;
@@ -66,6 +66,25 @@ export class FeatureFlagClient {
         return gateValue;
     }
 
+    public static checkExperimentValue(experiment: string): any {
+        let gateValue: any;
+        const experimentGate = ExperimentGates[experiment];
+        if (FeatureGates === null) {
+            console.warn(
+                `FeatureGates: FeatureGates is not initialized. Returning default value: ${experimentGate.defaultValue}`,
+            );
+        } else {
+            console.log(ExperimentGates[experiment]);
+            gateValue = FeatureGates.getExperimentValue(
+                experimentGate.gate,
+                experimentGate.parameter,
+                experimentGate.defaultValue,
+            );
+        }
+        console.log(`ExperimentGateValue: ${experiment} -> ${gateValue}`);
+        return gateValue;
+    }
+
     public static async evaluateFeatures() {
         const featureFlags = await Promise.all(
             Object.values(Features).map(async (feature) => {
@@ -78,4 +97,16 @@ export class FeatureFlagClient {
 
         return featureFlags.reduce((acc, val) => ({ ...acc, ...val }), {});
     }
+
+    public static async evaluateExperiments() {
+        const experimentGates = await Promise.all(
+            Object.values(Experiments).map(async (experiment) => {
+                return {
+                    [experiment]: await this.checkExperimentValue(experiment),
+                };
+            }),
+        );
+
+        return experimentGates.reduce((acc, val) => ({ ...acc, ...val }), {});
+    }
 }

src/util/featureFlags/features.ts

@@ -2,3 +2,23 @@ export enum Features {
     EnableNewUriHandler = 'atlascode-enable-new-uri-handler',
     EnableAuthUI = 'atlascode-enable-auth-ui',
 }
+
+export enum Experiments {
+    NewAuthUI = 'atlascode_new_auth_ui',
+    NewAuthUIAA = 'atlascode_new_auth_ui_aa',
+}
+
+export const ExperimentGates: ExperimentGate = {
+    [Experiments.NewAuthUI]: {
+        gate: 'atlascode_new_auth_ui',
+        parameter: 'isEnabled',
+        defaultValue: false,
+    },
+    [Experiments.NewAuthUIAA]: {
+        gate: 'atlascode_new_auth_ui_aa',
+        parameter: 'isEnabled',
+        defaultValue: false,
+    },
+};
+
+type ExperimentGate = { [key: string]: { gate: string; parameter: string; defaultValue: any } };

src/webview/singleViewFactory.ts

@@ -133,9 +133,20 @@ export class SingleWebview<FD, R> implements ReactWebview<FD> {
         }
 
         // Send feature gates to the panel in a message
-        const featureFlags = await FeatureFlagClient.evaluateFeatures();
-        console.log(`FeatureGates: sending ${JSON.stringify(featureFlags)}`);
-        this.postMessage({ command: CommonMessageType.UpdateFeatureFlags, featureFlags: featureFlags });
+        this.fireFeatureGates();
+        this.fireExperimentGates();
+    }
+
+    private async fireFeatureGates() {
+        const featureGates = await FeatureFlagClient.evaluateFeatures();
+        console.log(`FeatureGates: sending ${JSON.stringify(featureGates)}`);
+        this.postMessage({ command: CommonMessageType.UpdateFeatureFlags, featureFlags: featureGates });
+    }
+
+    private async fireExperimentGates() {
+        const experimentValues = await FeatureFlagClient.evaluateExperiments();
+        console.log(`ExperimentValues: sending ${JSON.stringify(experimentValues)}`);
+        this.postMessage({ command: CommonMessageType.UpdateExperimentValues, experimentValues });
     }
 
     private onViewStateChanged(e: WebviewPanelOnDidChangeViewStateEvent) {