ref(onboarding): Move onboarding context into onboarding (#100770)

Move the onboarding context provider into the onboarding route instead
of wrapping it around the whole app.
Reduces risk of breaking things and reduces wrong issue assignments via
codeowners.

Author: ArthurKnaus

static/app/main.tsx

@@ -6,7 +6,6 @@ import {NuqsAdapter} from 'nuqs/adapters/react-router/v6';
 
 import {AppQueryClientProvider} from 'sentry/appQueryClient';
 import {FrontendVersionProvider} from 'sentry/components/frontendVersionContext';
-import {OnboardingContextProvider} from 'sentry/components/onboarding/onboardingContext';
 import {ThemeAndStyleProvider} from 'sentry/components/themeAndStyleProvider';
 import {SENTRY_RELEASE_VERSION, USE_REACT_QUERY_DEVTOOL} from 'sentry/constants';
 import {routes} from 'sentry/routes';
@@ -28,13 +27,11 @@ function Main() {
     <AppQueryClientProvider>
       <FrontendVersionProvider releaseVersion={SENTRY_RELEASE_VERSION ?? null}>
         <ThemeAndStyleProvider>
-          <OnboardingContextProvider>
-            <SentryTrackingProvider>
-              <NuqsAdapter defaultOptions={{shallow: false}}>
-                <RouterProvider router={router} />
-              </NuqsAdapter>
-            </SentryTrackingProvider>
-          </OnboardingContextProvider>
+          <SentryTrackingProvider>
+            <NuqsAdapter defaultOptions={{shallow: false}}>
+              <RouterProvider router={router} />
+            </NuqsAdapter>
+          </SentryTrackingProvider>
           {USE_REACT_QUERY_DEVTOOL && (
             <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
           )}

static/app/views/onboarding/onboarding.spec.tsx

@@ -15,7 +15,7 @@ import * as useRecentCreatedProjectHook from 'sentry/components/onboarding/useRe
 import ProjectsStore from 'sentry/stores/projectsStore';
 import TeamStore from 'sentry/stores/teamStore';
 import type {PlatformKey, Project} from 'sentry/types/project';
-import Onboarding from 'sentry/views/onboarding/onboarding';
+import {OnboardingWithoutContext} from 'sentry/views/onboarding/onboarding';
 
 describe('Onboarding', () => {
   beforeAll(() => {
@@ -39,7 +39,7 @@ describe('Onboarding', () => {
 
     render(
       <OnboardingContextProvider>
-        <Onboarding {...routerProps} />
+        <OnboardingWithoutContext {...routerProps} />
       </OnboardingContextProvider>,
       {
         organization,
@@ -62,7 +62,7 @@ describe('Onboarding', () => {
 
     render(
       <OnboardingContextProvider>
-        <Onboarding {...routerProps} />
+        <OnboardingWithoutContext {...routerProps} />
       </OnboardingContextProvider>,
       {
         organization,
@@ -139,7 +139,7 @@ describe('Onboarding', () => {
           },
         }}
       >
-        <Onboarding {...routerProps} />
+        <OnboardingWithoutContext {...routerProps} />
       </OnboardingContextProvider>,
       {
         organization,
@@ -209,7 +209,7 @@ describe('Onboarding', () => {
           },
         }}
       >
-        <Onboarding {...routerProps} />
+        <OnboardingWithoutContext {...routerProps} />
       </OnboardingContextProvider>,
       {
         organization,
@@ -243,7 +243,7 @@ describe('Onboarding', () => {
 
     render(
       <OnboardingContextProvider>
-        <Onboarding {...routerProps} />
+        <OnboardingWithoutContext {...routerProps} />
       </OnboardingContextProvider>,
       {
         organization,
@@ -319,7 +319,7 @@ describe('Onboarding', () => {
           },
         }}
       >
-        <Onboarding {...routerProps} />
+        <OnboardingWithoutContext {...routerProps} />
       </OnboardingContextProvider>,
       {
         organization,
@@ -372,7 +372,7 @@ describe('Onboarding', () => {
 
     render(
       <OnboardingContextProvider>
-        <Onboarding {...routerProps} />
+        <OnboardingWithoutContext {...routerProps} />
       </OnboardingContextProvider>,
       {
         organization,

static/app/views/onboarding/onboarding.tsx

@@ -6,7 +6,10 @@ import {Button} from 'sentry/components/core/button';
 import {Link} from 'sentry/components/core/link';
 import Hook from 'sentry/components/hook';
 import LogoSentry from 'sentry/components/logoSentry';
-import {useOnboardingContext} from 'sentry/components/onboarding/onboardingContext';
+import {
+  OnboardingContextProvider,
+  useOnboardingContext,
+} from 'sentry/components/onboarding/onboardingContext';
 import {useRecentCreatedProject} from 'sentry/components/onboarding/useRecentCreatedProject';
 import Redirect from 'sentry/components/redirect';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
@@ -61,7 +64,7 @@ export const onboardingSteps: StepDescriptor[] = [
   },
 ];
 
-function Onboarding(props: Props) {
+export function OnboardingWithoutContext(props: Props) {
   const organization = useOrganization();
   const onboardingContext = useOnboardingContext();
   const selectedProjectSlug = onboardingContext.selectedPlatform?.key;
@@ -327,6 +330,14 @@ function Onboarding(props: Props) {
   );
 }
 
+function Onboarding(props: Props) {
+  return (
+    <OnboardingContextProvider>
+      <OnboardingWithoutContext {...props} />
+    </OnboardingContextProvider>
+  );
+}
+
 const Container = styled('div')<{hasFooter: boolean}>`
   flex-grow: 1;
   display: flex;

static/app/views/projectInstall/gettingStarted.tsx

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 
 import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import {OnboardingContextProvider} from 'sentry/components/onboarding/onboardingContext';
 import Redirect from 'sentry/components/redirect';
 import allPlatforms from 'sentry/data/platforms';
 import {space} from 'sentry/styles/space';
@@ -33,22 +32,20 @@ function GettingStarted({params}: Props) {
   const currentPlatform = allPlatforms.find(p => p.id === currentPlatformKey);
 
   return (
-    <OnboardingContextProvider>
-      <GettingStartedLayout withPadding>
-        {loadingProjects ? (
-          <LoadingIndicator />
-        ) : project ? (
-          <ProjectInstallPlatform project={project} platform={currentPlatform} />
-        ) : (
-          <Redirect
-            to={makeProjectsPathname({
-              path: `/new/`,
-              organization,
-            })}
-          />
-        )}
-      </GettingStartedLayout>
-    </OnboardingContextProvider>
+    <GettingStartedLayout withPadding>
+      {loadingProjects ? (
+        <LoadingIndicator />
+      ) : project ? (
+        <ProjectInstallPlatform project={project} platform={currentPlatform} />
+      ) : (
+        <Redirect
+          to={makeProjectsPathname({
+            path: `/new/`,
+            organization,
+          })}
+        />
+      )}
+    </GettingStartedLayout>
   );
 }