Set cache on queries preview results

packages/x-components/src/views/home/Home.vue

@@ -252,6 +252,7 @@
                   :queriesPreviewInfo="queriesPreviewInfo"
                   #default="{ queryPreviewInfo, totalResults, results }"
                   data-test="brand-recommendation"
+                  :saveCache="true"
                 >
                   <div class="x-flex x-flex-col x-gap-8 x-mb-16">
                     <QueryPreviewButton

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

@@ -22,6 +22,7 @@ function renderQueryPreview({
   queryPreviewInfo = { query: 'milk' },
   location,
   queryFeature,
+  saveCache = false,
   debounceTimeMs = 0,
   template = `<QueryPreview v-bind="$attrs" />`,
   queryPreview = {
@@ -66,7 +67,8 @@ function renderQueryPreview({
         maxItemsToRender,
         queryPreviewInfo,
         queryFeature,
-        debounceTimeMs
+        debounceTimeMs,
+        saveCache
       }
     }
   ).findComponent(QueryPreview);
@@ -101,8 +103,25 @@ describe('query preview', () => {
     expect(getXComponentXModuleName(wrapper.vm)).toBe('queriesPreview');
   });
 
+  it('no sends the `QueryPreviewRequestUpdated` event if saveCache is true, but emits load', () => {
+    const { queryPreviewRequestUpdatedSpy, wrapper } = renderQueryPreview({
+      saveCache: true,
+      queryPreviewInfo: {
+        query: 'shoes',
+        extraParams: { directory: 'Magrathea' },
+        filters: ['fit:regular']
+      }
+    });
+
+    jest.advanceTimersByTime(0); // Wait for first emission.
+    expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
+    expect(wrapper.emitted('load')?.length).toBe(1);
+    expect(wrapper.emitted('load')?.[0]).toEqual(['shoes']);
+  });
+
   it('sends the `QueryPreviewRequestUpdated` event', async () => {
     const { queryPreviewRequestUpdatedSpy, wrapper, updateExtraParams } = renderQueryPreview({
+      saveCache: false,
       queryPreviewInfo: {
         query: 'shoes',
         extraParams: { directory: 'Magrathea' },
@@ -425,6 +444,8 @@ interface RenderQueryPreviewOptions {
   maxItemsToRender?: number;
   /** The query preview info for which preview its results. */
   queryPreviewInfo?: QueryPreviewInfo;
+  /** Boolean to save queries preview in the cache. */
+  saveCache?: boolean;
   /** The location of the query preview in the DOM. */
   location?: string;
   /** The name of the tool that generated the query. */

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

@@ -104,8 +104,8 @@
      *
      * @public
      */
-    @Prop({ default: true })
-    public clearOnDestroy!: boolean;
+    @Prop({ default: false })
+    public saveCache!: boolean;
 
     /**
      * The results preview of the queries preview mounted.
@@ -208,6 +208,19 @@
       }, this.debounceTimeMs);
     }
 
+    /**
+     * Checks whether the current queryPreviewItem query has been saved
+     * in the queriesPreview in the state.
+     *
+     * @internal
+     *
+     * @returns True if the query has been saved.
+     */
+    protected get isSavedQuery(): boolean {
+      const previewItemQuery = this.queryPreviewInfo.query;
+      return !!this.previewResults[previewItemQuery];
+    }
+
     /**
      * Initialises watcher to emit debounced requests, and first value for the requests.
      *
@@ -222,21 +235,26 @@
           }
         }
       );
-      this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
+
+      // If the query has been saved it will emit load instead of the emitting the updated request.
+      if (this.isSavedQuery && this.saveCache) {
+        this.$emit('load', this.queryPreviewInfo.query);
+      } else {
+        this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
+      }
     }
 
     /**
      * Cancels the (remaining) requests when the component is destroyed
      * via the `debounce.cancel()` method.
-     * If the prop 'clearOnDestroy' is set to true, it also removes the QueryPreview
+     * If the prop 'saveCache' is set to false, it also removes the QueryPreview
      * from the state when the component is destroyed.
      *
      * @internal
      */
     protected beforeDestroy(): void {
       this.emitQueryPreviewRequestUpdated.cancel();
-
-      if (this.clearOnDestroy) {
+      if (!this.saveCache) {
         this.$x.emit('QueryPreviewUnmountedHook', this.queryPreviewInfo.query, {
           priority: 0,
           replaceable: false

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

@@ -5,10 +5,10 @@ import { getMockedAdapter, installNewXPlugin } from '../../../../__tests__/utils
 import { SafeStore } from '../../../../store/__tests__/utils';
 import { queriesPreviewXStoreModule } from '../module';
 import {
-  QueriesPreviewState,
+  QueriesPreviewActions,
   QueriesPreviewGetters,
   QueriesPreviewMutations,
-  QueriesPreviewActions,
+  QueriesPreviewState,
   QueryPreviewItem
 } from '../types';
 import { getQueryPreviewRequest } from '../../../../__stubs__/queries-preview-stubs.factory';

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

@@ -14,15 +14,18 @@ import { QueriesPreviewXStoreModule } from '../types';
 export const fetchAndSaveQueryPreview: QueriesPreviewXStoreModule['actions']['fetchAndSaveQueryPreview'] =
   ({ dispatch, commit }, request) => {
     const { query } = request;
+
     if (!query) {
       return;
     }
+
     commit('setQueryPreview', {
       request,
       results: [],
       status: 'loading',
       totalResults: 0
     });
+
     return dispatch('fetchQueryPreview', request)
       .then(response => {
         commit('setQueryPreview', {