ref(onboarding): Improve project polling mechanism

static/app/components/onboarding/useRecentCreatedProject.tsx

@@ -1,6 +1,5 @@
 import moment from 'moment-timezone';
 
-import type {Group} from 'sentry/types/group';
 import type {OnboardingRecentCreatedProject} from 'sentry/types/onboarding';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
@@ -11,15 +10,29 @@ const DEFAULT_POLL_INTERVAL_MS = 1000;
 
 type Props = {
   orgSlug: Organization['slug'];
+  pollUntilFirstEvent?: boolean;
   projectSlug?: Project['slug'];
 };
 
-// This hook will fetch the project details endpoint until a firstEvent(issue) is received
-// When the firstEvent is received it fetches the issues endpoint to find the first issue
+function isProjectActive(project: Project) {
+  const olderThanOneHour = project
+    ? moment.duration(moment().diff(project.dateCreated)).asHours() > 1
+    : false;
+  return !!(
+    project?.firstTransactionEvent ||
+    project?.hasReplays ||
+    project?.hasSessions ||
+    project?.firstEvent ||
+    olderThanOneHour
+  );
+}
+
+// This hook will fetch the project details endpoint until a firstEvent (issue) is received
 export function useRecentCreatedProject({
   orgSlug,
   projectSlug,
-}: Props): undefined | OnboardingRecentCreatedProject {
+  pollUntilFirstEvent,
+}: Props): OnboardingRecentCreatedProject {
   const {isPending: isProjectLoading, data: project} = useApiQuery<Project>(
     [`/projects/${orgSlug}/${projectSlug}/`],
     {
@@ -30,41 +43,26 @@ export function useRecentCreatedProject({
           return false;
         }
         const [projectData] = query.state.data;
-        return projectData?.firstEvent ? false : DEFAULT_POLL_INTERVAL_MS;
-      },
-    }
-  );
-
-  const firstEvent = project?.firstEvent;
 
-  const {data: issues} = useApiQuery<Group[]>(
-    [`/projects/${orgSlug}/${projectSlug}/issues/`],
-    {
-      staleTime: Infinity,
-      enabled: !!firstEvent,
+        if (pollUntilFirstEvent) {
+          return projectData.firstEvent ? false : DEFAULT_POLL_INTERVAL_MS;
+        }
+        return isProjectActive(projectData) ? false : DEFAULT_POLL_INTERVAL_MS;
+      },
     }
   );
 
-  const firstIssue =
-    !!firstEvent && issues
-      ? issues.find((issue: Group) => issue.firstSeen === firstEvent)
-      : undefined;
-
-  const olderThanOneHour = project
-    ? moment.duration(moment().diff(project.dateCreated)).asHours() > 1
-    : false;
-
   if (isProjectLoading || !project) {
-    return undefined;
+    return {
+      isProjectActive: false,
+      project: undefined,
+    };
   }
 
+  const isActive = isProjectActive(project);
+
   return {
-    ...project,
-    firstTransaction: !!project?.firstTransactionEvent,
-    hasReplays: !!project?.hasReplays,
-    hasSessions: !!project?.hasSessions,
-    firstError: !!firstEvent,
-    firstIssue,
-    olderThanOneHour,
+    project,
+    isProjectActive: isActive,
   };
 }

static/app/types/onboarding.tsx

@@ -4,7 +4,6 @@ import type {OnboardingContextProps} from 'sentry/components/onboarding/onboardi
 import type {Category} from 'sentry/components/platformPicker';
 import type {InjectedRouter} from 'sentry/types/legacyReactRouter';
 
-import type {Group} from './group';
 import type {Organization} from './organization';
 import type {PlatformIntegration, PlatformKey, Project} from './project';
 import type {AvatarUser} from './user';
@@ -141,13 +140,9 @@ export interface OnboardingSelectedSDK
   key: PlatformKey;
 }
 
-export type OnboardingRecentCreatedProject = Project & {
-  firstError: boolean;
-  firstTransaction: boolean;
-  hasReplays: boolean;
-  hasSessions: boolean;
-  olderThanOneHour: boolean;
-  firstIssue?: Group;
+export type OnboardingRecentCreatedProject = {
+  isProjectActive: boolean | undefined;
+  project: Project | undefined;
 };
 
 export type OnboardingPlatformDoc = {html: string; link: string};

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

@@ -10,9 +10,11 @@ import {IconCheckmark} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import pulsingIndicatorStyles from 'sentry/styles/pulsingIndicator';
 import {space} from 'sentry/styles/space';
-import type {OnboardingRecentCreatedProject} from 'sentry/types/onboarding';
+import type {Group} from 'sentry/types/group';
 import type {Organization} from 'sentry/types/organization';
+import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {useApiQuery} from 'sentry/utils/queryClient';
 import testableTransition from 'sentry/utils/testableTransition';
 import CreateSampleEventButton from 'sentry/views/onboarding/createSampleEventButton';
 import {useOnboardingSidebar} from 'sentry/views/onboarding/useOnboardingSidebar';
@@ -23,7 +25,7 @@ interface FirstEventFooterProps {
   isLast: boolean;
   onClickSetupLater: () => void;
   organization: Organization;
-  project: OnboardingRecentCreatedProject;
+  project: Project;
 }
 
 export default function FirstEventFooter({
@@ -34,20 +36,33 @@ export default function FirstEventFooter({
 }: FirstEventFooterProps) {
   const {activateSidebar} = useOnboardingSidebar();
 
+  const {data: issues} = useApiQuery<Group[]>(
+    [`/projects/${organization.slug}/${project.slug}/issues/`],
+    {
+      staleTime: Infinity,
+      enabled: !!project.firstEvent,
+    }
+  );
+
+  const firstIssue =
+    !!project.firstEvent && issues
+      ? issues.find((issue: Group) => issue.firstSeen === project.firstEvent)
+      : undefined;
+
   const source = 'targeted_onboarding_first_event_footer';
 
   const getSecondaryCta = useCallback(() => {
     // if hasn't sent first event, allow skiping.
     // if last, no secondary cta
-    if (!project?.firstError && !isLast) {
+    if (!project?.firstEvent && !isLast) {
       return <Button onClick={onClickSetupLater}>{t('Next Platform')}</Button>;
     }
     return null;
-  }, [project?.firstError, isLast, onClickSetupLater]);
+  }, [project?.firstEvent, isLast, onClickSetupLater]);
 
   const getPrimaryCta = useCallback(() => {
     // if hasn't sent first event, allow creation of sample error
-    if (!project?.firstError) {
+    if (!project?.firstEvent) {
       return (
         <CreateSampleEventButton
           project={project}
@@ -67,16 +82,14 @@ export default function FirstEventFooter({
           })
         }
         to={`/organizations/${organization.slug}/issues/${
-          project?.firstIssue && 'id' in project.firstIssue
-            ? `${project.firstIssue.id}/`
-            : ''
+          firstIssue && 'id' in firstIssue ? `${firstIssue.id}/` : ''
         }?referrer=onboarding-first-event-footer`}
         priority="primary"
       >
         {t('Take me to my error')}
       </LinkButton>
     );
-  }, [project, organization.slug]);
+  }, [project, organization.slug, firstIssue]);
 
   return (
     <GridFooter>
@@ -112,7 +125,7 @@ export default function FirstEventFooter({
           exit: {opacity: 0, y: 10},
         }}
       >
-        {project?.firstError ? (
+        {project?.firstEvent ? (
           <IconCheckmark isCircled color="green400" />
         ) : (
           <WaitingIndicator
@@ -121,11 +134,11 @@ export default function FirstEventFooter({
           />
         )}
         <AnimatedText
-          errorReceived={project?.firstError}
+          errorReceived={!!project?.firstEvent}
           variants={indicatorAnimation}
           transition={testableTransition()}
         >
-          {project?.firstError ? t('Error Received') : t('Waiting for error')}
+          {project?.firstEvent ? t('Error Received') : t('Waiting for error')}
         </AnimatedText>
       </StatusWrapper>
       <OnboardingButtonBar gap={2}>

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

@@ -117,13 +117,8 @@ describe('Onboarding', function () {
       .spyOn(useRecentCreatedProjectHook, 'useRecentCreatedProject')
       .mockImplementation(() => {
         return {
-          ...nextJsProject,
-          firstError: false,
-          firstTransaction: false,
-          hasReplays: false,
-          hasSessions: false,
-          olderThanOneHour: false,
-          firstIssue: undefined,
+          project: nextJsProject,
+          isProjectActive: false,
         };
       });
 
@@ -204,13 +199,8 @@ describe('Onboarding', function () {
       .spyOn(useRecentCreatedProjectHook, 'useRecentCreatedProject')
       .mockImplementation(() => {
         return {
-          ...reactProject,
-          firstError: false,
-          firstTransaction: false,
-          hasReplays: false,
-          hasSessions: false,
-          olderThanOneHour: false,
-          firstIssue: undefined,
+          project: reactProject,
+          isProjectActive: false,
         };
       });
 
@@ -301,13 +291,8 @@ describe('Onboarding', function () {
       .spyOn(useRecentCreatedProjectHook, 'useRecentCreatedProject')
       .mockImplementation(() => {
         return {
-          ...reactProject,
-          firstError: false,
-          firstTransaction: false,
-          hasReplays: false,
-          hasSessions: true,
-          olderThanOneHour: false,
-          firstIssue: undefined,
+          project: reactProject,
+          isProjectActive: true,
         };
       });
 

static/app/views/onboarding/onboarding.tsx

@@ -86,9 +86,11 @@ function Onboarding(props: Props) {
   const projectSlug =
     stepObj && stepObj.id === 'setup-docs' ? selectedProjectSlug : undefined;
 
-  const recentCreatedProject = useRecentCreatedProject({
+  const {project: recentCreatedProject, isProjectActive} = useRecentCreatedProject({
     orgSlug: organization.slug,
     projectSlug,
+    // Wait until the first event is received as we have an UI element that depends on it
+    pollUntilFirstEvent: true,
   });
 
   const cornerVariantTimeoutRed = useRef<number | undefined>(undefined);
@@ -150,18 +152,7 @@ function Onboarding(props: Props) {
   ]);
 
   const shallProjectBeDeleted =
-    stepObj?.id === 'setup-docs' &&
-    recentCreatedProject &&
-    // if the project has received a first error, we don't delete it
-    recentCreatedProject.firstError === false &&
-    // if the project has received a first transaction, we don't delete it
-    recentCreatedProject.firstTransaction === false &&
-    // if the project has replays, we don't delete it
-    recentCreatedProject.hasReplays === false &&
-    // if the project has sessions, we don't delete it
-    recentCreatedProject.hasSessions === false &&
-    // if the project is older than one hour, we don't delete it
-    recentCreatedProject.olderThanOneHour === false;
+    stepObj?.id === 'setup-docs' && defined(isProjectActive) && !isProjectActive;
 
   const cornerVariantControl = useAnimation();
   const updateCornerVariant = () => {
@@ -292,7 +283,11 @@ function Onboarding(props: Props) {
       }
 
       // from setup docs to selected platform
-      if (onboardingSteps[stepIndex]!.id === 'setup-docs' && shallProjectBeDeleted) {
+      if (
+        onboardingSteps[stepIndex]!.id === 'setup-docs' &&
+        shallProjectBeDeleted &&
+        recentCreatedProject
+      ) {
         trackAnalytics('onboarding.data_removal_modal_confirm_button_clicked', {
           organization,
           platform: recentCreatedProject.slug,

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

@@ -12,7 +12,6 @@ import {
 import {ProductSolution} from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {OnboardingContextProvider} from 'sentry/components/onboarding/onboardingContext';
 import ProjectsStore from 'sentry/stores/projectsStore';
-import type {OnboardingRecentCreatedProject} from 'sentry/types/onboarding';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import SetupDocs from 'sentry/views/onboarding/setupDocs';
@@ -85,7 +84,7 @@ describe('Onboarding Setup Docs', function () {
           genSkipOnboardingLink={() => ''}
           orgId={organization.slug}
           search=""
-          recentCreatedProject={project as OnboardingRecentCreatedProject}
+          recentCreatedProject={project}
         />
       </OnboardingContextProvider>,
       {
@@ -133,7 +132,7 @@ describe('Onboarding Setup Docs', function () {
           genSkipOnboardingLink={() => ''}
           orgId={organization.slug}
           search=""
-          recentCreatedProject={project as OnboardingRecentCreatedProject}
+          recentCreatedProject={project}
         />
       </OnboardingContextProvider>,
       {
@@ -189,7 +188,7 @@ describe('Onboarding Setup Docs', function () {
             genSkipOnboardingLink={() => ''}
             orgId={organization.slug}
             search=""
-            recentCreatedProject={project as OnboardingRecentCreatedProject}
+            recentCreatedProject={project}
           />
         </OnboardingContextProvider>,
         {
@@ -243,7 +242,7 @@ describe('Onboarding Setup Docs', function () {
             genSkipOnboardingLink={() => ''}
             orgId={organization.slug}
             search=""
-            recentCreatedProject={project as OnboardingRecentCreatedProject}
+            recentCreatedProject={project}
           />
         </OnboardingContextProvider>,
         {
@@ -293,7 +292,7 @@ describe('Onboarding Setup Docs', function () {
             genSkipOnboardingLink={() => ''}
             orgId={organization.slug}
             search=""
-            recentCreatedProject={project as OnboardingRecentCreatedProject}
+            recentCreatedProject={project}
           />
         </OnboardingContextProvider>,
         {
@@ -343,7 +342,7 @@ describe('Onboarding Setup Docs', function () {
             genSkipOnboardingLink={() => ''}
             orgId={organization.slug}
             search=""
-            recentCreatedProject={project as OnboardingRecentCreatedProject}
+            recentCreatedProject={project}
           />
         </OnboardingContextProvider>,
         {
@@ -412,7 +411,7 @@ describe('Onboarding Setup Docs', function () {
             genSkipOnboardingLink={() => ''}
             orgId={organization.slug}
             search=""
-            recentCreatedProject={project as OnboardingRecentCreatedProject}
+            recentCreatedProject={project}
           />
         </OnboardingContextProvider>,
         {
@@ -496,7 +495,7 @@ describe('Onboarding Setup Docs', function () {
             genSkipOnboardingLink={() => ''}
             orgId={organization.slug}
             search=""
-            recentCreatedProject={project as OnboardingRecentCreatedProject}
+            recentCreatedProject={project}
           />
         </OnboardingContextProvider>,
         {