fix(experiment): add status tag (#19669)

PostHog · Jan 10, 2024 · a646436 · a646436
1 parent 6c2a3d9
commit a646436
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 21 deletions.
diff --git a/...tend/__snapshots__/scenes-app-experiments--complete-funnel-experiment--dark.png b/...tend/__snapshots__/scenes-app-experiments--complete-funnel-experiment--dark.png
diff --git a/...end/__snapshots__/scenes-app-experiments--complete-funnel-experiment--light.png b/...end/__snapshots__/scenes-app-experiments--complete-funnel-experiment--light.png
diff --git a/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment--dark.png b/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment--dark.png
diff --git a/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment--light.png b/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment--light.png
diff --git a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist--light.png b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist--light.png
diff --git a/frontend/src/lib/components/PageHeader.tsx b/frontend/src/lib/components/PageHeader.tsx
@@ -7,7 +7,7 @@ import { DraggableToNotebookProps } from 'scenes/notebooks/AddToNotebook/Draggab
 import { breadcrumbsLogic } from '~/layout/navigation/Breadcrumbs/breadcrumbsLogic'
 
 interface PageHeaderProps {
-    title: string | JSX.Element
+    title?: string | JSX.Element
     caption?: string | JSX.Element | null | false
     buttons?: JSX.Element | false
     tabbedPage?: boolean // Whether the page has tabs for secondary navigation

diff --git a/frontend/src/scenes/experiments/Experiment.tsx b/frontend/src/scenes/experiments/Experiment.tsx
@@ -526,22 +526,6 @@ export function Experiment(): JSX.Element {
                 <div className="view-experiment">
                     <div className="draft-header">
                         <PageHeader
-                            title={
-                                <div className="flex items-center gap-2">
-                                    <span>{experiment?.name}</span>
-                                    {experiment.feature_flag && (
-                                        <CopyToClipboardInline
-                                            iconStyle={{ color: 'var(--muted-alt)' }}
-                                            className="text-muted font-normal text-sm"
-                                            description="feature flag key"
-                                        >
-                                            {experiment.feature_flag.key}
-                                        </CopyToClipboardInline>
-                                    )}
-                                    <StatusTag experiment={experiment} />
-                                    <ResultsTag />
-                                </div>
-                            }
                             buttons={
                                 <>
                                     {experiment && !isExperimentRunning && (
@@ -621,9 +605,16 @@ export function Experiment(): JSX.Element {
                             }
                         />
                         <div className="w-full pb-4">
-                            <div>
+                            <div className="inline-flex">
+                                <div className="block">
+                                    <div className="exp-flag-copy-label">Status</div>
+                                    <StatusTag experiment={experiment} />
+                                    <span className="ml-2">
+                                        <ResultsTag />
+                                    </span>
+                                </div>
                                 {experiment.feature_flag && (
-                                    <>
+                                    <div className="block ml-10">
                                         <div className="exp-flag-copy-label">Feature flag</div>
                                         <CopyToClipboardInline
                                             iconStyle={{ color: 'var(--lemon-button-icon-opacity)' }}
@@ -632,10 +623,10 @@ export function Experiment(): JSX.Element {
                                         >
                                             {experiment.feature_flag.key}
                                         </CopyToClipboardInline>
-                                    </>
+                                    </div>
                                 )}
                             </div>
-                            <div className="mt-4 exp-description">
+                            <div className="mt-6 exp-description">
                                 {isExperimentRunning ? (
                                     <EditableField
                                         multiline