@salesforcedevs/docs-components 1.28.5-redoc-alpha1 → 1.28.5-redoc-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/docs-components",
-  "version": "1.28.5-redoc-alpha1",
+  "version": "1.28.5-redoc-alpha2",
   "description": "Docs Lightning web components for DSC",
   "license": "MIT",
   "main": "index.js",

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

@@ -533,32 +533,32 @@ export default class AmfReference extends LightningElement {
         for (const [index, amfConfig] of this._amfConfigList.entries()) {
             let navItemChildren = [] as ParsedMarkdownTopic[];
             let isChildrenLoading = false;
-            if (amfConfig.renderWith === RENDER_WITH.redoc) {
-                // Redoc-rendered specs have no AMF model and no sub-tree; they
-                // appear as leaf items in the sidebar and open the Redoc UI on
-                // selection.
-            } else if (amfConfig.referenceType !== REFERENCE_TYPES.markdown) {
-                if (amfConfig.isSelected) {
-                    const amfPromise = this.fetchAmf(amfConfig).then(
-                        (amfJson) => {
-                            this.updateModel(amfConfig.id, amfJson);
-                            this.assignNavigationItemsFromAmf(amfConfig, index);
-                        }
-                    );
-                    this.amfFetchPromiseMap[amfConfig.id] = amfPromise;
-                }
-                isChildrenLoading = true;
-            } else {
-                const isExpandChildrenEnabled = this.isExpandChildrenEnabled(
-                    amfConfig.id
-                );
-                // check whether we should expand all the child nodes, this is required for Coveo to crawl.
-                if (isExpandChildrenEnabled) {
-                    this.expandChildrenForMarkdownReferences(
-                        amfConfig.topic!.children
-                    );
+            if (amfConfig.renderWith !== RENDER_WITH.redoc) {
+                if (amfConfig.referenceType !== REFERENCE_TYPES.markdown) {
+                    if (amfConfig.isSelected) {
+                        const amfPromise = this.fetchAmf(amfConfig).then(
+                            (amfJson) => {
+                                this.updateModel(amfConfig.id, amfJson);
+                                this.assignNavigationItemsFromAmf(
+                                    amfConfig,
+                                    index
+                                );
+                            }
+                        );
+                        this.amfFetchPromiseMap[amfConfig.id] = amfPromise;
+                    }
+                    isChildrenLoading = true;
+                } else {
+                    const isExpandChildrenEnabled =
+                        this.isExpandChildrenEnabled(amfConfig.id);
+                    // check whether we should expand all the child nodes, this is required for Coveo to crawl.
+                    if (isExpandChildrenEnabled) {
+                        this.expandChildrenForMarkdownReferences(
+                            amfConfig.topic!.children
+                        );
+                    }
+                    navItemChildren = amfConfig.topic!.children;
                 }
-                navItemChildren = amfConfig.topic!.children;
             }
             // store nav items for each spec in order
             navAmfOrder[index] = {

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

@@ -80,15 +80,12 @@ export interface AmfConfig {
     topic?: ParsedMarkdownTopic;
 
     /**
-     * Optional renderer override sent by the backend.
-     * When "redoc", spec-based references are rendered with Redoc instead of
-     * the AMF-based topic view. Other values fall back to the default pipeline.
+     * Required for rendering the arrow on LNB
      */
     renderWith?: string;
 
     /**
-     * Spec URL consumed by alternate renderers (e.g. Redoc). For redoc-rendered
-     * references this is the OpenAPI document URL.
+     * Spec URL consumed by alternate renderers (e.g. Redoc, Mulesoft).
      */
     source?: string;
 }

package/src/modules/doc/redocReference/redocReference.ts

@@ -15,12 +15,19 @@ declare global {
 
 declare const Sprig: (eventType: string, eventName: string) => void;
 
+type ReferenceTopic = {
+    link?: { href?: string };
+    children?: ReferenceTopic[];
+};
+
 type ReferenceItem = {
     source: string;
     href: string;
     title?: string;
     isSelected?: boolean;
     docPhase?: string | null;
+    referenceType?: string;
+    topic?: ReferenceTopic;
 };
 
 type ReferenceConfig = {
@@ -84,14 +91,11 @@ export default class RedocReference extends LightningElement {
     /** Title of the currently selected spec, shown beneath the project title. */
     @api
     get specTitle(): string | null {
-        if (this._specTitle) {
-            return this._specTitle;
-        }
-        return this.getSelectedReference()?.title ?? null;
+        return this._specTitle;
     }
 
     set specTitle(value: string | null) {
-        this._specTitle = value;
+        this._specTitle = value || this.getSelectedReference()?.title || null;
     }
 
     /**
@@ -104,13 +108,12 @@ export default class RedocReference extends LightningElement {
     }
 
     /**
-     * Navigates back to the previous history entry when the user clicks the
-     * project-title back link rendered above the Redoc UI.
+     * Navigates back to reference doc.
      */
-    private onBackClick(event: Event): void {
+    private onBackClick = (event: Event): void => {
         event.preventDefault();
         window.history.back();
-    }
+    };
 
     /** When origin is provided, pass it to the footer; otherwise use dx-footer's default. */
     get effectiveFooterOrigin(): string {
@@ -373,27 +376,18 @@ export default class RedocReference extends LightningElement {
         if (!this.showRedocHeader) {
             return;
         }
-        const menuContent =
-            redocContainer.querySelector<HTMLElement>(".menu-content");
-        if (
-            menuContent &&
-            !menuContent.querySelector(":scope > .redoc-project-header")
-        ) {
-            menuContent.insertBefore(
-                this.buildProjectHeaderDom(),
-                menuContent.firstChild
-            );
-        }
 
-        const apiContent =
-            redocContainer.querySelector<HTMLElement>(".api-content");
-        if (
-            apiContent &&
-            !apiContent.querySelector(":scope > .redoc-project-header")
-        ) {
-            apiContent.insertBefore(
+        for (const selector of [".menu-content", ".api-content"]) {
+            const target = redocContainer.querySelector<HTMLElement>(selector);
+            if (
+                !target ||
+                target.querySelector(":scope > .redoc-project-header")
+            ) {
+                continue;
+            }
+            target.insertBefore(
                 this.buildProjectHeaderDom(),
-                apiContent.firstChild
+                target.firstChild
             );
         }
     }
@@ -405,37 +399,40 @@ export default class RedocReference extends LightningElement {
         const wrapper = document.createElement("div");
         wrapper.className = "redoc-project-header";
 
-        if (this.projectTitle) {
+        /* TODO:
+         * Uncomment when doc-header is dropped with Vision state UX.
+         * if(this.projectTitle) {
+         */
+        if (this.specTitle) {
             const backLink = document.createElement("a");
             backLink.className = "redoc-project-back";
             backLink.href = "#";
-            backLink.addEventListener("click", (event) => {
-                event.preventDefault();
-                window.history.back();
-            });
-            // 16x16 utility/back icon. dx-icon size="medium" maps to
-            // --dx-g-icon-size-md (16px).
-            const iconEl = createElement("dx-icon", { is: DxIcon });
-            Object.assign(iconEl, {
+            backLink.addEventListener("click", this.onBackClick);
+
+            const icon = createElement("dx-icon", { is: DxIcon });
+            Object.assign(icon, {
                 sprite: "utility",
                 symbol: "back",
                 size: "medium"
             });
-            iconEl.classList.add("redoc-project-back-arrow");
+            icon.classList.add("redoc-project-back-arrow");
+
             const label = document.createElement("span");
             label.className = "redoc-project-title";
-            label.textContent = this.projectTitle;
-            backLink.appendChild(iconEl);
+            label.textContent = this.specTitle;
+
+            backLink.appendChild(icon);
             backLink.appendChild(label);
             wrapper.appendChild(backLink);
         }
 
-        if (this.specTitle) {
-            const specEl = document.createElement("h2");
-            specEl.className = "redoc-spec-title";
-            specEl.textContent = this.specTitle;
-            wrapper.appendChild(specEl);
-        }
+        // TODO: Uncomment when we we have vision state UX with no doc-header
+        // if (this.specTitle) {
+        //     const specEl = document.createElement("h2");
+        //     specEl.className = "redoc-spec-title";
+        //     specEl.textContent = this.specTitle;
+        //     wrapper.appendChild(specEl);
+        // }
 
         return wrapper;
     }