Set cache on queries preview results

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

@@ -357,6 +357,7 @@
                     :queries-preview-info="queries.map(q => ({ query: q }))"
                     #default="{ queryPreviewInfo: { query }, results }"
                     queryFeature="semantics"
+                    :clearOnDestroy="true"
                   >
                     <div
                       class="x-flex x-flex-col x-gap-8 x-mb-16"

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

@@ -10,6 +10,7 @@
         @error="flagAsFailed"
         v-bind="$attrs"
         :queryPreviewInfo="queryPreview"
+        :clearOnDestroy="clearOnDestroy"
       >
         <template v-for="(_, slotName) in $scopedSlots" v-slot:[slotName]="scope">
           <slot :name="slotName" v-bind="scope" />
@@ -65,6 +66,15 @@
     @Prop({ required: true })
     public queriesPreviewInfo!: QueryPreviewInfo[];
 
+    /**
+     * Controls whether the QueryPreview should be removed from the state
+     * when the component is destroyed.
+     *
+     * @public
+     */
+    @Prop({ default: false })
+    public clearOnDestroy!: boolean;
+
     /**
      * Contains the status of the preview requests, indexed by query.
      */

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

@@ -104,7 +104,7 @@
      *
      * @public
      */
-    @Prop({ default: true })
+    @Prop({ default: false })
     public clearOnDestroy!: boolean;
 
     /**
@@ -128,6 +128,13 @@
     @State('queriesPreview', 'config')
     public config!: QueriesPreviewConfig;
 
+    /**
+     * The queryPreviewHistory of the queries that have been searched.
+     * It is a list of queries.
+     */
+    @State('queriesPreview', 'queryPreviewHistory')
+    public queryPreviewHistory!: string[];
+
     /**
      * The results to render from the state.
      *
@@ -208,6 +215,21 @@
       }, this.debounceTimeMs);
     }
 
+    /**
+     * Checks whether the current queryPreviewItem query has been saved
+     * in the queryPreviewHistory in the state.
+     *
+     * @internal
+     *
+     * @returns True if the query has been saved.
+     */
+    protected get isSavedQuery(): boolean {
+      const previewItemQuery = this.previewResults[this.queryPreviewInfo.query];
+      return previewItemQuery
+        ? this.queryPreviewHistory.some(item => item === previewItemQuery.request.query)
+        : false;
+    }
+
     /**
      * Initialises watcher to emit debounced requests, and first value for the requests.
      *
@@ -222,7 +244,13 @@
           }
         }
       );
-      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.$emit('load', this.queryPreviewInfo.query);
+      } else {
+        this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
+      }
     }
 
     /**
@@ -235,7 +263,6 @@
      */
     protected beforeDestroy(): void {
       this.emitQueryPreviewRequestUpdated.cancel();
-
       if (this.clearOnDestroy) {
         this.$x.emit('QueryPreviewUnmountedHook', this.queryPreviewInfo.query, {
           priority: 0,

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

@@ -8,4 +8,8 @@ export interface QueriesPreviewConfig {
    * Maximum number of items to request.
    */
   maxItemsToRequest: number;
+  /**
+   * Maximum number of most recent used queries preview.
+   */
+  maxQueryPreviewHistoryLength: number;
 }

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', {
@@ -36,5 +39,8 @@ export const fetchAndSaveQueryPreview: QueriesPreviewXStoreModule['actions']['fe
         // eslint-disable-next-line no-console
         console.error(error);
         commit('setStatus', { query, status: 'error' });
+      })
+      .then(() => {
+        return dispatch('updateQueryPreviewHistory', request);
       });
   };

packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts

@@ -0,0 +1,35 @@
+import { QueriesPreviewXStoreModule } from '../types';
+
+/**
+ * Default implementation for the {@link QueriesPreviewActions.updateQueryPreviewHistory}.
+ *
+ * @param _context - The {@link https://vuex.vuejs.org/guide/actions.html | context}
+ * of the actions, provided by Vuex.
+ * @param request - The query preview request.
+ *
+ * @public
+ */
+// eslint-disable-next-line max-len
+export const updateQueryPreviewHistory: QueriesPreviewXStoreModule['actions']['updateQueryPreviewHistory'] =
+  ({ commit, state, getters }, request) => {
+    const { query } = request;
+    const loadedQueryPreview = getters.loadedQueriesPreview[query]?.request?.query ?? undefined;
+
+    // If the query preview was already stored, remove the old one.
+    if (loadedQueryPreview && state.queryPreviewHistory.some(item => item === loadedQueryPreview)) {
+      commit('clearFromQueryPreviewHistory', query);
+    }
+
+    // If the queryPreviewHistory list exceeds the configured max.length to store,
+    // remove the first item from the list and from the QueriesPreview state.
+    if (state.queryPreviewHistory.length === state.config.maxQueryPreviewHistoryLength) {
+      commit('shiftQueryPreviewHistory');
+      commit(
+        'clearQueryPreview',
+        state.queriesPreview[Object.keys(state.queriesPreview)[0]].request.query
+      );
+    }
+
+    // Add the query preview item query to the queryPreviewHistory.
+    commit('setQueryPreviewHistory', query);
+  };

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

@@ -4,6 +4,7 @@ import { QueriesPreviewXStoreModule } from './types';
 import { fetchQueryPreview } from './actions/fetch-query-preview.action';
 import { fetchAndSaveQueryPreview } from './actions/fetch-and-save-query-preview.action';
 import { loadedQueriesPreview } from './getters/loaded-queries-preview.getter';
+import { updateQueryPreviewHistory } from './actions/update-query-preview-history.action';
 
 /**
  * {@link XStoreModule} For the `queries-preview` module.
@@ -13,9 +14,11 @@ import { loadedQueriesPreview } from './getters/loaded-queries-preview.getter';
 export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
   state: () => ({
     config: {
-      maxItemsToRequest: 24
+      maxItemsToRequest: 24,
+      maxQueryPreviewHistoryLength: 5
     },
     queriesPreview: {},
+    queryPreviewHistory: [],
     selectedQueryPreview: {
       query: '',
       extraParams: undefined,
@@ -41,10 +44,20 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
       state.selectedQueryPreview = selectedQueryPreview;
     },
     setConfig,
-    mergeConfig
+    mergeConfig,
+    setQueryPreviewHistory(state, query) {
+      state.queryPreviewHistory.push(query);
+    },
+    clearFromQueryPreviewHistory(state, query) {
+      state.queryPreviewHistory.splice(state.queryPreviewHistory.indexOf(query), 1);
+    },
+    shiftQueryPreviewHistory(state) {
+      state.queryPreviewHistory.shift();
+    }
   },
   actions: {
     fetchQueryPreview,
-    fetchAndSaveQueryPreview
+    fetchAndSaveQueryPreview,
+    updateQueryPreviewHistory
   }
 };

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

@@ -51,6 +51,8 @@ export interface QueryPreviewInfo {
 export interface QueriesPreviewState {
   /* The request and results */
   queriesPreview: Dictionary<QueryPreviewItem>;
+  /* List of the most recent used queries preview queries */
+  queryPreviewHistory: string[];
   /** The configuration of the queries preview module. */
   config: QueriesPreviewConfig;
   /** The extra params property of the state. */
@@ -107,6 +109,22 @@ export interface QueriesPreviewMutations extends ConfigMutations<QueriesPreviewS
    * @param selectedQueryPreview - The selected query preview to save to the state.
    */
   setSelectedQueryPreview(selectedQueryPreview: QueryPreviewInfo | null): void;
+  /**
+   * Adds a new entry to the queryPreviewHistory list.
+   *
+   * @param query - The query to add.
+   */
+  setQueryPreviewHistory(query: string): void;
+  /**
+   * Removes a query from the queryPreviewHistory list.
+   *
+   * @param query - The query to remove.
+   */
+  clearFromQueryPreviewHistory(query: string): void;
+  /**
+   * Removes the first item from the queryPreviewHistory list.
+   */
+  shiftQueryPreviewHistory(): void;
 }
 
 /**
@@ -130,6 +148,14 @@ export interface QueriesPreviewActions {
    * @param request - The request object to retrieve the query preview.
    */
   fetchAndSaveQueryPreview(request: SearchRequest): void;
+
+  /**
+   * Prepends the QueryPreviewItem to the queryPreviewHistory in the state.
+   * Limited by {@link QueriesPreviewConfig.maxQueryPreviewHistoryLength}.
+   *
+   * @param request - The request object to retrieve the query preview.
+   */
+  updateQueryPreviewHistory(request: SearchRequest): void;
 }
 
 /**

packages/x-components/src/x-modules/queries-preview/wiring.ts

@@ -39,6 +39,13 @@ export const fetchAndSaveQueryPreviewWire = wireDispatch('fetchAndSaveQueryPrevi
  */
 export const clearQueryPreviewWire = wireCommit('clearQueryPreview');
 
+/**
+ * Clears a query preview from the query preview history list.
+ *
+ * @public
+ */
+export const clearFromQueryPreviewHistoryWire = wireCommit('clearFromQueryPreviewHistory');
+
 /**
  * Sets the queries preview state `params`.
  *
@@ -70,7 +77,8 @@ export const queriesPreviewWiring = createWiring({
     fetchAndSaveQueryPreviewWire
   },
   QueryPreviewUnmountedHook: {
-    clearQueryPreviewWire
+    clearQueryPreviewWire,
+    clearFromQueryPreviewHistoryWire
   },
   UserAcceptedAQueryPreview: {
     setSelectedQueryPreviewWire