@coveo/quantic 3.43.1 → 3.43.3

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

@@ -2,27 +2,30 @@
   list-style: none;
 }
 
-.thread-item__dot-column,
-.thread-item__line-column {
-  width: 10px;
+.thread-item__grid {
+  display: grid;
+  grid-template-columns: 10px 1fr;
+  grid-template-rows: auto 1fr;
+  column-gap: var(--lwc-spacingXSmall, 8px);
 }
 
-.thread-item__dot {
-  height: 8px;
-  width: 8px;
-  border-radius: 50%;
-  background-color: var(--lwc-colorBorder, #dddbda);
+.thread-item__timeline {
+  grid-row: 1 / -1;
+  align-self: stretch;
 }
 
-.thread-item__dot--expanded {
-  background-color: var(--lwc-colorTextDefault, #080707);
+.thread-item__dot-column {
+  width: 10px;
+  height: 1lh;
+  margin-block: var(--lwc-spacingXxSmall, 4px);
 }
 
 .thread-item__line {
   position: relative;
+  flex: 1;
   width: 1px;
-  height: 100%;
   background-color: var(--lwc-colorBorder, #dddbda);
+  transition: background-color 0.2s ease;
 }
 
 .thread-item__line::before,
@@ -33,6 +36,7 @@
   width: 1px;
   height: 8px;
   background-color: var(--lwc-colorBorder, #dddbda);
+  transition: background-color 0.2s ease;
 }
 
 .thread-item__line::before {
@@ -43,6 +47,41 @@
   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;
+  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 {
+  background-color: var(--lwc-colorTextDefault, #080707);
+}
+
 .thread-item__clamped-text {
   display: -webkit-box;
   -webkit-line-clamp: 3;

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

@@ -1,10 +1,23 @@
 <template>
   <li class="thread-item">
-    <div class="slds-grid slds-grid_vertical-align-center">
+    <div class="thread-item__grid">
       <div
-        class="slds-grid slds-grid_align-center slds-grid_vertical-align-center slds-shrink-none slds-m-right_x-small thread-item__dot-column"
+        class={lineColumnClass}
+        data-testid="thread-item-line-column"
+        onclick={handleLineClick}
       >
-        <span class={dotClass} data-testid="thread-item-dot"></span>
+        <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"
+            onclick={handleDotClick}
+          ></span>
+        </div>
+        <template lwc:if={shouldDisplayLine}>
+          <span class="thread-item__line" data-testid="thread-item-line"></span>
+        </template>
       </div>
       <div class="slds-has-flexi-truncate">
         <template lwc:if={disableCollapse}>
@@ -25,18 +38,9 @@
           </button>
         </template>
       </div>
-    </div>
-    <div class="slds-grid">
-      <div
-        class="slds-grid slds-grid_align-center slds-shrink-none thread-item__line-column slds-m-right_x-small"
-      >
-        <template lwc:if={shouldDisplayLine}>
-          <span class="thread-item__line" data-testid="thread-item-line"></span>
-        </template>
-      </div>
       <div
         id="thread-item-content"
-        class="slds-col slds-p-left_x-small slds-p-vertical_xx-small"
+        class="slds-p-left_x-small slds-p-vertical_xx-small thread-item__content"
         data-testid="thread-item-content"
       >
         <div hidden={contentHidden}>

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,28 @@ 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_align-center',
+      '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/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.";
     }