ref(onboarding): Prepare OnboardingContext for upcoming changes (#47977)

static/app/components/onboarding/footer.spec.tsx

@@ -10,7 +10,7 @@ import {
 import {Footer} from 'sentry/components/onboarding/footer';
 import {OnboardingContextProvider} from 'sentry/components/onboarding/onboardingContext';
 import {PersistedStoreProvider} from 'sentry/stores/persistedStore';
-import {OnboardingStatus} from 'sentry/types';
+import {OnboardingProjectStatus} from 'sentry/types';
 import * as useSessionStorage from 'sentry/utils/useSessionStorage';
 
 describe('Onboarding Footer', function () {
@@ -68,10 +68,12 @@ describe('Onboarding Footer', function () {
     // Mock useSessionStorage hook to return the mocked session data
     jest.spyOn(useSessionStorage, 'useSessionStorage').mockImplementation(() => [
       {
-        [project.id]: {
-          status: OnboardingStatus.PROCESSING,
-          firstIssueId: '1',
-          slug: project.slug,
+        projects: {
+          [project.id]: {
+            status: OnboardingProjectStatus.PROCESSING,
+            firstIssueId: '1',
+            slug: project.slug,
+          },
         },
       },
       jest.fn(),
@@ -118,10 +120,12 @@ describe('Onboarding Footer', function () {
     // Mock useSessionStorage hook to return the mocked session data
     jest.spyOn(useSessionStorage, 'useSessionStorage').mockImplementation(() => [
       {
-        [project.id]: {
-          status: OnboardingStatus.PROCESSED,
-          firstIssueId: '1',
-          slug: project.slug,
+        projects: {
+          [project.id]: {
+            status: OnboardingProjectStatus.PROCESSED,
+            firstIssueId: '1',
+            slug: project.slug,
+          },
         },
       },
       jest.fn(),

static/app/components/onboarding/footer.tsx

@@ -14,7 +14,7 @@ import {t} from 'sentry/locale';
 import PreferencesStore from 'sentry/stores/preferencesStore';
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {space} from 'sentry/styles/space';
-import {Group, OnboardingStatus, Project} from 'sentry/types';
+import {Group, OnboardingProjectStatus, Project} from 'sentry/types';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -23,7 +23,7 @@ import GenericFooter from 'sentry/views/onboarding/components/genericFooter';
 import {usePersistedOnboardingState} from 'sentry/views/onboarding/utils';
 
 export type OnboardingState = {
-  status: OnboardingStatus;
+  status: OnboardingProjectStatus;
   firstIssueId?: string;
 };
 
@@ -69,14 +69,16 @@ export function Footer({projectSlug, projectId, router, newOrg}: Props) {
   const [clientState, setClientState] = usePersistedOnboardingState();
   const {projects} = useProjects();
   const onboardingContext = useContext(OnboardingContext);
-  const projectData = projectId ? onboardingContext.data[projectId] : undefined;
+  const projectData = projectId ? onboardingContext.data.projects[projectId] : undefined;
   const selectedProject = projects.find(project => project.slug === projectSlug);
 
   useApiQuery<Project>([`/projects/${organization.slug}/${projectSlug}/`], {
     staleTime: 0,
     refetchInterval: DEFAULT_POLL_INTERVAL,
     enabled:
-      !!projectSlug && !firstError && projectData?.status === OnboardingStatus.WAITING, // Fetch only if the project is available and we have not yet received an error,
+      !!projectSlug &&
+      !firstError &&
+      projectData?.status === OnboardingProjectStatus.WAITING, // Fetch only if the project is available and we have not yet received an error,
     onSuccess: data => {
       setFirstError(data.firstEvent);
     },
@@ -89,7 +91,9 @@ export function Footer({projectSlug, projectId, router, newOrg}: Props) {
   useApiQuery<Group[]>([`/projects/${organization.slug}/${projectSlug}/issues/`], {
     staleTime: 0,
     enabled:
-      !!firstError && !firstIssue && projectData?.status === OnboardingStatus.PROCESSING, // Only fetch if an error event is received and we have not yet located the first issue,
+      !!firstError &&
+      !firstIssue &&
+      projectData?.status === OnboardingProjectStatus.PROCESSING, // Only fetch if an error event is received and we have not yet located the first issue,
     onSuccess: data => {
       setFirstIssue(data.find((issue: Group) => issue.firstSeen === firstError));
     },
@@ -100,10 +104,10 @@ export function Footer({projectSlug, projectId, router, newOrg}: Props) {
       return;
     }
 
-    onboardingContext.setProjectData({
-      projectId,
-      projectSlug,
-      status: OnboardingStatus.WAITING,
+    onboardingContext.setProject({
+      id: projectId,
+      slug: projectSlug,
+      status: OnboardingProjectStatus.WAITING,
     });
   }, [projectData, onboardingContext, projectSlug, projectId]);
 
@@ -116,7 +120,7 @@ export function Footer({projectSlug, projectId, router, newOrg}: Props) {
       return;
     }
 
-    if (projectData?.status !== OnboardingStatus.WAITING) {
+    if (projectData?.status !== OnboardingProjectStatus.WAITING) {
       return;
     }
 
@@ -127,10 +131,10 @@ export function Footer({projectSlug, projectId, router, newOrg}: Props) {
       platform: selectedProject?.platform ?? 'other',
     });
 
-    onboardingContext.setProjectData({
-      projectId,
-      projectSlug,
-      status: OnboardingStatus.PROCESSING,
+    onboardingContext.setProject({
+      id: projectId,
+      slug: projectSlug,
+      status: OnboardingProjectStatus.PROCESSING,
     });
 
     addSuccessMessage(t('First error received'));
@@ -154,7 +158,7 @@ export function Footer({projectSlug, projectId, router, newOrg}: Props) {
       return;
     }
 
-    if (projectData?.status !== OnboardingStatus.PROCESSING) {
+    if (projectData?.status !== OnboardingProjectStatus.PROCESSING) {
       return;
     }
 
@@ -165,10 +169,10 @@ export function Footer({projectSlug, projectId, router, newOrg}: Props) {
       platform: selectedProject?.platform ?? 'other',
     });
 
-    onboardingContext.setProjectData({
-      projectId,
-      projectSlug,
-      status: OnboardingStatus.PROCESSED,
+    onboardingContext.setProject({
+      id: projectId,
+      slug: projectSlug,
+      status: OnboardingProjectStatus.PROCESSED,
       firstIssueId: firstIssue.id,
     });
 
@@ -190,7 +194,10 @@ export function Footer({projectSlug, projectId, router, newOrg}: Props) {
       return;
     }
 
-    if (onboardingContext.data[projectId].status === OnboardingStatus.WAITING) {
+    if (
+      onboardingContext.data.projects[projectId].status ===
+      OnboardingProjectStatus.WAITING
+    ) {
       return;
     }
 
@@ -226,7 +233,10 @@ export function Footer({projectSlug, projectId, router, newOrg}: Props) {
       return;
     }
 
-    if (onboardingContext.data[projectId].status !== OnboardingStatus.WAITING) {
+    if (
+      onboardingContext.data.projects[projectId].status !==
+      OnboardingProjectStatus.WAITING
+    ) {
       return;
     }
 
@@ -282,7 +292,7 @@ export function Footer({projectSlug, projectId, router, newOrg}: Props) {
 
     router.push({
       ...router.location,
-      pathname: `/organizations/${organization.slug}/issues/${onboardingContext.data[projectId].firstIssueId}/?referrer=onboarding-first-event-footer`,
+      pathname: `/organizations/${organization.slug}/issues/${onboardingContext.data.projects[projectId].firstIssueId}/?referrer=onboarding-first-event-footer`,
     });
   }, [
     organization,
@@ -298,19 +308,19 @@ export function Footer({projectSlug, projectId, router, newOrg}: Props) {
   return (
     <Wrapper newOrg={!!newOrg} sidebarCollapsed={!!preferences.collapsed}>
       <Column>
-        {projectData?.status === OnboardingStatus.WAITING && newOrg && (
+        {projectData?.status === OnboardingProjectStatus.WAITING && newOrg && (
           <Button onClick={handleSkipOnboarding} priority="link">
             {t('Skip Onboarding')}
           </Button>
         )}
       </Column>
       <StatusesColumn>
-        {projectData?.status === OnboardingStatus.WAITING ? (
+        {projectData?.status === OnboardingProjectStatus.WAITING ? (
           <WaitingForErrorStatus>
             <IconCircle size="sm" />
             {t('Waiting for error')}
           </WaitingForErrorStatus>
-        ) : projectData?.status === OnboardingStatus.PROCESSED ? (
+        ) : projectData?.status === OnboardingProjectStatus.PROCESSED ? (
           <ErrorProcessedStatus>
             <IconCheckmark isCircled size="sm" color="green300" />
             {t('Error Processed!')}
@@ -323,17 +333,17 @@ export function Footer({projectSlug, projectId, router, newOrg}: Props) {
         )}
       </StatusesColumn>
       <ActionsColumn>
-        {projectData?.status === OnboardingStatus.PROCESSED ? (
+        {projectData?.status === OnboardingProjectStatus.PROCESSED ? (
           <Button priority="primary" onClick={handleViewError}>
             {t('View Error')}
           </Button>
         ) : (
           <Button
             priority="primary"
-            disabled={projectData?.status === OnboardingStatus.WAITING}
+            disabled={projectData?.status === OnboardingProjectStatus.WAITING}
             onClick={handleExploreSentry}
             title={
-              projectData?.status === OnboardingStatus.WAITING
+              projectData?.status === OnboardingProjectStatus.WAITING
                 ? t('Waiting for error')
                 : undefined
             }

static/app/components/onboarding/footerWithViewSampleErrorButton.tsx

@@ -14,7 +14,7 @@ import {t} from 'sentry/locale';
 import PreferencesStore from 'sentry/stores/preferencesStore';
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {space} from 'sentry/styles/space';
-import {Group, OnboardingStatus, Project} from 'sentry/types';
+import {Group, OnboardingProjectStatus, Project} from 'sentry/types';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -24,7 +24,7 @@ import CreateSampleEventButton from 'sentry/views/onboarding/createSampleEventBu
 import {usePersistedOnboardingState} from 'sentry/views/onboarding/utils';
 
 export type OnboardingState = {
-  status: OnboardingStatus;
+  status: OnboardingProjectStatus;
   firstIssueId?: string;
 };
 
@@ -75,14 +75,16 @@ export function FooterWithViewSampleErrorButton({
   const [clientState, setClientState] = usePersistedOnboardingState();
   const {projects} = useProjects();
   const onboardingContext = useContext(OnboardingContext);
-  const projectData = projectId ? onboardingContext.data[projectId] : undefined;
+  const projectData = projectId ? onboardingContext.data.projects[projectId] : undefined;
   const selectedProject = projects.find(project => project.slug === projectSlug);
 
   useApiQuery<Project>([`/projects/${organization.slug}/${projectSlug}/`], {
     staleTime: 0,
     refetchInterval: DEFAULT_POLL_INTERVAL,
     enabled:
-      !!projectSlug && !firstError && projectData?.status === OnboardingStatus.WAITING, // Fetch only if the project is available and we have not yet received an error,
+      !!projectSlug &&
+      !firstError &&
+      projectData?.status === OnboardingProjectStatus.WAITING, // Fetch only if the project is available and we have not yet received an error,
     onSuccess: data => {
       setFirstError(data.firstEvent);
     },
@@ -95,7 +97,9 @@ export function FooterWithViewSampleErrorButton({
   useApiQuery<Group[]>([`/projects/${organization.slug}/${projectSlug}/issues/`], {
     staleTime: 0,
     enabled:
-      !!firstError && !firstIssue && projectData?.status === OnboardingStatus.PROCESSING, // Only fetch if an error event is received and we have not yet located the first issue,
+      !!firstError &&
+      !firstIssue &&
+      projectData?.status === OnboardingProjectStatus.PROCESSING, // Only fetch if an error event is received and we have not yet located the first issue,
     onSuccess: data => {
       setFirstIssue(data.find((issue: Group) => issue.firstSeen === firstError));
     },
@@ -106,10 +110,10 @@ export function FooterWithViewSampleErrorButton({
       return;
     }
 
-    onboardingContext.setProjectData({
-      projectId,
-      projectSlug,
-      status: OnboardingStatus.WAITING,
+    onboardingContext.setProject({
+      id: projectId,
+      slug: projectSlug,
+      status: OnboardingProjectStatus.WAITING,
     });
   }, [projectData, onboardingContext, projectSlug, projectId]);
 
@@ -122,7 +126,7 @@ export function FooterWithViewSampleErrorButton({
       return;
     }
 
-    if (projectData?.status !== OnboardingStatus.WAITING) {
+    if (projectData?.status !== OnboardingProjectStatus.WAITING) {
       return;
     }
 
@@ -133,10 +137,10 @@ export function FooterWithViewSampleErrorButton({
       platform: selectedProject?.platform ?? 'other',
     });
 
-    onboardingContext.setProjectData({
-      projectId,
-      projectSlug,
-      status: OnboardingStatus.PROCESSING,
+    onboardingContext.setProject({
+      id: projectId,
+      slug: projectSlug,
+      status: OnboardingProjectStatus.PROCESSING,
     });
 
     addSuccessMessage(t('First error received'));
@@ -160,7 +164,7 @@ export function FooterWithViewSampleErrorButton({
       return;
     }
 
-    if (projectData?.status !== OnboardingStatus.PROCESSING) {
+    if (projectData?.status !== OnboardingProjectStatus.PROCESSING) {
       return;
     }
 
@@ -171,11 +175,11 @@ export function FooterWithViewSampleErrorButton({
       platform: selectedProject?.platform ?? 'other',
     });
 
-    onboardingContext.setProjectData({
-      projectId,
-      projectSlug,
-      status: OnboardingStatus.PROCESSED,
+    onboardingContext.setProject({
+      id: projectId,
+      slug: projectSlug,
       firstIssueId: firstIssue.id,
+      status: OnboardingProjectStatus.PROCESSED,
     });
 
     addSuccessMessage(t('First error processed'));
@@ -195,7 +199,10 @@ export function FooterWithViewSampleErrorButton({
       return;
     }
 
-    if (onboardingContext.data[projectId].status !== OnboardingStatus.WAITING) {
+    if (
+      onboardingContext.data.projects[projectId].status !==
+      OnboardingProjectStatus.WAITING
+    ) {
       return;
     }
 
@@ -251,7 +258,7 @@ export function FooterWithViewSampleErrorButton({
 
     router.push({
       ...router.location,
-      pathname: `/organizations/${organization.slug}/issues/${onboardingContext.data[projectId].firstIssueId}/?referrer=onboarding-first-event-footer`,
+      pathname: `/organizations/${organization.slug}/issues/${onboardingContext.data.projects[projectId].firstIssueId}/?referrer=onboarding-first-event-footer`,
     });
   }, [
     organization,
@@ -267,19 +274,19 @@ export function FooterWithViewSampleErrorButton({
   return (
     <Wrapper newOrg={!!newOrg} sidebarCollapsed={!!preferences.collapsed}>
       <Column>
-        {projectData?.status === OnboardingStatus.WAITING && newOrg && (
+        {projectData?.status === OnboardingProjectStatus.WAITING && newOrg && (
           <Button onClick={handleSkipOnboarding} priority="link">
             {t('Skip Onboarding')}
           </Button>
         )}
       </Column>
       <StatusesColumn>
-        {projectData?.status === OnboardingStatus.WAITING ? (
+        {projectData?.status === OnboardingProjectStatus.WAITING ? (
           <WaitingForErrorStatus>
             <IconCircle size="sm" />
             {t('Waiting for error')}
           </WaitingForErrorStatus>
-        ) : projectData?.status === OnboardingStatus.PROCESSED ? (
+        ) : projectData?.status === OnboardingProjectStatus.PROCESSED ? (
           <ErrorProcessedStatus>
             <IconCheckmark isCircled size="sm" color="green300" />
             {t('Error Processed!')}
@@ -292,7 +299,7 @@ export function FooterWithViewSampleErrorButton({
         )}
       </StatusesColumn>
       <ActionsColumn>
-        {projectData?.status === OnboardingStatus.PROCESSED ? (
+        {projectData?.status === OnboardingProjectStatus.PROCESSED ? (
           <Button priority="primary" onClick={handleViewError}>
             {t('View Error')}
           </Button>

static/app/components/onboarding/frameworkSuggestionModal.tsx

@@ -18,7 +18,7 @@ import categoryList from 'sentry/data/platformCategories';
 import platforms from 'sentry/data/platforms';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
-import {OnboardingSelectedPlatform, Organization} from 'sentry/types';
+import {OnboardingSelectedSDK, Organization} from 'sentry/types';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import TextBlock from 'sentry/views/settings/components/text/textBlock';
 
@@ -50,10 +50,10 @@ export const languageDetails = {
 };
 
 type Props = ModalRenderProps & {
-  onConfigure: (selectedFramework: OnboardingSelectedPlatform) => void;
+  onConfigure: (selectedFramework: OnboardingSelectedSDK) => void;
   onSkip: () => void;
   organization: Organization;
-  selectedPlatform: OnboardingSelectedPlatform;
+  selectedPlatform: OnboardingSelectedSDK;
 };
 
 export function FrameworkSuggestionModal({
@@ -67,7 +67,7 @@ export function FrameworkSuggestionModal({
   organization,
 }: Props) {
   const [selectedFramework, setSelectedFramework] = useState<
-    OnboardingSelectedPlatform | undefined
+    OnboardingSelectedSDK | undefined
   >(undefined);
 
   const frameworks = platforms.filter(

static/app/components/onboarding/onboardingContext.tsx

@@ -1,30 +1,34 @@
 import {createContext, useCallback} from 'react';
 
-import {OnboardingStatus} from 'sentry/types';
+import {OnboardingProjectStatus, OnboardingSelectedSDK} from 'sentry/types';
 import {useSessionStorage} from 'sentry/utils/useSessionStorage';
 
-type Data = Record<
-  string,
-  {
-    slug: string;
-    status: OnboardingStatus;
-    firstIssueId?: string;
-  }
->;
+type Project = {
+  slug: string;
+  status: OnboardingProjectStatus;
+  firstIssueId?: string;
+};
+
+type Data = {
+  projects: Record<string, Project>;
+  selectedSDK?: OnboardingSelectedSDK;
+};
 
 export type OnboardingContextProps = {
   data: Data;
-  setProjectData: (props: {
-    projectId: string;
-    projectSlug: string;
-    status: OnboardingStatus;
-    firstIssueId?: string;
-  }) => void;
+  removeProject: (id: string) => void;
+  setProject: (props: Project & {id: string}) => void;
+  setSelectedSDK: (props: Data['selectedSDK']) => void;
 };
 
 export const OnboardingContext = createContext<OnboardingContextProps>({
-  setProjectData: () => {},
-  data: {},
+  setProject: () => {},
+  setSelectedSDK: () => {},
+  removeProject: () => {},
+  data: {
+    projects: {},
+    selectedSDK: undefined,
+  },
 });
 
 type ProviderProps = {
@@ -32,34 +36,64 @@ type ProviderProps = {
 };
 
 export function OnboardingContextProvider({children}: ProviderProps) {
-  const [sessionStorage, setSessionStorage] = useSessionStorage<Data>('onboarding', {});
+  const [sessionStorage, setSessionStorage] = useSessionStorage<Data>('onboarding', {
+    projects: {},
+    selectedSDK: undefined,
+  });
+
+  const setSelectedSDK = useCallback(
+    (selectedSDK: Data['selectedSDK']) => {
+      setSessionStorage({
+        ...sessionStorage,
+        selectedSDK,
+      });
+    },
+    [setSessionStorage, sessionStorage]
+  );
 
-  const setProjectData = useCallback(
-    ({
-      projectId,
-      projectSlug,
-      status,
-      firstIssueId,
-    }: {
-      projectId: string;
-      projectSlug: string;
-      status: OnboardingStatus;
-      firstIssueId?: string;
-    }) => {
+  const setProject = useCallback(
+    (props: Project & {id: string}) => {
       setSessionStorage({
         ...sessionStorage,
-        [projectId]: {
-          status,
-          firstIssueId,
-          slug: projectSlug,
+        projects: {
+          ...sessionStorage.projects,
+          [props.id]: {
+            status: props.status,
+            firstIssueId: props.firstIssueId,
+            slug: props.slug,
+          },
         },
       });
     },
     [setSessionStorage, sessionStorage]
   );
 
+  const removeProject = useCallback(
+    (id: string) => {
+      const newProjects = Object.keys(sessionStorage.projects).reduce((acc, key) => {
+        if (key !== id) {
+          acc[key] = sessionStorage.projects[key];
+        }
+        return acc;
+      }, {});
+
+      setSessionStorage({
+        ...sessionStorage,
+        projects: newProjects,
+      });
+    },
+    [setSessionStorage, sessionStorage]
+  );
+
   return (
-    <OnboardingContext.Provider value={{data: sessionStorage, setProjectData}}>
+    <OnboardingContext.Provider
+      value={{
+        data: sessionStorage,
+        setProject,
+        removeProject,
+        setSelectedSDK,
+      }}
+    >
       {children}
     </OnboardingContext.Provider>
   );

static/app/types/onboarding.tsx

@@ -129,13 +129,13 @@ interface OnboardingTaskWithExternal
 
 export type OnboardingTask = OnboardingTaskWithAction | OnboardingTaskWithExternal;
 
-export enum OnboardingStatus {
+export enum OnboardingProjectStatus {
   WAITING = 'waiting',
   PROCESSING = 'processing',
   PROCESSED = 'processed',
 }
 
-export type OnboardingSelectedPlatform = {
+export type OnboardingSelectedSDK = {
   category: Category;
   key: PlatformKey;
   language: PlatformIntegration['language'];

static/app/views/onboarding/components/createProjectsFooter.tsx

@@ -16,7 +16,7 @@ import {SUPPORTED_LANGUAGES} from 'sentry/components/onboarding/frameworkSuggest
 import {t} from 'sentry/locale';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import {space} from 'sentry/styles/space';
-import {OnboardingSelectedPlatform, Organization} from 'sentry/types';
+import {OnboardingSelectedSDK, Organization} from 'sentry/types';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import testableTransition from 'sentry/utils/testableTransition';
 import useApi from 'sentry/utils/useApi';
@@ -31,9 +31,9 @@ import GenericFooter from './genericFooter';
 type Props = {
   clearPlatform: () => void;
   genSkipOnboardingLink: () => React.ReactNode;
-  onComplete: (selectedPlatform: OnboardingSelectedPlatform) => void;
+  onComplete: (selectedPlatform: OnboardingSelectedSDK) => void;
   organization: Organization;
-  selectedPlatform?: OnboardingSelectedPlatform;
+  selectedPlatform?: OnboardingSelectedSDK;
 };
 
 export function CreateProjectsFooter({
@@ -53,7 +53,7 @@ export function CreateProjectsFooter({
   const {projects} = useProjects();
 
   const createPlatformProject = useCallback(
-    async (selectedFramework?: OnboardingSelectedPlatform) => {
+    async (selectedFramework?: OnboardingSelectedSDK) => {
       if (!clientState || !selectedPlatform) {
         // Do nothing if client state is not loaded yet.
         return;

static/app/views/onboarding/components/firstEventFooter.tsx

@@ -1,16 +1,15 @@
-import {Fragment, useContext, useEffect} from 'react';
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 import {motion, Variants} from 'framer-motion';
 
 import {Button} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import Link from 'sentry/components/links/link';
-import {OnboardingContext} from 'sentry/components/onboarding/onboardingContext';
 import {IconCheckmark} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import pulsingIndicatorStyles from 'sentry/styles/pulsingIndicator';
 import {space} from 'sentry/styles/space';
-import {Group, OnboardingStatus, Organization, Project} from 'sentry/types';
+import {Group, Organization, Project} from 'sentry/types';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import EventWaiter from 'sentry/utils/eventWaiter';
 import testableTransition from 'sentry/utils/testableTransition';
@@ -39,23 +38,6 @@ export default function FirstEventFooter({
 }: FirstEventFooterProps) {
   const source = 'targeted_onboarding_first_event_footer';
   const [clientState, setClientState] = usePersistedOnboardingState();
-  const onboardingContext = useContext(OnboardingContext);
-
-  useEffect(() => {
-    if (!project.slug) {
-      return;
-    }
-
-    if (onboardingContext.data[project.id]?.status === OnboardingStatus.WAITING) {
-      return;
-    }
-
-    onboardingContext.setProjectData({
-      projectId: project.id,
-      projectSlug: project.slug,
-      status: OnboardingStatus.WAITING,
-    });
-  }, [project.id, project.slug, onboardingContext]);
 
   const getSecondaryCta = () => {
     // if hasn't sent first event, allow skiping.

static/app/views/onboarding/index.tsx

@@ -4,12 +4,7 @@ import {OnboardingContextProvider} from 'sentry/components/onboarding/onboarding
 
 import Onboarding from './onboarding';
 
-type Props = RouteComponentProps<
-  {
-    step: string;
-  },
-  {}
->;
+type Props = RouteComponentProps<{step: string}, {}>;
 
 export default function OnboardingContainer(props: Props) {
   return (

static/app/views/onboarding/onboarding.tsx

@@ -14,7 +14,7 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {IconArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {OnboardingSelectedPlatform, OnboardingStatus} from 'sentry/types';
+import {OnboardingProjectStatus, OnboardingSelectedSDK} from 'sentry/types';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import handleXhrErrorResponse from 'sentry/utils/handleXhrErrorResponse';
 import Redirect from 'sentry/utils/redirect';
@@ -128,7 +128,7 @@ function Onboarding(props: Props) {
   };
 
   const goNextStep = useCallback(
-    (step: StepDescriptor, platform?: OnboardingSelectedPlatform) => {
+    (step: StepDescriptor, platform?: OnboardingSelectedSDK) => {
       const currentStepIndex = onboardingSteps.findIndex(s => s.id === step.id);
       const nextStep = onboardingSteps[currentStepIndex + 1];
 
@@ -194,11 +194,13 @@ function Onboarding(props: Props) {
       // so we silently delete the last created project
       // if the user didn't send an first error yet.
 
-      const projectShallBeRemoved = !Object.keys(onboardingContext.data).some(
+      const projectShallBeRemoved = !Object.keys(onboardingContext.data.projects).some(
         key =>
-          onboardingContext.data[key].slug === selectedProjectSlug &&
-          (onboardingContext.data[key].status === OnboardingStatus.PROCESSING ||
-            onboardingContext.data[key].status === OnboardingStatus.PROCESSED)
+          onboardingContext.data.projects[key].slug === selectedProjectSlug &&
+          (onboardingContext.data.projects[key].status ===
+            OnboardingProjectStatus.PROCESSING ||
+            onboardingContext.data.projects[key].status ===
+              OnboardingProjectStatus.PROCESSED)
       );
 
       let platformToProjectIdMap = clientState?.platformToProjectIdMap ?? {};