ref(nav): use topbar slot for headeractions

static/app/components/core/slot/slot.tsx

@@ -121,9 +121,12 @@ type SlotModule<T extends Slot> = React.FunctionComponent<SlotConsumerProps<T>>
   Provider: React.ComponentType<SlotProviderProps>;
 };
 
-function makeSlotConsumer<T extends Slot>(
-  context: React.Context<SlotContextValue<T> | null>
-) {
+function makeSlotConsumer<T extends Slot>(options: {
+  context: React.Context<SlotContextValue<T> | null>;
+  providers?: React.ComponentType<{children: React.ReactNode}>;
+}) {
+  const {context, providers: Providers} = options;
+
   function SlotConsumer(props: SlotConsumerProps<T>): React.ReactNode {
     const ctx = useContext(context);
     if (!ctx) {
@@ -138,11 +141,13 @@ function makeSlotConsumer<T extends Slot>(
     }, [dispatch, name]);
 
     const element = state[name]?.element;
+    const content = Providers ? <Providers>{props.children}</Providers> : props.children;
+
     if (!element) {
       // Render in place as a fallback when no target element is registered yet
-      return props.children;
+      return content;
     }
-    return createPortal(props.children, element);
+    return createPortal(content, element);
   }
 
   SlotConsumer.displayName = 'Slot.Consumer';
@@ -230,13 +235,19 @@ function makeSlotProvider<T extends Slot>(
   return SlotProvider as (props: SlotProviderProps) => React.ReactNode;
 }
 
-export function slot<T extends readonly Slot[]>(names: T): SlotModule<T[number]> {
+export function slot<T extends readonly Slot[]>(
+  names: T,
+  options?: {providers?: React.ComponentType<{children: React.ReactNode}>}
+): SlotModule<T[number]> {
   type SlotName = T[number];
 
   const SlotContext = createContext<SlotContextValue<SlotName> | null>(null);
   const OutletNameContext = createContext<SlotName | null>(null);
 
-  const Slot = makeSlotConsumer<SlotName>(SlotContext) as SlotModule<SlotName>;
+  const Slot = makeSlotConsumer<SlotName>({
+    context: SlotContext,
+    providers: options?.providers,
+  }) as SlotModule<SlotName>;
   Slot.Provider = makeSlotProvider<SlotName>(SlotContext);
   Slot.Outlet = makeSlotOutlet<SlotName>(SlotContext, OutletNameContext);
   Slot.Fallback = makeSlotFallback<SlotName>(SlotContext, OutletNameContext);

static/app/components/profiling/continuousProfileHeader.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useMemo} from 'react';
+import {Fragment, useCallback, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import {LinkButton} from '@sentry/scraps/button';
@@ -53,20 +53,29 @@ export function ContinuousProfileHeader({transaction}: ContinuousProfileHeader)
           <ProfilingBreadcrumbs organization={organization} trails={breadCrumbs} />
         </SmallerProfilingBreadcrumbsWrapper>
       </SmallerHeaderContent>
-      <StyledHeaderActions>
-        {hasPageFrameFeature ? (
+      {hasPageFrameFeature ? (
+        <Fragment>
+          {transactionTarget && (
+            <TopBar.Slot name="actions">
+              <LinkButton onClick={handleGoToTransaction} to={transactionTarget}>
+                {t('Go to Trace')}
+              </LinkButton>
+            </TopBar.Slot>
+          )}
           <TopBar.Slot name="feedback">
             <FeedbackButton>{null}</FeedbackButton>
           </TopBar.Slot>
-        ) : (
+        </Fragment>
+      ) : (
+        <StyledHeaderActions>
           <FeedbackButton />
-        )}
-        {transactionTarget && (
-          <LinkButton size="sm" onClick={handleGoToTransaction} to={transactionTarget}>
-            {t('Go to Trace')}
-          </LinkButton>
-        )}
-      </StyledHeaderActions>
+          {transactionTarget && (
+            <LinkButton size="sm" onClick={handleGoToTransaction} to={transactionTarget}>
+              {t('Go to Trace')}
+            </LinkButton>
+          )}
+        </StyledHeaderActions>
+      )}
     </SmallerLayoutHeader>
   );
 }

static/app/components/profiling/profileHeader.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useMemo} from 'react';
+import {Fragment, useCallback, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import {LinkButton} from '@sentry/scraps/button';
@@ -91,20 +91,29 @@ function ProfileHeader({transaction, projectId, eventId}: ProfileHeaderProps) {
           <ProfilingBreadcrumbs organization={organization} trails={breadcrumbTrails} />
         </SmallerProfilingBreadcrumbsWrapper>
       </SmallerHeaderContent>
-      <StyledHeaderActions>
-        {hasPageFrameFeature ? (
+      {hasPageFrameFeature ? (
+        <Fragment>
+          {transactionTarget && (
+            <TopBar.Slot name="actions">
+              <LinkButton onClick={handleGoToTransaction} to={transactionTarget}>
+                {t('Go to Trace')}
+              </LinkButton>
+            </TopBar.Slot>
+          )}
           <TopBar.Slot name="feedback">
             <FeedbackButton>{null}</FeedbackButton>
           </TopBar.Slot>
-        ) : (
+        </Fragment>
+      ) : (
+        <StyledHeaderActions>
           <FeedbackButton />
-        )}
-        {transactionTarget && (
-          <LinkButton size="sm" onClick={handleGoToTransaction} to={transactionTarget}>
-            {t('Go to Trace')}
-          </LinkButton>
-        )}
-      </StyledHeaderActions>
+          {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

@@ -1,3 +1,5 @@
+import {Fragment} from 'react';
+
 import {LinkButton} from '@sentry/scraps/button';
 import {Grid} from '@sentry/scraps/layout';
 import {TabList} from '@sentry/scraps/tabs';
@@ -66,38 +68,61 @@ export function AlertHeader({activeTab}: Props) {
           />
         </Layout.Title>
       </Layout.HeaderContent>
-      <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>
-          {hasPageFrameFeature ? (
-            <TopBar.Slot name="feedback">
-              <FeedbackButton>{null}</FeedbackButton>
-            </TopBar.Slot>
-          ) : (
+      {hasPageFrameFeature ? (
+        <Fragment>
+          <TopBar.Slot name="actions">
+            <CreateAlertButton
+              organization={organization}
+              iconProps={{size: 'sm'}}
+              priority="primary"
+              referrer="alert_stream"
+              projectSlug={
+                selection.projects.length === 1
+                  ? ProjectsStore.getById(`${selection.projects[0]}`)?.slug
+                  : undefined
+              }
+            >
+              {t('Create Alert')}
+            </CreateAlertButton>
+            <LinkButton
+              onClick={handleNavigateToSettings}
+              href="#"
+              icon={<IconSettings size="sm" />}
+              aria-label={t('Settings')}
+            />
+          </TopBar.Slot>
+          <TopBar.Slot name="feedback">
+            <FeedbackButton>{null}</FeedbackButton>
+          </TopBar.Slot>
+        </Fragment>
+      ) : (
+        <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>
+            <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>