feat(experiments): Tag support for shared metrics

ee/clickhouse/views/experiment_saved_metrics.py

@@ -5,6 +5,7 @@
 
 from posthog.api.routing import TeamAndOrgViewSetMixin
 from posthog.api.shared import UserBasicSerializer
+from posthog.api.tagged_item import TaggedItemSerializerMixin
 from posthog.models.experiment import ExperimentSavedMetric, ExperimentToSavedMetric
 from posthog.schema import ExperimentFunnelsQuery, ExperimentTrendsQuery
 
@@ -30,7 +31,7 @@ class Meta:
         ]
 
 
-class ExperimentSavedMetricSerializer(serializers.ModelSerializer):
+class ExperimentSavedMetricSerializer(TaggedItemSerializerMixin, serializers.ModelSerializer):
     created_by = UserBasicSerializer(read_only=True)
 
     class Meta:
@@ -43,6 +44,7 @@ class Meta:
             "created_by",
             "created_at",
             "updated_at",
+            "tags",
         ]
         read_only_fields = [
             "id",

ee/clickhouse/views/test/test_experiment_saved_metrics.py

@@ -108,6 +108,7 @@ def test_create_update_experiment_saved_metrics(self) -> None:
                         "series": [{"kind": "EventsNode", "event": "$pageview"}],
                     },
                 },
+                "tags": ["tag1"],
             },
             format="json",
         )
@@ -124,7 +125,7 @@ def test_create_update_experiment_saved_metrics(self) -> None:
             },
         )
         self.assertEqual(response.json()["created_by"]["id"], self.user.pk)
-
+        self.assertEqual(response.json()["tags"], ["tag1"])
         # Generate experiment to have saved metric
         ff_key = "a-b-tests"
         response = self.client.post(

frontend/src/scenes/experiments/Metrics/SharedMetricModal.tsx

@@ -1,11 +1,14 @@
-import { LemonBanner, LemonButton, LemonModal, Link } from '@posthog/lemon-ui'
+import { LemonBanner, LemonButton, LemonLabel, LemonModal, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
 import { IconOpenInNew } from 'lib/lemon-ui/icons'
 import { LemonTable } from 'lib/lemon-ui/LemonTable'
 import { useState } from 'react'
 import { urls } from 'scenes/urls'
+import { userLogic } from 'scenes/userLogic'
 
-import { Experiment } from '~/types'
+import { NodeKind } from '~/queries/schema/schema-general'
+import { AvailableFeature, Experiment } from '~/types'
 
 import { experimentLogic } from '../experimentLogic'
 import { MetricDisplayFunnels, MetricDisplayTrends } from '../ExperimentView/components'
@@ -39,6 +42,8 @@ export function SharedMetricModal({
     const [selectedMetricIds, setSelectedMetricIds] = useState<SharedMetric['id'][]>([])
     const mode = editingSharedMetricId ? 'edit' : 'create'
 
+    const { hasAvailableFeature } = useValues(userLogic)
+
     if (!sharedMetrics) {
         return <></>
     }
@@ -66,6 +71,15 @@ export function SharedMetricModal({
             !experiment.saved_metrics.some((savedMetric) => savedMetric.saved_metric === metric.id)
     )
 
+    const availableTags = Array.from(
+        new Set(
+            availableSharedMetrics
+                .filter((metric: SharedMetric) => metric.tags)
+                .flatMap((metric: SharedMetric) => metric.tags)
+                .filter(Boolean)
+        )
+    ).sort() as string[]
+
     return (
         <LemonModal
             isOpen={isOpen}
@@ -123,6 +137,27 @@ export function SharedMetricModal({
                                     } already in use with this experiment.`}
                                 </LemonBanner>
                             )}
+                            {hasAvailableFeature(AvailableFeature.TAGGING) && availableTags.length > 0 && (
+                                <div className="flex flex-wrap gap-2">
+                                    <LemonLabel>Quick select:</LemonLabel>
+                                    {availableTags.map((tag: string, index: number) => (
+                                        <LemonButton
+                                            key={index}
+                                            size="xsmall"
+                                            type="secondary"
+                                            onClick={() => {
+                                                setSelectedMetricIds(
+                                                    availableSharedMetrics
+                                                        .filter((metric: SharedMetric) => metric.tags?.includes(tag))
+                                                        .map((metric: SharedMetric) => metric.id)
+                                                )
+                                            }}
+                                        >
+                                            {tag}
+                                        </LemonButton>
+                                    ))}
+                                </div>
+                            )}
                             <LemonTable
                                 dataSource={availableSharedMetrics}
                                 columns={[
@@ -155,11 +190,23 @@ export function SharedMetricModal({
                                         dataIndex: 'description',
                                         key: 'description',
                                     },
+                                    ...(hasAvailableFeature(AvailableFeature.TAGGING)
+                                        ? [
+                                              {
+                                                  title: 'Tags',
+                                                  dataIndex: 'tags' as keyof SharedMetric,
+                                                  key: 'tags',
+                                                  render: (_: any, metric: SharedMetric) => (
+                                                      <ObjectTags tags={metric.tags || []} staticOnly />
+                                                  ),
+                                              },
+                                          ]
+                                        : []),
                                     {
                                         title: 'Type',
                                         key: 'type',
                                         render: (_, metric: SharedMetric) =>
-                                            metric.query.kind.replace('Experiment', '').replace('Query', ''),
+                                            metric.query.kind === NodeKind.ExperimentTrendsQuery ? 'Trend' : 'Funnel',
                                     },
                                 ]}
                                 footer={

frontend/src/scenes/experiments/SharedMetrics/SharedMetric.tsx

@@ -1,9 +1,11 @@
 import { IconCheckCircle } from '@posthog/icons'
 import { LemonButton, LemonDialog, LemonInput, LemonLabel, Spinner } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
 import { SceneExport } from 'scenes/sceneTypes'
 
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
+import { tagsModel } from '~/models/tagsModel'
 import { NodeKind } from '~/queries/schema/schema-general'
 
 import { getDefaultFunnelsMetric, getDefaultTrendsMetric } from '../utils'
@@ -25,6 +27,8 @@ export function SharedMetric(): JSX.Element {
         useActions(sharedMetricLogic)
     const { isDarkModeOn } = useValues(themeLogic)
 
+    const { tags: allExistingTags } = useValues(tagsModel)
+
     if (!sharedMetric || !sharedMetric.query) {
         return (
             <div className="fixed inset-0 flex justify-center items-center">
@@ -104,6 +108,22 @@ export function SharedMetric(): JSX.Element {
                         }}
                     />
                 </div>
+                <div className="mb-4">
+                    <LemonLabel>Tags</LemonLabel>
+                    <div className="mt-2">
+                        <ObjectTags
+                            tags={sharedMetric.tags || []}
+                            onChange={(newTags) => {
+                                setSharedMetric({
+                                    tags: newTags,
+                                })
+                            }}
+                            saving={false}
+                            tagsAvailable={allExistingTags}
+                            data-attr="shared-metric-tags"
+                        />
+                    </div>
+                </div>
                 {sharedMetric.query.kind === NodeKind.ExperimentTrendsQuery ? (
                     <SharedTrendsMetricForm />
                 ) : (

frontend/src/scenes/experiments/SharedMetrics/SharedMetrics.tsx

@@ -2,12 +2,17 @@ import { IconArrowLeft, IconPencil } from '@posthog/icons'
 import { LemonBanner, LemonButton, LemonTable, LemonTableColumn, LemonTableColumns } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
 import { router } from 'kea-router'
+import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
 import { createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
 import { createdAtColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
 import { LemonTableLink } from 'lib/lemon-ui/LemonTable/LemonTableLink'
 import stringWithWBR from 'lib/utils/stringWithWBR'
 import { SceneExport } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
+import { userLogic } from 'scenes/userLogic'
+
+import { NodeKind } from '~/queries/schema'
+import { AvailableFeature } from '~/types'
 
 import { SharedMetric } from './sharedMetricLogic'
 import { sharedMetricsLogic } from './sharedMetricsLogic'
@@ -17,48 +22,67 @@ export const scene: SceneExport = {
     logic: sharedMetricsLogic,
 }
 
-const columns: LemonTableColumns<SharedMetric> = [
-    {
-        key: 'name',
-        title: 'Name',
-        render: (_, sharedMetric) => {
-            return (
-                <LemonTableLink
-                    to={sharedMetric.id ? urls.experimentsSharedMetric(sharedMetric.id) : undefined}
-                    title={stringWithWBR(sharedMetric.name, 17)}
-                />
-            )
-        },
-    },
-    {
-        key: 'description',
-        title: 'Description',
-        dataIndex: 'description',
-    },
-    createdByColumn<SharedMetric>() as LemonTableColumn<SharedMetric, keyof SharedMetric | undefined>,
-    createdAtColumn<SharedMetric>() as LemonTableColumn<SharedMetric, keyof SharedMetric | undefined>,
-    {
-        key: 'actions',
-        title: 'Actions',
-        render: (_, sharedMetric) => {
-            return (
-                <LemonButton
-                    className="max-w-72"
-                    type="secondary"
-                    size="xsmall"
-                    icon={<IconPencil />}
-                    onClick={() => {
-                        router.actions.push(urls.experimentsSharedMetric(sharedMetric.id))
-                    }}
-                />
-            )
-        },
-    },
-]
-
 export function SharedMetrics(): JSX.Element {
     const { sharedMetrics, sharedMetricsLoading } = useValues(sharedMetricsLogic)
 
+    const { hasAvailableFeature } = useValues(userLogic)
+
+    const columns: LemonTableColumns<SharedMetric> = [
+        {
+            key: 'name',
+            title: 'Name',
+            render: (_, sharedMetric) => {
+                return (
+                    <LemonTableLink
+                        to={sharedMetric.id ? urls.experimentsSharedMetric(sharedMetric.id) : undefined}
+                        title={stringWithWBR(sharedMetric.name, 17)}
+                    />
+                )
+            },
+        },
+        {
+            key: 'description',
+            title: 'Description',
+            dataIndex: 'description',
+        },
+        ...(hasAvailableFeature(AvailableFeature.TAGGING)
+            ? [
+                  {
+                      title: 'Tags',
+                      dataIndex: 'tags' as keyof SharedMetric,
+                      render: function Render(tags: SharedMetric['tags']) {
+                          return tags ? <ObjectTags tags={tags} staticOnly /> : null
+                      },
+                  } as LemonTableColumn<SharedMetric, keyof SharedMetric | undefined>,
+              ]
+            : []),
+        {
+            title: 'Type',
+            key: 'type',
+            render: (_, metric: SharedMetric) =>
+                metric.query.kind === NodeKind.ExperimentTrendsQuery ? 'Trend' : 'Funnel',
+        },
+        createdByColumn<SharedMetric>() as LemonTableColumn<SharedMetric, keyof SharedMetric | undefined>,
+        createdAtColumn<SharedMetric>() as LemonTableColumn<SharedMetric, keyof SharedMetric | undefined>,
+        {
+            key: 'actions',
+            title: 'Actions',
+            render: (_, sharedMetric) => {
+                return (
+                    <LemonButton
+                        className="max-w-72"
+                        type="secondary"
+                        size="xsmall"
+                        icon={<IconPencil />}
+                        onClick={() => {
+                            router.actions.push(urls.experimentsSharedMetric(sharedMetric.id))
+                        }}
+                    />
+                )
+            },
+        },
+    ]
+
     return (
         <div className="space-y-4">
             <LemonButton

frontend/src/scenes/experiments/SharedMetrics/sharedMetricLogic.tsx

@@ -23,12 +23,14 @@ export interface SharedMetric {
     created_by: UserBasicType | null
     created_at: string | null
     updated_at: string | null
+    tags: string[]
 }
 
 export const NEW_SHARED_METRIC: Partial<SharedMetric> = {
     name: '',
     description: '',
     query: getDefaultTrendsMetric(),
+    tags: [],
 }
 
 export const sharedMetricLogic = kea<sharedMetricLogicType>([

posthog/api/test/__snapshots__/test_insight.ambr

@@ -2078,7 +2078,8 @@
          "posthog_taggeditem"."event_definition_id",
          "posthog_taggeditem"."property_definition_id",
          "posthog_taggeditem"."action_id",
-         "posthog_taggeditem"."feature_flag_id"
+         "posthog_taggeditem"."feature_flag_id",
+         "posthog_taggeditem"."experiment_saved_metric_id"
   FROM "posthog_taggeditem"
   WHERE "posthog_taggeditem"."insight_id" IN (1,
                                               2,

posthog/api/test/dashboards/__snapshots__/test_dashboard.ambr

@@ -852,6 +852,7 @@
          "posthog_taggeditem"."property_definition_id",
          "posthog_taggeditem"."action_id",
          "posthog_taggeditem"."feature_flag_id",
+         "posthog_taggeditem"."experiment_saved_metric_id",
          "posthog_tag"."id",
          "posthog_tag"."name",
          "posthog_tag"."team_id"
@@ -1224,6 +1225,7 @@
          "posthog_taggeditem"."property_definition_id",
          "posthog_taggeditem"."action_id",
          "posthog_taggeditem"."feature_flag_id",
+         "posthog_taggeditem"."experiment_saved_metric_id",
          "posthog_tag"."id",
          "posthog_tag"."name",
          "posthog_tag"."team_id"
@@ -5315,6 +5317,7 @@
          "posthog_taggeditem"."property_definition_id",
          "posthog_taggeditem"."action_id",
          "posthog_taggeditem"."feature_flag_id",
+         "posthog_taggeditem"."experiment_saved_metric_id",
          "posthog_tag"."id",
          "posthog_tag"."name",
          "posthog_tag"."team_id"
@@ -5709,6 +5712,7 @@
          "posthog_taggeditem"."property_definition_id",
          "posthog_taggeditem"."action_id",
          "posthog_taggeditem"."feature_flag_id",
+         "posthog_taggeditem"."experiment_saved_metric_id",
          "posthog_tag"."id",
          "posthog_tag"."name",
          "posthog_tag"."team_id"
@@ -9541,6 +9545,7 @@
          "posthog_taggeditem"."property_definition_id",
          "posthog_taggeditem"."action_id",
          "posthog_taggeditem"."feature_flag_id",
+         "posthog_taggeditem"."experiment_saved_metric_id",
          "posthog_tag"."id",
          "posthog_tag"."name",
          "posthog_tag"."team_id"
@@ -11585,6 +11590,7 @@
          "posthog_taggeditem"."property_definition_id",
          "posthog_taggeditem"."action_id",
          "posthog_taggeditem"."feature_flag_id",
+         "posthog_taggeditem"."experiment_saved_metric_id",
          "posthog_tag"."id",
          "posthog_tag"."name",
          "posthog_tag"."team_id"