Set correctly the filters in History Query when selecting a Query Preview with filters

packages/x-components/src/x-modules/history-queries/store/__tests__/actions.spec.ts

@@ -16,6 +16,7 @@ import {
   HistoryQueriesMutations,
   HistoryQueriesState
 } from '../types';
+import { InternalSearchResponse } from '../../../search/index';
 import { resetHistoryQueriesStateWith } from './utils';
 
 describe('testing history queries module actions', () => {
@@ -279,12 +280,43 @@ describe('testing history queries module actions', () => {
     const requestFilters: Record<string, Filter[]> = {
       categoryPaths: [
         {
-          id: 'categoryIds:c018019b6',
+          id: 'categoryIds:66dd06d9f',
           selected: true,
           modelName: 'HierarchicalFilter'
         }
       ]
     };
+    const selectedFilters: Filter[] = [
+      {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        facetId: 'categoryPaths',
+        id: 'categoryIds:66dd06d9f',
+        label: 'suede',
+        modelName: 'HierarchicalFilter',
+        selected: true,
+        totalResults: 2
+      }
+    ];
+    const responseFacets: InternalSearchResponse['facets'] = [
+      {
+        filters: [
+          {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            facetId: 'categoryPaths',
+            id: 'categoryIds:66dd06d9f',
+            label: 'suede',
+            modelName: 'HierarchicalFilter',
+            selected: true,
+            totalResults: 2
+          }
+        ],
+        id: 'categoryPaths',
+        label: 'categoryPaths',
+        modelName: 'HierarchicalFacet'
+      }
+    ];
     let gato: HistoryQuery, perro: HistoryQuery;
 
     beforeEach(() => {
@@ -369,9 +401,8 @@ describe('testing history queries module actions', () => {
     });
 
     // eslint-disable-next-line max-len
-    it('updates a history query if search response change because a filter is selected', async () => {
+    it('updates a history query when the search response changes because a filter is selected', async () => {
       gato.totalResults = 50;
-      const selectedFilters = Object.values(requestFilters)[0];
       resetStateWith({ historyQueries: [gato, perro] });
       await store.dispatch('updateHistoryQueriesWithSearchResponse', {
         request: {
@@ -380,6 +411,33 @@ describe('testing history queries module actions', () => {
           filters: requestFilters
         },
         status: 'success',
+        facets: responseFacets,
+        results,
+        totalResults
+      });
+      expectHistoryQueriesToEqual([{ ...gato, totalResults, selectedFilters }, perro]);
+    });
+
+    // eslint-disable-next-line max-len
+    it('updates a history query when the search response changes although the facet id is unknown', async () => {
+      gato.totalResults = 50;
+      resetStateWith({ historyQueries: [gato, perro] });
+      await store.dispatch('updateHistoryQueriesWithSearchResponse', {
+        request: {
+          query: 'gato',
+          page: 1,
+          filters: {
+            __unknown__: [
+              {
+                id: 'categoryIds:66dd06d9f',
+                selected: true,
+                modelName: 'RawFilter'
+              }
+            ]
+          }
+        },
+        status: 'success',
+        facets: responseFacets,
         results,
         totalResults
       });

packages/x-components/src/x-modules/history-queries/store/actions/update-history-queries-with-search-response.action.ts

@@ -31,7 +31,10 @@ export const updateHistoryQueriesWithSearchResponse: HistoryQueriesXStoreModule[
         const historyQuery = state.historyQueries[indexOfHistoryQuery];
         const isCurrentSessionHistoryQuery = historyQuery.timestamp > state.sessionTimeStampInMs;
         if (!isCurrentSessionHistoryQuery || historyQuery.totalResults == null || searchResponse) {
-          const filters = createHistoryQueriesFiltersList(searchResponse.request.filters);
+          const filters = getHistoryQueriesFiltersList(
+            searchResponse.facets,
+            searchResponse.request.filters
+          );
 
           const newHistoryQueries = state.historyQueries.slice();
           newHistoryQueries[indexOfHistoryQuery] = {
@@ -46,20 +49,39 @@ export const updateHistoryQueriesWithSearchResponse: HistoryQueriesXStoreModule[
   };
 
 /**
- * Take filters from the request and push them into a list.
+ * Creates a selected filters list by comparing request filters and response facets.
+ * Uses the 'filter.id' to match and merge the objects in a single one with all the keys.
  *
+ * @param responseFacets - Facets from the response.
  * @param requestFilters - Filters from the request.
  *
  * @returns A list of selected filters in the history query.
  *
  */
-function createHistoryQueriesFiltersList(
+function getHistoryQueriesFiltersList(
+  responseFacets: InternalSearchResponse['facets'],
   requestFilters: InternalSearchResponse['request']['filters']
 ): Filter[] {
-  return requestFilters
-    ? Object.values(requestFilters).reduce((accFilters, filters) => {
-        accFilters.push(...filters);
+  if (!requestFilters || !responseFacets) {
+    return [];
+  } else {
+    return Object.entries(requestFilters).flatMap(([facetId, facetFilters]) => {
+      const matchingFacet =
+        facetId !== '__unknown__' ? responseFacets.find(facet => facet.id === facetId) : null;
+
+      return facetFilters.reduce<Filter[]>((accFilters, requestFilter) => {
+        const matchingFilter = matchingFacet
+          ? matchingFacet.filters.find(filter => filter.id === requestFilter.id)
+          : responseFacets
+              .flatMap(facet => facet.filters)
+              .find(filter => filter.id === requestFilter.id);
+
+        if (matchingFilter) {
+          accFilters.push({ ...matchingFilter, selected: requestFilter.selected });
+        }
+
         return accFilters;
-      }, [])
-    : [];
+      }, []);
+    });
+  }
 }