feat: Redesign Compare Environments page

frontend/common/services/useFeatureState.ts

@@ -3,6 +3,7 @@ import { Req } from 'common/types/requests'
 import { service } from 'common/service'
 import Utils from 'common/utils/utils'
 import { getFeatureSegment } from './useFeatureSegment'
+import { recursivePageGet } from 'common/utils/recursivePageGet'
 import { getStore } from 'common/store'
 export const addFeatureSegmentsToFeatureStates = async (v) => {
   if (typeof v.feature_segment !== 'number') {
@@ -22,6 +23,18 @@ export const featureStateService = service
   })
   .injectEndpoints({
     endpoints: (builder) => ({
+      getAllEnvironmentFeatureStates: builder.query<
+        Res['featureStates'],
+        Req['getAllEnvironmentFeatureStates']
+      >({
+        providesTags: [{ id: 'LIST', type: 'FeatureState' }],
+        queryFn: async (query, _baseQueryApi, _extraOptions, baseQuery) =>
+          recursivePageGet<FeatureState>(
+            `environments/${query.environmentKey}/featurestates/?page_size=999`,
+            null,
+            baseQuery,
+          ),
+      }),
       getFeatureStates: builder.query<
         Res['featureStates'],
         Req['getFeatureStates']
@@ -92,5 +105,8 @@ export async function updateFeatureState(
   )
 }
 
-export const { useGetFeatureStatesQuery, useUpdateFeatureStateMutation } =
-  featureStateService
+export const {
+  useGetAllEnvironmentFeatureStatesQuery,
+  useGetFeatureStatesQuery,
+  useUpdateFeatureStateMutation,
+} = featureStateService

frontend/common/services/useProjectFlag.ts

@@ -1,38 +1,14 @@
-import { PagedResponse, ProjectFlag, Res } from 'common/types/responses'
+import { ProjectFlag, Res } from 'common/types/responses'
 import { Req } from 'common/types/requests'
 import { service } from 'common/service'
 import Utils from 'common/utils/utils'
 import { sortMultivariateOptions } from 'common/utils/multivariate'
+import { recursivePageGet } from 'common/utils/recursivePageGet'
 
 /**
  * Number of features to display per page in the features list.
  */
 export const FEATURES_PAGE_SIZE = 50
-
-function recursivePageGet(
-  url: string,
-  parentRes: null | PagedResponse<ProjectFlag>,
-  baseQuery: (arg: unknown) => any, // matches rtk types,
-) {
-  return baseQuery({
-    method: 'GET',
-    url,
-  }).then((res: Res['projectFlags']) => {
-    let response
-    if (parentRes) {
-      response = {
-        ...parentRes,
-        results: parentRes.results.concat(res.results),
-      }
-    } else {
-      response = res
-    }
-    if (res.next) {
-      return recursivePageGet(res.next, response, baseQuery)
-    }
-    return Promise.resolve(response)
-  })
-}
 export const projectFlagService = service
   .enhanceEndpoints({
     addTagTypes: ['ProjectFlag', 'FeatureList', 'FeatureState', 'Environment'],
@@ -158,7 +134,7 @@ export const projectFlagService = service
           },
         ],
         queryFn: async (args, _, _2, baseQuery) => {
-          return await recursivePageGet(
+          return await recursivePageGet<ProjectFlag>(
             `projects/${args.project}/features/?${Utils.toParam({
               ...args,
               page_size: 999,

frontend/common/types/requests.ts

@@ -758,6 +758,9 @@ export type Req = {
     environment?: number
     feature?: number
   }
+  getAllEnvironmentFeatureStates: {
+    environmentKey: string
+  }
   getFeatureSegment: { id: number }
   getSamlConfiguration: { name: string }
   getSamlConfigurations: { organisation_id: number }

frontend/common/utils/recursivePageGet.ts

@@ -0,0 +1,28 @@
+import { PagedResponse } from 'common/types/responses'
+
+// Fetches every page of a paginated endpoint through an RTK Query baseQuery,
+// following `next` links and concatenating `results`. Returns the queryFn
+// contract: `{ data }` with the merged response, or `{ error }` on failure.
+export function recursivePageGet<T>(
+  url: string,
+  parentRes: null | PagedResponse<T>,
+  baseQuery: (
+    arg: unknown,
+  ) => MaybePromise<QueryReturnValue<PagedResponse<T>, unknown>>,
+): Promise<QueryReturnValue<PagedResponse<T>, unknown>> {
+  return baseQuery({
+    method: 'GET',
+    url,
+  }).then((res: { data?: PagedResponse<T>; error?: any }) => {
+    if (res.error || !res.data) {
+      return res
+    }
+    const response = parentRes
+      ? { ...res.data, results: parentRes.results.concat(res.data.results) }
+      : res.data
+    if (response.next) {
+      return recursivePageGet(response.next, response, baseQuery)
+    }
+    return { data: response }
+  })
+}