@salesforcedevs/dx-components 0.26.1-alpha0.2 → 0.26.1-alpha0.3

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

@@ -1,175 +0,0 @@
-import { createElement } from "lwc";
-import SidebarSearch from "dx/sidebarSearch";
-import {
-    createRenderComponent,
-    renderLightningElement
-} from "utils-internal/tests";
-import { coveoXMLDocsConfig } from "utils-internal/coveo";
-import { mockQueryParameter, unmockQueryParameter } from "utils-internal/jest";
-import { SESSION_KEY } from "dx/sidebarSearch";
-import mockPreloadedState from "./mockPreloadedState";
-
-const TAG = "dx-sidebar-search";
-const render = createRenderComponent(TAG, SidebarSearch);
-
-const PROPS = coveoXMLDocsConfig;
-const QUERY = "test";
-
-describe(TAG, () => {
-    beforeEach(() => {
-        window.sessionStorage.clear();
-        jest.restoreAllMocks();
-    });
-    afterEach(unmockQueryParameter);
-
-    it("correctly sets coveo advanced configuration", () => {
-        const element = render(PROPS);
-
-        element.coveoAdvancedQueryConfig = JSON.stringify(
-            coveoXMLDocsConfig.coveoAdvancedQueryConfig
-        );
-
-        expect(element.coveoAdvancedQueryConfig).toEqual(
-            coveoXMLDocsConfig.coveoAdvancedQueryConfig
-        );
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("calls dispatchOnChangeEvent with empty query", () => {
-        const element = render(PROPS);
-
-        const mockOnChange = jest.fn();
-
-        element.addEventListener("change", mockOnChange);
-
-        element.setInputValue("reference");
-        element.setInputValue("");
-
-        expect(mockOnChange).toHaveBeenCalled();
-        return expect(element).toBeAccessible();
-    });
-
-    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();
-    });
-
-    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 dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
-
-            dxInput.dispatchEvent(new CustomEvent("change", { detail: QUERY }));
-
-            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 dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
-
-            dxInput.dispatchEvent(new CustomEvent("change", { detail: "" }));
-
-            expect(dispatchEventSpy).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    type: "highlightedtermchange",
-                    detail: ""
-                })
-            );
-        });
-    });
-
-    it("correctly consumes a valid session storage object", () => {
-        mockQueryParameter(mockPreloadedState.state.query.q);
-
-        window.sessionStorage.setItem(
-            SESSION_KEY,
-            JSON.stringify(mockPreloadedState)
-        );
-
-        const element = render(PROPS);
-
-        expect(window.sessionStorage.getItem(SESSION_KEY)).not.toBeNull();
-
-        expect(element).toBeAccessible();
-    });
-
-    it("ignores and deletes a session storage object if query and config don't match", () => {
-        mockQueryParameter("test");
-
-        window.sessionStorage.setItem(
-            SESSION_KEY,
-            JSON.stringify(mockPreloadedState)
-        );
-
-        const element = render(PROPS);
-
-        expect(window.sessionStorage.getItem(SESSION_KEY)).toBeNull();
-
-        expect(element).toBeAccessible();
-    });
-
-    it("ignores and deletes a session storage object on incorrect config", () => {
-        mockQueryParameter(mockPreloadedState.state.query.q);
-
-        window.sessionStorage.setItem(
-            SESSION_KEY,
-            JSON.stringify({ state: { query: { q: "test" } } })
-        );
-
-        const element = render(PROPS);
-
-        expect(window.sessionStorage.getItem(SESSION_KEY)).toBeNull();
-
-        expect(element).toBeAccessible();
-    });
-});

package/src/modules/dx/sidebarSearch/sidebarSearch.css

@@ -1,3 +0,0 @@
-.search-box {
-    --dx-c-input-width: 100%;
-}

package/src/modules/dx/sidebarSearch/sidebarSearch.html

@@ -1,26 +0,0 @@
-<template>
-    <dx-dropdown
-        aria-label="Recent Searches"
-        open={isDropdownOpen}
-        options={recentSearches}
-        onchange={onClickRecentSearch}
-        onrequestclose={onDropdownRequestClose}
-        full-width
-    >
-        <dx-input
-            class="search-box"
-            type="search"
-            placeholder="Search"
-            role="search"
-            aria-label="Search in this guide"
-            icon-symbol="search"
-            size="small"
-            value={value}
-            onchange={onInputChange}
-            onfocus={onInputFocus}
-            onclear={onInputClear}
-            shortcut-key="j"
-            clearable
-        ></dx-input>
-    </dx-dropdown>
-</template>

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

@@ -1,440 +0,0 @@
-import { LightningElement, api } from "lwc";
-import debounce from "debounce";
-import {
-    Result,
-    ResultList,
-    Unsubscribe,
-    ResultsPerPage,
-    SearchBox,
-    buildResultList,
-    buildResultsPerPage,
-    buildSearchBox,
-    loadAdvancedSearchQueryActions,
-    SearchEngine,
-    SearchAppState,
-    loadQueryActions
-} from "@coveo/headless";
-import {
-    buildSearchEngine,
-    getSidebarSearchParams
-} from "utils-internal/coveo";
-import { RecentSearches } from "utils-internal/recentSearches";
-import { toJson } from "utils/normalizers";
-import {
-    Option,
-    PopoverRequestCloseType,
-    SidebarSearchResult
-} 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 normalizeCoveoAdvancedQueryValue = (version: string): string =>
-    version.split(".").join("\\.");
-
-export default class SidebarSearch extends LightningElement {
-    @api coveoOrganizationId!: string;
-    @api coveoPublicAccessToken!: string;
-    @api coveoSearchHub!: string;
-    @api
-    get coveoAdvancedQueryConfig(): { [key: string]: any } {
-        return this._coveoAdvancedQueryConfig;
-    }
-    set coveoAdvancedQueryConfig(value) {
-        const jsonValue = toJson(value);
-        const hasChanged =
-            this._coveoAdvancedQueryConfig &&
-            Object.entries(jsonValue).some(
-                ([key, val]: [string, any]) =>
-                    this._coveoAdvancedQueryConfig[key] !== val
-            );
-        this._coveoAdvancedQueryConfig = jsonValue;
-
-        if (hasChanged && this.engine && this.value !== "") {
-            this.dispatchOnLoading(true);
-        }
-
-        if (hasChanged && this.engine) {
-            // set advanced filters needs access to the latest coveoAdvancedQueryConfig
-            this.setAdvancedFilters(this.engine);
-            this.submitSearch(true);
-        }
-    }
-
-    @api
-    public fetchMoreResults() {
-        if (this.resultList?.state?.moreResultsAvailable) {
-            this.fetchingMoreResults = true;
-            this.resultList.fetchMoreResults();
-        }
-    }
-
-    @api
-    setInputValue(searchTerm: string) {
-        if (searchTerm !== this.value) {
-            this.value = searchTerm || "";
-            this.handleValueChange(true);
-        }
-    }
-
-    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 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.value
-        );
-    }
-
-    constructor() {
-        super();
-
-        this.updateRecentSearches();
-        this.value = getSidebarSearchParams() || "";
-    }
-
-    disconnectedCallback() {
-        this.unsubscribeFromResultList();
-    }
-
-    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.value) {
-                this.submitSearch();
-            } else {
-                this.dispatchOnLoading(false);
-            }
-        }
-    };
-
-    private onResultListChange = () => {
-        if (!this.resultList) {
-            return;
-        }
-
-        const { isLoading, firstSearchExecuted, results } =
-            this.resultList.state;
-
-        if ((!firstSearchExecuted && !isLoading) || !this.value) {
-            // coveo search is firing off some unwanted payloads on startup
-            return;
-        }
-
-        if (!isLoading) {
-            this.dispatchOnChangeEvent(results);
-        }
-
-        if (!this.fetchingMoreResults) {
-            this.dispatchOnLoading(isLoading);
-        }
-
-        if (!isLoading && this.fetchingMoreResults) {
-            this.fetchingMoreResults = false;
-        }
-    };
-
-    private setAdvancedFilters(engine: SearchEngine) {
-        const aq = Object.entries(this.coveoAdvancedQueryConfig).reduce(
-            (result, [key, value]) =>
-                `${result}(@${key}=="${normalizeCoveoAdvancedQueryValue(
-                    value
-                )}")`,
-            ""
-        );
-
-        const registerSearchQueryAction = loadAdvancedSearchQueryActions(
-            engine
-        ).registerAdvancedSearchQueries({
-            aq: aq
-        });
-
-        engine.dispatch(registerSearchQueryAction);
-    }
-
-    private normalizeCoveoResult = ({
-        clickUri,
-        excerpt,
-        excerptHighlights,
-        raw: { sfhtml_url__c },
-        title,
-        titleHighlights,
-        uniqueId
-    }: Result): SidebarSearchResult => {
-        // discussion about this normalization here: https://salesforce-internal.slack.com/archives/C020S6784JX/p1639506238376600
-
-        let pathname;
-        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}`;
-        }
-
-        const href = `${pathname}?q=${this.value}`;
-
-        return {
-            title,
-            titleHighlights,
-            excerpt,
-            excerptHighlights,
-            uniqueId,
-            href,
-            selected: pathname === window.location.pathname
-        };
-    };
-
-    private updateSessionStorage() {
-        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(this.normalizeCoveoResult),
-                    value: this.value
-                }
-            })
-        );
-    }
-
-    private dispatchOnLoading(loading: boolean) {
-        this.dispatchEvent(new CustomEvent("loading", { detail: loading }));
-    }
-
-    private dispatchHighlightedTermChange() {
-        this.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: this.value,
-                composed: true,
-                bubbles: true
-            })
-        );
-    }
-
-    private updateRecentSearches = () =>
-        (this.recentSearches = UserRecentSearches.get().map((item: string) => ({
-            id: item,
-            label: item
-        })));
-
-    private dispatchSidebarSearchChange(searchTerm: string | undefined): void {
-        this.dispatchEvent(
-            new CustomEvent("sidebarsearchchange", {
-                detail: searchTerm ?? "",
-                bubbles: true,
-                composed: true
-            })
-        );
-    }
-
-    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();
-        }
-    }, SEARCH_DEBOUNCE_DELAY);
-
-    private onClickRecentSearch(e: CustomEvent) {
-        this.value = e.detail;
-        this.dispatchSidebarSearchChange(this.value);
-        this.submitSearch(true);
-    }
-
-    private onDropdownRequestClose(e: CustomEvent) {
-        switch (e.detail as PopoverRequestCloseType) {
-            case "interact-outside":
-            case "keypress-escape":
-                this.dropdownRequestedOpen = false;
-                break;
-            default:
-                break;
-        }
-    }
-
-    private onInputChange(e: CustomEvent) {
-        this.value = e.detail;
-
-        this.handleValueChange(false);
-        this.dispatchHighlightedTermChange();
-    }
-
-    private onInputFocus() {
-        this.dropdownRequestedOpen = true;
-    }
-
-    private onInputClear() {
-        this.dropdownRequestedOpen = false;
-    }
-
-    private handleValueChange(isSyncingSearchValue = false) {
-        if (this.value) {
-            this.dispatchOnLoading(true);
-            if (this.searchBox) {
-                this.submitSearch(isSyncingSearchValue);
-            }
-        } else {
-            // coveo's reaction to an empty value triggers a return of results
-            // bootlegging our own ux here`
-            this.dispatchOnLoading(false);
-            this.dispatchOnChangeEvent([]);
-            // Empty search values are not submitted for search, so we need to manually
-            // trigger a search change on our own here
-            this.dispatchSidebarSearchChange(this.value);
-        }
-    }
-}