@salesforcedevs/docs-components 1.28.7-alpha.0 → 1.28.7-alpha.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.28.7-alpha.0",
+    "version": "1.28.7-alpha.10",
     "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": "fd19dde09113f8458a649b7f5e27fac4db3d2bb5"
+    "gitHead": "6418874a60d7d6e4404e13517f2aa5c2746b1f39"
 }

package/src/modules/doc/contentLayout/contentLayout.css

@@ -1 +1,8 @@
 @import "docHelpers/contentLayoutStyle";
+
+/* Reserve sidebar space during load so layout doesn't shift when dx-sidebar or dx-sidebar-old renders. */
+.sidebar-placeholder {
+    flex-shrink: 0;
+    width: var(--dx-c-sidebar-width, 337px);
+    min-height: var(--dx-c-sidebar-height);
+}

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

@@ -1,32 +1,40 @@
 <template>
     <div class="content">
-        <dx-sidebar-old
-            lwc:if={useOldSidebar}
-            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>
-        <dx-sidebar
-            lwc:else
-            class="is-sticky left-nav-bar"
-            trees={sidebarContent}
-            value={sidebarValue}
-            header={sidebarHeader}
-            ontogglesidebar={onToggleSidebar}
-        >
-            <slot name="sidebar-header" slot="version-picker"></slot>
-        </dx-sidebar>
+        <template lwc:if={showDataCloudSidebar}>
+            <dx-sidebar
+                class="is-sticky left-nav-bar"
+                trees={sidebarContent}
+                value={sidebarValue}
+                header={sidebarHeader}
+                ontogglesidebar={onToggleSidebar}
+            >
+                <slot name="sidebar-header" slot="version-picker"></slot>
+            </dx-sidebar>
+        </template>
+        <template lwc:if={showOldSidebar}>
+            <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>
+        </template>
+        <template lwc:if={showSidebarPlaceholder}>
+            <div
+                class="sidebar-placeholder is-sticky left-nav-bar"
+                aria-hidden="true"
+            ></div>
+        </template>
         <div class="content-body-doc-phase-container">
             <div class="doc-phase-wrapper">
                 <slot name="doc-phase"></slot>

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

@@ -1,6 +1,7 @@
 /* eslint-disable @lwc/lwc/no-document-query */
 import { LightningElement, api, track } from "lwc";
 import { closest } from "kagekiri";
+import { fetchHasResults } from "dxUtils/dataCloudSearch";
 import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
 import { SearchSyncer } from "docUtils/searchSyncer";
@@ -108,9 +109,29 @@ export default class ContentLayout extends LightningElement {
         );
     }
 
+    /** Show Data Cloud sidebar only when not using old sidebar and the page has searchable results. */
+    protected get showDataCloudSidebar(): boolean {
+        return !this.useOldSidebar && this.hasDataCloudResults === true;
+    }
+
+    /** Show legacy sidebar when explicitly requested or when Data Cloud has no results. Don't show until we know (avoids flash). */
+    protected get showOldSidebar(): boolean {
+        return (
+            this.useOldSidebar === true || this.hasDataCloudResults === false
+        );
+    }
+
+    /** Show a space-holding placeholder while we're deciding which sidebar to show (avoids layout shift). */
+    protected get showSidebarPlaceholder(): boolean {
+        return !this.showDataCloudSidebar && !this.showOldSidebar;
+    }
+
     @track
     protected _sidebarContent: unknown;
 
+    @track
+    protected hasDataCloudResults: boolean | null = null;
+
     protected _breadcrumbs = null;
 
     @track
@@ -181,6 +202,11 @@ export default class ContentLayout extends LightningElement {
     }
 
     connectedCallback(): void {
+        if (!this.useOldSidebar) {
+            fetchHasResults().then((hasResults: boolean) => {
+                this.hasDataCloudResults = hasResults;
+            });
+        }
         const hasParentHighlightListener = closest(
             "doc-xml-content",
             this.template.host
@@ -257,7 +283,9 @@ export default class ContentLayout extends LightningElement {
         We have to account for the global nav changing height due to animations.
     */
     adjustNavPosition = () => {
-        const sidebarEl = this.template.querySelector("dx-sidebar-old");
+        const sidebarEl =
+            this.template.querySelector("dx-sidebar") ||
+            this.template.querySelector("dx-sidebar-old");
         const globalNavEl = document.querySelector(
             "hgf-c360nav"
         ) as HTMLElement;

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

@@ -1,6 +1,7 @@
 <template>
     <div class="content">
         <dx-sidebar-old
+            lwc:if={useOldSidebar}
             class="is-sticky left-nav-bar"
             trees={sidebarContent}
             value={sidebarValue}
@@ -15,6 +16,16 @@
         >
             <slot name="sidebar-header" slot="version-picker"></slot>
         </dx-sidebar-old>
+        <dx-sidebar
+            lwc:else
+            class="is-sticky left-nav-bar"
+            trees={sidebarContent}
+            value={sidebarValue}
+            header={sidebarHeader}
+            ontogglesidebar={onToggleSidebar}
+        >
+            <slot name="sidebar-header" slot="version-picker"></slot>
+        </dx-sidebar>
         <div class="content-body-doc-phase-container">
             <div class="doc-phase-wrapper">
                 <slot name="doc-phase"></slot>

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

@@ -251,17 +251,6 @@ export default class DocXmlContent extends LightningElementWithState<{
         return this.pageReference.deliverable;
     }
 
-    private get useOldSidebar(): boolean {
-        // 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.version?.releaseVersion ||
-            (this.version?.releaseVersion &&
-                parseInt(this.version.releaseVersion.replace("v", ""), 10) >=
-                    53)
-        );
-    }
-
     private get pageHeader(): Header {
         if (!this._pageHeader) {
             this._pageHeader = document.querySelector("doc-header")!;