@salesforcedevs/dx-components 0.56.1 → 0.56.2-example

package/src/modules/dx/tbidAvatarButton/tbidAvatarButton.ts

@@ -0,0 +1,440 @@
+import { api, LightningElement } from "lwc";
+import Cookies from "js-cookie";
+import defaults from "lodash.defaults";
+import { pollUntil } from "dxUtils/async";
+
+declare global {
+    interface Window {
+        SFIDWidget?: {
+            isAlive({ callback }: { callback: (...args: any[]) => any }): void;
+            logout(): void;
+            login(): void;
+            openid_response: any;
+            disabled: boolean;
+        };
+    }
+}
+
+interface UserInfo {
+    avatarImgSrc?: string;
+    company?: string;
+    firstName?: string;
+    id?: string;
+    lastName?: string;
+    orgId?: string;
+    relationship?: string;
+    role?: string;
+    username?: string;
+    fullName?: string;
+}
+
+interface EventSourceEvent extends Event {
+    id: string;
+    retry?: number;
+    data: string;
+    event?: string;
+}
+
+const enum PlatformEventsType {
+    UserDataChange = "UserDataChange",
+    UserPhotoChange = "UserPhotoChange",
+    UserMerge = "UserMerge"
+}
+
+// This component handles the core Salesforce OAuth 2.0 flow used by TBID for login, rendering a
+// simple Login button or avatar icon depending on login status. It should be reusable in any case
+// where TBID login is needed.
+export default class TbidAvatarButton extends LightningElement {
+    @api tbidBaseUrl = "";
+    @api tbidApiBaseUrl = "";
+
+    @api login = (event: Event) => this.handleComponentLogin(event);
+    @api logout = (event: Event) => this.handleComponentLogout(event);
+
+    private userInfo: UserInfo = {};
+    private isLoading = false;
+    private eventSource?: EventSource;
+    private _isRequestingUserInfo = false;
+    private _didReceiveUserInfo = false;
+
+    // _didReceiveUserInfo is a proxy for "isLoggedIn" because we only want to show the UI corresponding
+    // to logged-in state when user info has been received (avoids flashes of weird content)
+    private get isLoggedIn() {
+        return this._didReceiveUserInfo;
+    }
+    private get tbidIframeUrl() {
+        return `${this.tbidBaseUrl}/secur/logout.jsp`;
+    }
+    private get tbidApiLogoutUrl() {
+        return `${this.tbidApiBaseUrl}/logout`;
+    }
+    private get tbidApiUserInfoUrl() {
+        return `${this.tbidApiBaseUrl}/userinfo`;
+    }
+    private get tbidApiTokenUrl() {
+        return `${this.tbidApiBaseUrl}/token`;
+    }
+    private get tbidApiPlatformEventsUrl() {
+        return `${this.tbidApiBaseUrl}/platform-events`;
+    }
+
+    async connectedCallback() {
+        // Backend API for TBID login sets this state cookie if successful login occurs.
+        const isLoginSuccessRedirect =
+            Cookies.get("tbidLoginSuccess") === "true";
+
+        // The SFIDWidget enables seamless SSO in Chrome, so we will defer to it for login in cases where it is present and enabled.
+        const isWidgetDisabled = window.SFIDWidget?.disabled;
+        const isWidgetLoggedIn = window.SFIDWidget?.openid_response;
+        const isWidgetMaybeLoading =
+            !isWidgetDisabled &&
+            !isWidgetLoggedIn &&
+            Boolean(
+                // eslint-disable-next-line @lwc/lwc/no-document-query
+                document.querySelector(
+                    'script[src*="authProviderEmbeddedLogin"]'
+                )
+            );
+
+        window.addEventListener("tbid-login", this.handleSsoLogin);
+        window.addEventListener("tbid-logout", this.handleSsoLogout);
+
+        this.isLoading = true;
+
+        if (!isLoginSuccessRedirect) {
+            // Not a login redirect, no further work to do right now except try to request userInfo (in case a session already exists)
+            await this.requestUserInfo();
+
+            if (
+                !this._didReceiveUserInfo &&
+                isWidgetMaybeLoading &&
+                !window.SFIDWidget?.openid_response &&
+                window.SFIDWidget?.isAlive
+            ) {
+                // The initial userinfo request failed, but SFIDWidget was maybe loading, and it
+                // still hasn't completed login, so we want to check whether it's alive and wait
+                // (up to a maximum of 1 second) for it to possibly finish logging in before we
+                // turn off the "loading" indicator (this prevents odd flashes of content).
+                await this.waitForSFIDWidget();
+            }
+
+            this.isLoading = false;
+        } else {
+            // We got here from a login success redirect
+            Cookies.remove("tbidLoginSuccess"); // first, cleanup
+
+            if (isWidgetMaybeLoading) {
+                // This is a successful login and we have an SFIDWidget present, so it *should*
+                // handle finishing up login itself. But it has a maximum of 1 second to do so.
+                const didWidgetLoad = await this.waitForSFIDWidget();
+                if (!didWidgetLoad) {
+                    // SFIDWidget not responding in time; complete login ourselves.
+                    await this.requestUserInfo();
+                    this.dispatchLoginSuccess();
+                }
+            } else {
+                // No SFIDWidget loading, proceed immediately to completing normal initialization.
+                await this.requestUserInfo();
+                this.dispatchLoginSuccess();
+            }
+
+            this.isLoading = false;
+        }
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener("tbid-login", this.handleSsoLogin);
+        window.removeEventListener("tbid-logout", this.handleSsoLogout);
+        this.teardownEventSource();
+    }
+
+    // The SFIDWidget requires third party cookies to function. In browsers with third party
+    // cookies disabled, the widget will load but never log in, resulting in delayed UI updates
+    // in some cases. To mitigate this, this method calls the widget's "isAlive" method, which
+    // should respond very quickly if third party cookies are enabled. If it does respond quickly,
+    // then this method waits a maximum of 1 second for the widget to finish logging in. If it does
+    // *not* respond quickly, the method resolves early so that we can stop waiting pointlessly.
+    private waitForSFIDWidget = async () => {
+        const widgetNotAlivePromise = new Promise<boolean>((resolve) => {
+            const timeoutId = setTimeout(() => resolve(false), 100);
+            window.SFIDWidget?.isAlive({
+                // If the widget responds as expected, this promise will fail to resolve and thus
+                // we will continue to wait on the other promise, below.
+                callback: () => clearTimeout(timeoutId)
+            });
+        });
+        const widgetLoggedInPromise = pollUntil(
+            () => Boolean(window.SFIDWidget?.openid_response),
+            100,
+            1000
+        );
+        const success = await Promise.race([
+            widgetNotAlivePromise,
+            widgetLoggedInPromise
+        ]);
+        return success;
+    };
+
+    private setupEventSource = () => {
+        // subscribe to platform events
+        this.eventSource = new EventSource(this.tbidApiPlatformEventsUrl);
+        this.eventSource.addEventListener(
+            PlatformEventsType.UserDataChange,
+            // eslint-disable-next-line no-undef
+            this.handleUserDataChange as EventListener
+        );
+        this.eventSource.addEventListener(
+            PlatformEventsType.UserMerge,
+            this.handleSsoLogout
+        );
+    };
+
+    private teardownEventSource = () => {
+        if (!this.eventSource) {
+            return;
+        }
+
+        this.eventSource.removeEventListener(
+            PlatformEventsType.UserDataChange,
+            // eslint-disable-next-line no-undef
+            this.handleUserDataChange as EventListener
+        );
+        this.eventSource.removeEventListener(
+            PlatformEventsType.UserMerge,
+            this.handleSsoLogout
+        );
+        this.eventSource.close();
+        this.eventSource = undefined;
+    };
+
+    private handleLogout = (isSsoLogout: boolean) => {
+        // Reset state
+        this._didReceiveUserInfo = false;
+        this.isLoading = false;
+        this.updateUserInfo({}); // clear old info
+        this.teardownEventSource();
+        this.dispatchLogoutSuccess();
+
+        if (!isSsoLogout && window.SFIDWidget?.openid_response) {
+            // If the SFIDWidget is around and has an access token, and if logout was not *already*
+            // triggered by SSO logout, defer to the SFIDWidget. This will ensure that the SSO
+            // session is logged out as well.
+            window.SFIDWidget.logout();
+        } else {
+            // Always clear the session token; if not SSO logout, this will also revoke the token with
+            // TBID; if SSO logout, that step is already taken care of. No need to await this.
+            fetch(`${this.tbidApiLogoutUrl}?isSsoLogout=${isSsoLogout}`, {
+                method: "DELETE",
+                credentials: "same-origin"
+            });
+
+            if (!isSsoLogout) {
+                // Dropping an iframe is required to fully get TBID to destroy the session; this is
+                // a TBID issue and they have requested that we do this for now.
+                const ifr = document.createElement("iframe");
+                ifr.setAttribute("src", this.tbidIframeUrl);
+                document.body.appendChild(ifr);
+            }
+        }
+    };
+
+    // This will only be called for "seamless SSO" login by the embedded login widget (SFIDWidget) on the website, if it exists.
+    private handleSsoLogout = this.handleLogout.bind(this, true);
+
+    // This handles logout from _within_ this component ("Logout" click), rather than from SSO via the SFIDWidget.
+    private handleComponentLogout = (event: Event) => {
+        event?.preventDefault();
+        this.handleLogout(false);
+    };
+
+    // This will only be called for "seamless SSO" login by the embedded login widget (SFIDWidget) on the website, if it exists.
+    private handleSsoLogin = async (event: Event) => {
+        const { userInfo } = (event as CustomEvent).detail;
+        const token = userInfo?.access_token;
+
+        // `token` should always be defined if an SSO login occurs, but we'll be extra safe.
+        if (!token) {
+            return;
+        }
+
+        // If an SSO login occurred and we have an SSO access token, we want to start using
+        // it rather than some other non-linked access token, for the "seamless SSO"
+        // experience. The `token` endpoint will invalidate any other existing token.
+        try {
+            const tokenResponse = await fetch(this.tbidApiTokenUrl, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    token
+                })
+            });
+
+            if (tokenResponse.ok) {
+                // With a new token, we want to re-establish the eventSource connection and treat as new login.
+                this.teardownEventSource();
+                this.setupEventSource();
+                // TODO: It sucks that we have to re-request user info here, since it should come with the token
+                // on SSO login. For some reason, the user info on SSO login lacks the user's photo URLs, so we
+                // have to re-request it. Maybe something to bring up with the TBID team.
+                await this.requestUserInfo();
+                this.dispatchLoginSuccess();
+            } else if (
+                tokenResponse.status === 409 &&
+                !this._didReceiveUserInfo
+            ) {
+                // Valid token received, but we still need to grab userInfo. This could happen in certain edge cases
+                // involving "seamless SSO" (e.g., you might be sitting on our page in more than one tab, then log in
+                // on one of them; in that case, our back-end will receive the token from one tab, end up _rejecting_ it
+                // as a duplicate on other tabs where the login event occurs, and yet still need to request user info
+                // on those other tabs).
+                await this.requestUserInfo();
+            }
+        } catch (ex) {
+            console.error(`Attempt to update token failed: ${ex}`);
+        }
+    };
+
+    // This handles logout from _within_ this component ("Trailblazer.me" click), rather than from SSO via the SFIDWidget.
+    private handleComponentLogin = (event: Event) => {
+        if (window.SFIDWidget) {
+            // If the SFIDWidget is around, defer to it for login. This will ensure that the SSO
+            // session is used if possible.
+            event.preventDefault(); // don't navigate; the widget will handle that instead.
+            window.SFIDWidget.login();
+        }
+    };
+
+    private handleUserDataChange = ({ data }: EventSourceEvent) => {
+        let parsedEventData: any;
+
+        try {
+            parsedEventData = JSON.parse(data);
+        } catch (ex) {
+            console.error(
+                `Unparseable ${PlatformEventsType.UserDataChange} data received`
+            );
+            return;
+        }
+
+        this.updateUserInfo(parsedEventData);
+        this.dispatchUserInfo();
+    };
+
+    // This is the only method that should manipulate this.userInfo.
+    private updateUserInfo = (userInfo: any) => {
+        if (!userInfo) {
+            return;
+        }
+
+        if (Object.keys(userInfo).length === 0) {
+            // This is a "clear" call.
+            this.userInfo = {};
+            return;
+        }
+
+        const dirtyNextUserInfo: UserInfo = {
+            avatarImgSrc: userInfo.photos?.thumbnail,
+            firstName: userInfo.given_name,
+            lastName: userInfo.family_name,
+            username: userInfo.preferred_username,
+            id: userInfo.user_id,
+            orgId: userInfo.organization_id,
+            fullName:
+                userInfo.given_name && userInfo.family_name
+                    ? `${userInfo.given_name} ${userInfo.family_name}`
+                    : userInfo.given_name || userInfo.family_name || ""
+        };
+
+        if (userInfo.custom_attributes) {
+            // ProfilePictureUrl updates earlier than photos.thumbnail, so we prefer it if it's available here.
+            dirtyNextUserInfo.avatarImgSrc =
+                userInfo.custom_attributes.ProfilePictureUrl ||
+                dirtyNextUserInfo.avatarImgSrc;
+            dirtyNextUserInfo.company = userInfo.custom_attributes.CompanyName;
+            dirtyNextUserInfo.relationship =
+                userInfo.custom_attributes.RelationshipToSalesforce;
+            dirtyNextUserInfo.role = userInfo.custom_attributes.Role;
+        }
+
+        const cleanNextUserInfo: UserInfo = {};
+
+        Object.entries(dirtyNextUserInfo).forEach(([key, val]) => {
+            // uncleanUserInfo may have undefined values which we don't want in the final product
+            if (!val) {
+                return;
+            }
+
+            let cleanVal = val;
+
+            // Design requests that we not show the @trailblazer.me part of the username
+            if (key === "username" && typeof val === "string") {
+                const regExpMatch = val.match("(.*)@trailblazer.me$");
+                if (regExpMatch && regExpMatch[1]) {
+                    cleanVal = regExpMatch[1];
+                }
+            }
+
+            cleanNextUserInfo[key as keyof UserInfo] = cleanVal;
+        });
+
+        // Keep the old info for any values _not_ defined on `cleanUserInfo`
+        this.userInfo = defaults(cleanNextUserInfo, this.userInfo);
+    };
+
+    private requestUserInfo = async () => {
+        if (this._isRequestingUserInfo) {
+            // prevent duplicate requests
+            return;
+        }
+
+        this._isRequestingUserInfo = true;
+
+        try {
+            const userInfoRes = await fetch(this.tbidApiUserInfoUrl);
+
+            if (userInfoRes.ok) {
+                if (!this.eventSource) {
+                    this.setupEventSource();
+                }
+                const userInfo = await userInfoRes.json();
+                this.updateUserInfo(userInfo);
+                this._didReceiveUserInfo = true;
+                this.dispatchUserInfo();
+            }
+        } catch (ex) {
+            // Something not directly related to auth went wrong. Unsure what to do here.
+            console.error(`Could not request user info: ${ex}`);
+        }
+
+        this._isRequestingUserInfo = false;
+    };
+
+    private dispatchUserInfo = () => {
+        this.dispatchEvent(
+            new CustomEvent("tbiduserinfo", {
+                bubbles: true,
+                detail: {
+                    userInfo: this.userInfo
+                }
+            })
+        );
+    };
+
+    private dispatchLoginSuccess = () => {
+        this.dispatchEvent(
+            new CustomEvent("tbidloginsuccess", {
+                bubbles: true
+            })
+        );
+    };
+
+    private dispatchLogoutSuccess = () => {
+        this.dispatchEvent(
+            new CustomEvent("tbidlogoutsuccess", {
+                bubbles: true
+            })
+        );
+    };
+}

package/src/modules/dx/toc/toc.css

@@ -9,6 +9,7 @@
     display: flex;
     flex-direction: row-reverse;
     width: var(--dx-c-toc-width);
+    max-width: 100%;
     word-break: break-word;
 }
 

package/src/modules/dx/toc/toc.ts

@@ -2,6 +2,7 @@ import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
 import { ContentElement } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
+import { track as sendGtm } from "dxUtils/analytics";
 
 export default class Toc extends LightningElement {
     @api title!: string;
@@ -65,10 +66,22 @@ export default class Toc extends LightningElement {
     private onClick(e: Event) {
         const target = e.currentTarget as HTMLElement;
         const id = target.getAttribute("contentid");
+        const text = target.getAttribute("data-text");
+        const href = target.getAttribute("href");
+
         this.dispatchEvent(
             new CustomEvent("selectedcontent", { detail: { name: id } })
         );
+
         this._value = id!;
+
+        sendGtm(e.currentTarget!, "custEv_tableOfContentsClick", {
+            clickText: text,
+            clickUrl: href,
+            elementType: "link",
+            locationOnPage: "table of contents",
+            itemTitle: this.title
+        });
     }
 
     private toggleShowContent() {

package/src/modules/dx/treeItem/treeItem.html

@@ -9,6 +9,7 @@
             is-selected={isSelected}
             oniconclick={onIconClick}
             show-arrow={isParent}
+            target={target}
         ></dx-tree-tile>
     </a>
     <img
@@ -23,6 +24,7 @@
                 key={child.key}
                 tree-node={child}
                 selected-key={selectedKey}
+                parent-name={treeNode.label}
             ></dx-tree-item>
         </template>
     </template>

package/src/modules/dx/treeItem/treeItem.ts

@@ -1,7 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { InternalTreeNode } from "typings/custom";
 import { track } from "dxUtils/analytics";
-import { SidebarGtmAction } from "typings/custom";
 import { isInViewport } from "dxUtils/browser";
 
 const DEFAULT_TARGET = "_self";
@@ -9,6 +8,7 @@ const DEFAULT_TARGET = "_self";
 export default class TreeItem extends LightningElement {
     @api selectedKey?: string;
     @api isRoot: boolean = false;
+    @api parentName?: string = "";
 
     @api
     public get treeNode() {
@@ -94,7 +94,7 @@ export default class TreeItem extends LightningElement {
     private onIconClick(event: CustomEvent): void {
         const isSelectAction = false;
         this.doExpand(isSelectAction);
-        this.sendGtm(event, this.isExpanded ? "expand" : "collapse");
+        this.sendGtm(event);
     }
 
     private onLinkClick(event: Event): void {
@@ -107,7 +107,7 @@ export default class TreeItem extends LightningElement {
             this.doExpand(isSelectAction);
         }
 
-        this.sendGtm(event, "click");
+        this.sendGtm(event);
         this.fireEvent("tileselected", { name: this._treeNode.name });
     }
 
@@ -137,10 +137,12 @@ export default class TreeItem extends LightningElement {
         this.isExpanded = value;
     }
 
-    private sendGtm(event: Event, sideNavAction: SidebarGtmAction) {
-        track(event.currentTarget!, "custEv_leftNavLinkClick", {
+    private sendGtm(event: Event) {
+        track(event.currentTarget!, "custEv_leftNavClick", {
+            navType: "left nav bar",
             clickText: this._treeNode.label,
-            sideNavAction
+            clickUrl: this.href,
+            navItem: this.parentName
         });
     }
 }

package/src/modules/dx/treeTile/treeTile.css

@@ -1,5 +1,5 @@
 @import "dxHelpers/reset";
-@import "dxHelpers/sidebar";
+@import "dxHelpers/commonTreeItem";
 
 :host {
     display: block;
@@ -145,33 +145,33 @@
     --indentation: calc(20 * var(--base-indentation));
 }
 
-dx-type-badge {
-    --dx-c-type-badge-text-width: 21px;
+dx-metadata-badge {
+    --dx-c-metadata-badge-text-width: 21px;
 }
 
-dx-type-badge.get {
-    --dx-c-type-badge-color: var(--dx-g-blue-vibrant-50);
-    --dx-c-type-badge-background: var(--dx-g-blue-vibrant-90);
+dx-metadata-badge.get {
+    --dx-c-metadata-badge-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-metadata-badge-background: var(--dx-g-blue-vibrant-90);
 }
 
-dx-type-badge.put {
-    --dx-c-type-badge-color: var(--dx-g-yellow-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-yellow-vibrant-90);
+dx-metadata-badge.put {
+    --dx-c-metadata-badge-color: var(--dx-g-yellow-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-yellow-vibrant-90);
 }
 
-dx-type-badge.post {
-    --dx-c-type-badge-color: var(--dx-g-green-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-green-vibrant-90);
+dx-metadata-badge.post {
+    --dx-c-metadata-badge-color: var(--dx-g-green-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-green-vibrant-90);
 }
 
-dx-type-badge.patch {
-    --dx-c-type-badge-color: var(--dx-g-teal-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-teal-vibrant-90);
+dx-metadata-badge.patch {
+    --dx-c-metadata-badge-color: var(--dx-g-teal-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-teal-vibrant-90);
 }
 
-dx-type-badge.delete {
-    --dx-c-type-badge-color: var(--dx-g-red-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-hot-orange-vibrant-90);
+dx-metadata-badge.delete {
+    --dx-c-metadata-badge-color: var(--dx-g-red-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-hot-orange-vibrant-90);
 }
 
 a {

package/src/modules/dx/treeTile/treeTile.html

@@ -1,5 +1,5 @@
 <template>
-    <a href={href} class={tileClass}>
+    <a href={href} class={tileClass} target={target}>
         <div class="flex indentation" aria-level={tileAriaLevel}>
             <span
                 class="tile-label sidebar-item-truncate-text"
@@ -16,12 +16,13 @@
                     onclick={onClickIcon}
                 ></dx-icon>
             </div>
-            <dx-type-badge
+            <dx-metadata-badge
                 if:true={showMethod}
-                class={badgeClass}
+                class="flex tile-icon"
                 size="small"
                 value={methodText}
-            ></dx-type-badge>
+                color={metadataBadgeColor}
+            ></dx-metadata-badge>
         </div>
     </a>
 </template>

package/src/modules/dx/treeTile/treeTile.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { InternalTreeNode } from "typings/custom";
+import { Color, InternalTreeNode } from "typings/custom";
 
 const methodTextMap: {
     [key: string]: string;
@@ -12,6 +12,16 @@ const methodTextMap: {
     delete: "DELE"
 };
 
+const metadataBadgeColorMap: {
+    [key: string]: Color;
+} = {
+    get: "blue",
+    put: "yellow",
+    post: "green",
+    patch: "teal",
+    delete: "red"
+};
+
 export default class TreeTile extends LightningElement {
     @api isRoot = false;
     @api treeNode!: InternalTreeNode;
@@ -20,6 +30,7 @@ export default class TreeTile extends LightningElement {
     @api isSelected = false;
     @api href!: string;
     @api showArrow = false;
+    @api target!: string;
 
     get tileAriaLevel() {
         return this.treeNode.level + 2;
@@ -29,8 +40,11 @@ export default class TreeTile extends LightningElement {
         return this.isRoot ? "small" : "xsmall";
     }
 
-    private get badgeClass() {
-        return cx("flex", "tile-icon", this.treeNode.method);
+    private get metadataBadgeColor(): string | undefined {
+        if (this.treeNode.method) {
+            return metadataBadgeColorMap[this.treeNode.method];
+        }
+        return undefined;
     }
 
     private get showMethod() {