ref(onboarding): Update A/B experiment logic for product selection (#46439)

static/app/components/onboarding/productSelection.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useCallback} from 'react';
+import {Fragment, useCallback, useEffect} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -17,10 +17,29 @@ export enum PRODUCT {
   SESSION_REPLAY = 'session-replay',
 }
 
-export function ProductSelection() {
+type Props = {
+  defaultSelectedProducts?: PRODUCT[];
+};
+
+export function ProductSelection({defaultSelectedProducts}: Props) {
   const router = useRouter();
   const products = decodeList(router.location.query.product);
 
+  useEffect(() => {
+    if (!defaultSelectedProducts) {
+      return;
+    }
+    router.push({
+      pathname: router.location.pathname,
+      query: {
+        ...router.location.query,
+        product: defaultSelectedProducts,
+      },
+    });
+    // Adding defaultSelectedProducts to the dependency array causes an max-depth error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router]);
+
   const handleClickProduct = useCallback(
     (product: PRODUCT) => {
       router.push({

static/app/views/onboarding/onboarding.tsx

@@ -10,7 +10,6 @@ import Hook from 'sentry/components/hook';
 import Link from 'sentry/components/links/link';
 import LogoSentry from 'sentry/components/logoSentry';
 import {OnboardingContext} from 'sentry/components/onboarding/onboardingContext';
-import {PRODUCT} from 'sentry/components/onboarding/productSelection';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {PlatformKey} from 'sentry/data/platformCategories';
 import {IconArrow} from 'sentry/icons';
@@ -22,7 +21,6 @@ import handleXhrErrorResponse from 'sentry/utils/handleXhrErrorResponse';
 import Redirect from 'sentry/utils/redirect';
 import testableTransition from 'sentry/utils/testableTransition';
 import useApi from 'sentry/utils/useApi';
-import {useExperiment} from 'sentry/utils/useExperiment';
 import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import PageCorners from 'sentry/views/onboarding/components/pageCorners';
@@ -83,16 +81,6 @@ function Onboarding(props: Props) {
   const onboardingContext = useContext(OnboardingContext);
   const selectedPlatforms = clientState?.selectedPlatforms || [];
   const selectedProjectSlug = selectedPlatforms[0];
-  const {
-    logExperiment: productSelectionLogExperiment,
-    experimentAssignment: productSelectionAssignment,
-  } = useExperiment('OnboardingProductSelectionExperiment', {
-    logExperimentOnMount: false,
-  });
-
-  const docsWithProductSelection = !!organization.features?.includes(
-    'onboarding-docs-with-product-selection'
-  );
 
   const {
     params: {step: stepId},
@@ -106,12 +94,6 @@ function Onboarding(props: Props) {
     };
   }, []);
 
-  useEffect(() => {
-    if (docsWithProductSelection) {
-      productSelectionLogExperiment();
-    }
-  }, [productSelectionLogExperiment, docsWithProductSelection]);
-
   const heartbeatFooter = !!organization?.features.includes(
     'onboarding-heartbeat-footer'
   );
@@ -174,30 +156,9 @@ function Onboarding(props: Props) {
         cornerVariantControl.start('none');
       }
 
-      if (
-        nextStep.id === 'setup-docs' &&
-        platforms?.[0] === 'javascript-react' &&
-        docsWithProductSelection
-      ) {
-        if (productSelectionAssignment === 'variant1') {
-          props.router.push(
-            normalizeUrl(
-              `/onboarding/${organization.slug}/${nextStep.id}/?product=${PRODUCT.PERFORMANCE_MONITORING}&product=${PRODUCT.SESSION_REPLAY}`
-            )
-          );
-          return;
-        }
-      }
       props.router.push(normalizeUrl(`/onboarding/${organization.slug}/${nextStep.id}/`));
     },
-    [
-      organization.slug,
-      onboardingSteps,
-      cornerVariantControl,
-      props.router,
-      productSelectionAssignment,
-      docsWithProductSelection,
-    ]
+    [organization.slug, onboardingSteps, cornerVariantControl, props.router]
   );
 
   const deleteProject = useCallback(

static/app/views/onboarding/setupDocs.tsx

@@ -40,25 +40,36 @@ const INCOMPLETE_DOC_FLAG = 'TODO-ADD-VERIFICATION-EXAMPLE';
 type PlatformDoc = {html: string; link: string};
 
 function OnboardingProductSelection({organization}: {organization: Organization}) {
-  const {experimentAssignment: productSelectionAssignment} = useExperiment(
-    'OnboardingProductSelectionExperiment',
-    {
-      logExperimentOnMount: false,
-    }
-  );
+  const {
+    experimentAssignment: productSelectionAssignment,
+    logExperiment: productSelectionLogExperiment,
+  } = useExperiment('OnboardingProductSelectionExperiment', {
+    logExperimentOnMount: false,
+  });
 
   const docsWithProductSelection = !!organization.features?.includes(
     'onboarding-docs-with-product-selection'
   );
 
+  useEffect(() => {
+    if (docsWithProductSelection) {
+      productSelectionLogExperiment();
+    }
+  }, [productSelectionLogExperiment, docsWithProductSelection]);
+
   if (!docsWithProductSelection) {
     return null;
   }
 
-  if (
-    productSelectionAssignment === 'variant1' ||
-    productSelectionAssignment === 'variant2'
-  ) {
+  if (productSelectionAssignment === 'variant1') {
+    return (
+      <ProductSelection
+        defaultSelectedProducts={[PRODUCT.PERFORMANCE_MONITORING, PRODUCT.SESSION_REPLAY]}
+      />
+    );
+  }
+
+  if (productSelectionAssignment === 'variant2') {
     return <ProductSelection />;
   }