feat(feature-mgmt): CRUD - U implemented end to end

frontend/src/lib/api.ts

@@ -5,6 +5,7 @@ import { ActivityLogItem } from 'lib/components/ActivityLog/humanizeActivity'
 import { apiStatusLogic } from 'lib/logic/apiStatusLogic'
 import { objectClean, toParams } from 'lib/utils'
 import posthog from 'posthog-js'
+import { NewFeatureForm } from 'scenes/feature-management/featureManagementEditLogic'
 import { RecordingComment } from 'scenes/session-recordings/player/inspector/playerInspectorLogic'
 import { SavedSessionRecordingPlaylistsResult } from 'scenes/session-recordings/saved-playlists/savedSessionRecordingPlaylistsLogic'
 
@@ -57,6 +58,7 @@ import {
     FeatureFlagAssociatedRoleType,
     FeatureFlagStatusResponse,
     FeatureFlagType,
+    FeatureType,
     Group,
     GroupListParams,
     HogFunctionIconResponse,
@@ -632,6 +634,15 @@ class ApiRequest {
         return this.annotations(teamId).addPathComponent(id)
     }
 
+    // # Feature managment
+    public features(teamId?: TeamType['id']): ApiRequest {
+        return this.projectsDetail(teamId).addPathComponent('features')
+    }
+
+    public feature(id: FeatureType['id'], teamId?: TeamType['id']): ApiRequest {
+        return this.features(teamId).addPathComponent(id)
+    }
+
     // # Feature flags
     public featureFlags(teamId?: TeamType['id']): ApiRequest {
         return this.projectsDetail(teamId).addPathComponent('feature_flags')
@@ -1039,6 +1050,29 @@ const api = {
         },
     },
 
+    features: {
+        async list(
+            teamId: TeamType['id'] = ApiConfig.getCurrentTeamId()
+        ): Promise<CountedPaginatedResponse<FeatureType>> {
+            return await new ApiRequest().features(teamId).get()
+        },
+        async get(id: FeatureType['id'], teamId: TeamType['id'] = ApiConfig.getCurrentTeamId()): Promise<FeatureType> {
+            return await new ApiRequest().feature(id, teamId).get()
+        },
+        async create(
+            feature: NewFeatureForm,
+            teamId: TeamType['id'] = ApiConfig.getCurrentTeamId()
+        ): Promise<FeatureType> {
+            return await new ApiRequest().features(teamId).create({ data: feature })
+        },
+        async update(
+            feature: FeatureType,
+            teamId: TeamType['id'] = ApiConfig.getCurrentTeamId()
+        ): Promise<FeatureType> {
+            return await new ApiRequest().feature(feature.id, teamId).update({ data: feature })
+        },
+    },
+
     featureFlags: {
         async get(id: FeatureFlagType['id']): Promise<FeatureFlagType> {
             return await new ApiRequest().featureFlag(id).get()

frontend/src/scenes/appScenes.ts

@@ -32,7 +32,8 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.ExperimentsSavedMetric]: () => import('./experiments/SavedMetrics/SavedMetric'),
     [Scene.Experiment]: () => import('./experiments/Experiment'),
     [Scene.FeatureFlags]: () => import('./feature-flags/FeatureFlags'),
-    [Scene.FeatureManagement]: () => import('./feature-flags/FeatureManagement'),
+    [Scene.FeatureManagement]: () => import('./feature-management/FeatureManagement'),
+    [Scene.FeatureManagementNew]: () => import('./feature-management/FeatureManagementEdit'),
     [Scene.FeatureFlag]: () => import('./feature-flags/FeatureFlag'),
     [Scene.EarlyAccessFeatures]: () => import('./early-access-features/EarlyAccessFeatures'),
     [Scene.EarlyAccessFeature]: () => import('./early-access-features/EarlyAccessFeature'),

frontend/src/scenes/feature-management/FeatureManagement.tsx

@@ -0,0 +1,32 @@
+import { useValues } from 'kea'
+import { SceneExport } from 'scenes/sceneTypes'
+
+import { FeatureManagementDetail } from './FeatureManagementDetail'
+import { FeatureManagementEmptyState } from './FeatureManagementEmptyState'
+import { FeatureManagementList } from './FeatureManagementList'
+import { featureManagementLogic } from './featureManagementLogic'
+
+export const scene: SceneExport = {
+    component: FeatureManagement,
+    logic: featureManagementLogic,
+}
+
+export function FeatureManagement(): JSX.Element {
+    const { features } = useValues(featureManagementLogic)
+
+    if (features?.results.length === 0) {
+        return <FeatureManagementEmptyState />
+    }
+
+    return (
+        <div className="flex gap-4">
+            <div className="flex-none w-80">
+                <FeatureManagementList />
+            </div>
+
+            <div className="grow">
+                <FeatureManagementDetail />
+            </div>
+        </div>
+    )
+}

frontend/src/scenes/feature-flags/FeatureManagementDetail.tsx → frontend/src/scenes/feature-management/FeatureManagementDetail.tsx

@@ -1,8 +1,31 @@
-import { LemonSkeleton } from '@posthog/lemon-ui'
-import { useValues } from 'kea'
+import { LemonButton, LemonDivider, LemonSkeleton } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { More } from 'lib/lemon-ui/LemonButton/More'
 
 import { featureManagementDetailLogic } from './featureManagementDetailLogic'
 
+function Header(): JSX.Element {
+    const { activeFeature } = useValues(featureManagementDetailLogic)
+    const { deleteFeature } = useActions(featureManagementDetailLogic)
+
+    return (
+        <div className="flex justify-between items-center">
+            <div className="text-xl font-bold">{activeFeature?.name}</div>
+            <More
+                overlay={
+                    <>
+                        <LemonButton fullWidth>Edit</LemonButton>
+                        <LemonDivider />
+                        <LemonButton status="danger" fullWidth onClick={() => deleteFeature(activeFeature)}>
+                            Delete feature
+                        </LemonButton>
+                    </>
+                }
+            />
+        </div>
+    )
+}
+
 function Metadata(): JSX.Element {
     return (
         <div className="flex flex-col gap-2">
@@ -70,11 +93,9 @@
 }
 
 export function FeatureManagementDetail(): JSX.Element {
-    const { activeFeature } = useValues(featureManagementDetailLogic)
-
     return (
         <div className="flex flex-col gap-16">
-            <div className="text-xl font-bold">{activeFeature?.name}</div>
+            <Header />
             <Metadata />
             <Rollout />
             <Usage />

frontend/src/scenes/feature-management/FeatureManagementEdit.tsx

@@ -0,0 +1,105 @@
+import { LemonButton, LemonDivider, LemonInput, LemonTextArea } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import { Form } from 'kea-forms'
+import { router } from 'kea-router'
+import { PageHeader } from 'lib/components/PageHeader'
+import { LemonField } from 'lib/lemon-ui/LemonField'
+import { SceneExport } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+
+import { featureManagementEditLogic } from './featureManagementEditLogic'
+
+export const scene: SceneExport = {
+    component: FeatureManagementEdit,
+    logic: featureManagementEditLogic,
+    paramsToProps: ({ params: { id } }): (typeof featureManagementEditLogic)['props'] => ({
+        id: id && id !== 'new' ? id : 'new',
+    }),
+}
+
+function FeatureManagementEdit(): JSX.Element {
+    const { props } = useValues(featureManagementEditLogic)
+
+    return (
+        <Form
+            id="feature-creation"
+            logic={featureManagementEditLogic}
+            props={props}
+            formKey="feature"
+            enableFormOnSubmit
+            className="space-y-4"
+        >
+            <PageHeader
+                buttons={
+                    <div className="flex items-center gap-2">
+                        <LemonButton
+                            data-attr="cancel-feature-flag"
+                            type="secondary"
+                            onClick={() => router.actions.push(urls.featureManagement())}
+                        >
+                            Cancel
+                        </LemonButton>
+                        <LemonButton
+                            type="primary"
+                            data-attr="save-feature-flag"
+                            htmlType="submit"
+                            form="feature-creation"
+                        >
+                            Save
+                        </LemonButton>
+                    </div>
+                }
+            />
+            <div className="my-4">
+                <div className="max-w-1/2 space-y-4">
+                    <LemonField name="name" label="Name">
+                        <LemonInput
+                            data-attr="feature-name"
+                            className="ph-ignore-input"
+                            autoFocus
+                            placeholder="examples: Login v2, New registration flow, Mobile web"
+                            autoComplete="off"
+                            autoCapitalize="off"
+                            autoCorrect="off"
+                            spellCheck={false}
+                        />
+                    </LemonField>
+
+                    <LemonField name="key" label="Key">
+                        <LemonInput
+                            data-attr="feature-key"
+                            className="ph-ignore-input"
+                            autoComplete="off"
+                            autoCapitalize="off"
+                            autoCorrect="off"
+                            spellCheck={false}
+                            disabled
+                        />
+                    </LemonField>
+                    <span className="text-muted text-sm">
+                        This will be used to monitor feature usage. Feature keys must be unique to other features and
+                        feature flags.
+                    </span>
+
+                    <LemonField name="description" label="Description">
+                        <LemonTextArea className="ph-ignore-input" data-attr="feature-description" />
+                    </LemonField>
+                </div>
+            </div>
+            <LemonDivider />
+
+            <div className="flex items-center gap-2 justify-end">
+                <LemonButton
+                    data-attr="cancel-feature-flag"
+                    type="secondary"
+                    onClick={() => router.actions.push(urls.featureManagement())}
+                >
+                    Cancel
+                </LemonButton>
+                <LemonButton type="primary" data-attr="save-feature-flag" htmlType="submit" form="feature-creation">
+                    Save
+                </LemonButton>
+            </div>
+        </Form>
+    )
+}

frontend/src/scenes/feature-management/FeatureManagementEmptyState.tsx

@@ -0,0 +1,25 @@
+import { IconPlusSmall } from '@posthog/icons'
+import { BuilderHog3 } from 'lib/components/hedgehogs'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { Link } from 'lib/lemon-ui/Link'
+import { urls } from 'scenes/urls'
+
+export function FeatureManagementEmptyState(): JSX.Element {
+    return (
+        <div className="text-center" data-attr="feature-flag-empty-state-filtered">
+            <div className="w-40 m-auto">
+                <BuilderHog3 className="w-full h-full" />
+            </div>
+            <h2>No features created yet</h2>
+            <p>Start your first big feature rollout today.</p>
+
+            <div className="flex justify-center">
+                <Link to={urls.featureManagementNew()}>
+                    <LemonButton type="primary" data-attr="empty-state-add-feature-button" icon={<IconPlusSmall />}>
+                        New feature
+                    </LemonButton>
+                </Link>
+            </div>
+        </div>
+    )
+}

frontend/src/scenes/feature-management/FeatureManagementList.tsx

@@ -0,0 +1,50 @@
+import { IconPlusSmall } from '@posthog/icons'
+import { LemonSkeleton, Link } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { urls } from 'scenes/urls'
+
+import { featureManagementLogic } from './featureManagementLogic'
+
+export function FeatureManagementList(): JSX.Element {
+    const { activeFeatureId, features, featuresLoading } = useValues(featureManagementLogic)
+    const { setActiveFeatureId } = useActions(featureManagementLogic)
+
+    const header = (
+        <div className="flex align-middle justify-between">
+            <h2>Features</h2>
+            <Link to={urls.featureManagementNew()}>
+                <LemonButton type="primary" data-attr="add-feature-button" icon={<IconPlusSmall />}>
+                    New feature
+                </LemonButton>
+            </Link>
+        </div>
+    )
+
+    return (
+        <div className="flex flex-col gap-4">
+            {header}
+            <div className="flex flex-col gap-1">
+                {featuresLoading && (
+                    <>
+                        <LemonSkeleton className="w-full h-8" active />
+                        <LemonSkeleton className="w-full h-8" active />
+                        <LemonSkeleton className="w-full h-8" active />
+                    </>
+                )}
+                {features?.results.map((feature) => (
+                    <div key={feature.id}>
+                        <LemonButton
+                            onClick={() => setActiveFeatureId(feature.id)}
+                            size="small"
+                            fullWidth
+                            active={activeFeatureId === feature.id}
+                        >
+                            <span className="truncate">{feature.name}</span>
+                        </LemonButton>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}