@salesforcedevs/dx-components 1.3.0 → 1.3.2

package/lwc.config.json

@@ -1,5 +1,8 @@
 {
-    "modules": [{ "dir": "src/modules" }],
+    "modules": [
+        { "dir": "src/modules" },
+        { "npm": "@salesforcedevs/dw-components" }
+    ],
     "expose": [
         "dx/banner",
         "dx/brandThemeProvider",
@@ -70,6 +73,7 @@
         "dx/spinner",
         "dx/tabPanel",
         "dx/tabPanelList",
+        "dx/tbidAvatarButton",
         "dx/toc",
         "dx/tooltip",
         "dx/tree",
@@ -90,6 +94,7 @@
         "dxHelpers/table",
         "dxHelpers/text",
         "dxUtils/analytics",
+        "dxUtils/async",
         "dxUtils/constants",
         "dxUtils/coveo",
         "dxUtils/dates",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.0",
+    "version": "1.3.2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -17,16 +17,24 @@
         "classnames": "^2.2.6",
         "coveo-search-ui": "^2.10082.5",
         "debounce": "^1.2.0",
+        "js-cookie": "^3.0.1",
+        "lodash.defaults": "^4.2.0",
         "lodash.get": "^4.4.2",
         "lodash.kebabcase": "^4.1.1",
-        "microtip": "0.2.2"
+        "microtip": "0.2.2",
+        "salesforce-oauth2": "^0.2.0",
+        "uuid": "^9.0.0"
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10",
         "@types/debounce": "^1.2.0",
+        "@types/js-cookie": "^3.0.2",
+        "@types/lodash.defaults": "^4.2.7",
         "@types/lodash.get": "^4.4.6",
         "@types/lodash.kebabcase": "^4.1.7",
-        "@types/vimeo__player": "^2.16.2"
+        "@types/uuid": "^8.3.4",
+        "@types/vimeo__player": "^2.16.2",
+        "eventsourcemock": "^2.0.0"
     },
-    "gitHead": "b5d88aa134399d66a9f894d05ecec170843bc30f"
+    "gitHead": "6bce82b465b57812c5de5e80abbdb291e3809be1"
 }

package/src/modules/dx/footer/links.ts

@@ -150,9 +150,13 @@ const openOneTrustInfoDisplay = () => {
 export const termsLinks = [
     { href: privacyHref, label: "Privacy Statement" },
     {
-        href: "https://trailblazer.me/resource/documents/documents/pdf/TermsOfUse_en_US.pdf",
+        href: "https://www.salesforce.com/company/program-agreement/",
         label: "Terms of Use"
     },
+    {
+        href: "https://www.salesforce.com/company/legal/",
+        label: "Legal"
+    },
     {
         href: "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
         label: "Use of Cookies"

package/src/modules/dx/header/header.html

@@ -19,6 +19,13 @@
                         onstatechange={handleStateChange}
                     ></dx-header-search>
                 </div>
+                <div
+                    if:true={showTbidLogin}
+                    class="header-tbid-login"
+                    onclick={closeMobileNavMenu}
+                >
+                    <dw-tbid-login-menu></dw-tbid-login-menu>
+                </div>
                 <div if:true={showSignup} class="header-login-signup">
                     <dx-button
                         aria-label="Browse Trials"

package/src/modules/dx/header/header.ts

@@ -1,6 +1,10 @@
 import { HeaderBase } from "dxBaseElements/headerBase";
 
 export default class Header extends HeaderBase {
+    private get showTbidLogin(): boolean {
+        return this.showSignup;
+    }
+
     private get showSignup(): boolean {
         return this.signupLink
             ? (this.mobile && !this.isSearchOpen) || !this.mobile

package/src/modules/dx/logo/logo.ts

@@ -3,6 +3,6 @@ import { LightningElement, api } from "lwc";
 export default class Logo extends LightningElement {
     @api href: string = "/";
     @api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
-    @api imgAlt: string = "Salesforce log";
+    @api imgAlt: string = "Salesforce logo";
     @api label!: string;
 }

package/src/modules/dx/popover/popover.css

@@ -64,3 +64,25 @@
 .popover-small {
     width: 136px;
 }
+
+.popover-arrow {
+    position: absolute;
+
+    /* Weird spacing here to satisfy our linter */
+    background: linear-gradient(
+        315deg,
+        transparent 4px,
+        white 4px
+    ); /* make only top half of rotated square visible */
+
+    width: 8px;
+    height: 8px;
+    transform: rotate(45deg);
+    border: var(--popover-border);
+    border-bottom: transparent;
+    border-right: transparent;
+    box-shadow: var(--dx-g-box-shadow-lg);
+    transition: opacity 0.2s linear, transform 0.2s linear;
+    transition-delay: 0.02s;
+    z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));
+}

package/src/modules/dx/popover/popover.html

@@ -1,6 +1,7 @@
 <template>
     <slot name="control" onslotchange={onSlotChange}></slot>
     <div class={containerClassName}>
+        <div class="popover-arrow" if:true={showArrow}></div>
         <div
             class={className}
             style={style}

package/src/modules/dx/popover/popover.ts

@@ -5,7 +5,7 @@ import {
     PopperPlacement
 } from "typings/custom";
 
-import { computePosition, flip, size, shift } from "@floating-ui/dom";
+import { computePosition, flip, size, shift, arrow } from "@floating-ui/dom";
 import cx from "classnames";
 import debounce from "debounce";
 import { isPrerender } from "dxUtils/seo";
@@ -31,6 +31,7 @@ export default class Popover extends LightningElement {
     @api openOnHover?: boolean = false; // dropdown opens/closes with hover
     @api width?: string | null = null;
     @api fullWidth?: boolean | null;
+    @api showArrow?: boolean | null;
 
     @api
     get open() {
@@ -103,9 +104,11 @@ export default class Popover extends LightningElement {
     private _open: boolean = false;
     private _rendered: boolean = isPrerender();
     private _role: string | null = null;
+    private arrow: HTMLElement | null = null;
     private control: (HTMLElement & { disabled?: boolean }) | null = null;
     private focusedValue: string | null = null;
     private popover: HTMLElement | null = null;
+    private popoverContent: HTMLElement | null = null;
 
     // LIFECYCLE METHODS
 
@@ -120,6 +123,12 @@ export default class Popover extends LightningElement {
         if (!this.popover) {
             this.popover = this.template.querySelector(".popover-container");
         }
+        if (!this.popoverContent) {
+            this.popoverContent = this.template.querySelector(".popover");
+        }
+        if (!this.arrow && this.showArrow) {
+            this.arrow = this.template.querySelector(".popover-arrow");
+        }
     }
 
     // GETTERS
@@ -232,23 +241,27 @@ export default class Popover extends LightningElement {
         this.openPopover();
     };
 
-    private onSlotChange(e: LightningSlotElement) {
-        const slot = e.target;
+    private onSlotChange(e: Event) {
+        const slot = e.target as LightningSlotElement;
         const elements = slot.assignedElements();
         const slotted = elements.length === 0 ? null : elements[0];
         // allows dropdown/select to compose popover
-        const control =
-            slotted.tagName === "SLOT" ? slotted.firstChild : slotted;
-        const onboardControl =
-            (!this.control || (control && !control.isSameNode(this.control))) &&
-            control;
-        if (onboardControl) {
-            control.setAttribute("aria-haspopup", "true");
-            control.style.cursor = this.openOnHover ? "default" : "cursor";
-            this.control = control;
-            this.addControlListeners();
-            this.setPosition();
+        const slotElement = (
+            slotted?.tagName === "SLOT" ? slotted.firstChild : slotted
+        ) as HTMLElement | null;
+        const isWorkToDo =
+            slotElement &&
+            (!this.control || !slotElement.isSameNode(this.control));
+
+        if (!isWorkToDo) {
+            return;
         }
+
+        slotElement.setAttribute("aria-haspopup", "true");
+        slotElement.style.cursor = this.openOnHover ? "default" : "cursor";
+        this.control = slotElement;
+        this.addControlListeners();
+        this.setPosition();
     }
 
     private onKeyDown(e: KeyboardEvent): void {
@@ -277,29 +290,62 @@ export default class Popover extends LightningElement {
         if (this.popover && this.control) {
             await Promise.resolve();
             const popoverEl = this.popover;
+            const middleware = [flip(), shift({ padding: this.pagePadding })];
+
+            if (this.fullWidth) {
+                middleware.unshift(
+                    size({
+                        apply({ rects }) {
+                            Object.assign(popoverEl.style, {
+                                width: `${rects.reference.width}px`
+                            });
+                        }
+                    })
+                );
+            }
+
+            if (this.arrow) {
+                middleware.push(arrow({ element: this.arrow, padding: 24 }));
+            }
 
             computePosition(this.control, popoverEl, {
                 placement: this.placement,
-                middleware: [
-                    ...(this.fullWidth
-                        ? [
-                              size({
-                                  apply({ rects }) {
-                                      Object.assign(popoverEl.style, {
-                                          width: `${rects.reference.width}px`
-                                      });
-                                  }
-                              })
-                          ]
-                        : []),
-                    flip(),
-                    shift({ padding: this.pagePadding })
-                ]
-            }).then(({ x, y }) => {
+                middleware
+            }).then(({ x, y, placement, middlewareData }) => {
                 Object.assign(popoverEl.style, {
                     left: `${x}px`,
                     top: `${y}px`
                 });
+
+                if (this.arrow && middlewareData.arrow) {
+                    const { x: arrowX, y: arrowY } = middlewareData.arrow;
+                    const popoverPlacementSide = placement.split("-")[0] as
+                        | "top"
+                        | "bottom"
+                        | "left"
+                        | "right";
+                    const staticSide = {
+                        top: "bottom",
+                        right: "left",
+                        bottom: "top",
+                        left: "right"
+                    }[popoverPlacementSide];
+                    const arrowStyles = {
+                        left: arrowX != null ? `${arrowX}px` : "",
+                        top: arrowY != null ? `${arrowY}px` : "",
+                        right: "",
+                        bottom: "",
+                        [staticSide]: "-4px"
+                    };
+
+                    if (this.offset && this.popoverContent) {
+                        arrowStyles.marginTop = getComputedStyle(
+                            this.popoverContent
+                        ).marginTop;
+                    }
+
+                    Object.assign(this.arrow.style, arrowStyles);
+                }
             });
         }
     };

package/src/modules/dx/tbidAvatarButton/tbidAvatarButton.css

@@ -0,0 +1,33 @@
+@import "dxHelpers/reset";
+
+:host {
+    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-background: transparent;
+    --dx-c-button-custom-border: 1px solid transparent;
+    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-background-hover: var(--dx-g-cloud-blue-vibrant-90);
+    --dx-c-button-custom-border-hover: var(--dx-g-cloud-blue-vibrant-90);
+    --dx-c-slot-empty-width: max-content;
+}
+
+.avatar-control {
+    height: var(--dx-g-spacing-xl);
+    width: calc(var(--dx-g-spacing-lg) + 4px);
+}
+
+.avatar-small-container {
+    align-items: center;
+    display: flex;
+    padding: 2px 0;
+}
+
+.avatar {
+    border-radius: 100%;
+    border: 2px solid #0d9dda;
+}
+
+.avatar.avatar-small {
+    display: block;
+    height: calc(var(--dx-g-spacing-lg) + 4px);
+    width: calc(var(--dx-g-spacing-lg) + 4px);
+}

package/src/modules/dx/tbidAvatarButton/tbidAvatarButton.html

@@ -0,0 +1,53 @@
+<template>
+    <div if:true={isLoggedIn}>
+        <dx-popover
+            offset="small"
+            width="320px"
+            placement="bottom-end"
+            open-on-hover
+            show-arrow
+        >
+            <div slot="control" class="avatar-small-container login-control">
+                <button
+                    class="avatar-control"
+                    aria-labelledby="avatar-control-label"
+                >
+                    <img
+                        src={userInfo.avatarImgSrc}
+                        class="avatar avatar-small"
+                        alt="Small user avatar image"
+                    />
+                    <span id="avatar-control-label" hidden>
+                        {userInfo.fullName}
+                    </span>
+                </button>
+            </div>
+            <div slot="content">
+                <slot name="popover-content"></slot>
+            </div>
+        </dx-popover>
+    </div>
+    <div if:false={isLoggedIn}>
+        <dx-popover
+            offset="small"
+            width="320px"
+            placement="bottom-end"
+            open-on-hover
+            show-arrow
+        >
+            <dx-button
+                slot="control"
+                class="login-control"
+                icon-symbol="user"
+                icon-position="left"
+                loading={isLoading}
+                variant="custom"
+            >
+                Login
+            </dx-button>
+            <div slot="content">
+                <slot name="popover-content"></slot>
+            </div>
+        </dx-popover>
+    </div>
+</template>

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

@@ -0,0 +1,439 @@
+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 = () => this.handleComponentLogout();
+
+    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 = () => {
+        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/dxHelpers/commonHeader/commonHeader.css

@@ -108,12 +108,14 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
     margin-left: var(--dx-g-spacing-sm);
 }
 
-.header-login-signup {
+.header-login-signup,
+.header-tbid-login {
     display: flex;
     align-items: center;
 }
 
-.header-login-signup dx-button {
+.header-login-signup dx-button,
+.header-tbid-login dw-tbid-login-menu {
     margin-left: var(--dx-g-spacing-smd);
 }
 

package/src/modules/dxUtils/async/async.ts

@@ -0,0 +1,45 @@
+/**
+ * Checks whether a condition is satisfied at a specified interval, stopping after a maximum amount
+ * of time (if specified). Returns a Promise that resolves with `true` if the condition was
+ * satisfied during polling (if a maximum time is specified, it can resolve with false if the
+ * condition was not satisfied within the maximum time).
+ *
+ * Usage:
+ *  await pollUntil(() => something.is.true, 200, 1000);
+ *
+ * @param {Function} condition the "check" callback that will be called to determine whether the
+ *  condition has been satisfied (satisfied === callback returns truthy value)
+ * @param {number} atIntervalMs value in milliseconds specifying how often to poll
+ * @param {number} [forMaximumMs] value in milliseconds specifying the maximum time to poll
+ * @returns {Promise}
+ */
+export function pollUntil(
+    condition: () => boolean,
+    atIntervalMs: number,
+    forMaximumMs?: number
+) {
+    return new Promise<boolean>((resolve) => {
+        let timeoutId: ReturnType<typeof setTimeout>;
+        const intervalId = setInterval(() => {
+            if (condition()) {
+                resolveWithCleanup(true);
+            }
+        }, atIntervalMs);
+        if (typeof forMaximumMs === "number") {
+            timeoutId = setTimeout(() => {
+                // One last check in case the condition was satisfied right before the end:
+                resolveWithCleanup(condition() || false);
+            }, forMaximumMs);
+        }
+        if (condition()) {
+            // Condition already fulfilled before intervals, no need to keep waiting!
+            resolveWithCleanup(true);
+        }
+
+        function resolveWithCleanup(success: boolean) {
+            clearInterval(intervalId);
+            clearTimeout(timeoutId);
+            resolve(success);
+        }
+    });
+}