feat: allow queries preview with same query but different filters or params

packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue

@@ -89,8 +89,11 @@
      */
     protected get renderedQueryPreviews(): QueryPreviewInfo[] {
       return this.queriesPreviewInfo.filter(item => {
-        const query = getHashFromQueryPreviewInfo(item);
-        return this.queriesStatus[query] === 'success' || this.queriesStatus[query] === 'loading';
+        const queryPreviewHash = getHashFromQueryPreviewInfo(item);
+        return (
+          this.queriesStatus[queryPreviewHash] === 'success' ||
+          this.queriesStatus[queryPreviewHash] === 'loading'
+        );
       });
     }
 

packages/x-components/src/x-modules/queries-preview/components/query-preview.vue

@@ -156,9 +156,12 @@
     /**
      * Query Preview key converted into a unique id.
      *
+     * @returns The query hash.
      * @internal
      */
-    public queryOfQueryPreviewHash = getHashFromQueryPreviewInfo(this.queryPreviewInfo);
+    public get queryPreviewHash(): string {
+      return getHashFromQueryPreviewInfo(this.queryPreviewInfo);
+    }
 
     /**
      * The computed request object to be used to retrieve the query preview results.
@@ -199,7 +202,7 @@
      * @returns The results preview of the actual query preview.
      */
     public get queryPreviewResults(): Partial<QueryPreviewItem> | undefined {
-      const previewResults = this.previewResults[this.queryOfQueryPreviewHash];
+      const previewResults = this.previewResults[this.queryPreviewHash];
       return previewResults?.results
         ? {
             ...previewResults,
@@ -236,12 +239,12 @@
         }
       );
 
-      const cachedQueryPreview = this.previewResults[this.queryOfQueryPreviewHash];
+      const cachedQueryPreview = this.previewResults[this.queryPreviewHash];
 
       // If the query has been saved it will emit load instead of the emitting the updated request.
       if (cachedQueryPreview?.status === 'success') {
-        this.$emit('load', this.queryOfQueryPreviewHash);
-        this.$x.emit('QueryPreviewMounted', this.queryOfQueryPreviewHash, {
+        this.$emit('load', this.queryPreviewHash);
+        this.$x.emit('QueryPreviewMounted', this.queryPreviewHash, {
           priority: 0,
           replaceable: false
         });
@@ -262,7 +265,7 @@
       this.emitQueryPreviewRequestUpdated.cancel();
       this.$x.emit(
         'QueryPreviewUnmounted',
-        { query: this.queryOfQueryPreviewHash, cache: this.persistInCache },
+        { query: this.queryPreviewHash, cache: this.persistInCache },
         {
           priority: 0,
           replaceable: false
@@ -295,9 +298,9 @@
     @Watch('queryPreviewResults.status')
     emitLoad(status: RequestStatus | undefined): void {
       if (status === 'success') {
-        this.$emit(this.results?.length ? 'load' : 'error', this.queryOfQueryPreviewHash);
+        this.$emit(this.results?.length ? 'load' : 'error', this.queryPreviewHash);
       } else if (status === 'error') {
-        this.$emit('error', this.queryOfQueryPreviewHash);
+        this.$emit('error', this.queryPreviewHash);
       }
     }
   }

packages/x-components/src/x-modules/queries-preview/events.types.ts

@@ -29,15 +29,11 @@ export interface QueriesPreviewXEvents {
   /**
    * The query preview has been mounted.
    * Payload: The query preview query as a key converted into a unique id (query hash).
-   * When QueryPreviewMounted is emitted, the instances count is increased.
    */
   QueryPreviewMounted: string;
   /**
    * The query preview has been unmounted.
    * Payload: The query preview's unique id (query hash) and its cache value.
-   * When QueryPreviewUnmounted is emitted, the instance count for that query hash
-   * will be decreased. If the cache is set to false, the query will be removed
-   * safely from the state since there will be no component showing that data.
    */
   QueryPreviewUnmounted: { query: string; cache: boolean };
 }

packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.ts

@@ -44,7 +44,7 @@ export const fetchAndSaveQueryPreview: QueriesPreviewXStoreModule['actions']['fe
       .catch(error => {
         // eslint-disable-next-line no-console
         console.error(error);
-        const query = getHashFromQueryPreviewItem(queryPreviewItem);
-        commit('setStatus', { query, status: 'error' });
+        const queryPreviewHash = getHashFromQueryPreviewItem(queryPreviewItem);
+        commit('setStatus', { queryPreviewHash, status: 'error' });
       });
   };

packages/x-components/src/x-modules/queries-preview/store/module.ts

@@ -26,34 +26,37 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
   }),
   getters: { loadedQueriesPreview },
   mutations: {
-    clearQueryPreview(state, query) {
-      Vue.delete(state.queriesPreview, query);
+    clearQueryPreview(state, queryPreviewHash) {
+      Vue.delete(state.queriesPreview, queryPreviewHash);
     },
     setParams(state, params) {
       state.params = params;
     },
     setQueryPreviewCached(state, queryPreview) {
       Vue.set(state.queriesPreview, getHashFromQueryPreviewItem(queryPreview), queryPreview);
     },
-    setStatus(state, { query, status }) {
-      state.queriesPreview[query].status = status;
+    setStatus(state, { queryPreviewHash, status }) {
+      state.queriesPreview[queryPreviewHash].status = status;
     },
     setSelectedQueryPreview(state, selectedQueryPreview) {
       state.selectedQueryPreview = selectedQueryPreview;
     },
     setConfig,
     mergeConfig,
-    addQueryPreviewInstance(state, query: string) {
-      if (state.queriesPreview[query]) {
-        state.queriesPreview[query].instances += 1;
+    addQueryPreviewInstance(state, queryPreviewHash: string) {
+      if (state.queriesPreview[queryPreviewHash]) {
+        state.queriesPreview[queryPreviewHash].instances += 1;
       }
     },
-    removeQueryPreviewInstance(state, { query, cache }: { query: string; cache: boolean }) {
-      if (state.queriesPreview[query]) {
-        state.queriesPreview[query].instances -= 1;
+    removeQueryPreviewInstance(
+      state,
+      { queryPreviewHash, cache }: { queryPreviewHash: string; cache: boolean }
+    ) {
+      if (state.queriesPreview[queryPreviewHash]) {
+        state.queriesPreview[queryPreviewHash].instances -= 1;
 
-        if (!cache && state.queriesPreview[query].instances === 0) {
-          Vue.delete(state.queriesPreview, query);
+        if (!cache && state.queriesPreview[queryPreviewHash].instances === 0) {
+          Vue.delete(state.queriesPreview, queryPreviewHash);
         }
       }
     }

packages/x-components/src/x-modules/queries-preview/store/types.ts

@@ -21,7 +21,7 @@ export interface QueryPreviewItem extends StatusState {
   request: SearchRequest;
   /** Results of the query preview request. */
   results: Result[];
-  /** Display tagging info */
+  /** Display tagging info. */
   displayTagging?: TaggingRequest;
   /** The total number of results for the search query. */
   totalResults: number;
@@ -84,9 +84,9 @@ export interface QueriesPreviewMutations extends ConfigMutations<QueriesPreviewS
   /**
    * Removes a query preview entry from the queries preview's dictionary.
    *
-   * @param query - Query whose entry will be removed.
+   * @param queryPreviewHash - Query hash whose entry will be removed.
    */
-  clearQueryPreview(query: string): void;
+  clearQueryPreview(queryPreviewHash: string): void;
   /**
    * Sets the extra params of the module.
    *
@@ -111,8 +111,14 @@ export interface QueriesPreviewMutations extends ConfigMutations<QueriesPreviewS
    * @param selectedQueryPreview - The selected query preview to save to the state.
    */
   setSelectedQueryPreview(selectedQueryPreview: QueryPreviewInfo | null): void;
-  addQueryPreviewInstance(query: string): void;
-  removeQueryPreviewInstance({ query, cache }: { query: string; cache: boolean }): void;
+  addQueryPreviewInstance(queryPreviewHash: string): void;
+  removeQueryPreviewInstance({
+    queryPreviewHash,
+    cache
+  }: {
+    queryPreviewHash: string;
+    cache: boolean;
+  }): void;
 }
 
 /**
@@ -169,9 +175,9 @@ export type QueriesPreviewActionContext = XActionContext<
  */
 export interface QueryPreviewStatusPayload {
   /**
-   * The query whose request status to modify.
+   * The query hash whose request status to modify.
    */
-  query: string;
+  queryPreviewHash: string;
   /**
    * The new request status.
    */

packages/x-components/src/x-modules/queries-preview/utils/__tests__/utils.spec.ts

@@ -45,6 +45,15 @@ describe('testing queries preview module utils', () => {
       status: 'success',
       request: {
         query: 'tshirt',
+        filters: {
+          fit: [
+            {
+              id: 'fit:regular',
+              modelName: 'RawFilter',
+              selected: true
+            }
+          ]
+        },
         rows: 3
       }
     };
@@ -56,11 +65,11 @@ describe('testing queries preview module utils', () => {
   });
 
   it('should check if a query hash from a QueryPreviewInfo is created correctly', () => {
-    const queryPreviewInfo: QueryPreviewInfo = { query: 'tshirt' };
+    const queryPreviewInfo: QueryPreviewInfo = { query: 'tshirt', filters: ['fit:regular'] };
 
     const queryPreviewHash = getHashFromQueryPreviewInfo(queryPreviewInfo);
 
-    expect(queryPreviewHash).toBe('8f58dcbfc41b2074e9311014903a1a5f');
+    expect(queryPreviewHash).toBe('ba83786514cc76ebfd00da880b8068b2');
   });
 
   // eslint-disable-next-line max-len
@@ -72,12 +81,21 @@ describe('testing queries preview module utils', () => {
       status: 'success',
       request: {
         query: 'tshirt',
+        filters: {
+          fit: [
+            {
+              id: 'fit:regular',
+              modelName: 'RawFilter',
+              selected: true
+            }
+          ]
+        },
         rows: 3
       }
     };
     const queryPreviewItemHash = getHashFromQueryPreviewItem(queryPreviewItem);
 
-    const queryPreviewInfo: QueryPreviewInfo = { query: 'tshirt' };
+    const queryPreviewInfo: QueryPreviewInfo = { query: 'tshirt', filters: ['fit:regular'] };
     const queryPreviewInfoHash = getHashFromQueryPreviewInfo(queryPreviewInfo);
 
     expect(queryPreviewItemHash).toBe(queryPreviewInfoHash);

packages/x-components/src/x-modules/queries-preview/utils/get-hash-from-query-preview.ts

@@ -9,15 +9,12 @@ import { QueryPreviewInfo, QueryPreviewItem } from '../store/index';
  * @returns A unique id that will be used as a key to store the QueryPreviewItem in the state.
  */
 export const getHashFromQueryPreviewItem = (queryPreview: QueryPreviewItem): string => {
-  let queryPreviewFilters = '';
-  if (queryPreview.request.filters) {
-    const queryPreviewFiltersKeys = Object.keys(queryPreview.request.filters);
-    queryPreviewFiltersKeys.forEach(key => {
-      queryPreview.request.filters![key].forEach(filter => {
-        queryPreviewFilters = queryPreviewFilters.concat('-' + filter.id.toString());
-      });
-    });
-  }
+  const queryPreviewFilters = queryPreview.request.filters
+    ? Object.values(queryPreview.request.filters)
+        .flat()
+        .map(filter => filter.id.toString())
+        .join('-')
+    : '';
 
   return md5(queryPreview.request.query.concat(queryPreviewFilters));
 };
@@ -29,12 +26,7 @@ export const getHashFromQueryPreviewItem = (queryPreview: QueryPreviewItem): str
  * @returns A unique id that will be used as a key to check the QueryPreview in the state.
  */
 export const getHashFromQueryPreviewInfo = (queryPreviewInfo: QueryPreviewInfo): string => {
-  let queryPreviewFilters = '';
-  if (queryPreviewInfo.filters) {
-    queryPreviewInfo.filters.forEach(filter => {
-      queryPreviewFilters = queryPreviewFilters.concat('-' + filter);
-    });
-  }
+  const queryPreviewFilters = queryPreviewInfo.filters ? queryPreviewInfo.filters.join('-') : '';
 
   return md5(queryPreviewInfo.query.concat(queryPreviewFilters));
 };