@salesforcedevs/docs-components 0.56.2 → 0.56.3-example

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

@@ -1,3 +1,4 @@
+/* eslint-disable @lwc/lwc/no-document-query */
 import { api, track } from "lwc";
 import { normalizeBoolean } from "dxUtils/normalizers";
 import { FetchContent } from "./utils";
@@ -7,24 +8,45 @@ import {
     DocVersion,
     TreeNode,
     Header,
+    SiderbarFooter,
     HistoryState,
-    PageReference
+    PageReference,
+    TocMap,
+    ContentData
 } from "./types";
-import { SearchSyncer } from "docUtils/SearchSyncer";
-import { LightningElementWithState } from "docBaseElements/lightningElementWithState";
-import { Language } from "typings/custom";
+import { SearchSyncer } from "docUtils/searchSyncer";
+import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
+import { logCoveoPageView, oldVersionDocInfo } from "docUtils/utils";
+import { Breadcrumb, DocPhaseInfo, Language } from "typings/custom";
+import { track as trackGTM } from "dxUtils/analytics";
+import DOMPurify from "dompurify";
 
 // TODO: Imitating from actual implementation as doc-content use it like this. We should refactor it later.
-const handleContentError = (error): void => console.log(error);
-
+const handleContentError = (error: any): void => console.log(error);
+
+const PIXEL_PER_CHARACTER_MAP: { [key: string]: number } = {
+    default: 7.7,
+    "ja-jp": 12.5
+};
+
+const defaultSidebarFooter: SiderbarFooter = {
+    bailHref: "",
+    bailLabel: "",
+    languages: [],
+    language: ""
+};
 export default class DocXmlContent extends LightningElementWithState<{
     isFetchingDocument: boolean;
     isFetchingContent: boolean;
     lastHighlightedSearch: string;
+    internalLinkClicked: boolean;
 }> {
     @api apiDomain = "https://developer.salesforce.com";
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
+    @api coveoAnalyticsToken!: string;
+    @api coveoSearchHub!: string;
+    @api hideFooter = false;
 
     @api
     get allLanguages(): Array<Language> {
@@ -47,21 +69,28 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private availableLanguages: Array<DocLanguage> = [];
-    private availableVersions: Array<DocVersion> = [];
-    private contentProvider: FetchContent;
+    @track private availableVersions: Array<DocVersion> = [];
+    private contentProvider?: FetchContent;
     private docContent = "";
-    private language: DocLanguage = null;
-    private loaded = false;
+    private language?: DocLanguage | null = null;
+    private displayContent = false;
+    private display404 = false;
+    private _pageHeader?: Header;
     private pdfUrl = "";
-    private tocMap = null;
-    private sidebarContent: Array<TreeNode> = null;
-    private version: DocVersion = null;
+    private tocMap: TocMap = {};
+    private sidebarContent: Array<TreeNode> | null = null;
+    private version: DocVersion | null = null;
     private docTitle = "";
-    private analyticsEvent = "custEv_ctaLinkClick";
     private _pathName = "";
-    private _pageHeader?: Header;
     private listenerAttached = false;
     private _enableCoveo?: boolean = false;
+    private sidebarFooterContent: SiderbarFooter = { ...defaultSidebarFooter };
+    private latestVersion = false;
+    private previewVersion = false;
+
+    private get enableFooter(): boolean {
+        return !this.hideFooter;
+    }
 
     private searchSyncer = new SearchSyncer({
         callbacks: {
@@ -101,7 +130,39 @@ export default class DocXmlContent extends LightningElementWithState<{
     });
     private _allLanguages: Array<Language> = [];
 
+    private get oldVersionInfo(): DocPhaseInfo | null {
+        let info = null;
+        if (!this.disableVersion) {
+            const currentGAVersion = this.versionOptions.find(
+                (version) => !version.url.includes(version.id)
+            );
+            if (currentGAVersion?.link?.href && this.version?.id) {
+                const versionNo = currentGAVersion.id;
+                /**
+                 * Need to show old version doc banner only if the version is less than the current ga version
+                 * We should not show it to the preview version whose version is more than ga
+                 **/
+                try {
+                    if (parseFloat(this.version.id) < parseFloat(versionNo)) {
+                        info = oldVersionDocInfo(currentGAVersion.link.href);
+                    } else if (
+                        parseFloat(this.version.id) > parseFloat(versionNo)
+                    ) {
+                        this.previewVersion = true;
+                    }
+                } catch (exception) {
+                    /* Ideally this use case should not happen, but just added to not to break the page*/
+                    console.warn(exception);
+                }
+            }
+        }
+        return info;
+    }
+
+    @track showVersionBanner = false;
+
     @track private pageReference: PageReference = {};
+    @track breadcrumbs: Array<Breadcrumb> = [];
 
     constructor() {
         super();
@@ -126,7 +187,13 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.apiDomain,
             this.allLanguages
         );
-        this.fetchDocument().then(() => (this.loaded = true));
+        this.fetchDocument().then((content: any) => {
+            if (content) {
+                this.displayContent = true;
+            } else {
+                this.display404 = true;
+            }
+        });
         window.addEventListener("popstate", this.handlePopState);
 
         this.searchSyncer.init();
@@ -135,8 +202,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     renderedCallback(): void {
         this.setState({ internalLinkClicked: true });
         const urlSectionLink =
-            this.pageReference?.hash?.split("#").length > 1
-                ? this.pageReference.hash.split("#")[1]
+            this.pageReference?.hash?.split("#").length! > 1
+                ? this.pageReference.hash!.split("#")[1]
                 : this.pageReference?.hash;
 
         const contentEl = this.template.querySelector("doc-content");
@@ -149,6 +216,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
         if (anchorEl) {
             anchorEl.scrollIntoView();
+
             this.setState({ internalLinkClicked: false });
         }
 
@@ -174,24 +242,17 @@ export default class DocXmlContent extends LightningElementWithState<{
     disconnectedCallback(): void {
         window.removeEventListener("popstate", this.handlePopState);
         this.searchSyncer.dispose();
-        if (this.listenerAttached) {
-            this.pageHeader.removeEventListener(
-                "langchange",
-                this.handleLanguageChange
-            );
-            this.listenerAttached = false;
-        }
     }
 
-    private get languageId(): string {
-        return this.language.id.replace("-", "_");
+    private get languageId(): string | undefined {
+        return this.language?.id.replace("-", "_");
     }
 
-    private get releaseVersionId(): string {
-        return this.version.id;
+    private get releaseVersionId(): string | undefined {
+        return this.version?.id;
     }
 
-    private get deliverable(): string {
+    private get deliverable(): string | undefined {
         return this.pageReference.deliverable;
     }
 
@@ -212,7 +273,11 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private get coveoAdvancedQueryConfig(): CoveoAdvancedQueryXMLConfig {
-        const config: { locale: string; topicid: string; version?: string } = {
+        const config: {
+            locale?: string;
+            topicid?: string;
+            version?: string;
+        } = {
             locale: this.languageId,
             topicid: this.deliverable
         };
@@ -226,7 +291,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
     private get pageHeader(): Header {
         if (!this._pageHeader) {
-            this._pageHeader = document.querySelector("doc-header");
+            this._pageHeader = document.querySelector("doc-header")!;
         }
 
         return this._pageHeader;
@@ -267,8 +332,26 @@ export default class DocXmlContent extends LightningElementWithState<{
               }));
     }
 
-    private handlePopState = (): void =>
-        this.updatePageReference(this.getReferenceFromUrl());
+    private get breadcrumbPixelPerCharacter() {
+        return (
+            PIXEL_PER_CHARACTER_MAP[this.language!.id] ||
+            PIXEL_PER_CHARACTER_MAP.default
+        );
+    }
+
+    private get ANALYTICS_PAYLOAD() {
+        return {
+            element_title: "version picker",
+            content_category: "cta"
+        };
+    }
+
+    private handlePopState = (event: PopStateEvent): void =>
+        this.updatePageReference(this.getReferenceFromUrl(), event);
+
+    handleDismissVersionBanner() {
+        this.showVersionBanner = false;
+    }
 
     handleSelect(event: CustomEvent<{ name: string }>): void {
         event.stopPropagation();
@@ -280,15 +363,15 @@ export default class DocXmlContent extends LightningElementWithState<{
 
         if (name) {
             const hashIndex = name.indexOf("#");
-            this.pageReference.hash =
-                hashIndex > -1 ? name.slice(hashIndex) : "";
-
-            const contentId = hashIndex > -1 ? name.slice(0, hashIndex) : name;
-            if (this.pageReference.contentDocumentId !== contentId) {
-                this.pageReference.contentDocumentId = contentId;
-                this.fetchContent().catch(handleContentError);
-            }
-
+            const hash = hashIndex > -1 ? name.slice(hashIndex) : "";
+
+            const contentDocumentId =
+                hashIndex > -1 ? name.slice(0, hashIndex) : name;
+            this.updatePageReference({
+                ...this.pageReference,
+                contentDocumentId,
+                hash
+            });
             this.updateUrl();
         }
     }
@@ -300,7 +383,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.updateUrl();
     }
 
-    handleLanguageChange = (event: CustomEvent<string>): Promise<void> => {
+    handleLanguageChange = (event: any) => {
         if (this.language && this.language.id === event.detail) {
             return;
         }
@@ -308,12 +391,26 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.language = this.availableLanguages.find(
             ({ id }) => id === event.detail
         );
-        this.pageReference.docId = this.language.url;
+        this.pageReference.docId = this.language!.url;
+
+        trackGTM(event.target!, "custEv_ctaLinkClick", {
+            click_text: event.detail,
+            element_title: "language selector",
+            click_url: `${window.location.origin}${this.pageReferenceToString(
+                this.pageReference
+            )}`,
+            element_type: "link",
+            content_category: "cta"
+        });
+
         this.updateUrl();
         this.fetchDocument();
     };
 
-    updatePageReference(newPageReference: PageReference): void {
+    updatePageReference(
+        newPageReference: PageReference,
+        event: PopStateEvent | undefined = undefined
+    ): void {
         this.pageReference.hash = newPageReference.hash;
         this.pageReference.search = newPageReference.search;
 
@@ -321,20 +418,35 @@ export default class DocXmlContent extends LightningElementWithState<{
             return;
         }
 
-        const isSameDocId = this.pageReference.docId !== newPageReference.docId;
+        const isSameDocId = this.pageReference.docId === newPageReference.docId;
         this.pageReference = newPageReference;
 
-        if (isSameDocId) {
+        if (!isSameDocId) {
             this.fetchDocument();
             return;
         }
 
-        this.fetchContent().catch(handleContentError);
+        this.fetchContent()
+            .then(() => {
+                this.buildBreadcrumbs();
+                document.body.scrollTop = event?.state?.scroll?.value || 0;
+            })
+            .catch(handleContentError);
+    }
+
+    private sanitizeUrlPart(part: string | undefined): string | undefined {
+        if (!part) {
+            return part;
+        }
+        return DOMPurify.sanitize(part);
     }
 
     getReferenceFromUrl(): PageReference {
         const [page, docId, deliverable, contentDocumentId] =
-            window.location.pathname.substr(1).split("/");
+            window.location.pathname
+                .substr(1)
+                .split("/")
+                .map(this.sanitizeUrlPart);
 
         const { origin: domain, hash, search } = window.location;
 
@@ -343,9 +455,9 @@ export default class DocXmlContent extends LightningElementWithState<{
             deliverable,
             docId,
             domain,
-            hash,
+            hash: this.sanitizeUrlPart(hash),
             page,
-            search
+            search: this.sanitizeUrlPart(search)
         };
     }
 
@@ -359,12 +471,13 @@ export default class DocXmlContent extends LightningElementWithState<{
         );
     }
 
-    async fetchDocument(): Promise<void> {
+    async fetchDocument(): Promise<string> {
         this.setState({
             isFetchingDocument: true
         });
-        const data = await this.contentProvider.fetchDocumentData(
-            this.pageReference.docId
+
+        const data = await this.contentProvider!.fetchDocumentData(
+            this.pageReference.docId!
         );
 
         // This could be a 404 scenario.
@@ -372,7 +485,7 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.setState({
                 isFetchingDocument: false
             });
-            return;
+            return "";
         }
 
         this.docTitle = data.docTitle;
@@ -384,23 +497,31 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.availableVersions = data.availableVersions;
         this.pdfUrl = data.pdfUrl;
 
-        this.updateHeader();
+        this.updateHeaderAndSidebarFooter();
+
+        this.buildBreadcrumbs();
 
         if (this.pageReference.deliverable !== data.deliverable) {
             this.pageReference.deliverable = data.deliverable;
             this.updateUrl(HistoryState.REPLACE_STATE);
         }
 
+        if (this.oldVersionInfo) {
+            this.showVersionBanner = true;
+        } else {
+            this.latestVersion = true;
+        }
+
         if (
             this.pageReference?.contentDocumentId?.replace(/\.htm$/, "") !==
             data.id
         ) {
             try {
-                await this.fetchContent();
+                const moreData = await this.fetchContent();
                 this.setState({
                     isFetchingDocument: false
                 });
-                return;
+                return moreData.content;
             } catch (error) {
                 this.pageReference.contentDocumentId = `${data.id}.htm`;
                 this.pageReference.hash = "";
@@ -414,18 +535,19 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.setState({
             isFetchingDocument: false
         });
+        return data.content;
     }
 
-    async fetchContent(): Promise<void> {
+    async fetchContent(): Promise<ContentData> {
         this.setState({
             isFetchingContent: true
         });
-        const data = await this.contentProvider.fetchContent(
-            this.pageReference.deliverable,
-            this.pageReference.contentDocumentId,
+        const data = await this.contentProvider!.fetchContent(
+            this.pageReference.deliverable!,
+            this.pageReference.contentDocumentId!,
             {
-                language: this.language.id,
-                version: this.version.id
+                language: this.language!.id,
+                version: this.version!.id
             }
         );
 
@@ -434,19 +556,16 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.addMetatags();
 
             if (!this.pageReference.hash) {
-                document.querySelector("main")?.scrollIntoView({
-                    behavior: "smooth",
-                    block: "start",
-                    inline: "nearest"
-                });
+                document.body.scrollIntoView();
             }
         }
         this.setState({
             isFetchingContent: false
         });
+        return data;
     }
 
-    updateHeader(): void {
+    updateHeaderAndSidebarFooter(): void {
         if (!this.pageHeader) {
             return;
         }
@@ -456,20 +575,12 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
 
         if (this.pdfUrl) {
-            this.pageHeader.bailHref = this.pdfUrl;
-            this.pageHeader.bailLabel = "PDF";
-        }
-
-        if (!this.listenerAttached) {
-            this.pageHeader.addEventListener(
-                "langchange",
-                this.handleLanguageChange
-            );
-            this.listenerAttached = true;
+            this.sidebarFooterContent.bailHref = this.pdfUrl;
+            this.sidebarFooterContent.bailLabel = "PDF";
         }
 
-        this.pageHeader.languages = this.availableLanguages;
-        this.pageHeader.language = this.language?.id;
+        this.sidebarFooterContent.languages = this.availableLanguages;
+        this.sidebarFooterContent.language = this.language?.id;
 
         if (this.pageReference) {
             const { docId, deliverable, page } = this.pageReference;
@@ -478,6 +589,7 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     updateUrl(method = HistoryState.PUSH_STATE): void {
+        logCoveoPageView(this.coveoOrganizationId, this.coveoAnalyticsToken);
         window.history[method](
             {},
             "docs",
@@ -493,23 +605,24 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private updateSearchInput(searchParam: string): void {
-        this.template
-            .querySelector("doc-content-layout")
-            ?.setSidebarInputValue(searchParam);
+        (this.refs.docContentLayout as any)?.setSidebarInputValue(searchParam);
     }
 
     private pageReferenceToString(reference: PageReference): string {
         const { page, docId, deliverable, contentDocumentId, hash, search } =
             reference;
         return `/${page}/${docId}/${deliverable}/${contentDocumentId}${this.normalizeSearch(
-            search
+            search!
         )}${this.normalizeHash(hash)}`;
     }
 
-    private normalizeUrlPart(part: string, sentinel: string): string {
+    private normalizeUrlPart(
+        part: string | undefined,
+        sentinel: string
+    ): string {
         return (
             (part &&
-                (part.startsWith(sentinel) ? part : `${sentinel}${part}`)) ||
+                (part.startsWith(sentinel!) ? part : `${sentinel}${part}`)) ||
             ""
         );
     }
@@ -518,16 +631,16 @@ export default class DocXmlContent extends LightningElementWithState<{
         return this.normalizeUrlPart(search, "?");
     }
 
-    private normalizeHash(hash: string): string {
+    private normalizeHash(hash?: string): string {
         return this.normalizeUrlPart(hash, "#");
     }
 
     private getComposedTitle(
-        topicTitle: string | undefined,
+        topicTitle: string | null | undefined,
         docTitle: string | undefined
     ): string {
         // map to avoid duplicates
-        const titleMap = {};
+        const titleMap: { [key: string]: any } = {};
         if (topicTitle) {
             // sometimes the h1 tag text (which is docSubTitle) contains text with new line character. For e.g, "Bulk API 2.0 Older\n  Documentation",
             // here it contains \n in the text context which needs to be removed
@@ -558,16 +671,65 @@ export default class DocXmlContent extends LightningElementWithState<{
         );
     }
 
+    get showBreadcrumbs(): boolean {
+        return this.breadcrumbs && this.breadcrumbs.length > 1;
+    }
+
+    private buildBreadcrumbs(): void {
+        const { contentDocumentId } = this.pageReference;
+        if (!contentDocumentId) {
+            return;
+        }
+
+        const currentNode = this.tocMap[contentDocumentId];
+
+        if (currentNode?.parent) {
+            this.breadcrumbs = this.nodeToBreadcrumb(currentNode);
+        } else {
+            this.breadcrumbs = [];
+        }
+    }
+
+    private nodeToBreadcrumb(node: TreeNode): Breadcrumb[] {
+        const item = {
+            href: this.pageReferenceToString({
+                ...this.pageReference,
+                contentDocumentId: node.name
+            }),
+            label: node.label
+        };
+
+        if (node.parent) {
+            return [...this.nodeToBreadcrumb(node.parent), item];
+        }
+
+        return [item];
+    }
+
+    // This method take docId and drops the version from the docId.
+    // Example:
+    // Takes input string: docId = "atlas.en-us.238.0.b2b_b2c_comm_dev.meta"
+    // Output string: filteredDocId = "atlas.en-us.b2b_b2c_comm_dev.meta"
+    dropVersionFromDocId(docId: string): string {
+        if (!this.version?.id) {
+            return docId;
+        }
+
+        const curVersion = this.version.id + ".";
+        const filteredDocId = docId.replace(curVersion, "");
+        return filteredDocId;
+    }
+
     addMetatags(): void {
         const div = document.createElement("div");
-        div.innerHTML = this.docContent;
+        div.innerHTML = DOMPurify.sanitize(this.docContent);
         const docDescription = div.querySelector(".shortdesc")?.textContent;
         const topicTitle = div.querySelector("h1")?.textContent;
 
         const title = document.querySelector("title");
         const composedTitle = this.getComposedTitle(topicTitle, this.docTitle);
 
-        if (title) {
+        if (title && title.textContent) {
             title.textContent = composedTitle;
         }
         const metatitle = document.querySelector('meta[name="title"]');
@@ -589,14 +751,52 @@ export default class DocXmlContent extends LightningElementWithState<{
                 'link[rel="canonical"]'
             );
             if (metadescription) {
+                const copyPageReference = { ...this.pageReference };
+                copyPageReference.docId = copyPageReference.docId
+                    ? this.dropVersionFromDocId(copyPageReference.docId)
+                    : copyPageReference.docId;
                 metadescription.setAttribute(
                     "href",
                     window.location.protocol +
                         "//" +
                         window.location.host +
-                        this.pageReferenceToString(this.pageReference)
+                        this.pageReferenceToString(copyPageReference)
                 );
             }
         }
+
+        this.addNoIndexMetaForOlderDocVersions();
+    }
+
+    /**
+     * Method adds noindex, follow meta tag to the older Couch DB doc pages.
+     * Fixes W-12547462.
+     */
+    private addNoIndexMetaForOlderDocVersions() {
+        // eslint-disable-next-line @lwc/lwc/no-document-query
+        const headTag = document.getElementsByTagName("head");
+        // this checks if the selected version is not the latest version,
+        // then it adds the noindex, follow meta tag to the older version pages.
+        const versionId = this.version!.id;
+        const docId = this.pageReference.docId;
+
+        // SEO fix:
+        // Doc id without version id is always considered latest and should be used for SEO.
+        // Condition is to find a docId which includes version id,
+        // these docs are always considered as old and should not be indexed including the preview docs.
+        if (
+            headTag.length &&
+            docId?.includes(versionId) &&
+            !document.querySelector('meta[name="robots"]')
+        ) {
+            const robotsMeta = document.createElement("meta");
+            robotsMeta.setAttribute("name", "robots");
+            robotsMeta.setAttribute("content", "noindex, follow");
+            headTag[0].appendChild(robotsMeta);
+        }
+    }
+
+    private get showVersionPicker(): boolean {
+        return !this.disableVersion;
     }
 }