refactor: restore FeaturesPage RTK Query migration with MV and CR fixes

frontend/common/hooks/useFeatureListWithApiKey.ts

@@ -0,0 +1,40 @@
+import { useMemo } from 'react'
+import { skipToken } from '@reduxjs/toolkit/query'
+import { useGetFeatureListQuery } from 'common/services/useProjectFlag'
+import { useProjectEnvironments } from './useProjectEnvironments'
+import { buildApiFilterParams } from 'common/utils/featureFilterParams'
+import type { FilterState } from 'common/types/featureFilters'
+
+/**
+ * Fetches filtered feature list, accepting environment API key instead of numeric ID.
+ *
+ * TODO: This wrapper will be removed once we standardize environmentId and environmentApiKey on RouteContext.
+ */
+export function useFeatureListWithApiKey(
+  filters: FilterState,
+  page: number,
+  environmentApiKey: string | undefined,
+  projectId: number | undefined,
+): ReturnType<typeof useGetFeatureListQuery> {
+  const { getEnvironmentIdFromKey, isLoading: isLoadingEnvironments } =
+    useProjectEnvironments(projectId!)
+
+  const apiParams = useMemo(() => {
+    if (!environmentApiKey || !projectId || !getEnvironmentIdFromKey) {
+      return null
+    }
+    return buildApiFilterParams(
+      filters,
+      page,
+      environmentApiKey,
+      projectId,
+      getEnvironmentIdFromKey,
+    )
+  }, [filters, page, environmentApiKey, projectId, getEnvironmentIdFromKey])
+
+  return useGetFeatureListQuery(apiParams ?? skipToken, {
+    refetchOnFocus: true,
+    refetchOnMountOrArgChange: true,
+    skip: isLoadingEnvironments,
+  })
+}

frontend/common/hooks/usePageTracking.ts

@@ -0,0 +1,84 @@
+import { useEffect } from 'react'
+
+/**
+ * Options for configuring page tracking behavior.
+ */
+export type PageTrackingOptions = {
+  /** The page constant name from Constants.pages */
+  pageName: string
+  /** Context data for tracking and storage persistence */
+  context?: {
+    environmentId?: string
+    projectId?: number
+    organisationId?: number
+  }
+  /** Whether to save context to AsyncStorage (default: false) */
+  saveToStorage?: boolean
+  /** Custom dependencies for re-tracking on changes */
+  deps?: React.DependencyList
+}
+
+/**
+ * Unified hook for tracking page views with optional context persistence.
+ *
+ * Consolidates both page tracking and environment context storage into a single,
+ * flexible hook. Automatically calls API.trackPage and optionally persists
+ * environment context to AsyncStorage.
+ *
+ * @param options - Configuration object for page tracking
+ *
+ * @example
+ * ```tsx
+ * // Basic page tracking only
+ * usePageTracking({ pageName: Constants.pages.FEATURES })
+ *
+ * // With context and storage persistence
+ * usePageTracking({
+ *   pageName: Constants.pages.FEATURES,
+ *   context: { environmentId, projectId, organisationId },
+ *   saveToStorage: true,
+ * })
+ *
+ * // With custom dependencies
+ * usePageTracking({
+ *   pageName: Constants.pages.FEATURES,
+ *   context: { projectId },
+ *   deps: [projectId, someOtherDep],
+ * })
+ * ```
+ */
+export function usePageTracking(options: PageTrackingOptions): void {
+  const { context, deps = [], pageName, saveToStorage = false } = options
+
+  // Track page view
+  useEffect(() => {
+    if (typeof API !== 'undefined' && API.trackPage) {
+      API.trackPage(pageName)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps)
+
+  // Persist environment context to storage if enabled
+  useEffect(() => {
+    if (saveToStorage && context) {
+      if (typeof AsyncStorage !== 'undefined' && AsyncStorage.setItem) {
+        AsyncStorage.setItem(
+          'lastEnv',
+          JSON.stringify({
+            environmentId: context.environmentId,
+            orgId: context.organisationId,
+            projectId: context.projectId,
+          }),
+        )
+      }
+    }
+    // We intentionally use individual properties instead of context object
+    // to prevent re-runs when object reference changes but values don't
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    saveToStorage,
+    context?.environmentId,
+    context?.organisationId,
+    context?.projectId,
+  ])
+}

frontend/common/hooks/useProjectEnvironments.ts

@@ -0,0 +1,58 @@
+import { useCallback, useMemo } from 'react'
+import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
+import { useGetProjectQuery } from 'common/services/useProject'
+import type { Environment, Project } from 'common/types/responses'
+
+interface UseProjectEnvironmentsResult {
+  project: Project | undefined
+  environments: Environment[]
+  getEnvironmentIdFromKey: (apiKey: string) => number | undefined
+  getEnvironment: (apiKey: string) => Environment | undefined
+  isLoading: boolean
+  error: Error | undefined
+}
+
+/** Fetches project and environment data with accessor functions for API key lookups. */
+export function useProjectEnvironments(
+  projectId: number,
+): UseProjectEnvironmentsResult {
+  const {
+    data: project,
+    error: projectError,
+    isLoading: isLoadingProject,
+  } = useGetProjectQuery({ id: projectId }, { skip: !projectId })
+
+  const {
+    data: environmentsData,
+    error: environmentsError,
+    isLoading: isLoadingEnvironments,
+  } = useGetEnvironmentsQuery({ projectId }, { skip: !projectId })
+
+  const environments = useMemo(
+    () => environmentsData?.results ?? [],
+    [environmentsData?.results],
+  )
+
+  const getEnvironmentIdFromKey = useCallback(
+    (apiKey: string): number | undefined => {
+      return environments.find((env) => env.api_key === apiKey)?.id
+    },
+    [environments],
+  )
+
+  const getEnvironment = useCallback(
+    (apiKey: string): Environment | undefined => {
+      return environments.find((env) => env.api_key === apiKey)
+    },
+    [environments],
+  )
+
+  return {
+    environments,
+    error: projectError || environmentsError,
+    getEnvironment,
+    getEnvironmentIdFromKey,
+    isLoading: isLoadingProject || isLoadingEnvironments,
+    project,
+  }
+}

frontend/common/providers/FeatureListProvider.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import FeatureListStore from 'common/stores/feature-list-store'
 import ProjectStore from 'common/stores/project-store'
+import Utils from 'common/utils/utils'
 
 const FeatureListProvider = class extends React.Component {
   static displayName = 'FeatureListProvider'
@@ -147,7 +148,10 @@ const FeatureListProvider = class extends React.Component {
       projectFlag,
       {
         ...environmentFlag,
-        multivariate_feature_state_values: flag.multivariate_options,
+        multivariate_feature_state_values: Utils.mapMvOptionsToStateValues(
+          flag.multivariate_options,
+          environmentFlag.multivariate_feature_state_values,
+        ),
       },
       segmentOverrides,
       'SEGMENT',
@@ -193,30 +197,30 @@ const FeatureListProvider = class extends React.Component {
   ) => {
     AppActions.editFeatureMv(
       projectId,
-      Object.assign({}, projectFlag, flag, {
-        multivariate_options:
-          flag.multivariate_options &&
-          flag.multivariate_options.map((v) => {
-            const matchingProjectVariate =
-              (projectFlag.multivariate_options &&
-                projectFlag.multivariate_options.find((p) => p.id === v.id)) ||
-              v
+      Object.assign({}, projectFlag, flag),
+      (newProjectFlag) => {
+        const mvStateValues = newProjectFlag.multivariate_options?.map(
+          (mvOption) => {
+            const existing =
+              environmentFlag.multivariate_feature_state_values?.find(
+                (e) => e.multivariate_feature_option === mvOption.id,
+              )
             return {
-              ...v,
-              default_percentage_allocation:
-                matchingProjectVariate.default_percentage_allocation,
+              id: existing?.id,
+              multivariate_feature_option: mvOption.id,
+              percentage_allocation:
+                mvOption.default_percentage_allocation ?? 0,
             }
-          }),
-      }),
-      (newProjectFlag) => {
+          },
+        )
         AppActions.editEnvironmentFlagChangeRequest(
           projectId,
           environmentId,
           flag,
           newProjectFlag,
           {
             ...environmentFlag,
-            multivariate_feature_state_values: flag.multivariate_options,
+            multivariate_feature_state_values: mvStateValues,
           },
           segmentOverrides,
           changeRequest,