From 1eb30138553f3daf42093549921b284a13fdd2d6 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Fri, 10 Jan 2025 14:50:53 -0800 Subject: [PATCH 1/4] ref(project): add hasFlags flag --- .../app/components/events/featureFlags/eventFeatureFlagList.tsx | 1 + static/app/types/project.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/static/app/components/events/featureFlags/eventFeatureFlagList.tsx b/static/app/components/events/featureFlags/eventFeatureFlagList.tsx index 13e84cc190047d..abdc7045e93415 100644 --- a/static/app/components/events/featureFlags/eventFeatureFlagList.tsx +++ b/static/app/components/events/featureFlags/eventFeatureFlagList.tsx @@ -126,6 +126,7 @@ export function EventFeatureFlagList({ const hasFlags = hasFlagContext && eventFlags.length > 0; const showCTA = + !project.hasFlags && !hasFlagContext && !anyEventHasContext && featureFlagOnboardingPlatforms.includes(project.platform ?? 'other') && diff --git a/static/app/types/project.tsx b/static/app/types/project.tsx index 0381bb57ddfb58..cf95d4ed92527c 100644 --- a/static/app/types/project.tsx +++ b/static/app/types/project.tsx @@ -27,6 +27,7 @@ export type Project = { hasAccess: boolean; hasCustomMetrics: boolean; hasFeedbacks: boolean; + hasFlags: boolean; hasInsightsAppStart: boolean; hasInsightsAssets: boolean; hasInsightsCaches: boolean; From 4e4efe9e4c64c6c404f497595aa7296bdd9c3356 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Fri, 10 Jan 2025 15:02:44 -0800 Subject: [PATCH 2/4] :recycle: should show empty state --- .../eventFeatureFlagList.spec.tsx | 21 +++++++++++++++++++ .../featureFlags/eventFeatureFlagList.tsx | 4 ++-- .../events/featureFlags/testUtils.tsx | 12 ++++++++++- 3 files changed, 34 insertions(+), 3 deletions(-) diff --git a/static/app/components/events/featureFlags/eventFeatureFlagList.spec.tsx b/static/app/components/events/featureFlags/eventFeatureFlagList.spec.tsx index 0e8c82b5ccd04f..3dcba81e2fd468 100644 --- a/static/app/components/events/featureFlags/eventFeatureFlagList.spec.tsx +++ b/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( + , + { + 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']}); diff --git a/static/app/components/events/featureFlags/eventFeatureFlagList.tsx b/static/app/components/events/featureFlags/eventFeatureFlagList.tsx index abdc7045e93415..77f9777f811d1e 100644 --- a/static/app/components/events/featureFlags/eventFeatureFlagList.tsx +++ b/static/app/components/events/featureFlags/eventFeatureFlagList.tsx @@ -208,8 +208,8 @@ export function EventFeatureFlagList({ return ; } - // 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; } diff --git a/static/app/components/events/featureFlags/testUtils.tsx b/static/app/components/events/featureFlags/testUtils.tsx index 832cd223918135..c8f08891b018d8 100644 --- a/static/app/components/events/featureFlags/testUtils.tsx +++ b/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'}), }; From be304eed955b30c474cd24b34f66fb15b86da28f Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Fri, 10 Jan 2025 15:11:31 -0800 Subject: [PATCH 3/4] :recycle: rm old logic --- .../featureFlags/eventFeatureFlagList.tsx | 12 ----------- .../events/featureFlags/useIssueEvents.tsx | 21 ------------------- 2 files changed, 33 deletions(-) delete mode 100644 static/app/components/events/featureFlags/useIssueEvents.tsx diff --git a/static/app/components/events/featureFlags/eventFeatureFlagList.tsx b/static/app/components/events/featureFlags/eventFeatureFlagList.tsx index 77f9777f811d1e..39dfab5c10538e 100644 --- a/static/app/components/events/featureFlags/eventFeatureFlagList.tsx +++ b/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[] = useMemo(() => { // At runtime there's no type guarantees on the event flags. So we have to @@ -128,7 +117,6 @@ export function EventFeatureFlagList({ const showCTA = !project.hasFlags && !hasFlagContext && - !anyEventHasContext && featureFlagOnboardingPlatforms.includes(project.platform ?? 'other') && organization.features.includes('feature-flag-cta'); diff --git a/static/app/components/events/featureFlags/useIssueEvents.tsx b/static/app/components/events/featureFlags/useIssueEvents.tsx deleted file mode 100644 index b4196feaedb113..00000000000000 --- a/static/app/components/events/featureFlags/useIssueEvents.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import type {Event} from '@sentry/core'; - -import {useApiQuery} from 'sentry/utils/queryClient'; -import useOrganization from 'sentry/utils/useOrganization'; - -export default function useIssueEvents({issueId}: {issueId: string}) { - const organization = useOrganization(); - return useApiQuery( - [ - `/organizations/${organization.slug}/issues/${issueId}/events/`, - { - query: { - statsPeriod: '14d', - limit: 20, - full: true, - }, - }, - ], - {staleTime: 0} - ); -} From 45a0e39614c1df839bed61aaf1143f1c196ecfa2 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Fri, 10 Jan 2025 15:17:59 -0800 Subject: [PATCH 4/4] :art: fix fixture --- tests/js/fixtures/project.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/js/fixtures/project.ts b/tests/js/fixtures/project.ts index 01189b7ed928bb..e2d9672e44a29f 100644 --- a/tests/js/fixtures/project.ts +++ b/tests/js/fixtures/project.ts @@ -34,6 +34,7 @@ export function ProjectFixture(params: Partial = {}): Project { hasMinifiedStackTrace: false, hasProfiles: false, hasReplays: false, + hasFlags: false, hasSessions: false, hasMonitors: false, hasInsightsHttp: false,