chore: add an opt-in count to early access management

frontend/src/types.ts

@@ -3140,13 +3140,14 @@ export enum EarlyAccessFeatureTabs {
 export interface EarlyAccessFeatureType {
     /** UUID */
     id: string
-    feature_flag: FeatureFlagBasicType
+    feature_flag: FeatureFlagType
     name: string
     description: string
     stage: EarlyAccessFeatureStage
     /** Documentation URL. Can be empty. */
     documentation_url: string
     created_at: string
+    opt_in_count?: number
 }
 
 export interface NewEarlyAccessFeatureType extends Omit<EarlyAccessFeatureType, 'id' | 'created_at' | 'feature_flag'> {
@@ -5069,3 +5070,4 @@ export interface ProductManifest {
     redirects?: Record<string, string | ((params: Params, searchParams: Params, hashParams: Params) => string)>
     urls?: Record<string, string | ((...args: any[]) => string)>
 }
+}

products/early_access_features/frontend/EarlyAccessFeatures.tsx

@@ -87,6 +87,12 @@ export function EarlyAccessFeatures(): JSX.Element {
                             },
                             sorter: (a, b) => STAGES_IN_ORDER[a.stage] - STAGES_IN_ORDER[b.stage],
                         },
+                        {
+                            title: 'Opted-in users',
+                            key: 'opt_in_count',
+                            render: (_, feature) => feature.opt_in_count ?? 0,
+                            sorter: (a, b) => (a.opt_in_count ?? 0) - (b.opt_in_count ?? 0),
+                        },
                     ]}
                     dataSource={earlyAccessFeatures}
                 />

products/early_access_features/frontend/earlyAccessFeaturesLogic.ts

@@ -14,7 +14,26 @@ export const earlyAccessFeaturesLogic = kea<earlyAccessFeaturesLogicType>([
             __default: [] as EarlyAccessFeatureType[],
             loadEarlyAccessFeatures: async () => {
                 const response = await api.earlyAccessFeatures.list()
-                return response.results
+                const featuresWithCounts = await Promise.all(
+                    response.results.map(async (feature) => {
+                        const key = `$feature_enrollment/${feature.feature_flag.key}`
+                        const optInCount = await api.persons.list({
+                            properties: [
+                                {
+                                    key: key,
+                                    value: ['true'],
+                                    operator: 'exact',
+                                    type: 'person',
+                                },
+                            ],
+                        })
+                        return {
+                            ...feature,
+                            opt_in_count: optInCount.count,
+                        }
+                    })
+                )
+                return featuresWithCounts
             },
         },
     }),

types.ts

@@ -0,0 +1 @@
+