dedupe recent filters

Author: mdvictor

packages/scenes/src/variables/adhoc/AdHocFiltersRecommendations.test.tsx

@@ -48,6 +48,28 @@ describe('AdHocFiltersRecommendations', () => {
       });
     });
 
+    it('should deduplicate recentFilters loaded from browser storage', async () => {
+      const duplicatedFilters = [
+        { key: 'pod', operator: '=', value: 'abc' },
+        { key: 'cluster', operator: '=', value: 'us-east' },
+        { key: 'pod', operator: '=', value: 'abc' },
+      ];
+      localStorage.setItem(RECENT_FILTERS_KEY, JSON.stringify(duplicatedFilters));
+
+      const { filtersVar } = setup({
+        drilldownRecommendationsEnabled: true,
+      });
+
+      await waitFor(() => {
+        const recommendations = filtersVar.getRecommendations();
+        expect(recommendations).toBeDefined();
+        expect(recommendations?.state.recentFilters).toEqual([
+          { key: 'cluster', operator: '=', value: 'us-east' },
+          { key: 'pod', operator: '=', value: 'abc' },
+        ]);
+      });
+    });
+
     it('should set empty recentFilters when browser storage is empty', async () => {
       const { filtersVar } = setup({
         drilldownRecommendationsEnabled: true,
@@ -113,6 +135,59 @@ describe('AdHocFiltersRecommendations', () => {
       expect(JSON.parse(storedFilters!)).toHaveLength(MAX_STORED_RECENT_DRILLDOWNS);
     });
 
+    it('should deduplicate when the same filter is stored multiple times', async () => {
+      const { filtersVar } = setup({
+        drilldownRecommendationsEnabled: true,
+        filters: [{ key: 'cluster', value: 'us-east', operator: '=' }],
+      });
+
+      let recommendations: AdHocFiltersRecommendations | undefined;
+      await waitFor(() => {
+        recommendations = filtersVar.getRecommendations();
+        expect(recommendations).toBeDefined();
+      });
+
+      const filter: AdHocFilterWithLabels = { key: 'cluster', value: 'us-east', operator: '=' };
+
+      act(() => {
+        recommendations!.storeRecentFilter(filter);
+        recommendations!.storeRecentFilter(filter);
+        recommendations!.storeRecentFilter(filter);
+      });
+
+      const storedFilters = JSON.parse(localStorage.getItem(RECENT_FILTERS_KEY)!);
+      expect(storedFilters).toHaveLength(1);
+      expect(storedFilters[0]).toEqual(filter);
+    });
+
+    it('should move re-added filter to the most recent position and not duplicate', async () => {
+      const { filtersVar } = setup({
+        drilldownRecommendationsEnabled: true,
+        filters: [{ key: 'cluster', value: '1', operator: '=' }],
+      });
+
+      let recommendations: AdHocFiltersRecommendations | undefined;
+      await waitFor(() => {
+        recommendations = filtersVar.getRecommendations();
+        expect(recommendations).toBeDefined();
+      });
+
+      const filterA: AdHocFilterWithLabels = { key: 'cluster', value: 'a', operator: '=' };
+      const filterB: AdHocFilterWithLabels = { key: 'cluster', value: 'b', operator: '=' };
+      const filterC: AdHocFilterWithLabels = { key: 'cluster', value: 'c', operator: '=' };
+
+      act(() => {
+        recommendations!.storeRecentFilter(filterA);
+        recommendations!.storeRecentFilter(filterB);
+        recommendations!.storeRecentFilter(filterC);
+        recommendations!.storeRecentFilter(filterA);
+      });
+
+      const storedFilters = JSON.parse(localStorage.getItem(RECENT_FILTERS_KEY)!);
+      expect(storedFilters).toHaveLength(3);
+      expect(storedFilters).toEqual([filterB, filterC, filterA]);
+    });
+
     it('should update state with limited recent filters for display', async () => {
       const { filtersVar } = setup({
         drilldownRecommendationsEnabled: true,

packages/scenes/src/variables/adhoc/AdHocFiltersRecommendations.tsx

@@ -28,6 +28,23 @@ export interface AdHocFiltersRecommendationsState extends SceneObjectState {
   recommendedFilters?: AdHocFilterWithLabels[];
 }
 
+/**
+ * Keeps only the last occurrence of each unique (key, operator, value) triple,
+ * preserving the most-recent-wins ordering.
+ */
+function deduplicateFilters(filters: AdHocFilterWithLabels[]): AdHocFilterWithLabels[] {
+  return filters.reduce<AdHocFilterWithLabels[]>((acc, f) => {
+    const idx = acc.findIndex(
+      (existing) => existing.key === f.key && existing.operator === f.operator && existing.value === f.value
+    );
+    if (idx !== -1) {
+      acc.splice(idx, 1);
+    }
+    acc.push(f);
+    return acc;
+  }, []);
+}
+
 export class AdHocFiltersRecommendations extends SceneObjectBase<AdHocFiltersRecommendationsState> {
   static Component = AdHocFiltersRecommendationsRenderer;
 
@@ -149,7 +166,8 @@ export class AdHocFiltersRecommendations extends SceneObjectBase<AdHocFiltersRec
     const response = await adhoc.getFiltersApplicabilityForQueries(storedFilters, queries ?? []);
 
     if (!response) {
-      this.setState({ recentFilters: storedFilters.slice(-MAX_RECENT_DRILLDOWNS) });
+      const deduped = deduplicateFilters(storedFilters);
+      this.setState({ recentFilters: deduped.slice(-MAX_RECENT_DRILLDOWNS) });
       return;
     }
 
@@ -158,14 +176,14 @@ export class AdHocFiltersRecommendations extends SceneObjectBase<AdHocFiltersRec
       applicabilityMap.set(item.key, item.applicable !== false);
     });
 
-    const applicableFilters = storedFilters
-      .filter((f) => {
-        const isApplicable = applicabilityMap.get(f.key);
-        return isApplicable === undefined || isApplicable === true;
-      })
-      .slice(-MAX_RECENT_DRILLDOWNS);
+    const applicableFilters = storedFilters.filter((f) => {
+      const isApplicable = applicabilityMap.get(f.key);
+      return isApplicable === undefined || isApplicable === true;
+    });
+
+    const recentFilters = deduplicateFilters(applicableFilters).slice(-MAX_RECENT_DRILLDOWNS);
 
-    this.setState({ recentFilters: applicableFilters });
+    this.setState({ recentFilters });
   }
 
   /**
@@ -177,7 +195,11 @@ export class AdHocFiltersRecommendations extends SceneObjectBase<AdHocFiltersRec
     const storedFilters = store.get(key);
     const allRecentFilters = storedFilters ? JSON.parse(storedFilters) : [];
 
-    const updatedStoredFilters = [...allRecentFilters, filter].slice(-MAX_STORED_RECENT_DRILLDOWNS);
+    const dedupedFilters = allRecentFilters.filter(
+      (f: AdHocFilterWithLabels) =>
+        !(f.key === filter.key && f.operator === filter.operator && f.value === filter.value)
+    );
+    const updatedStoredFilters = [...dedupedFilters, filter].slice(-MAX_STORED_RECENT_DRILLDOWNS);
     store.set(key, JSON.stringify(updatedStoredFilters));
 
     const adhoc = this._adHocFilter;