From 94f657864cadc15046bd217611d5f28e76dc600e Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Mon, 15 Apr 2024 12:26:52 +0200
Subject: [PATCH 1/6] feat: migrate queryPreview component

---
 .../components/query-preview.vue              | 486 +++++++++---------
 1 file changed, 255 insertions(+), 231 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 191e81770e..9a7c34d921 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
@@ -35,16 +35,22 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop, Inject, Watch } from 'vue-property-decorator';
+  import {
+    computed,
+    ComputedRef,
+    defineComponent,
+    inject,
+    onBeforeUnmount,
+    onMounted,
+    PropType,
+    provide,
+    Ref,
+    watch
+  } from 'vue';
   import { SearchRequest, Result, Filter } from '@empathyco/x-types';
   import { deepEqual, Dictionary } from '@empathyco/x-utils';
-  import { State } from '../../../components/decorators/store.decorators';
   import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';
-  import { XProvide } from '../../../components/decorators/injection.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { NoElement } from '../../../components/no-element';
-  import { RequestStatus } from '../../../store';
   import { QueryFeature, FeatureLocation } from '../../../types/origin';
   import { QueryPreviewInfo, QueryPreviewItem } from '../store/types';
   import { QueriesPreviewConfig } from '../config.types';
@@ -54,6 +60,8 @@
   import { DebouncedFunction } from '../../../utils';
   import { createRawFilter } from '../../../__stubs__/index';
   import { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview';
+  import { useRegisterXModule, useState } from '../../../composables/index';
+  import { useXBus } from '../../../composables/use-x-bus';
 
   /**
    * Retrieves a preview of the results of a query and exposes them in the default slot,
@@ -62,249 +70,265 @@
    *
    * @public
    */
-  @Component({
+
+  export default defineComponent({
+    name: 'QueryPreview',
     components: {
       NoElement
     },
-    mixins: [xComponentMixin(queriesPreviewXModule)]
-  })
-  export default class QueryPreview extends Vue {
-    /**
-     * The information about the request of the query preview.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected queryPreviewInfo!: QueryPreviewInfo;
-
-    /**
-     * The origin property for the request.
-     *
-     * @public
-     */
-    @Prop()
-    protected queryFeature?: QueryFeature;
-
-    /**
-     * Number of query preview results to be rendered.
-     *
-     * @public
-     */
-    @Prop()
-    protected maxItemsToRender?: number;
-
-    /**
-     * Debounce time in milliseconds for triggering the search requests.
-     * It will default to 0 to fit the most common use case (pre-search),
-     * and it would work properly with a 250 value inside empathize.
-     */
-    @Prop({ default: 0 })
-    public debounceTimeMs!: number;
-
-    /**
-     * Controls whether the QueryPreview should be removed from the state
-     * when the component is destroyed.
-     *
-     * @public
-     */
-    @Prop({ default: false })
-    public persistInCache!: boolean;
-
-    /**
-     * The results preview of the queries preview cacheable mounted.
-     * It is a dictionary, indexed by the query preview query.
-     */
-    @State('queriesPreview', 'queriesPreview')
-    public previewResults!: Dictionary<QueryPreviewItem>;
-
-    /**
-     * As the request is handled in this component, we need
-     * the extra params that will be used in the request.
-     */
-    @State('queriesPreview', 'params')
-    public params!: Dictionary<unknown>;
-
-    /**
-     * As the request is handled in this component, we need
-     * the config that will be used in the request.
-     */
-    @State('queriesPreview', 'config')
-    public config!: QueriesPreviewConfig;
-
-    /**
-     * The results to render from the state.
-     *
-     * @remarks The results list are provided with `items` key. It can be
-     * concatenated with list items from components such as `BannersList`, `PromotedsList`,
-     * `BaseGrid` or any component that injects the list.
-     *
-     * @returns A list of results.
-     * @public
-     */
-    @XProvide(LIST_ITEMS_KEY)
-    public get results(): Result[] | undefined {
-      return this.queryPreviewResults?.results;
-    }
-
-    /**
-     * It injects the provided {@link FeatureLocation} of the selected query in the search request.
-     *
-     * @internal
-     */
-    @Inject({ default: undefined })
-    protected location?: FeatureLocation;
-
-    /**
-     * Query Preview key converted into a unique id.
-     *
-     * @returns The query hash.
-     * @internal
-     */
-    public get queryPreviewHash(): string {
-      return getHashFromQueryPreviewInfo(this.queryPreviewInfo);
-    }
-
-    /**
-     * The computed request object to be used to retrieve the query preview results.
-     *
-     * @returns The search request object.
-     * @internal
-     */
-    protected get queryPreviewRequest(): SearchRequest {
-      const origin = createOrigin({
-        feature: this.queryFeature,
-        location: this.location
+    xModule: 'queriesPreview',
+    props: {
+      /**
+       * The information about the request of the query preview.
+       *
+       * @public
+       */
+      queryPreviewInfo: {
+        type: Object as PropType<QueryPreviewInfo>,
+        required: true
+      },
+      /**
+       * The origin property for the request.
+       *
+       * @public
+       */
+      queryFeature: {
+        type: Object as PropType<QueryFeature>
+      },
+      /**
+       * Number of query preview results to be rendered.
+       *
+       * @public
+       */
+      maxItemsToRender: {
+        type: Number
+      },
+      /**
+       * Debounce time in milliseconds for triggering the search requests.
+       * It will default to 0 to fit the most common use case (pre-search),
+       * and it would work properly with a 250 value inside empathize.
+       */
+      debounceTimeMs: {
+        type: Number,
+        default: 0
+      },
+      /**
+       * Controls whether the QueryPreview should be removed from the state
+       * when the component is destroyed.
+       *
+       * @public
+       */
+      persistInCache: {
+        type: Boolean,
+        default: false
+      }
+    },
+    emits: ['load', 'error'],
+    setup(props, { emit }) {
+      useRegisterXModule(queriesPreviewXModule);
+
+      const xBus = useXBus();
+
+      const queriesPreviewState = useState('queriesPreview', [
+        'queriesPreview',
+        'params',
+        'config'
+      ]);
+
+      /**
+       * The results preview of the queries preview cacheable mounted.
+       * It is a dictionary, indexed by the query preview query.
+       */
+      const previewResults: ComputedRef<Dictionary<QueryPreviewItem>> =
+        queriesPreviewState.queriesPreview;
+
+      /**
+       * As the request is handled in this component, we need
+       * the extra params that will be used in the request.
+       */
+      const params: ComputedRef<Dictionary<unknown>> = queriesPreviewState.params;
+
+      /**
+       * As the request is handled in this component, we need
+       * the config that will be used in the request.
+       */
+      const config: ComputedRef<QueriesPreviewConfig> = queriesPreviewState.config;
+
+      /**
+       * Query Preview key converted into a unique id.
+       *
+       * @returns The query hash.
+       * @internal
+       */
+      const queryPreviewHash = computed((): string => {
+        return getHashFromQueryPreviewInfo(props.queryPreviewInfo);
       });
-      const filters = this.queryPreviewInfo.filters?.reduce((filtersList, filterId) => {
-        const facetId = filterId.split(':')[0];
-        const rawFilter = createRawFilter(filterId);
-        filtersList[facetId] = filtersList[facetId]
-          ? filtersList[facetId].concat(rawFilter)
-          : [rawFilter];
 
-        return filtersList;
-      }, {} as Record<string, Filter[]>);
-
-      return {
-        query: this.queryPreviewInfo.query,
-        rows: this.config.maxItemsToRequest,
-        extraParams: {
-          ...this.params,
-          ...this.queryPreviewInfo.extraParams
-        },
-        filters: filters,
-        ...(origin && { origin })
-      };
-    }
+      /**
+       * Gets from the state the results preview of the query preview.
+       *
+       * @returns The results preview of the actual query preview.
+       */
+      const queryPreviewResults = computed((): Partial<QueryPreviewItem> | undefined => {
+        const resultsPreview = previewResults.value[queryPreviewHash.value];
+        return resultsPreview?.results
+          ? {
+              ...resultsPreview,
+              results: resultsPreview.results.slice(0, props.maxItemsToRender)
+            }
+          : undefined;
+      });
 
-    /**
-     * Gets from the state the results preview of the query preview.
-     *
-     * @returns The results preview of the actual query preview.
-     */
-    public get queryPreviewResults(): Partial<QueryPreviewItem> | undefined {
-      const previewResults = this.previewResults[this.queryPreviewHash];
-      return previewResults?.results
-        ? {
-            ...previewResults,
-            results: previewResults.results.slice(0, this.maxItemsToRender)
-          }
-        : undefined;
-    }
+      /**
+       * The results to render from the state.
+       *
+       * @remarks The results list are provided with `items` key. It can be
+       * concatenated with list items from components such as `BannersList`, `PromotedsList`,
+       * `BaseGrid` or any component that injects the list.
+       *
+       * @returns A list of results.
+       * @public
+       */
+      const results = computed((): Result[] | undefined => {
+        return queryPreviewResults.value?.results;
+      });
+      provide<Ref<Result[] | undefined>>(LIST_ITEMS_KEY as string, results);
+
+      /**
+       * It injects the provided {@link FeatureLocation} of the selected query in the search request.
+       *
+       * @internal
+       */
+      const location = inject<FeatureLocation | undefined>('location', undefined);
+
+      /**
+       * The computed request object to be used to retrieve the query preview results.
+       *
+       * @returns The search request object.
+       * @internal
+       */
+      const queryPreviewRequest = computed((): SearchRequest => {
+        const origin = createOrigin({
+          feature: props.queryFeature,
+          location: location
+        });
+        const filters = props.queryPreviewInfo.filters?.reduce((filtersList, filterId) => {
+          const facetId = filterId.split(':')[0];
+          const rawFilter = createRawFilter(filterId);
+          filtersList[facetId] = filtersList[facetId]
+            ? filtersList[facetId].concat(rawFilter)
+            : [rawFilter];
+
+          return filtersList;
+        }, {} as Record<string, Filter[]>);
+
+        return {
+          query: props.queryPreviewInfo.query,
+          rows: config.value.maxItemsToRequest,
+          extraParams: {
+            ...params.value,
+            ...props.queryPreviewInfo.extraParams
+          },
+          filters: filters,
+          ...(origin && { origin })
+        };
+      });
 
-    /**
-     * The debounce method to trigger the request after the debounceTimeMs defined
-     * for cacheable queries.
-     *
-     * @returns The search request object.
-     * @internal
-     */
-    protected get emitQueryPreviewRequestUpdated(): DebouncedFunction<[SearchRequest]> {
-      return debounce(request => {
-        this.$x.emit('QueryPreviewRequestUpdated', request, { priority: 0, replaceable: false });
-      }, this.debounceTimeMs);
-    }
+      /**
+       * The debounce method to trigger the request after the debounceTimeMs defined
+       * for cacheable queries.
+       *
+       * @returns The search request object.
+       * @internal
+       */
+      const emitQueryPreviewRequestUpdated = computed((): DebouncedFunction<[SearchRequest]> => {
+        return debounce(request => {
+          xBus.emit('QueryPreviewRequestUpdated', request, { priority: 0, replaceable: false });
+        }, props.debounceTimeMs);
+      });
 
-    /**
-     * Initialises watcher to emit debounced requests, and first value for the requests.
-     *
-     * @internal
-     */
-    protected created(): void {
-      this.$watch(
-        () => this.queryPreviewRequest,
-        (newRequest, oldRequest) => {
+      /**
+       * Initialises watcher to emit debounced requests, and first value for the requests.
+       *
+       * @internal
+       */
+      onMounted(() => {
+        watch(queryPreviewRequest, (newRequest, oldRequest) => {
           if (!deepEqual(newRequest, oldRequest)) {
-            this.emitQueryPreviewRequestUpdated(newRequest);
+            emitQueryPreviewRequestUpdated.value(newRequest);
           }
-        }
-      );
+        });
 
-      const cachedQueryPreview = this.previewResults[this.queryPreviewHash];
+        const cachedQueryPreview = previewResults.value[queryPreviewHash.value];
+
+        // If the query has been saved it will emit load instead of the emitting the updated request.
+        if (cachedQueryPreview?.status === 'success') {
+          emit('load', queryPreviewHash.value);
+          xBus.emit('QueryPreviewMounted', queryPreviewHash.value, {
+            priority: 0,
+            replaceable: false
+          });
+        } else {
+          emitQueryPreviewRequestUpdated.value(queryPreviewRequest.value);
+        }
+      });
 
-      // If the query has been saved it will emit load instead of the emitting the updated request.
-      if (cachedQueryPreview?.status === 'success') {
-        this.$emit('load', this.queryPreviewHash);
-        this.$x.emit('QueryPreviewMounted', this.queryPreviewHash, {
-          priority: 0,
-          replaceable: false
-        });
-      } else {
-        this.emitQueryPreviewRequestUpdated(this.queryPreviewRequest);
-      }
-    }
+      /**
+       * Cancels the (remaining) requests when the component is destroyed
+       * via the `debounce.cancel()` method.
+       * If the prop 'persistInCache' is set to false, it also removes the QueryPreview
+       * from the state when the component is destroyed.
+       *
+       * @internal
+       */
+      onBeforeUnmount(() => {
+        emitQueryPreviewRequestUpdated.value.cancel();
+        xBus.emit(
+          'QueryPreviewUnmounted',
+          { queryPreviewHash: queryPreviewHash.value, cache: props.persistInCache },
+          {
+            priority: 0,
+            replaceable: false
+          }
+        );
+      });
 
-    /**
-     * Cancels the (remaining) requests when the component is destroyed
-     * via the `debounce.cancel()` method.
-     * 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();
-      this.$x.emit(
-        'QueryPreviewUnmounted',
-        { queryPreviewHash: this.queryPreviewHash, cache: this.persistInCache },
-        {
-          priority: 0,
-          replaceable: false
+      /**
+       * Cancels the previous request when the debounced function changes (e.g: the debounceTimeMs
+       * prop changes or there is a request in progress that cancels it).
+       *
+       * @param _new - The new debounced function.
+       * @param old - The previous debounced function.
+       * @internal
+       */
+      watch(
+        emitQueryPreviewRequestUpdated,
+        (_new: DebouncedFunction<[SearchRequest]>, old: DebouncedFunction<[SearchRequest]>) => {
+          old.cancel();
         }
       );
-    }
 
-    /**
-     * Cancels the previous request when the debounced function changes (e.g: the debounceTimeMs
-     * prop changes or there is a request in progress that cancels it).
-     *
-     * @param _new - The new debounced function.
-     * @param old - The previous debounced function.
-     * @internal
-     */
-    @Watch('emitQueryPreviewRequestUpdated')
-    protected cancelEmitPreviewRequestUpdated(
-      _new: DebouncedFunction<[SearchRequest]>,
-      old: DebouncedFunction<[SearchRequest]>
-    ): void {
-      old.cancel();
-    }
+      const queryPreviewResultsStatus = computed(() => queryPreviewResults.value?.status);
+
+      /**
+       * Emits an event when the query results are loaded or fail to load.
+       *
+       * @param status - The status of the query preview request.
+       * @internal
+       */
+      watch(queryPreviewResultsStatus, () => {
+        if (queryPreviewResultsStatus.value === 'success') {
+          emit(results.value?.length ? 'load' : 'error', queryPreviewHash.value);
+        } else if (queryPreviewResultsStatus.value === 'error') {
+          emit('error', queryPreviewHash.value);
+        }
+      });
 
-    /**
-     * Emits an event when the query results are loaded or fail to load.
-     *
-     * @param status - The status of the query preview request.
-     * @internal
-     */
-    @Watch('queryPreviewResults.status')
-    emitLoad(status: RequestStatus | undefined): void {
-      if (status === 'success') {
-        this.$emit(this.results?.length ? 'load' : 'error', this.queryPreviewHash);
-      } else if (status === 'error') {
-        this.$emit('error', this.queryPreviewHash);
-      }
+      return {
+        queryPreviewResults
+      };
     }
-  }
+  });
 </script>
 <docs lang="mdx">
 ## Events

From eb7c1f835c97fcef75991d9faa3cd8ef858b708f Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 16 Apr 2024 14:48:17 +0200
Subject: [PATCH 2/6] feat: migrate queryPreviewList component

---
 .../components/query-preview-list.vue         | 208 ++++++++++--------
 .../components/query-preview.vue              |  37 ++--
 2 files changed, 128 insertions(+), 117 deletions(-)

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 c4393300f6..cd0fb0f9d4 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
@@ -20,14 +20,14 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop, Watch } from 'vue-property-decorator';
+  import Vue, { computed, defineComponent, PropType, ref, watch } from 'vue';
   import StaggeredFadeAndSlide from '../../../components/animations/staggered-fade-and-slide.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { RequestStatus } from '../../../store';
   import { queriesPreviewXModule } from '../x-module';
   import { QueryPreviewInfo } from '../store/types';
   import { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview';
+  import { AnimationProp } from '../../../types/index';
+  import { useRegisterXModule } from '../../../composables/index';
   import QueryPreview from './query-preview.vue';
 
   interface QueryPreviewStatusRecord {
@@ -41,111 +41,125 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'QueryPreviewList',
+    xModule: 'queriesPreview',
+    components: { QueryPreview, StaggeredFadeAndSlide },
     inheritAttrs: false,
-    components: {
-      QueryPreview,
-      StaggeredFadeAndSlide
+    props: {
+      /**
+       * Animation component that will be used to animate the elements.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
+      },
+      /**
+       * The list of queries preview to render.
+       *
+       * @public
+       */
+      queriesPreviewInfo: {
+        type: Array as PropType<QueryPreviewInfo[]>,
+        required: true
+      }
     },
-    mixins: [xComponentMixin(queriesPreviewXModule)]
-  })
-  export default class QueryPreviewList extends Vue {
-    /**
-     * Animation component that will be used to animate the elements.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    public animation!: Vue | string;
-
-    /**
-     * The list of queries preview to render.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    public queriesPreviewInfo!: QueryPreviewInfo[];
+    setup(props) {
+      useRegisterXModule(queriesPreviewXModule);
 
-    /**
-     * Contains the status of the preview requests, indexed by query.
-     */
-    public queriesStatus: QueryPreviewStatusRecord = {};
+      /**
+       * Contains the status of the preview requests, indexed by query.
+       */
+      let queriesStatus = ref<QueryPreviewStatusRecord>({});
 
-    /**
-     * The list of queries to preview.
-     *
-     * @returns The list of queries in the queriesPreviewInfo list.
-     * @internal
-     */
-    protected get queries(): string[] {
-      return this.queriesPreviewInfo.map(item => getHashFromQueryPreviewInfo(item));
-    }
+      /**
+       * The list of queries to preview.
+       *
+       * @returns The list of queries in the queriesPreviewInfo list.
+       * @internal
+       */
+      const queries = computed((): string[] => {
+        return props.queriesPreviewInfo.map(item => getHashFromQueryPreviewInfo(item));
+      });
 
-    /**
-     * Gets all the queries to render, that are those that don't have an `error` status.
-     *
-     * @returns A list of queries.
-     * @internal
-     */
-    protected get renderedQueryPreviews(): QueryPreviewInfo[] {
-      return this.queriesPreviewInfo.filter(item => {
-        const queryPreviewHash = getHashFromQueryPreviewInfo(item);
-        return (
-          this.queriesStatus[queryPreviewHash] === 'success' ||
-          this.queriesStatus[queryPreviewHash] === 'loading'
-        );
+      /**
+       * Gets all the queries to render, that are those that don't have an `error` status.
+       *
+       * @returns A list of queries.
+       * @internal
+       */
+      const renderedQueryPreviews = computed((): QueryPreviewInfo[] => {
+        return props.queriesPreviewInfo.filter(item => {
+          const queryPreviewHash = getHashFromQueryPreviewInfo(item);
+          return (
+            queriesStatus.value[queryPreviewHash] === 'success' ||
+            queriesStatus.value[queryPreviewHash] === 'loading'
+          );
+        });
       });
-    }
 
-    /**
-     * Resets the status of all queries if they change.
-     *
-     * @param newQueries - The new queries.
-     * @param oldQueries - The old queries.
-     * @internal
-     */
-    @Watch('queries', { immediate: true })
-    protected resetStatusRecord(newQueries: string[], oldQueries: string[]): void {
-      if (newQueries?.toString() !== oldQueries?.toString()) {
-        this.queriesStatus = {};
-        this.loadNext();
-      }
-    }
+      /**
+       * Tries to load the next query.
+       *
+       * @internal
+       */
+      const loadNext = (): void => {
+        const queryToLoad = queries.value.find(query => !(query in queriesStatus.value));
+        if (queryToLoad) {
+          //TODO - change this logic when we migrate to vue@3. It won't be necessary. Check this link https://v2.vuejs.org/v2/guide/migration-vue-2-7#Behavior-Differences-from-Vue-3
+          Vue.set(queriesStatus.value, queryToLoad, 'loading');
+        }
+      };
 
-    /**
-     * Sets the status of a given query to `success`.
-     *
-     * @param loadedQuery - The query to flag as loaded.
-     * @internal
-     */
-    protected flagAsLoaded(loadedQuery: string): void {
-      this.queriesStatus[loadedQuery] = 'success';
-      this.loadNext();
-    }
+      /**
+       * Resets the status of all queries if they change.
+       *
+       * @param newQueries - The new queries.
+       * @param oldQueries - The old queries.
+       * @internal
+       */
+      watch(
+        queries,
+        (newQueries: string[], oldQueries: string[] | undefined) => {
+          if (newQueries.toString() !== oldQueries?.toString()) {
+            queriesStatus.value = {};
+            loadNext();
+          }
+        },
+        { immediate: true }
+      );
 
-    /**
-     * Sets the status of a given query to `error`.
-     *
-     * @param failedQuery - The query to flag as failed.
-     * @internal
-     */
-    protected flagAsFailed(failedQuery: string): void {
-      this.queriesStatus[failedQuery] = 'error';
-      this.loadNext();
-    }
+      /**
+       * Sets the status of a given query to `success`.
+       *
+       * @param loadedQuery - The query to flag as loaded.
+       * @internal
+       */
+      const flagAsLoaded = (loadedQuery: string): void => {
+        queriesStatus.value[loadedQuery] = 'success';
+        loadNext();
+      };
 
-    /**
-     * Tries to load the next query.
-     *
-     * @internal
-     */
-    protected loadNext(): void {
-      const queryToLoad = this.queries.find(query => !(query in this.queriesStatus));
-      if (queryToLoad) {
-        this.$set(this.queriesStatus, queryToLoad, 'loading');
-      }
+      /**
+       * Sets the status of a given query to `error`.
+       *
+       * @param failedQuery - The query to flag as failed.
+       * @internal
+       */
+      const flagAsFailed = (failedQuery: string): void => {
+        queriesStatus.value[failedQuery] = 'error';
+        loadNext();
+      };
+
+      return {
+        renderedQueryPreviews,
+        flagAsFailed,
+        flagAsLoaded
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
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 9a7c34d921..a85c5911a4 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
@@ -41,7 +41,6 @@
     defineComponent,
     inject,
     onBeforeUnmount,
-    onMounted,
     PropType,
     provide,
     Ref,
@@ -93,7 +92,7 @@
        * @public
        */
       queryFeature: {
-        type: Object as PropType<QueryFeature>
+        type: String as PropType<QueryFeature>
       },
       /**
        * Number of query preview results to be rendered.
@@ -252,27 +251,25 @@
        *
        * @internal
        */
-      onMounted(() => {
-        watch(queryPreviewRequest, (newRequest, oldRequest) => {
-          if (!deepEqual(newRequest, oldRequest)) {
-            emitQueryPreviewRequestUpdated.value(newRequest);
-          }
-        });
-
-        const cachedQueryPreview = previewResults.value[queryPreviewHash.value];
-
-        // If the query has been saved it will emit load instead of the emitting the updated request.
-        if (cachedQueryPreview?.status === 'success') {
-          emit('load', queryPreviewHash.value);
-          xBus.emit('QueryPreviewMounted', queryPreviewHash.value, {
-            priority: 0,
-            replaceable: false
-          });
-        } else {
-          emitQueryPreviewRequestUpdated.value(queryPreviewRequest.value);
+      watch(queryPreviewRequest, (newRequest, oldRequest) => {
+        if (!deepEqual(newRequest, oldRequest)) {
+          emitQueryPreviewRequestUpdated.value(newRequest);
         }
       });
 
+      const cachedQueryPreview = previewResults.value[queryPreviewHash.value];
+
+      // If the query has been saved it will emit load instead of the emitting the updated request.
+      if (cachedQueryPreview?.status === 'success') {
+        emit('load', queryPreviewHash.value);
+        xBus.emit('QueryPreviewMounted', queryPreviewHash.value, {
+          priority: 0,
+          replaceable: false
+        });
+      } else {
+        emitQueryPreviewRequestUpdated.value(queryPreviewRequest.value);
+      }
+
       /**
        * Cancels the (remaining) requests when the component is destroyed
        * via the `debounce.cancel()` method.

From a87dccec9f58dcdc087373389c41dcc684ce64bc Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 17 Apr 2024 10:43:27 +0200
Subject: [PATCH 3/6] chore: location inject

---
 .../x-modules/queries-preview/components/query-preview.vue  | 6 +++++-
 1 file changed, 5 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 a85c5911a4..8ed1fd7fce 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
@@ -198,7 +198,11 @@
        *
        * @internal
        */
-      const location = inject<FeatureLocation | undefined>('location', undefined);
+      const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location', 'none');
+      const location =
+        typeof injectedLocation === 'object' && 'value' in injectedLocation
+          ? injectedLocation.value
+          : injectedLocation;
 
       /**
        * The computed request object to be used to retrieve the query preview results.

From f2a8a8591cff8e5f7d03d54c579adb5fe21be17f Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 24 Apr 2024 13:33:01 +0200
Subject: [PATCH 4/6] chore: refactor v-bind and $scopedSlots

---
 .../queries-preview/components/query-preview-list.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

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 cd0fb0f9d4..7871bac89f 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
@@ -6,12 +6,12 @@
       data-test="query-preview-item"
     >
       <QueryPreview
+        v-model="$attrs"
         @load="flagAsLoaded"
         @error="flagAsFailed"
-        v-bind="$attrs"
         :queryPreviewInfo="queryPreview"
       >
-        <template v-for="(_, slotName) in $scopedSlots" v-slot:[slotName]="scope">
+        <template v-for="(_, slotName) in scopedSlots" v-slot:[slotName]="scope">
           <slot :name="slotName" v-bind="scope" />
         </template>
       </QueryPreview>
@@ -66,9 +66,11 @@
         required: true
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       useRegisterXModule(queriesPreviewXModule);
 
+      const scopedSlots = slots;
+
       /**
        * Contains the status of the preview requests, indexed by query.
        */
@@ -156,7 +158,8 @@
       return {
         renderedQueryPreviews,
         flagAsFailed,
-        flagAsLoaded
+        flagAsLoaded,
+        scopedSlots
       };
     }
   });

From 431fb3ac3a220f1b0400814521a108484e052483 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 24 Apr 2024 13:35:29 +0200
Subject: [PATCH 5/6] chore: revert refactor v-bind

---
 .../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 7871bac89f..d547197939 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
@@ -6,9 +6,9 @@
       data-test="query-preview-item"
     >
       <QueryPreview
-        v-model="$attrs"
         @load="flagAsLoaded"
         @error="flagAsFailed"
+        v-bind="$attrs"
         :queryPreviewInfo="queryPreview"
       >
         <template v-for="(_, slotName) in scopedSlots" v-slot:[slotName]="scope">

From 38a252dcb2c134aae544551ef00c2d1d453103a5 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Fri, 26 Apr 2024 08:31:01 +0200
Subject: [PATCH 6/6] chore: fix pr comments

---
 .../components/query-preview-list.vue         | 39 +++++++++----------
 .../components/query-preview.vue              |  7 ++--
 2 files changed, 23 insertions(+), 23 deletions(-)

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 d547197939..0951de835e 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
@@ -11,7 +11,7 @@
         v-bind="$attrs"
         :queryPreviewInfo="queryPreview"
       >
-        <template v-for="(_, slotName) in scopedSlots" v-slot:[slotName]="scope">
+        <template v-for="(_, slotName) in renderSlots" v-slot:[slotName]="scope">
           <slot :name="slotName" v-bind="scope" />
         </template>
       </QueryPreview>
@@ -21,13 +21,12 @@
 
 <script lang="ts">
   import Vue, { computed, defineComponent, PropType, ref, watch } from 'vue';
-  import StaggeredFadeAndSlide from '../../../components/animations/staggered-fade-and-slide.vue';
   import { RequestStatus } from '../../../store';
   import { queriesPreviewXModule } from '../x-module';
   import { QueryPreviewInfo } from '../store/types';
   import { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview';
-  import { AnimationProp } from '../../../types/index';
-  import { useRegisterXModule } from '../../../composables/index';
+  import { AnimationProp } from '../../../types/animation-prop';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import QueryPreview from './query-preview.vue';
 
   interface QueryPreviewStatusRecord {
@@ -43,33 +42,33 @@
    */
   export default defineComponent({
     name: 'QueryPreviewList',
-    xModule: 'queriesPreview',
-    components: { QueryPreview, StaggeredFadeAndSlide },
+    xModule: queriesPreviewXModule.name,
+    components: { QueryPreview },
     inheritAttrs: false,
     props: {
       /**
-       * Animation component that will be used to animate the elements.
+       * The list of queries preview to render.
        *
        * @public
        */
-      animation: {
-        type: AnimationProp,
-        default: 'ul'
+      queriesPreviewInfo: {
+        type: Array as PropType<QueryPreviewInfo[]>,
+        required: true
       },
       /**
-       * The list of queries preview to render.
+       * Animation component that will be used to animate the elements.
        *
        * @public
        */
-      queriesPreviewInfo: {
-        type: Array as PropType<QueryPreviewInfo[]>,
-        required: true
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
       }
     },
     setup(props, { slots }) {
       useRegisterXModule(queriesPreviewXModule);
 
-      const scopedSlots = slots;
+      const renderSlots = slots;
 
       /**
        * Contains the status of the preview requests, indexed by query.
@@ -82,9 +81,9 @@
        * @returns The list of queries in the queriesPreviewInfo list.
        * @internal
        */
-      const queries = computed((): string[] => {
-        return props.queriesPreviewInfo.map(item => getHashFromQueryPreviewInfo(item));
-      });
+      const queries = computed((): string[] =>
+        props.queriesPreviewInfo.map(item => getHashFromQueryPreviewInfo(item))
+      );
 
       /**
        * Gets all the queries to render, that are those that don't have an `error` status.
@@ -130,7 +129,7 @@
             loadNext();
           }
         },
-        { immediate: true }
+        { immediate: true, deep: true }
       );
 
       /**
@@ -159,7 +158,7 @@
         renderedQueryPreviews,
         flagAsFailed,
         flagAsLoaded,
-        scopedSlots
+        renderSlots
       };
     }
   });
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 8ed1fd7fce..7bdd812aee 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
@@ -57,9 +57,10 @@
   import { createOrigin } from '../../../utils/origin';
   import { debounce } from '../../../utils/debounce';
   import { DebouncedFunction } from '../../../utils';
-  import { createRawFilter } from '../../../__stubs__/index';
+  import { createRawFilter } from '../../../__stubs__/filters-stubs.factory';
   import { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview';
-  import { useRegisterXModule, useState } from '../../../composables/index';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
   import { useXBus } from '../../../composables/use-x-bus';
 
   /**
@@ -75,7 +76,7 @@
     components: {
       NoElement
     },
-    xModule: 'queriesPreview',
+    xModule: queriesPreviewXModule.name,
     props: {
       /**
        * The information about the request of the query preview.