feat(cohorts): add used-in references endpoint and UI

frontend/src/scenes/cohorts/CohortEdit.tsx

@@ -39,7 +39,9 @@ import {
 } from '~/layout/scenes/SceneLayout'
 import { AndOrFilterSelect } from '~/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect'
 import { Query } from '~/queries/Query/Query'
-import { ActivityScope, CohortType, SidePanelTab } from '~/types'
+import { ActivityScope, CohortType, InsightShortId, SidePanelTab } from '~/types'
+
+import type { CohortUsedInResponseApi } from 'products/cohorts/frontend/generated/api.schemas'
 
 import { AddPersonToCohortModal } from './AddPersonToCohortModal'
 import { addPersonToCohortModalLogic } from './addPersonToCohortModalLogic'
@@ -51,6 +53,65 @@ import { PersonDisplayNameType, RemovePersonFromCohortButton } from './RemovePer
 
 const RESOURCE_TYPE = 'cohort'
 
+function UsedInBanner({ usedIn }: { usedIn: CohortUsedInResponseApi }): JSX.Element | null {
+    const sections = [
+        {
+            title: 'Feature flags',
+            block: usedIn.feature_flags,
+            items: usedIn.feature_flags.results.map((flag) => ({
+                key: `flag-${flag.id}`,
+                url: urls.featureFlag(flag.id),
+                label: flag.name || flag.key,
+            })),
+        },
+        {
+            title: 'Insights',
+            block: usedIn.insights,
+            items: usedIn.insights.results.map((insight) => ({
+                key: `insight-${insight.id}`,
+                url: urls.insightView(insight.short_id as InsightShortId),
+                label: insight.name,
+            })),
+        },
+        {
+            title: 'Cohorts',
+            block: usedIn.cohorts,
+            items: usedIn.cohorts.results.map((c) => ({
+                key: `cohort-${c.id}`,
+                url: urls.cohort(c.id),
+                label: c.name,
+            })),
+        },
+    ].filter((section) => section.items.length > 0)
+
+    if (sections.length === 0) {
+        return null
+    }
+
+    return (
+        <LemonBanner type="info">
+            <h4 className="font-semibold mb-1">Used in</h4>
+            <div className="space-y-2">
+                {sections.map(({ title, block, items }) => (
+                    <div key={title}>
+                        <h5 className="text-xs font-semibold uppercase opacity-60 mb-0">
+                            {title}
+                            {block.has_more && ` (${block.results.length} of ${block.total} shown)`}
+                        </h5>
+                        <ul className="list-disc pl-4 mb-0 space-y-0.5">
+                            {items.map(({ key, url, label }) => (
+                                <li key={key}>
+                                    <Link to={url}>{label}</Link>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                ))}
+            </div>
+        </LemonBanner>
+    )
+}
+
 export interface CohortEditProps {
     id?: CohortType['id']
     attachTo?: BuiltLogic<Logic> | LogicWrapper<Logic>
@@ -97,6 +158,7 @@ export function CohortEdit({ id, attachTo }: CohortEditProps): JSX.Element {
         canRemovePersonFromCohort,
         isPendingCalculation,
         isCalculatingOrPending,
+        usedIn,
         staticCohortMode,
         activeTab,
     } = useValues(logic)
@@ -429,6 +491,7 @@ export function CohortEdit({ id, attachTo }: CohortEditProps): JSX.Element {
                                     </div>
                                 </div>
                             </SceneSection>
+                            {!isNewCohort && usedIn && <UsedInBanner usedIn={usedIn} />}
                             {cohort.is_static && staticCohortMode === 'criteria' ? (
                                 <>
                                     <SceneDivider />

frontend/src/scenes/cohorts/cohortEditLogic.test.ts

@@ -43,6 +43,16 @@ jest.mock('lib/lemon-ui/LemonToast/LemonToast', () => ({
     },
 }))
 
+const mockUsedInResponse = {
+    feature_flags: {
+        results: [{ id: 7, key: 'my-flag', name: 'My Flag' }],
+        total: 1,
+        has_more: false,
+    },
+    insights: { results: [], total: 0, has_more: false },
+    cohorts: { results: [], total: 0, has_more: false },
+}
+
 describe('cohortEditLogic', () => {
     let logic: ReturnType<typeof cohortEditLogic.build>
     async function initCohortLogic(props: CohortLogicProps = { id: 'new' }): Promise<void> {
@@ -64,6 +74,7 @@ describe('cohortEditLogic', () => {
             get: {
                 '/api/projects/:team_id/cohorts/': toPaginatedResponse([mockCohort]),
                 '/api/projects/:team_id/cohorts/:id/': mockCohort,
+                '/api/projects/:team_id/cohorts/:id/used_in/': mockUsedInResponse,
             },
             post: {
                 '/api/projects/:team_id/cohorts/': mockCohort,
@@ -81,7 +92,15 @@ describe('cohortEditLogic', () => {
             await initCohortLogic({ id: 1 })
             await expectLogic(logic).toDispatchActions(['fetchCohort'])
 
-            expect(api.get).toHaveBeenCalledTimes(1)
+            // One call for the cohort itself, one for its used-in references
+            expect(api.get).toHaveBeenCalledTimes(2)
+        })
+
+        it('loads used-in references on mount before the cohort has resolved', async () => {
+            await initCohortLogic({ id: 1 })
+            await expectLogic(logic).toDispatchActions(['loadUsedIn', 'loadUsedInSuccess'])
+
+            expect(logic.values.usedIn).toEqual(mockUsedInResponse)
         })
 
         it('loads new cohort on mount', async () => {
@@ -158,7 +177,13 @@ describe('cohortEditLogic', () => {
                     },
                 })
                 logic.actions.submitCohort()
-            }).toDispatchActions(['setCohort', 'submitCohort', 'submitCohortSuccess'])
+            }).toDispatchActions([
+                'setCohort',
+                'submitCohort',
+                'submitCohortSuccess',
+                'saveCohortSuccess',
+                'loadUsedIn',
+            ])
             expect(api.update).toHaveBeenCalledTimes(1)
         })
 

frontend/src/scenes/cohorts/cohortEditLogic.ts

@@ -19,6 +19,7 @@ import posthog from 'posthog-js'
 import { v4 as uuidv4 } from 'uuid'
 
 import api from 'lib/api'
+import { ApiError } from 'lib/api-error'
 import { tryShowMCPHint } from 'lib/components/MCPHint/mcpHintLogic'
 import { SetupTaskId, globalSetupLogic } from 'lib/components/ProductSetup'
 import { ENTITY_MATCH_TYPE } from 'lib/constants'
@@ -38,6 +39,7 @@ import {
     validateGroup,
 } from 'scenes/cohorts/cohortUtils'
 import { personsLogic } from 'scenes/persons/personsLogic'
+import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 
 import { refreshTreeItem } from '~/layout/panel-layout/ProjectTree/projectTreeLogic'
@@ -59,6 +61,9 @@ import {
     PropertyType,
 } from '~/types'
 
+import { cohortsUsedInRetrieve } from 'products/cohorts/frontend/generated/api'
+import type { CohortUsedInResponseApi } from 'products/cohorts/frontend/generated/api.schemas'
+
 import type { cohortEditLogicType } from './cohortEditLogicType'
 
 export type CohortLogicProps = {
@@ -89,6 +94,7 @@ export const cohortEditLogic = kea<cohortEditLogicType>([
     key((props) => (props.id === 'new' || !props.id ? 'new' : props.id)),
     path(['scenes', 'cohorts', 'cohortLogicEdit']),
     connect(() => ({
+        values: [teamLogic, ['currentProjectId']],
         actions: [eventUsageLogic, ['reportExperimentExposureCohortEdited']],
         logic: [cohortsModel],
     })),
@@ -369,7 +375,7 @@ export const cohortEditLogic = kea<cohortEditLogicType>([
         },
     })),
 
-    loaders(({ actions, values, key }) => ({
+    loaders(({ actions, values, key, props }) => ({
         cohort: [
             NEW_COHORT,
             {
@@ -584,6 +590,30 @@ export const cohortEditLogic = kea<cohortEditLogicType>([
                 },
             },
         ],
+
+        usedIn: [
+            null as CohortUsedInResponseApi | null,
+            {
+                loadUsedIn: async () => {
+                    // On mount `values.cohort` is still NEW_COHORT (fetchCohort hasn't resolved),
+                    // so fall back to the id from props.
+                    const id = values.cohort.id !== 'new' ? values.cohort.id : props.id
+                    if (!id || id === 'new') {
+                        return null
+                    }
+                    try {
+                        return await cohortsUsedInRetrieve(String(values.currentProjectId), Number(id))
+                    } catch (error) {
+                        // A 404 just means the endpoint isn't deployed yet (deploy skew) or the
+                        // cohort is gone; neither is worth reporting.
+                        if (!(error instanceof ApiError) || error.status !== 404) {
+                            posthog.captureException(error, { feature: 'cohort-used-in' })
+                        }
+                        return null
+                    }
+                },
+            },
+        ],
     })),
     listeners(({ actions, values }) => ({
         setCriteria: ({ newCriteria, groupIndex, criteriaIndex }) => {
@@ -631,6 +661,11 @@ export const cohortEditLogic = kea<cohortEditLogicType>([
                     'There was an error submitting this cohort. Make sure the cohort filters are correct.',
             })
         },
+        // Refresh once the save request actually resolves; submitCohortSuccess fires as soon
+        // as the synchronous submit handler dispatches saveCohort.
+        saveCohortSuccess: () => {
+            actions.loadUsedIn()
+        },
         checkIfFinishedCalculating: async ({ cohort }, breakpoint) => {
             const isPendingCalculation = checkIsPendingCalculation(cohort)
             const isCalculatingOrPending = cohort.is_calculating || isPendingCalculation
@@ -713,6 +748,7 @@ export const cohortEditLogic = kea<cohortEditLogicType>([
             }
         } else {
             actions.fetchCohort(props.id)
+            actions.loadUsedIn()
         }
     }),
     beforeUnmount(({ values }) => {