ref(project): use hasFlags flag for CTA check (#83282)

use the newly implemented `hasFlags` project flag as the final layer to
determine whether the CTA should be shown.

## TLDR: the CTA only shows up if... project has never sent flags
before, `event.contexts.flags` is undefined, the platform is correct, &
the org is under the cta flag.
```
const showCTA =
    !project.hasFlags &&
    !hasFlagContext &&
    featureFlagOnboardingPlatforms.includes(project.platform ?? 'other') &&
    organization.features.includes('feature-flag-cta');
```


here are the following possible code paths (all are tested)

## `event.contexts.flags = [ ... ]` -> flag table rendered

<img width="870" alt="SCR-20250110-nkne"
src="https://github.com/user-attachments/assets/595d0e2e-8c5f-42f6-aa16-2ee5bcead68d"
/>


## `event.contexts.flags = [ ]` -> empty state
<img width="849" alt="SCR-20250110-nlkr"
src="https://github.com/user-attachments/assets/af07507e-e177-4c73-979b-4ea652eb73c2"
/>


## `event.contexts.flags = undefined` and `hasFlags = true` -> empty
state

<img width="849" alt="SCR-20250110-nlkr"
src="https://github.com/user-attachments/assets/af07507e-e177-4c73-979b-4ea652eb73c2"
/>

## `event.contexts.flags = undefined` and `hasFlags = false` and
`feature-flag-cta = true` and `platform in [javascript, python]` -> CTA
shown

<img width="846" alt="SCR-20250110-nkul"
src="https://github.com/user-attachments/assets/07e123a3-fcab-48da-acd0-62d89a9d6a6b"
/>



## `event.contexts.flags = undefined` and `feature-flag-cta = true` and
`platform !in [javascript, python]` -> section hidden

## `event.contexts.flags = undefined` and `feature-flag-cta = false` ->
section hidden


Closes getsentry/team-replay#529

Author: michellewzhang

static/app/components/events/featureFlags/eventFeatureFlagList.spec.tsx

@@ -16,6 +16,7 @@ import {
   MOCK_FLAGS,
   NO_FLAG_CONTEXT_SECTION_PROPS_CTA,
   NO_FLAG_CONTEXT_SECTION_PROPS_NO_CTA,
+  NO_FLAG_CONTEXT_WITH_FLAGS_SECTION_PROPS_NO_CTA,
 } from 'sentry/components/events/featureFlags/testUtils';
 
 // Needed to mock useVirtualizer lists.
@@ -247,6 +248,26 @@ describe('EventFeatureFlagList', function () {
     expect(screen.getByText('Feature Flags')).toBeInTheDocument();
   });
 
+  it('renders empty state if event.contexts.flags is not set but should not show cta - flags already sent', function () {
+    const org = OrganizationFixture({features: ['feature-flag-cta']});
+
+    render(
+      <EventFeatureFlagList {...NO_FLAG_CONTEXT_WITH_FLAGS_SECTION_PROPS_NO_CTA} />,
+      {
+        organization: org,
+      }
+    );
+
+    const control = screen.queryByRole('button', {name: 'Sort Flags'});
+    expect(control).not.toBeInTheDocument();
+    const search = screen.queryByRole('button', {name: 'Open Feature Flag Search'});
+    expect(search).not.toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Set Up Integration'})).toBeInTheDocument();
+    expect(
+      screen.getByText('No feature flags were found for this event')
+    ).toBeInTheDocument();
+  });
+
   it('renders nothing if event.contexts.flags is not set and should not show cta - wrong platform', async function () {
     const org = OrganizationFixture({features: ['feature-flag-cta']});
 

static/app/components/events/featureFlags/eventFeatureFlagList.tsx

@@ -11,7 +11,6 @@ import {
 import FeatureFlagInlineCTA from 'sentry/components/events/featureFlags/featureFlagInlineCTA';
 import FeatureFlagSort from 'sentry/components/events/featureFlags/featureFlagSort';
 import {useFeatureFlagOnboarding} from 'sentry/components/events/featureFlags/useFeatureFlagOnboarding';
-import useIssueEvents from 'sentry/components/events/featureFlags/useIssueEvents';
 import {
   FlagControlOptions,
   OrderBy,
@@ -79,12 +78,6 @@ export function EventFeatureFlagList({
     },
   });
 
-  const {
-    data: relatedEvents,
-    isPending: isRelatedEventsPending,
-    isError: isRelatedEventsError,
-  } = useIssueEvents({issueId: group.id});
-
   const {activateSidebarSkipConfigure} = useFeatureFlagOnboarding();
 
   const {
@@ -105,10 +98,6 @@ export function EventFeatureFlagList({
   }, [isSuspectError, isSuspectPending, suspectFlags]);
 
   const hasFlagContext = Boolean(event.contexts?.flags?.values);
-  const anyEventHasContext =
-    isRelatedEventsPending || isRelatedEventsError
-      ? false
-      : relatedEvents.filter(e => Boolean(e.contexts?.flags?.values)).length > 0;
 
   const eventFlags: Required<FeatureFlag>[] = useMemo(() => {
     // At runtime there's no type guarantees on the event flags. So we have to
@@ -126,8 +115,8 @@ export function EventFeatureFlagList({
   const hasFlags = hasFlagContext && eventFlags.length > 0;
 
   const showCTA =
+    !project.hasFlags &&
     !hasFlagContext &&
-    !anyEventHasContext &&
     featureFlagOnboardingPlatforms.includes(project.platform ?? 'other') &&
     organization.features.includes('feature-flag-cta');
 
@@ -207,8 +196,8 @@ export function EventFeatureFlagList({
     return <FeatureFlagInlineCTA projectId={event.projectID} />;
   }
 
-  // if contexts.flags is not set, hide the section
-  if (!hasFlagContext) {
+  // if contexts.flags is not set and project has not set up flags, hide the section
+  if (!hasFlagContext && !project.hasFlags) {
     return null;
   }
 

static/app/components/events/featureFlags/testUtils.tsx

@@ -57,6 +57,16 @@ export const NO_FLAG_CONTEXT_SECTION_PROPS_CTA = {
     contexts: {other: {}},
     platform: 'javascript',
   }),
-  project: ProjectFixture({platform: 'javascript'}),
+  project: ProjectFixture({platform: 'javascript', hasFlags: false}),
+  group: GroupFixture({platform: 'javascript'}),
+};
+
+export const NO_FLAG_CONTEXT_WITH_FLAGS_SECTION_PROPS_NO_CTA = {
+  event: EventFixture({
+    id: 'abc123def456ghi789jkl',
+    contexts: {other: {}},
+    platform: 'javascript',
+  }),
+  project: ProjectFixture({platform: 'javascript', hasFlags: true}),
   group: GroupFixture({platform: 'javascript'}),
 };

static/app/components/events/featureFlags/useIssueEvents.tsx

@@ -27,6 +27,7 @@ export type Project = {
   hasAccess: boolean;
   hasCustomMetrics: boolean;
   hasFeedbacks: boolean;
+  hasFlags: boolean;
   hasInsightsAppStart: boolean;
   hasInsightsAssets: boolean;
   hasInsightsCaches: boolean;

static/app/types/project.tsx

@@ -34,6 +34,7 @@ export function ProjectFixture(params: Partial<Project> = {}): Project {
     hasMinifiedStackTrace: false,
     hasProfiles: false,
     hasReplays: false,
+    hasFlags: false,
     hasSessions: false,
     hasMonitors: false,
     hasInsightsHttp: false,