wip

PostHog · Dec 27, 2024 · ab54a57 · ab54a57
1 parent d2835df
commit ab54a57
Show file tree

Hide file tree

Showing 9 changed files with 202 additions and 96 deletions.
diff --git a/frontend/src/scenes/experiments/ExperimentView/DataCollection.tsx b/frontend/src/scenes/experiments/ExperimentView/DataCollection.tsx
@@ -80,7 +80,7 @@ export function DataCollection(): JSX.Element {
                     <LemonProgress
                         className="w-full border"
                         bgColor="var(--bg-table)"
-                        size="large"
+                        size="medium"
                         percent={experimentProgressPercent}
                     />
                     {metricType === InsightType.TRENDS && (

diff --git a/frontend/src/scenes/experiments/ExperimentView/components.tsx b/frontend/src/scenes/experiments/ExperimentView/components.tsx
@@ -69,30 +69,32 @@ export function VariantTag({
 
     if (experiment.holdout && variantKey === `holdout-${experiment.holdout_id}`) {
         return (
-            <span className="flex items-center space-x-2">
+            <span className="flex items-center min-w-0">
                 <div
-                    className="w-2 h-2 rounded-full mr-0.5"
+                    className="w-2 h-2 rounded-full shrink-0"
                     // eslint-disable-next-line react/forbid-dom-props
                     style={{
                         backgroundColor: getExperimentInsightColour(getIndexForVariant(metricResults[0], variantKey)),
                     }}
                 />
-                <LemonTag type="option">{experiment.holdout.name}</LemonTag>
+                <LemonTag type="option" className="ml-2">
+                    {experiment.holdout.name}
+                </LemonTag>
             </span>
         )
     }
 
     return (
-        <span className="flex items-center space-x-2">
+        <span className="flex items-center min-w-0">
             <div
-                className="w-2 h-2 rounded-full mr-0.5"
+                className="w-2 h-2 rounded-full shrink-0"
                 // eslint-disable-next-line react/forbid-dom-props
                 style={{
                     backgroundColor: getExperimentInsightColour(getIndexForVariant(metricResults[0], variantKey)),
                 }}
             />
             <span
-                className={`font-semibold ${muted ? 'text-[var(--text-secondary-3000)]' : ''}`}
+                className={`ml-2 font-semibold truncate ${muted ? 'text-[var(--text-secondary-3000)]' : ''}`}
                 // eslint-disable-next-line react/forbid-dom-props
                 style={fontSize ? { fontSize: `${fontSize}px` } : undefined}
             >
@@ -232,10 +234,11 @@ export function ExploreButton({
     return (
         <LemonButton
             className="ml-auto -translate-y-2"
-            size="xsmall"
+            size="small"
             type="primary"
             icon={<IconAreaChart />}
             to={urls.insightNew(undefined, undefined, query)}
+            targetBlank
         >
             Explore as Insight
         </LemonButton>

diff --git a/frontend/src/scenes/experiments/Experiments.tsx b/frontend/src/scenes/experiments/Experiments.tsx
@@ -221,7 +221,9 @@ export function Experiments(): JSX.Element {
                     { key: ExperimentsTabs.Yours, label: 'Your experiments' },
                     { key: ExperimentsTabs.Archived, label: 'Archived experiments' },
                     { key: ExperimentsTabs.Holdouts, label: 'Holdout groups' },
-                    { key: ExperimentsTabs.SavedMetrics, label: 'Saved metrics' },
+                    ...(featureFlags[FEATURE_FLAGS.EXPERIMENTS_MULTIPLE_METRICS]
+                        ? [{ key: ExperimentsTabs.SavedMetrics, label: 'Shared metrics' }]
+                        : []),
                 ]}
             />
 

diff --git a/frontend/src/scenes/experiments/Metrics/MetricModal.tsx b/frontend/src/scenes/experiments/Metrics/MetricModal.tsx
@@ -1,4 +1,4 @@
-import { LemonButton, LemonModal, LemonSelect } from '@posthog/lemon-ui'
+import { LemonButton, LemonDialog, LemonModal, LemonSelect } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 
 import { ExperimentFunnelsQuery } from '~/queries/schema'
@@ -52,11 +52,27 @@ export function MetricModal({
                         type="secondary"
                         status="danger"
                         onClick={() => {
-                            const newMetrics = metrics.filter((_, idx) => idx !== metricIdx)
-                            setExperiment({
-                                [metricsField]: newMetrics,
+                            LemonDialog.open({
+                                title: 'Delete this metric?',
+                                content: <div className="text-sm text-muted">This action cannot be undone.</div>,
+                                primaryButton: {
+                                    children: 'Delete',
+                                    type: 'primary',
+                                    onClick: () => {
+                                        const newMetrics = metrics.filter((_, idx) => idx !== metricIdx)
+                                        setExperiment({
+                                            [metricsField]: newMetrics,
+                                        })
+                                        updateExperimentGoal()
+                                    },
+                                    size: 'small',
+                                },
+                                secondaryButton: {
+                                    children: 'Cancel',
+                                    type: 'tertiary',
+                                    size: 'small',
+                                },
                             })
-                            updateExperimentGoal()
                         }}
                     >
                         Delete

diff --git a/frontend/src/scenes/experiments/Metrics/SavedMetricModal.tsx b/frontend/src/scenes/experiments/Metrics/SavedMetricModal.tsx
@@ -1,6 +1,8 @@
-import { LemonButton, LemonModal, LemonSelect } from '@posthog/lemon-ui'
+import { LemonButton, LemonModal, LemonSelect, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { IconOpenInNew } from 'lib/lemon-ui/icons'
 import { useEffect, useState } from 'react'
+import { urls } from 'scenes/urls'
 
 import { Experiment } from '~/types'
 
@@ -25,9 +27,12 @@ export function SavedMetricModal({
     } = useActions(experimentLogic({ experimentId }))
 
     const [selectedMetricId, setSelectedMetricId] = useState<SavedMetric['id'] | null>(null)
+    const [mode, setMode] = useState<'create' | 'edit'>('create')
+
     useEffect(() => {
         if (editingSavedMetricId) {
             setSelectedMetricId(editingSavedMetricId)
+            setMode('edit')
         }
     }, [editingSavedMetricId])
 
@@ -42,8 +47,8 @@ export function SavedMetricModal({
         <LemonModal
             isOpen={isOpen}
             onClose={closeModal}
-            width={1000}
-            title="Choose a metric"
+            width={500}
+            title={mode === 'create' ? 'Select a shared metric' : 'Shared metric'}
             footer={
                 <div className="flex justify-between w-full">
                     <div>
@@ -63,58 +68,72 @@ export function SavedMetricModal({
                         <LemonButton onClick={closeModal} type="secondary">
                             Cancel
                         </LemonButton>
-                        <LemonButton
-                            onClick={() => {
-                                if (selectedMetricId) {
-                                    addSavedMetricToExperiment(selectedMetricId, {
-                                        type: isSecondary ? 'secondary' : 'primary',
-                                    })
-                                }
-                            }}
-                            type="primary"
-                            disabledReason={!selectedMetricId ? 'Please select a metric' : undefined}
-                        >
-                            Add metric
-                        </LemonButton>
+                        {/* Changing the existing metric is a pain because saved metrics are stored separately */}
+                        {/* Only allow deletion for now */}
+                        {mode === 'create' && (
+                            <LemonButton
+                                onClick={() => {
+                                    if (selectedMetricId) {
+                                        addSavedMetricToExperiment(selectedMetricId, {
+                                            type: isSecondary ? 'secondary' : 'primary',
+                                        })
+                                    }
+                                }}
+                                type="primary"
+                                disabledReason={!selectedMetricId ? 'Please select a metric' : undefined}
+                            >
+                                Add metric
+                            </LemonButton>
+                        )}
                     </div>
                 </div>
             }
         >
-            <div className="flex gap-4 mb-4">
-                <LemonSelect
-                    options={savedMetrics.map((metric: SavedMetric) => ({
-                        label: metric.name,
-                        value: metric.id,
-                    }))}
-                    placeholder="Select a saved metric"
-                    loading={false}
-                    value={selectedMetricId}
-                    onSelect={(value) => {
-                        setSelectedMetricId(value)
-                    }}
-                />
-            </div>
+            {mode === 'create' && (
+                <div className="flex gap-4 mb-4">
+                    <LemonSelect
+                        options={savedMetrics.map((metric: SavedMetric) => ({
+                            label: metric.name,
+                            value: metric.id,
+                        }))}
+                        placeholder="Select a saved metric"
+                        loading={false}
+                        value={selectedMetricId}
+                        onSelect={(value) => {
+                            setSelectedMetricId(value)
+                        }}
+                    />
+                </div>
+            )}
 
             {selectedMetricId && (
-                <div className="mt-4">
+                <div>
                     {(() => {
                         const metric = savedMetrics.find((m: SavedMetric) => m.id === selectedMetricId)
                         if (!metric) {
-                            console.error('Metric not found', savedMetrics, selectedMetricId)
-                            return null
+                            return <></>
                         }
 
                         return (
-                            <>
-                                <h3 className="font-semibold">{metric.name}</h3>
+                            <div className="space-y-2">
+                                <div className="flex items-center gap-2">
+                                    <h3 className="font-semibold m-0 flex items-center">{metric.name}</h3>
+                                    <Link
+                                        target="_blank"
+                                        className="font-semibold flex items-center"
+                                        to={urls.experimentsSavedMetric(metric.id)}
+                                    >
+                                        <IconOpenInNew fontSize="18" />
+                                    </Link>
+                                </div>
                                 {metric.description && <p className="mt-2">{metric.description}</p>}
                                 {metric.query.kind === 'ExperimentTrendsQuery' && (
                                     <MetricDisplayTrends query={metric.query.count_query} />
                                 )}
                                 {metric.query.kind === 'ExperimentFunnelsQuery' && (
                                     <MetricDisplayFunnels query={metric.query.funnels_query} />
                                 )}
-                            </>
+                            </div>
                         )
                     })()}
                 </div>