ref(flags): add settings button to issues CTA (#87205)

Include this dropdown button in CTA to stay consistent w/other states

![Screenshot 2025-03-17 at 11 32
41 AM](https://github.com/user-attachments/assets/5fb21bc7-c575-46b2-9eef-9b5d745ef327)

Padding is preserved in has flags state
![Screenshot 2025-03-17 at 11 29
54 AM](https://github.com/user-attachments/assets/0ec5454e-0edd-4450-a645-c99b3e3f8b14)

Author: aliu39

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

@@ -3,13 +3,13 @@ import styled from '@emotion/styled';
 
 import ButtonBar from 'sentry/components/buttonBar';
 import {Button} from 'sentry/components/core/button';
-import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import {
   CardContainer,
   FeatureFlagDrawer,
 } from 'sentry/components/events/featureFlags/featureFlagDrawer';
 import FeatureFlagInlineCTA from 'sentry/components/events/featureFlags/featureFlagInlineCTA';
+import FeatureFlagSettingsButton from 'sentry/components/events/featureFlags/featureFlagSettingsButton';
 import FeatureFlagSort from 'sentry/components/events/featureFlags/featureFlagSort';
 import {
   FlagControlOptions,
@@ -20,7 +20,7 @@ import {
 import useDrawer from 'sentry/components/globalDrawer';
 import KeyValueData from 'sentry/components/keyValueData';
 import {featureFlagOnboardingPlatforms} from 'sentry/data/platformCategories';
-import {IconMegaphone, IconSearch, IconSettings} from 'sentry/icons';
+import {IconMegaphone, IconSearch} from 'sentry/icons';
 import {t, tn} from 'sentry/locale';
 import type {Event, FeatureFlag} from 'sentry/types/event';
 import {type Group, IssueCategory} from 'sentry/types/group';
@@ -229,54 +229,24 @@ export function EventFeatureFlagList({
   const actions = (
     <ButtonBar gap={1}>
       {feedbackButton}
-      <Fragment>
-        <DropdownMenu
-          position="bottom-end"
-          triggerProps={{
-            showChevron: false,
-            icon: <IconSettings />,
-            'aria-label': t('Feature Flag Settings'),
-          }}
-          size="xs"
-          items={[
-            {
-              key: 'settings',
-              label: t('Set Up Change Tracking'),
-              details: (
-                <ChangeTrackingDetails>
-                  {t(
-                    'Listen for additions, removals, and modifications to your feature flags.'
-                  )}
-                </ChangeTrackingDetails>
-              ),
-              to: `/settings/${organization.slug}/feature-flags/change-tracking/`,
-            },
-            {
-              key: 'docs',
-              label: t('Read the Docs'),
-              externalHref:
-                'https://docs.sentry.io/product/issues/issue-details/feature-flags/',
-            },
-          ]}
-        />
-        {hasFlags && (
-          <Fragment>
-            <Button
-              aria-label={t('Open Feature Flag Search')}
-              icon={<IconSearch size="xs" />}
-              size="xs"
-              title={t('Open Search')}
-              onClick={() => onViewAllFlags(FlagControlOptions.SEARCH)}
-            />
-            <FeatureFlagSort
-              orderBy={orderBy}
-              sortBy={sortBy}
-              setSortBy={setSortBy}
-              setOrderBy={setOrderBy}
-            />
-          </Fragment>
-        )}
-      </Fragment>
+      <FeatureFlagSettingsButton orgSlug={organization.slug} />
+      {hasFlags && (
+        <Fragment>
+          <Button
+            aria-label={t('Open Feature Flag Search')}
+            icon={<IconSearch size="xs" />}
+            size="xs"
+            title={t('Open Search')}
+            onClick={() => onViewAllFlags(FlagControlOptions.SEARCH)}
+          />
+          <FeatureFlagSort
+            orderBy={orderBy}
+            sortBy={sortBy}
+            setSortBy={setSortBy}
+            setOrderBy={setOrderBy}
+          />
+        </Fragment>
+      )}
     </ButtonBar>
   );
 
@@ -332,11 +302,6 @@ export function EventFeatureFlagList({
   );
 }
 
-const ChangeTrackingDetails = styled('div')`
-  max-width: 200px;
-  white-space: normal;
-`;
-
 const StyledEmptyStateWarning = styled(EmptyStateWarning)`
   border: ${p => p.theme.border} solid 1px;
   border-radius: ${p => p.theme.borderRadius};

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

@@ -4,6 +4,7 @@ import {usePrompt} from 'sentry/actionCreators/prompts';
 import ButtonBar from 'sentry/components/buttonBar';
 import {Button, LinkButton} from 'sentry/components/core/button';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import FeatureFlagSettingsButton from 'sentry/components/events/featureFlags/featureFlagSettingsButton';
 import {useFeatureFlagOnboarding} from 'sentry/components/events/featureFlags/useFeatureFlagOnboarding';
 import {IconClose, IconMegaphone} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -55,7 +56,12 @@ export default function FeatureFlagInlineCTA({projectId}: {projectId: string}) {
     return null;
   }
 
-  const actions = <ButtonBar gap={1}>{feedbackButton}</ButtonBar>;
+  const actions = (
+    <ButtonBar gap={1}>
+      {feedbackButton}
+      <FeatureFlagSettingsButton orgSlug={organization.slug} />
+    </ButtonBar>
+  );
 
   return (
     <InterimSection

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

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+
+import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import {IconSettings} from 'sentry/icons';
+import {t} from 'sentry/locale';
+
+export default function FeatureFlagSettingsButton({orgSlug}: {orgSlug: string}) {
+  return (
+    <DropdownMenu
+      position="bottom-end"
+      triggerProps={{
+        showChevron: false,
+        icon: <IconSettings />,
+        'aria-label': t('Feature Flag Settings'),
+      }}
+      size="xs"
+      items={[
+        {
+          key: 'settings',
+          label: t('Set Up Change Tracking'),
+          details: (
+            <ChangeTrackingDetails>
+              {t(
+                'Listen for additions, removals, and modifications to your feature flags.'
+              )}
+            </ChangeTrackingDetails>
+          ),
+          to: `/settings/${orgSlug}/feature-flags/change-tracking/`,
+        },
+        {
+          key: 'docs',
+          label: t('Read the Docs'),
+          externalHref:
+            'https://docs.sentry.io/product/issues/issue-details/feature-flags/',
+        },
+      ]}
+    />
+  );
+}
+
+const ChangeTrackingDetails = styled('div')`
+  max-width: 200px;
+  white-space: normal;
+`;