ref(nav): use topbar slot for headeractions

static/app/components/profiling/continuousProfileHeader.tsx

@@ -13,6 +13,8 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import {generateLinkToEventInTraceView} from 'sentry/utils/discover/urls';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
+import {TopBar} from 'sentry/views/navigation/topBar';
+import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 
 interface ContinuousProfileHeader {
   transaction: Event | null;
@@ -21,6 +23,7 @@ interface ContinuousProfileHeader {
 export function ContinuousProfileHeader({transaction}: ContinuousProfileHeader) {
   const location = useLocation();
   const organization = useOrganization();
+  const hasPageFrameFeature = useHasPageFrameFeature();
 
   // @TODO add breadcrumbs when other views are implemented
   const breadCrumbs = useMemo((): ProfilingBreadcrumbsProps['trails'] => {
@@ -50,14 +53,24 @@ export function ContinuousProfileHeader({transaction}: ContinuousProfileHeader)
           <ProfilingBreadcrumbs organization={organization} trails={breadCrumbs} />
         </SmallerProfilingBreadcrumbsWrapper>
       </SmallerHeaderContent>
-      <StyledHeaderActions>
-        <FeedbackButton />
-        {transactionTarget && (
-          <LinkButton size="sm" onClick={handleGoToTransaction} to={transactionTarget}>
-            {t('Go to Trace')}
-          </LinkButton>
-        )}
-      </StyledHeaderActions>
+      {hasPageFrameFeature ? (
+        <TopBar.Slot name="actions">
+          {transactionTarget && (
+            <LinkButton onClick={handleGoToTransaction} to={transactionTarget}>
+              {t('Go to Trace')}
+            </LinkButton>
+          )}
+        </TopBar.Slot>
+      ) : (
+        <StyledHeaderActions>
+          <FeedbackButton />
+          {transactionTarget && (
+            <LinkButton size="sm" onClick={handleGoToTransaction} to={transactionTarget}>
+              {t('Go to Trace')}
+            </LinkButton>
+          )}
+        </StyledHeaderActions>
+      )}
     </SmallerLayoutHeader>
   );
 }

static/app/components/profiling/profileHeader.tsx

@@ -13,6 +13,8 @@ import {generateLinkToEventInTraceView} from 'sentry/utils/discover/urls';
 import {isSchema, isSentrySampledProfile} from 'sentry/utils/profiling/guards/profile';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useOrganization} from 'sentry/utils/useOrganization';
+import {TopBar} from 'sentry/views/navigation/topBar';
+import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 import {useProfiles} from 'sentry/views/profiling/profilesProvider';
 
 function getTransactionName(input: Profiling.ProfileInput): string {
@@ -36,6 +38,7 @@ function ProfileHeader({transaction, projectId, eventId}: ProfileHeaderProps) {
   const location = useLocation();
   const organization = useOrganization();
   const profiles = useProfiles();
+  const hasPageFrameFeature = useHasPageFrameFeature();
 
   const transactionName =
     profiles.type === 'resolved' ? getTransactionName(profiles.data) : '';
@@ -88,14 +91,24 @@ function ProfileHeader({transaction, projectId, eventId}: ProfileHeaderProps) {
           <ProfilingBreadcrumbs organization={organization} trails={breadcrumbTrails} />
         </SmallerProfilingBreadcrumbsWrapper>
       </SmallerHeaderContent>
-      <StyledHeaderActions>
-        <FeedbackButton />
-        {transactionTarget && (
-          <LinkButton size="sm" onClick={handleGoToTransaction} to={transactionTarget}>
-            {t('Go to Trace')}
-          </LinkButton>
-        )}
-      </StyledHeaderActions>
+      {hasPageFrameFeature ? (
+        <TopBar.Slot name="actions">
+          {transactionTarget && (
+            <LinkButton onClick={handleGoToTransaction} to={transactionTarget}>
+              {t('Go to Trace')}
+            </LinkButton>
+          )}
+        </TopBar.Slot>
+      ) : (
+        <StyledHeaderActions>
+          <FeedbackButton />
+          {transactionTarget && (
+            <LinkButton size="sm" onClick={handleGoToTransaction} to={transactionTarget}>
+              {t('Go to Trace')}
+            </LinkButton>
+          )}
+        </StyledHeaderActions>
+      )}
     </SmallerLayoutHeader>
   );
 }

static/app/components/workflowEngine/layout/list.tsx

@@ -4,6 +4,8 @@ import * as Layout from 'sentry/components/layouts/thirds';
 import {NoProjectMessage} from 'sentry/components/noProjectMessage';
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import {useOrganization} from 'sentry/utils/useOrganization';
+import {TopBar} from 'sentry/views/navigation/topBar';
+import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 
 interface WorkflowEngineListLayoutProps {
   actions: React.ReactNode;
@@ -26,6 +28,7 @@ export function WorkflowEngineListLayout({
   docsUrl,
 }: WorkflowEngineListLayoutProps) {
   const organization = useOrganization();
+  const hasPageFrameFeature = useHasPageFrameFeature();
 
   return (
     <Stack flex={1}>
@@ -37,7 +40,11 @@ export function WorkflowEngineListLayout({
               <PageHeadingQuestionTooltip docsUrl={docsUrl} title={description} />
             </Layout.Title>
           </Layout.HeaderContent>
-          <Layout.HeaderActions>{actions}</Layout.HeaderActions>
+          {hasPageFrameFeature ? (
+            <TopBar.Slot name="actions">{actions}</TopBar.Slot>
+          ) : (
+            <Layout.HeaderActions>{actions}</Layout.HeaderActions>
+          )}
         </Layout.Header>
         <Layout.Body>
           <Layout.Main width="full">

static/app/views/alerts/list/header.tsx

@@ -15,6 +15,8 @@ import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {makeAlertsPathname} from 'sentry/views/alerts/pathnames';
+import {TopBar} from 'sentry/views/navigation/topBar';
+import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 
 type Props = {
   activeTab: 'stream' | 'rules';
@@ -25,6 +27,7 @@ export function AlertHeader({activeTab}: Props) {
   const location = useLocation();
   const organization = useOrganization();
   const {selection} = usePageFilters();
+  const hasPageFrameFeature = useHasPageFrameFeature();
   /**
    * Incidents list is currently at the organization level, but the link needs to
    * go down to a specific project scope.
@@ -63,12 +66,11 @@ export function AlertHeader({activeTab}: Props) {
           />
         </Layout.Title>
       </Layout.HeaderContent>
-      <Layout.HeaderActions>
-        <Grid flow="column" align="center" gap="md">
+      {hasPageFrameFeature ? (
+        <TopBar.Slot name="actions">
           <CreateAlertButton
             organization={organization}
             iconProps={{size: 'sm'}}
-            size="sm"
             priority="primary"
             referrer="alert_stream"
             projectSlug={
@@ -79,16 +81,41 @@ export function AlertHeader({activeTab}: Props) {
           >
             {t('Create Alert')}
           </CreateAlertButton>
-          <FeedbackButton />
           <LinkButton
-            size="sm"
             onClick={handleNavigateToSettings}
             href="#"
             icon={<IconSettings size="sm" />}
             aria-label={t('Settings')}
           />
-        </Grid>
-      </Layout.HeaderActions>
+        </TopBar.Slot>
+      ) : (
+        <Layout.HeaderActions>
+          <Grid flow="column" align="center" gap="md">
+            <CreateAlertButton
+              organization={organization}
+              iconProps={{size: 'sm'}}
+              size="sm"
+              priority="primary"
+              referrer="alert_stream"
+              projectSlug={
+                selection.projects.length === 1
+                  ? ProjectsStore.getById(`${selection.projects[0]}`)?.slug
+                  : undefined
+              }
+            >
+              {t('Create Alert')}
+            </CreateAlertButton>
+            <FeedbackButton />
+            <LinkButton
+              size="sm"
+              onClick={handleNavigateToSettings}
+              href="#"
+              icon={<IconSettings size="sm" />}
+              aria-label={t('Settings')}
+            />
+          </Grid>
+        </Layout.HeaderActions>
+      )}
       <Layout.HeaderTabs value={activeTab}>
         <TabList>
           {alertRulesLink}

static/app/views/alerts/rules/issue/details/ruleDetails.tsx

@@ -45,6 +45,8 @@ import {APIUsageWarningBanner} from 'sentry/views/alerts/rules/APIUsageWarningBa
 import {findIncompatibleRules} from 'sentry/views/alerts/rules/issue';
 import {ALERT_DEFAULT_CHART_PERIOD} from 'sentry/views/alerts/rules/metric/details/constants';
 import {UserSnoozeDeprecationBanner} from 'sentry/views/alerts/rules/userSnoozeDeprecationBanner';
+import {TopBar} from 'sentry/views/navigation/topBar';
+import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 
 import {IssueAlertDetailsChart} from './alertChart';
 import {AlertRuleIssuesList} from './issuesList';
@@ -78,6 +80,7 @@ const getIssueAlertDetailsQueryKey = ({
 ];
 
 export default function AlertRuleDetails() {
+  const hasPageFrameFeature = useHasPageFrameFeature();
   const queryClient = useQueryClient();
   const organization = useOrganization();
   const api = useApi();
@@ -422,8 +425,8 @@ export default function AlertRuleDetails() {
               {rule.name}
             </Layout.Title>
           </Layout.HeaderContent>
-          <Layout.HeaderActions>
-            <Grid flow="column" align="center" gap="md">
+          {hasPageFrameFeature ? (
+            <TopBar.Slot name="actions">
               <Access access={['alerts:write']}>
                 {({hasAccess}) => (
                   <SnoozeAlert
@@ -438,15 +441,13 @@ export default function AlertRuleDetails() {
                 )}
               </Access>
               <LinkButton
-                size="sm"
                 icon={<IconCopy />}
                 to={duplicateLink}
                 disabled={rule.status === 'disabled'}
               >
                 {t('Duplicate')}
               </LinkButton>
               <LinkButton
-                size="sm"
                 icon={<IconEdit />}
                 to={makeAlertsPathname({
                   path: `/rules/${projectSlug}/${ruleId}/`,
@@ -461,8 +462,50 @@ export default function AlertRuleDetails() {
               >
                 {rule.status === 'disabled' ? t('Edit to enable') : t('Edit Rule')}
               </LinkButton>
-            </Grid>
-          </Layout.HeaderActions>
+            </TopBar.Slot>
+          ) : (
+            <Layout.HeaderActions>
+              <Grid flow="column" align="center" gap="md">
+                <Access access={['alerts:write']}>
+                  {({hasAccess}) => (
+                    <SnoozeAlert
+                      isSnoozed={rule.snoozeForEveryone ?? false}
+                      onSnooze={onSnooze}
+                      ruleId={rule.id}
+                      projectSlug={projectSlug}
+                      hasAccess={hasAccess}
+                      type="issue"
+                      disabled={rule.status === 'disabled'}
+                    />
+                  )}
+                </Access>
+                <LinkButton
+                  size="sm"
+                  icon={<IconCopy />}
+                  to={duplicateLink}
+                  disabled={rule.status === 'disabled'}
+                >
+                  {t('Duplicate')}
+                </LinkButton>
+                <LinkButton
+                  size="sm"
+                  icon={<IconEdit />}
+                  to={makeAlertsPathname({
+                    path: `/rules/${projectSlug}/${ruleId}/`,
+                    organization,
+                  })}
+                  onClick={() =>
+                    trackAnalytics('issue_alert_rule_details.edit_clicked', {
+                      organization,
+                      rule_id: parseInt(ruleId, 10),
+                    })
+                  }
+                >
+                  {rule.status === 'disabled' ? t('Edit to enable') : t('Edit Rule')}
+                </LinkButton>
+              </Grid>
+            </Layout.HeaderActions>
+          )}
         </Layout.Header>
         <Layout.Body>
           <Layout.Main>

static/app/views/alerts/rules/metric/details/header.tsx

@@ -24,6 +24,8 @@ import {
   deprecateTransactionAlerts,
   hasEAPAlerts,
 } from 'sentry/views/insights/common/utils/hasEAPAlerts';
+import {TopBar} from 'sentry/views/navigation/topBar';
+import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 
 type Props = {
   hasMetricRuleDetailsError: boolean;
@@ -44,6 +46,7 @@ export function DetailsHeader({
   project,
   onSnooze,
 }: Props) {
+  const hasPageFrameFeature = useHasPageFrameFeature();
   const isRuleReady = !!rule && !hasMetricRuleDetailsError;
   const ruleTitle = rule && !hasMetricRuleDetailsError ? rule.name : '';
   const settingsLink = rule
@@ -111,8 +114,8 @@ export function DetailsHeader({
           {ruleTitle}
         </RuleTitle>
       </Layout.HeaderContent>
-      <Layout.HeaderActions>
-        <Grid flow="column" align="center" gap="md">
+      {hasPageFrameFeature ? (
+        <TopBar.Slot name="actions">
           {rule && project && (
             <Access access={['alerts:write']}>
               {({hasAccess}) => (
@@ -128,7 +131,6 @@ export function DetailsHeader({
             </Access>
           )}
           <LinkButton
-            size="sm"
             icon={<IconCopy />}
             to={duplicateLink}
             disabled={deprecateTransactionsAlerts}
@@ -144,11 +146,50 @@ export function DetailsHeader({
           >
             {t('Duplicate')}
           </LinkButton>
-          <LinkButton size="sm" icon={<IconEdit />} to={settingsLink}>
+          <LinkButton icon={<IconEdit />} to={settingsLink}>
             {t('Edit Rule')}
           </LinkButton>
-        </Grid>
-      </Layout.HeaderActions>
+        </TopBar.Slot>
+      ) : (
+        <Layout.HeaderActions>
+          <Grid flow="column" align="center" gap="md">
+            {rule && project && (
+              <Access access={['alerts:write']}>
+                {({hasAccess}) => (
+                  <SnoozeAlert
+                    isSnoozed={rule?.snoozeForEveryone ?? false}
+                    onSnooze={onSnooze}
+                    ruleId={rule.id}
+                    projectSlug={project.slug}
+                    hasAccess={hasAccess}
+                    type="metric"
+                  />
+                )}
+              </Access>
+            )}
+            <LinkButton
+              size="sm"
+              icon={<IconCopy />}
+              to={duplicateLink}
+              disabled={deprecateTransactionsAlerts}
+              tooltipProps={{
+                title: deprecateTransactionsAlerts
+                  ? hasEAPAlerts(organization)
+                    ? t(
+                        'Transaction alerts are being deprecated. Please create Span alerts instead.'
+                      )
+                    : t('Transaction alerts are being deprecated.')
+                  : undefined,
+              }}
+            >
+              {t('Duplicate')}
+            </LinkButton>
+            <LinkButton size="sm" icon={<IconEdit />} to={settingsLink}>
+              {t('Edit Rule')}
+            </LinkButton>
+          </Grid>
+        </Layout.HeaderActions>
+      )}
     </Layout.Header>
   );
 }