@salesforcedevs/docs-components 0.56.2-comp-flex-ref-1 → 0.56.2-example

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

@@ -2,7 +2,9 @@ import { LightningElement, api, track } from "lwc";
 import { noCase } from "no-case";
 import { sentenceCase } from "sentence-case";
 import qs from "query-string";
-import { AmfModelParser } from "./utils";
+import { AmfModelParser } from "doc/amfModelParser";
+import { normalizeBoolean, toJson } from "dxUtils/normalizers";
+import type { OptionWithLink } from "typings/custom";
 import type {
     AmfConfig,
     AmfMetadataTopic,
@@ -24,19 +26,35 @@ import {
     REFERENCE_TYPES,
     oldReferenceIdNewReferenceIdMap
 } from "./constants";
+import { restoreScroll } from "dx/scrollManager";
+import { DocPhaseInfo } from "typings/custom";
+import { logCoveoPageView, oldVersionDocInfo } from "docUtils/utils";
+
+type NavigationItem = {
+    label: string;
+    name: string;
+    isExpanded: boolean;
+    children: ParsedMarkdownTopic[];
+    isChildrenLoading: boolean;
+};
 
 export default class AmfReference extends LightningElement {
-    @api breadcrumbs?: string | null | undefined = null;
+    @api breadcrumbs: string | null = null;
     @api sidebarHeader!: string;
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
-    @api coveoAdvancedQueryConfig!: string;
+    @api coveoAnalyticsToken!: string;
     @api coveoSearchHub!: string;
-    @api useOldSidebar?: boolean = false;
+    @api useOldSidebar: boolean = false;
     @api tocTitle?: string;
     @api tocOptions?: string;
-    @track navigation = [];
+    @api languages!: OptionWithLink[];
+    @api language!: string;
+    @api hideFooter = false;
+    @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
@@ -100,20 +118,30 @@ export default class AmfReference extends LightningElement {
                 this.versions = this.getVersions();
             }
             this.selectedVersion = selectedVersion;
+            if (this.isSpecBasedReference(this._currentReferenceId)) {
+                this.isVersionFetched = true;
+                if (this.oldVersionInfo) {
+                    this.showVersionBanner = true;
+                } else {
+                    this.latestVersion = true;
+                }
+            }
+        } else {
+            this.isVersionFetched = true;
         }
 
         // This is to check if the url is hash based and redirect if needed
         const redirectUrl = this.getHashBasedRedirectUrl();
         if (redirectUrl) {
-            location.href = redirectUrl;
+            window.location.href = redirectUrl;
         } else {
             this.updateAmfConfigInView();
         }
     }
 
     @api
-    get docPhaseInfo() {
-        return this.selectedReferenceDocPhase;
+    get docPhaseInfo(): string | null {
+        return this.selectedReferenceDocPhase || null;
     }
 
     set docPhaseInfo(value: string) {
@@ -123,18 +151,56 @@ export default class AmfReference extends LightningElement {
         }
     }
 
+    @api
+    get expandChildren() {
+        return this._expandChildren;
+    }
+
+    set expandChildren(value) {
+        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;
+    }
+
     // model
     protected _amfConfigList: AmfConfig[] = [];
     protected _amfConfigMap: Map<string, AmfConfig> = new Map();
     protected _referenceSetConfig!: ReferenceSetConfig;
     protected _currentReferenceId = "";
 
-    protected parentReferenceUrls = [];
+    protected parentReferenceUrls = [] as string[];
     protected amfMap: Record<string, AmfModelRecord> = {};
-    protected amfFetchPromiseMap = {};
+    protected amfFetchPromiseMap = {} as any;
     protected metadata: { [key: string]: AmfMetadataTopic } = {};
     protected selectedTopic?: AmfMetaTopicType = undefined;
-    protected selectedSidebarValue = undefined;
+    protected selectedSidebarValue: string | undefined = undefined;
 
     protected selectedVersion: ReferenceVersion | null = null;
 
@@ -142,6 +208,9 @@ export default class AmfReference extends LightningElement {
 
     private isParentLevelDocPhaseEnabled = false;
     private selectedReferenceDocPhase?: string | null = null;
+    private _expandChildren?: boolean = false;
+    private isVersionFetched = false;
+    private latestVersion = false;
 
     /**
      * Key for storing the currently selected reference url. This will be used to save the
@@ -154,6 +223,7 @@ export default class AmfReference extends LightningElement {
 
     constructor() {
         super();
+
         this._boundOnApiNavigationChanged =
             this.onApiNavigationChanged.bind(this);
         this._boundUpdateSelectedItemFromUrlQuery =
@@ -209,13 +279,14 @@ export default class AmfReference extends LightningElement {
             if (strippedHashItems.length) {
                 const referenceId = strippedHashItems[0];
                 const meta = strippedHashItems[1];
+                const encodedMeta = this.getUrlEncoded(meta);
                 const updatedReferenceId =
                     oldReferenceIdNewReferenceIdMap[referenceId];
                 const newReferenceId = updatedReferenceId || referenceId;
                 const referenceItemConfig =
                     this.getAmfConfigWithId(newReferenceId);
                 if (referenceItemConfig) {
-                    hashBasedRedirectUrl = `${referenceItemConfig.href}?meta=${meta}`;
+                    hashBasedRedirectUrl = `${referenceItemConfig.href}?meta=${encodedMeta}`;
                 }
             }
         }
@@ -268,6 +339,17 @@ export default class AmfReference extends LightningElement {
         return referenceId;
     }
 
+    private get oldVersionInfo(): DocPhaseInfo | null {
+        let info = null;
+        if (this.versions.length > 1 && this.selectedVersion) {
+            const currentGAVersionRef = this.versions[0];
+            if (this.selectedVersion.id !== currentGAVersionRef.id) {
+                info = oldVersionDocInfo(currentGAVersionRef.link.href);
+            }
+        }
+        return info;
+    }
+
     /**
      * @returns versions to be shown in the dropdown
      * For markdown based specs, Adds selected markdown topic url to same references
@@ -298,13 +380,13 @@ export default class AmfReference extends LightningElement {
     /**
      * Returns the selected version or the first available version.
      */
-    private getSelectedVersion(): ReferenceVersion {
+    private getSelectedVersion(): ReferenceVersion | null {
         const versions = this._referenceSetConfig?.versions || [];
         const selectedVersion = versions.find(
             (v: ReferenceVersion) => v.selected
         );
         // return a selected version if there is one, else return the first one.
-        return selectedVersion || (versions.length && versions[0]);
+        return selectedVersion || (versions.length && versions[0]) || null;
     }
 
     private updateAmfConfigInView(): void {
@@ -318,9 +400,11 @@ export default class AmfReference extends LightningElement {
         }
     }
 
-    private async fetchAmf(amfConfig): Promise<AmfModel | AmfModel[]> {
+    private async fetchAmf(
+        amfConfig: AmfConfig
+    ): Promise<AmfModel | AmfModel[]> {
         const { amf } = amfConfig;
-        const response = await fetch(amf, {
+        const response = await fetch(amf!, {
             headers: {
                 "Cache-Control": `max-age=86400`
             }
@@ -339,7 +423,7 @@ export default class AmfReference extends LightningElement {
     /**
      * Returns whether given url is parent reference path like ../example-project/references/reference-id
      */
-    private isParentReferencePath(urlPath: string): boolean {
+    private isParentReferencePath(urlPath?: string | null): boolean {
         if (!urlPath) {
             return false;
         }
@@ -351,13 +435,28 @@ export default class AmfReference extends LightningElement {
         return parentReferenceIndex !== -1;
     }
 
+    /**
+     * Expands the children of Markdown-based References.
+     */
+    private expandChildrenForMarkdownReferences(
+        children: ParsedMarkdownTopic[]
+    ): void {
+        if (!children) {
+            return;
+        }
+        for (const childNode of children) {
+            childNode.isExpanded = true;
+            this.expandChildrenForMarkdownReferences(childNode.children);
+        }
+    }
+
     /**
      * Populates reference Items from amfConfigList and assigns it to navigation for sidebar
      */
     private populateReferenceItems(): void {
-        const navAmfOrder = [];
+        const navAmfOrder = [] as NavigationItem[];
         for (const [index, amfConfig] of this._amfConfigList.entries()) {
-            let navItemChildren = [];
+            let navItemChildren = [] as ParsedMarkdownTopic[];
             let isChildrenLoading = false;
             if (amfConfig.referenceType !== REFERENCE_TYPES.markdown) {
                 if (amfConfig.isSelected) {
@@ -371,13 +470,24 @@ export default class AmfReference extends LightningElement {
                 }
                 isChildrenLoading = true;
             } else {
-                navItemChildren = amfConfig.topic.children;
+                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;
             }
             // store nav items for each spec in order
             navAmfOrder[index] = {
                 label: amfConfig.title,
                 name: amfConfig.href,
-                isExpanded: amfConfig.isSelected,
+                isExpanded:
+                    amfConfig.isSelected ||
+                    this.isExpandChildrenEnabled(amfConfig.id),
                 children: navItemChildren,
                 isChildrenLoading
             };
@@ -386,6 +496,15 @@ export default class AmfReference extends LightningElement {
         this.navigation = navAmfOrder;
     }
 
+    /**
+     * Returns a boolean indicating whether the children should be expanded or not.
+     */
+    private isExpandChildrenEnabled(referenceId: string): boolean {
+        return (
+            !!this.expandChildren && this._currentReferenceId === referenceId
+        );
+    }
+
     /**
      * Stores fetched AMF JSON value.
      * Creates and stores a new AmfModelParser instance for the AMF spec.
@@ -427,15 +546,18 @@ export default class AmfReference extends LightningElement {
         referenceId: string,
         items: ParsedTopicModel[]
     ): NavItem[] {
-        const methodList = [];
+        const methodList = [] as NavItem[];
 
         items.forEach((item) => {
             item.methods?.forEach((method) => {
+                const title =
+                    this.getTitleForLabel(method.label!) || method.method;
                 const meta = this.addToMetadata(
                     parentReferencePath,
                     referenceId,
                     "method",
-                    method
+                    method,
+                    title
                 );
                 methodList.push(
                     Object.assign(method, {
@@ -443,8 +565,7 @@ export default class AmfReference extends LightningElement {
                             parentReferencePath,
                             meta
                         ),
-                        label:
-                            this.getTitleForLabel(method.label) || method.method
+                        label: title
                     })
                 );
             });
@@ -459,7 +580,9 @@ export default class AmfReference extends LightningElement {
         parentReferencePath: string,
         meta: string
     ): string {
-        return meta ? `${parentReferencePath}?meta=${meta}` : "";
+        // update the encoded url meta param
+        const encodedMeta = meta ? this.getUrlEncoded(meta) : "";
+        return encodedMeta ? `${parentReferencePath}?meta=${encodedMeta}` : "";
     }
 
     /**
@@ -476,7 +599,8 @@ export default class AmfReference extends LightningElement {
         const parentReferencePath = amfConfig.href;
         const model = this.amfMap[referenceId].parser.parsedModel;
 
-        const children = [];
+        const children: any[] = [];
+        const expandChildren = this.isExpandChildrenEnabled(referenceId);
 
         NAVIGATION_ITEMS.forEach(
             ({ label, name, childrenPropertyName, type }) => {
@@ -488,7 +612,8 @@ export default class AmfReference extends LightningElement {
                             parentReferencePath,
                             referenceId,
                             type,
-                            summary
+                            summary,
+                            label
                         );
                         children.push({
                             label,
@@ -501,8 +626,8 @@ export default class AmfReference extends LightningElement {
                     }
                     case "endpoint":
                         if (
-                            model[childrenPropertyName] &&
-                            model[childrenPropertyName].length
+                            model[childrenPropertyName!] &&
+                            model[childrenPropertyName!].length
                         ) {
                             const amfTopicId = this.getFormattedIdentifier(
                                 referenceId,
@@ -511,7 +636,7 @@ export default class AmfReference extends LightningElement {
                             const childTopics = this.assignEndpointNavItems(
                                 parentReferencePath,
                                 referenceId,
-                                model[childrenPropertyName]
+                                model[childrenPropertyName!]
                             );
                             children.push({
                                 label,
@@ -519,30 +644,32 @@ export default class AmfReference extends LightningElement {
                                     parentReferencePath,
                                     this.metadata[amfTopicId]?.meta
                                 ),
-                                isExpanded: false,
+                                isExpanded: expandChildren,
                                 children: childTopics
                             });
                         }
                         break;
                     case "security":
                     case "type":
-                        if (model[childrenPropertyName]?.length) {
+                        if (model[childrenPropertyName!]?.length) {
                             // Sorting the types alphabetically
-                            model[childrenPropertyName].sort((typeA, typeB) => {
-                                const typeALbl = typeA.label.toLowerCase();
-                                const typeBLbl = typeB.label.toLowerCase();
-                                return typeALbl < typeBLbl
-                                    ? -1
-                                    : typeALbl > typeBLbl
-                                    ? 1
-                                    : 0;
-                            });
+                            model[childrenPropertyName!].sort(
+                                (typeA: any, typeB: any) => {
+                                    const typeALbl = typeA.label.toLowerCase();
+                                    const typeBLbl = typeB.label.toLowerCase();
+                                    return typeALbl < typeBLbl
+                                        ? -1
+                                        : typeALbl > typeBLbl
+                                        ? 1
+                                        : 0;
+                                }
+                            );
                         }
                     // eslint-disable-next-line no-fallthrough
                     default:
                         if (
-                            model[childrenPropertyName] &&
-                            model[childrenPropertyName].length
+                            model[childrenPropertyName!] &&
+                            model[childrenPropertyName!].length
                         ) {
                             const amfTopicId = this.getFormattedIdentifier(
                                 referenceId,
@@ -554,14 +681,15 @@ export default class AmfReference extends LightningElement {
                                     parentReferencePath,
                                     this.metadata[amfTopicId]?.meta
                                 ),
-                                isExpanded: false,
-                                children: model[childrenPropertyName].map(
-                                    (topic) => {
+                                isExpanded: expandChildren,
+                                children: model[childrenPropertyName!].map(
+                                    (topic: any) => {
                                         const meta = this.addToMetadata(
                                             parentReferencePath,
                                             referenceId,
                                             type,
-                                            topic
+                                            topic,
+                                            topic.label
                                         );
                                         return {
                                             label: topic.label,
@@ -590,17 +718,24 @@ export default class AmfReference extends LightningElement {
         parentReferencePath: string,
         referenceId: string,
         type: string,
-        topic: { id: string; domId: string }
+        topic: { id: string; domId: string },
+        navTitle: string
     ): string {
-        const { urlIdentifer, prefix } = URL_CONFIG[type];
+        const config = URL_CONFIG[type as keyof typeof URL_CONFIG];
+        const urlIdentifer = config.urlIdentifer;
+        let prefix = null;
+        if ("prefix" in config) {
+            prefix = config.prefix;
+        }
 
         // encodeURI to avoid special characters in the URL meta.
         const identifier =
-            topic[urlIdentifer] && this.encodeIdentifier(topic[urlIdentifer]);
-
+            urlIdentifer in topic &&
+            this.encodeIdentifier(topic[urlIdentifer as keyof typeof topic]);
+        let meta;
         // Assuming that there will be an identifier always
         if (identifier) {
-            const meta = prefix ? `${prefix}${identifier}` : `${identifier}`;
+            meta = prefix ? `${prefix}${identifier}` : `${identifier}`;
             this.metadata[meta] = {
                 parentReferencePath,
                 meta,
@@ -608,10 +743,11 @@ export default class AmfReference extends LightningElement {
                 amfId: topic.id,
                 elementId: topic.domId,
                 identifier,
-                type
+                type,
+                navTitle
             };
-            return meta;
         }
+        return meta!;
     }
 
     /**
@@ -622,7 +758,7 @@ export default class AmfReference extends LightningElement {
             (metadata: AmfMetadataTopic) => {
                 return routeMeta.meta === metadata.meta;
             }
-        );
+        )!;
     }
 
     /**
@@ -636,7 +772,7 @@ export default class AmfReference extends LightningElement {
         return Object.values(this.metadata).find(
             (metadata: AmfMetadataTopic) =>
                 referenceId === metadata.referenceId && amfId === metadata.amfId
-        );
+        )!;
     }
 
     /**
@@ -651,7 +787,7 @@ export default class AmfReference extends LightningElement {
             (metadata: AmfMetadataTopic) =>
                 referenceId === metadata.referenceId &&
                 identifier === metadata.identifier
-        );
+        )!;
     }
 
     /**
@@ -665,7 +801,7 @@ export default class AmfReference extends LightningElement {
         return Object.values(this.metadata).find(
             (metadata: AmfMetadataTopic) =>
                 referenceId === metadata.referenceId && type === metadata.type
-        );
+        )!;
     }
 
     /**
@@ -704,10 +840,13 @@ export default class AmfReference extends LightningElement {
         meta?: string
     ): void {
         if (meta) {
+            // update the encoded url meta param
+            const encodedMeta = this.getUrlEncoded(meta);
+
             window.history.pushState(
                 {},
                 "",
-                `${parentReferencePath}?meta=${meta}`
+                `${parentReferencePath}?meta=${encodedMeta}`
             );
         }
     }
@@ -720,10 +859,13 @@ export default class AmfReference extends LightningElement {
         meta?: string
     ): void {
         if (meta) {
+            // update the encoded url meta param
+            const encodedMeta = this.getUrlEncoded(meta);
+
             window.history.replaceState(
-                {},
+                window.history.state,
                 "",
-                `${parentReferencePath}?meta=${meta}`
+                `${parentReferencePath}?meta=${encodedMeta}`
             );
         }
     }
@@ -737,9 +879,8 @@ export default class AmfReference extends LightningElement {
             this._currentReferenceId
         );
         if (specBasedReference) {
-            const currentMeta: RouteMeta | null = this.getReferenceMetaInfo(
-                window.location.href
-            );
+            const currentMeta: RouteMeta | undefined =
+                this.getReferenceMetaInfo(window.location.href);
             const metadata =
                 currentMeta && this.getMetadataByUrlQuery(currentMeta);
             if (metadata) {
@@ -762,18 +903,20 @@ export default class AmfReference extends LightningElement {
         } else {
             this.loadMarkdownBasedReference();
         }
+
+        restoreScroll(); // don't try this at home kids
     }
 
     /**
      * The API Navigation event will always intend to navigate within the current reference
      * @param event
      */
-    protected onApiNavigationChanged(event: CustomEvent): void {
+    protected onApiNavigationChanged(): void {
         const specBasedReference = this.isSpecBasedReference(
             this._currentReferenceId
         );
         if (specBasedReference) {
-            const { meta } = this.selectedTopic;
+            const { meta } = this.selectedTopic!;
             const metadata = this.metadata[meta];
             if (metadata) {
                 const {
@@ -847,14 +990,21 @@ export default class AmfReference extends LightningElement {
     }
 
     /**
-     * @returns meta query param from given Url
+     * Returns the decoded meta query param from given Url as it is being used internally.
      */
     getMetaFromUrl(referenceUrl: string): string {
         const indexOfQueryParam = referenceUrl.indexOf("?");
         const urlPath = referenceUrl.substring(
             indexOfQueryParam >= 0 ? indexOfQueryParam : referenceUrl.length
         );
-        return this.parseParams(urlPath)["meta"] as string;
+        const meta = this.parseParams(urlPath).meta as string;
+        // Always get the meta query param encoded and decode it and store it for internal use
+        // This has 2 advantages,
+        // 1. Supports backward compatible meta query param, so there is no need for redirects.
+        // 2. Supports Prerender and Coveo for their crawling.
+        const encodedMeta = meta && this.getUrlEncoded(meta);
+        const decodedMeta = encodedMeta && decodeURIComponent(encodedMeta);
+        return decodedMeta || "";
     }
 
     /**
@@ -875,6 +1025,21 @@ export default class AmfReference extends LightningElement {
         return meta;
     }
 
+    /**
+     * Gets the encoded url.
+     * This method will return the encoded url for 2 cases,
+     * 1. If the url is encoded already
+     * 2. If the url is decoded
+     */
+    getUrlEncoded(url: string): string {
+        // if url matches, then return the encoded url.
+        if (decodeURIComponent(url) === url) {
+            return encodeURIComponent(url);
+        }
+        // return the encoded url.
+        return this.getUrlEncoded(decodeURIComponent(url));
+    }
+
     /**
      *
      * @returns RouteMeta object for given referenceUrl
@@ -882,7 +1047,8 @@ export default class AmfReference extends LightningElement {
      * For spec based references gets meta parm from url and then topicId & type from meta
      * For markdown based references gets topicId as last html path in the name, meta & type will be empty
      */
-    getReferenceMetaInfo(referenceUrl: string): RouteMeta | undefined {
+    getReferenceMetaInfo(referenceUrl: string | null): RouteMeta | undefined {
+        let metaReferenceInfo;
         if (referenceUrl) {
             const referenceId = this.getReferenceIdFromUrl(referenceUrl);
             let meta = "";
@@ -902,54 +1068,67 @@ export default class AmfReference extends LightningElement {
             } else {
                 topicId = this.getMarkdownReferenceMeta(referenceUrl);
             }
-            return {
+            metaReferenceInfo = {
                 referenceId,
                 meta,
                 topicId,
                 type
             };
         }
+        return metaReferenceInfo;
     }
 
     /**
-     * Finds and returns referenceUrl if given topic url matches
+     * Finds and returns referenceUrl and topicTitle if given topic url matches
      */
-    getReferenceUrlInGivenTopics(
+    getReferenceDetailsInGivenTopics(
         topics: ParsedMarkdownTopic[],
         topicMeta: string
-    ): string {
+    ): { referenceUrl: string; topicTitle: string } {
         let referenceUrl = "";
+        let topicTitle = "";
         for (let i = 0; i < topics.length; i++) {
             const topic = topics[i];
-            const meta = this.getMarkdownReferenceMeta(topic.link.href);
+            const meta = this.getMarkdownReferenceMeta(topic.link!.href);
             const childTopics = topic.children;
             if (meta === topicMeta) {
-                referenceUrl = topic.link.href;
+                referenceUrl = topic.link!.href;
+                topicTitle = topic.label;
             } else if (childTopics && childTopics.length) {
-                referenceUrl = this.getReferenceUrlInGivenTopics(
+                const referenceDetails = this.getReferenceDetailsInGivenTopics(
                     childTopics,
                     topicMeta
                 );
+                referenceUrl = referenceDetails.referenceUrl;
+                topicTitle = referenceDetails.topicTitle;
             }
-            if (referenceUrl) {
+            if (referenceUrl && topicTitle) {
                 break;
             }
         }
-        return referenceUrl;
+        return {
+            referenceUrl,
+            topicTitle
+        };
     }
 
     /**
-     * Gives referenceUrl for given markdown topic url
+     * Gives referenceUrl and topicTitle for given markdown topic url
      */
-    getRefLinkForGivenTopicMeta(
+    getRefDetailsForGivenTopicMeta(
         referenceId: string,
         topicMeta: string
-    ): string | undefined {
+    ): { referenceUrl: string; topicTitle: string } | undefined {
         const amfConfig = this.getAmfConfigWithId(referenceId);
+        let referenceDetails;
         if (amfConfig) {
             const topics = amfConfig.topic?.children || [];
-            return this.getReferenceUrlInGivenTopics(topics, topicMeta);
+            referenceDetails = this.getReferenceDetailsInGivenTopics(
+                topics,
+                topicMeta
+            );
         }
+        return referenceDetails;
     }
 
     /**
@@ -1016,19 +1195,22 @@ export default class AmfReference extends LightningElement {
                         "",
                         selectedItemMetaData.meta
                     );
+
                     this.updateUrlWithSelected(
                         selectedItemMetaData.parentReferencePath,
                         selectedItemMetaData.meta
                     );
+                    this.updateTags(selectedItemMetaData.navTitle);
                 }
             });
         } else {
-            let invalidTopicReferenceUrl = "";
+            let invalidTopicReferenceUrl: string | null = "";
             if (topicId) {
-                const selectedItemUrl = this.getRefLinkForGivenTopicMeta(
+                const referenceDetails = this.getRefDetailsForGivenTopicMeta(
                     referenceId,
                     topicId
                 );
+                const selectedItemUrl = referenceDetails?.referenceUrl;
                 if (!selectedItemUrl) {
                     invalidTopicReferenceUrl = previousRefUrlInSession;
                 }
@@ -1045,7 +1227,7 @@ export default class AmfReference extends LightningElement {
         const referenceId = this.getReferenceIdFromUrl(url);
         const referenceItem = this.getAmfConfigWithId(referenceId);
         if (referenceItem) {
-            location.href = referenceItem.href;
+            window.location.href = referenceItem.href;
         }
     }
 
@@ -1056,7 +1238,10 @@ export default class AmfReference extends LightningElement {
      * set selected sidebar value as a pathname
      */
 
-    private loadMarkdownBasedReference(referenceUrl?: string): void {
+    private loadMarkdownBasedReference(referenceUrl?: string | null): void {
+        // MILES TODO: figure out if we ever need to log a coveo page view in here
+        // this would be the case if at some point we 'load' a new 'markdown based reference'
+        // without actually triggering a page load
         let referenceId = "";
         const currentUrl = window.location.href;
         if (this.isProjectRootPath()) {
@@ -1070,7 +1255,7 @@ export default class AmfReference extends LightningElement {
              * CASE2: This case is to navigate to respective reference when the user clicked on root item
              * Ex: .../references/markdown-ref should navigate to first topic.
              */
-            referenceId = this.getReferenceIdFromUrl(referenceUrl);
+            referenceId = this.getReferenceIdFromUrl(referenceUrl!);
         } else if (this.isParentReferencePath(currentUrl)) {
             /**
              * CASE3: This case is to navigate to respective reference when the user entered url with reference id
@@ -1084,39 +1269,66 @@ export default class AmfReference extends LightningElement {
              */
             const referenceMeta = this.getMarkdownReferenceMeta(referenceUrl);
             const selectedItemRefId = this.getReferenceIdFromUrl(referenceUrl);
-            const selectedItemUrl = this.getRefLinkForGivenTopicMeta(
+            const referenceDetails = this.getRefDetailsForGivenTopicMeta(
                 selectedItemRefId,
                 referenceMeta
             );
+            const selectedItemUrl = referenceDetails?.referenceUrl;
             if (!selectedItemUrl) {
                 referenceId = this.getReferenceIdFromUrl(referenceUrl);
             }
         }
 
+        let isRedirecting = false;
         if (referenceId) {
             const amfConfig = this.getAmfConfigWithId(referenceId);
             let redirectReferenceUrl = "";
             if (amfConfig) {
-                const childrenItems = amfConfig.topic.children;
+                const childrenItems = amfConfig.topic!.children;
                 if (childrenItems.length > 0) {
-                    redirectReferenceUrl = childrenItems[0].link.href;
+                    redirectReferenceUrl = childrenItems[0].link!.href;
                 }
             }
             if (redirectReferenceUrl) {
                 if (this.isParentReferencePath(referenceUrl)) {
                     // This is for CASE2 mentioned above, Where we need to navigate user to respective href
-                    location.href = redirectReferenceUrl;
+                    isRedirecting = true;
+                    window.location.href = redirectReferenceUrl;
                 } else {
                     // This is for CASE 1,3 and 4 mentioned above, Where we need to update the browser history
-                    window.history.replaceState({}, "", redirectReferenceUrl);
+                    window.history.replaceState(
+                        window.history.state,
+                        "",
+                        redirectReferenceUrl
+                    );
                 }
             }
         }
+        if (!isRedirecting) {
+            const currentReferenceUrl = window.location.href;
+            const referenceMeta =
+                this.getMarkdownReferenceMeta(currentReferenceUrl);
+            const selectedItemRefId =
+                this.getReferenceIdFromUrl(currentReferenceUrl);
+            const referenceDetails = this.getRefDetailsForGivenTopicMeta(
+                selectedItemRefId,
+                referenceMeta
+            );
+            if (referenceDetails) {
+                this.updateTags(referenceDetails.topicTitle);
+            }
 
-        this.versions = this.getVersions();
+            this.versions = this.getVersions();
+            if (this.oldVersionInfo) {
+                this.showVersionBanner = true;
+            } else {
+                this.latestVersion = true;
+            }
 
-        this.updateDocPhase();
-        this.selectedSidebarValue = window.location.pathname;
+            this.isVersionFetched = true;
+            this.updateDocPhase();
+            this.selectedSidebarValue = window.location.pathname;
+        }
     }
 
     /**
@@ -1130,11 +1342,71 @@ export default class AmfReference extends LightningElement {
         );
     }
 
+    handleDismissVersionBanner() {
+        this.showVersionBanner = false;
+    }
+
+    private updateTags(navTitle = ""): void {
+        if (!navTitle) {
+            return;
+        }
+
+        // this is required to update the nav title meta tag.
+        // eslint-disable-next-line @lwc/lwc/no-document-query
+        const metaNavTitle = document.querySelector('meta[name="nav-title"]');
+        // eslint-disable-next-line @lwc/lwc/no-document-query
+        const titleTag = document.querySelector("title");
+        const TITLE_SEPARATOR = " | ";
+
+        if (metaNavTitle) {
+            metaNavTitle.setAttribute("content", navTitle);
+        }
+
+        /**
+         * Right now, the title tag only changes when you pick a Ref spec,
+         * not every time you choose a subsection of the Ref spec.
+         * This update aims to refresh the title tag with each selection.
+         * If a Ref spec is chosen, we add the value of the <selected topic> to the title.
+         * If a subsection is selected, we update the first part of the current
+         * title with the new <selected topic>.
+         * Example: Following is a sample project structure.
+         * - Project Name
+         *  - Ref Spec1
+         *      - Summary
+         *      - Endpoints
+         *          - E1
+         *          - E2
+         *  - Ref Spec2
+         *      - Summary
+         *      - Endpoints
+         *          - E1 (Selected)
+         *          - E2
+         * Previous Title: Ref Spec2 | Project Name | Salesforce Developer
+         * New Title: E1 | Ref Spec2 | Project Name | Salesforce Developer
+         *
+         */
+        if (titleTag) {
+            let titleTagValue = titleTag.textContent;
+            const titleTagSectionValues: string[] =
+                titleTagValue?.split(TITLE_SEPARATOR);
+            if (titleTagSectionValues) {
+                if (titleTagSectionValues.length <= 3) {
+                    titleTagValue = navTitle + TITLE_SEPARATOR + titleTagValue;
+                } else {
+                    titleTagSectionValues[0] = navTitle;
+                    titleTagValue = titleTagSectionValues.join(TITLE_SEPARATOR);
+                }
+            }
+            titleTag.textContent = titleTagValue;
+        }
+    }
+
     onNavSelect(event: CustomEvent): void {
         const name = event.detail.name;
         if (name) {
-            const referenceId = this.getReferenceIdFromUrl(name);
-            const specBasedReference = this.isSpecBasedReference(referenceId);
+            const urlReferenceId = this.getReferenceIdFromUrl(name);
+            const specBasedReference =
+                this.isSpecBasedReference(urlReferenceId);
             if (specBasedReference) {
                 const metaVal = this.getMetaFromUrl(name);
                 const currentSelectedMeta = this.selectedTopic
@@ -1163,7 +1435,13 @@ export default class AmfReference extends LightningElement {
                         elementId,
                         metaVal
                     );
+
+                    logCoveoPageView(
+                        this.coveoOrganizationId,
+                        this.coveoAnalyticsToken
+                    );
                     this.updateUrlWithSelected(parentReferencePath, metaVal);
+                    this.updateTags(metadata.navTitle);
                 } else {
                     if (this.isParentReferencePath(name)) {
                         this.loadNewReferenceItem(name);
@@ -1195,16 +1473,22 @@ export default class AmfReference extends LightningElement {
 
     handleSelectedItem(): void {
         // update topic view
-        const { referenceId, amfId, type } = this.selectedTopic;
+        const { referenceId, amfId, type } = this.selectedTopic!;
+
+        // Adding stringify inside try/catch
+        let amfModelString = "";
+        try {
+            amfModelString = JSON.stringify(this.amfMap[referenceId].model);
+        } catch (error) {
+            console.error(`Error stringifying amf model: ${error}`);
+        }
 
         // This updates the component in the content section.
         this.topicModel = {
             type,
-            amf: this.amfMap[referenceId].model,
+            amf: amfModelString,
             parser: this.amfMap[referenceId].parser,
             id: amfId
         };
-
-        window.scrollTo({ top: 0, behavior: "smooth" });
     }
 }