feat(experience-controls): experience controls module and adapter

packages/x-adapter-platform/src/__tests__/platform.adapter.spec.ts

@@ -8,6 +8,7 @@ import { PlatformPopularSearchesResponse } from '../types/responses/popular-sear
 import { PlatformRelatedTagsResponse } from '../types/responses/related-tags-response.model';
 import { PlatformNextQueriesResponse } from '../types/responses/next-queries-response.model';
 import { PlatformSemanticQueriesResponse } from '../types/responses/semantic-queries-response.model';
+import { PlatformExperienceControlsResponse } from '../types';
 import { getFetchMock } from './__mocks__/fetch.mock';
 import { platformIdentifierResultsResponse } from './__fixtures__/identifier-results.response';
 import { platformRecommendationsResponse } from './__fixtures__/recommendations.response';
@@ -636,4 +637,37 @@ describe('platformAdapter tests', () => {
       ]
     });
   });
+
+  it('should call the experiences control adapter', async () => {
+    const platformResponse: PlatformExperienceControlsResponse = {
+      grid: {
+        columns: 2
+      }
+    };
+
+    const fetchMock = jest.fn(getFetchMock(platformResponse));
+    window.fetch = fetchMock as any;
+
+    const response = await platformAdapter.experienceControls({
+      extraParams: {
+        instance: 'empathy',
+        env: 'staging'
+      }
+    });
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(fetchMock).toHaveBeenCalledWith(
+      // eslint-disable-next-line max-len
+      'https://api.staging.empathy.co/config/v1/public/configs?service=xcontrols&instance=empathy&env=staging',
+      { signal: expect.anything() }
+    );
+    expect(response).toStrictEqual({
+      controls: {
+        grid: {
+          columns: 2
+        }
+      },
+      events: {}
+    });
+  });
 });

packages/x-adapter-platform/src/endpoint-adapters/experience-controls.endpoint-adapter.ts

@@ -0,0 +1,26 @@
+/* eslint-disable max-len */
+import { endpointAdapterFactory } from '@empathyco/x-adapter';
+import { ExperienceControlsRequest, ExperienceControlsResponse } from '@empathyco/x-types';
+import { experienceControlsRequestMapper } from '../mappers/requests/experience-controls-request.mapper';
+import { experienceControlsResponseMapper } from '../mappers/responses/experience-controls-response.mapper';
+/* eslint-enable max-len */
+
+/**.
+ * Default adapter for the experience controls endpoint.
+ *
+ * @public
+ */
+export const experienceControlsEndpointAdapter = endpointAdapterFactory<
+  ExperienceControlsRequest,
+  ExperienceControlsResponse
+>({
+  endpoint: 'https://api.{extraParams.env(.)}empathy.co/config/v1/public/configs',
+  requestMapper: experienceControlsRequestMapper,
+  responseMapper: experienceControlsResponseMapper,
+  defaultRequestOptions: {
+    id: 'experience-controls',
+    parameters: {
+      service: 'xcontrols'
+    }
+  }
+});

packages/x-adapter-platform/src/endpoint-adapters/index.ts

@@ -7,3 +7,4 @@ export * from './related-tags.endpoint-adapter';
 export * from './search.endpoint-adapter';
 export * from './semantic-queries.endpoint-adapter';
 export * from './tagging.endpoint-adapter';
+export * from './experience-controls.endpoint-adapter';

packages/x-adapter-platform/src/mappers/requests/experience-controls-request.mapper.ts

@@ -0,0 +1,16 @@
+/* eslint-disable max-len */
+import { schemaMapperFactory } from '@empathyco/x-adapter';
+import { ExperienceControlsRequest } from '@empathyco/x-types';
+import { PlatformExperienceControlsRequest } from '../../types/requests/experience-controls-request.model';
+import { experienceControlsRequestSchema } from '../../schemas/requests/experience-controls-request.schema';
+/* eslint-enable max-len */
+
+/**
+ * Default implementation for the ExperienceControlsRequestMapper.
+ *
+ * @public
+ */
+export const experienceControlsRequestMapper = schemaMapperFactory<
+  ExperienceControlsRequest,
+  PlatformExperienceControlsRequest
+>(experienceControlsRequestSchema);

packages/x-adapter-platform/src/mappers/requests/index.ts

@@ -7,3 +7,4 @@ export * from './related-tags-request.mapper';
 export * from './search-request.mapper';
 export * from './semantic-queries-request.mapper';
 export * from './tagging-request.mapper';
+export * from './experience-controls-request.mapper';

packages/x-adapter-platform/src/mappers/responses/experience-controls-response.mapper.ts

@@ -0,0 +1,15 @@
+import { schemaMapperFactory } from '@empathyco/x-adapter';
+import { ExperienceControlsResponse } from '@empathyco/x-types';
+import { PlatformExperienceControlsResponse } from '../../types';
+// eslint-disable-next-line max-len
+import { experienceControlsResponseSchema } from '../../schemas/responses/experience-controls-response.schema';
+
+/**
+ * Default implementation for the ExperienceControlsResponseMapper.
+ *
+ * @public
+ */
+export const experienceControlsResponseMapper = schemaMapperFactory<
+  PlatformExperienceControlsResponse,
+  ExperienceControlsResponse
+>(experienceControlsResponseSchema);

packages/x-adapter-platform/src/mappers/responses/index.ts

@@ -6,3 +6,4 @@ export * from './recommendations-response.mapper';
 export * from './related-tags-response.mapper';
 export * from './search-response.mapper';
 export * from './semantic-queries-response.mapper';
+export * from './experience-controls-response.mapper';

packages/x-adapter-platform/src/platform.adapter.ts

@@ -9,6 +9,7 @@ import { identifierResultsEndpointAdapter } from './endpoint-adapters/identifier
 import { taggingEndpointAdapter } from './endpoint-adapters/tagging.endpoint-adapter';
 import { querySuggestionsEndpointAdapter } from './endpoint-adapters/query-suggestions.endpoint-adapter';
 import { semanticQueriesEndpointAdapter } from './endpoint-adapters/semantic-queries.endpoint-adapter';
+import { experienceControlsEndpointAdapter } from './endpoint-adapters/experience-controls.endpoint-adapter';
 /* eslint-enable max-len */
 
 /**
@@ -25,5 +26,6 @@ export const platformAdapter: PlatformAdapter = {
   relatedTags: relatedTagsEndpointAdapter,
   identifierResults: identifierResultsEndpointAdapter,
   tagging: taggingEndpointAdapter,
-  semanticQueries: semanticQueriesEndpointAdapter
+  semanticQueries: semanticQueriesEndpointAdapter,
+  experienceControls: experienceControlsEndpointAdapter
 };

packages/x-adapter-platform/src/schemas/requests/experience-controls-request.schema.ts

@@ -0,0 +1,16 @@
+import { createMutableSchema } from '@empathyco/x-adapter';
+import { ExperienceControlsRequest } from '@empathyco/x-types';
+// eslint-disable-next-line max-len
+import { PlatformExperienceControlsRequest } from '../../types/requests/experience-controls-request.model';
+
+/**
+ * Default implementation for the ExperienceControlsRequestSchema.
+ *
+ * @public
+ */
+export const experienceControlsRequestSchema = createMutableSchema<
+  ExperienceControlsRequest,
+  PlatformExperienceControlsRequest
+>({
+  extraParams: 'extraParams'
+});

packages/x-adapter-platform/src/schemas/requests/index.ts

@@ -6,3 +6,4 @@ export * from './related-tags-request.schema';
 export * from './recommendations-request.schema';
 export * from './search-request.schema';
 export * from './semantic-queries-request.schema';
+export * from './experience-controls-request.schema';

packages/x-adapter-platform/src/schemas/responses/experience-controls-response.schema.ts

@@ -0,0 +1,16 @@
+import { createMutableSchema } from '@empathyco/x-adapter';
+import { ExperienceControlsResponse } from '@empathyco/x-types';
+import { PlatformExperienceControlsResponse } from '../../types';
+
+/**
+ * Default implementation for the ExperienceControlsResponseSchema.
+ *
+ * @public
+ */
+export const experienceControlsResponseSchema = createMutableSchema<
+  PlatformExperienceControlsResponse,
+  ExperienceControlsResponse
+>({
+  controls: response => response,
+  events: {}
+});

packages/x-adapter-platform/src/schemas/responses/index.ts

@@ -6,3 +6,4 @@ export * from './related-tags-response.schema';
 export * from './recommendations-response.schema';
 export * from './semantic-queries-response.schema';
 export * from './search-response.schema';
+export * from './experience-controls-response.schema';

packages/x-adapter-platform/src/types/platform-adapter.types.ts

@@ -16,6 +16,8 @@ import {
   SemanticQueriesRequest,
   SemanticQueriesResponse,
   TaggingRequest,
+  ExperienceControlsRequest,
+  ExperienceControlsResponse,
   XComponentsAdapter
 } from '@empathyco/x-types';
 import { ExtendableEndpointAdapter } from '@empathyco/x-adapter';
@@ -35,4 +37,8 @@ export interface PlatformAdapter extends XComponentsAdapter {
   identifierResults: ExtendableEndpointAdapter<IdentifierResultsRequest, IdentifierResultsResponse>;
   semanticQueries: ExtendableEndpointAdapter<SemanticQueriesRequest, SemanticQueriesResponse>;
   tagging: ExtendableEndpointAdapter<TaggingRequest, void>;
+  experienceControls: ExtendableEndpointAdapter<
+    ExperienceControlsRequest,
+    ExperienceControlsResponse
+  >;
 }

packages/x-adapter-platform/src/types/requests/experience-controls-request.model.ts

@@ -0,0 +1,8 @@
+import { PlatformExtraParamsRequest } from './request.types';
+
+/**
+ * Request for the `experience controls` endpoint.
+ *
+ * @public
+ */
+export interface PlatformExperienceControlsRequest extends PlatformExtraParamsRequest {}

packages/x-adapter-platform/src/types/requests/index.ts

@@ -6,3 +6,4 @@ export * from './recommendations-request.model';
 export * from './related-tags-request.model';
 export * from './search-request.model';
 export * from './semantic-queries-request.model';
+export * from './experience-controls-request.model';

packages/x-adapter-platform/src/types/responses/experience-controls-response.model.ts

@@ -0,0 +1,8 @@
+import { Dictionary } from '@empathyco/x-utils';
+
+/**
+ * Response for the `experience controls` endpoint.
+ *
+ * @public
+ */
+export interface PlatformExperienceControlsResponse extends Dictionary<unknown> {}

packages/x-adapter-platform/src/types/responses/index.ts

@@ -6,3 +6,4 @@ export * from './related-tags-response.model';
 export * from './recommendations-response.model';
 export * from './search-response.model';
 export * from './semantic-queries-response.model';
+export * from './experience-controls-response.model';

packages/x-components/src/__tests__/adapter.dummy.ts

@@ -9,5 +9,6 @@ export const XComponentsAdapterDummy: XComponentsAdapter = {
   relatedTags: jest.fn(),
   search: jest.fn(),
   semanticQueries: jest.fn(),
-  tagging: jest.fn()
+  tagging: jest.fn(),
+  experienceControls: jest.fn()
 };

packages/x-components/src/__tests__/utils.ts

@@ -12,7 +12,8 @@ import {
   QuerySuggestionsResponse,
   RelatedTagsResponse,
   SearchResponse,
-  SemanticQueriesResponse
+  SemanticQueriesResponse,
+  ExperienceControlsResponse
 } from '@empathyco/x-types';
 import { XPluginOptions } from '../plugins';
 import { XPlugin } from '../plugins/x-plugin';
@@ -45,6 +46,7 @@ interface MockedAdapterFeatures {
   search: SearchResponse;
   semanticQueries: SemanticQueriesResponse;
   tagging: void;
+  experienceControls: ExperienceControlsResponse;
 }
 
 /**
@@ -158,7 +160,8 @@ export function getMockedAdapter(
     relatedTags: getMockedAdapterFunction(responseFeatures?.relatedTags!),
     search: getMockedAdapterFunction(responseFeatures?.search!),
     semanticQueries: getMockedAdapterFunction(responseFeatures?.semanticQueries!),
-    tagging: getMockedAdapterFunction(undefined)
+    tagging: getMockedAdapterFunction(undefined),
+    experienceControls: getMockedAdapterFunction(responseFeatures?.experienceControls!)
     /* eslint-enable @typescript-eslint/no-non-null-asserted-optional-chain */
   };
 }

packages/x-components/src/adapter/e2e-adapter.ts

@@ -53,5 +53,6 @@ export const e2eAdapter: XComponentsAdapter = {
     defaultRequestOptions: {
       properties: { keepalive: true }
     }
-  })
+  }),
+  experienceControls: mockEndpointAdapter('experience-controls')
 };

packages/x-components/src/store/x.module.ts

@@ -35,7 +35,8 @@ export const RootXStoreModule: Module<XModuleState, any> = {
     searchBox: null,
     semanticQueries: null,
     tagging: null,
-    url: null
+    url: null,
+    experienceControls: null
   }),
   namespaced: true
 };

packages/x-components/src/views/adapter.ts

@@ -5,6 +5,12 @@ export const adapterConfig = {
   e2e: 'Cypress' in window ? true : false
 };
 
+const experienceControlsAdapter = platformAdapter.experienceControls.extends({
+  endpoint: 'https://config-service.internal.test.empathy.co/public/configs'
+});
+
+platformAdapter.experienceControls = experienceControlsAdapter;
+
 export const adapter = new Proxy(platformAdapter, {
   get: (obj: PlatformAdapter, prop: keyof PlatformAdapter) =>
     adapterConfig.e2e ? e2eAdapter[prop] : obj[prop]

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

@@ -5,6 +5,7 @@
     <PreselectedFilters />
     <UrlHandler query="q" store="store" />
     <SnippetCallbacks />
+    <ExperienceControls />
     <OpenMainModal>Start</OpenMainModal>
     <h1 class="x-text-primary-50 x-text-4xl x-font-bold x-leading-[1.5]">Test controls</h1>
     <ul class="x-test-controls x-flex x-flex-col x-gap-16">
@@ -452,6 +453,7 @@
   import ChevronTinyRight from '../../components/icons/chevron-tiny-right.vue';
   import ChevronUp from '../../components/icons/chevron-up.vue';
   import CrossIcon from '../../components/icons/cross.vue';
+  import ExperienceControls from '../../x-modules/experience-controls/components/experience-controls.vue';
   import Grid2Col from '../../components/icons/grid-2-col.vue';
   import Grid4Col from '../../components/icons/grid-4-col.vue';
   import LightBulbOn from '../../components/icons/light-bulb-on.vue';
@@ -539,6 +541,7 @@
       ClearSearchInput,
       CloseMainModal,
       CrossIcon,
+      ExperienceControls,
       Grid2Col,
       Grid4Col,
       LightBulbOn,

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

@@ -20,6 +20,7 @@ import { TaggingXEvents } from '../x-modules/tagging/events.types';
 import { UrlXEvents } from '../x-modules/url/events.types';
 import { XModuleName } from '../x-modules/x-modules.types';
 import { SemanticQueriesXEvents } from '../x-modules/semantic-queries/events.types';
+import { ExperienceControlsXEvents } from '../x-modules/experience-controls/events.types';
 import { WireMetadata } from './wiring.types';
 /* eslint-disable max-len */
 /**.
@@ -70,6 +71,7 @@ export interface XEventsTypes
     SearchXEvents,
     SemanticQueriesXEvents,
     TaggingXEvents,
+    ExperienceControlsXEvents,
     UrlXEvents {
   /**
    * The provided number of columns of a grid has changed.

packages/x-components/src/x-modules/experience-controls/components/experience-controls.vue

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import Vue from 'vue';
+  import { Component } from 'vue-property-decorator';
+  import { XOn } from '../../../components/decorators/bus.decorators';
+  import { XEvent, XEventsTypes } from '../../../wiring/events.types';
+  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { experienceControlsXModule } from '../x-module';
+
+  /**
+   * This component subscribes to changes in the ExperienceControls module to fire the events that
+   * propagate the configuration.
+   *
+   * @public
+   */
+  @Component({
+    mixins: [xComponentMixin(experienceControlsXModule)]
+  })
+  export default class ExperienceControls extends Vue {
+    /**.
+     * Iterates the list of XEvents received and emits them
+     *
+     * @param {Partial<XEventsTypes>} events events to be emitted
+     */
+    @XOn('ExperienceControlsEventsChanged')
+    onEventsChanged(events: Partial<XEventsTypes>): void {
+      Object.entries(events).forEach(([eventName, eventPayload]) => {
+        this.$x.emit(eventName as XEvent, eventPayload);
+      });
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    render(): void {}
+  }
+</script>
+
+<docs lang="mdx">
+## Examples
+
+This component will fire the events received in the `ExperienceControlsEventsChanged` event.
+
+```vue
+<template>
+  <ExperienceControls />
+</template>
+<script>
+  import { ExperienceControls } from '@empathyco/x-components/experience-controls';
+
+  export default {
+    name: 'ExperienceControlsDemo',
+    components: {
+      ExperienceControls
+    }
+  };
+</script>
+```
+</docs>