feat(3000): Add experiments to the sidebar

frontend/src/layout/navigation-3000/Navigation.scss

@@ -371,6 +371,9 @@
     &.SidebarListItem--marker-status-danger {
         --sidebar-list-item-status-color: var(--danger);
     }
+    &.SidebarListItem--marker-status-completion {
+        --sidebar-list-item-status-color: var(--purple);
+    }
 }
 
 .SidebarListItem__link,
@@ -398,6 +401,7 @@
 }
 
 .SidebarListItem__link {
+    row-gap: 1px;
     padding: 0 var(--sidebar-horizontal-padding) 0 var(--sidebar-list-item-inset);
     &:hover {
         color: inherit;

frontend/src/layout/navigation-3000/navbarItems.tsx

@@ -21,6 +21,7 @@ import { cohortsSidebarLogic } from './sidebars/cohorts'
 import { personsAndGroupsSidebarLogic } from './sidebars/personsAndGroups'
 import { insightsSidebarLogic } from './sidebars/insights'
 import { dataManagementSidebarLogic } from './sidebars/dataManagement'
+import { experimentsSidebarLogic } from './sidebars/experiments'
 
 /** A list of navbar sections with items. */
 export const NAVBAR_ITEMS: NavbarItem[][] = [
@@ -88,6 +89,7 @@ export const NAVBAR_ITEMS: NavbarItem[][] = [
             identifier: Scene.Experiments,
             label: 'A/B Testing',
             icon: <IconExperiment />,
+            logic: experimentsSidebarLogic,
         },
     ],
     [

frontend/src/layout/navigation-3000/sidebars/dashboards.ts

@@ -48,6 +48,7 @@ export const dashboardsSidebarLogic = kea<dashboardsSidebarLogicType>([
                 {
                     key: 'dashboards',
                     title: 'Dashboards',
+                    loading: dashboardsLoading,
                     items: relevantDashboards.map(
                         ([dashboard, matches]) =>
                             ({
@@ -121,7 +122,6 @@ export const dashboardsSidebarLogic = kea<dashboardsSidebarLogicType>([
                                 },
                             } as ExtendedListItem)
                     ),
-                    loading: dashboardsLoading,
                 } as SidebarCategory,
             ],
         ],

frontend/src/layout/navigation-3000/sidebars/experiments.ts

@@ -0,0 +1,101 @@
+import { connect, kea, path, selectors } from 'kea'
+import { sceneLogic } from 'scenes/sceneLogic'
+import { Scene } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+import { SidebarCategory, ExtendedListItem } from '../types'
+import Fuse from 'fuse.js'
+import { subscriptions } from 'kea-subscriptions'
+import { navigation3000Logic } from '../navigationLogic'
+import { FuseSearchMatch } from './utils'
+import { Experiment, ProgressStatus } from '~/types'
+import type { experimentsSidebarLogicType } from './experimentsType'
+import { experimentsLogic, getExperimentStatus } from 'scenes/experiments/experimentsLogic'
+import { dayjs } from 'lib/dayjs'
+
+const fuse = new Fuse<Experiment>([], {
+    keys: [{ name: 'name', weight: 2 }, 'description'],
+    threshold: 0.3,
+    ignoreLocation: true,
+    includeMatches: true,
+})
+
+const EXPERIMENT_STATUS_TO_RIBBON_STATUS = { draft: 'muted', running: 'success', complete: 'completion' }
+
+export const experimentsSidebarLogic = kea<experimentsSidebarLogicType>([
+    path(['layout', 'navigation-3000', 'sidebars', 'experimentsSidebarLogic']),
+    connect({
+        values: [experimentsLogic, ['experiments', 'experimentsLoading'], sceneLogic, ['activeScene', 'sceneParams']],
+        actions: [experimentsLogic, ['loadExperiments', 'deleteExperiment']],
+    }),
+    selectors(({ actions }) => ({
+        contents: [
+            (s) => [s.relevantExperiments, s.experimentsLoading],
+            (relevantExperiments, experimentsLoading) => [
+                {
+                    key: 'experiments',
+                    title: 'Experiments',
+                    loading: experimentsLoading,
+                    items: relevantExperiments.map(([experiment, matches]) => {
+                        const experimentStatus = getExperimentStatus(experiment)
+                        return {
+                            key: experiment.id,
+                            name: experiment.name,
+                            summary:
+                                experimentStatus === ProgressStatus.Draft
+                                    ? 'Draft'
+                                    : experimentStatus === ProgressStatus.Complete
+                                    ? `Completed ${dayjs(experiment.start_date).fromNow()}`
+                                    : `Running for ${dayjs(experiment.start_date).fromNow(true)} now`,
+                            extraContextTop: dayjs(experiment.created_at),
+                            extraContextBottom: `by ${experiment.created_by?.first_name || 'unknown'}`,
+                            url: urls.experiment(experiment.id),
+                            searchMatch: matches
+                                ? {
+                                      matchingFields: matches.map((match) => match.key),
+                                      nameHighlightRanges: matches.find((match) => match.key === 'name')?.indices,
+                                  }
+                                : null,
+                            marker: {
+                                type: 'ribbon',
+                                status: EXPERIMENT_STATUS_TO_RIBBON_STATUS[experimentStatus],
+                            },
+                            menuItems: [
+                                {
+                                    items: [
+                                        {
+                                            label: 'Delete experiment',
+                                            onClick: () => actions.deleteExperiment(experiment.id as number),
+                                            status: 'danger',
+                                        },
+                                    ],
+                                },
+                            ],
+                        } as ExtendedListItem
+                    }),
+                } as SidebarCategory,
+            ],
+        ],
+        activeListItemKey: [
+            (s) => [s.activeScene, s.sceneParams],
+            (activeScene, sceneParams) => {
+                return activeScene === Scene.Experiment && sceneParams.params.id
+                    ? parseInt(sceneParams.params.id)
+                    : null
+            },
+        ],
+        relevantExperiments: [
+            (s) => [s.experiments, navigation3000Logic.selectors.searchTerm],
+            (experiments, searchTerm): [Experiment, FuseSearchMatch[] | null][] => {
+                if (searchTerm) {
+                    return fuse.search(searchTerm).map((result) => [result.item, result.matches as FuseSearchMatch[]])
+                }
+                return experiments.map((experiment) => [experiment, null])
+            },
+        ],
+    })),
+    subscriptions({
+        experiments: (experiments) => {
+            fuse.setCollection(experiments)
+        },
+    }),
+])

frontend/src/layout/navigation-3000/sidebars/featureFlags.tsx

@@ -44,6 +44,7 @@ export const featureFlagsSidebarLogic = kea<featureFlagsSidebarLogicType>([
                 {
                     key: 'feature-flags',
                     title: 'Feature Flags',
+                    loading: featureFlagsLoading,
                     items: relevantFeatureFlags.map(([featureFlag, matches]) => {
                         if (!featureFlag.id) {
                             throw new Error('Feature flag ID should never be missing in the sidebar')
@@ -135,7 +136,6 @@ export const featureFlagsSidebarLogic = kea<featureFlagsSidebarLogicType>([
                                             status: 'danger',
                                         },
                                     ],
-                                    loading: featureFlagsLoading,
                                 },
                             ],
                         } as ExtendedListItem

frontend/src/layout/navigation-3000/types.ts

@@ -88,7 +88,7 @@ export interface BasicListItem {
          * Optional marker color.
          * @default 'muted'
          */
-        status?: 'muted' | 'success' | 'warning' | 'danger'
+        status?: 'muted' | 'success' | 'warning' | 'danger' | 'completion'
     }
     /** If search is on, this should be present to convey why this item is included in results. */
     searchMatch?: SearchMatch | null

frontend/src/lib/lemon-ui/LemonTag/LemonTag.scss

@@ -33,7 +33,7 @@
         color: var(--inverse);
     }
 
-    &.purple {
+    &.completion {
         background-color: var(--purple-light);
         color: var(--purple-dark);
     }

frontend/src/lib/lemon-ui/LemonTag/LemonTag.stories.tsx

@@ -13,7 +13,7 @@ const ALL_COLORS: LemonTagType[] = [
     'danger',
     'success',
     'default',
-    'purple',
+    'completion',
     'caution',
     'none',
 ]

frontend/src/lib/lemon-ui/LemonTag/LemonTag.tsx

@@ -11,7 +11,7 @@ export type LemonTagType =
     | 'danger'
     | 'success'
     | 'default'
-    | 'purple'
+    | 'completion'
     | 'caution'
     | 'none'
 

frontend/src/scenes/billing/BillingProduct.tsx

@@ -78,7 +78,7 @@ export const BillingProductAddon = ({ addon }: { addon: BillingProductV2AddonTyp
                             <h4 className="leading-5 mb-1 font-bold">{addon.name}</h4>
                             {addon.subscribed && (
                                 <div>
-                                    <LemonTag type="purple" icon={<IconCheckmark />}>
+                                    <LemonTag type="completion" icon={<IconCheckmark />}>
                                         Subscribed
                                     </LemonTag>
                                 </div>
@@ -110,7 +110,7 @@ export const BillingProductAddon = ({ addon }: { addon: BillingProductV2AddonTyp
                             />
                         </>
                     ) : addon.included_with_main_product ? (
-                        <LemonTag type="purple" icon={<IconCheckmark />}>
+                        <LemonTag type="completion" icon={<IconCheckmark />}>
                             Included with plan
                         </LemonTag>
                     ) : (

frontend/src/scenes/billing/PlanComparisonModal.tsx

@@ -193,7 +193,7 @@ export const PlanComparisonModal = ({
                                             <th scope="row">
                                                 <p className="ml-0">
                                                     <span className="font-bold">{addon.name}</span>
-                                                    <LemonTag type="purple" className="ml-2">
+                                                    <LemonTag type="completion" className="ml-2">
                                                         addon
                                                     </LemonTag>
                                                 </p>

frontend/src/scenes/experiments/Experiments.tsx

@@ -233,7 +233,7 @@ export function Experiments(): JSX.Element {
                                             }
                                         }}
                                         options={[
-                                            { label: 'All', value: ProgressStatus.All },
+                                            { label: 'All', value: 'all' },
                                             { label: 'Draft', value: ProgressStatus.Draft },
                                             { label: 'Running', value: ProgressStatus.Running },
                                             { label: 'Complete', value: ProgressStatus.Complete },

frontend/src/scenes/persons/RelatedFeatureFlags.tsx

@@ -51,7 +51,7 @@ export function RelatedFeatureFlags({ distinctId, groups }: Props): JSX.Element
                     <>
                         <Link to={featureFlag.id ? urls.featureFlag(featureFlag.id) : undefined} className="row-name">
                             {stringWithWBR(featureFlag.key, 17)}
-                            <LemonTag type={isExperiment ? 'purple' : 'default'} className="ml-2">
+                            <LemonTag type={isExperiment ? 'completion' : 'default'} className="ml-2">
                                 {isExperiment ? 'Experiment' : 'Feature flag'}
                             </LemonTag>
                         </Link>

frontend/src/scenes/surveys/Surveys.tsx

@@ -1,12 +1,12 @@
-import { LemonButton, LemonTable, LemonDivider, Link, LemonTag } from '@posthog/lemon-ui'
+import { LemonButton, LemonTable, LemonDivider, Link, LemonTag, LemonTagType } from '@posthog/lemon-ui'
 import { PageHeader } from 'lib/components/PageHeader'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import stringWithWBR from 'lib/utils/stringWithWBR'
 import { SceneExport } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
 import { getSurveyStatus, surveysLogic } from './surveysLogic'
 import { createdAtColumn, createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
-import { ProductKey, Survey } from '~/types'
+import { ProductKey, ProgressStatus, Survey } from '~/types'
 import { LemonTableColumn } from 'lib/lemon-ui/LemonTable'
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
@@ -113,8 +113,8 @@ export function Surveys(): JSX.Element {
                                         const statusColors = {
                                             running: 'success',
                                             draft: 'default',
-                                            complete: 'purple',
-                                        }
+                                            complete: 'completion',
+                                        } as Record<ProgressStatus, LemonTagType>
                                         const status = getSurveyStatus(survey)
                                         return (
                                             <LemonTag type={statusColors[status]} style={{ fontWeight: 600 }}>

frontend/src/types.ts

@@ -485,7 +485,6 @@ export enum ProgressStatus {
     Draft = 'draft',
     Running = 'running',
     Complete = 'complete',
-    All = 'all',
 }
 
 export enum PropertyFilterType {