feat(flags): add CTA to flag drawer

Author: aliu39

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

@@ -14,12 +14,12 @@ import FeatureFlagSort from 'sentry/components/events/featureFlags/featureFlagSo
 import {
   FlagControlOptions,
   OrderBy,
+  shouldShowFeatureFlagCTA,
   SortBy,
   sortedFlags,
 } from 'sentry/components/events/featureFlags/utils';
 import useDrawer from 'sentry/components/globalDrawer';
 import KeyValueData from 'sentry/components/keyValueData';
-import {featureFlagOnboardingPlatforms} from 'sentry/data/platformCategories';
 import {IconMegaphone, IconSearch} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
 import type {Event, FeatureFlag} from 'sentry/types/event';
@@ -219,11 +219,8 @@ 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 && shouldShowFeatureFlagCTA(organization, project)) {
+    return <FeatureFlagInlineCTA projectId={event.projectID} />;
   }
 
   const actions = (

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

@@ -1,5 +1,8 @@
 import type {KeyValueDataContentProps} from 'sentry/components/keyValueData';
+import {featureFlagOnboardingPlatforms} from 'sentry/data/platformCategories';
 import {t} from 'sentry/locale';
+import type {Organization} from 'sentry/types/organization';
+import type {Project} from 'sentry/types/project';
 
 export enum OrderBy {
   NEWEST = 'newest',
@@ -139,3 +142,11 @@ export const PROVIDER_TO_SETUP_WEBHOOK_URL: Record<WebhookProviderEnum, string>
   [WebhookProviderEnum.UNLEASH]:
     'https://docs.sentry.io/organization/integrations/feature-flag/unleash/#set-up-change-tracking',
 };
+
+export function shouldShowFeatureFlagCTA(organization: Organization, project: Project) {
+  return (
+    !project.hasFlags &&
+    featureFlagOnboardingPlatforms.includes(project.platform ?? 'other') &&
+    organization.features.includes('feature-flag-cta')
+  );
+}

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/views/issueDetails/groupFeatureFlags/flagDrawerCTA.tsx

@@ -0,0 +1,78 @@
+import styled from '@emotion/styled';
+
+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_modal_opened', {organization});
+    trackAnalytics('flags.cta_setup_button_clicked', {organization});
+    closeDrawer?.();
+    setTimeout(() => {
+      // Wait for global drawer state to update
+      activateSidebar(e);
+    }, 100);
+  }
+
+  return (
+    <BannerWrapper>
+      <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={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>
+    </BannerWrapper>
+  );
+}
+
+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 ActionButton = styled('div')`
+  display: flex;
+  gap: ${space(1)};
+`;
+
+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%
+  );
+`;

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

@@ -1,9 +1,13 @@
 import {useMemo} from 'react';
 
+import {shouldShowFeatureFlagCTA} from 'sentry/components/events/featureFlags/utils';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 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 FlagDrawerCTA from 'sentry/views/issueDetails/groupFeatureFlags/flagDrawerCTA';
 import useGroupFeatureFlags from 'sentry/views/issueDetails/groupFeatureFlags/useGroupFeatureFlags';
 import {
   Container,
@@ -61,6 +65,13 @@ 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 && shouldShowFeatureFlagCTA(organization, project)) {
+    return <FlagDrawerCTA />;
+  }
+
   return isPending ? (
     <LoadingIndicator />
   ) : isError ? (