@salesforcedevs/dx-components 1.28.7-alpha.9 → 1.29.0-ssgalpha2

package/src/modules/dx/sidebar/sidebar.html

@@ -48,6 +48,10 @@
                 <dx-sidebar-search
                     onchange={onSearchChange}
                     onloading={onSearchLoading}
+                    coveo-organization-id={coveoOrganizationId}
+                    coveo-public-access-token={coveoPublicAccessToken}
+                    coveo-search-hub={coveoSearchHub}
+                    coveo-advanced-query-config={coveoAdvancedQueryConfig}
                 ></dx-sidebar-search>
             </div>
             <slot name="version-picker"></slot>

package/src/modules/dx/sidebar/sidebar.ts

@@ -1,18 +1,18 @@
 import cx from "classnames";
 import { api, track } from "lwc";
 import { TreeNode, SidebarSearchResult } from "typings/custom";
+import { getSidebarSearchParams } from "dxUtils/coveo";
 import { toJson } from "dxUtils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
 import { SidebarBase } from "dxBaseElements/sidebarBase";
 
 const MOBILE_SIZE_MATCH = "768px";
 
-const getSearchQueryParam = (): string | null =>
-    typeof window !== "undefined"
-        ? new URLSearchParams(window.location.search).get("q")
-        : null;
-
 export default class Sidebar extends SidebarBase {
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+    @api coveoSearchHub!: string;
+    @api coveoAdvancedQueryConfig!: string;
     @api header: string = "";
 
     @api
@@ -130,7 +130,7 @@ export default class Sidebar extends SidebarBase {
     constructor() {
         super();
 
-        if (getSearchQueryParam()) {
+        if (getSidebarSearchParams()) {
             this.isSearchLoading = true;
             this.scrollToSelectedSearchResult = true;
         }
@@ -175,7 +175,7 @@ export default class Sidebar extends SidebarBase {
         this.isSearchLoading = e.detail;
     }
 
-    private onSidebarSearchContentScroll(scrollEvent: Event) {
+    private onSidebarSearchContentScroll(scrollEvent) {
         if (this.isSearchLoading) {
             return;
         }

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

@@ -1,27 +1,75 @@
 import { LightningElement, api } from "lwc";
 import debounce from "debounce";
 import {
-    type DataCloudSearchResultItem,
-    fetchSearch
-} from "dxUtils/dataCloudSearch";
+    Result,
+    ResultList,
+    Unsubscribe,
+    ResultsPerPage,
+    SearchBox,
+    buildInteractiveResult,
+    buildResultList,
+    buildResultsPerPage,
+    buildSearchBox,
+    loadAdvancedSearchQueryActions,
+    SearchEngine,
+    SearchAppState,
+    loadQueryActions
+} from "@coveo/headless";
+import { buildSearchEngine, getSidebarSearchParams } from "dxUtils/coveo";
 import { RecentSearches } from "dxUtils/recentSearches";
+import { toJson } from "dxUtils/normalizers";
 import {
     Option,
     PopoverRequestCloseType,
     SidebarSearchResult
 } from "typings/custom";
 
+const RESULT_CLICK_LOCAL_STORAGE_KEY = "dx-sidebar-search-result-click";
+export const SESSION_KEY = "dx-sidebar-search-state";
+
+const DEFAULT_RESULT_COUNT = 20;
 const SEARCH_DEBOUNCE_DELAY = 1200;
 
 const UserRecentSearches = new RecentSearches();
 
-const getSearchQueryParam = (): string =>
-    new URLSearchParams(window.location.search).get("q") ?? "";
+const normalizeCoveoAdvancedQueryValue = (version: string): string =>
+    version?.split(".").join("\\.");
 
 export default class SidebarSearch extends LightningElement {
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+    @api coveoSearchHub!: string;
+    @api
+    get coveoAdvancedQueryConfig(): { [key: string]: any } {
+        return this._coveoAdvancedQueryConfig;
+    }
+    set coveoAdvancedQueryConfig(value) {
+        const jsonValue = toJson(value);
+        const hasChanged =
+            this._coveoAdvancedQueryConfig &&
+            Object.entries(jsonValue).some(
+                ([key, val]: [string, any]) =>
+                    this._coveoAdvancedQueryConfig[key] !== val
+            );
+        this._coveoAdvancedQueryConfig = jsonValue;
+
+        if (hasChanged && this.engine && this.value !== "") {
+            this.dispatchOnLoading(true);
+        }
+
+        if (hasChanged && this.engine) {
+            // set advanced filters needs access to the latest coveoAdvancedQueryConfig
+            this.setAdvancedFilters(this.engine);
+            this.submitSearch(true);
+        }
+    }
+
     @api
     public fetchMoreResults() {
-        // Data Cloud Search API does not expose pagination in the same way; no-op
+        if (this.resultList?.state?.moreResultsAvailable) {
+            this.fetchingMoreResults = true;
+            this.resultList.fetchMoreResults();
+        }
     }
 
     @api
@@ -37,87 +85,313 @@ export default class SidebarSearch extends LightningElement {
         this.dropdownRequestedOpen = value;
     }
 
+    private _coveoAdvancedQueryConfig!: { [key: string]: any };
     private dropdownRequestedOpen: boolean = false;
     private recentSearches: Option[] = [];
-    private value: string = "";
+    private unsubscribeFromResultList: Unsubscribe = () => {};
+    private resultList: ResultList | null = null;
+    private resultsPerPage: ResultsPerPage | null = null;
+    private preloadedState?: SearchAppState;
+    private searchBox: SearchBox | null = null;
+    private value?: string = "";
+    private engine: SearchEngine | null = null;
+    private fetchingMoreResults: boolean = false;
     private didRender = false;
-    private dataCloudSearchInitialized: boolean = false;
+
+    private get hasCorrectCoveoConfig(): boolean {
+        const coveoConfigurations = [
+            this.coveoOrganizationId,
+            this.coveoPublicAccessToken,
+            this.coveoSearchHub,
+            this.coveoAdvancedQueryConfig
+        ];
+
+        return coveoConfigurations.every(
+            (val) =>
+                !!val && (typeof val === "string" || typeof val === "object")
+        );
+    }
 
     private get isDropdownOpen() {
         return (
             this.dropdownRequestedOpen &&
-            this.recentSearches?.length > 0 &&
+            this.recentSearches &&
+            this.recentSearches.length > 0 &&
             !this.value
         );
     }
 
     constructor() {
         super();
+
         this.updateRecentSearches();
-        this.value = getSearchQueryParam();
+        this.value = getSidebarSearchParams() || "";
+    }
+
+    disconnectedCallback() {
+        this.unsubscribeFromResultList();
     }
 
     renderedCallback() {
-        if (!this.dataCloudSearchInitialized) {
-            this.dataCloudSearchInitialized = true;
-            if (this.value) {
-                // Page load with ?q= in URL: run search so results and loading state resolve
-                if (!this.didRender) {
-                    this.dispatchHighlightedTermChange();
+        // in prod some of the critical coveo configuration attributes seem to arrive later
+        // so I needed to put this coveo startup flow here where we can wait for them to arrive
+
+        if (this.hasCorrectCoveoConfig && !this.engine) {
+            this.initializeUserSession();
+            this.initializeCoveo();
+        } else if (!this.hasCorrectCoveoConfig) {
+            console.error(
+                "Incorrect coveo search configuration provided. All coveo configuration attributes must be defined.",
+                {
+                    coveoOrganizationId: this.coveoOrganizationId,
+                    coveoPublicAccessToken: this.coveoPublicAccessToken,
+                    coveoSearchHub: this.coveoSearchHub,
+                    coveoAdvancedQueryConfig: this.coveoAdvancedQueryConfig
                 }
-                this.dispatchOnLoading(true);
-                this.fetchDataCloudSearch();
-            } else {
-                this.dispatchOnLoading(false);
-            }
+            );
         }
+
+        // If this is the first render and there is a search value, trigger
+        // term highlighting
         if (!this.didRender && this.value) {
             this.dispatchHighlightedTermChange();
         }
+
         this.didRender = true;
     }
 
-    private normalizeDataCloudResult = (
-        item: DataCloudSearchResultItem,
-        index: number
-    ): SidebarSearchResult => {
-        const href = item.url ?? "";
-        const resultPath = href.startsWith("http")
-            ? new URL(href).pathname
-            : href;
-        const isSelected =
-            !!resultPath && resultPath === window.location.pathname;
+    private initializeUserSession() {
+        const stringified = window.sessionStorage.getItem(SESSION_KEY);
+
+        if (!stringified) {
+            return;
+        }
+
+        try {
+            const json = JSON.parse(stringified);
+
+            const hasSameConfig = Object.entries(
+                json.coveoAdvancedQueryConfig
+            ).every(
+                ([key, value]: [string, any]) =>
+                    this.coveoAdvancedQueryConfig[key] === value
+            );
+            const hasSameQuery = json?.state?.query?.q === this.value;
+
+            if (hasSameConfig && hasSameQuery) {
+                this.preloadedState = json?.state;
+            } else {
+                window.sessionStorage.removeItem(SESSION_KEY);
+            }
+        } catch (e) {
+            console.error(e);
+            window.sessionStorage.removeItem(SESSION_KEY);
+        }
+    }
+
+    private initializeCoveo = () => {
+        try {
+            this.engine = buildSearchEngine({
+                organizationId: this.coveoOrganizationId,
+                publicAccessToken: this.coveoPublicAccessToken,
+                searchHub: this.coveoSearchHub,
+                preloadedState: this.preloadedState
+            });
+        } catch (ex) {
+            console.error(`Coveo engine failed to initialize (${ex})`);
+        }
+
+        if (!this.engine) {
+            console.error("Coveo engine failed to initialize!");
+            return;
+        }
+
+        if (this.preloadedState) {
+            const actions = loadQueryActions(this.engine);
+            this.engine.dispatch(actions.updateQuery({ q: this.value || "" }));
+        }
+
+        this.resultList = buildResultList(this.engine, {
+            options: { fieldsToInclude: ["sfhtml_url__c"] }
+        });
+
+        this.resultsPerPage = buildResultsPerPage(this.engine, {
+            initialState: {
+                numberOfResults: DEFAULT_RESULT_COUNT
+            }
+        });
+
+        this.searchBox = buildSearchBox(this.engine, {
+            options: { numberOfSuggestions: 3 }
+        });
+
+        this.setAdvancedFilters(this.engine);
+
+        this.unsubscribeFromResultList = this.resultList?.subscribe(
+            this.onResultListChange
+        );
+
+        if (this.value) {
+            this.dispatchHighlightedTermChange();
+        }
+
+        if (!this.preloadedState) {
+            if (this.value) {
+                this.submitSearch();
+            } else {
+                this.dispatchOnLoading(false);
+            }
+        }
+
+        this.syncAnalytics();
+    };
+
+    private syncAnalytics = () => {
+        const storedResult = window.localStorage.getItem(
+            RESULT_CLICK_LOCAL_STORAGE_KEY
+        );
+        if (storedResult) {
+            const interactiveResult = buildInteractiveResult(this.engine!, {
+                options: { result: JSON.parse(storedResult) }
+            });
+            interactiveResult.cancelPendingSelect();
+            interactiveResult.select();
+            window.localStorage.removeItem(RESULT_CLICK_LOCAL_STORAGE_KEY);
+        }
+    };
+
+    private onResultListChange = () => {
+        if (!this.resultList) {
+            return;
+        }
+
+        const { isLoading, firstSearchExecuted, results } =
+            this.resultList.state;
+
+        if ((!firstSearchExecuted && !isLoading) || !this.value) {
+            // coveo search is firing off some unwanted payloads on startup
+            return;
+        }
+
+        if (!isLoading) {
+            this.dispatchOnChangeEvent(results);
+        }
+
+        if (!this.fetchingMoreResults) {
+            this.dispatchOnLoading(isLoading);
+        }
+
+        if (!isLoading && this.fetchingMoreResults) {
+            this.fetchingMoreResults = false;
+        }
+    };
+
+    private setAdvancedFilters(engine: SearchEngine) {
+        const aq = Object.entries(this.coveoAdvancedQueryConfig).reduce(
+            (result, [key, value]) =>
+                `${result}(@${key}=="${normalizeCoveoAdvancedQueryValue(
+                    value
+                )}")`,
+            ""
+        );
+
+        const registerSearchQueryAction = loadAdvancedSearchQueryActions(
+            engine
+        ).registerAdvancedSearchQueries({
+            aq: aq
+        });
+
+        engine.dispatch(registerSearchQueryAction);
+    }
+
+    private normalizeCoveoResult = (result: Result): SidebarSearchResult => {
+        const {
+            clickUri,
+            excerpt,
+            excerptHighlights,
+            raw: { sfhtml_url__c },
+            title,
+            titleHighlights,
+            uniqueId
+        } = result;
+
+        // discussion about this normalization here: https://salesforce-internal.slack.com/archives/C020S6784JX/p1639506238376600
+
+        let pathname, queryParam;
+        if (sfhtml_url__c) {
+            pathname = `/docs/${sfhtml_url__c}`;
+        } else {
+            const isNestedGuide = clickUri.includes("/guide/");
+            const url = new URL(clickUri);
+            const extension =
+                isNestedGuide && !url.pathname?.endsWith(".html")
+                    ? ".html"
+                    : "";
+            pathname = `${url.pathname}${extension}`;
+            queryParam = url.search;
+        }
+
+        let href;
+        let isSelected = false;
+        const isReferenceUrl = clickUri.includes("/references/");
+        if (isReferenceUrl) {
+            if (queryParam) {
+                href = `${pathname}${queryParam}&q=${this.value}`;
+            } else {
+                href = `${pathname}?q=${this.value}`;
+            }
+
+            //NOTE: This is specific to references related comparison
+            const resultHrefWithMetaQuery = `${pathname}${queryParam}`;
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const metaQueryParam = urlParams.get("meta");
+
+            let currentUrlPathWithQuery = window.location.pathname;
+            if (metaQueryParam) {
+                currentUrlPathWithQuery = `${currentUrlPathWithQuery}?meta=${metaQueryParam}`;
+            }
+
+            isSelected = resultHrefWithMetaQuery === currentUrlPathWithQuery;
+        } else {
+            href = `${pathname}?q=${this.value}`;
+            isSelected = pathname === window.location.pathname;
+        }
+
         return {
-            title: item.title ?? "",
-            titleHighlights: [],
-            excerpt: item.matchedText ?? "",
-            excerptHighlights: [],
-            uniqueId: href || `result-${index}`,
+            title,
+            titleHighlights,
+            excerpt,
+            excerptHighlights,
+            uniqueId,
             href,
             selected: isSelected,
-            select: () => {}
+            select: () =>
+                window.localStorage.setItem(
+                    RESULT_CLICK_LOCAL_STORAGE_KEY,
+                    JSON.stringify(result)
+                )
         };
     };
 
-    private async fetchDataCloudSearch(): Promise<void> {
-        try {
-            const rawResults = await fetchSearch(this.value.trim());
-            const results: SidebarSearchResult[] = rawResults.map(
-                this.normalizeDataCloudResult
-            );
-            this.dispatchChange(results);
-        } catch (err) {
-            console.error("Data Cloud Search request failed", err);
-            this.dispatchChange([]);
-        } finally {
-            this.dispatchOnLoading(false);
-        }
+    private updateSessionStorage() {
+        window.sessionStorage.setItem(
+            SESSION_KEY,
+            JSON.stringify({
+                coveoAdvancedQueryConfig: this.coveoAdvancedQueryConfig,
+                state: this.engine?.state
+            })
+        );
     }
 
-    private dispatchChange(results: SidebarSearchResult[]) {
+    private dispatchOnChangeEvent(results: Result[]) {
+        this.updateSessionStorage();
         this.dispatchEvent(
             new CustomEvent("change", {
-                detail: { results, value: this.value }
+                detail: {
+                    results: results.map(this.normalizeCoveoResult),
+                    value: this.value
+                }
             })
         );
     }
@@ -153,12 +427,19 @@ export default class SidebarSearch extends LightningElement {
     }
 
     private submitSearch = debounce((isSyncingSearchValue = false) => {
-        UserRecentSearches.add(this.value);
-        this.updateRecentSearches();
-        if (!isSyncingSearchValue) {
-            this.dispatchSidebarSearchChange(this.value);
+        if (this.searchBox) {
+            UserRecentSearches.add(this.value);
+            this.updateRecentSearches();
+
+            // When `isSyncingSearchValue` is true, we are submitting in a case
+            // where the search box is already synced correctly.
+            if (!isSyncingSearchValue) {
+                this.dispatchSidebarSearchChange(this.value);
+            }
+
+            this.searchBox.updateText(this.value || "");
+            this.searchBox.submit();
         }
-        this.fetchDataCloudSearch();
     }, SEARCH_DEBOUNCE_DELAY);
 
     private onClickRecentSearch(e: CustomEvent) {
@@ -180,6 +461,7 @@ export default class SidebarSearch extends LightningElement {
 
     private onInputChange(e: CustomEvent) {
         this.value = e.detail;
+
         this.handleValueChange(false);
         this.dispatchHighlightedTermChange();
     }
@@ -195,10 +477,16 @@ export default class SidebarSearch extends LightningElement {
     private handleValueChange(isSyncingSearchValue = false) {
         if (this.value) {
             this.dispatchOnLoading(true);
-            this.submitSearch(isSyncingSearchValue);
+            if (this.searchBox) {
+                this.submitSearch(isSyncingSearchValue);
+            }
         } else {
+            // coveo's reaction to an empty value triggers a return of results
+            // bootlegging our own ux here`
             this.dispatchOnLoading(false);
-            this.dispatchChange([]);
+            this.dispatchOnChangeEvent([]);
+            // Empty search values are not submitted for search, so we need to manually
+            // trigger a search change on our own here
             this.dispatchSidebarSearchChange(this.value);
         }
     }

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

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { HighlightedSections } from "typings/custom";
+import { CoveoHighlights } from "typings/custom";
 
-const toChunks = (value: string, highlights: HighlightedSections) => {
+const toChunks = (value: string, highlights: CoveoHighlights) => {
     if (!highlights || highlights.length < 1) {
         return [
             {
@@ -51,11 +51,11 @@ const toChunks = (value: string, highlights: HighlightedSections) => {
 
 export default class SidebarSearchResult extends LightningElement {
     @api description!: string;
-    @api descriptionHighlights!: HighlightedSections;
+    @api descriptionHighlights!: CoveoHighlights;
     @api href!: string;
     @api selected!: boolean;
     @api header!: string;
-    @api titleHighlights!: HighlightedSections;
+    @api titleHighlights!: CoveoHighlights;
     @api select!: Function;
 
     private get titleChunks() {

package/src/modules/dxUtils/shiki/shiki.ts

@@ -1,17 +1,14 @@
 import type { BundledLanguage, BundledTheme, HighlighterCore } from "shiki";
+import * as shiki from "shiki";
+import { transformerColorizedBrackets } from "@shikijs/colorized-brackets";
 import { getCustomLanguageGrammars } from "dxUtils/shikiGrammars";
 
-let shikiModulePromise: Promise<typeof import("shiki")> | null = null;
-let bracketsModulePromise: Promise<
-    typeof import("@shikijs/colorized-brackets")
-> | null = null;
-
 async function getShiki() {
-    return (shikiModulePromise ??= import("shiki"));
+    return shiki;
 }
 
 async function getBrackets() {
-    return (bracketsModulePromise ??= import("@shikijs/colorized-brackets"));
+    return { transformerColorizedBrackets };
 }
 
 interface ShikiSingleton {
@@ -101,7 +98,7 @@ const OPTIONAL_LANGUAGES: Record<string, any> = {
     agentscript: getCustomLanguageGrammars().agentscript
 };
 
-// Initialize Shiki highlighter (lazy-load module and keep initial set minimal)
+// Initialize Shiki highlighter
 async function initializeShiki(): Promise<HighlighterCore> {
     if (shikiInstance.highlighter) {
         return shikiInstance.highlighter;
@@ -113,8 +110,8 @@ async function initializeShiki(): Promise<HighlighterCore> {
 
     // Assign promise IMMEDIATELY before any async work to prevent race conditions
     shikiInstance.initPromise = (async () => {
-        const shiki = await getShiki();
-        const highlighter = await shiki.createHighlighter({
+        const shikiModule = await getShiki();
+        const highlighter = await shikiModule.createHighlighter({
             themes: ["light-plus", "material-theme-darker"],
             langs: CORE_LANGUAGES
         });
@@ -182,12 +179,12 @@ export async function highlightCode(
             mappedLanguage = "text" as BundledLanguage;
         }
 
-        const { transformerColorizedBrackets } = await getBrackets();
+        const { transformerColorizedBrackets: transformer } = await getBrackets();
 
         return highlighter.codeToHtml(code, {
             lang: mappedLanguage,
             theme: THEME_MAP[theme],
-            transformers: [transformerColorizedBrackets()],
+            transformers: [transformer()],
             colorReplacements:
                 THEME_MAP_COLOR_REPLACEMENTS[theme].colorReplacements
         });