feat: apply experience controls for the semantic queries (#326)

EMP-2375

package.json

@@ -29,13 +29,13 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@empathyco/x-adapter": "^8.0.0-alpha.33",
-    "@empathyco/x-adapter-platform": "^1.0.0-alpha.83",
-    "@empathyco/x-archetype-utils": "^1.0.0-alpha.3",
-    "@empathyco/x-components": "^3.0.0-alpha.414",
-    "@empathyco/x-deep-merge": "^1.3.0-alpha.29",
-    "@empathyco/x-types": "^10.0.0-alpha.72",
-    "@empathyco/x-utils": "^1.0.0-alpha.20",
+    "@empathyco/x-adapter": "^8.0.0-alpha.34",
+    "@empathyco/x-adapter-platform": "^1.0.0-alpha.88",
+    "@empathyco/x-archetype-utils": "^1.0.0-alpha.4",
+    "@empathyco/x-components": "^3.0.0-alpha.422",
+    "@empathyco/x-deep-merge": "^1.3.0-alpha.34",
+    "@empathyco/x-types": "^10.0.0-alpha.75",
+    "@empathyco/x-utils": "^1.0.0-alpha.23",
     "tslib": "~2.4.1",
     "vue": "~2.7.14",
     "vue-class-component": "~7.2.6",

src/App.vue

@@ -4,12 +4,14 @@
     <SnippetCallbacks />
     <Tagging />
     <UrlHandler />
+    <ExperienceControls />
     <MainModal v-if="isOpen" />
   </div>
 </template>
 
 <script lang="ts">
   import { SnippetCallbacks, SnippetConfig, XOn, XProvide } from '@empathyco/x-components';
+  import { ExperienceControls } from '@empathyco/x-components/experience-controls';
   import { Tagging } from '@empathyco/x-components/tagging';
   import { QueryPreviewInfo } from '@empathyco/x-components/queries-preview';
   import { UrlHandler } from '@empathyco/x-components/url';
@@ -25,6 +27,7 @@
       SnippetConfigExtraParams,
       Tagging,
       UrlHandler,
+      ExperienceControls,
       MainModal: () => import('./components/custom-main-modal.vue').then(m => m.default)
     }
   })
@@ -58,6 +61,11 @@
       return this.snippetConfig.queriesPreview;
     }
 
+    @XProvide('experienceControls')
+    public get experienceControls(): QueryPreviewInfo[] | undefined {
+      return this.$store.state.x.experienceControls.controls;
+    }
+
     @Watch('snippetConfig.uiLang')
     syncLang(uiLang: string): void {
       this.$setLocale(uiLang);

src/adapter/adapter.ts

@@ -5,9 +5,16 @@ import {
   PlatformResult,
   recommendationsRequestSchema,
   resultSchema,
-  semanticQueriesRequestSchema
+  semanticQueriesRequestSchema,
+  experienceControlsResponseSchema,
+  PlatformExperienceControlsResponse
 } from '@empathyco/x-adapter-platform';
-import { RecommendationsRequest, Result, SemanticQueriesRequest } from '@empathyco/x-types';
+import {
+  ExperienceControlsResponse,
+  RecommendationsRequest,
+  Result,
+  SemanticQueriesRequest
+} from '@empathyco/x-types';
 
 export const adapter = platformAdapter;
 
@@ -53,3 +60,23 @@ semanticQueriesRequestSchema.$override<
     };
   }
 });
+
+// TODO: Remove when the endpoint is propery created in the platform adapter
+// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+const experienceControlsAdapter = adapter.experienceControls.extends({
+  endpoint: 'https://config-service.internal.test.empathy.co/public/configs'
+});
+platformAdapter.experienceControls = experienceControlsAdapter;
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+experienceControlsResponseSchema.$override<
+  PlatformExperienceControlsResponse,
+  Partial<ExperienceControlsResponse>
+>({
+  events: {
+    SemanticQueriesConfigProvided: {
+      maxItemsToRequest: 'controls.semanticQueries.numberOfCarousels',
+      resultsPerCarousel: 'controls.semanticQueries.resultsPerCarousels'
+    }
+  }
+});

src/components/search/custom-semantic-queries.vue

@@ -26,7 +26,7 @@
           <DisplayClickProvider resultFeature="semantics">
             <div class="x-flex x-gap-16 x-pt-16 max-desktop:x-px-16">
               <Result
-                v-for="result in results"
+                v-for="result in results.slice(0, resultsPerCarousel)"
                 :key="result.id"
                 :result="result"
                 class="x-w-[calc(38vw-16px)] desktop:x-w-[216px]"
@@ -41,9 +41,10 @@
 
 <script lang="ts">
   import { ArrowRightIcon } from '@empathyco/x-components';
-  import { defineComponent } from 'vue';
+  import { computed, defineComponent, inject } from 'vue';
   import { SemanticQueries, SemanticQuery } from '@empathyco/x-components/semantic-queries';
   import { QueryPreviewList, useQueriesPreview } from '@empathyco/x-components/queries-preview';
+  import { Dictionary } from '@empathyco/x-utils';
   import CustomSlidingPanel from '../custom-sliding-panel.vue';
   import Result from '../results/result.vue';
   import DisplayClickProvider from './display-click-provider.vue';
@@ -61,8 +62,18 @@
     setup() {
       const { isAnyQueryLoadedInPreview } = useQueriesPreview();
 
+      const experienceControls = inject<Dictionary>('experienceControls', {});
+
+      const resultsPerCarousel = computed(() => {
+        const resultsPerCarousel: number =
+          experienceControls.value?.controls?.semanticQueries?.resultsPerCarousels;
+
+        return resultsPerCarousel ?? undefined;
+      });
+
       return {
-        isAnyQueryLoadedInPreview
+        isAnyQueryLoadedInPreview,
+        resultsPerCarousel
       };
     }
   });

src/shims-x-components.d.ts

@@ -0,0 +1,7 @@
+import { SemanticQueriesConfig } from '@empathyco/x-components/semantic-queries';
+
+declare module '@empathyco/x-components' {
+  interface XEventsTypes {
+    SemanticQueriesConfigProvided: SemanticQueriesConfig;
+  }
+}

src/x-components/plugin.options.ts

@@ -5,8 +5,10 @@ import * as messages from '../i18n/messages';
 import store from '../store';
 import { adapter } from '../adapter/adapter';
 import { useDevice } from '../composables/use-device.composable';
+import { mergeSemanticQueriesConfigWire } from './wiring/semantic-queries.wiring';
 
 const device = useDevice();
+
 export const installXOptions: InstallXOptions = {
   adapter,
   store,
@@ -22,6 +24,11 @@ export const installXOptions: InstallXOptions = {
       config: {
         threshold: 50,
         maxItemsToRequest: 10
+      },
+      wiring: {
+        SemanticQueriesConfigProvided: {
+          mergeSemanticQueriesConfigWire
+        }
       }
     }
   },

src/x-components/wiring/semantic-queries.wiring.ts

@@ -0,0 +1,7 @@
+import { namespacedWireCommit } from '@empathyco/x-components';
+
+const moduleName = 'semanticQueries';
+
+const wireCommit = namespacedWireCommit(moduleName);
+
+export const mergeSemanticQueriesConfigWire = wireCommit('mergeConfig');