@salesforcedevs/dx-components 0.17.0 → 0.18.3

package/src/modules/dx/sidebar/sidebar.css

@@ -13,6 +13,13 @@
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
 }
 
+dx-empty-state {
+    --dx-c-empty-state-background: var(--sds-g-gray-2);
+    --dx-c-empty-state-image-width: 400px;
+
+    display: none;
+}
+
 dx-tree:not(:last-child) {
     margin-bottom: var(--dx-g-spacing-sm);
 }
@@ -57,14 +64,6 @@ dx-tree:not(:last-child) {
     transition: var(--dx-g-transition-transform-2x);
 }
 
-.container.collapsed {
-    width: var(--dx-g-spacing-xl);
-}
-
-.collapsed .header-toggle-button {
-    transform: rotate(180deg);
-}
-
 .container {
     background-color: var(--dx-g-gray-95);
     display: flex;
@@ -74,12 +73,12 @@ dx-tree:not(:last-child) {
 }
 
 .container:not(.container-mobile) {
-    --border-color: var(--dx-g-gray-95);
+    --border-color: transparent;
     --left-spacing: calc(
         var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
     );
 
-    border-right: 2px solid var(--border-color);
+    box-shadow: 2px 0 0 0 var(--border-color);
     min-height: var(--dx-c-sidebar-min-height);
     padding: var(--dx-c-sidebar-vertical-padding) 0
         var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
@@ -94,14 +93,62 @@ dx-tree:not(:last-child) {
     --border-color: transparent;
 }
 
-.container:hover .header-toggle-button {
-    --dx-c-button-opacity: 1;
-}
-
 .container.container-border-active {
     --border-color: var(--dx-c-sidebar-button-color);
 }
 
+.sidebar-content {
+    overflow-y: auto;
+    padding-bottom: var(--dx-g-spacing-md);
+}
+
+.search {
+    padding-bottom: var(--dx-g-spacing-md);
+}
+
+.search-box {
+    --dx-c-input-width: 100%;
+}
+
+.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.loading-skeleton {
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.search-empty.container dx-empty-state {
+    display: block;
+}
+
+.user-searching.container .sidebar-content-tree {
+    display: none;
+}
+
+.show-tree.container .sidebar-content-search {
+    display: none;
+}
+
+.container.collapsed {
+    width: var(--dx-g-spacing-xl);
+}
+
+.container.collapsed .header-toggle-button {
+    transform: rotate(180deg);
+}
+
+.container.collapsed .sidebar-header,
+.container.collapsed .sidebar-content {
+    display: none;
+}
+
+.container:hover .header-toggle-button {
+    --dx-c-button-opacity: 1;
+}
+
 .container.container-mobile {
     width: 100%;
 }
@@ -134,25 +181,12 @@ dx-tree:not(:last-child) {
     transform: rotateZ(-90deg);
 }
 
-.sidebar-content {
-    overflow-y: auto;
-}
-
-.search {
-    padding-bottom: var(--dx-g-spacing-md);
-}
-
-.search-box {
-    --dx-c-input-width: 100%;
-}
+@media (max-width: 768px) {
+    :host {
+        width: 100%;
+    }
 
-.truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-dx-empty-state {
-    --dx-c-empty-state-background: var(--sds-g-gray-2);
-    --dx-c-empty-state-image-width: 400px;
+    .loading-skeleton {
+        width: 100%;
+    }
 }

package/src/modules/dx/sidebar/sidebar.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={containerClass}>
+    <div class={containerClass} part="container">
         <div
             if:true={mobile}
             class="header padding-horizontal"
@@ -27,44 +27,68 @@
             onmouseenter={onToggleMouseEnter}
             onmouseleave={onToggleMouseLeave}
         ></dx-button>
-
-        <template if:true={expanded}>
-            <div class="padding-horizontal">
-                <div class="header" if:false={mobile}>
-                    <h2 class="dx-text-heading-4 header-title">{header}</h2>
-                    <slot name="header"></slot>
-                </div>
-                <div class="search">
-                    <dx-input
-                        class="search-box"
-                        type="search"
-                        placeholder="Search this list..."
-                        role="search"
-                        aria-label="Content Search"
-                        icon-symbol="search"
-                        size="small"
-                        value={searchText}
-                        onchange={onSearchChange}
-                        shortcut-key="j"
-                    ></dx-input>
-                </div>
+        <div class="sidebar-header padding-horizontal">
+            <div class="header" if:false={mobile}>
+                <h2 class="dx-text-heading-4 header-title">{header}</h2>
+                <slot name="header"></slot>
             </div>
-            <div class="sidebar-content" if:true={anyResultMatch}>
-                <dx-tree
-                    for:each={filteredTrees}
-                    for:item="tree"
-                    key={tree.key}
-                    tree-root={tree.tree}
-                    onselect={onSelect}
-                    value={value}
-                ></dx-tree>
+            <div class="search">
+                <dx-sidebar-search
+                    onchange={onSearchChange}
+                    onloading={onSearchLoading}
+                    coveo-organization-id={coveoOrganizationId}
+                    coveo-public-access-token={coveoPublicAccessToken}
+                    coveo-search-hub={coveoSearchHub}
+                    coveo-advanced-query-config={coveoAdvancedQueryConfig}
+                ></dx-sidebar-search>
             </div>
+            <h2
+                class="results-heading dx-text-heading-6"
+                if:true={showResultsHeading}
+            >
+                Results
+            </h2>
+        </div>
+        <div
+            class="sidebar-content sidebar-content-search"
+            onscroll={onSidebarSearchContentScroll}
+        >
+            <img
+                if:true={isSearchLoading}
+                class="loading-skeleton padding-horizontal"
+                src="/assets/svg/sidebar-loading.svg"
+                alt="loading"
+            />
+            <template
+                if:true={showSearchResults}
+                for:each={searchResults}
+                for:item="result"
+            >
+                <dx-sidebar-search-result
+                    description-highlights={result.excerptHighlights}
+                    description={result.excerpt}
+                    href={result.href}
+                    key={result.uniqueId}
+                    selected={result.selected}
+                    title-highlights={result.titleHighlights}
+                    title={result.title}
+                ></dx-sidebar-search-result>
+            </template>
             <dx-empty-state
                 class="padding-horizontal"
-                size="small"
                 title="No Results"
-                if:false={anyResultMatch}
+                size="small"
             ></dx-empty-state>
-        </template>
+        </div>
+        <div class="sidebar-content sidebar-content-tree">
+            <dx-tree
+                for:each={trees}
+                for:item="tree"
+                key={tree.key}
+                tree-root={tree.tree}
+                onselect={onSelect}
+                value={value}
+            ></dx-tree>
+        </div>
     </div>
 </template>

package/src/modules/dx/sidebar/sidebar.stories.ts

@@ -1,6 +1,6 @@
-import { SAMPLE_TREES, SAMPLE_TREES_WITH_METHODS } from "./__tests__/mockProps";
-
 import { html } from "lit-html";
+import { coveoXMLDocsConfig, coveoSFDocsConfig } from "../../utils/coveo/coveo";
+import { SAMPLE_TREES, SAMPLE_TREES_WITH_METHODS } from "./__tests__/mockProps";
 
 export default {
     title: "dx/dx-sidebar",
@@ -36,15 +36,41 @@ const styles = (addStyles: string = "") => html`
         body.sb-main-padded.sb-show-main {
             padding: 0;
         }
+
+        #root-inner {
+            display: flex;
+            height: 100%;
+        }
+
+        doc-content {
+            padding: 20px;
+        }
     </style>
 `;
 
-export const Base = (args: any) => html`
-    ${styles("--dx-c-sidebar-min-height: 100vh;")}
+export const XMLDocs = (args: any) => html`
+    ${styles("--dx-c-sidebar-min-height: 100%;")}
+
+    <dx-sidebar
+        header="${args.header}"
+        trees="${JSON.stringify(args.trees)}"
+        coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
+    ></dx-sidebar>
+`;
+
+export const SFDocs = (args: any) => html`
+    ${styles("--dx-c-sidebar-min-height: 100%;")}
 
     <dx-sidebar
         header="${args.header}"
         trees="${JSON.stringify(args.trees)}"
+        coveo-organization-id="${coveoSFDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoSFDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoSFDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoSFDocsConfig.coveoAdvancedQueryConfig}"
     ></dx-sidebar>
 `;
 
@@ -58,6 +84,10 @@ export const WidthAndMinHeightVariables = (args: any) => html`
     <dx-sidebar
         header="${args.header}"
         trees="${JSON.stringify(args.trees)}"
+        coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
     ></dx-sidebar>
 `;
 
@@ -80,6 +110,10 @@ export const WidthDrivenByContainer = (args: any) => html`
             header="${args.header}"
             trees="${JSON.stringify(args.trees)}"
             value="${args.value}"
+            coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+            coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+            coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+            coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
         ></dx-sidebar>
     </div>
 `;
@@ -92,6 +126,10 @@ export const WithBadges = (args: any) => html`
             header="${args.header}"
             trees="${JSON.stringify(SAMPLE_TREES_WITH_METHODS)}"
             value="${args.value}"
+            coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+            coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+            coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+            coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
         ></dx-sidebar>
     </div>
 `;
@@ -109,6 +147,10 @@ export const PositionSticky = ({ header, trees, value }: any) => html`
         header="${header}"
         trees="${JSON.stringify(trees)}"
         value="${value}"
+        coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
     ></dx-sidebar>
 `;
 
@@ -133,6 +175,10 @@ export const UseSlot = ({ header, trees, value }: any) => html`
         header="${header}"
         trees="${JSON.stringify(trees)}"
         value="${value}"
+        coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
     >
         <span slot="header">I'm in the sidebar</span>
     </dx-sidebar>

package/src/modules/dx/sidebar/sidebar.ts

@@ -1,15 +1,23 @@
 import cx from "classnames";
-import { track } from "dx/instrumentation";
-import { LightningElement, api } from "lwc";
-
-import { TreeNode, SidebarGtmAction } from "typings/custom";
+import { track as trackAnalytics } from "dx/instrumentation";
+import { LightningElement, api, track } from "lwc";
+import {
+    TreeNode,
+    SidebarGtmAction,
+    SidebarSearchResult
+} from "typings/custom";
+import { getSidebarSearchParams } from "utils/coveo";
 import { toJson } from "utils/normalizers";
+import SidebarSearch from "dx/sidebarSearch";
 
-const WAIT_TIME = 500;
 const MOBILE_SIZE_MATCH = "768px";
 const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
 export default class Sidebar extends LightningElement {
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+    @api coveoSearchHub!: string;
+    @api coveoAdvancedQueryConfig!: string;
     @api header: string = "";
 
     @api
@@ -27,38 +35,94 @@ export default class Sidebar extends LightningElement {
     }
 
     set trees(value: string | Array<TreeNode>) {
-        let parsedValue = toJson(value);
+        let parsedValue = toJson(value) || [];
         if (parsedValue && !Array.isArray(parsedValue)) {
             parsedValue = [parsedValue];
         }
 
-        this._trees = parsedValue || [];
+        parsedValue.forEach((tree: TreeNode) => this.assignValueToLabel(tree));
+
+        this._trees = parsedValue.map((tree: TreeNode) => ({
+            key: this.makeKey(),
+            tree
+        }));
+    }
 
-        this._trees.forEach((tree) => this.assignValueToLabel(tree));
-        this.assignFilteredTrees();
+    @api
+    setInputValue(searchTerm: string) {
+        (
+            this.template.querySelector(
+                "dx-sidebar-search"
+            ) as unknown as SidebarSearch
+        )?.setInputValue(searchTerm);
     }
 
     private expanded: boolean = true;
     private _toggleHovered: boolean = false;
-    private _searchTimeout?: number;
     private _value?: string = undefined;
+
+    @track
     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 isSearchLoading: boolean = false;
+    private searchValue: string | null = null;
+    private searchResults: SidebarSearchResult[] = [];
+    private scrollToSelectedSearchResult: boolean = false;
+    private selectedSearchResultIndex: number = -1;
+    private requestedFetchMoreResults: boolean = false;
+
+    private get areResultsEmpty(): boolean {
+        return (
+            (!this.searchResults ||
+                (this.searchResults && this.searchResults.length < 1)) &&
+            !this.isSearchLoading
+        );
+    }
+
+    private get isSearchEmpty(): boolean {
+        return this.isUserSearching && this.areResultsEmpty;
+    }
+
+    private get showResultsHeading(): boolean {
+        return this.isUserSearching && !this.areResultsEmpty;
+    }
+
+    private get isUserSearching(): boolean {
+        return !!this.searchValue || this.isSearchLoading;
+    }
+
+    private get showSearchResults(): boolean {
+        return (
+            !!this.searchValue && !this.isSearchLoading && !this.areResultsEmpty
+        );
+    }
+
+    private get isNearBottomOfSearchResults(): boolean {
+        const scrollArea = this.template.querySelector(
+            ".sidebar-content-search"
+        );
+        if (!scrollArea) {
+            return false;
+        }
+
+        const { scrollHeight, scrollTop } = scrollArea;
+        const { height } = scrollArea?.getBoundingClientRect();
+
+        return scrollHeight - scrollTop - height < 300;
     }
 
     private get containerClass() {
         return cx("container", {
             collapsed: !this.expanded,
             "container-border-active": this._toggleHovered,
-            "container-mobile": this.mobile
+            "container-mobile": this.mobile,
+            "user-searching": this.isUserSearching,
+            "show-tree": !this.isUserSearching,
+            "search-empty": this.isSearchEmpty
         });
     }
 
@@ -70,6 +134,19 @@ export default class Sidebar extends LightningElement {
         );
     }
 
+    constructor() {
+        super();
+
+        if (getSidebarSearchParams()) {
+            this.isSearchLoading = true;
+            this.scrollToSelectedSearchResult = true;
+        }
+    }
+
+    renderedCallback() {
+        this.initializeSearchScrollPosition();
+    }
+
     connectedCallback() {
         this.matchMedia = window.matchMedia(
             `(max-width: ${MOBILE_SIZE_MATCH})`
@@ -97,7 +174,7 @@ export default class Sidebar extends LightningElement {
         const sideNavAction: SidebarGtmAction = this.expanded
             ? "expand"
             : "collapse";
-        track(event.currentTarget!, "custEv_leftNavLinkClick", {
+        trackAnalytics(event.currentTarget!, "custEv_leftNavLinkClick", {
             sideNavAction,
             clickText: TOGGLE_BUTTON_LABEL
         });
@@ -111,71 +188,62 @@ export default class Sidebar extends LightningElement {
         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 makeKey(): string {
+        return Math.random().toString(36).substring(7);
     }
 
-    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 onSearchChange(e: CustomEvent) {
+        this.requestedFetchMoreResults = false;
+        this.searchResults = e.detail.results;
+        this.searchValue = e.detail.value;
     }
 
-    private makeKey(): string {
-        return Math.random().toString(36).substring(7);
+    private onSearchLoading(e: CustomEvent) {
+        if (!e.detail.loading && this.scrollToSelectedSearchResult) {
+            this.selectedSearchResultIndex = this.searchResults.findIndex(
+                (r) => r.selected
+            );
+        }
+        this.isSearchLoading = e.detail;
     }
 
-    private findMatch(
-        valuePattern: RegExp,
-        node: TreeNode
-    ): TreeNode | undefined {
-        if (valuePattern.test(node.label.toLowerCase())) {
-            return { ...node, isExpanded: true };
+    private onSidebarSearchContentScroll() {
+        if (this.isSearchLoading) {
+            return;
         }
 
-        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>);
+        const search = this.template.querySelector(
+            "dx-sidebar-search"
+        ) as unknown as SidebarSearch;
+
+        if (
+            this.isNearBottomOfSearchResults &&
+            search &&
+            !this.requestedFetchMoreResults
+        ) {
+            this.requestedFetchMoreResults = true;
+            search.fetchMoreResults();
+        }
+    }
+
+    private initializeSearchScrollPosition() {
+        if (
+            this.scrollToSelectedSearchResult &&
+            this.selectedSearchResultIndex >= 0
+        ) {
+            const selectedResult = this.template.querySelector(
+                `dx-sidebar-search-result:nth-child(${
+                    this.selectedSearchResultIndex + 1
+                })`
+            );
+            if (!selectedResult || !selectedResult.parentNode) {
+                return;
+            }
+            (selectedResult.parentNode as HTMLElement).scrollTop =
+                selectedResult.offsetTop -
+                (selectedResult.parentNode as HTMLElement).offsetTop;
+            this.scrollToSelectedSearchResult = false;
+        }
     }
 
     private assignValueToLabel(node: TreeNode): void {