@coveo/quantic 3.43.2 → 3.43.4

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

@@ -9,6 +9,7 @@ const selectors = {
   contentWrapper: '[data-testid="thread-item-content"]',
   visibleContent: '[data-testid="thread-item-content"] > div:not([hidden])',
   line: '[data-testid="thread-item-line"]',
+  lineColumn: '[data-testid="thread-item-line-column"]',
   dot: '[data-testid="thread-item-dot"]',
 };
 
@@ -87,6 +88,52 @@ describe('c-quantic-thread-item', () => {
       const dot = element.shadowRoot.querySelector(selectors.dot);
       expect(dot.className).not.toContain('thread-item__dot--expanded');
     });
+
+    it('dot has interactive class when collapse is enabled', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const dot = element.shadowRoot.querySelector(selectors.dot);
+      expect(dot.className).toContain('thread-item__dot--interactive');
+    });
+
+    it('dot does not have interactive class when disableCollapse is true', async () => {
+      const element = createTestComponent({disableCollapse: true});
+      await flushPromises();
+
+      const dot = element.shadowRoot.querySelector(selectors.dot);
+      expect(dot.className).not.toContain('thread-item__dot--interactive');
+    });
+
+    it('line column has interactive class when collapse is enabled and line is visible', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const lineColumn = element.shadowRoot.querySelector(selectors.lineColumn);
+      expect(lineColumn.className).toContain(
+        'thread-item__line-column--interactive'
+      );
+    });
+
+    it('line column does not have interactive class when disableCollapse is true', async () => {
+      const element = createTestComponent({disableCollapse: true});
+      await flushPromises();
+
+      const lineColumn = element.shadowRoot.querySelector(selectors.lineColumn);
+      expect(lineColumn.className).not.toContain(
+        'thread-item__line-column--interactive'
+      );
+    });
+
+    it('line column does not have interactive class when hideLine is true', async () => {
+      const element = createTestComponent({hideLine: true});
+      await flushPromises();
+
+      const lineColumn = element.shadowRoot.querySelector(selectors.lineColumn);
+      expect(lineColumn.className).not.toContain(
+        'thread-item__line-column--interactive'
+      );
+    });
   });
 
   describe('expanded state', () => {
@@ -143,6 +190,97 @@ describe('c-quantic-thread-item', () => {
       );
       expect(content).toBeNull();
     });
+
+    it('expands the content when the dot is clicked while collapsed', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.dot).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
+
+    it('collapses the content when the dot is clicked while expanded', async () => {
+      const element = createTestComponent({isExpanded: true});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.dot).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).toBeNull();
+    });
+
+    it('does not toggle when the dot is clicked and disableCollapse is true', async () => {
+      const element = createTestComponent({disableCollapse: true});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.dot).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
+
+    it('expands the content when the line column is clicked while collapsed', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.lineColumn).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
+
+    it('collapses the content when the line column is clicked while expanded', async () => {
+      const element = createTestComponent({isExpanded: true});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.lineColumn).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).toBeNull();
+    });
+
+    it('does not toggle when the line column is clicked and disableCollapse is true', async () => {
+      const element = createTestComponent({disableCollapse: true});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.lineColumn).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
+
+    it('does not toggle when the line column is clicked and hideLine is true', async () => {
+      const element = createTestComponent({hideLine: true, isExpanded: true});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.lineColumn).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
   });
 
   describe('disableCollapse', () => {

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

@@ -6,7 +6,7 @@
   display: grid;
   grid-template-columns: 10px 1fr;
   grid-template-rows: auto 1fr;
-  column-gap: var(--lwc-spacingXSmall, 8px);
+  column-gap: var(--slds-g-spacing-2, var(--lwc-spacingXSmall, 8px));
 }
 
 .thread-item__timeline {
@@ -17,7 +17,7 @@
 .thread-item__dot-column {
   width: 10px;
   height: 1lh;
-  margin-block: var(--lwc-spacingXxSmall, 4px);
+  margin-block: var(--slds-g-spacing-1, var(--lwc-spacingXxSmall, 4px));
 }
 
 .thread-item__line {
@@ -25,6 +25,7 @@
   flex: 1;
   width: 1px;
   background-color: var(--lwc-colorBorder, #dddbda);
+  transition: background-color 0.2s ease;
 }
 
 .thread-item__line::before,
@@ -33,8 +34,9 @@
   position: absolute;
   left: 0;
   width: 1px;
-  height: 8px;
+  height: var(--slds-g-sizing-3, 8px);
   background-color: var(--lwc-colorBorder, #dddbda);
+  transition: background-color 0.2s ease;
 }
 
 .thread-item__line::before {
@@ -45,16 +47,35 @@
   bottom: -8px;
 }
 
+.thread-item__line-column--interactive {
+  cursor: pointer;
+}
+
+.thread-item__line-column--interactive:hover .thread-item__line,
+.thread-item__line-column--interactive:hover .thread-item__line::before,
+.thread-item__line-column--interactive:hover .thread-item__line::after {
+  background-color: var(--lwc-colorTextDefault, #080707);
+}
+
 .thread-item__content {
   grid-column: 2;
   grid-row: 2;
 }
 
 .thread-item__dot {
-  height: 8px;
-  width: 8px;
+  height: var(--slds-g-sizing-3, 8px);
+  width: var(--slds-g-sizing-3, 8px);
   border-radius: 50%;
   background-color: var(--lwc-colorBorder, #dddbda);
+  transition: background-color 0.2s ease;
+}
+
+.thread-item__dot--interactive {
+  cursor: pointer;
+}
+
+.thread-item__dot--interactive:hover {
+  background-color: var(--lwc-colorTextDefault, #080707);
 }
 
 .thread-item__dot--expanded {
@@ -73,6 +94,6 @@
   border-radius: var(--slds-g-radius-border-2, 4px);
 }
 
-.thread-item__title-button:hover {
+button.thread-item__title-button:hover {
   background-color: var(--lwc-colorBackgroundRowHover, #f3f2f2);
 }

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

@@ -1,11 +1,19 @@
 <template>
   <li class="thread-item">
     <div class="thread-item__grid">
-      <div class="slds-grid slds-grid_vertical slds-grid_vertical-align-center thread-item__timeline">
+      <div
+        class={lineColumnClass}
+        data-testid="thread-item-line-column"
+        onclick={handleLineClick}
+      >
         <div
           class="slds-grid slds-grid_align-center slds-grid_vertical-align-center thread-item__dot-column"
         >
-          <span class={dotClass} data-testid="thread-item-dot"></span>
+          <span
+            class={dotClass}
+            data-testid="thread-item-dot"
+            onclick={handleDotClick}
+          ></span>
         </div>
         <template lwc:if={shouldDisplayLine}>
           <span class="thread-item__line" data-testid="thread-item-line"></span>

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

@@ -58,6 +58,21 @@ export default class QuanticThreadItem extends LightningElement {
     this._isExpanded = !this._isExpanded;
   }
 
+  handleDotClick(event) {
+    event.stopPropagation();
+    if (this.disableCollapse) {
+      return;
+    }
+    this._isExpanded = !this._isExpanded;
+  }
+
+  handleLineClick() {
+    if (this.disableCollapse || this.hideLine) {
+      return;
+    }
+    this._isExpanded = !this._isExpanded;
+  }
+
   get shouldDisplayLine() {
     return !this.hideLine;
   }
@@ -75,6 +90,27 @@ export default class QuanticThreadItem extends LightningElement {
   }
 
   get dotClass() {
-    return `thread-item__dot${this._isExpanded ? ' thread-item__dot--expanded' : ''}`;
+    const classes = ['thread-item__dot'];
+    if (this._isExpanded) {
+      classes.push('thread-item__dot--expanded');
+    }
+    if (!this.disableCollapse) {
+      classes.push('thread-item__dot--interactive');
+    }
+    return classes.join(' ');
+  }
+
+  get lineColumnClass() {
+    const classes = [
+      'slds-grid',
+      'slds-grid_vertical',
+      'slds-grid_vertical-align-center',
+      'slds-shrink-none',
+      'thread-item__timeline',
+    ];
+    if (!this.disableCollapse && !this.hideLine) {
+      classes.push('thread-item__line-column--interactive');
+    }
+    return classes.join(' ');
   }
 }

package/force-app/main/default/lwc/quanticTimeframeFacet/e2e/data.ts

@@ -0,0 +1,66 @@
+const facetId = 'Date';
+const field = 'Date';
+
+/**
+ * Facet response before any value is selected.
+ * The values mirror the relative timeframes declared on the exampleQuanticTimeframeFacet.html file
+ */
+export const initialFacetData = {
+  facetId,
+  field,
+  moreValuesAvailable: false,
+  values: [
+    {
+      start: 'now',
+      end: 'next-1-year',
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 10,
+    },
+    {
+      start: 'past-2-week',
+      end: 'now',
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 20,
+    },
+    {
+      start: 'past-1-month',
+      end: 'now',
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 30,
+    },
+    {
+      start: 'past-1-year',
+      end: 'now',
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 40,
+    },
+    {
+      start: 'past-10-year',
+      end: 'now',
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 50,
+    },
+  ],
+  indexScore: 0.4,
+};
+
+const [firstRange, ...remainingRanges] = initialFacetData.values;
+
+/**
+ * Facet response after the first value is selected.
+ */
+export const selectedFacetData = {
+  ...initialFacetData,
+  values: [
+    {
+      ...firstRange,
+      state: 'selected',
+    },
+    ...remainingRanges,
+  ],
+};

package/force-app/main/default/lwc/quanticTimeframeFacet/e2e/fixture.ts

@@ -6,6 +6,7 @@ import {
   insightSearchRequestRegex,
 } from '../../../../../../playwright/utils/requests';
 import {BaseFacetObject} from '../../../../../../playwright/page-object/baseFacetObject';
+import {initialFacetData} from './data';
 import {facetBase} from '../../../../../../playwright/fixtures/baseFacetFixture';
 
 const pageUrl = 's/quantic-timeframe-facet';
@@ -22,11 +23,20 @@ type QuanticFacetE2EFixtures = {
 
 export const testSearch = facetBase.extend<QuanticFacetE2EFixtures>({
   options: {withDatePicker: true},
+  facetResponses: {responses: [[initialFacetData]]},
   baseFacet: async ({page}, use) => {
     await use(new BaseFacetObject(page, searchRequestRegex));
   },
-  facet: async ({page, options, configuration, baseFacet, urlHash}, use) => {
+  facet: async (
+    {page, options, configuration, baseFacet, urlHash, facetResponses},
+    use
+  ) => {
+    // search use case: interface auto-triggers a search on load, hence the mockSearchWithBaseResponse call below
+    await baseFacet.mockSearchWithBaseResponse();
     await page.goto(`${pageUrl}#${urlHash ? urlHash : ''}`);
+    await baseFacet.mockSearchWithFacetResponseSequence(
+      facetResponses?.responses
+    );
     configuration.configure(options);
     await baseFacet.waitForSearchResponse();
 
@@ -36,6 +46,7 @@ export const testSearch = facetBase.extend<QuanticFacetE2EFixtures>({
 
 export const testInsight = facetBase.extend<QuanticFacetE2EFixtures>({
   options: {withDatePicker: true},
+  facetResponses: {responses: [[initialFacetData]]},
   baseFacet: async ({page}, use) => {
     await use(new BaseFacetObject(page, insightSearchRequestRegex));
   },
@@ -43,14 +54,19 @@ export const testInsight = facetBase.extend<QuanticFacetE2EFixtures>({
     await use(new InsightSetupObject(page));
   },
   facet: async (
-    {page, options, baseFacet, configuration, insightSetup},
+    {page, options, baseFacet, configuration, insightSetup, facetResponses},
     use
   ) => {
     await page.goto(pageUrl);
+    await baseFacet.mockSearchWithFacetResponseSequence(
+      facetResponses?.responses
+    );
     configuration.configure({...options, useCase: useCaseEnum.insight});
     await insightSetup?.waitForInsightInterfaceInitialization();
-    await baseFacet.performSearch();
-    await baseFacet.waitForSearchResponse();
+    await Promise.all([
+      baseFacet.waitForSearchResponse(),
+      baseFacet.performSearch(),
+    ]);
     await use(new TimeframeFacetObject(page));
   },
 });

package/force-app/main/default/lwc/quanticTimeframeFacet/e2e/quanticTimeframeFacet.e2e.ts

@@ -3,6 +3,7 @@ import {
   useCaseEnum,
   useCaseTestCases,
 } from '../../../../../../playwright/utils/useCase';
+import {initialFacetData, selectedFacetData} from './data';
 
 const fixtures = {
   search: testSearch,
@@ -15,6 +16,16 @@ useCaseTestCases.forEach((useCase) => {
   let test = fixtures[useCase.value];
   test.describe(`quantic timeframe facet ${useCase.label}`, () => {
     test.describe('when selecting and deselecting a facet value', () => {
+      test.use({
+        facetResponses: {
+          responses: [
+            [initialFacetData],
+            [selectedFacetData],
+            [initialFacetData],
+          ],
+        },
+      });
+
       test('should trigger a new search and log the corresponding UA analytics events', async ({
         baseFacet,
         facet,
@@ -59,6 +70,16 @@ useCaseTestCases.forEach((useCase) => {
     });
 
     test.describe('when selecting a facet value and clicking the clear filter button', () => {
+      test.use({
+        facetResponses: {
+          responses: [
+            [initialFacetData],
+            [selectedFacetData],
+            [initialFacetData],
+          ],
+        },
+      });
+
       test('should trigger a new search and log the corresponding UA analytics events', async ({
         baseFacet,
         facet,
@@ -143,6 +164,9 @@ useCaseTestCases.forEach((useCase) => {
         const yesterdayDate = date.toISOString().slice(0, 10);
         test.use({
           urlHash: `df-${exampleField}=${yesterdayDate.replaceAll('-', '/')}@00:00:00..${todayDate.replaceAll('-', '/')}@23:59:59`,
+          facetResponses: {
+            responses: [],
+          },
         });
 
         test('should select the correct facet value', async ({facet}) => {

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

@@ -1,5 +1,5 @@
 @import 'c/quanticFacetStyles';
 
 .timeframe-facet__input-label {
-  color: var(--lwc-colorTextPlaceholder, var(--lwc-colorTextIconDefault, #747474));
+  color: var(--slds-g-color-on-surface-1, var(--lwc-colorTextPlaceholder, var(--lwc-colorTextIconDefault, #747474)));
 }

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

@@ -37,7 +37,7 @@
 }
 
 .tooltip__arrow--light {
-  background-color: var(--lwc-colorBackgroundAlt, rgb(255, 255, 255));
+  background-color: var(--slds-g-color-surface-1, var(--lwc-colorBackgroundAlt, rgb(255, 255, 255)));
 }
 
 .tooltip__arrow--positioned-above {
@@ -64,11 +64,11 @@
 .tooltip__nubbin--bottom:before,
 .tooltip__nubbin--bottom:after {
   clip-path: polygon(100% 0, 0% 100%, 100% 100%);
-  border: solid 0.5px rgba(0, 0, 0, 0.16);
+  border: solid 0.5px var(--slds-g-color-border-1, rgba(0, 0, 0, 0.16));
 }
 
 .tooltip__nubbin--top:before,
 .tooltip__nubbin--top:after {
   clip-path: polygon(100% 0, 0 0, 0 100%);
-  border: solid 0.5px rgba(0, 0, 0, 0.16);
+  border: solid 0.5px var(--slds-g-color-border-1, rgba(0, 0, 0, 0.16));
 }

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

@@ -5,13 +5,13 @@
 
 .user-action__separator {
   width: 0.125rem;
-  height: 1.75rem;
-  background-color: var(--lwc-colorTextIconDefault, #747474);
-  border-radius: var(--lwc-borderRadiusMedium, 0.25rem);
+  height: var(--slds-g-sizing-8, 1.75rem);
+  background-color: var(--slds-g-color-on-surface-1, var(--lwc-colorTextIconDefault, #747474));
+  border-radius: var(--slds-g-radius-border-2, var(--lwc-borderRadiusMedium, 0.25rem));
 }
 
 .user-action__title {
-  color: #1a1b1e;
+  color: var(--slds-g-color-on-surface-3, #1a1b1e);
 }
 
 .user-action__ticket-creation-title {
@@ -20,12 +20,12 @@
 
 .user-action__custom-action-icon,
 .user-action__search-action-icon {
-  --slds-c-icon-color-foreground-default: #1a1b1e;
+  --slds-c-icon-color-foreground-default: var(--slds-g-color-on-surface-3, #1a1b1e);
 }
 
 .user-action__click-action-icon,
 .user-action__view-action-icon {
-  --slds-c-icon-color-foreground-default: var(--lwc-colorBrandDark, #0176d3);
+  --slds-c-icon-color-foreground-default: var(--slds-g-color-accent-2, var(--lwc-colorBrandDark, #0176d3));
 }
 
 .user-action__ticket-creation-icon {
@@ -34,6 +34,6 @@
 
 .user-action__details {
   font-weight: var(--lwc-fontWeightRegular, 400);
-  color: var(--lwc-colorTextPlaceholder, #747474);
+  color: var(--slds-g-color-on-surface-1, var(--lwc-colorTextPlaceholder, #747474));
   font-size: var(--slds-g-font-scale-neg-2, 10px);
 }

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

@@ -3,10 +3,10 @@
 }
 
 .session-start__icon-container {
-  background-color: orange;
+  background-color: var(--slds-g-color-warning-base-50, orange);
   border-radius: var(--lwc-borderRadiusCircle, 50%);
-  width: 24px;
-  height: 24px;
+  width: var(--slds-g-sizing-7, 24px);
+  height: var(--slds-g-sizing-7, 24px);
 }
 
 .session__show-more-actions-button {

package/force-app/main/default/lwc/quanticUserActionsTimeline/templates/userActionsTimeline.css

@@ -1,7 +1,7 @@
 .timeline__separator {
   height: 1px;
-  background-color: var(--lwc-brandDisabled, #c9c7c5);
-  border-radius: var(--lwc-borderRadiusMedium, 0.25rem);
+  background-color: var(--slds-g-color-disabled-1, var(--lwc-brandDisabled, #c9c7c5));
+  border-radius: var(--slds-g-radius-border-2, var(--lwc-borderRadiusMedium, 0.25rem));
 }
 
 .timeline__show-following-sessions-button,

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

@@ -3,19 +3,19 @@
 .searchbox__container {
   display: flex;
   position: relative;
-  border-color: #e5e8e8;
-  min-height: 48px;
+  border-color: var(--slds-g-color-border-1, #e5e8e8);
+  min-height: var(--slds-g-sizing-10, 48px);
   box-sizing: border-box;
-  border-radius: 0.25rem;
+  border-radius: var(--slds-g-radius-border-2, 0.25rem);
   overflow: hidden;
 }
 
 .searchbox__input {
   display: flex;
-  border-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-radius: var(--slds-g-radius-border-2, 0.25rem);
+  border-bottom-left-radius: var(--slds-g-radius-border-2, 0.25rem);
   position: relative;
-  height: 48px;
+  height: var(--slds-g-sizing-10, 48px);
   box-sizing: border-box;
 }
 
@@ -28,17 +28,17 @@
 .searchbox__submit-button {
   width: 46.75px;
   border-radius: 0;
-  height: 48px;
+  height: var(--slds-g-sizing-10, 48px);
 }
 
 .searchbox__submit-button:focus {
   border: none;
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
+  border-top-right-radius: var(--slds-g-radius-border-2, 0.25rem);
+  border-bottom-right-radius: var(--slds-g-radius-border-2, 0.25rem);
 }
 
 .searchbox__icon-container {
-  height: 48px;
+  height: var(--slds-g-sizing-10, 48px);
 }
 
 .searchbox__clear-button {

package/force-app/main/default/staticresources/coveobueno/browser/bueno.js

@@ -383,9 +383,7 @@ var EnumValue = class {
     if (isUndefined(value)) {
       return null;
     }
-    const valueInEnum = Object.values(this.config.enum).find(
-      (enumValue) => enumValue === value
-    );
+    const valueInEnum = Object.values(this.config.enum).find((enumValue) => enumValue === value);
     if (!valueInEnum) {
       return "value is not in enum.";
     }