feat(flags): add CTA to flag drawer

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

@@ -219,11 +219,13 @@ export function EventFeatureFlagList({
   }
 
   // contexts.flags is not set and project has not ingested flags
-  if (!hasFlagContext && !project.hasFlags) {
-    const showCTA =
-      featureFlagOnboardingPlatforms.includes(project.platform ?? 'other') &&
-      organization.features.includes('feature-flag-cta');
-    return showCTA ? <FeatureFlagInlineCTA projectId={event.projectID} /> : null;
+  if (
+    !hasFlagContext &&
+    !project.hasFlags &&
+    featureFlagOnboardingPlatforms.includes(project.platform ?? 'other') &&
+    organization.features.includes('feature-flag-cta')
+  ) {
+    return <FeatureFlagInlineCTA projectId={event.projectID} />;
   }
 
   const actions = (

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

@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import onboardingInstall from 'sentry-images/spot/onboarding-install.svg';
+
 import {usePrompt} from 'sentry/actionCreators/prompts';
 import ButtonBar from 'sentry/components/buttonBar';
 import {Button, LinkButton} from 'sentry/components/core/button';
@@ -20,7 +22,10 @@ export default function FeatureFlagInlineCTA({projectId}: {projectId: string}) {
   const {activateSidebar} = useFeatureFlagOnboarding();
 
   function handleSetupButtonClick(e: any) {
-    trackAnalytics('flags.setup_modal_opened', {organization});
+    trackAnalytics('flags.setup_sidebar_opened', {
+      organization,
+      surface: 'issue_details.flags_section',
+    });
     trackAnalytics('flags.cta_setup_button_clicked', {organization});
     activateSidebar(e);
   }
@@ -74,7 +79,7 @@ export default function FeatureFlagInlineCTA({projectId}: {projectId: string}) {
       actions={actions}
     >
       <BannerWrapper>
-        <div>
+        <BannerContent>
           <BannerTitle>{t('Set Up Feature Flags')}</BannerTitle>
           <BannerDescription>
             {t(
@@ -93,7 +98,7 @@ export default function FeatureFlagInlineCTA({projectId}: {projectId: string}) {
               {t('Read More')}
             </LinkButton>
           </ActionButton>
-        </div>
+        </BannerContent>
         <CloseDropdownMenu
           position="bottom-end"
           triggerProps={{
@@ -127,6 +132,7 @@ export default function FeatureFlagInlineCTA({projectId}: {projectId: string}) {
             },
           ]}
         />
+        <BannerIllustration src={onboardingInstall} alt="Install" />
       </BannerWrapper>
     </InterimSection>
   );
@@ -143,6 +149,22 @@ const BannerDescription = styled('div')`
   max-width: 340px;
 `;
 
+const BannerContent = styled('div')`
+  padding: ${space(2)};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const BannerIllustration = styled('img')`
+  height: 100%;
+  object-fit: contain;
+  max-width: 30%;
+  margin-right: 10px;
+  margin-bottom: -${space(2)};
+  padding: ${space(2)};
+`;
+
 const CloseDropdownMenu = styled(DropdownMenu)`
   position: absolute;
   display: block;
@@ -170,4 +192,9 @@ const BannerWrapper = styled('div')`
     ${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)};
 `;

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

@@ -10,6 +10,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;
@@ -31,4 +34,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,107 @@
+import styled from '@emotion/styled';
+
+import onboardingInstall from 'sentry-images/spot/onboarding-install.svg';
+
+import {Button, LinkButton} from 'sentry/components/core/button';
+import {useFeatureFlagOnboarding} from 'sentry/components/events/featureFlags/useFeatureFlagOnboarding';
+import {useDrawerContentContext} from 'sentry/components/globalDrawer/components';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import {trackAnalytics} from 'sentry/utils/analytics';
+import useOrganization from 'sentry/utils/useOrganization';
+
+export default function FlagDrawerCTA() {
+  const organization = useOrganization();
+  const {activateSidebar} = useFeatureFlagOnboarding();
+  const {onClose: closeDrawer} = useDrawerContentContext();
+
+  function handleSetupButtonClick(e: any) {
+    trackAnalytics('flags.setup_sidebar_opened', {
+      organization,
+      surface: 'issue_details.flags_drawer',
+    });
+    trackAnalytics('flags.cta_setup_button_clicked', {organization});
+    closeDrawer?.();
+    setTimeout(() => {
+      // Wait for global drawer state to update
+      activateSidebar(e);
+    }, 100);
+  }
+
+  return (
+    <BannerWrapper>
+      <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="Install" />
+    </BannerWrapper>
+  );
+}
+
+const ActionButton = styled('div')`
+  display: flex;
+  gap: ${space(1)};
+`;
+
+const BannerTitle = styled('div')`
+  font-size: ${p => p.theme.fontSizeExtraLarge};
+  margin-bottom: ${space(1)};
+  font-weight: ${p => p.theme.fontWeightBold};
+`;
+
+const BannerDescription = styled('div')`
+  margin-bottom: ${space(1.5)};
+  max-width: 340px;
+`;
+
+const BannerContent = styled('div')`
+  padding: ${space(2)};
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+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')`
+  position: relative;
+  border: 1px solid ${p => p.theme.border};
+  border-radius: ${p => p.theme.borderRadius};
+  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)};
+`;

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

@@ -2,9 +2,13 @@ import {useMemo} from 'react';
 
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {featureFlagOnboardingPlatforms} from 'sentry/data/platformCategories';
 import {t} from 'sentry/locale';
 import type {Group} from 'sentry/types/group';
+import useOrganization from 'sentry/utils/useOrganization';
+import useProjectFromSlug from 'sentry/utils/useProjectFromSlug';
 import FlagDetailsLink from 'sentry/views/issueDetails/groupFeatureFlags/flagDetailsLink';
+import FlagDrawerCTA from 'sentry/views/issueDetails/groupFeatureFlags/flagDrawerCTA';
 import useGroupFeatureFlags from 'sentry/views/issueDetails/groupFeatureFlags/useGroupFeatureFlags';
 import {
   Container,
@@ -61,6 +65,18 @@ export default function GroupFeatureFlagsDrawerContent({
     return searchedTags;
   }, [data, search, tagValues]);
 
+  const organization = useOrganization();
+  const project = useProjectFromSlug({organization, projectSlug: group.project?.slug});
+
+  if (
+    data.length === 0 &&
+    project &&
+    !project.hasFlags &&
+    featureFlagOnboardingPlatforms.includes(project.platform ?? 'other')
+  ) {
+    return <FlagDrawerCTA />;
+  }
+
   return isPending ? (
     <LoadingIndicator />
   ) : isError ? (