@salesforcedevs/dx-components 0.18.8 → 0.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.18.8",
+    "version": "0.19.2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -29,5 +29,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "4e4e55a3a3bd327d3d96b03ec560c3081f12ce3b"
+    "gitHead": "8bfc13904276093b75868ad2c4d9003d74873fbb"
 }

package/src/modules/dx/header/__tests__/mockProps.ts

@@ -13,13 +13,7 @@ import {
     mockNavAnalytics
 } from "./mockNavs";
 import mockNavDevelopers from "./mockNavDevelopers";
-
-export const coveoConfig = {
-    coveoOrganizationId: "coveosalesforcetestakshatha",
-    coveoPublicAccessToken: "xx114e9d50-bc6b-40f1-b25b-fa5a06c7e168",
-    coveoSearchPipeline: "salesforcedevdoc",
-    coveoSearchHub: "salesforcedevdoc2"
-};
+import { coveoHeaderConfig } from "../../../utils/coveo/coveo";
 
 const versions = JSON.stringify([
     {
@@ -44,18 +38,18 @@ export const mockPropsDevelopers = {
     navItems: JSON.stringify(mockNavDevelopers),
     subtitle: "Developers",
     signupLink: "/sign-up",
-    ...coveoConfig
+    ...coveoHeaderConfig
 };
 
 export const mockPropsNoNavigation = {
     subtitle: "Developers",
-    ...coveoConfig
+    ...coveoHeaderConfig
 };
 
 export const mockPropsDevWebsite = {
     version: "1",
     versions,
-    ...coveoConfig,
+    ...coveoHeaderConfig,
     signupLink: "/sign-up",
     bannerMarkup:
         '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>'

package/src/modules/dx/headerSearch/headerSearch.html

@@ -23,7 +23,6 @@
                     placeholder="Search"
                     size="override"
                     type="search"
-                    value={searchBox.value}
                 ></dx-input>
             </dx-dropdown>
             <dx-button

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -77,25 +77,29 @@ export default class HeaderSearch extends LightningElement {
     }
 
     private instantiateSearchbox() {
-        const options: StandaloneSearchBoxOptions = {
-            numberOfSuggestions: 3,
-            redirectionUrl: "https://developer.salesforce.com"
-        };
-
-        const engine = buildSearchEngine({
-            organizationId: this.coveoOrganizationId,
-            publicAccessToken: this.coveoPublicAccessToken,
-            searchPipeline: this.coveoSearchPipeline,
-            searchHub: this.coveoSearchHub
-        });
-
-        this.searchBox = buildStandaloneSearchBox(engine, { options });
-
-        this.searchBox?.subscribe(() => {
-            if (this.searchBox) {
-                this.searchState = this.searchBox.state;
-            }
-        });
+        try {
+            const options: StandaloneSearchBoxOptions = {
+                numberOfSuggestions: 3,
+                redirectionUrl: "https://developer.salesforce.com"
+            };
+
+            const engine = buildSearchEngine({
+                organizationId: this.coveoOrganizationId,
+                publicAccessToken: this.coveoPublicAccessToken,
+                searchPipeline: this.coveoSearchPipeline,
+                searchHub: this.coveoSearchHub
+            });
+
+            this.searchBox = buildStandaloneSearchBox(engine, { options });
+
+            this.searchBox?.subscribe(() => {
+                if (this.searchBox) {
+                    this.searchState = this.searchBox.state;
+                }
+            });
+        } catch (e) {
+            console.error(`Coveo searchbox failed to initialize (${e})`);
+        }
     }
 
     private createSearchHref = (value: string | null = "") => {

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -69,8 +69,10 @@ export default class SidebarSearch extends LightningElement {
 
     @api
     setInputValue(searchTerm: string) {
-        this.value = searchTerm || "";
-        this.handleValueChange(true);
+        if (searchTerm !== this.value) {
+            this.value = searchTerm || "";
+            this.handleValueChange(true);
+        }
     }
 
     private _coveoAdvancedQueryConfig!: { [key: string]: any };
@@ -283,23 +285,17 @@ export default class SidebarSearch extends LightningElement {
     }: Result): SidebarSearchResult => {
         // discussion about this normalization here: https://salesforce-internal.slack.com/archives/C020S6784JX/p1639506238376600
 
-        const isNestedGuide = clickUri.includes("/guide/");
-        const isGuide = clickUri.endsWith("/guide") || isNestedGuide;
-        const isReference = clickUri.endsWith("/references");
-        const isApex = !!sfhtml_url__c;
-
         let pathname;
-        if (isApex) {
+        if (sfhtml_url__c) {
             pathname = `/docs/${sfhtml_url__c}`;
         } else {
+            const isNestedGuide = clickUri.includes("/guide/");
             const url = new URL(clickUri);
             const extension = isNestedGuide ? ".html" : "";
             pathname = `${url.pathname}${extension}`;
         }
 
-        const query =
-            isGuide || isReference || isApex ? `?q=${this.value}` : "";
-        const href = `${pathname}${query}`;
+        const href = `${pathname}?q=${this.value}`;
 
         return {
             title,

package/src/modules/dx/sidebarSearchResult/__tests__/sidebarSearchResult.test.ts

@@ -4,7 +4,7 @@ import { createRenderComponent } from "utils/tests";
 const TAG = "dx-sidebar-search-result";
 const render = createRenderComponent(TAG, SidebarSearchResult);
 
-const PROPS = {
+const MOCK_RESULT = {
     description: "test description here",
     descriptionHighlights: [{ length: 5, offset: 5 }],
     href: "/test",
@@ -13,24 +13,65 @@ const PROPS = {
     titleHighlights: [{ length: 5, offset: 5 }]
 };
 
+const MOCK_RESULT_2 = {
+    description:
+        "Auth.MyDomainLoginDiscoveryHandler to show a custom error message on the My Domain login page ... Auth.LoginDiscoveryHandler to show an error message on the Experience Cloud site login page",
+    descriptionHighlights: [
+        { length: 4, offset: 0 },
+        { length: 4, offset: 98 }
+    ],
+    href: "/test",
+    selected: false,
+    title: "Auth Exceptions | Apex Reference Guide | Salesforce Developers",
+    titleHighlights: [{ length: 4, offset: 0 }]
+};
+
 describe(TAG, () => {
     it("renders a result with the correct highlighted content", () => {
-        const element = render(PROPS);
+        const element = render(MOCK_RESULT);
 
+        const title = element.shadowRoot.querySelector(".title");
         const titleBolds = element.shadowRoot.querySelectorAll(".title .bold");
-        expect(titleBolds.length).toEqual(1);
+        expect(title.textContent).toEqual(MOCK_RESULT.title);
+        expect(titleBolds.length).toEqual(MOCK_RESULT.titleHighlights.length);
         expect(titleBolds[0].textContent).toEqual("title");
 
+        const description = element.shadowRoot.querySelector(".description");
         const descriptionBolds =
             element.shadowRoot.querySelectorAll(".description .bold");
-        expect(descriptionBolds.length).toEqual(1);
+        expect(description.textContent).toEqual(MOCK_RESULT.description);
+        expect(descriptionBolds.length).toEqual(
+            MOCK_RESULT.descriptionHighlights.length
+        );
         expect(descriptionBolds[0].textContent).toEqual("descr");
 
         return expect(element).toBeAccessible();
     });
 
+    it("renders another result variant with the correct highlighted content", () => {
+        const element = render(MOCK_RESULT_2);
+
+        const title = element.shadowRoot.querySelector(".title");
+        const titleBolds = element.shadowRoot.querySelectorAll(".title .bold");
+        expect(title.textContent).toEqual(MOCK_RESULT_2.title);
+        expect(titleBolds.length).toEqual(MOCK_RESULT_2.titleHighlights.length);
+        expect(titleBolds[0].textContent).toEqual("Auth");
+
+        const description = element.shadowRoot.querySelector(".description");
+        const descriptionBolds =
+            element.shadowRoot.querySelectorAll(".description .bold");
+        expect(description.textContent).toEqual(MOCK_RESULT_2.description);
+        expect(descriptionBolds.length).toEqual(
+            MOCK_RESULT_2.descriptionHighlights.length
+        );
+        expect(descriptionBolds[0].textContent).toEqual("Auth");
+        expect(descriptionBolds[1].textContent).toEqual("Auth");
+
+        return expect(element).toBeAccessible();
+    });
+
     it("renders a result as selected when specified", () => {
-        const element = render({ ...PROPS, selected: true });
+        const element = render({ ...MOCK_RESULT, selected: true });
 
         const selected = element.shadowRoot.querySelector(
             ".sidebar-item-selected"
@@ -42,7 +83,7 @@ describe(TAG, () => {
 
     it("doesn't add bold class when there is no highlighted term", () => {
         const element = render({
-            ...PROPS,
+            ...MOCK_RESULT,
             descriptionHighlights: [],
             titleHighlights: []
         });

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.ts

@@ -13,7 +13,7 @@ const toChunks = (value: string, highlights: CoveoHighlights) => {
     }
 
     let endIndex = 0;
-    return highlights.reduce((acc, { length, offset }) => {
+    return highlights.reduce((acc, { length, offset }, i) => {
         const plainValue = value.slice(endIndex, offset);
         const plainChunk = {
             value: plainValue,
@@ -28,9 +28,23 @@ const toChunks = (value: string, highlights: CoveoHighlights) => {
             id: offset
         };
 
-        return plainValue.length > 0
-            ? [...acc, plainChunk, boldChunk]
-            : [...acc, boldChunk];
+        let chunks =
+            plainValue.length > 0
+                ? [...acc, plainChunk, boldChunk]
+                : [...acc, boldChunk];
+
+        const remaining = value.slice(endIndex);
+        if (remaining.length > 0 && highlights.length - 1 === i) {
+            chunks = [
+                ...chunks,
+                {
+                    value: remaining,
+                    id: value.length
+                }
+            ];
+        }
+
+        return chunks;
     }, []);
 };
 

package/src/modules/utils/coveo/coveo.ts

@@ -38,17 +38,18 @@ export const getSidebarSearchParams = () =>
     new URLSearchParams(window.location.search).get("q");
 
 const coveoOrganizationId = "coveosalesforcetestakshatha";
+const coveoPublicAccessToken = "xxfeb39525-e402-4e41-a870-7132441f7875";
 
 export const coveoHeaderConfig = {
     coveoOrganizationId,
-    coveoPublicAccessToken: "xx8d9c92ef-1018-4d92-a3c7-647dff01c21c",
+    coveoPublicAccessToken,
     coveoSearchPipeline: "salesforcedevdoc",
     coveoSearchHub: "salesforcedevdoc"
 };
 
 export const coveoXMLDocsConfig = {
     coveoOrganizationId,
-    coveoPublicAccessToken: "xxfeb39525-e402-4e41-a870-7132441f7875",
+    coveoPublicAccessToken,
     coveoSearchHub: "Developer_Docs_SS",
     coveoAdvancedQueryConfig: JSON.stringify({
         objecttype: "HTDeveloperDocumentsC",
@@ -60,7 +61,7 @@ export const coveoXMLDocsConfig = {
 
 export const coveoSFDocsConfig = {
     coveoOrganizationId,
-    coveoPublicAccessToken: "xxfeb39525-e402-4e41-a870-7132441f7875",
+    coveoPublicAccessToken,
     coveoSearchHub: "Developer_MdDocs_SS",
     coveoAdvancedQueryConfig: JSON.stringify({
         source: "Sitemap - Developer Docs",