add info

PostHog · Mar 25, 2024 · 26ce2b5 · 26ce2b5
1 parent 0d22bef
commit 26ce2b5
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 76 deletions.
diff --git a/frontend/src/scenes/experiments/ExperimentNext.tsx b/frontend/src/scenes/experiments/ExperimentNext.tsx
@@ -5,20 +5,16 @@ import { useActions, useValues } from 'kea'
 import { ExperimentForm } from './ExperimentForm'
 import { ExperimentImplementationDetails } from './ExperimentImplementationDetails'
 import { experimentLogic } from './experimentLogic'
-import {
-    ExperimentLoader,
-    ExperimentLoadingAnimation,
-    FeatureFlagInfo,
-    PageHeaderCustom,
-} from './ExperimentView/components'
+import { ExperimentLoader, ExperimentLoadingAnimation, PageHeaderCustom } from './ExperimentView/components'
 import { DistributionTable } from './ExperimentView/DistributionTable'
 import { ExperimentExposureModal, ExperimentGoalModal, Goal } from './ExperimentView/Goal'
+import { Info } from './ExperimentView/Info'
 import { NoResultsEmptyState } from './ExperimentView/NoResultsEmptyState'
+import { Overview } from './ExperimentView/Overview'
 import { ProgressBar } from './ExperimentView/ProgressBar'
 import { ReleaseConditionsTable } from './ExperimentView/ReleaseConditionsTable'
 import { Results } from './ExperimentView/Results'
 import { SecondaryMetricsTable } from './ExperimentView/SecondaryMetricsTable'
-import { Status } from './ExperimentView/Status'
 
 export function ExperimentView(): JSX.Element {
     const { experiment, experimentLoading, experimentResultsLoading, experimentId, experimentResults } =
@@ -34,12 +30,12 @@ export function ExperimentView(): JSX.Element {
                     <ExperimentLoader />
                 ) : (
                     <>
-                        <FeatureFlagInfo />
+                        <Info />
                         {experimentResultsLoading ? (
                             <ExperimentLoadingAnimation />
                         ) : experimentResults && experimentResults.insight ? (
                             <>
-                                <Status />
+                                <Overview />
                                 <ProgressBar />
                                 <Goal />
                                 <Results />

diff --git a/frontend/src/scenes/experiments/ExperimentView/Info.tsx b/frontend/src/scenes/experiments/ExperimentView/Info.tsx
@@ -0,0 +1,87 @@
+import '../Experiment.scss'
+
+import { IconWarning } from '@posthog/icons'
+import { Link, ProfilePicture, Tooltip } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
+import { TZLabel } from 'lib/components/TZLabel'
+import { IconOpenInNew } from 'lib/lemon-ui/icons'
+import { urls } from 'scenes/urls'
+
+import { ProgressStatus } from '~/types'
+
+import { StatusTag } from '../Experiment'
+import { experimentLogic } from '../experimentLogic'
+import { getExperimentStatus } from '../experimentsLogic'
+import { ResultsTag } from './components'
+
+export function Info(): JSX.Element {
+    const { experiment } = useValues(experimentLogic)
+    const { created_by, created_at } = experiment
+
+    if (!experiment.feature_flag) {
+        return <></>
+    }
+
+    return (
+        <div className="flex">
+            <div className="w-1/2 inline-flex space-x-8">
+                <div className="block">
+                    <div className="text-xs font-semibold uppercase tracking-wide">Status</div>
+                    <StatusTag experiment={experiment} />
+                </div>
+                <div className="block">
+                    <div className="text-xs font-semibold uppercase tracking-wide">Significance</div>
+                    <ResultsTag />
+                </div>
+                {experiment.feature_flag && (
+                    <div className="block">
+                        <div className="text-xs font-semibold uppercase tracking-wide">
+                            <span>Feature flag</span>
+                        </div>
+                        {getExperimentStatus(experiment) === ProgressStatus.Running &&
+                            !experiment.feature_flag.active && (
+                                <Tooltip
+                                    placement="bottom"
+                                    title="Your experiment is running, but the linked flag is disabled. No data is being collected."
+                                >
+                                    <IconWarning
+                                        style={{ transform: 'translateY(2px)' }}
+                                        className="mr-1 text-danger"
+                                        fontSize="18px"
+                                    />
+                                </Tooltip>
+                            )}
+                        <CopyToClipboardInline
+                            iconStyle={{ color: 'var(--lemon-button-icon-opacity)' }}
+                            className="font-normal text-sm"
+                            description="feature flag key"
+                        >
+                            {experiment.feature_flag.key}
+                        </CopyToClipboardInline>
+                        <Link
+                            target="_blank"
+                            className="font-semibold"
+                            to={experiment.feature_flag ? urls.featureFlag(experiment.feature_flag.id) : undefined}
+                        >
+                            <IconOpenInNew fontSize="18" />
+                        </Link>
+                    </div>
+                )}
+            </div>
+
+            <div className="w-1/2 flex flex-col justify-end">
+                <div className="ml-auto inline-flex space-x-8">
+                    <div className="block">
+                        <div className="text-xs font-semibold uppercase tracking-wide">Created at</div>
+                        {created_at && <TZLabel time={created_at} />}
+                    </div>
+                    <div className="block">
+                        <div className="text-xs font-semibold uppercase tracking-wide">Created by</div>
+                        {created_by && <ProfilePicture user={created_by} size="md" showName />}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/...nes/experiments/ExperimentView/Status.tsx → ...s/experiments/ExperimentView/Overview.tsx b/...nes/experiments/ExperimentView/Status.tsx → ...s/experiments/ExperimentView/Overview.tsx
@@ -9,7 +9,7 @@ import { InsightType } from '~/types'
 
 import { experimentLogic } from '../experimentLogic'
 
-export function Status(): JSX.Element {
+export function Overview(): JSX.Element {
     const {
         experimentResults,
         getIndexForVariant,
@@ -35,7 +35,7 @@ export function Status(): JSX.Element {
 
         return (
             <div>
-                <h2 className="font-semibold text-lg">Status</h2>
+                <h2 className="font-semibold text-lg">Summary</h2>
                 <div className="items-center inline-flex">
                     <div
                         className="w-2 h-2 rounded-full mr-1"
@@ -67,7 +67,7 @@ export function Status(): JSX.Element {
 
         return (
             <div>
-                <h2 className="font-semibold text-lg">Status</h2>
+                <h2 className="font-semibold text-lg">Overview</h2>
                 <LemonDivider />
                 <div className="items-center inline-flex">
                     <div

diff --git a/frontend/src/scenes/experiments/ExperimentView/Results.tsx b/frontend/src/scenes/experiments/ExperimentView/Results.tsx
@@ -1,6 +1,5 @@
 import '../Experiment.scss'
 
-import { LemonTag, LemonTagType } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
 
 import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
@@ -10,21 +9,9 @@ import { InsightShortId } from '~/types'
 
 import { experimentLogic } from '../experimentLogic'
 import { transformResultFilters } from '../utils'
+import { ResultsTag } from './components'
 import { SummaryTable } from './SummaryTable'
 
-export function ResultsTag(): JSX.Element {
-    const { areResultsSignificant } = useValues(experimentLogic)
-    const result: { color: LemonTagType; label: string } = areResultsSignificant
-        ? { color: 'success', label: 'Significant' }
-        : { color: 'primary', label: 'Not significant' }
-
-    return (
-        <LemonTag type={result.color}>
-            <b className="uppercase">{result.label}</b>
-        </LemonTag>
-    )
-}
-
 export function Results(): JSX.Element {
     const { experimentResults } = useValues(experimentLogic)
 

diff --git a/frontend/src/scenes/experiments/ExperimentView/components.tsx b/frontend/src/scenes/experiments/ExperimentView/components.tsx
@@ -1,22 +1,29 @@
 import '../Experiment.scss'
 
-import { IconWarning } from '@posthog/icons'
-import { LemonButton, LemonDivider, LemonTable, Link, Tooltip } from '@posthog/lemon-ui'
+import { LemonButton, LemonDivider, LemonTable, LemonTag, LemonTagType } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { AnimationType } from 'lib/animations/animations'
 import { Animation } from 'lib/components/Animation/Animation'
-import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
 import { PageHeader } from 'lib/components/PageHeader'
 import { dayjs } from 'lib/dayjs'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { useEffect, useState } from 'react'
-import { urls } from 'scenes/urls'
-
-import { ProgressStatus } from '~/types'
 
 import { ResetButton } from '../Experiment'
 import { experimentLogic } from '../experimentLogic'
-import { getExperimentStatus } from '../experimentsLogic'
+
+export function ResultsTag(): JSX.Element {
+    const { areResultsSignificant } = useValues(experimentLogic)
+    const result: { color: LemonTagType; label: string } = areResultsSignificant
+        ? { color: 'success', label: 'Significant' }
+        : { color: 'primary', label: 'Not significant' }
+
+    return (
+        <LemonTag type={result.color}>
+            <b className="uppercase">{result.label}</b>
+        </LemonTag>
+    )
+}
 
 export function ExperimentLoader(): JSX.Element {
     return (
@@ -68,49 +75,6 @@ export function ExperimentLoadingAnimation(): JSX.Element {
     )
 }
 
-export function FeatureFlagInfo(): JSX.Element {
-    const { experiment } = useValues(experimentLogic)
-
-    if (!experiment.feature_flag) {
-        return <></>
-    }
-
-    return (
-        <div className="block">
-            <h2 className="font-semibold text-lg mb-1">Feature flag</h2>
-            <div className="inline-flex items-center space-x-2">
-                {getExperimentStatus(experiment) === ProgressStatus.Running && !experiment.feature_flag?.active && (
-                    <Tooltip
-                        placement="bottom"
-                        title="Your experiment is running, but the linked flag is disabled. No data is being collected."
-                    >
-                        <IconWarning
-                            style={{ transform: 'translateY(2px)' }}
-                            className="mr-1 text-danger"
-                            fontSize="18px"
-                        />
-                    </Tooltip>
-                )}
-                <CopyToClipboardInline
-                    iconStyle={{ color: 'var(--lemon-button-icon-opacity)' }}
-                    className="font-normal text-sm"
-                    description="feature flag key"
-                >
-                    {experiment.feature_flag.key}
-                </CopyToClipboardInline>
-                <LemonDivider className="my-0" vertical />
-                <Link
-                    target="_blank"
-                    className="font-semibold"
-                    to={experiment.feature_flag ? urls.featureFlag(experiment.feature_flag.id) : undefined}
-                >
-                    Manage
-                </Link>
-            </div>
-        </div>
-    )
-}
-
 export function PageHeaderCustom(): JSX.Element {
     const { experiment, isExperimentRunning } = useValues(experimentLogic)
     const {