@salesforcedevs/docs-components 1.3.209-alpha.10 → 1.3.209-alpha2

package/src/modules/doc/zoominContent/zoominContent.css

@@ -0,0 +1,52 @@
+:host {
+    --button-primary-color: var(--dx-g-blue-vibrant-50);
+    --button-primary-color-hover: var(--dx-g-blue-vibrant-40);
+}
+
+doc-content-layout {
+    --dx-c-content-sidebar-sticky-top: calc(
+        var(--dx-g-global-header-height) +
+            var(--dx-g-doc-header-main-nav-height)
+    );
+    --dx-c-sidebar-height: calc(
+        100vh -
+            calc(
+                var(--dx-g-global-header-height) +
+                    var(--dx-g-doc-header-main-nav-height)
+            )
+    );
+}
+
+doc-breadcrumbs {
+    --dx-c-popover-z-index: 5;
+
+    display: block;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+dx-dropdown {
+    --dx-c-dropdown-option-font-size: var(--dx-g-text-sm);
+}
+
+dx-dropdown > dx-button {
+    --dx-c-button-primary-color: var(--button-primary-color);
+    --dx-c-button-primary-color-hover: var(--button-primary-color-hover);
+    --border-color: var(--button-primary-color);
+
+    border-bottom: 1px dashed var(--border-color);
+}
+
+dx-dropdown > dx-button:hover {
+    --border-color: var(--button-primary-color-hover);
+}
+
+.document-pickers {
+    margin-left: auto;
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+doc-phase {
+    --doc-c-phase-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+    );
+}

package/src/modules/doc/zoominContent/zoominContent.html

@@ -0,0 +1,48 @@
+<template>
+    <doc-content-layout
+        if:true={loaded}
+        coveo-organization-id={coveoOrganizationId}
+        coveo-public-access-token={coveoPublicAccessToken}
+        coveo-analytics-token={coveoAnalyticsToken}
+        coveo-search-hub={coveoSearchHub}
+        coveo-advanced-query-config={coveoAdvancedQueryConfig}
+        sidebar-header="Pages"
+        sidebar-content={sidebarContent}
+        sidebar-value={sidebarValue}
+        onselect={handleSelect}
+        use-old-sidebar={useOldSidebar}
+    >
+        <doc-phase
+            slot="version-banner"
+            if:true={showVersionBanner}
+            doc-phase-info={oldVersionInfo}
+            icon-name="warning"
+            dismissible="true"
+            ondismissphase={handleDismissVersionBanner}
+        ></doc-phase>
+        <div slot="sidebar-header" class="document-pickers">
+            <dx-dropdown
+                data-type="version"
+                analytics-event="custEv_ctaLinkClick"
+                analytics-payload={ANALYTICS_PAYLOAD}
+                options={versionOptions}
+                value={version.id}
+                width="290px"
+            >
+                <dx-button variant="inline" disabled={disableVersion}>
+                    {version.releaseVersion}
+                </dx-button>
+            </dx-dropdown>
+        </div>
+        <doc-breadcrumbs
+            if:true={showBreadcrumbs}
+            breadcrumbs={breadcrumbs}
+            pixel-per-character={breadcrumbPixelPerCharacter}
+        ></doc-breadcrumbs>
+        <doc-content
+            docs-data={docContent}
+            page-reference={pageReference}
+            onnavclick={handleNavClick}
+        ></doc-content>
+    </doc-content-layout>
+</template>

package/src/modules/doc/zoominContent/zoominContent.ts

@@ -0,0 +1,484 @@
+import {
+    ApiDocLanguage,
+    ApiDocVersion,
+    ApiNavItem,
+    DocLanguage,
+    DocVersion,
+    DocumentData,
+    HistoryState,
+    PageReference,
+    TocMap,
+    TreeNode,
+    ZoominApiNavItem,
+    ZoominDocContent
+} from "../xmlContent/types";
+import { Language } from "typings/custom";
+import { BaseContentElement } from "docBaseElements/baseContentElement";
+
+import mockResponses from "./mockResponses";
+import { ZoominFetchContent } from "./zoominUtils";
+
+export default class DocZoomInContent extends BaseContentElement {
+    connectedCallback() {
+        this.contentProvider = new ZoominFetchContent(
+            this.apiDomain,
+            this.allLanguages
+        );
+        this.fetchDocument().then(() => (this.loaded = true));
+    }
+
+    getReferenceFromUrl(): PageReference {
+        //console.log(`get Reference from URL ${window.location.pathname}`);
+
+        // const [
+        //     page,
+        //     docId,
+        //     deliverable,
+        //     contentDocumentId
+        // ] = window.location.pathname.substr(1).split("/");
+
+        // const { origin: domain, hash, search } = window.location;
+
+        const [page, docId, deliverable, contentDocumentId] =
+            "/docs/atlas.en-us.bi_dev_guide_ext_data.meta/bi_dev_guide_ext_data/bi_ext_data_overview.htm"
+                .substr(1)
+                .split("/");
+
+        const domain = "localhost:3000";
+        const hash = "";
+        const search = "";
+
+        return {
+            contentDocumentId,
+            deliverable,
+            docId,
+            domain,
+            hash,
+            page,
+            search
+        };
+    }
+
+    // async fetchDocument(): Promise<void> {
+    //     this.setState({
+    //         isFetchingDocument: true
+    //     });
+    //     console.log(`Fetching doc --> ${this.pageReference.docId}`)
+    //     // const data = await this.contentProvider!.fetchDocumentData(
+    //     //     this.pageReference.docId!
+    //     // );
+    //     // const {
+    //     //     available_languages,
+    //     //     available_versions,
+    //     //     toc,
+    //     //     content,
+    //     //     version,
+    //     //     language,
+    //     //     content_document_id,
+    //     //     title,
+    //     //     doc_title,
+    //     //     pdf_url,
+    //     //     deliverable
+    //     // } = zoominResponse;
+
+    //     const toc = zoominToc;
+    //     this.docTitle = toc.title || "";
+    //     this.tocMap = data.tocMap;
+    //     this.sidebarContent = data.toc;
+    //     this.version = data.version;
+    //     this.language = data.language;
+    //     this.availableLanguages = data.availableLanguages;
+    //     this.availableVersions = data.availableVersions;
+    //     this.pdfUrl = data.pdfUrl;
+
+    //     const { normalizedToc, tocMap } = this.normalizeToc(toc);
+
+    //     const data =  {
+    //         availableLanguages:
+    //             available_languages &&
+    //             available_languages.map(this.normalizeLanguage.bind(this)),
+    //         availableVersions:
+    //             available_versions &&
+    //             available_versions.map(this.normalizeVersion.bind(this)),
+    //         content,
+    //         version: this.normalizeVersion(version),
+    //         id: content_document_id,
+    //         language: this.normalizeLanguage(language),
+    //         title,
+    //         toc: normalizedToc,
+    //         tocMap,
+    //         docTitle: doc_title,
+    //         pdfUrl: pdf_url,
+    //         deliverable
+    //     };
+
+    //     //const data = zoominResponse;
+
+    //     // This could be a 404 scenario.
+    //     if (!data) {
+    //         this.setState({
+    //             isFetchingDocument: false
+    //         });
+    //         return;
+    //     }
+
+    //     this.docTitle = data.docTitle;
+    //     this.tocMap = data.tocMap;
+    //     this.sidebarContent = data.toc;
+    //     this.version = data.version;
+    //     this.language = data.language;
+    //     this.availableLanguages = data.availableLanguages;
+    //     this.availableVersions = data.availableVersions;
+    //     this.pdfUrl = data.pdfUrl;
+
+    //     this.updateHeader();
+
+    //     this.buildBreadcrumbs();
+
+    //     if (this.pageReference.deliverable !== data.deliverable) {
+    //         this.pageReference.deliverable = data.deliverable;
+    //         this.updateUrl(HistoryState.REPLACE_STATE);
+    //     }
+
+    //     if (this.oldVersionInfo) {
+    //         this.showVersionBanner = true;
+    //     }
+
+    //     if (
+    //         this.pageReference?.contentDocumentId?.replace(/\.htm$/, "") !==
+    //         data.id
+    //     ) {
+    //         try {
+    //             await this.fetchContent();
+    //             this.setState({
+    //                 isFetchingDocument: false
+    //             });
+    //             return;
+    //         } catch (error) {
+    //             this.pageReference.contentDocumentId = `${data.id}.htm`;
+    //             this.pageReference.hash = "";
+    //             this.pageReference.search = "";
+    //             this.updateUrl(HistoryState.REPLACE_STATE);
+    //         }
+    //     }
+
+    //     this.docContent = data.content;
+    //     this.addMetatags();
+    //     this.setState({
+    //         isFetchingDocument: false
+    //     });
+    // }
+
+    async fetchDocument(): Promise<void> {
+        this.setState({
+            isFetchingDocument: true
+        });
+        // const data = await this.contentProvider!.fetchDocumentData(
+        //     this.pageReference.docId!
+        // );
+
+        console.log("Get this doc ID now ---> " + this.pageReference.docId);
+
+        const data = await this.mockedFetchDocumentData(
+            this.pageReference.docId!
+        );
+
+        //const data = zoominResponse;
+
+        // This could be a 404 scenario.
+        if (!data) {
+            this.setState({
+                isFetchingDocument: false
+            });
+            return;
+        }
+
+        this.docTitle = data.docTitle;
+        this.tocMap = data.tocMap;
+        this.sidebarContent = data.toc;
+        this.version = data.version;
+        this.language = data.language;
+        this.availableLanguages = data.availableLanguages;
+        this.availableVersions = data.availableVersions;
+        this.pdfUrl = data.pdfUrl;
+
+        this.updateHeader();
+
+        this.buildBreadcrumbs();
+
+        if (this.pageReference.deliverable !== data.deliverable) {
+            this.pageReference.deliverable = data.deliverable;
+            // we need the below line - commented for testing only
+            //this.updateUrl(HistoryState.REPLACE_STATE);
+        }
+
+        if (this.oldVersionInfo) {
+            this.showVersionBanner = true;
+        }
+
+        if (
+            this.pageReference?.contentDocumentId?.replace(/\.htm$/, "") !==
+            data.id
+        ) {
+            try {
+                await this.fetchContent();
+                this.setState({
+                    isFetchingDocument: false
+                });
+                return;
+            } catch (error) {
+                this.pageReference.contentDocumentId = `${data.id}.htm`;
+                this.pageReference.hash = "";
+                this.pageReference.search = "";
+                this.updateUrl(HistoryState.REPLACE_STATE);
+            }
+        }
+
+        this.docContent = data.content;
+        this.addMetatags();
+        this.setState({
+            isFetchingDocument: false
+        });
+    }
+
+    async fetchContent(): Promise<void> {
+        this.setState({
+            isFetchingContent: true
+        });
+        // const data = await this.contentProvider!.fetchContent(
+        //     this.pageReference.deliverable!,
+        //     this.pageReference.contentDocumentId!,
+        //     {
+        //         language: this.language!.id,
+        //         version: this.version!.id
+        //     }
+        // );
+        // Working
+        //const data = mockResponses.zoominFetchDocContent;
+
+        const data: ZoominDocContent = await this.contentProvider!.fetchContent(
+            this.pageReference.deliverable!,
+            this.pageReference.contentDocumentId!,
+            {
+                language: this.language!.id,
+                version: this.version!.id
+            }
+        );
+
+        // const data = await this.contentProvider!.zoominFetchContent(
+        //         this.pageReference.deliverable!,
+        //     this.pageReference.contentDocumentId!,
+        //     {
+        //         language: this.language!.id,
+        //         version: this.version!.id
+        //     }
+        // )
+
+        if (data) {
+            this.docContent = data.topic_html;
+            this.addMetatags();
+
+            if (!this.pageReference.hash) {
+                document.body.scrollIntoView();
+            }
+        }
+        this.setState({
+            isFetchingContent: false
+        });
+    }
+
+    async mockedFetchDocumentData(docId: string): Promise<DocumentData | null> {
+        try {
+            console.log(`Doc requested ${docId} `);
+            //const zoominToc: Array<ZoominApiNavItem> = mockResponses.zoominToc;
+            const zoominToc: Array<ZoominApiNavItem> =
+                await this.contentProvider!.fetchDocumentData(
+                    this.pageReference.docId!
+                );
+
+            const atlastToc = this.transformZoominTocToAtlasToc(zoominToc);
+            const { normalizedToc, tocMap } = this.normalizeToc(atlastToc);
+
+            const zoominDocData = mockResponses.zoominFetchDocContent;
+
+            // const {
+            //     available_languages,
+            //     available_versions=[],
+            //     content,
+            //     version,
+            //     language,
+            //     content_document_id,
+            //     title,
+            //     doc_title,
+            //     pdf_url,
+            //     deliverable
+            // } = zoominDocData;
+
+            //const available_languages = zoominDocData.available_languages;
+            //const available_versions: ApiDocVersion[] = [];
+            const pdf_url = zoominDocData.preprocessed_PDF || "";
+            const deliverable = zoominDocData.page_id;
+            const docContent = zoominDocData.labels_text;
+            const docTitle = zoominDocData.title;
+            const version = "atlas.en-us.apexcode.meta";
+            const language = "en-us";
+            const content_document_id = zoominDocData.bundle_id;
+            const title = zoominDocData.title;
+
+            const mock_available_versions = [
+                {
+                    version_text: "Winter '24 (API version 59.0)",
+                    release_version: "59.0",
+                    doc_version: "246.0",
+                    version_url: "atlas.en-us.apexcode.meta"
+                },
+                {
+                    version_text: "Summer '23 (API version 58.0)",
+                    release_version: "58.0",
+                    doc_version: "244.0",
+                    version_url: "atlas.en-us.244.0.apexcode.meta"
+                }
+            ];
+            const mock_available_languages = [
+                {
+                    label: "ENGLISH",
+                    code: "EN",
+                    locale: "en-us",
+                    url: "atlas.en-us.246.0.apexcode.meta"
+                },
+                {
+                    label: "JAPANESE",
+                    code: "JA",
+                    locale: "ja-jp",
+                    url: "atlas.ja-jp.246.0.apexcode.meta"
+                }
+            ];
+
+            return {
+                availableLanguages:
+                    mock_available_languages &&
+                    mock_available_languages.map(
+                        this.normalizeLanguage.bind(this)
+                    ),
+                availableVersions:
+                    mock_available_versions &&
+                    mock_available_versions.map(
+                        this.normalizeVersion.bind(this)
+                    ),
+                content: docContent,
+                version: this.normalizeVersion(version),
+                id: content_document_id,
+                language: this.normalizeLanguage(language),
+                title,
+                toc: normalizedToc,
+                tocMap,
+                docTitle,
+                pdfUrl: pdf_url,
+                deliverable
+            };
+        } catch (error) {
+            console.log(error);
+            return null;
+        }
+    }
+
+    transformZoominTocToAtlasToc(
+        zoominToc: ZoominApiNavItem[]
+    ): Array<ApiNavItem> {
+        if (!zoominToc) {
+            return [];
+        }
+        console.log(`transformZoominTocToAtlasToc ${zoominToc}`);
+
+        return zoominToc.map((zoominTocItem) => ({
+            text: zoominTocItem.title,
+            id: zoominTocItem.bundle_id,
+            children: zoominTocItem.childEntries
+                ? this.transformZoominTocToAtlasToc(zoominTocItem.childEntries)
+                : []
+        }));
+    }
+
+    private normalizeToc(apiToc: Array<ApiNavItem>): {
+        tocMap: { [key: string]: TreeNode };
+        normalizedToc: Array<TreeNode>;
+    } {
+        const tocMap = {};
+        const normalizedToc =
+            apiToc &&
+            apiToc.map((navItem) => this.normalizeNavItem(navItem, tocMap));
+
+        return { normalizedToc, tocMap };
+    }
+
+    private normalizeNavItem(
+        navItem: ApiNavItem,
+        tocMap: TocMap,
+        parentNavItem?: TreeNode
+    ): TreeNode {
+        const name = this.calculateNavItemName(navItem, tocMap);
+        const node: TreeNode = {
+            label: navItem.text,
+            name,
+            parent: parentNavItem
+        };
+
+        if (name) {
+            tocMap[name] = node;
+        }
+        node.children = navItem.children?.map((child) =>
+            this.normalizeNavItem(child, tocMap, node)
+        );
+        return node;
+    }
+
+    private calculateNavItemName(navItem: ApiNavItem, tocMap: TocMap): string {
+        let href = navItem.a_attr?.href || "";
+        if (href.includes("#")) {
+            const [pathUrl] = href.split("#");
+            href = pathUrl in tocMap ? href : pathUrl;
+        }
+        return href || navItem.id;
+    }
+
+    private normalizeVersion(version: ApiDocVersion): DocVersion {
+        return (
+            version && {
+                label: version.version_text,
+                releaseVersion:
+                    version.release_version &&
+                        !version.release_version.startsWith("v")
+                        ? `v${version.release_version}`
+                        : version.release_version,
+                id: version.doc_version,
+                url: version.version_url
+            }
+        );
+    }
+
+    private normalizeLanguage(language: ApiDocLanguage): DocLanguage {
+        return (
+            language && {
+                // label:
+                //     this.getLanguageDisplayTextById(
+                //         this.languages,
+                //         language.locale
+                //     ) || language.label,
+                label: "English",
+                id: "en-us",
+                code: "EN",
+                url: "atlas.en-us.246.0.apexcode.meta"
+            }
+        );
+    }
+
+    private getLanguageDisplayTextById(
+        languages: Language[],
+        languageId: string
+    ): string {
+        const language = languages.find(
+            (languageItem) => languageItem.id === languageId
+        );
+        return language ? language.displayText : "";
+    }
+}

package/src/modules/doc/zoominContent/zoominUtils.ts

@@ -0,0 +1,93 @@
+import { Language } from "typings/custom";
+import {
+    ContentApiOptions,
+    ZoominApiNavItem,
+    ZoominDocContent
+} from "../xmlContent/types";
+//import jsonwebtoken from 'jsonwebtoken'
+import mockResponses from "./mockResponses";
+
+export class ZoominFetchContent {
+    private apiDomain: string;
+    private languages: Array<Language> = [];
+
+    constructor(apiDomain: string, languages: Array<Language>) {
+        this.apiDomain = apiDomain;
+        this.languages = languages;
+    }
+
+    async fetchDocumentData(docId: string): Promise<Array<ZoominApiNavItem>> {
+        try {
+            // const token = this.fetchZoomInToken();
+            // console.log(`Doc Id ${docId}`)
+            // const data = await this.fetchResource<DocumentData>(
+            //     `https://salesforce-be-dev.zoominsoftware.io/api/bundle/pardot-guides/toc?jwt=${token}`
+            // );
+            // return data;
+            console.log(`Doc Id ${docId} `);
+            return new Promise((resolve) => {
+                // Simulating an asynchronous operation, such as fetching data from a server
+                setTimeout(() => {
+                    return resolve(mockResponses.zoominToc); // Resolve the promise with the string value
+                }, 50); // Simulating a delay of 1 second
+            });
+        } catch (error) {
+            console.log(error);
+            return null;
+        }
+    }
+
+    fetchContent(
+        deliverable: string,
+        contentId: string,
+        options: ContentApiOptions
+    ): Promise<ZoominDocContent> {
+        // console.log(`ZoominContent ${deliverable} ${contentId} ${options}`)
+        // const token = this.fetchZoomInToken();
+        // const data =  this.fetchResource<ContentData>(
+        //     `https://salesforce-be-dev.zoominsoftware.io/api/bundle/sample_md/page/b2c-developer-sandboxes.html?jwt=${token}`
+        // );
+        // return data;
+        console.log(`ZoominContent ${deliverable} ${contentId} ${options}`);
+
+        return new Promise((resolve) => {
+            // Simulating an asynchronous operation, such as fetching data from a server
+            setTimeout(() => {
+                return resolve(mockResponses.zoominFetchDocContent); // Resolve the promise with the string value
+            }, 50); // Simulating a delay of 1 second
+        });
+    }
+
+    private async fetchResource<T>(url: string): Promise<T> {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(response.statusText);
+        }
+
+        const json = await response.json();
+
+        return json;
+    }
+
+    private fetchZoomInToken() {
+        const payload = {
+            aud: "https://salesforce-be-dev.zoominsoftware.io",
+            iss: "https://salesforce.com",
+            iat: Math.floor(Date.now() / 1000),
+            exp: Math.floor(Date.now() / 1000) + 360,
+            sub: "lnemalipuri@salesforce.com",
+            data: {
+                ZoominRole: "admin",
+                fullName: "kishore"
+            }
+        };
+        console.log(`${payload}`);
+
+        // Need to update the token while running
+        //const token = jsonwebtoken.sign(payload, 'fcrvBbXi1Aimu6sIiZMlcvIP9CqjYjVd');
+        //console.log(token);
+        // return token;
+
+        return `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJodHRwczovL3NhbGVzZm9yY2UtYmUtZGV2Lnpvb21pbnNvZnR3YXJlLmlvIiwiaXNzIjoiaHR0cHM6Ly9zYWxlc2ZvcmNlLmNvbSIsImlhdCI6MTcwODQxOTkxMCwiZXhwIjoxNzA4Nzc5OTEwLCJzdWIiOiJsbmVtYWxpcHVyaUBzYWxlc2ZvcmNlLmNvbSIsImRhdGEiOnsiWm9vbWluUm9sZSI6ImFkbWluIiwiZnVsbE5hbWUiOiJraXNob3JlIn19.1ekF_78Mq5136do4TdpQaPTy-CUroom0N1DdczcirSk`;
+    }
+}