feat(aci): add project badge to detail layout (#85699)

Adds the project badge to the WorkflowEngine `<Detail />` layout

Author: natemoo-re

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

@@ -1,31 +1,37 @@
 import styled from '@emotion/styled';
 
 import {Flex} from 'sentry/components/container/flex';
+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 {space} from 'sentry/styles/space';
+import type {AvatarProject} from 'sentry/types/project';
 
 export interface WorkflowEngineDetailLayoutProps {
   /**
    * The main content for this page
    * Expected to include `<DetailLayout.Main>` and `<DetailLayout.Sidebar>` components.
    */
   children: React.ReactNode;
+  project: AvatarProject;
 }
 
 /**
  * Precomposed 67/33 layout for Automations / Monitors detail pages.
  */
-function DetailLayout({children}: WorkflowEngineDetailLayoutProps) {
+function DetailLayout({children, project}: WorkflowEngineDetailLayoutProps) {
   const title = useDocumentTitle();
   return (
     <StyledPage>
       <Layout.Header>
         <Layout.HeaderContent>
           <BreadcrumbsFromContext />
           <Layout.Title>{title}</Layout.Title>
+          <ProjectContainer>
+            <ProjectBadge project={project} disableLink avatarSize={16} />
+          </ProjectContainer>
         </Layout.HeaderContent>
         <ActionsFromContext />
       </Layout.Header>
@@ -34,6 +40,11 @@ function DetailLayout({children}: WorkflowEngineDetailLayoutProps) {
   );
 }
 
+const ProjectContainer = styled('div')`
+  margin-top: ${space(1)};
+  font-size: ${p => p.theme.fontSizeMedium};
+`;
+
 const StyledPage = styled(Layout.Page)`
   background: ${p => p.theme.background};
 `;

static/app/components/workflowEngine/layout/index.spec.tsx

@@ -39,14 +39,19 @@ describe('Detail Layout component', function () {
   it('renders children and context values', function () {
     render(
       <Fixture>
-        <DetailLayout>children-test-value</DetailLayout>
+        <DetailLayout project={{slug: 'project-slug', platform: 'javascript-astro'}}>
+          children-test-value
+        </DetailLayout>
       </Fixture>
     );
 
     expect(screen.getByText('children-test-value')).toBeInTheDocument();
     expect(screen.getByRole('button', {name: 'action-test-value'})).toBeInTheDocument();
     expect(screen.getByRole('link', {name: 'breadcrumb-test-value'})).toBeInTheDocument();
     expect(screen.getByRole('heading', {name: 'title-test-value'})).toBeInTheDocument();
+    // displays project badge
+    expect(screen.getByRole('img')).toBeInTheDocument();
+    expect(screen.getByTestId('badge-display-name')).toHaveTextContent('project-slug');
   });
 });
 

static/app/views/automations/detail.tsx

@@ -17,7 +17,7 @@ export default function AutomationDetail() {
     <SentryDocumentTitle title={t('Automation')} noSuffix>
       <BreadcrumbsProvider crumb={{label: t('Automations'), to: '/automations'}}>
         <ActionsProvider actions={<Actions />}>
-          <DetailLayout>
+          <DetailLayout project={{slug: 'project-slug', platform: 'javascript-astro'}}>
             <DetailLayout.Main>main</DetailLayout.Main>
             <DetailLayout.Sidebar>sidebar</DetailLayout.Sidebar>
           </DetailLayout>

static/app/views/detectors/detail.tsx

@@ -14,10 +14,10 @@ export default function DetectorDetail() {
   useWorkflowEngineFeatureGate({redirect: true});
 
   return (
-    <SentryDocumentTitle title={t('Edit Monitor')} noSuffix>
+    <SentryDocumentTitle title={t('Monitor')} noSuffix>
       <BreadcrumbsProvider crumb={{label: t('Monitors'), to: '/monitors'}}>
         <ActionsProvider actions={<Actions />}>
-          <DetailLayout>
+          <DetailLayout project={{slug: 'project-slug', platform: 'javascript-astro'}}>
             <DetailLayout.Main>main</DetailLayout.Main>
             <DetailLayout.Sidebar>sidebar</DetailLayout.Sidebar>
           </DetailLayout>