@salesforcedevs/dx-components 0.10.1-alpha.13 → 0.10.1-alpha.133

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

@@ -0,0 +1,121 @@
+import { createElement } from "lwc";
+import SidebarSearch from "dx/sidebarSearch";
+import { createRenderComponent, renderLightningElement } from "utils/tests";
+import { coveoXMLDocsConfig } from "utils/coveo";
+import { mockQueryParameter, unmockQueryParameter } from "utils/jest";
+import mockPreloadedState from "./mockPreloadedState";
+import { SESSION_KEY } from "../sidebarSearch";
+
+const TAG = "dx-sidebar-search";
+const render = createRenderComponent(TAG, SidebarSearch);
+
+const PROPS = coveoXMLDocsConfig;
+const QUERY = "test";
+
+describe(TAG, () => {
+    afterEach(unmockQueryParameter);
+
+    it("renders with the correct initial empty query", () => {
+        const element = render(PROPS);
+
+        const input = element.shadowRoot.querySelector("dx-input");
+
+        expect(input.value).toEqual("");
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders with the correct initial query", () => {
+        mockQueryParameter(QUERY);
+
+        const element = render(PROPS);
+
+        const input = element.shadowRoot.querySelector("dx-input");
+
+        expect(input.value).toEqual(QUERY);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("correctly consumes a valid session storage object", () => {
+        mockQueryParameter(mockPreloadedState.query.q);
+
+        window.sessionStorage.setItem(
+            SESSION_KEY,
+            JSON.stringify(mockPreloadedState)
+        );
+
+        const mockOnChange = jest.fn();
+
+        const element = render(PROPS);
+        element.addEventListener("change", mockOnChange);
+
+        return Promise.resolve().then(() => {
+            expect(mockOnChange).toHaveBeenCalledTimes(1);
+
+            expect(element).toBeAccessible();
+        });
+    });
+
+    describe("highlighting", () => {
+        afterEach(unmockQueryParameter);
+
+        it("triggers on initial render when a search value exists", () => {
+            mockQueryParameter(QUERY);
+            const element = createElement(TAG, { is: SidebarSearch });
+            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
+            renderLightningElement(element, PROPS);
+            expect(dispatchEventSpy).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: "highlightedtermchange",
+                    detail: QUERY
+                })
+            );
+        });
+
+        it("does not trigger on initial render when a search value does not exist", () => {
+            const element = createElement(TAG, { is: SidebarSearch });
+            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
+            renderLightningElement(element, PROPS);
+            expect(dispatchEventSpy).not.toHaveBeenCalledWith(
+                expect.objectContaining({ type: "highlightedtermchange" })
+            );
+        });
+
+        it("triggers on input change with non-empty value", () => {
+            const element = render(PROPS);
+            const dxInput = element.shadowRoot.querySelector("dx-input");
+            const inputEl = dxInput.shadowRoot.querySelector("input");
+            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
+
+            inputEl.focus();
+            inputEl.value = QUERY;
+            inputEl.dispatchEvent(new KeyboardEvent("input"));
+
+            expect(dispatchEventSpy).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: "highlightedtermchange",
+                    detail: QUERY
+                })
+            );
+        });
+
+        it("triggers on input change with empty value", () => {
+            const element = render(PROPS);
+            const dxInput = element.shadowRoot.querySelector("dx-input");
+            const inputEl = dxInput.shadowRoot.querySelector("input");
+            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
+
+            inputEl.focus();
+            inputEl.value = "";
+            inputEl.dispatchEvent(new KeyboardEvent("input"));
+
+            expect(dispatchEventSpy).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: "highlightedtermchange",
+                    detail: ""
+                })
+            );
+        });
+    });
+});

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

@@ -1,207 +1,364 @@
 import { LightningElement, api } from "lwc";
 import debounce from "debounce";
-import { buildSearchEngine } from "utils/coveo";
-import { RecentSearches } from "utils/recentSearches";
 import {
     Result,
     ResultList,
+    ResultsPerPage,
     SearchBox,
-    SearchBoxOptions,
     buildResultList,
+    buildResultsPerPage,
     buildSearchBox,
     loadAdvancedSearchQueryActions,
-    SearchEngine
+    SearchEngine,
+    SearchAppState,
+    loadQueryActions
 } from "@coveo/headless";
+import { buildSearchEngine, getSidebarSearchParams } from "utils/coveo";
+import { RecentSearches } from "utils/recentSearches";
+import { toJson } from "utils/normalizers";
 import { Option, PopoverRequestCloseType } from "typings/custom";
 
+export const SESSION_KEY = "dx-sidebar-search-state";
+
+const DEFAULT_RESULT_COUNT = 20;
+const SEARCH_DEBOUNCE_DELAY = 780;
+
 const UserRecentSearches = new RecentSearches();
 
-const toSearchVersionString = (version: string): string =>
+const normalizeCoveoAdvancedQueryValue = (version: string): string =>
     version.split(".").join("\\.");
 
-const normalizeCoveoResult = ({
-    title,
-    titleHighlights,
-    excerpt,
-    excerptHighlights,
-    uniqueId,
-    raw: { sfhtml_url__c }
-}: Result) => ({
-    title,
-    titleHighlights,
-    excerpt,
-    excerptHighlights,
-    uniqueId,
-    href: `/docs/${sfhtml_url__c}`
-});
-
 export default class SidebarSearch extends LightningElement {
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
     @api coveoSearchHub!: string;
-    @api coveoObjectType!: string;
-    @api coveoLanguage!: string;
-    @api coveoRelease!: string;
-    @api coveoDeliverable!: string;
+    @api
+    get coveoAdvancedQueryConfig(): { [key: string]: any } {
+        return this._coveoAdvancedQueryConfig;
+    }
+    set coveoAdvancedQueryConfig(value) {
+        console.log('set coveoAdvancedQueryConfig', value.sfrelease__c, value.sflanguage)
+        this._coveoAdvancedQueryConfig = toJson(value);
+    }
 
+    @api
+    public fetchMoreResults() {
+        if (this.resultList?.state?.moreResultsAvailable) {
+            this.fetchingMoreResults = true;
+            this.resultList.fetchMoreResults();
+        }
+    }
+
+    @api
+    setInputValue(searchTerm: string) {
+        this.value = searchTerm || "";
+    }
+
+    private _coveoAdvancedQueryConfig!: object;
     private dropdownRequestedOpen: boolean = false;
     private recentSearches: Option[] = [];
     private resultList: ResultList | null = null;
+    private resultsPerPage: ResultsPerPage | null = null;
+    private preloadedState?: SearchAppState;
     private searchBox: SearchBox | null = null;
-    private value?: string = undefined;
+    private value?: string = "";
     private engine: SearchEngine | null = null;
+    private fetchingMoreResults: boolean = false;
+    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 get isDropdownOpen() {
         return (
             this.dropdownRequestedOpen &&
             this.recentSearches &&
             this.recentSearches.length > 0 &&
-            this.isValueEmpty
+            !this.value
         );
     }
 
-    private get isValueEmpty(): boolean {
-        return !this.value || this.value === "";
-    }
+    constructor() {
+        super();
 
-    connectedCallback() {
-        this.recentSearches = UserRecentSearches.get();
+        this.updateRecentSearches();
+        this.value = getSidebarSearchParams() || "";
     }
 
-    renderedCallback() {
-        const coveoConfigurations = [
-            this.coveoOrganizationId,
-            this.coveoPublicAccessToken,
-            this.coveoSearchHub,
-            this.coveoObjectType,
-            this.coveoLanguage,
-            this.coveoRelease,
-            this.coveoDeliverable
-        ];
+    queryConfigValue: string | null = null;
 
-        if (
-            coveoConfigurations.every((val) => !!val && typeof val === "string")
-        ) {
-            if (!this.engine) {
-                this.instantiateSearchbox();
-            }
-            this.setAdvancedFilters();
-        } else {
+    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) {
+            console.log("coveo config is good");
+            this.initializeUserSession();
+            this.initializeCoveo();
+        } else if (!this.hasCorrectCoveoConfig) {
             console.error(
-                "Incorrect coveo configuration provided. All coveo configuration attributes must be defined and a string.",
+                "Incorrect coveo search configuration provided. All coveo configuration attributes must be defined.",
                 {
                     coveoOrganizationId: this.coveoOrganizationId,
                     coveoPublicAccessToken: this.coveoPublicAccessToken,
                     coveoSearchHub: this.coveoSearchHub,
-                    coveoObjectType: this.coveoObjectType,
-                    coveoLanguage: this.coveoLanguage,
-                    coveoRelease: this.coveoRelease,
-                    coveoDeliverable: this.coveoDeliverable
+                    coveoAdvancedQueryConfig: this.coveoAdvancedQueryConfig
                 }
             );
         }
+
+        const queryConfigValue = JSON.stringify(this.coveoAdvancedQueryConfig);
+        console.log('query config value', queryConfigValue);
+        if (this.queryConfigValue !== queryConfigValue) {
+            if (this.queryConfigValue && this.engine) {
+                console.log('setting query config again')
+                this.setAdvancedFilters(this.engine);
+            }
+            this.queryConfigValue = queryConfigValue;
+        }
+
+        // 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 instantiateSearchbox() {
-        const options: SearchBoxOptions = {
-            numberOfSuggestions: 3
-        };
+    private initializeUserSession() {
+        const stringified = window.sessionStorage.getItem(SESSION_KEY);
+        if (!stringified) {
+            return;
+        }
 
-        this.engine = buildSearchEngine({
-            organizationId: this.coveoOrganizationId,
-            publicAccessToken: this.coveoPublicAccessToken,
-            searchHub: this.coveoSearchHub
-        });
+        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) {
+                console.log(
+                    "valid session storage found for value =",
+                    this.value
+                );
+                this.preloadedState = json?.state;
+            } else {
+                window.sessionStorage.removeItem(SESSION_KEY);
+            }
+        } catch (e) {
+            console.error(e);
+            window.sessionStorage.removeItem(SESSION_KEY);
+        }
+    }
 
-        if (this.engine) {
-            this.resultList = buildResultList(this.engine, {
-                options: { fieldsToInclude: ["sfhtml_url__c"] }
+    private initializeCoveo = () => {
+        try {
+            this.engine = buildSearchEngine({
+                organizationId: this.coveoOrganizationId,
+                publicAccessToken: this.coveoPublicAccessToken,
+                searchHub: this.coveoSearchHub,
+                preloadedState: this.preloadedState
             });
-            this.searchBox = buildSearchBox(this.engine, { options });
+        } catch (ex) {
+            console.error(`Coveo engine failed to initialize (${ex})`);
         }
 
-        this.resultList?.subscribe(() => {
-            if (!this.resultList) {
-                return;
-            }
+        if (!this.engine) {
+            console.error("Coveo engine failed to initialize!");
+            return;
+        }
 
-            const { isLoading, results } = this.resultList.state;
+        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"] }
+        });
 
-            if (!isLoading) {
-                this.dispatchOnChangeEvent(results);
+        this.resultsPerPage = buildResultsPerPage(this.engine, {
+            initialState: {
+                numberOfResults: DEFAULT_RESULT_COUNT
             }
+        });
 
-            this.dispatchOnLoading(isLoading);
+        this.searchBox = buildSearchBox(this.engine, {
+            options: { numberOfSuggestions: 3 }
         });
-    }
 
-    private setAdvancedFilters() {
-        if (!this.engine) {
+        this.setAdvancedFilters(this.engine);
+
+        this.resultList?.subscribe(this.onResultListChange);
+
+        if (this.value) {
+            this.dispatchHighlightedTermChange();
+        }
+
+        if (!this.preloadedState) {
+            if (this.value) {
+                this.submitSearch();
+            } else {
+                this.dispatchOnLoading(false);
+            }
+        }
+    };
+
+    private onResultListChange = () => {
+        if (!this.resultList) {
             return;
         }
 
-        const aqParts = {
-            objecttype: this.coveoObjectType,
-            sflanguage: this.coveoLanguage,
-            sfrelease__c: toSearchVersionString(this.coveoRelease),
-            sfdelivarable__c: this.coveoDeliverable
-        };
+        const { isLoading, firstSearchExecuted, results } =
+            this.resultList.state;
+
+        if ((!firstSearchExecuted && !isLoading) || !this.value) {
+            // coveo search is firing off some unwanted payloads on startup
+            console.log(
+                "returning in results list change",
+                this.value,
+                !firstSearchExecuted && !isLoading
+            );
+            return;
+        }
+
+        if (!isLoading) {
+            console.log("dispatching on change event");
+            this.dispatchOnChangeEvent(results);
+        }
+
+        if (!this.fetchingMoreResults) {
+            this.dispatchOnLoading(isLoading);
+        }
 
-        const aq = Object.entries(aqParts).reduce(
-            (result, [key, value]) => `${result}(@${key}==${value})`,
+        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 advancedSearchQueryActions = loadAdvancedSearchQueryActions(
-            this.engine
-        );
 
-        this.engine.dispatch(
-            advancedSearchQueryActions.registerAdvancedSearchQueries({
-                aq: aq
+        const registerSearchQueryAction = loadAdvancedSearchQueryActions(
+            engine
+        ).registerAdvancedSearchQueries({
+            aq: aq
+        });
+
+        engine.dispatch(registerSearchQueryAction);
+    }
+
+    private normalizeCoveoResult = ({
+        clickUri,
+        excerpt,
+        excerptHighlights,
+        raw: { sfhtml_url__c },
+        title,
+        titleHighlights,
+        uniqueId
+    }: Result) => {
+        const pathname = sfhtml_url__c
+            ? `/docs/${sfhtml_url__c}`
+            : `${new URL(clickUri).pathname}.html`;
+        const href = `${pathname}?q=${this.value}`;
+
+        return {
+            title,
+            titleHighlights,
+            excerpt,
+            excerptHighlights,
+            uniqueId,
+            href,
+            selected: pathname === window.location.pathname
+        };
+    };
+
+    private updateSessionStorage() {
+        console.log("updating session storage");
+        window.sessionStorage.setItem(
+            SESSION_KEY,
+            JSON.stringify({
+                coveoAdvancedQueryConfig: this.coveoAdvancedQueryConfig,
+                state: this.engine?.state
             })
         );
     }
 
     private dispatchOnChangeEvent(results: Result[]) {
+        this.updateSessionStorage();
         this.dispatchEvent(
             new CustomEvent("change", {
                 detail: {
-                    results: results.map(normalizeCoveoResult),
+                    results: results.map(this.normalizeCoveoResult),
                     value: this.value
                 }
             })
         );
     }
 
-    private dispatchOnLoading(isLoading: boolean) {
+    private dispatchOnLoading(loading: boolean) {
+        console.log("dispatching onloading", loading);
+        this.dispatchEvent(new CustomEvent("loading", { detail: loading }));
+    }
+
+    private dispatchHighlightedTermChange() {
         this.dispatchEvent(
-            new CustomEvent("loading", {
-                detail: isLoading
+            new CustomEvent("highlightedtermchange", {
+                detail: this.value,
+                composed: true,
+                bubbles: true
             })
         );
     }
 
-    private updateHistory(): void {
-        const queryParams = new URLSearchParams(window.location.search);
-        if (this.isValueEmpty) {
-            console.log('IS EMPTY')
-            queryParams.delete('q');
-            window.history.replaceState({}, '', `?${queryParams.toString()}`);
-            return;
-        }
+    private updateRecentSearches = () =>
+        (this.recentSearches = UserRecentSearches.get().map(
+            (item: { id: string; label: string }) => ({
+                id: item,
+                label: item
+            })
+        ));
 
-        if (this.value) {
-            queryParams.set("q", this.value);
-        }
-        window.history.replaceState({}, '', `?${queryParams.toString()}`);
+    private dispatchSidebarSearchChange(searchTerm: string | undefined): void {
+        this.dispatchEvent(
+            new CustomEvent("sidebarsearchchange", {
+                detail: searchTerm ?? "",
+                bubbles: true,
+                composed: true
+            })
+        );
     }
 
     private submitSearch = debounce(() => {
-        this.searchBox?.updateText(this.value || "");
-        UserRecentSearches.add(this.value);
-        this.recentSearches = UserRecentSearches.get();
-        this.searchBox?.submit();
-    }, 200).bind(this);
+        if (this.searchBox) {
+            UserRecentSearches.add(this.value);
+            this.updateRecentSearches();
+
+            this.searchBox.updateText(this.value || "");
+            this.searchBox.submit();
+        }
+    }, SEARCH_DEBOUNCE_DELAY);
 
     private onClickRecentSearch(e: CustomEvent) {
         this.value = e.detail;
@@ -222,15 +379,20 @@ export default class SidebarSearch extends LightningElement {
     private onInputChange(e: CustomEvent) {
         this.value = e.detail;
 
-        if (this.searchBox && !this.isValueEmpty) {
-            this.submitSearch();
-        }
-
-        if (this.isValueEmpty) {
+        if (this.value) {
+            this.dispatchOnLoading(true);
+            if (this.searchBox) {
+                this.submitSearch();
+            }
+        } else {
+            // coveo's reaction to an empty value triggers a return of results
+            // bootlegging our own ux here`
+            this.dispatchOnLoading(false);
             this.dispatchOnChangeEvent([]);
         }
 
-        this.updateHistory();
+        this.dispatchHighlightedTermChange();
+        this.dispatchSidebarSearchChange(this.value);
     }
 
     private onInputFocus() {

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

@@ -0,0 +1,2 @@
+export const getSidebarSearchParams = () =>
+    new URLSearchParams(window.location.search).get("q");

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

@@ -0,0 +1,55 @@
+import SidebarSearchResult from "dx/sidebarSearchResult";
+import { createRenderComponent } from "utils/tests";
+
+const TAG = "dx-sidebar-search-result";
+const render = createRenderComponent(TAG, SidebarSearchResult);
+
+const PROPS = {
+    description: "test description here",
+    descriptionHighlights: [{ length: 5, offset: 5 }],
+    href: "/test",
+    selected: false,
+    title: "test title here",
+    titleHighlights: [{ length: 5, offset: 5 }]
+};
+
+describe(TAG, () => {
+    it("renders a result with the correct highlighted content", () => {
+        const element = render(PROPS);
+
+        const titleBolds = element.shadowRoot.querySelectorAll(".title .bold");
+        expect(titleBolds.length).toEqual(1);
+        expect(titleBolds[0].textContent).toEqual("title");
+
+        const descriptionBolds =
+            element.shadowRoot.querySelectorAll(".description .bold");
+        expect(descriptionBolds.length).toEqual(1);
+        expect(descriptionBolds[0].textContent).toEqual("descr");
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders a result as selected when specified", () => {
+        const element = render({ ...PROPS, selected: true });
+
+        const selected = element.shadowRoot.querySelector(
+            ".sidebar-item-selected"
+        );
+        expect(selected).not.toBeNull();
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("doesn't add bold class when there is no highlighted term", () => {
+        const element = render({
+            ...PROPS,
+            descriptionHighlights: [],
+            titleHighlights: []
+        });
+
+        const selected = element.shadowRoot.querySelector(".bold");
+        expect(selected).toBeNull();
+
+        return expect(element).toBeAccessible();
+    });
+});