@salesforcedevs/dx-components 0.26.1-alpha0.6 → 0.27.0

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -0,0 +1,187 @@
+import cx from "classnames";
+import { track } from "dx/instrumentation";
+import { LightningElement, api } from "lwc";
+
+import { TreeNode, SidebarGtmAction } from "typings/custom";
+import { toJson } from "utils/normalizers";
+
+const WAIT_TIME = 500;
+const MOBILE_SIZE_MATCH = "768px";
+const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
+
+export default class Sidebar extends LightningElement {
+    @api header: string = "";
+
+    @api
+    get value() {
+        return this._value;
+    }
+
+    set value(value) {
+        this._value = value;
+    }
+
+    @api
+    get trees() {
+        return this._trees;
+    }
+
+    set trees(value: string | Array<TreeNode>) {
+        let parsedValue = toJson(value);
+        if (parsedValue && !Array.isArray(parsedValue)) {
+            parsedValue = [parsedValue];
+        }
+
+        this._trees = parsedValue || [];
+
+        this._trees.forEach((tree) => this.assignValueToLabel(tree));
+        this.assignFilteredTrees();
+    }
+
+    private expanded: boolean = true;
+    private _toggleHovered: boolean = false;
+    private _searchTimeout?: number;
+    private _value?: string = undefined;
+    private _trees!: Array<TreeNode>;
+
+    private filteredTrees: Array<{ key: string; tree: TreeNode }> = [];
+    private mobile: boolean = true;
+    private searchText: string = "";
+    private matchMedia!: MediaQueryList;
+    private valueToLabel: { [key: string]: string } = {};
+
+    private get anyResultMatch() {
+        return this.filteredTrees.length > 0;
+    }
+
+    private get containerClass() {
+        return cx("container", {
+            collapsed: !this.expanded,
+            "container-border-active": this._toggleHovered,
+            "container-mobile": this.mobile
+        });
+    }
+
+    private get headerMobile() {
+        return (
+            (this.value && this.valueToLabel[this.value]) ||
+            Object.values(this.valueToLabel)[0] ||
+            ""
+        );
+    }
+
+    connectedCallback() {
+        this.matchMedia = window.matchMedia(
+            `(max-width: ${MOBILE_SIZE_MATCH})`
+        );
+
+        this.expanded = !this.matchMedia.matches;
+        this.onMediaChange(this.matchMedia);
+        this.matchMedia.addEventListener("change", this.onMediaChange);
+    }
+
+    disconnectedCallback() {
+        this.matchMedia.removeEventListener("change", this.onMediaChange);
+    }
+
+    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) =>
+        (this.mobile = event.matches);
+
+    private onSelect(event: CustomEvent) {
+        this._value = event.detail.name;
+    }
+
+    private onToggleClick(event: Event) {
+        this.expanded = !this.expanded;
+        this._toggleHovered = false;
+        const sideNavAction: SidebarGtmAction = this.expanded
+            ? "expand"
+            : "collapse";
+        track(event.currentTarget!, "custEv_leftNavLinkClick", {
+            sideNavAction,
+            clickText: TOGGLE_BUTTON_LABEL
+        });
+    }
+
+    private onToggleMouseEnter() {
+        this._toggleHovered = true;
+    }
+
+    private onToggleMouseLeave() {
+        this._toggleHovered = false;
+    }
+
+    /*
+     * Debouncing this method: Do not apply searchText filter as long as this
+     * function is being called to avoid running the recursivity logic very often.
+     **/
+    private onSearchChange(event: CustomEvent) {
+        this.searchText = event.detail;
+        window.clearTimeout(this._searchTimeout);
+        this._searchTimeout = window.setTimeout(() => {
+            this.assignFilteredTrees();
+            this.dispatchEvent(
+                new CustomEvent("highlightedtermchange", {
+                    detail: this.searchText,
+                    composed: true,
+                    bubbles: true
+                })
+            );
+        }, WAIT_TIME);
+    }
+
+    private assignFilteredTrees() {
+        this.filteredTrees = this._trees
+            .map((singleTree) => {
+                return {
+                    key: this.makeKey(),
+                    tree: this.searchText
+                        ? this.findMatch(
+                              new RegExp(this.searchText.toLowerCase().trim()),
+                              singleTree
+                          )!
+                        : singleTree
+                };
+            })
+            .filter((filteredTree) => filteredTree.tree);
+    }
+
+    private makeKey(): string {
+        return Math.random().toString(36).substring(7);
+    }
+
+    private findMatch(
+        valuePattern: RegExp,
+        node: TreeNode
+    ): TreeNode | undefined {
+        if (valuePattern.test(node.label.toLowerCase())) {
+            return { ...node, isExpanded: true };
+        }
+
+        const filteredChildren = this.filterChildren(
+            valuePattern,
+            node.children
+        );
+        return filteredChildren.length > 0
+            ? { ...node, children: filteredChildren, isExpanded: true }
+            : undefined;
+    }
+
+    private filterChildren(
+        valuePattern: RegExp,
+        children?: Array<TreeNode>
+    ): Array<TreeNode> {
+        return !children || children.length === 0
+            ? []
+            : (children
+                  .map((child) => this.findMatch(valuePattern, child))
+                  .filter((child) => child) as Array<TreeNode>);
+    }
+
+    private assignValueToLabel(node: TreeNode): void {
+        this.valueToLabel[node.name] = node.label;
+        if (node.children && node.children.length > 0) {
+            node.children.forEach((child) => this.assignValueToLabel(child));
+        }
+    }
+}

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

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

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

@@ -0,0 +1,26 @@
+<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

@@ -0,0 +1,437 @@
+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/coveo";
+import { RecentSearches } from "utils/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);
+        }
+    }
+}

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css

@@ -0,0 +1,36 @@
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/sidebar";
+
+a {
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar-item {
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-md);
+}
+
+.search-text {
+    font-size: var(--dx-g-text-xs);
+    font-family: var(--dx-g-font-sans);
+    line-height: 18px;
+    overflow-wrap: break-word;
+}
+
+.description {
+    -webkit-line-clamp: 3;
+    overflow-wrap: break-word;
+}
+
+.title {
+    color: var(--dx-g-text-heading-color);
+}
+
+.bold {
+    font-weight: 700;
+}
+
+a > *:not(:last-child) {
+    margin-bottom: 2px;
+}

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.html

@@ -0,0 +1,14 @@
+<template>
+    <a class={className} href={href}>
+        <span class="title search-text">
+            <template for:each={titleChunks} for:item="chunk">
+                <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
+            </template>
+        </span>
+        <span class="description dx-text-body-3 sidebar-item-truncate-text">
+            <template for:each={descriptionChunks} for:item="chunk">
+                <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
+            </template>
+        </span>
+    </a>
+</template>