From 747a4de9bf18fd4e6a0cbb0988dbe9f5f8b13b6d Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 16 Nov 2023 17:55:08 +0100
Subject: [PATCH 01/27] feat(query-preview): Add updateQueryPreviewHistory
 action/commits/types

EMP-2867
---
 .../x-modules/queries-preview/config.types.ts |  4 ++
 .../update-query-preview-history.action.ts    | 41 +++++++++++++++++++
 .../x-modules/queries-preview/store/module.ts | 19 +++++++--
 .../x-modules/queries-preview/store/types.ts  | 26 ++++++++++++
 4 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts

diff --git a/packages/x-components/src/x-modules/queries-preview/config.types.ts b/packages/x-components/src/x-modules/queries-preview/config.types.ts
index 90e2934540..6c9ce417fe 100644
--- a/packages/x-components/src/x-modules/queries-preview/config.types.ts
+++ b/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;
 }
diff --git a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
new file mode 100644
index 0000000000..2a148cddaf
--- /dev/null
+++ b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
@@ -0,0 +1,41 @@
+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];
+
+    // If the query preview item was already stored, remove the old one.
+    if (state.queryPreviewHistory.some(item => item === loadedQueryPreview)) {
+      commit('removeFromQueryPreviewHistory', {
+        request,
+        results: loadedQueryPreview.results,
+        status: loadedQueryPreview.status,
+        totalResults: loadedQueryPreview.totalResults
+      });
+    }
+
+    // If the queryPreviewHistory list exceeds the configured max.length to store,
+    // pop the last item
+    if (state.queryPreviewHistory.length === state.config.maxQueryPreviewHistoryLength) {
+      commit('popQueryPreviewHistory');
+    }
+
+    // Add query preview item to the queryPreviewHistory.
+    commit('setQueryPreviewHistory', {
+      request,
+      results: loadedQueryPreview.results,
+      status: loadedQueryPreview.status,
+      totalResults: loadedQueryPreview.totalResults
+    });
+  };
diff --git a/packages/x-components/src/x-modules/queries-preview/store/module.ts b/packages/x-components/src/x-modules/queries-preview/store/module.ts
index 17a42791a1..e9afce5bac 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/module.ts
+++ b/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, queryPreview) {
+      state.queryPreviewHistory.push(queryPreview);
+    },
+    removeFromQueryPreviewHistory(state, queryPreview) {
+      state.queryPreviewHistory.filter(item => item === queryPreview);
+    },
+    popQueryPreviewHistory(state) {
+      state.queryPreviewHistory.pop();
+    }
   },
   actions: {
     fetchQueryPreview,
-    fetchAndSaveQueryPreview
+    fetchAndSaveQueryPreview,
+    updateQueryPreviewHistory
   }
 };
diff --git a/packages/x-components/src/x-modules/queries-preview/store/types.ts b/packages/x-components/src/x-modules/queries-preview/store/types.ts
index 0b78414632..54ebfba5ba 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/types.ts
+++ b/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 */
+  queryPreviewHistory: QueryPreviewItem[];
   /** 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 queryPreview - The query preview item to add.
+   */
+  setQueryPreviewHistory(queryPreview: QueryPreviewItem): void;
+  /**
+   * Removes a queryPreview item from the queryPreviewHistory list.
+   *
+   * @param queryPreview - The query preview item to remove.
+   */
+  removeFromQueryPreviewHistory(queryPreview: QueryPreviewItem): void;
+  /**
+   * Removes the last item from the queryPreviewHistory list.
+   */
+  popQueryPreviewHistory(): 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;
 }
 
 /**

From 766639e80519003590b774cd3a597e5fe4c1f769 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 16 Nov 2023 18:15:00 +0100
Subject: [PATCH 02/27] feat(query-preview): Call updateQueryPreviewHistory
 action & fetch only when no loadedQueriesPreview

EMP-2867
---
 .../fetch-and-save-query-preview.action.ts    | 48 +++++++++++--------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.ts b/packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.ts
index dd001e8dda..390ba2fa96 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.ts
@@ -12,29 +12,37 @@ import { QueriesPreviewXStoreModule } from '../types';
  */
 // eslint-disable-next-line max-len
 export const fetchAndSaveQueryPreview: QueriesPreviewXStoreModule['actions']['fetchAndSaveQueryPreview'] =
-  ({ dispatch, commit }, request) => {
+  ({ dispatch, commit, getters }, request) => {
     const { query } = request;
+
     if (!query) {
       return;
     }
-    commit('setQueryPreview', {
-      request,
-      results: [],
-      status: 'loading',
-      totalResults: 0
-    });
-    return dispatch('fetchQueryPreview', request)
-      .then(response => {
-        commit('setQueryPreview', {
-          request,
-          results: response?.results ?? [],
-          status: 'success',
-          totalResults: response?.totalResults ?? 0
-        });
-      })
-      .catch(error => {
-        // eslint-disable-next-line no-console
-        console.error(error);
-        commit('setStatus', { query, status: 'error' });
+
+    if (!getters.loadedQueriesPreview[query]) {
+      commit('setQueryPreview', {
+        request,
+        results: [],
+        status: 'loading',
+        totalResults: 0
       });
+
+      return dispatch('fetchQueryPreview', request)
+        .then(response => {
+          commit('setQueryPreview', {
+            request,
+            results: response?.results ?? [],
+            status: 'success',
+            totalResults: response?.totalResults ?? 0
+          });
+        })
+        .catch(error => {
+          // eslint-disable-next-line no-console
+          console.error(error);
+          commit('setStatus', { query, status: 'error' });
+        })
+        .then(() => {
+          return dispatch('updateQueryPreviewHistory', request);
+        });
+    }
   };

From 101c6cece5ec1dd2900c6d6edcab0f474f9bf4b8 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Fri, 17 Nov 2023 11:47:25 +0100
Subject: [PATCH 03/27] feat(query-preview): Use deepEqual in
 updateQueryPreviewHistory action

EMP-2867
---
 .../store/actions/update-query-preview-history.action.ts       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
index 2a148cddaf..25b944b7ad 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
@@ -1,3 +1,4 @@
+import { deepEqual } from '@empathyco/x-utils';
 import { QueriesPreviewXStoreModule } from '../types';
 
 /**
@@ -16,7 +17,7 @@ export const updateQueryPreviewHistory: QueriesPreviewXStoreModule['actions']['u
     const loadedQueryPreview = getters.loadedQueriesPreview[query];
 
     // If the query preview item was already stored, remove the old one.
-    if (state.queryPreviewHistory.some(item => item === loadedQueryPreview)) {
+    if (state.queryPreviewHistory.some(item => deepEqual(item, loadedQueryPreview))) {
       commit('removeFromQueryPreviewHistory', {
         request,
         results: loadedQueryPreview.results,

From 492815bd602ac4568e2784ee61092b709d57cab9 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Fri, 17 Nov 2023 12:30:29 +0100
Subject: [PATCH 04/27] feat(query-preview): wip render query preview from
 history

EMP-2867
---
 .../components/query-preview.vue               | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 10d7f7dc43..eda647856d 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/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,9 @@
     @State('queriesPreview', 'config')
     public config!: QueriesPreviewConfig;
 
+    @State('queriesPreview', 'queryPreviewHistory')
+    public queryPreviewHistory!: QueryPreviewItem[];
+
     /**
      * The results to render from the state.
      *
@@ -225,6 +228,19 @@
       this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
     }
 
+    /**
+     * Checks whether the current queryPreviewItem has been saved
+     * in the queryPreviewHistory in the state and emits load accordingly.
+     *
+     * @internal
+     */
+    protected beforeMount(): void {
+      const previewItem = this.previewResults[this.queryPreviewInfo.query];
+      if (this.queryPreviewHistory.some(item => deepEqual(item, previewItem))) {
+        this.$emit('load', this.queryPreviewInfo.query);
+      }
+    }
+
     /**
      * Cancels the (remaining) requests when the component is destroyed
      * via the `debounce.cancel()` method.

From f398456e732250e6410eae7e42aa872e2cfaa3be Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 20 Nov 2023 15:52:59 +0100
Subject: [PATCH 05/27] feat(query-preview): fix removeFromQueryPreviewHistory

EMP-2867
---
 .../src/x-modules/queries-preview/store/module.ts             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/store/module.ts b/packages/x-components/src/x-modules/queries-preview/store/module.ts
index e9afce5bac..916cfc5297 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/module.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/module.ts
@@ -48,8 +48,8 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
     setQueryPreviewHistory(state, queryPreview) {
       state.queryPreviewHistory.push(queryPreview);
     },
-    removeFromQueryPreviewHistory(state, queryPreview) {
-      state.queryPreviewHistory.filter(item => item === queryPreview);
+    removeFromQueryPreviewHistory(state, queryPreviewItem) {
+      state.queryPreviewHistory.splice(state.queryPreviewHistory.indexOf(queryPreviewItem), 1);
     },
     popQueryPreviewHistory(state) {
       state.queryPreviewHistory.pop();

From 3b2ccd33c329a9c19496a3fbf3580e73883227d4 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 20 Nov 2023 16:14:45 +0100
Subject: [PATCH 06/27] feat(query-preview): rm popQueryPreviewHistory as it
 doesn't work properly with semantic-queries

EMP-2867
---
 .../src/x-modules/queries-preview/config.types.ts           | 4 ----
 .../store/actions/update-query-preview-history.action.ts    | 6 ------
 .../src/x-modules/queries-preview/store/module.ts           | 6 +-----
 .../src/x-modules/queries-preview/store/types.ts            | 5 -----
 4 files changed, 1 insertion(+), 20 deletions(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/config.types.ts b/packages/x-components/src/x-modules/queries-preview/config.types.ts
index 6c9ce417fe..90e2934540 100644
--- a/packages/x-components/src/x-modules/queries-preview/config.types.ts
+++ b/packages/x-components/src/x-modules/queries-preview/config.types.ts
@@ -8,8 +8,4 @@ export interface QueriesPreviewConfig {
    * Maximum number of items to request.
    */
   maxItemsToRequest: number;
-  /**
-   * Maximum number of most recent used queries preview.
-   */
-  maxQueryPreviewHistoryLength: number;
 }
diff --git a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
index 25b944b7ad..275e39f1c9 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
@@ -26,12 +26,6 @@ export const updateQueryPreviewHistory: QueriesPreviewXStoreModule['actions']['u
       });
     }
 
-    // If the queryPreviewHistory list exceeds the configured max.length to store,
-    // pop the last item
-    if (state.queryPreviewHistory.length === state.config.maxQueryPreviewHistoryLength) {
-      commit('popQueryPreviewHistory');
-    }
-
     // Add query preview item to the queryPreviewHistory.
     commit('setQueryPreviewHistory', {
       request,
diff --git a/packages/x-components/src/x-modules/queries-preview/store/module.ts b/packages/x-components/src/x-modules/queries-preview/store/module.ts
index 916cfc5297..830b9e8e57 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/module.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/module.ts
@@ -14,8 +14,7 @@ import { updateQueryPreviewHistory } from './actions/update-query-preview-histor
 export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
   state: () => ({
     config: {
-      maxItemsToRequest: 24,
-      maxQueryPreviewHistoryLength: 5
+      maxItemsToRequest: 24
     },
     queriesPreview: {},
     queryPreviewHistory: [],
@@ -50,9 +49,6 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
     },
     removeFromQueryPreviewHistory(state, queryPreviewItem) {
       state.queryPreviewHistory.splice(state.queryPreviewHistory.indexOf(queryPreviewItem), 1);
-    },
-    popQueryPreviewHistory(state) {
-      state.queryPreviewHistory.pop();
     }
   },
   actions: {
diff --git a/packages/x-components/src/x-modules/queries-preview/store/types.ts b/packages/x-components/src/x-modules/queries-preview/store/types.ts
index 54ebfba5ba..28d1db86e2 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/types.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/types.ts
@@ -121,10 +121,6 @@ export interface QueriesPreviewMutations extends ConfigMutations<QueriesPreviewS
    * @param queryPreview - The query preview item to remove.
    */
   removeFromQueryPreviewHistory(queryPreview: QueryPreviewItem): void;
-  /**
-   * Removes the last item from the queryPreviewHistory list.
-   */
-  popQueryPreviewHistory(): void;
 }
 
 /**
@@ -151,7 +147,6 @@ export interface QueriesPreviewActions {
 
   /**
    * Prepends the QueryPreviewItem to the queryPreviewHistory in the state.
-   * Limited by {@link QueriesPreviewConfig.maxQueryPreviewHistoryLength}.
    *
    * @param request - The request object to retrieve the query preview.
    */

From 5a7d661176e2af88837bea19550d84eefd0ef441 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 20 Nov 2023 16:19:21 +0100
Subject: [PATCH 07/27] feat(query-preview): update event payload to suit
 deleting both from the queriesPreview and the queryPreviewHistory

EMP-2867
---
 .../queries-preview/components/query-preview.vue  |  3 ++-
 .../src/x-modules/queries-preview/events.types.ts |  6 +++---
 .../update-query-preview-history.action.ts        |  2 +-
 .../src/x-modules/queries-preview/store/module.ts |  2 +-
 .../src/x-modules/queries-preview/store/types.ts  |  2 +-
 .../src/x-modules/queries-preview/wiring.ts       | 15 +++++++++++++--
 6 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index eda647856d..7cbe126452 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -253,7 +253,8 @@
       this.emitQueryPreviewRequestUpdated.cancel();
 
       if (this.clearOnDestroy) {
-        this.$x.emit('QueryPreviewUnmountedHook', this.queryPreviewInfo.query, {
+        const previewItem = this.previewResults[this.queryPreviewInfo.query];
+        this.$x.emit('QueryPreviewUnmountedHook', previewItem, {
           priority: 0,
           replaceable: false
         });
diff --git a/packages/x-components/src/x-modules/queries-preview/events.types.ts b/packages/x-components/src/x-modules/queries-preview/events.types.ts
index eab70ddeb8..5dd88632f0 100644
--- a/packages/x-components/src/x-modules/queries-preview/events.types.ts
+++ b/packages/x-components/src/x-modules/queries-preview/events.types.ts
@@ -1,6 +1,6 @@
 import { SearchRequest } from '@empathyco/x-types';
 import { Dictionary } from '@empathyco/x-utils';
-import { QueryPreviewInfo } from './store/index';
+import { QueryPreviewInfo, QueryPreviewItem } from './store/index';
 
 /**
  * Dictionary of the events of QueriesPreview XModule, where each key is the event name, and the
@@ -16,9 +16,9 @@ export interface QueriesPreviewXEvents {
   QueryPreviewRequestUpdated: SearchRequest;
   /**
    * The component that shows a Query preview has been unmounted.
-   * Payload: The query whose preview has been removed.
+   * Payload: The query preview item.
    */
-  QueryPreviewUnmountedHook: string;
+  QueryPreviewUnmountedHook: QueryPreviewItem;
   /**
    * User has clicked on a query preview.
    * Payload: The {@link QueryPreviewInfo | query preview info}
diff --git a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
index 275e39f1c9..f256fda040 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
@@ -18,7 +18,7 @@ export const updateQueryPreviewHistory: QueriesPreviewXStoreModule['actions']['u
 
     // If the query preview item was already stored, remove the old one.
     if (state.queryPreviewHistory.some(item => deepEqual(item, loadedQueryPreview))) {
-      commit('removeFromQueryPreviewHistory', {
+      commit('clearFromQueryPreviewHistory', {
         request,
         results: loadedQueryPreview.results,
         status: loadedQueryPreview.status,
diff --git a/packages/x-components/src/x-modules/queries-preview/store/module.ts b/packages/x-components/src/x-modules/queries-preview/store/module.ts
index 830b9e8e57..3746b68632 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/module.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/module.ts
@@ -47,7 +47,7 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
     setQueryPreviewHistory(state, queryPreview) {
       state.queryPreviewHistory.push(queryPreview);
     },
-    removeFromQueryPreviewHistory(state, queryPreviewItem) {
+    clearFromQueryPreviewHistory(state, queryPreviewItem) {
       state.queryPreviewHistory.splice(state.queryPreviewHistory.indexOf(queryPreviewItem), 1);
     }
   },
diff --git a/packages/x-components/src/x-modules/queries-preview/store/types.ts b/packages/x-components/src/x-modules/queries-preview/store/types.ts
index 28d1db86e2..9cf7123671 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/types.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/types.ts
@@ -120,7 +120,7 @@ export interface QueriesPreviewMutations extends ConfigMutations<QueriesPreviewS
    *
    * @param queryPreview - The query preview item to remove.
    */
-  removeFromQueryPreviewHistory(queryPreview: QueryPreviewItem): void;
+  clearFromQueryPreviewHistory(queryPreview: QueryPreviewItem): void;
 }
 
 /**
diff --git a/packages/x-components/src/x-modules/queries-preview/wiring.ts b/packages/x-components/src/x-modules/queries-preview/wiring.ts
index 7850495252..e15dac5e26 100644
--- a/packages/x-components/src/x-modules/queries-preview/wiring.ts
+++ b/packages/x-components/src/x-modules/queries-preview/wiring.ts
@@ -37,7 +37,17 @@ export const fetchAndSaveQueryPreviewWire = wireDispatch('fetchAndSaveQueryPrevi
  *
  * @public
  */
-export const clearQueryPreviewWire = wireCommit('clearQueryPreview');
+export const clearQueryPreviewWire = wireCommit(
+  'clearQueryPreview',
+  ({ eventPayload: { request } }) => request['query']
+);
+
+/**
+ * Clears a query preview from the query preview history list.
+ *
+ * @public
+ */
+export const clearFromQueryPreviewHistoryWire = wireCommit('clearFromQueryPreviewHistory');
 
 /**
  * Sets the queries preview state `params`.
@@ -70,7 +80,8 @@ export const queriesPreviewWiring = createWiring({
     fetchAndSaveQueryPreviewWire
   },
   QueryPreviewUnmountedHook: {
-    clearQueryPreviewWire
+    clearQueryPreviewWire,
+    clearFromQueryPreviewHistoryWire
   },
   UserAcceptedAQueryPreview: {
     setSelectedQueryPreviewWire

From b1b0394ae80fc6ded814dafa782de75dea519d20 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 20 Nov 2023 16:21:23 +0100
Subject: [PATCH 08/27] feat(query-preview-list): make clearOnDestroy
 accessible to pass it as true in the queryPreviewList used in semanticQueries

EMP-2867
---
 packages/x-components/src/views/home/Home.vue          |  1 +
 .../queries-preview/components/query-preview-list.vue  | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index 1e6d7b173c..d6f1091e7b 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/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"
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
index b97c4aa522..874039c838 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
+++ b/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.
      */

From 98951e84030a367f7aec9002f692792c554c7e9a Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 20 Nov 2023 17:05:06 +0100
Subject: [PATCH 09/27] doc(query-preview): update queryPreviewHistory
 description

EMP-2867
---
 .../x-modules/queries-preview/components/query-preview.vue    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 7cbe126452..26c975f8ba 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -128,6 +128,10 @@
     @State('queriesPreview', 'config')
     public config!: QueriesPreviewConfig;
 
+    /**
+     * The queryPreviewHistory of the queries that have been searched.
+     * It is a list of QueryPreviewItems.
+     */
     @State('queriesPreview', 'queryPreviewHistory')
     public queryPreviewHistory!: QueryPreviewItem[];
 

From f28778fc580562360d9cdef2b6a0355a7a695ca7 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 27 Nov 2023 14:40:19 +0100
Subject: [PATCH 10/27] feat(query-preview): check if the item has been saved
 in the component instead of in the module's action

EMP-2867
---
 .../components/query-preview.vue              | 28 ++++++-----
 .../fetch-and-save-query-preview.action.ts    | 48 +++++++++----------
 2 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 26c975f8ba..10214e2ce0 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -215,6 +215,19 @@
       }, this.debounceTimeMs);
     }
 
+    /**
+     * Checks whether the current queryPreviewItem has been saved
+     * in the queryPreviewHistory in the state.
+     *
+     * @internal
+     *
+     * @returns True if the query has been saved.
+     */
+    protected get isSavedQuery(): boolean {
+      const previewItem = this.previewResults[this.queryPreviewInfo.query];
+      return this.queryPreviewHistory.some(item => deepEqual(item, previewItem));
+    }
+
     /**
      * Initialises watcher to emit debounced requests, and first value for the requests.
      *
@@ -229,19 +242,12 @@
           }
         }
       );
-      this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
-    }
 
-    /**
-     * Checks whether the current queryPreviewItem has been saved
-     * in the queryPreviewHistory in the state and emits load accordingly.
-     *
-     * @internal
-     */
-    protected beforeMount(): void {
-      const previewItem = this.previewResults[this.queryPreviewInfo.query];
-      if (this.queryPreviewHistory.some(item => deepEqual(item, previewItem))) {
+      // 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);
       }
     }
 
diff --git a/packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.ts b/packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.ts
index 390ba2fa96..14e2b982d3 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.ts
@@ -12,37 +12,35 @@ import { QueriesPreviewXStoreModule } from '../types';
  */
 // eslint-disable-next-line max-len
 export const fetchAndSaveQueryPreview: QueriesPreviewXStoreModule['actions']['fetchAndSaveQueryPreview'] =
-  ({ dispatch, commit, getters }, request) => {
+  ({ dispatch, commit }, request) => {
     const { query } = request;
 
     if (!query) {
       return;
     }
 
-    if (!getters.loadedQueriesPreview[query]) {
-      commit('setQueryPreview', {
-        request,
-        results: [],
-        status: 'loading',
-        totalResults: 0
-      });
+    commit('setQueryPreview', {
+      request,
+      results: [],
+      status: 'loading',
+      totalResults: 0
+    });
 
-      return dispatch('fetchQueryPreview', request)
-        .then(response => {
-          commit('setQueryPreview', {
-            request,
-            results: response?.results ?? [],
-            status: 'success',
-            totalResults: response?.totalResults ?? 0
-          });
-        })
-        .catch(error => {
-          // eslint-disable-next-line no-console
-          console.error(error);
-          commit('setStatus', { query, status: 'error' });
-        })
-        .then(() => {
-          return dispatch('updateQueryPreviewHistory', request);
+    return dispatch('fetchQueryPreview', request)
+      .then(response => {
+        commit('setQueryPreview', {
+          request,
+          results: response?.results ?? [],
+          status: 'success',
+          totalResults: response?.totalResults ?? 0
         });
-    }
+      })
+      .catch(error => {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        commit('setStatus', { query, status: 'error' });
+      })
+      .then(() => {
+        return dispatch('updateQueryPreviewHistory', request);
+      });
   };

From 69d09adfbbce67794f77b15dc2e5a93901eb4cfc Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 27 Nov 2023 14:58:52 +0100
Subject: [PATCH 11/27] feat(query-preview): rm first queryPreviewHistory item
 if the list length exceeds the max allowed

EMP-2867
---
 .../src/x-modules/queries-preview/config.types.ts           | 4 ++++
 .../store/actions/update-query-preview-history.action.ts    | 6 ++++++
 .../src/x-modules/queries-preview/store/module.ts           | 6 +++++-
 .../src/x-modules/queries-preview/store/types.ts            | 5 +++++
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/config.types.ts b/packages/x-components/src/x-modules/queries-preview/config.types.ts
index 90e2934540..6c9ce417fe 100644
--- a/packages/x-components/src/x-modules/queries-preview/config.types.ts
+++ b/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;
 }
diff --git a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
index f256fda040..f0e1569dcc 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
@@ -26,6 +26,12 @@ export const updateQueryPreviewHistory: QueriesPreviewXStoreModule['actions']['u
       });
     }
 
+    // If the queryPreviewHistory list exceeds the configured max.length to store,
+    // remove the first item
+    if (state.queryPreviewHistory.length === state.config.maxQueryPreviewHistoryLength) {
+      commit('shiftQueryPreviewHistory');
+    }
+
     // Add query preview item to the queryPreviewHistory.
     commit('setQueryPreviewHistory', {
       request,
diff --git a/packages/x-components/src/x-modules/queries-preview/store/module.ts b/packages/x-components/src/x-modules/queries-preview/store/module.ts
index 3746b68632..42752994cb 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/module.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/module.ts
@@ -14,7 +14,8 @@ import { updateQueryPreviewHistory } from './actions/update-query-preview-histor
 export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
   state: () => ({
     config: {
-      maxItemsToRequest: 24
+      maxItemsToRequest: 24,
+      maxQueryPreviewHistoryLength: 5
     },
     queriesPreview: {},
     queryPreviewHistory: [],
@@ -49,6 +50,9 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
     },
     clearFromQueryPreviewHistory(state, queryPreviewItem) {
       state.queryPreviewHistory.splice(state.queryPreviewHistory.indexOf(queryPreviewItem), 1);
+    },
+    shiftQueryPreviewHistory(state) {
+      state.queryPreviewHistory.shift();
     }
   },
   actions: {
diff --git a/packages/x-components/src/x-modules/queries-preview/store/types.ts b/packages/x-components/src/x-modules/queries-preview/store/types.ts
index 9cf7123671..736778c740 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/types.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/types.ts
@@ -121,6 +121,10 @@ export interface QueriesPreviewMutations extends ConfigMutations<QueriesPreviewS
    * @param queryPreview - The query preview item to remove.
    */
   clearFromQueryPreviewHistory(queryPreview: QueryPreviewItem): void;
+  /**
+   * Removes the first item from the queryPreviewHistory list.
+   */
+  shiftQueryPreviewHistory(): void;
 }
 
 /**
@@ -147,6 +151,7 @@ export interface QueriesPreviewActions {
 
   /**
    * Prepends the QueryPreviewItem to the queryPreviewHistory in the state.
+   * Limited by {@link QueriesPreviewConfig.maxQueryPreviewHistoryLength}.
    *
    * @param request - The request object to retrieve the query preview.
    */

From 5d723ae2d502c5bd2efb99a1efc4fb0dd3f81998 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 27 Nov 2023 16:29:28 +0100
Subject: [PATCH 12/27] feat(query-preview): save only queries in the history
 list + rm first state.queriesPreview item if the list length exceeds the max
 allowed

EMP-2867
---
 .../components/query-preview.vue              | 12 ++++----
 .../update-query-preview-history.action.ts    | 29 +++++++------------
 .../x-modules/queries-preview/store/module.ts |  8 ++---
 .../x-modules/queries-preview/store/types.ts  | 14 ++++-----
 .../src/x-modules/queries-preview/wiring.ts   |  5 +++-
 5 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 10214e2ce0..1859c5c345 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -130,10 +130,10 @@
 
     /**
      * The queryPreviewHistory of the queries that have been searched.
-     * It is a list of QueryPreviewItems.
+     * It is a list of queries.
      */
     @State('queriesPreview', 'queryPreviewHistory')
-    public queryPreviewHistory!: QueryPreviewItem[];
+    public queryPreviewHistory!: string[];
 
     /**
      * The results to render from the state.
@@ -216,7 +216,7 @@
     }
 
     /**
-     * Checks whether the current queryPreviewItem has been saved
+     * Checks whether the current queryPreviewItem query has been saved
      * in the queryPreviewHistory in the state.
      *
      * @internal
@@ -224,8 +224,10 @@
      * @returns True if the query has been saved.
      */
     protected get isSavedQuery(): boolean {
-      const previewItem = this.previewResults[this.queryPreviewInfo.query];
-      return this.queryPreviewHistory.some(item => deepEqual(item, previewItem));
+      const previewItemQuery = this.previewResults[this.queryPreviewInfo.query];
+      return previewItemQuery
+        ? this.queryPreviewHistory.some(item => item === previewItemQuery.request.query)
+        : false;
     }
 
     /**
diff --git a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
index f0e1569dcc..f7f78ba010 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
@@ -1,4 +1,3 @@
-import { deepEqual } from '@empathyco/x-utils';
 import { QueriesPreviewXStoreModule } from '../types';
 
 /**
@@ -14,29 +13,23 @@ import { QueriesPreviewXStoreModule } from '../types';
 export const updateQueryPreviewHistory: QueriesPreviewXStoreModule['actions']['updateQueryPreviewHistory'] =
   ({ commit, state, getters }, request) => {
     const { query } = request;
-    const loadedQueryPreview = getters.loadedQueriesPreview[query];
+    const loadedQueryPreview = getters.loadedQueriesPreview[query].request.query;
 
-    // If the query preview item was already stored, remove the old one.
-    if (state.queryPreviewHistory.some(item => deepEqual(item, loadedQueryPreview))) {
-      commit('clearFromQueryPreviewHistory', {
-        request,
-        results: loadedQueryPreview.results,
-        status: loadedQueryPreview.status,
-        totalResults: loadedQueryPreview.totalResults
-      });
+    // If the query preview was already stored, remove the old one.
+    if (state.queryPreviewHistory.some(item => item === loadedQueryPreview)) {
+      commit('clearFromQueryPreviewHistory', query);
     }
 
     // If the queryPreviewHistory list exceeds the configured max.length to store,
-    // remove the first item
+    // 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 query preview item to the queryPreviewHistory.
-    commit('setQueryPreviewHistory', {
-      request,
-      results: loadedQueryPreview.results,
-      status: loadedQueryPreview.status,
-      totalResults: loadedQueryPreview.totalResults
-    });
+    // Add the query preview item query to the queryPreviewHistory.
+    commit('setQueryPreviewHistory', query);
   };
diff --git a/packages/x-components/src/x-modules/queries-preview/store/module.ts b/packages/x-components/src/x-modules/queries-preview/store/module.ts
index 42752994cb..494ff6a459 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/module.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/module.ts
@@ -45,11 +45,11 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
     },
     setConfig,
     mergeConfig,
-    setQueryPreviewHistory(state, queryPreview) {
-      state.queryPreviewHistory.push(queryPreview);
+    setQueryPreviewHistory(state, query) {
+      state.queryPreviewHistory.push(query);
     },
-    clearFromQueryPreviewHistory(state, queryPreviewItem) {
-      state.queryPreviewHistory.splice(state.queryPreviewHistory.indexOf(queryPreviewItem), 1);
+    clearFromQueryPreviewHistory(state, query) {
+      state.queryPreviewHistory.splice(state.queryPreviewHistory.indexOf(query), 1);
     },
     shiftQueryPreviewHistory(state) {
       state.queryPreviewHistory.shift();
diff --git a/packages/x-components/src/x-modules/queries-preview/store/types.ts b/packages/x-components/src/x-modules/queries-preview/store/types.ts
index 736778c740..55c1661e29 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/types.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/types.ts
@@ -51,8 +51,8 @@ export interface QueryPreviewInfo {
 export interface QueriesPreviewState {
   /* The request and results */
   queriesPreview: Dictionary<QueryPreviewItem>;
-  /* List of the most recent used queries preview */
-  queryPreviewHistory: 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. */
@@ -112,15 +112,15 @@ export interface QueriesPreviewMutations extends ConfigMutations<QueriesPreviewS
   /**
    * Adds a new entry to the queryPreviewHistory list.
    *
-   * @param queryPreview - The query preview item to add.
+   * @param query - The query to add.
    */
-  setQueryPreviewHistory(queryPreview: QueryPreviewItem): void;
+  setQueryPreviewHistory(query: string): void;
   /**
-   * Removes a queryPreview item from the queryPreviewHistory list.
+   * Removes a query from the queryPreviewHistory list.
    *
-   * @param queryPreview - The query preview item to remove.
+   * @param query - The query to remove.
    */
-  clearFromQueryPreviewHistory(queryPreview: QueryPreviewItem): void;
+  clearFromQueryPreviewHistory(query: string): void;
   /**
    * Removes the first item from the queryPreviewHistory list.
    */
diff --git a/packages/x-components/src/x-modules/queries-preview/wiring.ts b/packages/x-components/src/x-modules/queries-preview/wiring.ts
index e15dac5e26..854bc0df4f 100644
--- a/packages/x-components/src/x-modules/queries-preview/wiring.ts
+++ b/packages/x-components/src/x-modules/queries-preview/wiring.ts
@@ -47,7 +47,10 @@ export const clearQueryPreviewWire = wireCommit(
  *
  * @public
  */
-export const clearFromQueryPreviewHistoryWire = wireCommit('clearFromQueryPreviewHistory');
+export const clearFromQueryPreviewHistoryWire = wireCommit(
+  'clearFromQueryPreviewHistory',
+  ({ eventPayload: { request } }) => request['query']
+);
 
 /**
  * Sets the queries preview state `params`.

From 4692d20c6bf6d6976440399cd07ee02d07b9886e Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 27 Nov 2023 16:43:40 +0100
Subject: [PATCH 13/27] chore: check if loadedQueryPreview exists

EMP-2867
---
 .../store/actions/update-query-preview-history.action.ts      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
index f7f78ba010..2af989373b 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
@@ -13,10 +13,10 @@ import { QueriesPreviewXStoreModule } from '../types';
 export const updateQueryPreviewHistory: QueriesPreviewXStoreModule['actions']['updateQueryPreviewHistory'] =
   ({ commit, state, getters }, request) => {
     const { query } = request;
-    const loadedQueryPreview = getters.loadedQueriesPreview[query].request.query;
+    const loadedQueryPreview = getters.loadedQueriesPreview[query]?.request?.query ?? undefined;
 
     // If the query preview was already stored, remove the old one.
-    if (state.queryPreviewHistory.some(item => item === loadedQueryPreview)) {
+    if (loadedQueryPreview && state.queryPreviewHistory.some(item => item === loadedQueryPreview)) {
       commit('clearFromQueryPreviewHistory', query);
     }
 

From e9ae00a9e392c640d52cb9140b5ef7640c3be4ab Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 28 Nov 2023 08:35:50 +0100
Subject: [PATCH 14/27] feat: rollback query as payload in
 QueryPreviewUnmountedHook event

EMP-2867
---
 .../queries-preview/components/query-preview.vue       |  4 +---
 .../src/x-modules/queries-preview/events.types.ts      |  6 +++---
 .../src/x-modules/queries-preview/wiring.ts            | 10 ++--------
 3 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 1859c5c345..71bec60737 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -263,10 +263,8 @@
      */
     protected beforeDestroy(): void {
       this.emitQueryPreviewRequestUpdated.cancel();
-
       if (this.clearOnDestroy) {
-        const previewItem = this.previewResults[this.queryPreviewInfo.query];
-        this.$x.emit('QueryPreviewUnmountedHook', previewItem, {
+        this.$x.emit('QueryPreviewUnmountedHook', this.queryPreviewInfo.query, {
           priority: 0,
           replaceable: false
         });
diff --git a/packages/x-components/src/x-modules/queries-preview/events.types.ts b/packages/x-components/src/x-modules/queries-preview/events.types.ts
index 5dd88632f0..eab70ddeb8 100644
--- a/packages/x-components/src/x-modules/queries-preview/events.types.ts
+++ b/packages/x-components/src/x-modules/queries-preview/events.types.ts
@@ -1,6 +1,6 @@
 import { SearchRequest } from '@empathyco/x-types';
 import { Dictionary } from '@empathyco/x-utils';
-import { QueryPreviewInfo, QueryPreviewItem } from './store/index';
+import { QueryPreviewInfo } from './store/index';
 
 /**
  * Dictionary of the events of QueriesPreview XModule, where each key is the event name, and the
@@ -16,9 +16,9 @@ export interface QueriesPreviewXEvents {
   QueryPreviewRequestUpdated: SearchRequest;
   /**
    * The component that shows a Query preview has been unmounted.
-   * Payload: The query preview item.
+   * Payload: The query whose preview has been removed.
    */
-  QueryPreviewUnmountedHook: QueryPreviewItem;
+  QueryPreviewUnmountedHook: string;
   /**
    * User has clicked on a query preview.
    * Payload: The {@link QueryPreviewInfo | query preview info}
diff --git a/packages/x-components/src/x-modules/queries-preview/wiring.ts b/packages/x-components/src/x-modules/queries-preview/wiring.ts
index 854bc0df4f..f7ccab41d6 100644
--- a/packages/x-components/src/x-modules/queries-preview/wiring.ts
+++ b/packages/x-components/src/x-modules/queries-preview/wiring.ts
@@ -37,20 +37,14 @@ export const fetchAndSaveQueryPreviewWire = wireDispatch('fetchAndSaveQueryPrevi
  *
  * @public
  */
-export const clearQueryPreviewWire = wireCommit(
-  'clearQueryPreview',
-  ({ eventPayload: { request } }) => request['query']
-);
+export const clearQueryPreviewWire = wireCommit('clearQueryPreview');
 
 /**
  * Clears a query preview from the query preview history list.
  *
  * @public
  */
-export const clearFromQueryPreviewHistoryWire = wireCommit(
-  'clearFromQueryPreviewHistory',
-  ({ eventPayload: { request } }) => request['query']
-);
+export const clearFromQueryPreviewHistoryWire = wireCommit('clearFromQueryPreviewHistory');
 
 /**
  * Sets the queries preview state `params`.

From c9ddcc13971e7ae3500779bd3d196b398b1001bc Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 28 Nov 2023 12:51:38 +0100
Subject: [PATCH 15/27] test: Add updateQueryPreviewHistory action test

EMP-2867
---
 .../store/__tests__/actions.spec.ts           | 51 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/queries-preview/store/__tests__/actions.spec.ts
index d582adc17c..9ff23dd286 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/__tests__/actions.spec.ts
+++ b/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';
@@ -105,4 +105,51 @@ describe('testing queries preview module actions', () => {
       expect('cookies' in store.state.queriesPreview).toBeTruthy();
     });
   });
+
+  describe('updateQueryPreviewHistory', () => {
+    it('should store the searched query when a request has been made', async () => {
+      const firstRequest = getQueryPreviewRequest('sandals');
+      const secondRequest = getQueryPreviewRequest('socks');
+
+      await store.dispatch('fetchAndSaveQueryPreview', firstRequest);
+      expect(store.state.queryPreviewHistory).toHaveLength(1);
+
+      await store.dispatch('fetchAndSaveQueryPreview', secondRequest);
+      expect(store.state.queryPreviewHistory).toHaveLength(2);
+    });
+
+    // eslint-disable-next-line max-len
+    it('should remove the query preview if it was already stored and reboot the list with the new one', async () => {
+      const firstRequest = getQueryPreviewRequest('lego');
+      const secondRequest = getQueryPreviewRequest('spiderman');
+      const thirdRequest = getQueryPreviewRequest('lego');
+
+      await store.dispatch('fetchAndSaveQueryPreview', firstRequest);
+      await store.dispatch('fetchAndSaveQueryPreview', secondRequest);
+      expect(store.state.queryPreviewHistory).toEqual(['lego', 'spiderman']);
+
+      await store.dispatch('fetchAndSaveQueryPreview', thirdRequest);
+      expect(store.state.queryPreviewHistory).toHaveLength(2);
+      expect(store.state.queryPreviewHistory).toEqual(['spiderman', 'lego']);
+    });
+
+    // eslint-disable-next-line max-len
+    it('should remove the first query from the state if the queryPreviewHistory list exceeds the configured max.length to store', async () => {
+      const firstRequest = getQueryPreviewRequest('butterfly');
+      const secondRequest = getQueryPreviewRequest('panda');
+      const thirdRequest = getQueryPreviewRequest('crocodile');
+      store.state.config.maxQueryPreviewHistoryLength = 2;
+
+      await store.dispatch('fetchAndSaveQueryPreview', firstRequest);
+      await store.dispatch('fetchAndSaveQueryPreview', secondRequest);
+      await store.dispatch('fetchAndSaveQueryPreview', thirdRequest);
+
+      expect(store.state.queryPreviewHistory).toEqual(['panda', 'crocodile']);
+      expect('butterfly' in store.state.queriesPreview).toBeFalsy();
+
+      await store.dispatch('fetchAndSaveQueryPreview', firstRequest);
+      expect(store.state.queryPreviewHistory).toEqual(['crocodile', 'butterfly']);
+      expect('panda' in store.state.queriesPreview).toBeFalsy();
+    });
+  });
 });

From db38849f82b70ad84f50bd756a89c6a0f3059ec9 Mon Sep 17 00:00:00 2001
From: anna condal <acondalv@gmail.com>
Date: Tue, 28 Nov 2023 14:23:33 +0100
Subject: [PATCH 16/27] Update
 packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Gerardo Vázquez <herr.ardo@gmail.com>
---
 .../x-modules/queries-preview/components/query-preview-list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
index 874039c838..6153b22b51 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
@@ -72,7 +72,7 @@
      *
      * @public
      */
-    @Prop({ default: false })
+    @Prop({ default: true })
     public clearOnDestroy!: boolean;
 
     /**

From 18d11a5159c8bedff54974ee447e57f43ddaca0c Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 28 Nov 2023 14:28:05 +0100
Subject: [PATCH 17/27] feat: Set cleanOnDestroy false as default

EMP-2867
---
 packages/x-components/src/views/home/Home.vue          |  2 +-
 .../queries-preview/components/query-preview-list.vue  | 10 ----------
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index d6f1091e7b..b4b47ffdae 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -252,6 +252,7 @@
                   :queriesPreviewInfo="queriesPreviewInfo"
                   #default="{ queryPreviewInfo, totalResults, results }"
                   data-test="brand-recommendation"
+                  :clearOnDestroy="false"
                 >
                   <div class="x-flex x-flex-col x-gap-8 x-mb-16">
                     <QueryPreviewButton
@@ -357,7 +358,6 @@
                     :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"
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
index 6153b22b51..b97c4aa522 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
@@ -10,7 +10,6 @@
         @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" />
@@ -66,15 +65,6 @@
     @Prop({ required: true })
     public queriesPreviewInfo!: QueryPreviewInfo[];
 
-    /**
-     * Controls whether the QueryPreview should be removed from the state
-     * when the component is destroyed.
-     *
-     * @public
-     */
-    @Prop({ default: true })
-    public clearOnDestroy!: boolean;
-
     /**
      * Contains the status of the preview requests, indexed by query.
      */

From 3ee51774461d6b0dd7f893a94cb6d59aba577c67 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 5 Dec 2023 11:46:54 +0100
Subject: [PATCH 18/27] feat(query-preview): remove queryPreviewHistory list

EMP-2867
---
 packages/x-components/src/views/home/Home.vue |  2 +-
 .../components/query-preview.vue              | 21 +++------
 .../x-modules/queries-preview/config.types.ts |  4 --
 .../store/__tests__/actions.spec.ts           | 47 -------------------
 .../fetch-and-save-query-preview.action.ts    |  3 --
 .../update-query-preview-history.action.ts    | 35 --------------
 .../x-modules/queries-preview/store/module.ts | 19 ++------
 .../x-modules/queries-preview/store/types.ts  | 26 ----------
 .../src/x-modules/queries-preview/wiring.ts   | 10 +---
 9 files changed, 11 insertions(+), 156 deletions(-)
 delete mode 100644 packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts

diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index b4b47ffdae..db8c408326 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -252,7 +252,7 @@
                   :queriesPreviewInfo="queriesPreviewInfo"
                   #default="{ queryPreviewInfo, totalResults, results }"
                   data-test="brand-recommendation"
-                  :clearOnDestroy="false"
+                  :saveCache="true"
                 >
                   <div class="x-flex x-flex-col x-gap-8 x-mb-16">
                     <QueryPreviewButton
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 71bec60737..80eed6e7c5 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -105,7 +105,7 @@
      * @public
      */
     @Prop({ default: false })
-    public clearOnDestroy!: boolean;
+    public saveCache!: boolean;
 
     /**
      * The results preview of the queries preview mounted.
@@ -128,13 +128,6 @@
     @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.
      *
@@ -217,17 +210,15 @@
 
     /**
      * Checks whether the current queryPreviewItem query has been saved
-     * in the queryPreviewHistory in the state.
+     * in the queriesPreview 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;
+      const previewItemQuery = this.queryPreviewInfo.query;
+      return !!this.previewResults[previewItemQuery];
     }
 
     /**
@@ -256,14 +247,14 @@
     /**
      * 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 'useCache' is set to true, 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
diff --git a/packages/x-components/src/x-modules/queries-preview/config.types.ts b/packages/x-components/src/x-modules/queries-preview/config.types.ts
index 6c9ce417fe..90e2934540 100644
--- a/packages/x-components/src/x-modules/queries-preview/config.types.ts
+++ b/packages/x-components/src/x-modules/queries-preview/config.types.ts
@@ -8,8 +8,4 @@ export interface QueriesPreviewConfig {
    * Maximum number of items to request.
    */
   maxItemsToRequest: number;
-  /**
-   * Maximum number of most recent used queries preview.
-   */
-  maxQueryPreviewHistoryLength: number;
 }
diff --git a/packages/x-components/src/x-modules/queries-preview/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/queries-preview/store/__tests__/actions.spec.ts
index 9ff23dd286..91382192ac 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/__tests__/actions.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/__tests__/actions.spec.ts
@@ -105,51 +105,4 @@ describe('testing queries preview module actions', () => {
       expect('cookies' in store.state.queriesPreview).toBeTruthy();
     });
   });
-
-  describe('updateQueryPreviewHistory', () => {
-    it('should store the searched query when a request has been made', async () => {
-      const firstRequest = getQueryPreviewRequest('sandals');
-      const secondRequest = getQueryPreviewRequest('socks');
-
-      await store.dispatch('fetchAndSaveQueryPreview', firstRequest);
-      expect(store.state.queryPreviewHistory).toHaveLength(1);
-
-      await store.dispatch('fetchAndSaveQueryPreview', secondRequest);
-      expect(store.state.queryPreviewHistory).toHaveLength(2);
-    });
-
-    // eslint-disable-next-line max-len
-    it('should remove the query preview if it was already stored and reboot the list with the new one', async () => {
-      const firstRequest = getQueryPreviewRequest('lego');
-      const secondRequest = getQueryPreviewRequest('spiderman');
-      const thirdRequest = getQueryPreviewRequest('lego');
-
-      await store.dispatch('fetchAndSaveQueryPreview', firstRequest);
-      await store.dispatch('fetchAndSaveQueryPreview', secondRequest);
-      expect(store.state.queryPreviewHistory).toEqual(['lego', 'spiderman']);
-
-      await store.dispatch('fetchAndSaveQueryPreview', thirdRequest);
-      expect(store.state.queryPreviewHistory).toHaveLength(2);
-      expect(store.state.queryPreviewHistory).toEqual(['spiderman', 'lego']);
-    });
-
-    // eslint-disable-next-line max-len
-    it('should remove the first query from the state if the queryPreviewHistory list exceeds the configured max.length to store', async () => {
-      const firstRequest = getQueryPreviewRequest('butterfly');
-      const secondRequest = getQueryPreviewRequest('panda');
-      const thirdRequest = getQueryPreviewRequest('crocodile');
-      store.state.config.maxQueryPreviewHistoryLength = 2;
-
-      await store.dispatch('fetchAndSaveQueryPreview', firstRequest);
-      await store.dispatch('fetchAndSaveQueryPreview', secondRequest);
-      await store.dispatch('fetchAndSaveQueryPreview', thirdRequest);
-
-      expect(store.state.queryPreviewHistory).toEqual(['panda', 'crocodile']);
-      expect('butterfly' in store.state.queriesPreview).toBeFalsy();
-
-      await store.dispatch('fetchAndSaveQueryPreview', firstRequest);
-      expect(store.state.queryPreviewHistory).toEqual(['crocodile', 'butterfly']);
-      expect('panda' in store.state.queriesPreview).toBeFalsy();
-    });
-  });
 });
diff --git a/packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.ts b/packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.ts
index 14e2b982d3..3c2aa73074 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.ts
@@ -39,8 +39,5 @@ 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);
       });
   };
diff --git a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts b/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
deleted file mode 100644
index 2af989373b..0000000000
--- a/packages/x-components/src/x-modules/queries-preview/store/actions/update-query-preview-history.action.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-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);
-  };
diff --git a/packages/x-components/src/x-modules/queries-preview/store/module.ts b/packages/x-components/src/x-modules/queries-preview/store/module.ts
index 494ff6a459..17a42791a1 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/module.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/module.ts
@@ -4,7 +4,6 @@ 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.
@@ -14,11 +13,9 @@ import { updateQueryPreviewHistory } from './actions/update-query-preview-histor
 export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
   state: () => ({
     config: {
-      maxItemsToRequest: 24,
-      maxQueryPreviewHistoryLength: 5
+      maxItemsToRequest: 24
     },
     queriesPreview: {},
-    queryPreviewHistory: [],
     selectedQueryPreview: {
       query: '',
       extraParams: undefined,
@@ -44,20 +41,10 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
       state.selectedQueryPreview = selectedQueryPreview;
     },
     setConfig,
-    mergeConfig,
-    setQueryPreviewHistory(state, query) {
-      state.queryPreviewHistory.push(query);
-    },
-    clearFromQueryPreviewHistory(state, query) {
-      state.queryPreviewHistory.splice(state.queryPreviewHistory.indexOf(query), 1);
-    },
-    shiftQueryPreviewHistory(state) {
-      state.queryPreviewHistory.shift();
-    }
+    mergeConfig
   },
   actions: {
     fetchQueryPreview,
-    fetchAndSaveQueryPreview,
-    updateQueryPreviewHistory
+    fetchAndSaveQueryPreview
   }
 };
diff --git a/packages/x-components/src/x-modules/queries-preview/store/types.ts b/packages/x-components/src/x-modules/queries-preview/store/types.ts
index 55c1661e29..0b78414632 100644
--- a/packages/x-components/src/x-modules/queries-preview/store/types.ts
+++ b/packages/x-components/src/x-modules/queries-preview/store/types.ts
@@ -51,8 +51,6 @@ 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. */
@@ -109,22 +107,6 @@ 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;
 }
 
 /**
@@ -148,14 +130,6 @@ 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;
 }
 
 /**
diff --git a/packages/x-components/src/x-modules/queries-preview/wiring.ts b/packages/x-components/src/x-modules/queries-preview/wiring.ts
index f7ccab41d6..7850495252 100644
--- a/packages/x-components/src/x-modules/queries-preview/wiring.ts
+++ b/packages/x-components/src/x-modules/queries-preview/wiring.ts
@@ -39,13 +39,6 @@ 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`.
  *
@@ -77,8 +70,7 @@ export const queriesPreviewWiring = createWiring({
     fetchAndSaveQueryPreviewWire
   },
   QueryPreviewUnmountedHook: {
-    clearQueryPreviewWire,
-    clearFromQueryPreviewHistoryWire
+    clearQueryPreviewWire
   },
   UserAcceptedAQueryPreview: {
     setSelectedQueryPreviewWire

From 1b668c6f9ccf6913778595cf4fd5297616cb1aed Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 5 Dec 2023 11:56:19 +0100
Subject: [PATCH 19/27] chore: fix method documentation

---
 .../src/x-modules/queries-preview/components/query-preview.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 80eed6e7c5..97b83b3093 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -247,7 +247,7 @@
     /**
      * Cancels the (remaining) requests when the component is destroyed
      * via the `debounce.cancel()` method.
-     * If the prop 'useCache' is set to true, it also removes the QueryPreview
+     * If the prop 'saveCache' is set to true, it also removes the QueryPreview
      * from the state when the component is destroyed.
      *
      * @internal

From 42f9c4493f3a262d286f95932c26ac1e8f9d3f23 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 6 Dec 2023 09:26:12 +0100
Subject: [PATCH 20/27] feat: update and fix query-preview tests

---
 .../components/__tests__/query-preview.spec.ts             | 7 ++++++-
 .../x-modules/queries-preview/components/query-preview.vue | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
index 18fadcb0e4..9abe6f0a2a 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
+++ b/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);
@@ -103,6 +105,7 @@ describe('query preview', () => {
 
   it('sends the `QueryPreviewRequestUpdated` event', async () => {
     const { queryPreviewRequestUpdatedSpy, wrapper, updateExtraParams } = renderQueryPreview({
+      saveCache: false,
       queryPreviewInfo: {
         query: 'shoes',
         extraParams: { directory: 'Magrathea' },
@@ -425,6 +428,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. */
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 97b83b3093..68baa9b946 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -237,7 +237,7 @@
       );
 
       // If the query has been saved it will emit load instead of the emitting the updated request.
-      if (this.isSavedQuery) {
+      if (this.isSavedQuery && this.saveCache) {
         this.$emit('load', this.queryPreviewInfo.query);
       } else {
         this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);

From 4f32b6556ee036843c989c76f2b21d3e9e11ca26 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 6 Dec 2023 10:28:37 +0100
Subject: [PATCH 21/27] feat: add test when saveCache is true

---
 .../components/__tests__/query-preview.spec.ts     | 14 ++++++++++++++
 .../queries-preview/components/query-preview.vue   |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
index 9abe6f0a2a..f27082d528 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
@@ -103,6 +103,20 @@ describe('query preview', () => {
     expect(getXComponentXModuleName(wrapper.vm)).toBe('queriesPreview');
   });
 
+  it('no sends the `QueryPreviewRequestUpdated` event', () => {
+    const { queryPreviewRequestUpdatedSpy } = renderQueryPreview({
+      saveCache: true,
+      queryPreviewInfo: {
+        query: 'shoes',
+        extraParams: { directory: 'Magrathea' },
+        filters: ['fit:regular']
+      }
+    });
+
+    jest.advanceTimersByTime(0); // Wait for first emission.
+    expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(0);
+  });
+
   it('sends the `QueryPreviewRequestUpdated` event', async () => {
     const { queryPreviewRequestUpdatedSpy, wrapper, updateExtraParams } = renderQueryPreview({
       saveCache: false,
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 68baa9b946..5e76d1bda8 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -247,7 +247,7 @@
     /**
      * Cancels the (remaining) requests when the component is destroyed
      * via the `debounce.cancel()` method.
-     * If the prop 'saveCache' 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

From 56ddc60ec037346bac0e0a317ded65766371ae59 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 6 Dec 2023 11:17:13 +0100
Subject: [PATCH 22/27] feat: complete test implementation

---
 .../components/__tests__/query-preview.spec.ts              | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
index f27082d528..bb77339d18 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
@@ -103,8 +103,8 @@ describe('query preview', () => {
     expect(getXComponentXModuleName(wrapper.vm)).toBe('queriesPreview');
   });
 
-  it('no sends the `QueryPreviewRequestUpdated` event', () => {
-    const { queryPreviewRequestUpdatedSpy } = renderQueryPreview({
+  it('no sends the `QueryPreviewRequestUpdated` event if saveCache is true, but emits load', () => {
+    const { queryPreviewRequestUpdatedSpy, wrapper } = renderQueryPreview({
       saveCache: true,
       queryPreviewInfo: {
         query: 'shoes',
@@ -115,6 +115,8 @@ describe('query preview', () => {
 
     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 () => {

From e49867ed2190041483435b255854d0a2fa2474b5 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 6 Dec 2023 13:19:22 +0100
Subject: [PATCH 23/27] chore: fix pr comments

---
 packages/x-components/src/views/home/Home.vue |  2 +-
 .../__tests__/query-preview.spec.ts           | 28 +++++++++++++++----
 .../components/query-preview.vue              | 25 +++++------------
 3 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index db8c408326..3ec10de596 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -252,7 +252,7 @@
                   :queriesPreviewInfo="queriesPreviewInfo"
                   #default="{ queryPreviewInfo, totalResults, results }"
                   data-test="brand-recommendation"
-                  :saveCache="true"
+                  :persistInCache="true"
                 >
                   <div class="x-flex x-flex-col x-gap-8 x-mb-16">
                     <QueryPreviewButton
diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
index bb77339d18..c326767e4f 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
@@ -22,7 +22,7 @@ function renderQueryPreview({
   queryPreviewInfo = { query: 'milk' },
   location,
   queryFeature,
-  saveCache = false,
+  persistInCache = false,
   debounceTimeMs = 0,
   template = `<QueryPreview v-bind="$attrs" />`,
   queryPreview = {
@@ -68,7 +68,7 @@ function renderQueryPreview({
         queryPreviewInfo,
         queryFeature,
         debounceTimeMs,
-        saveCache
+        persistInCache
       }
     }
   ).findComponent(QueryPreview);
@@ -103,9 +103,10 @@ describe('query preview', () => {
     expect(getXComponentXModuleName(wrapper.vm)).toBe('queriesPreview');
   });
 
-  it('no sends the `QueryPreviewRequestUpdated` event if saveCache is true, but emits load', () => {
+  // eslint-disable-next-line max-len
+  it('does not send the `QueryPreviewRequestUpdated` event if saveCache is true, but emits load', () => {
     const { queryPreviewRequestUpdatedSpy, wrapper } = renderQueryPreview({
-      saveCache: true,
+      persistInCache: true,
       queryPreviewInfo: {
         query: 'shoes',
         extraParams: { directory: 'Magrathea' },
@@ -119,9 +120,24 @@ describe('query preview', () => {
     expect(wrapper.emitted('load')?.[0]).toEqual(['shoes']);
   });
 
+  it('does not remove the query before destroy the component', () => {
+    const { wrapper } = renderQueryPreview({
+      persistInCache: true,
+      queryPreviewInfo: {
+        query: 'shoes',
+        extraParams: { directory: 'Magrathea' },
+        filters: ['fit:regular']
+      }
+    });
+
+    wrapper.destroy();
+    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,
+      persistInCache: false,
       queryPreviewInfo: {
         query: 'shoes',
         extraParams: { directory: 'Magrathea' },
@@ -445,7 +461,7 @@ interface RenderQueryPreviewOptions {
   /** The query preview info for which preview its results. */
   queryPreviewInfo?: QueryPreviewInfo;
   /** Boolean to save queries preview in the cache. */
-  saveCache?: boolean;
+  persistInCache?: boolean;
   /** The location of the query preview in the DOM. */
   location?: string;
   /** The name of the tool that generated the query. */
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 5e76d1bda8..90fb2d65b7 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -105,7 +105,7 @@
      * @public
      */
     @Prop({ default: false })
-    public saveCache!: boolean;
+    public persistInCache!: boolean;
 
     /**
      * The results preview of the queries preview mounted.
@@ -208,19 +208,6 @@
       }, 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.
      *
@@ -235,10 +222,12 @@
           }
         }
       );
+      const previewItemQuery = this.queryPreviewInfo.query;
+      const isSavedQuery = !!this.previewResults[previewItemQuery];
 
       // 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);
+      if (isSavedQuery && this.persistInCache) {
+        this.emitLoad(this.previewResults[previewItemQuery].status);
       } else {
         this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
       }
@@ -247,14 +236,14 @@
     /**
      * Cancels the (remaining) requests when the component is destroyed
      * via the `debounce.cancel()` method.
-     * If the prop 'saveCache' is set to false, it also removes the QueryPreview
+     * If the prop 'persistInCache' 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.saveCache) {
+      if (!this.persistInCache) {
         this.$x.emit('QueryPreviewUnmountedHook', this.queryPreviewInfo.query, {
           priority: 0,
           replaceable: false

From c948340221a2d9ffbe069a57345a582db9776435 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 6 Dec 2023 13:42:15 +0100
Subject: [PATCH 24/27] chore: fix pr comments

---
 .../components/__tests__/query-preview.spec.ts                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
index c326767e4f..36a473e14b 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
@@ -104,7 +104,7 @@ describe('query preview', () => {
   });
 
   // eslint-disable-next-line max-len
-  it('does not send the `QueryPreviewRequestUpdated` event if saveCache is true, but emits load', () => {
+  it('does not send the `QueryPreviewRequestUpdated` event if persistInCache is true, but emits load', () => {
     const { queryPreviewRequestUpdatedSpy, wrapper } = renderQueryPreview({
       persistInCache: true,
       queryPreviewInfo: {
@@ -120,7 +120,7 @@ describe('query preview', () => {
     expect(wrapper.emitted('load')?.[0]).toEqual(['shoes']);
   });
 
-  it('does not remove the query before destroy the component', () => {
+  it('does not remove the query before destroying the component', () => {
     const { wrapper } = renderQueryPreview({
       persistInCache: true,
       queryPreviewInfo: {

From ed0c717386b061a9a1df6b59a7b7043df42e76ac Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 7 Dec 2023 09:59:38 +0100
Subject: [PATCH 25/27] feat: update tests and check status in cache

---
 .../__tests__/query-preview.spec.ts           | 36 +++++++++++++++++++
 .../components/query-preview.vue              |  7 +++-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
index 36a473e14b..4621c320f3 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
@@ -131,10 +131,46 @@ describe('query preview', () => {
     });
 
     wrapper.destroy();
+    expect(
+      wrapper.vm.$store.getters['x/queriesPreview/loadedQueriesPreview']['shoes']
+    ).toBeTruthy();
     expect(wrapper.emitted('load')?.length).toBe(1);
     expect(wrapper.emitted('load')?.[0]).toEqual(['shoes']);
   });
 
+  it('removes the query before destroying the component', () => {
+    const { queryPreviewRequestUpdatedSpy, wrapper } = renderQueryPreview({
+      persistInCache: false,
+      queryPreviewInfo: {
+        query: 'shoes',
+        extraParams: { directory: 'Magrathea' },
+        filters: ['fit:regular']
+      }
+    });
+
+    jest.advanceTimersByTime(0); // Wait for first emission
+    wrapper.destroy();
+    expect(wrapper.vm.$store.getters['x/queriesPreview/loadedQueriesPreview']['shoes']).toBeFalsy();
+    expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
+    expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledWith({
+      extraParams: {
+        directory: 'Magrathea'
+      },
+      filters: {
+        fit: [
+          {
+            id: 'fit:regular',
+            modelName: 'RawFilter',
+            selected: true
+          }
+        ]
+      },
+      origin: undefined,
+      query: 'shoes',
+      rows: 24
+    });
+  });
+
   it('sends the `QueryPreviewRequestUpdated` event', async () => {
     const { queryPreviewRequestUpdatedSpy, wrapper, updateExtraParams } = renderQueryPreview({
       persistInCache: false,
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 90fb2d65b7..2429d855c4 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -222,12 +222,17 @@
           }
         }
       );
+
       const previewItemQuery = this.queryPreviewInfo.query;
       const isSavedQuery = !!this.previewResults[previewItemQuery];
 
       // If the query has been saved it will emit load instead of the emitting the updated request.
       if (isSavedQuery && this.persistInCache) {
-        this.emitLoad(this.previewResults[previewItemQuery].status);
+        if (this.previewResults[previewItemQuery].status !== 'error') {
+          this.$emit('load', this.queryPreviewInfo.query);
+        } else {
+          this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
+        }
       } else {
         this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
       }

From 583b30bae002e90521e9140dcf52089fe09a2379 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 7 Dec 2023 14:02:29 +0100
Subject: [PATCH 26/27] chore: fix pr comments

---
 .../components/__tests__/query-preview.spec.ts       |  4 ----
 .../queries-preview/components/query-preview.vue     | 12 ++++--------
 .../src/x-modules/queries-preview/events.types.ts    |  2 +-
 .../src/x-modules/queries-preview/wiring.ts          |  2 +-
 4 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
index 4621c320f3..fb376ae786 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
@@ -131,9 +131,6 @@ describe('query preview', () => {
     });
 
     wrapper.destroy();
-    expect(
-      wrapper.vm.$store.getters['x/queriesPreview/loadedQueriesPreview']['shoes']
-    ).toBeTruthy();
     expect(wrapper.emitted('load')?.length).toBe(1);
     expect(wrapper.emitted('load')?.[0]).toEqual(['shoes']);
   });
@@ -150,7 +147,6 @@ describe('query preview', () => {
 
     jest.advanceTimersByTime(0); // Wait for first emission
     wrapper.destroy();
-    expect(wrapper.vm.$store.getters['x/queriesPreview/loadedQueriesPreview']['shoes']).toBeFalsy();
     expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
     expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledWith({
       extraParams: {
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index 2429d855c4..539aaf6efd 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -224,15 +224,11 @@
       );
 
       const previewItemQuery = this.queryPreviewInfo.query;
-      const isSavedQuery = !!this.previewResults[previewItemQuery];
+      const cachedQueryPreview = this.previewResults[previewItemQuery];
 
       // If the query has been saved it will emit load instead of the emitting the updated request.
-      if (isSavedQuery && this.persistInCache) {
-        if (this.previewResults[previewItemQuery].status !== 'error') {
-          this.$emit('load', this.queryPreviewInfo.query);
-        } else {
-          this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
-        }
+      if (cachedQueryPreview?.status === 'success' && this.persistInCache) {
+        this.$emit('load', this.queryPreviewInfo.query);
       } else {
         this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
       }
@@ -249,7 +245,7 @@
     protected beforeDestroy(): void {
       this.emitQueryPreviewRequestUpdated.cancel();
       if (!this.persistInCache) {
-        this.$x.emit('QueryPreviewUnmountedHook', this.queryPreviewInfo.query, {
+        this.$x.emit('NonCacheableQueryPreviewUnmounted', this.queryPreviewInfo.query, {
           priority: 0,
           replaceable: false
         });
diff --git a/packages/x-components/src/x-modules/queries-preview/events.types.ts b/packages/x-components/src/x-modules/queries-preview/events.types.ts
index eab70ddeb8..fd96444022 100644
--- a/packages/x-components/src/x-modules/queries-preview/events.types.ts
+++ b/packages/x-components/src/x-modules/queries-preview/events.types.ts
@@ -18,7 +18,7 @@ export interface QueriesPreviewXEvents {
    * The component that shows a Query preview has been unmounted.
    * Payload: The query whose preview has been removed.
    */
-  QueryPreviewUnmountedHook: string;
+  NonCacheableQueryPreviewUnmounted: string;
   /**
    * User has clicked on a query preview.
    * Payload: The {@link QueryPreviewInfo | query preview info}
diff --git a/packages/x-components/src/x-modules/queries-preview/wiring.ts b/packages/x-components/src/x-modules/queries-preview/wiring.ts
index 7850495252..c5a960a050 100644
--- a/packages/x-components/src/x-modules/queries-preview/wiring.ts
+++ b/packages/x-components/src/x-modules/queries-preview/wiring.ts
@@ -69,7 +69,7 @@ export const queriesPreviewWiring = createWiring({
   QueryPreviewRequestUpdated: {
     fetchAndSaveQueryPreviewWire
   },
-  QueryPreviewUnmountedHook: {
+  NonCacheableQueryPreviewUnmounted: {
     clearQueryPreviewWire
   },
   UserAcceptedAQueryPreview: {

From 5f2913d99ae20ddd72f77a5a638f7eaa4fadf1ae Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 7 Dec 2023 15:54:05 +0100
Subject: [PATCH 27/27] chore: fix query preview test

---
 .../__tests__/query-preview.spec.ts           | 60 ++++++++-----------
 1 file changed, 25 insertions(+), 35 deletions(-)

diff --git a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
index fb376ae786..cd344feb53 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
+++ b/packages/x-components/src/x-modules/queries-preview/components/__tests__/query-preview.spec.ts
@@ -44,6 +44,11 @@ function renderQueryPreview({
   const queryPreviewRequestUpdatedSpy = jest.fn();
   XPlugin.bus.on('QueryPreviewRequestUpdated').subscribe(queryPreviewRequestUpdatedSpy);
 
+  const nonCacheableQueryPreviewUnmountedSpy = jest.fn();
+  XPlugin.bus
+    .on('NonCacheableQueryPreviewUnmounted')
+    .subscribe(nonCacheableQueryPreviewUnmountedSpy);
+
   if (queryPreview) {
     resetXQueriesPreviewStateWith(store, {
       queriesPreview: {
@@ -76,6 +81,7 @@ function renderQueryPreview({
   return {
     wrapper,
     queryPreviewRequestUpdatedSpy,
+    nonCacheableQueryPreviewUnmountedSpy,
     queryPreviewInfo,
     queryPreview,
     findTestDataById: findTestDataById.bind(undefined, wrapper),
@@ -120,23 +126,8 @@ describe('query preview', () => {
     expect(wrapper.emitted('load')?.[0]).toEqual(['shoes']);
   });
 
-  it('does not remove the query before destroying the component', () => {
-    const { wrapper } = renderQueryPreview({
-      persistInCache: true,
-      queryPreviewInfo: {
-        query: 'shoes',
-        extraParams: { directory: 'Magrathea' },
-        filters: ['fit:regular']
-      }
-    });
-
-    wrapper.destroy();
-    expect(wrapper.emitted('load')?.length).toBe(1);
-    expect(wrapper.emitted('load')?.[0]).toEqual(['shoes']);
-  });
-
-  it('removes the query before destroying the component', () => {
-    const { queryPreviewRequestUpdatedSpy, wrapper } = renderQueryPreview({
+  it('emits `NonCacheableQueryPreviewUnmounted` only if `persistInCache` is false', () => {
+    const { nonCacheableQueryPreviewUnmountedSpy, wrapper } = renderQueryPreview({
       persistInCache: false,
       queryPreviewInfo: {
         query: 'shoes',
@@ -147,24 +138,21 @@ describe('query preview', () => {
 
     jest.advanceTimersByTime(0); // Wait for first emission
     wrapper.destroy();
-    expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledTimes(1);
-    expect(queryPreviewRequestUpdatedSpy).toHaveBeenCalledWith({
-      extraParams: {
-        directory: 'Magrathea'
-      },
-      filters: {
-        fit: [
-          {
-            id: 'fit:regular',
-            modelName: 'RawFilter',
-            selected: true
-          }
-        ]
-      },
-      origin: undefined,
-      query: 'shoes',
-      rows: 24
-    });
+    expect(nonCacheableQueryPreviewUnmountedSpy).toHaveBeenCalledTimes(1);
+
+    const { nonCacheableQueryPreviewUnmountedSpy: unmountedEvent, wrapper: newWrapper } =
+      renderQueryPreview({
+        persistInCache: true,
+        queryPreviewInfo: {
+          query: 'shoes',
+          extraParams: { directory: 'Magrathea' },
+          filters: ['fit:regular']
+        }
+      });
+
+    jest.advanceTimersByTime(0); // Wait for first emission
+    newWrapper.destroy();
+    expect(unmountedEvent).toHaveBeenCalledTimes(0);
   });
 
   it('sends the `QueryPreviewRequestUpdated` event', async () => {
@@ -514,6 +502,8 @@ interface RenderQueryPreviewAPI {
   wrapper: Wrapper<Vue>;
   /** A Jest spy set in the {@link XPlugin} `on` function. */
   queryPreviewRequestUpdatedSpy?: jest.Mock;
+  /** A Jest spy set in the {@link XPlugin} `on` function. */
+  nonCacheableQueryPreviewUnmountedSpy?: jest.Mock;
   /** The query for which preview its results. */
   queryPreviewInfo: QueryPreviewInfo;
   /** The results preview for the passed query. */