feat(onboarding): jump to setup project (#44712)

This PR adds logic to jump from the welcome screen to instrumenting the
application after creating a default project based on the query params.
It's a follow up to this:
https://github.com/getsentry/getsentry/pull/9547

static/app/views/onboarding/index.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
 import {browserHistory, RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 import {AnimatePresence, motion, MotionProps, useAnimation} from 'framer-motion';
@@ -191,6 +191,14 @@ function Onboarding(props: Props) {
     );
   };
 
+  const jumpToSetupProject = useCallback(() => {
+    const nextStep = onboardingSteps.find(({id}) => id === 'setup-docs');
+    if (!nextStep) {
+      return;
+    }
+    browserHistory.push(normalizeUrl(`/onboarding/${organization.slug}/${nextStep.id}/`));
+  }, [onboardingSteps, organization]);
+
   if (!stepObj || stepIndex === -1) {
     return (
       <Redirect
@@ -234,6 +242,7 @@ function Onboarding(props: Props) {
                 route={props.route}
                 router={props.router}
                 location={props.location}
+                jumpToSetupProject={jumpToSetupProject}
                 {...{
                   genSkipOnboardingLink,
                 }}

static/app/views/onboarding/types.ts

@@ -14,6 +14,7 @@ export type StepProps = Pick<
 > & {
   active: boolean;
   genSkipOnboardingLink: () => React.ReactNode;
+  jumpToSetupProject: () => void;
   onComplete: () => void;
   orgId: string;
   organization: Organization;

static/app/views/onboarding/welcome.tsx

@@ -47,7 +47,11 @@ function InnerAction({title, subText, cta, src}: TextWrapperProps) {
   );
 }
 
-function TargetedOnboardingWelcome({organization, ...props}: StepProps) {
+function TargetedOnboardingWelcome({
+  organization,
+  jumpToSetupProject,
+  ...props
+}: StepProps) {
   const source = 'targeted_onboarding';
   const [clientState, setClientState] = usePersistedOnboardingState();
 
@@ -73,6 +77,14 @@ function TargetedOnboardingWelcome({organization, ...props}: StepProps) {
 
     props.onComplete();
   };
+
+  // jump to setup project if the backend set this state for us
+  useEffect(() => {
+    if (clientState?.state === 'projects_selected') {
+      jumpToSetupProject();
+    }
+  }, [clientState, jumpToSetupProject]);
+
   return (
     <FallingError>
       {({fallingError, fallCount, isFalling}) => (