diff --git a/static/app/components/workflowEngine/layout/detail.tsx b/static/app/components/workflowEngine/layout/detail.tsx index e245cc44e0c44c..86076878e9448d 100644 --- a/static/app/components/workflowEngine/layout/detail.tsx +++ b/static/app/components/workflowEngine/layout/detail.tsx @@ -1,11 +1,13 @@ 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 { /** @@ -13,12 +15,13 @@ export interface WorkflowEngineDetailLayoutProps { * Expected to include `` and `` 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 ( @@ -26,6 +29,9 @@ function DetailLayout({children}: WorkflowEngineDetailLayoutProps) { {title} + + + @@ -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}; `; diff --git a/static/app/components/workflowEngine/layout/index.spec.tsx b/static/app/components/workflowEngine/layout/index.spec.tsx index eb2e4513425fa8..7aac2fadbbcdff 100644 --- a/static/app/components/workflowEngine/layout/index.spec.tsx +++ b/static/app/components/workflowEngine/layout/index.spec.tsx @@ -39,7 +39,9 @@ describe('Detail Layout component', function () { it('renders children and context values', function () { render( - children-test-value + + children-test-value + ); @@ -47,6 +49,9 @@ describe('Detail Layout component', function () { 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'); }); }); diff --git a/static/app/views/automations/detail.tsx b/static/app/views/automations/detail.tsx index 36489fa692509e..4b49074df66989 100644 --- a/static/app/views/automations/detail.tsx +++ b/static/app/views/automations/detail.tsx @@ -17,7 +17,7 @@ export default function AutomationDetail() { }> - + main sidebar diff --git a/static/app/views/detectors/detail.tsx b/static/app/views/detectors/detail.tsx index c4f723f89c42cf..4a627b1d73d288 100644 --- a/static/app/views/detectors/detail.tsx +++ b/static/app/views/detectors/detail.tsx @@ -14,10 +14,10 @@ export default function DetectorDetail() { useWorkflowEngineFeatureGate({redirect: true}); return ( - + }> - + main sidebar