feat(flags): add CTA to flag drawer (#87354)

Closes #87149, branched from
#87251
![Screenshot 2025-03-18 at 4 35
31 PM](https://github.com/user-attachments/assets/20d50902-0dcd-4b54-8b6a-00f5aa6941e2)

[Slack screen recording of
behavior](https://sentry.slack.com/archives/C07GR2V2CH4/p1742337413726239)

Also updates style for issue details inline CTA (component is shared):
![Screenshot 2025-03-20 at 2 36
30 PM](https://github.com/user-attachments/assets/03f55f1b-bd73-4d75-9c46-02e205d79295)

Adds a missing analytics definition, for an event we were emitting from
inline CTA `'flags.setup_sidebar_opened'`

---------

Co-authored-by: Michelle Zhang <[email protected]>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: 3 people

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

@@ -217,7 +217,7 @@ describe('EventFeatureFlagList', function () {
     ).toBe(document.DOCUMENT_POSITION_FOLLOWING);
   });
 
-  it('renders empty state', function () {
+  it('renders empty state if project has flags', function () {
     render(<EventFeatureFlagList {...EMPTY_STATE_SECTION_PROPS} />);
 
     const control = screen.queryByRole('button', {name: 'Sort Flags'});

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

@@ -127,8 +127,6 @@ export function EventFeatureFlagList({
       : new Set(suspectFlags.map(f => f.flag));
   }, [isSuspectError, isSuspectPending, suspectFlags]);
 
-  const hasFlagContext = Boolean(event.contexts?.flags?.values);
-
   const eventFlags: Array<Required<FeatureFlag>> = useMemo(() => {
     // At runtime there's no type guarantees on the event flags. So we have to
     // explicitly validate against SDK developer error or user-provided contexts.
@@ -218,8 +216,8 @@ export function EventFeatureFlagList({
     return null;
   }
 
-  // contexts.flags is not set and project has not ingested flags
-  if (!hasFlagContext && !project.hasFlags) {
+  // If the project has never ingested flags, either show a CTA or hide the section entirely.
+  if (!hasFlags && !project.hasFlags) {
     const showCTA =
       featureFlagOnboardingPlatforms.includes(project.platform ?? 'other') &&
       organization.features.includes('feature-flag-cta');

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

@@ -1,5 +1,8 @@
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
+import onboardingInstall from 'sentry-images/spot/onboarding-install.svg';
+
 import {usePrompt} from 'sentry/actionCreators/prompts';
 import {Button, LinkButton} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
@@ -15,8 +18,41 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {SectionKey} from 'sentry/views/issueDetails/streamline/context';
 import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
 
+export function FeatureFlagCTAContent({
+  handleSetupButtonClick,
+}: {
+  handleSetupButtonClick: (e: any) => void;
+}) {
+  return (
+    <Fragment>
+      <BannerContent>
+        <BannerTitle>{t('Set Up Feature Flags')}</BannerTitle>
+        <BannerDescription>
+          {t(
+            'Want to know which feature flags were associated with this issue? Set up your feature flag integration.'
+          )}
+        </BannerDescription>
+        <ActionButton>
+          <Button onClick={handleSetupButtonClick} priority="primary">
+            {t('Set Up Now')}
+          </Button>
+          <LinkButton
+            priority="default"
+            href="https://docs.sentry.io/product/explore/feature-flags/"
+            external
+          >
+            {t('Read More')}
+          </LinkButton>
+        </ActionButton>
+      </BannerContent>
+      <BannerIllustration src={onboardingInstall} alt={t('Install')} />
+    </Fragment>
+  );
+}
+
 export default function FeatureFlagInlineCTA({projectId}: {projectId: string}) {
   const organization = useOrganization();
+
   const {activateSidebar} = useFeatureFlagOnboarding({
     analyticsSurface: 'issue_details.flags_section',
   });
@@ -70,26 +106,7 @@ export default function FeatureFlagInlineCTA({projectId}: {projectId: string}) {
       actions={actions}
     >
       <BannerWrapper>
-        <div>
-          <BannerTitle>{t('Set Up Feature Flags')}</BannerTitle>
-          <BannerDescription>
-            {t(
-              'Want to know which feature flags were associated with this error? Set up your feature flag integration.'
-            )}
-          </BannerDescription>
-          <ActionButton>
-            <Button onClick={activateSidebar} priority="primary">
-              {t('Set Up Now')}
-            </Button>
-            <LinkButton
-              priority="default"
-              href="https://docs.sentry.io/product/explore/feature-flags/"
-              external
-            >
-              {t('Read More')}
-            </LinkButton>
-          </ActionButton>
-        </div>
+        <FeatureFlagCTAContent handleSetupButtonClick={activateSidebar} />
         <CloseDropdownMenu
           position="bottom-end"
           triggerProps={{
@@ -128,6 +145,11 @@ export default function FeatureFlagInlineCTA({projectId}: {projectId: string}) {
   );
 }
 
+const ActionButton = styled('div')`
+  display: flex;
+  gap: ${space(1)};
+`;
+
 const BannerTitle = styled('div')`
   font-size: ${p => p.theme.fontSizeExtraLarge};
   margin-bottom: ${space(1)};
@@ -139,31 +161,46 @@ const BannerDescription = styled('div')`
   max-width: 340px;
 `;
 
-const CloseDropdownMenu = styled(DropdownMenu)`
-  position: absolute;
-  display: block;
-  top: ${space(1)};
-  right: ${space(1)};
-  color: ${p => p.theme.white};
-  cursor: pointer;
-  z-index: 1;
+const BannerContent = styled('div')`
+  padding: ${space(2)};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 `;
 
-const ActionButton = styled('div')`
-  display: flex;
-  gap: ${space(1)};
+const BannerIllustration = styled('img')`
+  height: 100%;
+  object-fit: contain;
+  max-width: 30%;
+  margin-right: 10px;
+  margin-bottom: -${space(2)};
+  padding: ${space(2)};
 `;
 
-const BannerWrapper = styled('div')`
+export const BannerWrapper = styled('div')`
   position: relative;
   border: 1px solid ${p => p.theme.border};
   border-radius: ${p => p.theme.borderRadius};
-  padding: ${space(2)};
   margin: ${space(1)} 0;
   background: linear-gradient(
     90deg,
     ${p => p.theme.backgroundSecondary}00 0%,
     ${p => p.theme.backgroundSecondary}FF 70%,
     ${p => p.theme.backgroundSecondary}FF 100%
   );
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: ${space(1)};
+`;
+
+const CloseDropdownMenu = styled(DropdownMenu)`
+  position: absolute;
+  display: block;
+  top: ${space(1)};
+  right: ${space(1)};
+  color: ${p => p.theme.white};
+  cursor: pointer;
+  z-index: 1;
 `;

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

@@ -150,7 +150,7 @@ export const EMPTY_STATE_SECTION_PROPS = {
     id: 'abc123def456ghi789jkl',
     contexts: {flags: {values: []}},
   }),
-  project: ProjectFixture(),
+  project: ProjectFixture({hasFlags: true}),
   group: GroupFixture(),
 };
 

static/app/components/globalDrawer/components.tsx

@@ -19,7 +19,7 @@ const DrawerContentContext = createContext<DrawerContentContextType>({
   ariaLabel: 'slide out drawer',
 });
 
-function useDrawerContentContext() {
+export function useDrawerContentContext() {
   return useContext(DrawerContentContext);
 }
 

static/app/utils/analytics/featureFlagAnalyticsEvents.tsx

@@ -11,6 +11,9 @@ export type FeatureFlagEventParameters = {
     direction: 'next' | 'prev';
     surface: 'settings' | 'flag_drawer';
   };
+  'flags.setup_sidebar_opened': {
+    surface: 'issue_details.flags_section' | 'issue_details.flags_drawer';
+  };
   'flags.sort_flags': {sortMethod: string};
   'flags.table_rendered': {
     numFlags: number;
@@ -33,4 +36,5 @@ export const featureFlagEventMap: Record<FeatureFlagEventKey, string | null> = {
   'flags.cta_dismissed': 'Flag CTA Dismissed',
   'flags.logs-paginated': 'Feature Flag Logs Paginated',
   'flags.view-setup-sidebar': 'Viewed Feature Flag Onboarding Sidebar',
+  'flags.setup_sidebar_opened': 'Feature Flag Setup Sidebar Opened',
 };

static/app/views/issueDetails/groupFeatureFlags/flagDrawerCTA.tsx

@@ -0,0 +1,27 @@
+import {
+  BannerWrapper,
+  FeatureFlagCTAContent,
+} from 'sentry/components/events/featureFlags/featureFlagInlineCTA';
+import {useFeatureFlagOnboarding} from 'sentry/components/events/featureFlags/useFeatureFlagOnboarding';
+import {useDrawerContentContext} from 'sentry/components/globalDrawer/components';
+
+export default function FlagDrawerCTA() {
+  const {activateSidebar} = useFeatureFlagOnboarding({
+    analyticsSurface: 'issue_details.flags_drawer',
+  });
+  const {onClose: closeDrawer} = useDrawerContentContext();
+
+  function handleSetupButtonClick(e: any) {
+    closeDrawer?.();
+    setTimeout(() => {
+      // Wait for global drawer state to update
+      activateSidebar(e);
+    }, 100);
+  }
+
+  return (
+    <BannerWrapper>
+      <FeatureFlagCTAContent handleSetupButtonClick={handleSetupButtonClick} />
+    </BannerWrapper>
+  );
+}