refactor: Prevent duplicate features list GETS (#6927)

Author: kyle-ssg

frontend/common/stores/feature-list-store.ts

@@ -854,7 +854,7 @@ const controller = {
       store.projectId = projectId
       store.environmentId = environmentId
       store.page = page
-      store.filter = filter
+      store.filter = filter || {}
       let filterUrl = ''
       const { feature } = Utils.fromParam()
       if (Object.keys(store.filter).length) {

frontend/common/utils/featureFilterParams.ts

@@ -169,6 +169,6 @@ export function getFiltersFromParams(
         ? TagStrategy.UNION
         : TagStrategy.INTERSECTION,
     tags: parseIntArray(params.tags),
-    value_search: parseStringParam(params.value_search, '') || null,
+    value_search: parseStringParam(params.value_search, ''),
   }
 }

frontend/web/components/PanelSearch.tsx

@@ -307,15 +307,16 @@ const PanelSearch = <T,>(props: PanelSearchProps<T>): ReactElement => {
       <div
         id={props.id}
         className={classNames('search-list', props.listClassName)}
-        style={isLoading ? { opacity: 0.5 } : {}}
       >
         {props.header}
         {isLoading && (!filteredItems || !items) ? (
           <div className='text-center'>
             <Loader />
           </div>
         ) : filteredItems && filteredItems.length ? (
-          renderContainer(filteredItems)
+          <div style={isLoading ? { opacity: 0.5 } : undefined}>
+            {renderContainer(filteredItems)}
+          </div>
         ) : renderNoResults && !search ? (
           renderNoResults
         ) : (

frontend/web/components/pages/features/FeaturesPage.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useCallback, useEffect, useMemo } from 'react'
+import cloneDeep from 'lodash/cloneDeep'
 import { useHistory } from 'react-router-dom'
 import CreateFlagModal from 'components/modals/create-feature'
 import Constants from 'common/constants'
@@ -87,8 +88,9 @@ const FeaturesPage: FC<FeaturesPageProps> = ({
     getEnvironment,
     project,
   } = useProjectEnvironments(projectId)
-  const { data, error, isFetching, isLoading, refetch } =
+  const { currentData, data, error, isFetching, isLoading, refetch } =
     useFeatureListWithApiKey(effectiveFilters, page, environmentId, projectId)
+  const isDataStale = !!data && !currentData
 
   // Backward compatibility: Populate ProjectStore for legacy components (CreateFlag)
   // TODO: Remove this when CreateFlag is migrated to RTK Query
@@ -98,31 +100,21 @@ const FeaturesPage: FC<FeaturesPageProps> = ({
     }
   }, [projectId])
 
-  // Backward compatibility: Populate FeatureListStore for legacy components (CreateFlag modal)
-  // Must pass current filters/search/page so FeatureListStore contains the same features
-  // that RTK Query displays. Otherwise editing features will crash because they're not in the store.
-  // TODO: Remove this when CreateFlag is migrated to RTK Query
   useEffect(() => {
-    if (projectId && environmentId) {
-      AppActions.getFeatures(
-        projectId,
-        environmentId,
-        true,
-        effectiveFilters.search,
-        effectiveFilters.sort,
-        page,
-        {
-          group_owners: effectiveFilters.group_owners?.join(',') || undefined,
-          is_archived: effectiveFilters.showArchived,
-          is_enabled: effectiveFilters.is_enabled,
-          owners: effectiveFilters.owners?.join(',') || undefined,
-          tag_strategy: effectiveFilters.tag_strategy,
-          tags: effectiveFilters.tags?.join(',') || undefined,
-          value_search: effectiveFilters.value_search,
-        },
-      )
+    if (data && environmentId) {
+      // TODO: Remove this when CreateFlag is migrated to RTK Query
+      // This currently avoids duplicate api calls
+      FeatureListStore.envId = environmentId
+      FeatureListStore.projectId = projectId
+      FeatureListStore.environmentId = environmentId
+      FeatureListStore.model = {
+        features: cloneDeep(data.results),
+        keyedEnvironmentFeatures: cloneDeep(data.environmentStates),
+      }
+      FeatureListStore.paging = { ...data.pagination }
+      FeatureListStore.loaded()
     }
-  }, [projectId, environmentId, page, effectiveFilters])
+  }, [data, environmentId, projectId])
 
   // Force re-fetch when legacy Flux store updates features
   // TODO: Remove when all feature mutations use RTK Query
@@ -317,7 +309,7 @@ const FeaturesPage: FC<FeaturesPageProps> = ({
           id='features-list'
           renderSearchWithNoResults
           itemHeight={65}
-          isLoading={isLoading}
+          isLoading={isLoading || isDataStale}
           paging={paging}
           header={renderHeader()}
           nextPage={handleNextPage}

frontend/web/components/tables/TableValueFilter.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useMemo, useRef, useState } from 'react'
+import React, { FC, useEffect } from 'react'
 import TableFilter from './TableFilter'
 import Utils from 'common/utils/utils'
 import InputGroup from 'components/base/forms/InputGroup'
@@ -38,7 +38,7 @@ const TableTagFilter: FC<TableFilterType> = ({
     value?.valueSearch || '',
   )
   useEffect(() => {
-    if (search !== value.valueSearch) {
+    if ((search || '') !== (value.valueSearch || '')) {
       onChange({
         enabled: value.enabled,
         valueSearch: search,