ref(aci): Remove providers for actions and breadcrumbs in layout components (#95296)

Author: malwilley

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

@@ -1,45 +1,26 @@
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
 import {Flex} from 'sentry/components/core/layout';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import * as Layout from 'sentry/components/layouts/thirds';
-import {useDocumentTitle} from 'sentry/components/sentryDocumentTitle';
-import {ActionsFromContext} from 'sentry/components/workflowEngine/layout/actions';
-import {BreadcrumbsFromContext} from 'sentry/components/workflowEngine/layout/breadcrumbs';
+import {HeaderActions} from 'sentry/components/layouts/thirds';
 import {space} from 'sentry/styles/space';
 import type {AvatarProject} from 'sentry/types/project';
 
 interface WorkflowEngineDetailLayoutProps {
   /**
    * The main content for this page
-   * Expected to include `<DetailLayout.Main>` and `<DetailLayout.Sidebar>` components.
+   * Expected to include `<DetailLayout.Body>` and `<DetailLayout.Header>` components.
    */
   children: React.ReactNode;
-  project?: AvatarProject;
 }
 
 /**
  * Precomposed 67/33 layout for Automations / Monitors detail pages.
  */
-function DetailLayout({children, project}: WorkflowEngineDetailLayoutProps) {
-  const title = useDocumentTitle();
-  return (
-    <StyledPage>
-      <Layout.Header unified>
-        <Layout.HeaderContent>
-          <BreadcrumbsFromContext />
-          <Layout.Title>{title}</Layout.Title>
-          {project && (
-            <ProjectContainer>
-              <ProjectBadge project={project} disableLink avatarSize={16} />
-            </ProjectContainer>
-          )}
-        </Layout.HeaderContent>
-        <ActionsFromContext />
-      </Layout.Header>
-      <StyledBody>{children}</StyledBody>
-    </StyledPage>
-  );
+function DetailLayout({children}: WorkflowEngineDetailLayoutProps) {
+  return <StyledPage>{children}</StyledPage>;
 }
 
 const ProjectContainer = styled('div')`
@@ -79,6 +60,43 @@ function Sidebar({children}: RequiredChildren) {
   );
 }
 
-const WorkflowEngineDetailLayout = Object.assign(DetailLayout, {Main, Sidebar});
+function Header({children}: RequiredChildren) {
+  return <Layout.Header unified>{children}</Layout.Header>;
+}
+
+function HeaderContent({children}: RequiredChildren) {
+  return <Layout.HeaderContent>{children}</Layout.HeaderContent>;
+}
+
+function Actions({children}: RequiredChildren) {
+  return (
+    <HeaderActions>
+      <Flex gap={space(1)}>{children}</Flex>
+    </HeaderActions>
+  );
+}
+
+function Title({title, project}: {title: string; project?: AvatarProject}) {
+  return (
+    <Fragment>
+      <Layout.Title>{title}</Layout.Title>
+      {project && (
+        <ProjectContainer>
+          <ProjectBadge project={project} disableLink avatarSize={16} />
+        </ProjectContainer>
+      )}
+    </Fragment>
+  );
+}
+
+const WorkflowEngineDetailLayout = Object.assign(DetailLayout, {
+  Body: StyledBody,
+  Main,
+  Sidebar,
+  Header,
+  HeaderContent,
+  Actions,
+  Title,
+});
 
 export default WorkflowEngineDetailLayout;