@salesforcedevs/dx-components 1.32.0-alpha.9 → 1.32.0

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

@@ -1,223 +1,526 @@
 import { LightningElement, api, track } from "lwc";
-import debounce from "debounce";
+import type * as CoveoSDK from "coveo-search-ui";
+import { DateTime } from "luxon";
 import { track as trackGTM } from "dxUtils/analytics";
 import {
-    type Data360SearchResultItem,
-    fetchSearch,
-    getQueryFromUrl
-} from "dxUtils/data360Search";
-
-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;
+    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;
+}
+
+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 {
-    @track private _query = "";
-    @track private results: SearchResultDisplay[] = [];
-    @track private isLoading = false;
-    @track private hasSearched = false;
-    @track private didTrackThisSearch = false;
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+    @api coveoSearchPipeline!: string;
+
+    private root: HTMLElement | null = null;
+    private isInitialized = false;
+
+    @track _query: string = "";
 
     @api
     get searchQuery() {
         return this._query;
     }
     set searchQuery(q: string) {
-        const next = q ?? "";
-        if (next !== this._query) {
-            this._query = next;
-            this.syncUrlToQuery();
-            if (this._query.trim()) {
-                this.runSearch();
-            } else {
-                this.results = [];
-                this.hasSearched = false;
-            }
+        this._query = q;
+        if (this.isInitialized && this._query !== "") {
+            this.updateSearchQuery();
         }
     }
 
-    private get query(): string {
-        return this._query;
-    }
+    private totalResults: number | null = null;
 
-    private get totalResults(): number {
-        return this.results?.length ?? 0;
+    private get title() {
+        return this.totalResults ? this.totalResults.toLocaleString() : "0";
     }
 
-    private get resultCountLabel(): string {
-        return this.totalResults.toLocaleString();
-    }
+    private query: string = "";
+    private hasFilters: boolean = false;
 
     private get hasQuery(): boolean {
         return this.query !== "";
     }
 
-    private get hasResults(): boolean {
-        return this.results.length > 0;
+    private get coveoAnalyticsEndpoint() {
+        return `https://${this.coveoOrganizationId}.analytics.org.coveo.com/rest/ua`;
     }
 
-    private get showNoResults(): boolean {
-        return this.hasSearched && !this.isLoading && !this.hasResults;
+    private updateSearchQuery() {
+        Coveo.state(this.root!, "q", this._query);
     }
 
-    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);
-        }
+    private clearFilters() {
+        const BreadcrumbManager = Coveo.get(
+            this.root!.querySelector(".CoveoBreadcrumb") as HTMLElement
+        ) as any;
+        BreadcrumbManager.clearBreadcrumbs();
     }
 
-    private async doFetch() {
-        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);
-            this.results = raw.map(
-                (item: Data360SearchResultItem, index: number) =>
-                    this.normalizeResult(item, index)
-            );
-            this.trackSearchResultsOnce(query, this.results.length);
-        } catch (err) {
-            console.error("Data 360 Search request failed", err);
-            this.results = [];
-        } finally {
-            this.isLoading = false;
-        }
-    }
+    private currentPage: number = 25;
+    private totalPages: number = 1;
 
-    private runSearch = debounce(() => {
-        this.doFetch();
-    }, SEARCH_DEBOUNCE_DELAY);
-
-    private normalizeResult(
-        item: Data360SearchResultItem,
-        index: number
-    ): SearchResultDisplay {
-        const href = item.url ?? "";
-        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 ?? "",
-            uniqueId: href || `result-${index}`,
-            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
-        });
+    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 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
+    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);
+                }
+
+                if (this._query !== "") {
+                    Coveo.state(this.root!, "q", this.searchQuery);
+                }
+                if (Coveo.state(this.root!, "q") === "") {
+                    Coveo.state(this.root!, "sort", "date descending");
+                }
+
+                this.isInitialized = true;
+            }
+        );
+
+        Coveo.$$(root).on(Coveo.QueryEvents.querySuccess, (event: any) => {
+            const { currentPage, numberOfPages } = getPaginationState(
+                event.detail
+            );
+            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";
+                });
             });
-        } else {
-            window.addEventListener(
-                "load",
+            // 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);
+                });
+            }
+        });
+
+        Coveo.$$(root).on(Coveo.QueryEvents.deferredQuerySuccess, async () => {
+            // wait specified time to ensure breadcrumbs are rendered before processing them
+            await pollUntil(
                 () => {
-                    trackGTM(this.template.host, "custEv_search", {
-                        search_term: term,
-                        search_category: "",
-                        search_type: "site search",
-                        search_result_count: resultCount
-                    });
+                    const coveoResults =
+                        this.root!.querySelector(".CoveoResult");
+
+                    return Boolean(coveoResults);
                 },
-                { once: true }
+                20,
+                1000
             );
-        }
+
+            this.processBreadcrumbs(root);
+
+            window.onresize = () => this.processBreadcrumbs(root);
+        });
     }
 
-    private onSearchInputChange(e: CustomEvent) {
-        const value = (e.detail as string) ?? "";
-        this._query = value;
-        this.syncUrlToQuery();
-        if (value.trim()) {
-            this.runSearch();
-        } else {
-            this.results = [];
-            this.hasSearched = false;
+    // 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
+            }
         }
+
+        // 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
+            );
+        }
+
+        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);
+        }
+
+        this.formatBreadcrumbs(breadcrumbs);
     }
 
-    private hasRunInitialSearch = false;
+    private initializeCoveo() {
+        this.root = this.template.querySelector(".CoveoSearchInterface")!;
 
-    connectedCallback() {
-        const q = getQueryFromUrl();
-        if (q) {
-            this._query = q;
-            this.hasRunInitialSearch = true;
-            this.doFetch();
+        const resultsList = this.template.querySelector(".CoveoResultList");
+
+        if (resultsList) {
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
+            resultsList.innerHTML = resultsTemplate;
         }
+
+        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() {
-        // 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();
+        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();
+                });
+            }
         }
     }
+
+    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
+        });
+    }
 }