@salesforcedevs/docs-components 0.55.9-docs-more-locales-1 → 0.56.2-comp-flex-ref-1

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

@@ -0,0 +1,76 @@
+const NAVIGATION_ITEMS = [
+    {
+        label: "Summary",
+        name: "summary",
+        childrenPropertyName: undefined,
+        type: "summary"
+    },
+    {
+        label: "Endpoints",
+        name: "endpoints",
+        childrenPropertyName: "endpoints",
+        type: "endpoint"
+    },
+    {
+        label: "Documentation",
+        name: "documentation",
+        childrenPropertyName: "docs",
+        type: "documentation"
+    },
+    {
+        label: "Types",
+        name: "types",
+        childrenPropertyName: "types",
+        type: "type"
+    },
+    {
+        label: "Security",
+        name: "security",
+        childrenPropertyName: "security",
+        type: "security"
+    }
+];
+
+const URL_CONFIG = {
+    summary: {
+        urlIdentifer: "label"
+    },
+    endpoint: {
+        urlIdentifer: "path"
+    },
+    method: {
+        urlIdentifer: "label"
+    },
+    documentation: {
+        urlIdentifer: "label"
+    },
+    type: {
+        urlIdentifer: "label",
+        prefix: "type:"
+    },
+    security: {
+        urlIdentifer: "label",
+        prefix: "security:"
+    }
+};
+
+export const REFERENCE_TYPES = {
+    markdown: "markdown",
+    raml: "rest-raml",
+    oa2: "rest-oa2",
+    oa3: "rest-oa3"
+};
+
+const oldReferenceIdNewReferenceIdMap: Record<string, string> = {
+    "commerce-api-assignments": "assignments",
+    "commerce-api-campaigns": "campaigns",
+    "commerce-api-catalogs": "catalogs",
+    "cdn-zones": "cdn-api-process-apis",
+    "inventory-impex": "impex",
+    "inventory-reservations": "inventory-reservation-service",
+    "shopper-login-and-api-access-service": "shopper-login",
+    "shopper-login-and-api-access-service-admin": "slas-admin",
+    "einstein-recommendations": "einstein-api-quick-start-guide"
+};
+
+export { NAVIGATION_ITEMS, URL_CONFIG, oldReferenceIdNewReferenceIdMap };

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

@@ -2,6 +2,7 @@ import { Json } from "typings/custom";
 
 export interface AmfTopicType {
     referenceId: string;
+    parentReferencePath: string;
     amfId: string;
     elementId: string;
     type: string;
@@ -53,11 +54,37 @@ export type DocPhaseEntry = {
     body: string;
 };
 
-export interface AmfConfig extends AmfModelRecord {
+export type ReferenceType = "markdown" | "rest-raml" | "rest-oa2" | "rest-oa3";
+
+/**
+ * Represents parsed topic for the sidebar.
+ */
+export interface ParsedMarkdownTopic {
+    label: string;
+    name: string;
+    children: ParsedMarkdownTopic[];
+    link?: {
+        href: string;
+        target?: string;
+    };
+}
+
+export interface AmfConfig {
     id: string;
-    amf: string;
     version?: string;
     docPhase?: DocPhaseEntry;
+    title: string;
+    href: string;
+    referenceType: ReferenceType;
+
+    // determines if a reference config is the current active and selected one.
+    isSelected: boolean;
+
+    // required for spec based references
+    amf?: string;
+
+    // required for markdown based references
+    topic?: ParsedMarkdownTopic;
 }
 
 export interface ParsedTopicModel {
@@ -84,10 +111,22 @@ export interface ReferenceVersion {
     label: string;
     deprecated?: boolean;
     selected?: boolean;
+    link: {
+        href: string;
+    };
 }
 
 export interface ReferenceSetConfig {
+    refId?: string;
     versionToRefMap?: Map<string, Array<AmfConfig>>;
     refList: Array<AmfConfig>;
-    versions?: Array<ReferenceVersion>;
+    versions: Array<ReferenceVersion>;
+}
+
+export interface RouteMeta {
+    meta: string;
+    referenceId: string;
+    topicId: string;
+    //type is only for spec based references
+    type?: string;
 }

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

@@ -20,6 +20,7 @@ const HIGHLIGHTABLE_SELECTOR = [
     "th",
     "td"
 ].join(",");
+const OBSERVER_ATTACH_WAIT_TIME = 500;
 
 export default class ContentLayout extends LightningElement {
     @api sidebarValue: string;
@@ -95,6 +96,8 @@ export default class ContentLayout extends LightningElement {
         target: window
     });
     private tocValue?: string = undefined;
+    private observerTimerId = null;
+    private didScrollToSelectedHash = false;
 
     get showToc(): boolean {
         return this.tocOptions && this.tocOptions.length > 0;
@@ -119,6 +122,18 @@ export default class ContentLayout extends LightningElement {
         }
     }
 
+    renderedCallback(): void {
+        /**
+         * Note: We are adding timeout because chrome is optimizing and not triggering recent renderedCallback though elements reference is changed
+         * Also we are considering recent renderedCallback
+         */
+        this.clearRenderObserverTimer();
+        this.observerTimerId = setTimeout(
+            this.attachInteractionObserver,
+            OBSERVER_ATTACH_WAIT_TIME
+        );
+    }
+
     disconnectedCallback(): void {
         this.disconnectObserver();
         window.removeEventListener(
@@ -126,19 +141,25 @@ export default class ContentLayout extends LightningElement {
             this.updateHighlighted
         );
         this.searchSyncer.dispose();
+        this.clearRenderObserverTimer();
     }
 
+    clearRenderObserverTimer = () => {
+        if (this.observerTimerId) {
+            clearTimeout(this.observerTimerId);
+        }
+    };
+
     updateHighlighted = (event: Event): void =>
         highlightTerms(
             this.querySelectorAll(HIGHLIGHTABLE_SELECTOR),
             (event as CustomEvent<string>).detail
         );
 
-    onSlotChange(event: Event): void {
+    attachInteractionObserver = (): void => {
         if (!this.enableSlotChange) {
             return;
         }
-
         this.disconnectObserver();
         this.observer = new IntersectionObserver((entries) => {
             entries.forEach(
@@ -150,30 +171,54 @@ export default class ContentLayout extends LightningElement {
             this.calculateActualSection();
         });
 
-        const anchoredTags = (event.target as HTMLSlotElement)
-            .assignedElements()
-            .filter(({ tagName }) => tagName === TOC_HEADER_TAG)
-            .map((tag) => {
-                tag.id = tag.hash;
-                return tag;
-            });
-
-        this._tocOptions = anchoredTags.map((tag) => ({
-            anchor: `#${tag.hash}`,
-            id: tag.id,
-            label: tag.title
-        }));
-
-        this.scrollToHash(anchoredTags);
-
-        anchoredTags.forEach((section) => {
-            const id = section.getAttribute("id");
+        // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
+        const headingElements = document.querySelectorAll(TOC_HEADER_TAG);
+        for (const headingElement of headingElements) {
+            // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
+            const id = headingElement.getAttribute("id");
             this.anchoredElements[id] = {
                 id,
                 intersect: false
             };
-            this.observer.observe(section);
-        });
+            this.observer.observe(headingElement);
+        }
+        if (!this.didScrollToSelectedHash) {
+            this.didScrollToSelectedHash = true;
+            this.scrollToHash(headingElements);
+        }
+    };
+
+    onSlotChange(event: Event): void {
+        const slotElements = (
+            event.target as HTMLSlotElement
+        ).assignedElements();
+
+        if (slotElements.length) {
+            const slotContentElement = slotElements[0];
+            const headingElements =
+                slotContentElement.ownerDocument?.getElementsByTagName(
+                    TOC_HEADER_TAG
+                );
+            for (const headingElement of headingElements) {
+                // Sometimes elements hash is not being set when slot content is wrapped with div
+                headingElement.hash =
+                    headingElement.attributes["hash"]?.nodeValue;
+            }
+            const tocOptions = [];
+            for (const headingElement of headingElements) {
+                headingElement.id = headingElement.hash;
+
+                // Update tocOptions from anchorTags
+                const tocItem = {
+                    anchor: `#${headingElement.hash}`,
+                    id: headingElement.id,
+                    label: headingElement.title
+                };
+                tocOptions.push(tocItem);
+            }
+
+            this._tocOptions = tocOptions;
+        }
     }
 
     private disconnectObserver(): void {
@@ -183,16 +228,15 @@ export default class ContentLayout extends LightningElement {
         }
     }
 
-    private scrollToHash(anchoredTags: Array<Element>): void {
+    private scrollToHash(headingElements: NodeListOf<Element>): void {
         let { hash } = window.location;
-
         if (hash) {
             hash = hash.substr(1);
-            const toScrollElement = anchoredTags.find(
-                (element) => element.getAttribute("id") === hash
-            );
-            if (toScrollElement) {
-                toScrollElement.scrollIntoView({ behavior: "auto" });
+            for (const headingElement of headingElements) {
+                if (headingElement.getAttribute("id") === hash) {
+                    headingElement.scrollIntoView({ behavior: "auto" });
+                    break;
+                }
             }
         }
     }

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

@@ -213,11 +213,16 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private get coveoAdvancedQueryConfig(): CoveoAdvancedQueryXMLConfig {
-        return {
+        const config: { locale: string; topicid: string; version?: string } = {
             locale: this.languageId,
-            version: this.releaseVersionId,
             topicid: this.deliverable
         };
+
+        if (this.releaseVersionId && this.releaseVersionId !== "noversion") {
+            config.version = this.releaseVersionId;
+        }
+
+        return config;
     }
 
     private get pageHeader(): Header {

package/src/modules/doc/amfReference/route-meta.ts

@@ -1,22 +0,0 @@
-/**
- * Represents the URL reference meta on Reference page.
- * Contains information on selected Reference ID, Topic ID, and Topic Type
- * separated by ":"
- */
-export class RouteMeta {
-    meta: string;
-    referenceId = "";
-    topicId = "";
-    type = "";
-
-    constructor(meta: string) {
-        this.meta = meta;
-
-        if (meta && meta.includes(":")) {
-            const [referenceId, type, topicId] = meta.split(":");
-            this.referenceId = referenceId;
-            this.topicId = topicId || type;
-            this.type = type;
-        }
-    }
-}