fix(a/b testing): posthog-3000 fixes (#19447)

PostHog · Jan 4, 2024 · e30c13b · e30c13b
1 parent 8c82894
commit e30c13b
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 deletions.
diff --git a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png
diff --git a/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment.png b/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment.png
diff --git a/frontend/src/lib/components/Support/supportLogic.ts b/frontend/src/lib/components/Support/supportLogic.ts
@@ -62,11 +62,11 @@ export const TARGET_AREA_TO_NAME = {
     data_management: 'Data Management',
     data_warehouse: 'Data Warehouse',
     ingestion: 'Event Ingestion',
-    experiments: 'Experiments',
+    experiments: 'A/B Testing',
     feature_flags: 'Feature Flags',
     analytics: 'Product Analytics (Insights, Dashboards, Annotations)',
     session_replay: 'Session Replay (Recordings)',
-    toolbar: 'Toolbar & heatmaps',
+    toolbar: 'Toolbar & Heatmaps',
     surveys: 'Surveys',
     web_analytics: 'Web Analytics',
     'posthog-3000': 'PostHog 3000',

diff --git a/frontend/src/scenes/experiments/Experiment.scss b/frontend/src/scenes/experiments/Experiment.scss
@@ -107,7 +107,6 @@
 
     .exp-description {
         font-style: italic;
-        color: var(--muted);
     }
 
     .participants {
@@ -209,3 +208,10 @@
     border: 1px solid var(--border);
     border-radius: var(--radius);
 }
+
+.exp-flag-copy-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
diff --git a/frontend/src/scenes/experiments/Experiment.tsx b/frontend/src/scenes/experiments/Experiment.tsx
@@ -625,7 +625,21 @@ export function Experiment(): JSX.Element {
                             }
                         />
                         <div className="w-full pb-4">
-                            <span className="exp-description">
+                            <div>
+                                {experiment.feature_flag && (
+                                    <>
+                                        <div className="exp-flag-copy-label">Feature flag</div>
+                                        <CopyToClipboardInline
+                                            iconStyle={{ color: 'var(--lemon-button-icon-opacity)' }}
+                                            className="font-normal text-sm"
+                                            description="feature flag key"
+                                        >
+                                            {experiment.feature_flag.key}
+                                        </CopyToClipboardInline>
+                                    </>
+                                )}
+                            </div>
+                            <div className="mt-4 exp-description">
                                 {isExperimentRunning ? (
                                     <EditableField
                                         multiline
@@ -641,7 +655,7 @@ export function Experiment(): JSX.Element {
                                 ) : (
                                     <>{experiment.description || 'There is no description for this experiment.'}</>
                                 )}
-                            </span>
+                            </div>
                         </div>
                     </div>
                     <div className="mb-4">