@salesforcedevs/dx-components 1.31.0 → 1.32.0-alpha.1

package/src/modules/dx/sidebar/sidebar.css

@@ -13,6 +13,7 @@ dx-empty-state {
     display: none;
 }
 
+/* Scrollable list: when content overflows, last visible item is cut by container to indicate more items (per spec). */
 .sidebar-content {
     overflow-y: auto;
     padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xl);

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

@@ -48,10 +48,6 @@
                 <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>
@@ -69,7 +65,7 @@
             <img
                 lwc:if={isSearchLoading}
                 class="loading-skeleton padding-horizontal"
-                src="https://developer.salesforce.com/ns-assets/sidebar-loading.svg"
+                src="https://a.sfdcstatic.com/developer-website/prod/images/sidebar-loading.svg"
                 alt="loading"
             />
             <template

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 (getSidebarSearchParams()) {
+        if (getSearchQueryParam()) {
             this.isSearchLoading = true;
             this.scrollToSelectedSearchResult = true;
         }
@@ -175,7 +175,7 @@ export default class Sidebar extends SidebarBase {
         this.isSearchLoading = e.detail;
     }
 
-    private onSidebarSearchContentScroll(scrollEvent) {
+    private onSidebarSearchContentScroll(scrollEvent: Event) {
         if (this.isSearchLoading) {
             return;
         }

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

@@ -1,75 +1,70 @@
 import { LightningElement, api } from "lwc";
 import debounce from "debounce";
 import {
-    Result,
-    ResultList,
-    Unsubscribe,
-    ResultsPerPage,
-    SearchBox,
-    buildInteractiveResult,
-    buildResultList,
-    buildResultsPerPage,
-    buildSearchBox,
-    loadAdvancedSearchQueryActions,
-    SearchEngine,
-    SearchAppState,
-    loadQueryActions
-} from "@coveo/headless";
-import { buildSearchEngine, getSidebarSearchParams } from "dxUtils/coveo";
+    type Data360SearchCacheItem,
+    type Data360SearchResultItem,
+    fetchSearch,
+    getBaseUrlPath,
+    getStoredSearch,
+    isCacheStale,
+    setStoredSearch
+} from "dxUtils/data360Search";
+import { createSearchRegExp } from "dxUtils/regexps";
 import { RecentSearches } from "dxUtils/recentSearches";
-import { toJson } from "dxUtils/normalizers";
 import {
+    type HighlightedSections,
     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();
+/**
+ * Find all matches of the search query in text and return ranges for highlighting.
+ * Uses the same regex as the full-doc highlighter (createSearchRegExp) so sidebar
+ * and doc highlight the same phrases (including spaces between words).
+ */
+function getHighlightRanges(
+    text: string,
+    searchQuery: string
+): HighlightedSections {
+    if (!text || !searchQuery.trim()) {
+        return [];
+    }
+    const re = createSearchRegExp(searchQuery.trim());
+    const ranges: HighlightedSections = [];
+    let match: RegExpExecArray | null;
+    while ((match = re.exec(text)) !== null) {
+        ranges.push({ offset: match.index, length: match[0].length });
+    }
+    return ranges;
+}
 
-const normalizeCoveoAdvancedQueryValue = (version: string): string =>
-    version?.split(".").join("\\.");
+const UserRecentSearches = new RecentSearches();
 
-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;
+function resultPathFromHref(href: string): string {
+    return href.startsWith("http") ? new URL(href).pathname : href;
+}
 
-        if (hasChanged && this.engine && this.value !== "") {
-            this.dispatchOnLoading(true);
-        }
+function applySelectedAndSelect(
+    items: Data360SearchCacheItem[]
+): SidebarSearchResult[] {
+    const currentPath = window.location.pathname;
+    return items.map((item) => ({
+        ...item,
+        selected: !!item.href && resultPathFromHref(item.href) === currentPath,
+        select: () => {}
+    }));
+}
 
-        if (hasChanged && this.engine) {
-            // set advanced filters needs access to the latest coveoAdvancedQueryConfig
-            this.setAdvancedFilters(this.engine);
-            this.submitSearch(true);
-        }
-    }
+const getSearchQueryParam = (): string =>
+    new URLSearchParams(window.location.search).get("q") ?? "";
 
+export default class SidebarSearch extends LightningElement {
     @api
     public fetchMoreResults() {
-        if (this.resultList?.state?.moreResultsAvailable) {
-            this.fetchingMoreResults = true;
-            this.resultList.fetchMoreResults();
-        }
+        // Data 360 Search API does not expose pagination in the same way; no-op
     }
 
     @api
@@ -85,313 +80,128 @@ export default class SidebarSearch extends LightningElement {
         this.dropdownRequestedOpen = value;
     }
 
-    private _coveoAdvancedQueryConfig!: { [key: string]: any };
     private dropdownRequestedOpen: boolean = false;
     private recentSearches: Option[] = [];
-    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 value: string = "";
     private didRender = 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 data360SearchInitialized: boolean = false;
 
     private get isDropdownOpen() {
         return (
             this.dropdownRequestedOpen &&
-            this.recentSearches &&
-            this.recentSearches.length > 0 &&
+            this.recentSearches?.length > 0 &&
             !this.value
         );
     }
 
     constructor() {
         super();
-
         this.updateRecentSearches();
-        this.value = getSidebarSearchParams() || "";
-    }
-
-    disconnectedCallback() {
-        this.unsubscribeFromResultList();
+        this.value = getSearchQueryParam();
     }
 
     renderedCallback() {
-        // 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
-                }
-            );
-        }
-
-        // 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 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.data360SearchInitialized) {
+            this.data360SearchInitialized = true;
             if (this.value) {
-                this.submitSearch();
+                const baseUrlPath = getBaseUrlPath();
+                const cached = getStoredSearch(baseUrlPath);
+                const queryTrimmed = this.value.trim();
+                if (
+                    cached?.query === queryTrimmed &&
+                    Array.isArray(cached.results) &&
+                    !isCacheStale(cached)
+                ) {
+                    if (!this.didRender) {
+                        this.dispatchHighlightedTermChange();
+                    }
+                    const results = applySelectedAndSelect(cached.results);
+                    this.dispatchChange(results);
+                    this.dispatchOnLoading(false);
+                } else {
+                    if (!this.didRender) {
+                        this.dispatchHighlightedTermChange();
+                    }
+                    this.dispatchOnLoading(true);
+                    this.fetchDataCloudSearch();
+                }
             } else {
+                // No URL query: restore search bar and results from localStorage for this path
+                const baseUrlPath = getBaseUrlPath();
+                const cached = getStoredSearch(baseUrlPath);
+                if (cached?.query && !isCacheStale(cached)) {
+                    this.value = cached.query;
+                    const results = applySelectedAndSelect(
+                        cached.results ?? []
+                    );
+                    this.dispatchChange(results);
+                    this.dispatchHighlightedTermChange();
+                }
                 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;
+        if (!this.didRender && this.value) {
+            this.dispatchHighlightedTermChange();
         }
-    };
-
-    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);
+        this.didRender = true;
     }
 
-    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;
-        }
-
+    private normalizeDataCloudResult = (
+        item: Data360SearchResultItem,
+        index: number
+    ): SidebarSearchResult => {
+        const href = item.url ?? "";
+        const resultPath = href.startsWith("http")
+            ? new URL(href).pathname
+            : href;
+        const isSelected =
+            !!resultPath && resultPath === window.location.pathname;
+        const title = item.title ?? "";
+        const excerpt = item.matchedText ?? "";
+        const searchQuery = this.value.trim();
         return {
             title,
-            titleHighlights,
+            titleHighlights: getHighlightRanges(title, searchQuery),
             excerpt,
-            excerptHighlights,
-            uniqueId,
+            excerptHighlights: getHighlightRanges(excerpt, searchQuery),
+            uniqueId: href || `result-${index}`,
             href,
             selected: isSelected,
-            select: () =>
-                window.localStorage.setItem(
-                    RESULT_CLICK_LOCAL_STORAGE_KEY,
-                    JSON.stringify(result)
-                )
+            select: () => {}
         };
     };
 
-    private updateSessionStorage() {
-        window.sessionStorage.setItem(
-            SESSION_KEY,
-            JSON.stringify({
-                coveoAdvancedQueryConfig: this.coveoAdvancedQueryConfig,
-                state: this.engine?.state
-            })
-        );
+    private async fetchDataCloudSearch(): Promise<void> {
+        try {
+            const rawResults = await fetchSearch(this.value.trim());
+            const results: SidebarSearchResult[] = rawResults.map(
+                this.normalizeDataCloudResult
+            );
+            this.dispatchChange(results);
+            const cacheItems: Data360SearchCacheItem[] = results.map((r) => ({
+                title: r.title,
+                titleHighlights: r.titleHighlights,
+                excerpt: r.excerpt,
+                excerptHighlights: r.excerptHighlights,
+                uniqueId: r.uniqueId,
+                href: r.href
+            }));
+            setStoredSearch(getBaseUrlPath(), {
+                query: this.value.trim(),
+                results: cacheItems
+            });
+        } catch (err) {
+            console.error("Data 360 Search request failed", err);
+            this.dispatchChange([]);
+        } finally {
+            this.dispatchOnLoading(false);
+        }
     }
 
-    private dispatchOnChangeEvent(results: Result[]) {
-        this.updateSessionStorage();
+    private dispatchChange(results: SidebarSearchResult[]) {
         this.dispatchEvent(
             new CustomEvent("change", {
-                detail: {
-                    results: results.map(this.normalizeCoveoResult),
-                    value: this.value
-                }
+                detail: { results, value: this.value }
             })
         );
     }
@@ -427,24 +237,18 @@ export default class SidebarSearch extends LightningElement {
     }
 
     private submitSearch = debounce((isSyncingSearchValue = false) => {
-        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();
+        UserRecentSearches.add(this.value);
+        this.updateRecentSearches();
+        if (!isSyncingSearchValue) {
+            this.dispatchSidebarSearchChange(this.value);
         }
+        this.fetchDataCloudSearch();
     }, SEARCH_DEBOUNCE_DELAY);
 
     private onClickRecentSearch(e: CustomEvent) {
         this.value = e.detail;
         this.dispatchSidebarSearchChange(this.value);
+        this.dispatchOnLoading(true);
         this.submitSearch(true);
     }
 
@@ -461,7 +265,6 @@ export default class SidebarSearch extends LightningElement {
 
     private onInputChange(e: CustomEvent) {
         this.value = e.detail;
-
         this.handleValueChange(false);
         this.dispatchHighlightedTermChange();
     }
@@ -477,17 +280,12 @@ export default class SidebarSearch extends LightningElement {
     private handleValueChange(isSyncingSearchValue = false) {
         if (this.value) {
             this.dispatchOnLoading(true);
-            if (this.searchBox) {
-                this.submitSearch(isSyncingSearchValue);
-            }
+            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.dispatchOnChangeEvent([]);
-            // Empty search values are not submitted for search, so we need to manually
-            // trigger a search change on our own here
+            this.dispatchChange([]);
             this.dispatchSidebarSearchChange(this.value);
+            setStoredSearch(getBaseUrlPath(), { query: "", results: [] });
         }
     }
 }