feat: use lifecycles API

frontend/common/lifecycleEnvironmentSlice.ts

@@ -0,0 +1,26 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+type LifecycleEnvironmentState = {
+  // Maps a project id to the environment id selected for lifecycle analysis.
+  byProject: Record<number, number>
+}
+
+const initialState: LifecycleEnvironmentState = {
+  byProject: {},
+}
+
+const lifecycleEnvironmentSlice = createSlice({
+  initialState,
+  name: 'lifecycleEnvironment',
+  reducers: {
+    setLifecycleEnvironment(
+      state,
+      action: PayloadAction<{ projectId: number; environmentId: number }>,
+    ) {
+      state.byProject[action.payload.projectId] = action.payload.environmentId
+    },
+  },
+})
+
+export const { setLifecycleEnvironment } = lifecycleEnvironmentSlice.actions
+export default lifecycleEnvironmentSlice.reducer

frontend/common/services/useProjectFlag.ts

@@ -35,7 +35,13 @@ function recursivePageGet(
 }
 export const projectFlagService = service
   .enhanceEndpoints({
-    addTagTypes: ['ProjectFlag', 'FeatureList', 'FeatureState', 'Environment'],
+    addTagTypes: [
+      'ProjectFlag',
+      'FeatureList',
+      'FeatureState',
+      'Environment',
+      'LifecycleCounts',
+    ],
   })
   .injectEndpoints({
     endpoints: (builder) => ({
@@ -68,6 +74,7 @@ export const projectFlagService = service
         invalidatesTags: [
           { id: 'LIST', type: 'ProjectFlag' },
           { id: 'LIST', type: 'FeatureList' },
+          'LifecycleCounts',
         ],
         query: (query: Req['createProjectFlag']) => ({
           body: query.body,
@@ -132,6 +139,16 @@ export const projectFlagService = service
         }),
       }),
 
+      getLifecycleStatusCounts: builder.query<
+        Res['lifecycleStatusCounts'],
+        Req['getLifecycleStatusCounts']
+      >({
+        providesTags: ['LifecycleCounts'],
+        query: ({ environment }) => ({
+          url: `environments/${environment}/feature-lifecycle-counts/`,
+        }),
+      }),
+
       getProjectFlag: builder.query<Res['projectFlag'], Req['getProjectFlag']>({
         providesTags: (res) => [{ id: res?.id, type: 'ProjectFlag' }],
         query: (query: Req['getProjectFlag']) => ({
@@ -198,6 +215,7 @@ export const projectFlagService = service
           { id: 'LIST', type: 'ProjectFlag' },
           { id: 'LIST', type: 'FeatureList' },
           { id: 'METRICS', type: 'Environment' },
+          'LifecycleCounts',
         ],
         query: ({ flag_id, project_id }) => ({
           method: 'DELETE',
@@ -213,6 +231,7 @@ export const projectFlagService = service
           { id: 'LIST', type: 'ProjectFlag' },
           { id: res?.id, type: 'ProjectFlag' },
           { id: 'LIST', type: 'FeatureList' },
+          'LifecycleCounts',
         ],
         query: (query: Req['updateProjectFlag']) => ({
           body: query.body,
@@ -284,6 +303,7 @@ export const {
   useAddFlagOwnersMutation,
   useCreateProjectFlagMutation,
   useGetFeatureListQuery,
+  useGetLifecycleStatusCountsQuery,
   useGetProjectFlagQuery,
   useGetProjectFlagsQuery,
   useRemoveFlagGroupOwnersMutation,

frontend/common/store.ts

@@ -14,10 +14,12 @@ import storage from 'redux-persist/lib/storage'
 import { Persistor } from 'redux-persist/es/types'
 import { service } from './service'
 import selectedOrganisationReducer from './selectedOrganisationSlice'
+import lifecycleEnvironmentReducer from './lifecycleEnvironmentSlice'
 // END OF IMPORTS
 const createStore = () => {
   const reducer = combineReducers({
     [service.reducerPath]: service.reducer,
+    lifecycleEnvironment: lifecycleEnvironmentReducer,
     selectedOrganisation: selectedOrganisationReducer,
     // END OF REDUCERS
   })
@@ -36,7 +38,7 @@ const createStore = () => {
         key: 'root',
         storage,
         version: 1,
-        whitelist: ['user'],
+        whitelist: ['user', 'lifecycleEnvironment'],
       },
       reducer,
     ),

frontend/common/types/requests.ts

@@ -32,6 +32,7 @@ import {
   FlagsmithValue,
   TagStrategy,
   FeatureType,
+  LifecycleStage,
 } from './responses'
 import { UtmsType } from './utms'
 
@@ -395,6 +396,10 @@ export type Req = {
     group_owners?: number[]
     sort_field?: string
     sort_direction?: SortOrder
+    lifecycle_stage?: LifecycleStage
+  }
+  getLifecycleStatusCounts: {
+    environment: number
   }
   getProjectFlag: { project: number; id: number }
   getRolesPermissionUsers: { organisation_id: number; role_id: number }

frontend/common/types/responses.ts

@@ -816,8 +816,19 @@ export type ProjectFlag = {
     last_successful_repository_scanned_at: string
     last_feature_found_at: string
   }[]
+  lifecycle_stage?: LifecycleStage | null
 }
 
+export type LifecycleStage =
+  | 'new'
+  | 'live'
+  | 'permanent'
+  | 'stale'
+  | 'needs_monitoring'
+  | 'to_remove'
+
+export type LifecycleStatusCounts = Record<LifecycleStage, number>
+
 export type FeatureListProviderData = {
   projectFlags: ProjectFlag[] | null
   environmentFlags: Record<number, FeatureState> | undefined
@@ -1344,6 +1355,7 @@ export type Res = {
   rolePermission: PagedResponse<RolePermission>
   projectFlags: PagedResponse<ProjectFlag>
   projectFlag: ProjectFlag
+  lifecycleStatusCounts: LifecycleStatusCounts
   identityFeatureStatesAll: IdentityFeatureState[]
   createRolesPermissionUsers: RolePermissionUser
   rolesPermissionUsers: PagedResponse<RolePermissionUser>

frontend/web/components/feature-summary/ProjectFeatureRow.tsx

@@ -11,6 +11,7 @@ interface ProjectFeatureRowProps {
   index: number
   isSelected?: boolean
   onSelect?: (projectFlag: ProjectFlag) => void
+  onClick?: (projectFlag: ProjectFlag) => void
   className?: string
   actions?: React.ReactNode
 }
@@ -20,11 +21,21 @@ const ProjectFeatureRow: FC<ProjectFeatureRowProps> = ({
   className,
   index,
   isSelected,
+  onClick,
   onSelect,
   projectFlag,
 }) => {
   const { description } = projectFlag
 
+  const handleKeyDown = onClick
+    ? (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onClick(projectFlag)
+        }
+      }
+    : undefined
+
   const hasScannedCodeReferences =
     projectFlag?.code_references_counts?.length > 0
   const codeReferencesCounts =
@@ -40,8 +51,13 @@ const ProjectFeatureRow: FC<ProjectFeatureRowProps> = ({
         className={classNames(
           'd-none d-lg-flex align-items-lg-center flex-lg-row list-item py-0 list-item-xs fs-small',
           className,
+          { clickable: !!onClick },
         )}
         data-test={`cleanup-feature-item-${index}`}
+        onClick={onClick ? () => onClick(projectFlag) : undefined}
+        onKeyDown={handleKeyDown}
+        role={onClick ? 'button' : undefined}
+        tabIndex={onClick ? 0 : undefined}
       >
         {onSelect && (
           <div
@@ -92,7 +108,12 @@ const ProjectFeatureRow: FC<ProjectFeatureRowProps> = ({
       <div
         className={classNames(
           'd-flex flex-column justify-content-center px-2 list-item py-1 d-lg-none',
+          { clickable: !!onClick },
         )}
+        onClick={onClick ? () => onClick(projectFlag) : undefined}
+        onKeyDown={handleKeyDown}
+        role={onClick ? 'button' : undefined}
+        tabIndex={onClick ? 0 : undefined}
       >
         <div className='d-flex gap-2 align-items-center'>
           {onSelect && (