feat: update result information in the QPs (#1591)

packages/x-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts

@@ -33,7 +33,8 @@ const result = createResultStub('jacket', { variants });
 const render = ({
   template = '<ResultVariantSelector/>',
   result = {},
-  autoSelectDepth = Number.POSITIVE_INFINITY
+  autoSelectDepth = Number.POSITIVE_INFINITY,
+  queryPreviewHash = null as string | null
 } = {}) => {
   installNewXPlugin();
   const emitSpy = jest.spyOn(XPlugin.bus, 'emit');
@@ -50,6 +51,9 @@ const render = ({
       ResultVariantsProvider,
       ResultVariantSelector
     },
+    provide: {
+      queryPreviewHash
+    },
     data: () => ({
       result,
       autoSelectDepth
@@ -165,7 +169,26 @@ describe('results with variants', () => {
     expect(emitSpy).toHaveBeenCalledTimes(1);
     expect(emitSpy).toHaveBeenCalledWith(
       'UserSelectedAResultVariant',
-      { result, variant: variants[0], level: 0 },
+      { result, variant: variants[0], level: 0, queryPreviewHash: null },
+      expect.anything()
+    );
+  });
+
+  it('emits UserSelectedAResultVariant event when a variant from a query preview is selected', async () => {
+    const { wrapper, emitSpy } = render({
+      result,
+      autoSelectDepth: 0,
+      queryPreviewHash: 'abcd'
+    });
+
+    const button = wrapper.find(getDataTestSelector('variant-button'));
+
+    await button.trigger('click');
+
+    expect(emitSpy).toHaveBeenCalledTimes(1);
+    expect(emitSpy).toHaveBeenCalledWith(
+      'UserSelectedAResultVariant',
+      { result, variant: variants[0], level: 0, queryPreviewHash: 'abcd' },
       expect.anything()
     );
   });

packages/x-components/src/components/result/result-variants-provider.vue

@@ -1,5 +1,16 @@
 <script lang="ts">
-  import { defineComponent, ref, computed, watch, provide, Ref, PropType, h } from 'vue';
+  import {
+    defineComponent,
+    ref,
+    computed,
+    watch,
+    provide,
+    Ref,
+    PropType,
+    h,
+    inject,
+    ComputedRef
+  } from 'vue';
   import { Result, ResultVariant } from '@empathyco/x-types';
   import {
     RESULT_WITH_VARIANTS_KEY,
@@ -55,6 +66,13 @@
        */
       const selectedVariants = ref<ResultVariant[]>([]);
 
+      /**
+       * It injects the queryPreviewHash provided by a query-preview.
+       *
+       * @internal
+       */
+      const queryPreviewHash = inject<ComputedRef<string> | null>('queryPreviewHash', null);
+
       /**
        * Selects a variant of the result.
        * When called, it slices the array of selected variants to remove the selected child variants.
@@ -68,7 +86,12 @@
           return;
         }
         selectedVariants.value.splice(level, Number.POSITIVE_INFINITY, variant);
-        xBus.emit('UserSelectedAResultVariant', { variant, level, result: result.value });
+        xBus.emit('UserSelectedAResultVariant', {
+          variant,
+          level,
+          result: result.value,
+          queryPreviewHash
+        });
       }
 
       /**

packages/x-components/src/wiring/events.types.ts

@@ -1,4 +1,5 @@
 import { Result, ResultVariant, Suggestion } from '@empathyco/x-types';
+import { ComputedRef } from 'vue';
 import { ExtractPayload } from '../store/store.types';
 import { ArrowKey, PropsWithType } from '../utils';
 import { DeviceXEvents } from '../x-modules/device';
@@ -200,10 +201,15 @@ export interface XEventsTypes
   UserReachedEmpathizeTop: void;
   /**
    * The user selected a result variant.
-   * Payload: And object containing the result, the selected variant and the level of the selected
-   * variant.
+   * Payload: And object containing the result, the selected variant, the level of the selected
+   * variant and the query preview hash.
    */
-  UserSelectedAResultVariant: { result: Result; variant: ResultVariant; level: number };
+  UserSelectedAResultVariant: {
+    result: Result;
+    variant: ResultVariant;
+    level: number;
+    queryPreviewHash: ComputedRef<string> | null;
+  };
   /**
    * User selected any kind of suggestion (query-suggestion, popular-search...)
    * Payload: The {@link @empathyco/x-types#Suggestion | suggestion} that the user selected.

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

@@ -159,6 +159,8 @@
         return getHashFromQueryPreviewInfo(props.queryPreviewInfo);
       });
 
+      provide('queryPreviewHash', queryPreviewHash);
+
       /**
        * Gets from the state the results preview of the query preview.
        *

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

@@ -56,6 +56,14 @@ export const queriesPreviewXStoreModule: QueriesPreviewXStoreModule = {
           Vue.delete(state.queriesPreview, queryPreviewHash);
         }
       }
+    },
+    updateAQueryPreviewResult(state, { result, queryPreviewHash }) {
+      const queryPreviewResult = state.queriesPreview[queryPreviewHash.value]?.results.find(
+        resultPreview => resultPreview.id === result.id
+      );
+      if (queryPreviewResult) {
+        Object.assign(queryPreviewResult, result);
+      }
     }
   },
   actions: {

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

@@ -1,5 +1,6 @@
 import { Result, SearchRequest, SearchResponse, TaggingRequest } from '@empathyco/x-types';
 import { Dictionary } from '@empathyco/x-utils';
+import { ComputedRef } from 'vue';
 import { XActionContext } from '../../../store/actions.types';
 import { XStoreModule } from '../../../store/store.types';
 import { RequestStatus, StatusState } from '../../../store/utils/status-store.utils';
@@ -134,6 +135,20 @@ export interface QueriesPreviewMutations extends ConfigMutations<QueriesPreviewS
     queryPreviewHash: string;
     cache: boolean;
   }): void;
+  /**
+   * Updates a result with new fields.
+   *
+   * @param QueryPreviewResultPayload - Information needed to update a query preview result.
+   * result is an object that contains at least an id, and the properties to modify.
+   * queryPreviewHash is the query preview key to find the QueryPreview saved in the state.
+   */
+  updateAQueryPreviewResult({
+    result,
+    queryPreviewHash
+  }: {
+    result: Result;
+    queryPreviewHash: ComputedRef<string>;
+  }): void;
 }
 
 /**