@coveo/quantic 3.10.0-pre.faaf12d7a7 → 3.11.0

package/force-app/main/default/lwc/quanticFacet/quanticFacet.js

@@ -15,6 +15,7 @@ import {
   initializeWithHeadless,
   registerToStore,
   getHeadlessBundle,
+  getBueno,
 } from 'c/quanticHeadlessLoader';
 import {
   I18nUtils,
@@ -177,7 +178,6 @@ export default class QuanticFacet extends LightningElement {
    * @type {DependsOn}
    */
   @api dependsOn;
-
   /**
    * Whether the facet is collapsed.
    * @api
@@ -315,6 +315,7 @@ export default class QuanticFacet extends LightningElement {
       element: this.template.host,
     });
     if (this.dependsOn) {
+      this.validateDependsOnProperty();
       this.initFacetConditionManager(engine);
     }
   };
@@ -342,6 +343,25 @@ export default class QuanticFacet extends LightningElement {
     });
     this.dispatchEvent(renderFacetEvent);
   }
+  validateDependsOnProperty() {
+    if (this.dependsOn) {
+      getBueno(this).then(() => {
+        const {parentFacetId, expectedValue} = this.dependsOn;
+        if (!Bueno.isString(parentFacetId)) {
+          console.error(
+            `The ${this.field} ${this.template.host.localName} requires dependsOn.parentFacetId to be a valid string.`
+          );
+          this.setInitializationError();
+        }
+        if (expectedValue && !Bueno.isString(expectedValue)) {
+          console.error(
+            `The ${this.field} ${this.template.host.localName} requires dependsOn.expectedValue to be a valid string.`
+          );
+          this.setInitializationError();
+        }
+      });
+    }
+  }
 
   initFacetConditionManager(engine) {
     this.facetConditionsManager = this.headless.buildFacetConditionsManager(

package/force-app/main/default/lwc/quanticFeedbackModalQna/__tests__/quanticFeedbackModalQna.test.js

@@ -193,7 +193,7 @@ describe('c-quantic-feedback-modal-qna', () => {
 
         expect(functionsMocks.handleSubmit).toHaveBeenCalledWith(
           expect.objectContaining({
-            correctTopicValue: 'yes',
+            correctTopic: 'yes',
             hallucinationFree: 'yes',
             documented: 'yes',
             readable: 'yes',

package/force-app/main/default/lwc/quanticFeedbackModalQna/quanticFeedbackModalQna.js

@@ -168,7 +168,7 @@ export default class QuanticFeedbackModalQna extends LightningModal {
       return;
     }
     this.handleSubmit({
-      correctTopicValue: this.correctTopicValue,
+      correctTopic: this.correctTopicValue,
       hallucinationFree: this.hallucinationFreeValue,
       documented: this.documentedValue,
       readable: this.readableValue,

package/force-app/main/default/lwc/quanticGeneratedAnswer/templates/generatedAnswer.css

@@ -6,7 +6,6 @@
 }
 
 .generated-answer__answer {
-  white-space: pre-wrap;
   overflow: hidden;
   position: relative;
 }

package/force-app/main/default/lwc/quanticGeneratedAnswerContent/templates/generatedMarkdownContent.css

@@ -100,6 +100,7 @@ blockquote {
 }
 
 .scrollable-table {
+  margin-top: var(--lwc-spacingLarge, 1.5rem);
   margin-bottom: var(--lwc-spacingLarge, 1.5rem);
   display: inline-block;
   border: 1px solid;

package/force-app/main/default/lwc/quanticInsightInterface/quanticInsightInterface.js

@@ -80,6 +80,14 @@ export default class QuanticInsightInterface extends LightningElement {
                       ...(document.referrer && {
                         originLevel3: document.referrer.substring(0, 256),
                       }),
+                      analyticsClientMiddleware: (_event, payload) => {
+                        if (!payload.customData) {
+                          payload.customData = {};
+                        }
+                        payload.customData.coveoQuanticVersion =
+                          window.coveoQuanticVersion;
+                        return payload;
+                      },
                     },
                     ...rest,
                   },

package/force-app/main/default/lwc/quanticNotifications/__tests__/quanticNotifications.test.js

@@ -20,17 +20,30 @@ const exampleEngine = {
   id: 'mock engine',
 };
 
+const mockSearchStatusState = {
+  hasResults: true,
+  hasError: false,
+};
+
 const functionsMocks = {
   buildNotifyTrigger: jest.fn(() => ({
     state: notificationsState,
     subscribe: functionsMocks.subscribe,
   })),
   dispatchMessage: jest.fn(() => {}),
-  subscribe: jest.fn((cb) => {
-    cb();
+  buildSearchStatus: jest.fn(() => ({
+    state: mockSearchStatusState,
+    subscribe: jest.fn((callback) => {
+      functionsMocks.subscribe.callback = callback;
+      return functionsMocks.unsubscribeSearchStatus;
+    }),
+  })),
+  subscribe: jest.fn((callback) => {
+    callback();
     return functionsMocks.unsubscribe;
   }),
   unsubscribe: jest.fn(() => {}),
+  unsubscribeSearchStatus: jest.fn(() => {}),
 };
 
 // @ts-ignore
@@ -43,6 +56,7 @@ AriaLiveRegion.mockImplementation(() => {
 const selectors = {
   notifications: '[data-test="notification"]',
   initializationError: 'c-quantic-component-error',
+  notificationCloseButton: 'lightning-button-icon',
 };
 
 const defaultOptions = {
@@ -68,6 +82,7 @@ function prepareHeadlessState() {
   mockHeadlessLoader.getHeadlessBundle = () => {
     return {
       buildNotifyTrigger: functionsMocks.buildNotifyTrigger,
+      buildSearchStatus: functionsMocks.buildSearchStatus,
     };
   };
 }
@@ -145,7 +160,7 @@ describe('c-quantic-notifications', () => {
   });
 
   describe('component initialization', () => {
-    it('should build the controller with the proper paramters', async () => {
+    it('should build the notifyTrigger and searchStatus controllers with the proper parameters', async () => {
       createTestComponent();
       await flushPromises();
 
@@ -153,9 +168,13 @@ describe('c-quantic-notifications', () => {
       expect(functionsMocks.buildNotifyTrigger).toHaveBeenCalledWith(
         exampleEngine
       );
+      expect(functionsMocks.buildSearchStatus).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildSearchStatus).toHaveBeenCalledWith(
+        exampleEngine
+      );
     });
 
-    it('should subscribe to the headless state changes', async () => {
+    it('should subscribe to the headless notify trigger state changes', async () => {
       createTestComponent();
       await flushPromises();
 
@@ -223,5 +242,94 @@ describe('c-quantic-notifications', () => {
         expect(notifications.length).toEqual(0);
       });
     });
+
+    describe('when there is an error following a search', () => {
+      it('should not render the notifications component', async () => {
+        const element = createTestComponent();
+        mockSearchStatusState.hasError = true;
+        functionsMocks.subscribe.callback();
+        await flushPromises();
+
+        const notifications = element.shadowRoot.querySelectorAll(
+          selectors.notifications
+        );
+
+        expect(notifications.length).toEqual(0);
+      });
+    });
+  });
+
+  describe('when clicking on a notification close button', () => {
+    it('should properly dismiss that notification', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const notificationsBeforeClose = element.shadowRoot.querySelectorAll(
+        selectors.notifications
+      );
+
+      const firstNotificationCloseButton =
+        notificationsBeforeClose[0].querySelector(
+          selectors.notificationCloseButton
+        );
+      firstNotificationCloseButton.click();
+      await flushPromises();
+
+      const notificationsAfterClose = element.shadowRoot.querySelectorAll(
+        selectors.notifications
+      );
+
+      expect(notificationsAfterClose.length).toEqual(
+        exampleNotifications.length - 1
+      );
+      expect(notificationsAfterClose[0].textContent).toEqual(
+        exampleNotifications[1]
+      );
+    });
+
+    describe('when triggering another search with the same query', () => {
+      it('should reset the visibility of the notifications', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const notificationsBeforeClose = element.shadowRoot.querySelectorAll(
+          selectors.notifications
+        );
+
+        expect(notificationsBeforeClose.length).toEqual(
+          exampleNotifications.length
+        );
+
+        const firstNotificationCloseButton =
+          notificationsBeforeClose[0].querySelector(
+            selectors.notificationCloseButton
+          );
+        firstNotificationCloseButton.click();
+        await flushPromises();
+
+        const notificationsAfterClose = element.shadowRoot.querySelectorAll(
+          selectors.notifications
+        );
+
+        expect(notificationsAfterClose.length).toEqual(
+          exampleNotifications.length - 1
+        );
+
+        mockSearchStatusState.hasError = false;
+        functionsMocks.subscribe.callback();
+        await flushPromises();
+
+        const notificationsAfterSearch = element.shadowRoot.querySelectorAll(
+          selectors.notifications
+        );
+
+        expect(notificationsAfterSearch.length).toEqual(
+          exampleNotifications.length
+        );
+        notificationsAfterSearch.forEach((notification, index) => {
+          expect(notification.textContent).toEqual(exampleNotifications[index]);
+        });
+      });
+    });
   });
 });

package/force-app/main/default/lwc/quanticNotifications/quanticNotifications.css

@@ -1,7 +1,15 @@
+:host {
+  --slds-c-toast-sizing-min-width: 100%;
+}
+
 .notification {
   background-color: var(---lwc-colorBackgroundAlt, white);
   border: 1px solid var(--lwc-colorBackgroundToast, rgb(116, 116, 116));
   margin-right: 0;
   margin-left: 0;
   width: 100%;
+}
+
+.notification-container {
+  z-index: 2;
 }

package/force-app/main/default/lwc/quanticNotifications/quanticNotifications.html

@@ -5,15 +5,28 @@
   </template>
   <template lwc:else>
     <template for:each={notifications} for:item="notification">
-      <div key={notification.id} data-test="notification" class="slds-notify_container slds-is-relative">
-        <div data-cy="notification" class="slds-notify slds-notify_toast notification" role="status">
-          <lightning-icon icon-name="utility:info_alt" alternative-text="info" title="info"
-            size="small"></lightning-icon>
-          <div class="slds-notify__content slds-var-m-left_small">
-            {notification.value}
+      <template lwc:if={notification.visible}>
+        <div key={notification.id} data-test="notification" class="slds-notify_container slds-is-relative notification-container">
+          <div data-cy="notification" class="slds-notify slds-notify_toast notification" role="status">
+            <lightning-icon icon-name="utility:info_alt" alternative-text="info" title="info"
+              size="small"></lightning-icon>
+            <div class="slds-notify__content slds-var-m-left_small">
+              {notification.value}
+            </div>
+            <div class="slds-notify__close">
+              <lightning-button-icon
+                icon-name="utility:close"
+                alternative-text={labels.closeNotification}
+                size="small"
+                variant="bare"
+                title={labels.closeNotification}
+                onclick={handleNotificationClose}
+                data-id={notification.id}
+              ></lightning-button-icon>
+            </div>
           </div>
         </div>
-      </div>
+      </template>
     </template>
   </template>
 </template>

package/force-app/main/default/lwc/quanticNotifications/quanticNotifications.js

@@ -3,12 +3,13 @@ import {
   initializeWithHeadless,
   getHeadlessBundle,
 } from 'c/quanticHeadlessLoader';
+import closeNotification from '@salesforce/label/c.quantic_CloseNotification';
 import {AriaLiveRegion} from 'c/quanticUtils';
 import {LightningElement, api} from 'lwc';
 
 /** @typedef {import("coveo").SearchEngine} SearchEngine */
+/** @typedef {import("coveo").SearchStatus} SearchStatus */
 /** @typedef {import("coveo").NotifyTrigger} NotifyTrigger */
-/** @typedef {import("coveo").NotifyTriggerState} NotifyTriggerState */
 
 /**
  * The `QuanticNotifications` component is responsible for displaying notifications generated by the Coveo Search API (see [Trigger](https://docs.coveo.com/en/1458)).
@@ -27,12 +28,22 @@ export default class QuanticNotifications extends LightningElement {
 
   /** @type {NotifyTrigger} */
   notifyTrigger;
-  /** @type {NotifyTriggerState} */
-  notifyTriggerState;
   /** @type {boolean} */
   hasInitializationError = false;
   /** @type {import('c/quanticUtils').AriaLiveUtils} */
   ariaLiveNotificationsRegion;
+  /** @type {Array} */
+  notifications = [];
+  /** @type {Function} */
+  unsubscribe;
+  /** @type {Function} */
+  unsubscribeSearchStatus;
+  /** @type {SearchStatus} */
+  searchStatus;
+
+  labels = {
+    closeNotification,
+  };
 
   connectedCallback() {
     registerComponentForInit(this, this.engineId);
@@ -48,32 +59,60 @@ export default class QuanticNotifications extends LightningElement {
   initialize = (engine) => {
     this.headless = getHeadlessBundle(this.engineId);
     this.notifyTrigger = this.headless.buildNotifyTrigger(engine);
+    this.searchStatus = this.headless.buildSearchStatus(engine);
     this.ariaLiveNotificationsRegion = AriaLiveRegion('notifications', this);
     this.unsubscribe = this.notifyTrigger.subscribe(() => this.updateState());
+    this.unsubscribeSearchStatus = this.searchStatus.subscribe(() =>
+      this.handleSearchStatusChange()
+    );
   };
 
   disconnectedCallback() {
     this.unsubscribe?.();
+    this.unsubscribeSearchStatus?.();
   }
 
   updateState() {
-    this.notifyTriggerState = this.notifyTrigger.state;
-    this.ariaLiveNotificationsRegion.dispatchMessage(
-      this.notifyTriggerState?.notifications.reduce(
-        (value, notification, index) => {
-          return `${value} Notification ${index + 1}: ${notification}`;
-        },
-        ''
-      )
-    );
-  }
-
-  get notifications() {
-    return (
-      this.notifyTriggerState?.notifications.map((notification, index) => ({
+    this.notifications =
+      this.notifyTrigger?.state?.notifications.map((notification, index) => ({
         value: notification,
         id: index,
-      })) ?? []
+        visible: true,
+      })) ?? [];
+
+    this.dispatchAriaLiveNotificationsRegionMessage();
+  }
+
+  handleSearchStatusChange() {
+    if (!this.searchStatus?.state.isLoading) {
+      if (this.searchStatus?.state?.hasError) {
+        this.notifications = [];
+      } else {
+        this.notifications =
+          this.notifications?.map((notification) => ({
+            ...notification,
+            visible: true,
+          })) ?? [];
+        this.dispatchAriaLiveNotificationsRegionMessage();
+      }
+    }
+  }
+
+  handleNotificationClose(event) {
+    const currentNotificationId = event.currentTarget.dataset.id;
+    this.notifications = this.notifications.map((notification) => {
+      if (notification.id.toString() === currentNotificationId) {
+        return {...notification, visible: false};
+      }
+      return notification;
+    });
+  }
+
+  dispatchAriaLiveNotificationsRegionMessage() {
+    this.ariaLiveNotificationsRegion.dispatchMessage(
+      this.notifications.reduce((value, notification) => {
+        return `${value} Notification ${notification.id + 1}: ${notification.value}`;
+      }, '')
     );
   }
 

package/force-app/main/default/lwc/quanticNumericFacet/__tests__/quanticNumericFacet.test.js

@@ -12,17 +12,22 @@ jest.mock('c/quanticUtils', () => ({
       NUMERICFACETS: 'numericFacets',
     },
   },
+  I18nUtils: {
+    format: jest.fn(),
+  },
 }));
 jest.mock('c/quanticHeadlessLoader');
 
 const selectors = {
   facetContent: '[data-test="facet-content"]',
+  componentError: 'c-quantic-component-error',
 };
 
 const exampleFacetId = 'example facet id';
+const exampleField = 'exampleField';
 const exampleFilterId = `${exampleFacetId}_input`;
 const defaultOptions = {
-  field: 'example field',
+  field: exampleField,
 };
 const numericFacetControllerMock = {
   subscribe: jest.fn((callback) => callback()),
@@ -31,6 +36,8 @@ const numericFacetControllerMock = {
     values: [],
   },
 };
+const parentFacetIdError = `The ${exampleField} c-quantic-numeric-facet requires dependsOn.parentFacetId to be a valid string.`;
+const expectedValueError = `The ${exampleField} c-quantic-numeric-facet requires dependsOn.expectedValue to be a valid string.`;
 
 function createTestComponent(options = defaultOptions) {
   prepareHeadlessState();
@@ -87,6 +94,21 @@ const exampleEngine = {
 };
 let isInitialized = false;
 
+function mockBueno() {
+  // @ts-ignore
+  mockHeadlessLoader.getBueno = () => {
+    // @ts-ignore
+    global.Bueno = {
+      isString: jest
+        .fn()
+        .mockImplementation(
+          (value) => Object.prototype.toString.call(value) === '[object String]'
+        ),
+    };
+    return new Promise((resolve) => resolve());
+  };
+}
+
 function mockSuccessfulHeadlessInitialization() {
   // @ts-ignore
   mockHeadlessLoader.initializeWithHeadless = (element, _, initialize) => {
@@ -109,6 +131,7 @@ function cleanup() {
 describe('c-quantic-numeric-facet', () => {
   beforeAll(() => {
     mockSuccessfulHeadlessInitialization();
+    mockBueno();
   });
 
   afterEach(() => {
@@ -214,6 +237,89 @@ describe('c-quantic-numeric-facet', () => {
     });
   });
 
+  describe('validation of the dependsOn property', () => {
+    let consoleError;
+    beforeAll(() => {
+      consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    });
+    describe('when dependsOn.parentFacetId is not provided', () => {
+      it('should display the error component', async () => {
+        const invalidFacetDependency = {
+          expectedValue: 'txt',
+        };
+        const element = createTestComponent({
+          ...defaultOptions,
+          dependsOn: invalidFacetDependency,
+        });
+        await flushPromises();
+
+        const componentError = element.shadowRoot.querySelector(
+          selectors.componentError
+        );
+        const facetContent = element.shadowRoot.querySelector(
+          selectors.facetContent
+        );
+
+        expect(consoleError).toHaveBeenCalledTimes(1);
+        expect(consoleError).toHaveBeenCalledWith(parentFacetIdError);
+        expect(componentError).not.toBeNull();
+        expect(facetContent).toBeNull();
+      });
+    });
+
+    describe('when dependsOn.parentFacetId is not a string', () => {
+      it('should display the error component', async () => {
+        const invalidFacetDependency = {
+          parentFacetId: 1,
+          expectedValue: 'txt',
+        };
+        const element = createTestComponent({
+          ...defaultOptions,
+          dependsOn: invalidFacetDependency,
+        });
+        await flushPromises();
+
+        const componentError = element.shadowRoot.querySelector(
+          selectors.componentError
+        );
+        const facetContent = element.shadowRoot.querySelector(
+          selectors.facetContent
+        );
+
+        expect(consoleError).toHaveBeenCalledTimes(1);
+        expect(consoleError).toHaveBeenCalledWith(parentFacetIdError);
+        expect(componentError).not.toBeNull();
+        expect(facetContent).toBeNull();
+      });
+    });
+
+    describe('when dependsOn.expectedValue is not a string', () => {
+      it('should display the error component', async () => {
+        const invalidFacetDependency = {
+          parentFacetId: 'filetype',
+          expectedValue: 2,
+        };
+        const element = createTestComponent({
+          ...defaultOptions,
+          dependsOn: invalidFacetDependency,
+        });
+        await flushPromises();
+
+        const componentError = element.shadowRoot.querySelector(
+          selectors.componentError
+        );
+        const facetContent = element.shadowRoot.querySelector(
+          selectors.facetContent
+        );
+
+        expect(consoleError).toHaveBeenCalledTimes(1);
+        expect(consoleError).toHaveBeenCalledWith(expectedValueError);
+        expect(componentError).not.toBeNull();
+        expect(facetContent).toBeNull();
+      });
+    });
+  });
+
   describe('when the component is disconnected', () => {
     it('should make the condition manager stop watching the facet', async () => {
       const exampleFacetDependency = {

package/force-app/main/default/lwc/quanticNumericFacet/quanticNumericFacet.js

@@ -18,6 +18,7 @@ import {
   getHeadlessBindings,
   registerToStore,
   getHeadlessBundle,
+  getBueno,
 } from 'c/quanticHeadlessLoader';
 import {
   I18nUtils,
@@ -264,6 +265,7 @@ export default class QuanticNumericFacet extends LightningElement {
    * @param {SearchEngine} engine
    */
   initialize = (engine) => {
+    this.validateDependsOnProperty();
     this.headless = getHeadlessBundle(this.engineId);
     this.searchStatus = this.headless.buildSearchStatus(engine);
     this.unsubscribeSearchStatus = this.searchStatus.subscribe(() =>
@@ -288,6 +290,26 @@ export default class QuanticNumericFacet extends LightningElement {
     });
   };
 
+  validateDependsOnProperty() {
+    if (this.dependsOn) {
+      getBueno(this).then(() => {
+        const {parentFacetId, expectedValue} = this.dependsOn;
+        if (!Bueno.isString(parentFacetId)) {
+          console.error(
+            `The ${this.field} ${this.template.host.localName} requires dependsOn.parentFacetId to be a valid string.`
+          );
+          this.setInitializationError();
+        }
+        if (expectedValue && !Bueno.isString(expectedValue)) {
+          console.error(
+            `The ${this.field} ${this.template.host.localName} requires dependsOn.expectedValue to be a valid string.`
+          );
+          this.setInitializationError();
+        }
+      });
+    }
+  }
+
   /**
    * @param {import("coveo").SearchEngine} engine
    */

package/force-app/main/default/lwc/quanticRecommendationInterface/quanticRecommendationInterface.js

@@ -82,6 +82,14 @@ export default class QuanticRecommendationInterface extends LightningElement {
                   ...(document.referrer && {
                     originLevel3: document.referrer.substring(0, 256),
                   }),
+                  analyticsClientMiddleware: (_event, payload) => {
+                    if (!payload.customData) {
+                      payload.customData = {};
+                    }
+                    payload.customData.coveoQuanticVersion =
+                      window.coveoQuanticVersion;
+                    return payload;
+                  },
                 },
                 ...rest,
               },

package/force-app/main/default/lwc/quanticSearchInterface/quanticSearchInterface.js

@@ -107,6 +107,14 @@ export default class QuanticSearchInterface extends LightningElement {
                     ...(document.referrer && {
                       originLevel3: document.referrer.substring(0, 256),
                     }),
+                    analyticsClientMiddleware: (_event, payload) => {
+                      if (!payload.customData) {
+                        payload.customData = {};
+                      }
+                      payload.customData.coveoQuanticVersion =
+                        window.coveoQuanticVersion;
+                      return payload;
+                    },
                   },
                   ...rest,
                 },