@salesforcedevs/docs-components 1.17.11 → 1.17.12-search-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.17.11",
+    "version": "1.17.12-search-alpha",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -25,5 +25,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "788524c2a30a036b5c06c95ecdb37b46ee522ea5"
+    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

package/src/modules/doc/amfReference/amfReference.html

@@ -1,13 +1,7 @@
 <template>
     <doc-content-layout
         lwc:if={isVersionFetched}
-        use-old-sidebar={useOldSidebar}
         class="content-type content-type-reference"
-        coveo-organization-id={coveoOrganizationId}
-        coveo-public-access-token={coveoPublicAccessToken}
-        coveo-analytics-token={coveoAnalyticsToken}
-        coveo-search-hub={coveoSearchHub}
-        coveo-advanced-query-config={coveoAdvancedQueryConfig}
         breadcrumbs={breadcrumbs}
         sidebar-header={sidebarHeader}
         sidebar-value={selectedSidebarValue}
@@ -20,6 +14,7 @@
         languages={languages}
         language={language}
         show-footer={enableFooter}
+        empty-state-message={emptyStateMessage}
     >
         <doc-phase
             slot="doc-phase"

package/src/modules/doc/amfReference/amfReference.ts

@@ -3,7 +3,7 @@ import { noCase } from "no-case";
 import { sentenceCase } from "sentence-case";
 import qs from "query-string";
 import { AmfModelParser } from "doc/amfModelParser";
-import { normalizeBoolean, toJson } from "dxUtils/normalizers";
+import { normalizeBoolean } from "dxUtils/normalizers";
 import type { OptionWithLink } from "typings/custom";
 import type {
     AmfConfig,
@@ -28,7 +28,7 @@ import {
 } from "./constants";
 import { restoreScroll } from "dx/scrollManager";
 import { DocPhaseInfo } from "typings/custom";
-import { logCoveoPageView, oldVersionDocInfo } from "docUtils/utils";
+import { oldVersionDocInfo } from "docUtils/utils";
 
 type NavigationItem = {
     label: string;
@@ -41,11 +41,6 @@ type NavigationItem = {
 export default class AmfReference extends LightningElement {
     @api breadcrumbs: string | null = null;
     @api sidebarHeader!: string;
-    @api coveoOrganizationId!: string;
-    @api coveoPublicAccessToken!: string;
-    @api coveoAnalyticsToken!: string;
-    @api coveoSearchHub!: string;
-    @api useOldSidebar: boolean = false;
     @api tocTitle?: string;
     @api tocOptions?: string;
     @api languages!: OptionWithLink[];
@@ -54,7 +49,6 @@ export default class AmfReference extends LightningElement {
     @track navigation = [] as NavigationItem[];
     @track versions: Array<ReferenceVersion> = [];
     @track showVersionBanner = false;
-    @track _coveoAdvancedQueryConfig!: { [key: string]: any };
 
     // Update this to update what component gets rendered in the content block
     @track
@@ -160,35 +154,18 @@ export default class AmfReference extends LightningElement {
         this._expandChildren = normalizeBoolean(value);
     }
 
-    /*
-     * The get coveoAdvancedQueryConfig() method returns this._coveoAdvancedQueryConfig,
-     * but before returning it, it checks if there are multiple versions (this.versions.length > 1)
-     * and if a version is selected (this.selectedVersion). If both conditions are met,
-     * it updates the version property of this._coveoAdvancedQueryConfig with the selected version.
-     */
-    @api
-    get coveoAdvancedQueryConfig(): { [key: string]: any } {
-        const coveoConfig = this._coveoAdvancedQueryConfig;
-        if (this.versions.length > 1 && this.selectedVersion) {
-            const currentGAVersionRef = this.versions[0];
-            if (this.selectedVersion.id !== currentGAVersionRef.id) {
-                // Currently Coveo only supports query without "v"
-                const version = this.selectedVersion.id.replace("v", "");
-                coveoConfig.version = version;
-                this._coveoAdvancedQueryConfig = coveoConfig;
-            }
-        }
-        return this._coveoAdvancedQueryConfig;
-    }
-
-    set coveoAdvancedQueryConfig(config) {
-        this._coveoAdvancedQueryConfig = toJson(config);
-    }
-
     private get enableFooter(): boolean {
         return !this.hideFooter;
     }
 
+    private get emptyStateMessage(): string {
+        return JSON.stringify([
+            "Please consider misspellings",
+            "Try different search keywords",
+            "Select a relevant API specification"
+        ]);
+    }
+
     // model
     protected _amfConfigList: AmfConfig[] = [];
     protected _amfConfigMap: Map<string, AmfConfig> = new Map();
@@ -1436,10 +1413,6 @@ export default class AmfReference extends LightningElement {
                         metaVal
                     );
 
-                    logCoveoPageView(
-                        this.coveoOrganizationId,
-                        this.coveoAnalyticsToken
-                    );
                     this.updateUrlWithSelected(parentReferencePath, metaVal);
                     this.updateTags(metadata.navTitle);
                 } else {

package/src/modules/doc/contentLayout/contentLayout.html

@@ -1,43 +1,21 @@
 <template>
     <div class="content">
-        <template lwc:if={useOldSidebar}>
-            <dx-sidebar-old
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
-                dev-center={devCenter}
-                brand={brand}
-            >
-                <slot name="sidebar-header" slot="version-picker"></slot>
-            </dx-sidebar-old>
-        </template>
-        <template lwc:else>
-            <dx-sidebar
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                coveo-organization-id={coveoOrganizationId}
-                coveo-public-access-token={coveoPublicAccessToken}
-                coveo-search-hub={coveoSearchHub}
-                coveo-advanced-query-config={coveoAdvancedQueryConfig}
-                ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
-                dev-center={devCenter}
-                brand={brand}
-            >
-                <slot name="sidebar-header" slot="version-picker"></slot>
-            </dx-sidebar>
-        </template>
+        <dx-sidebar-old
+            class="is-sticky left-nav-bar"
+            trees={sidebarContent}
+            value={sidebarValue}
+            header={sidebarHeader}
+            ontogglesidebar={onToggleSidebar}
+            languages={languages}
+            language={language}
+            bail-href={bailHref}
+            bail-label={bailLabel}
+            dev-center={devCenter}
+            brand={brand}
+            empty-state-message={emptyStateMessage}
+        >
+            <slot name="sidebar-header" slot="version-picker"></slot>
+        </dx-sidebar-old>
         <div class="content-body-doc-phase-container">
             <slot name="doc-phase"></slot>
             <slot name="version-banner"></slot>

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -32,11 +32,6 @@ export default class ContentLayout extends LightningElement {
     @api sidebarHeader!: string;
     @api tocTitle!: string;
     @api enableSlotChange = false;
-    @api coveoOrganizationId!: string;
-    @api coveoPublicAccessToken!: string;
-    @api coveoAnalyticsToken!: string;
-    @api coveoSearchHub!: string;
-    @api coveoAdvancedQueryConfig!: string;
     @api useOldSidebar?: boolean = false;
     @api languages!: OptionWithLink[];
     @api language!: string;
@@ -44,6 +39,7 @@ export default class ContentLayout extends LightningElement {
     @api bailLabel!: string;
     @api devCenter: any;
     @api brand: any;
+    @api emptyStateMessage?: string;
 
     // This is needed for now to prevent failing snapshot tests due to links in the footer
     @api showFooter = false;
@@ -210,10 +206,7 @@ export default class ContentLayout extends LightningElement {
         We have to account for the global nav changing height due to animations.
     */
     adjustNavPosition = () => {
-        const sidebarType = this.useOldSidebar
-            ? "dx-sidebar-old"
-            : "dx-sidebar";
-        const sidebarEl = this.template.querySelector(sidebarType);
+        const sidebarEl = this.template.querySelector("dx-sidebar-old");
         const globalNavEl = document.querySelector(
             "hgf-c360nav"
         ) as HTMLElement;

package/src/modules/doc/lwcContentLayout/lwcContentLayout.html

@@ -1,43 +1,20 @@
 <template>
     <div class="content">
-        <template lwc:if={useOldSidebar}>
-            <dx-sidebar-old
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
-                dev-center={devCenter}
-                brand={brand}
-            >
-                <slot name="sidebar-header" slot="version-picker"></slot>
-            </dx-sidebar-old>
-        </template>
-        <template lwc:else>
-            <dx-sidebar
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                coveo-organization-id={coveoOrganizationId}
-                coveo-public-access-token={coveoPublicAccessToken}
-                coveo-search-hub={coveoSearchHub}
-                coveo-advanced-query-config={coveoAdvancedQueryConfig}
-                ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
-                bail-href={bailHref}
-                bail-label={bailLabel}
-                dev-center={devCenter}
-                brand={brand}
-            >
-                <slot name="sidebar-header" slot="version-picker"></slot>
-            </dx-sidebar>
-        </template>
+        <dx-sidebar-old
+            class="is-sticky left-nav-bar"
+            trees={sidebarContent}
+            value={sidebarValue}
+            header={sidebarHeader}
+            ontogglesidebar={onToggleSidebar}
+            languages={languages}
+            language={language}
+            bail-href={bailHref}
+            bail-label={bailLabel}
+            dev-center={devCenter}
+            brand={brand}
+        >
+            <slot name="sidebar-header" slot="version-picker"></slot>
+        </dx-sidebar-old>
         <div class="content-body-doc-phase-container">
             <slot name="doc-phase"></slot>
             <slot name="version-banner"></slot>

package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts

@@ -2,44 +2,111 @@ import ContentLayout from "doc/contentLayout";
 
 const TOC_HEADER_TAG = "doc-heading";
 const RNB_BY_TAB = "docs-tab";
-const SPECIFICATION_TAB_TITLE = "Specification";
+const SPECIFICATION_TAG = "doc-specification-content";
 export const OBSERVER_ATTACH_WAIT_TIME = 500;
 
 export default class LwcContentLayout extends ContentLayout {
     private rnbByTab: boolean = false;
 
+    // DOM element caches to avoid repeated queries
+    private tabPanelListCache: any = null;
+    private hasSpecContentCache: boolean | null = null;
+    private allTabsCache: any[] | null = null;
+    private mainSlotCache: any = null;
+
     private setRNBByTab() {
-        const tabPanelListItem: any = this.getTabPanelList();
-        this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB ? true : false;
+        const tabPanelListItem = this.getTabPanelList();
+        this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB;
     }
 
     get showTabBasedRNB() {
         return this.rnbByTab;
     }
 
+    /**
+     * Check if the main slot contains doc-specification-content
+     * Uses caching to avoid repeated DOM queries
+     */
+    private hasSpecificationContent(): boolean {
+        if (this.hasSpecContentCache !== null) {
+            return this.hasSpecContentCache;
+        }
+
+        const mainSlot = this.getMainSlot();
+        if (mainSlot) {
+            const assignedElements = (mainSlot as any).assignedElements();
+
+            for (const element of assignedElements) {
+                if (
+                    element.tagName === SPECIFICATION_TAG ||
+                    element.querySelector(SPECIFICATION_TAG) ||
+                    element.shadowRoot?.querySelector(SPECIFICATION_TAG)
+                ) {
+                    return (this.hasSpecContentCache = true);
+                }
+            }
+        }
+        return (this.hasSpecContentCache = false);
+    }
+
+    /**
+     * Clear all caches when content changes
+     */
+    private clearAllCaches(): void {
+        this.hasSpecContentCache = null;
+        this.tabPanelListCache = null;
+        this.allTabsCache = null;
+        this.mainSlotCache = null;
+    }
+
+    /**
+     * Get the main slot element with caching
+     */
+    private getMainSlot(): any {
+        if (!this.mainSlotCache) {
+            this.mainSlotCache =
+                this.template.querySelector("slot:not([name])");
+        }
+        return this.mainSlotCache;
+    }
+
+    /**
+     * Get tab panel list with caching
+     */
+    private getTabPanelList(): any {
+        if (!this.tabPanelListCache) {
+            // eslint-disable-next-line @lwc/lwc/no-document-query
+            this.tabPanelListCache =
+                document.querySelector("dx-tab-panel-list");
+        }
+        return this.tabPanelListCache;
+    }
+
     onRNBClick = (event: CustomEvent) => {
         event.stopPropagation();
-        const currentTab = this.getSelectedTabId();
-        if (currentTab === SPECIFICATION_TAB_TITLE) {
+        if (this.hasSpecificationContent()) {
             this.didScrollToSelectedHash = false;
         }
     };
 
     onTabChanged = () => {
         this.updateRNB();
-    };
 
-    private getTabPanelList() {
-        // eslint-disable-next-line @lwc/lwc/no-document-query
-        return document.querySelector("dx-tab-panel-list");
-    }
+        const { hash } = window.location;
+        if (this.hasSpecificationContent() && hash) {
+            this.didScrollToSelectedHash = false;
+
+            requestAnimationFrame(() => this.updateHeadingForRNB());
+        }
+    };
 
     protected getHeadingElements() {
         let headingElements = super.getHeadingElements();
         if (this.showTabBasedRNB) {
-            const tabPanelListItem: any = this.getTabPanelList();
+            const tabPanelListItem = this.getTabPanelList();
             const tabPanels =
                 tabPanelListItem?.querySelectorAll("dx-tab-panel");
+
             for (const tabPanelItem of tabPanels) {
                 if (tabPanelItem.active) {
                     // This is needed for Specification tab content
@@ -65,6 +132,7 @@ export default class LwcContentLayout extends ContentLayout {
     private updateURL() {
         const tabs = this.getAllTabs();
         const selectedTabId = this.getSelectedTabId();
+
         tabs.forEach((tab: any) => {
             if (tab.getAttribute("aria-selected") === "true") {
                 const tabID = tab.getAttribute("aria-label");
@@ -101,22 +169,38 @@ export default class LwcContentLayout extends ContentLayout {
             const selectedTabId = this.getSelectedTabId();
             if (selectedTabId) {
                 this.selectTabById(selectedTabId);
+
+                // If there's a hash and we have specification content,
+                // we need to wait for the content to load before scrolling
+                const { hash } = window.location;
+                if (this.hasSpecificationContent() && hash) {
+                    // Reset the scroll flag to allow scrolling once content is loaded
+                    this.didScrollToSelectedHash = false;
+                }
             }
         });
     }
 
     private getAllTabs(): any[] {
-        const tabPanelListItem: any = this.getTabPanelList();
+        // Return cached result if available
+        if (this.allTabsCache) {
+            return this.allTabsCache;
+        }
+
+        const tabPanelListItem = this.getTabPanelList();
         if (tabPanelListItem?.shadowRoot) {
-            return Array.from(
+            this.allTabsCache = Array.from(
                 tabPanelListItem.shadowRoot.querySelectorAll(
                     "dx-tab-panel-item"
                 )
             ).map((tabPanelItem: any) =>
                 tabPanelItem.shadowRoot.querySelector("button")
             );
+        } else {
+            this.allTabsCache = [];
         }
-        return [];
+
+        return this.allTabsCache;
     }
 
     private selectTabById(tabId: string) {
@@ -158,8 +242,12 @@ export default class LwcContentLayout extends ContentLayout {
         }
     }
 
+    onSlotChange(): void {
+        this.clearAllCaches();
+        super.onSlotChange();
+    }
+
     updateHeadingForRNB(): void {
-        // We only need to update URL in case of /docs and ignore if tabs are used anywhere else in DSC
         if (this.showTabBasedRNB) {
             this.updateURL();
         }

package/src/modules/doc/specificationContent/specificationContent.html

@@ -73,9 +73,7 @@
                         <template lwc:if={method.firstArgument}>
                             <tr key={method.name}>
                                 <td rowspan={method.arguments.length}>
-                                    <span class="code">
-                                        {method.nameInKebabCase}
-                                    </span>
+                                    <span class="code">{method.name}</span>
                                 </td>
                                 <td rowspan={method.arguments.length}>
                                     {method.description}
@@ -100,9 +98,7 @@
                         <template lwc:else>
                             <tr key={method.name}>
                                 <td>
-                                    <span class="code">
-                                        {method.nameInKebabCase}
-                                    </span>
+                                    <span class="code">{method.name}</span>
                                 </td>
                                 <td>{method.description}</td>
                                 <td colspan="3"></td>

package/src/modules/doc/xmlContent/xmlContent.html

@@ -2,16 +2,10 @@
     <doc-content-layout
         lwc:if={displayContent}
         lwc:ref="docContentLayout"
-        coveo-organization-id={coveoOrganizationId}
-        coveo-public-access-token={coveoPublicAccessToken}
-        coveo-analytics-token={coveoAnalyticsToken}
-        coveo-search-hub={coveoSearchHub}
-        coveo-advanced-query-config={coveoAdvancedQueryConfig}
         sidebar-header={docTitle}
         sidebar-content={sidebarContent}
         sidebar-value={sidebarValue}
         onselect={handleSelect}
-        use-old-sidebar={useOldSidebar}
         onlangchange={handleLanguageChange}
         languages={sidebarFooterContent.languages}
         language={sidebarFooterContent.language}

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -1,9 +1,7 @@
 /* eslint-disable @lwc/lwc/no-document-query */
 import { api, track } from "lwc";
-import { normalizeBoolean } from "dxUtils/normalizers";
 import { FetchContent } from "./utils";
 import {
-    CoveoAdvancedQueryXMLConfig,
     DocLanguage,
     DocVersion,
     TreeNode,
@@ -16,7 +14,7 @@ import {
 } from "./types";
 import { SearchSyncer } from "docUtils/searchSyncer";
 import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
-import { logCoveoPageView, oldVersionDocInfo } from "docUtils/utils";
+import { oldVersionDocInfo } from "docUtils/utils";
 import { Breadcrumb, DocPhaseInfo, Language } from "typings/custom";
 import { track as trackGTM } from "dxUtils/analytics";
 import DOMPurify from "dompurify";
@@ -42,10 +40,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     internalLinkClicked: boolean;
 }> {
     @api apiDomain = "https://developer.salesforce.com";
-    @api coveoOrganizationId!: string;
-    @api coveoPublicAccessToken!: string;
-    @api coveoAnalyticsToken!: string;
-    @api coveoSearchHub!: string;
     @api hideFooter = false;
 
     @api
@@ -59,15 +53,6 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
     }
 
-    @api
-    get enableCoveo() {
-        return this._enableCoveo;
-    }
-
-    set enableCoveo(value) {
-        this._enableCoveo = normalizeBoolean(value);
-    }
-
     private availableLanguages: Array<DocLanguage> = [];
     @track private availableVersions: Array<DocVersion> = [];
     private contentProvider?: FetchContent;
@@ -83,7 +68,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     private docTitle = "";
     private _pathName = "";
     private listenerAttached = false;
-    private _enableCoveo?: boolean = false;
     private sidebarFooterContent: SiderbarFooter = { ...defaultSidebarFooter };
     private latestVersion = false;
     private previewVersion = false;
@@ -260,35 +244,13 @@ export default class DocXmlContent extends LightningElementWithState<{
         // Coveo is enabled and the version is greater than  51 (within the latest 3 versions)
         // TODO: we need a better fix for version number check
         return !(
-            this.enableCoveo &&
-            this.coveoOrganizationId &&
-            this.coveoPublicAccessToken &&
-            (!this.version?.releaseVersion ||
-                (this.version?.releaseVersion &&
-                    parseInt(
-                        this.version.releaseVersion.replace("v", ""),
-                        10
-                    ) >= 53))
+            !this.version?.releaseVersion ||
+            (this.version?.releaseVersion &&
+                parseInt(this.version.releaseVersion.replace("v", ""), 10) >=
+                    53)
         );
     }
 
-    private get coveoAdvancedQueryConfig(): CoveoAdvancedQueryXMLConfig {
-        const config: {
-            locale?: string;
-            topicid?: string;
-            version?: string;
-        } = {
-            locale: this.languageId,
-            topicid: this.deliverable
-        };
-
-        if (this.releaseVersionId && this.releaseVersionId !== "noversion") {
-            config.version = this.releaseVersionId;
-        }
-
-        return config;
-    }
-
     private get pageHeader(): Header {
         if (!this._pageHeader) {
             this._pageHeader = document.querySelector("doc-header")!;
@@ -589,7 +551,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     updateUrl(method = HistoryState.PUSH_STATE): void {
-        logCoveoPageView(this.coveoOrganizationId, this.coveoAnalyticsToken);
         window.history[method](
             {},
             "docs",

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.