@salesforcedevs/dx-components 1.41.0 → 1.42.0

package/src/modules/dx/searchResults/searchResults.ts

@@ -1,526 +1,253 @@
 import { LightningElement, api, track } from "lwc";
-import type * as CoveoSDK from "coveo-search-ui";
-import { DateTime } from "luxon";
+import debounce from "debounce";
 import { track as trackGTM } from "dxUtils/analytics";
 import {
-    CONTENT_TYPE_LABELS,
-    CONTENT_TYPE_ICONS
-} from "dxConstants/contentTypes";
-import { getContentTypeColorVariables } from "dxUtils/contentTypes";
-import { pollUntil } from "dxUtils/async";
-import resultsTemplate from "./resultsTemplate";
-
-// Max height for breadcrumb without wrapping
-const MAX_BREADCRUMB_HEIGHT = 16;
-
-interface CoveoSearch {
-    state: typeof CoveoSDK.state;
-    get: typeof CoveoSDK.get;
-    $$: typeof CoveoSDK.$$;
-    InitializationEvents: typeof CoveoSDK.InitializationEvents;
-    QueryEvents: typeof CoveoSDK.QueryEvents;
-    SearchEndpoint: typeof CoveoSDK.SearchEndpoint;
-    TemplateCache: typeof CoveoSDK.TemplateCache;
-    UnderscoreTemplate: typeof CoveoSDK.UnderscoreTemplate;
-    init: typeof CoveoSDK.init;
-    IQuerySuccessEventArgs: CoveoSDK.IQuerySuccessEventArgs;
-    TemplateHelpers: any;
+    type OpenSearchResultItem,
+    fetchSearch,
+    resultHref,
+    getQueryFromUrl
+} from "dxUtils/openSearch";
+
+const SEARCH_DEBOUNCE_DELAY = 400;
+
+/** Normalized result for template (with href, uniqueId, openInNewTab) */
+interface SearchResultDisplay {
+    title: string;
+    href: string;
+    matchedText: string;
+    uniqueId: string;
+    resultIndex: number;
+    openInNewTab: string | undefined;
+    rel: string | undefined;
 }
 
-declare const Coveo: CoveoSearch;
-
-function getPaginationState(event: CoveoSDK.IQuerySuccessEventArgs): {
-    numberOfPages: number;
-    currentPage: number;
-} {
-    const pageSize = event.query.numberOfResults!;
-    const totalResults = event.results.totalCount!;
-    const numberOfPages = Math.ceil(totalResults / pageSize);
-
-    const currentPage = event.query.firstResult! / pageSize + 1;
-
-    return { numberOfPages, currentPage };
-}
-
-const isInternalDomain = (domain: string) =>
-    domain === "developer.salesforce.com" ||
-    domain === "developer-website-s.herokuapp.com";
-
-const isTrailheadDomain = (domain: string) =>
-    domain === "trailhead.salesforce.com" ||
-    domain === "dev.trailhead.salesforce.com";
-
-const buildTemplateHelperBadge = (value: keyof typeof CONTENT_TYPE_LABELS) => {
-    const style = getContentTypeColorVariables(value);
-    const label = CONTENT_TYPE_LABELS[value];
-    const { iconSprite, iconSymbol } = CONTENT_TYPE_ICONS[value];
-    return `
-            <div style="${style}" class="dx-badge">
-                <svg
-                    aria-hidden="true"
-                    style="display: inline; margin-bottom: 1px; fill: var(--color); height: var(--dx-g-icon-size-xs); width: var(--dx-g-icon-size-xs);"
-                    xmlns="http://www.w3.org/2000/svg"
-                    part="svg"
-                >
-                    <use xlink:href="/assets/icons/${iconSprite}-sprite/svg/symbols.svg#${iconSymbol}"></use>
-                </svg>
-                <span>${label}</span>
-            </div>
-        `;
-};
-
-const processParts = (parts: string[], internalFlag = false) => {
-    // filter /docs/ breadcrumb item from internal domains
-    const filterFn = internalFlag
-        ? (part: string) => part !== "docs"
-        : (part: string) => part;
-
-    return parts.filter(filterFn).map((part) => {
-        // Remove special characters & .htm/.xml extension
-        part = part
-            .replace(/_/g, "")
-            .replace(/-/g, "")
-            .replace(/.html*/g, "")
-            .replace(/.xml/g, "")
-            .replace(/b2c/g, "B2C");
-
-        // Capitalize first letter of each word
-        part = part.replace(/\w\S*/g, (w) => {
-            return w.replace(/^\w/, (c) => c.toUpperCase());
-        });
-
-        return `<span class="breadcrumb-item">${decodeURI(part)}</span>`;
-    });
-};
-
-const buildTemplateHelperUriBreadcrumbs = (value: string) => {
-    const url = new URL(value);
-
-    // exclude youtube links from breadcrumbs
-    const hostnamePattern = /^((www\.)?(youtube\.com|youtu\.be))$/;
-
-    // we don't want to show atlas docs because the url structure is mad ugly
-    if (hostnamePattern.test(url.hostname) || url.pathname.includes("atlas.")) {
-        return "";
-    }
-
-    let parts = url.pathname.split("/").filter((part) => part !== "");
-
-    // Remove language prefix from trailhead URLs
-    if (isTrailheadDomain(url.hostname)) {
-        parts = parts
-            .slice(1)
-            .filter((part) => part !== "content" && part !== "learn");
-    }
-
-    const breadcrumbs = processParts(parts, isInternalDomain(url.hostname));
-
-    if (!isInternalDomain(url.hostname)) {
-        // Remove the first breadcrumb item if it's an internal domain (i.e drop developer.salesforce.com from developer.salesforce.com / B2C Commerce / Open Commerce API / Filtering)
-        breadcrumbs.unshift(
-            `<span class="breadcrumb-item">${url.hostname}</span>`
-        );
-
-        return `
-            <span class="breadcrumb">
-                ${breadcrumbs.join(" / ")}
-            </span>
-        `;
-    } else if (breadcrumbs.length === 1) {
-        // Hide breadcrumbs if there is only one breadcrumb item
-        return "";
-    }
-
-    // remove the last breadcrumb item (the search result title makes it redundant)
-    breadcrumbs.pop();
-
-    return `<span class="breadcrumb">/ ${breadcrumbs.join(" / ")} /</span>`;
-};
-
-const buildTemplateHelperCommunityBreadcrumbs = () => {
-    return `<span class="breadcrumb"><span class="breadcrumb-item">trailhead.salesforce.com</span> / <span class="breadcrumb-item">trailblazer-community</span> / <span class="breadcrumb-item">feed</span> / </span>`;
-};
-
-const buildTemplateHelperBreadcrumbs = (value: string) => {
-    const parts = value.split("/").filter((part) => part !== "");
-
-    // Don't show breadcrumbs if there's only one part
-    if (parts.length === 1) {
-        return "";
-    }
-
-    const breadcrumbs = processParts(parts);
-
-    // remove last breadcrumb item
-    breadcrumbs.pop();
-
-    return `
-            <span class="breadcrumb">/ ${breadcrumbs.join(" / ")} /</span>
-        `;
-};
-
-const buildTemplateHelperMetaBreadcrumbs = (value: string) => {
-    const parts = value.split("/").filter((part) => part !== "");
-
-    // Don't show breadcrumbs if there's only one part
-    if (parts.length === 1) {
-        return "";
-    }
-
-    const breadcrumbs = processParts(parts);
-
-    return `
-            <span class="breadcrumb">/ ${breadcrumbs.join(" / ")}</span>
-        `;
-};
-
-const buildTemplateHelperPostedDate = (value: string) => {
-    const time = DateTime.fromMillis(Number(value)).toLocaleString(
-        DateTime.DATE_MED
-    );
-
-    return `Posted on: ${time} - `;
-};
-
-const buildTemplateHelperReplies = (value: string) => {
-    const number = Number(value);
-
-    return `<strong>${value} ${number > 1 ? "Replies" : "Reply"}</strong>`;
-};
-
-const buildTemplateHelperLikes = (value: string) => {
-    const number = Number(value);
-
-    return `<strong>${value} ${number > 1 ? "Likes" : "Like"}</strong>`;
-};
-
-// @ts-ignore Dark Magic (TM) we are overriding the 'title' field with a custom getter. We should really stop doing this.
 export default class SearchResults extends LightningElement {
-    @api coveoOrganizationId!: string;
-    @api coveoPublicAccessToken!: string;
-    @api coveoSearchPipeline!: string;
-
-    private root: HTMLElement | null = null;
-    private isInitialized = false;
-
-    @track _query: string = "";
+    @track private _query = "";
+    @track private results: SearchResultDisplay[] = [];
+    @track private isLoading = false;
+    @track private hasSearched = false;
+    @track private didTrackThisSearch = false;
+    /** Bumped for every search and on clear; only the latest request may update state. */
+    private searchRequestId = 0;
 
     @api
     get searchQuery() {
         return this._query;
     }
     set searchQuery(q: string) {
-        this._query = q;
-        if (this.isInitialized && this._query !== "") {
-            this.updateSearchQuery();
+        const next = q ?? "";
+        if (next !== this._query) {
+            this._query = next;
+            this.syncUrlToQuery();
+            if (this._query.trim()) {
+                this.runSearch();
+            } else {
+                this.clearResults();
+            }
         }
     }
 
-    private totalResults: number | null = null;
-
-    private get title() {
-        return this.totalResults ? this.totalResults.toLocaleString() : "0";
+    private clearResults() {
+        this.searchRequestId++;
+        this.results = [];
+        this.hasSearched = false;
+        this.isLoading = false;
     }
 
-    private query: string = "";
-    private hasFilters: boolean = false;
-
-    private get hasQuery(): boolean {
-        return this.query !== "";
+    private get query(): string {
+        return this._query;
     }
 
-    private get coveoAnalyticsEndpoint() {
-        return `https://${this.coveoOrganizationId}.analytics.org.coveo.com/rest/ua`;
+    private get totalResults(): number {
+        return this.results?.length ?? 0;
     }
 
-    private updateSearchQuery() {
-        Coveo.state(this.root!, "q", this._query);
+    private get resultCountLabel(): string {
+        return this.totalResults.toLocaleString();
     }
 
-    private clearFilters() {
-        const BreadcrumbManager = Coveo.get(
-            this.root!.querySelector(".CoveoBreadcrumb") as HTMLElement
-        ) as any;
-        BreadcrumbManager.clearBreadcrumbs();
+    private get hasQuery(): boolean {
+        return this.query !== "";
     }
 
-    private currentPage: number = 25;
-    private totalPages: number = 1;
-
-    private originalBreadcrumbs: string[] = [];
-    private initialWindowWidth = window.innerWidth;
-
-    private goToPage(e: CustomEvent) {
-        const page = e.detail;
-        const Pager = Coveo.get(
-            this.root!.querySelector(".CoveoPager") as HTMLElement
-        ) as any;
-        Pager.setPage(page);
-        this.currentPage = page;
+    private get hasResults(): boolean {
+        return this.results.length > 0;
     }
 
-    private dismissFiltersOverlay = () => {
-        const overlay = this.root!.querySelector(
-            ".coveo-dropdown-background-active"
-        ) as HTMLElement | null;
-        overlay?.click();
-    };
-
-    private attachListeners(root: HTMLElement) {
-        Coveo.$$(root).on(
-            Coveo.InitializationEvents.afterInitialization,
-            () => {
-                const url = new URL(window.location.href);
-                const searchParams = url.searchParams;
-                const keywordsParam = searchParams.get("keywords");
-
-                // Accomodate for the global nav using 'keywords' param instead of 'q'
-                if (keywordsParam) {
-                    this._query = searchParams.get("keywords")!;
-                    searchParams.delete("keywords");
-                    window.history.replaceState(null, "", url.href);
-                }
+    private get showNoResults(): boolean {
+        return this.hasSearched && !this.isLoading && !this.hasResults;
+    }
 
-                if (this._query !== "") {
-                    Coveo.state(this.root!, "q", this.searchQuery);
-                }
-                if (Coveo.state(this.root!, "q") === "") {
-                    Coveo.state(this.root!, "sort", "date descending");
-                }
+    private syncUrlToQuery() {
+        const url = new URL(window.location.href);
+        if (this._query.trim()) {
+            url.searchParams.set("q", this._query.trim());
+        } else {
+            url.searchParams.delete("q");
+        }
+        const newHref = url.pathname + url.search + url.hash;
+        if (
+            window.location.pathname +
+                window.location.search +
+                window.location.hash !==
+            newHref
+        ) {
+            window.history.replaceState(null, "", newHref);
+        }
+    }
 
-                this.isInitialized = true;
+    private async doFetch() {
+        const requestId = ++this.searchRequestId;
+        const query = this._query.trim();
+        if (!query) {
+            this.results = [];
+            this.isLoading = false;
+            return;
+        }
+        this.isLoading = true;
+        this.hasSearched = true;
+        this.didTrackThisSearch = false;
+        try {
+            const raw = await fetchSearch(query);
+            if (requestId !== this.searchRequestId) {
+                return;
             }
-        );
-
-        Coveo.$$(root).on(Coveo.QueryEvents.querySuccess, (event: any) => {
-            const { currentPage, numberOfPages } = getPaginationState(
-                event.detail
+            this.results = raw.map(
+                (item: OpenSearchResultItem, index: number) =>
+                    this.normalizeResult(item, index)
             );
-            this.currentPage = currentPage;
-            this.totalPages = numberOfPages;
-            this.totalResults = event.detail.results.totalCount;
-
-            this.query = event.detail.query.q ?? "";
-            this.hasFilters = event.detail.query?.facets?.some((f: any) => {
-                return f.currentValues.some((cv: any) => {
-                    return cv.state === "selected";
-                });
-            });
-            // Note that this logic means that if someone clicks a search result before
-            // onetrust has loaded, and thus navigates away from the page, we will lose the tracking
-            if (document.readyState === "complete") {
-                this.trackSearchResults(event, this.query, this.totalResults);
-            } else {
-                const query = this.query;
-                const totalResults = this.totalResults;
-                window.addEventListener("load", () => {
-                    this.trackSearchResults(event, query, totalResults);
-                });
+            this.trackSearchResultsOnce(query, this.results.length);
+        } catch (err) {
+            if (requestId !== this.searchRequestId) {
+                return;
             }
+            console.error("OpenSearch Search request failed", err);
+            this.results = [];
+        }
+        if (requestId === this.searchRequestId) {
+            this.isLoading = false;
+        }
+    }
+
+    private runSearch = debounce(() => {
+        this.doFetch();
+    }, SEARCH_DEBOUNCE_DELAY);
+
+    private normalizeResult(
+        item: OpenSearchResultItem,
+        index: number
+    ): SearchResultDisplay {
+        const href = resultHref(item);
+        const isExternal =
+            href.startsWith("http") &&
+            !href.includes("developer.salesforce.com") &&
+            !href.includes("developer-website-s.herokuapp.com");
+        return {
+            title: item.title ?? "",
+            href,
+            matchedText: item.matchedText ?? "",
+            // Several hits can share a page URL, so the index keeps keys unique.
+            uniqueId: `${index}:${href}`,
+            resultIndex: index + 1,
+            openInNewTab: isExternal ? "_blank" : undefined,
+            rel: isExternal ? "noopener noreferrer" : undefined
+        };
+    }
+
+    private onSearchResultClick(e: MouseEvent) {
+        const anchor = e.currentTarget as HTMLAnchorElement;
+        const index = Number(anchor.dataset.index ?? "0");
+        const title = anchor.dataset.title ?? "";
+        const href = anchor.href ?? "";
+        trackGTM(anchor, "custEv_scopedSearchlinkClick", {
+            click_text: title,
+            click_url: href,
+            element_title: title,
+            element_type: "link",
+            content_category: "documentation",
+            search_term: this.query,
+            search_result_position: index
         });
+    }
 
-        Coveo.$$(root).on(Coveo.QueryEvents.deferredQuerySuccess, async () => {
-            // wait specified time to ensure breadcrumbs are rendered before processing them
-            await pollUntil(
+    private trackSearchResultsOnce(term: string, resultCount: number) {
+        if (this.didTrackThisSearch) {
+            return;
+        }
+        this.didTrackThisSearch = true;
+        if (document.readyState === "complete") {
+            trackGTM(this.template.host, "custEv_search", {
+                search_term: term,
+                search_category: "",
+                search_type: "site search",
+                search_result_count: resultCount
+            });
+        } else {
+            window.addEventListener(
+                "load",
                 () => {
-                    const coveoResults =
-                        this.root!.querySelector(".CoveoResult");
-
-                    return Boolean(coveoResults);
+                    trackGTM(this.template.host, "custEv_search", {
+                        search_term: term,
+                        search_category: "",
+                        search_type: "site search",
+                        search_result_count: resultCount
+                    });
                 },
-                20,
-                1000
+                { once: true }
             );
-
-            this.processBreadcrumbs(root);
-
-            window.onresize = () => this.processBreadcrumbs(root);
-        });
+        }
     }
 
-    // check if the breadcrumb is overflowing or not based on the height of a single character in the text element
-    private isTextWrapping = (element: HTMLElement) => {
-        return element.offsetHeight > MAX_BREADCRUMB_HEIGHT;
-    };
-
-    private truncateBreadcrumbText = (breadcrumbItems: HTMLElement[]) => {
-        breadcrumbItems.forEach((breadcrumbItem: HTMLElement) => {
-            const breadcrumbItemText = breadcrumbItem.textContent!;
-            if (breadcrumbItemText.length > 30) {
-                breadcrumbItem.textContent = `${breadcrumbItemText.substring(
-                    0,
-                    30
-                )}...`;
-            }
-        });
-    };
-
-    private addBreadcrumbEllipsis = (
-        breadcrumbItems: HTMLElement[],
-        breadcrumb: HTMLElement
-    ) => {
-        for (let i = 1; i < breadcrumbItems.length; i++) {
-            if (this.isTextWrapping(breadcrumb)) {
-                // if the previous element is an ellipsis, make it empty (in order to avoid multiple grouped ellipsis)
-                if (breadcrumbItems[i - 1]?.textContent === "...") {
-                    breadcrumbItems[i].innerHTML = "";
-                } else {
-                    breadcrumbItems[i].textContent = "...";
-                }
-            } else {
-                break; // Exit the loop if the breadcrumb is no longer overflowing
-            }
+    private onSearchInputChange(e: CustomEvent) {
+        const value = (e.detail as string) ?? "";
+        this._query = value;
+        this.syncUrlToQuery();
+        if (value.trim()) {
+            this.runSearch();
+        } else {
+            this.clearResults();
         }
+    }
 
-        // remove any empty breadcrumb items
-        breadcrumb.innerHTML = breadcrumb.innerHTML
-            .replace(
-                / ?\/ +<span class="breadcrumb-item"><\/span> +\/ ?/g,
-                " / "
-            )
-            // when first loading the page on mobile, the breadcrumb items are not grouped correctly
-            .replace(
-                `<span class="breadcrumb-item">...</span> / <span class="breadcrumb-item">...</span>`,
-                `<span class="breadcrumb-item">...</span>`
-            );
-    };
-
-    private formatBreadcrumbs = (breadcrumbs: HTMLElement[]) => {
-        breadcrumbs?.forEach((breadcrumb: HTMLElement) => {
-            // Get all breadcrumb items that are separated by '/'
-            const breadcrumbItems: any =
-                breadcrumb.querySelectorAll(".breadcrumb-item");
-
-            // Check if the breadcrumb is overflowing by comparing it's height to the height of the first breadcrumb item
-            if (this.isTextWrapping(breadcrumb)) {
-                // it is overflowing, so we need to truncate long titles to 30 characters
-                this.truncateBreadcrumbText(breadcrumbItems);
-
-                // Iteratively check if the breadcrumb is still overflowing and replace text with '...' starting from the second breadcrumb item
-                this.addBreadcrumbEllipsis(breadcrumbItems, breadcrumb);
-
-                // After processing all breadcrumb items, if it's still overflowing, hide the breadcrumb element
-                if (this.isTextWrapping(breadcrumb)) {
-                    breadcrumb.style.display = "none";
-                }
-            }
-        });
-    };
-
-    private restoreBreadcrumbs = (breadcrumbs: HTMLElement[]) => {
-        breadcrumbs.forEach((breadcrumb: HTMLElement, index: number) => {
-            // eslint-disable-next-line @lwc/lwc/no-inner-html
-            breadcrumb.innerHTML = this.originalBreadcrumbs[index];
-        });
-    };
-
-    private windowSizeIncreased = () =>
-        window.innerWidth > this.initialWindowWidth;
-
-    private processBreadcrumbs(root: HTMLElement) {
-        // Get all breadcrumbs from search results
-        const breadcrumbs = Array.from(
-            root.querySelectorAll(".breadcrumb")
-        ) as HTMLElement[];
-
-        if (this.originalBreadcrumbs.length === 0) {
-            this.originalBreadcrumbs = breadcrumbs.map(
-                (breadcrumb) => breadcrumb.innerHTML
-            );
+    private get statusMessage(): string {
+        if (this.isLoading) {
+            return "Loading search results";
         }
-
-        if (this.windowSizeIncreased()) {
-            /*
-                Reset the breadcrumbs to their original state and process them again.
-                The additional space means we can replace ellipsis with full text.
-            */
-            this.restoreBreadcrumbs(breadcrumbs);
+        if (this.showNoResults) {
+            return `No results found for ${this.query}`;
         }
-
-        this.formatBreadcrumbs(breadcrumbs);
+        if (this.hasSearched && this.hasResults) {
+            return `${this.resultCountLabel} results for ${this.query}`;
+        }
+        return "";
     }
 
-    private initializeCoveo() {
-        this.root = this.template.querySelector(".CoveoSearchInterface")!;
+    private hasRunInitialSearch = false;
 
-        const resultsList = this.template.querySelector(".CoveoResultList");
-
-        if (resultsList) {
-            // eslint-disable-next-line @lwc/lwc/no-inner-html
-            resultsList.innerHTML = resultsTemplate;
+    connectedCallback() {
+        const q = getQueryFromUrl();
+        if (q) {
+            this._query = q;
+            this.hasRunInitialSearch = true;
+            this.doFetch();
         }
-
-        Coveo.SearchEndpoint.configureCloudV2Endpoint(
-            this.coveoOrganizationId,
-            this.coveoPublicAccessToken,
-            `https://${this.coveoOrganizationId}.org.coveo.com/rest/search`
-        );
-
-        this.attachListeners(this.root);
-
-        Coveo.TemplateHelpers.registerTemplateHelper(
-            "badge",
-            buildTemplateHelperBadge
-        );
-
-        Coveo.TemplateHelpers.registerTemplateHelper(
-            "breadcrumbs",
-            buildTemplateHelperBreadcrumbs
-        );
-
-        Coveo.TemplateHelpers.registerTemplateHelper(
-            "metabreadcrumbs",
-            buildTemplateHelperMetaBreadcrumbs
-        );
-
-        Coveo.TemplateHelpers.registerTemplateHelper(
-            "uriBreadcrumbs",
-            buildTemplateHelperUriBreadcrumbs
-        );
-
-        Coveo.TemplateHelpers.registerTemplateHelper(
-            "communityBreadcrumbs",
-            buildTemplateHelperCommunityBreadcrumbs
-        );
-
-        Coveo.TemplateHelpers.registerTemplateHelper(
-            "postedDate",
-            buildTemplateHelperPostedDate
-        );
-
-        Coveo.TemplateHelpers.registerTemplateHelper(
-            "replies",
-            buildTemplateHelperReplies
-        );
-
-        Coveo.TemplateHelpers.registerTemplateHelper(
-            "likes",
-            buildTemplateHelperLikes
-        );
-
-        Coveo.init(this.root);
     }
 
     renderedCallback() {
-        if (!this.isInitialized) {
-            if (Object.prototype.hasOwnProperty.call(window, "Coveo")) {
-                this.initializeCoveo();
-            } else {
-                // eslint-disable-next-line @lwc/lwc/no-document-query
-                const script = document.querySelector("script.coveo-script");
-                script?.addEventListener("load", () => {
-                    this.initializeCoveo();
-                });
-            }
+        // Run search on first render if URL has q and we haven't yet (handles #q=, SPA nav, or late URL)
+        if (this.hasRunInitialSearch) {
+            return;
+        }
+        const q = getQueryFromUrl();
+        if (!q) {
+            return;
+        }
+        this.hasRunInitialSearch = true;
+        if (this._query !== q) {
+            this._query = q;
+        }
+        if (!this.hasSearched && !this.isLoading) {
+            this.doFetch();
         }
-    }
-
-    private trackSearchResults(event: Event, term: string, resultCount: any) {
-        trackGTM(event.target!, "custEv_search", {
-            search_term: term,
-            search_category: "",
-            search_type: "site search",
-            search_result_count: resultCount
-        });
     }
 }