@salesforcedevs/dx-components 1.2.2 → 1.2.6-avatar-button-1

package/src/modules/dx/avatarButton/avatarButton.ts

@@ -0,0 +1,366 @@
+import { api, LightningElement } from "lwc";
+import Cookies from "js-cookie";
+import { track } from "dxUtils/analytics";
+import defaults from "lodash.defaults";
+import escapeHtml from "escape-html";
+
+// TODO: move to environment variable
+const TBID_BASE_URL = "https://dev1-trailblazer-identity.cs192.force.com";
+const TBID_SETTINGS_URL = `${TBID_BASE_URL}/settings`;
+const TBID_PROFILE_URL = `${TBID_BASE_URL}/id`;
+const TBID_IFRAME_URL = `${TBID_BASE_URL}/secur/logout.jsp`;
+// TODO: move to environment variable
+const TBID_API_BASE_URL = "https://development.developer.salesforce.com/tbid";
+const TBID_API_LOGOUT_URL = `${TBID_API_BASE_URL}/logout`;
+const TBID_API_USERINFO_URL = `${TBID_API_BASE_URL}/userinfo`;
+const TBID_API_LOGIN_URL = `${TBID_API_BASE_URL}/dologin`;
+const TBID_API_TOKEN_URL = `${TBID_API_BASE_URL}/token`;
+const TBID_API_PLATFORM_EVENTS_URL = `${TBID_API_BASE_URL}/platform-events`;
+
+declare global {
+    interface Window {
+        SFIDWidget?: {
+            logout(): void;
+            login(): void;
+            openid_response: any;
+            disabled: boolean;
+        };
+    }
+}
+
+export 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"
+}
+
+const trackableUserInfo = new Set([
+    "company",
+    "id",
+    "orgId",
+    "relationship",
+    "role"
+]);
+
+export default class AvatarButton extends LightningElement {
+    @api size: "small" | "medium" | "large" = "medium";
+
+    private userInfo: UserInfo = {};
+    private isLoading = false;
+    private settingsUrl = TBID_SETTINGS_URL;
+    private profileUrl = TBID_PROFILE_URL;
+    private eventSource?: EventSource;
+    private _hasRendered = false;
+    private _didReceiveUserInfo = false;
+
+    private get loginUrl() {
+        return `${TBID_API_LOGIN_URL}?startURL=${encodeURIComponent(
+            window.location.href
+        )}`;
+    }
+
+    private get isLoggedIn() {
+        return this._didReceiveUserInfo;
+    }
+
+    connectedCallback() {
+        const isLoginSuccessRedirect =
+            Cookies.get("tbidLoginSuccess") === "true";
+
+        if (isLoginSuccessRedirect) {
+            this.isLoading = true;
+            Cookies.remove("tbidLoginSuccess"); // cleanup
+        }
+
+        window.addEventListener("tbid-login", this.handleSsoLogin);
+        window.addEventListener("tbid-logout", this.handleSsoLogout);
+
+        const isWidgetDisabled = window.SFIDWidget?.disabled;
+        const isWidgetLoggedIn = window.SFIDWidget?.openid_response;
+
+        // If the component loads and (1) we are logging in and (2) the embedded login widget script
+        // is in the DOM but (3) the widget has either not loaded or not completed login yet, we
+        // defer the userInfo request in order to allow the SFIDWidget the time to trigger it (via
+        // it's own login handler) after SSO login. If any of (1) - (3) are false, then we request
+        // user info immediately. The check prevents duplicate requests.
+        if (
+            this.isLoading &&
+            (!window.SFIDWidget || (!isWidgetDisabled && !isWidgetLoggedIn)) &&
+            document.querySelector('script[src*="authProviderEmbeddedLogin"]')
+        ) {
+            setTimeout(() => {
+                if (!window.SFIDWidget?.openid_response) {
+                    // SFIDWidget not responding in time; handle login ourselves.
+                    this.trackLoginSuccess();
+                    this.requestUserInfo();
+                }
+            }, 1000);
+        } else {
+            if (this.isLoading) {
+                // This is a successful login; track it.
+                this.trackLoginSuccess();
+            }
+            this.requestUserInfo();
+        }
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener("tbid-login", this.handleSsoLogin);
+        window.removeEventListener("tbid-logout", this.handleSsoLogout);
+        this.teardownEventSource();
+    }
+
+    private handleUserDataChange = ({ data }: EventSourceEvent) => {
+        let parsedEventData: any;
+
+        try {
+            parsedEventData = JSON.parse(data);
+        } catch (ex) {
+            console.error(
+                `Unparseable ${PlatformEventsType.UserDataChange} data received`
+            );
+            return;
+        }
+
+        this.updateAvatarWithUserInfo(parsedEventData);
+    };
+
+    private setupEventSource = () => {
+        // subscribe to platform events
+        this.eventSource = new EventSource(TBID_API_PLATFORM_EVENTS_URL);
+        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 platformEventsSubscribe = () => {
+        this.teardownEventSource();
+        this.setupEventSource();
+    };
+
+    // This handles logout from within this component, rather than from SSO via the SFIDWidget.
+    private handleLogout = (isSsoLogout: boolean) => {
+        this._didReceiveUserInfo = false;
+        this.isLoading = false;
+        this.updateAvatarWithUserInfo({}); // clear old info
+        this.teardownEventSource();
+
+        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
+            fetch(`${TBID_API_LOGOUT_URL}?isSsoLogout=${isSsoLogout}`, {
+                method: 'DELETE',
+                credentials: 'same-origin'
+            }); // no need to await this
+
+            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", TBID_IFRAME_URL);
+                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);
+
+    private handleComponentLogout = () => {
+        this.trackLogoutClick();
+        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 check for extra safety
+        if (token) {
+            this.isLoading = true;
+            // 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
+            try {
+                await fetch(TBID_API_TOKEN_URL, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json"
+                    },
+                    body: JSON.stringify({
+                        token
+                    })
+                });
+                this.platformEventsSubscribe();
+            } catch (ex) {
+                console.error(`Attempt to update token failed: ${ex}`);
+            }
+
+            this.trackLoginSuccess();
+        }
+
+        if (userInfo) {
+            this.updateAvatarWithUserInfo(userInfo);
+            this._didReceiveUserInfo = true;
+        }
+
+        this.isLoading = false;
+    };
+
+    private handleComponentLogin = (event: MouseEvent) => {
+        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();
+            window.SFIDWidget.login();
+        }
+
+        this.trackLoginClick();
+    };
+
+    private trackLoginClick = () => {
+        track(document, "custEv_userLogin", {
+            clickText: "trailblazer.me",
+            clickUrl: this.loginUrl,
+            itemTitle: "TBID Login Link",
+            elementType: "link"
+        });
+    };
+
+    private trackLogoutClick = () => {
+        track(document, "custEv_userLogout", {
+            clickText: "logout",
+            clickUrl: TBID_API_LOGOUT_URL,
+            itemTitle: "TBID Logout Link",
+            elementType: "link"
+        });
+    };
+
+    private trackLoginSuccess = () => {
+        track(document, "custEv_userLogin", {
+            authenticationMethod: "tbid",
+            id: {
+                tb: Object.entries(this.userInfo)
+                    .filter(([key]) => trackableUserInfo.has(key))
+                    .reduce(
+                        (infoToTrack, [key, value]) => ({
+                            ...infoToTrack,
+                            [key]: value
+                        }),
+                        {} as Record<string, string>
+                    )
+            }
+        });
+    };
+
+    private updateAvatarWithUserInfo = (userInfo: any) => {
+        if (!userInfo) {
+            return;
+        }
+
+        const nextUserInfo: UserInfo = {};
+        nextUserInfo.avatarImgSrc = userInfo.photos?.thumbnail;
+        nextUserInfo.firstName = userInfo.given_name;
+        nextUserInfo.lastName = userInfo.family_name;
+        nextUserInfo.username = userInfo.preferred_username;
+        nextUserInfo.id = userInfo.user_id;
+        nextUserInfo.orgId = userInfo.organization_id;
+        nextUserInfo.fullName =
+            nextUserInfo.firstName && nextUserInfo.lastName
+                ? `${nextUserInfo.firstName} ${nextUserInfo.lastName}`
+                : nextUserInfo.firstName || nextUserInfo.lastName || "";
+
+        if (userInfo.custom_attributes) {
+            // ProfilePictureUrl updates earlier than photos.thumbnail, so we prefer it if it's available here.
+            nextUserInfo.avatarImgSrc =
+                userInfo.custom_attributes.ProfilePictureUrl ||
+                nextUserInfo.avatarImgSrc;
+            nextUserInfo.company = userInfo.custom_attributes.CompanyName;
+            nextUserInfo.relationship =
+                userInfo.custom_attributes.RelationshipToSalesforce;
+            nextUserInfo.role = userInfo.custom_attributes.Role;
+        }
+        // TODO: Consider displaying initials if no photo. Is there always a photo even if just a default one?
+
+        const htmlSafeNextUserInfo: UserInfo = Object.fromEntries(
+            Object.entries(nextUserInfo).map(([key, val]) => [
+                key,
+                escapeHtml(encodeURIComponent(val))
+            ])
+        );
+
+        this.userInfo = defaults(htmlSafeNextUserInfo, this.userInfo);
+    };
+
+    private requestUserInfo = async () => {
+        this.isLoading = true;
+
+        try {
+            const userInfoRes = await fetch(TBID_API_USERINFO_URL);
+
+            if (userInfoRes.ok) {
+                if (!this.eventSource) {
+                    this.setupEventSource();
+                }
+                const userInfo = await userInfoRes.json();
+                this.updateAvatarWithUserInfo(userInfo);
+                this._didReceiveUserInfo = true;
+            }
+        } catch (ex) {
+            // TODO: Something not directly related to auth went wrong. Unsure what to do here.
+            console.error(`Could not request user info: ${ex}`);
+        }
+
+        this.isLoading = false;
+    };
+}

package/src/modules/dx/button/button.css

@@ -49,7 +49,6 @@
 .button.variant_inline dx-icon,
 .button.variant_inline-inherit dx-icon {
     display: inline-block;
-    transform: translate(0, -2px);
 }
 
 .button > span {
@@ -61,11 +60,6 @@
     font-family: var(--dx-g-font-display);
 }
 
-.button.font-display:not(.variant_inline):not(.variant_inline-inherit) > span {
-    /* offset accounts for display font's ghost padding */
-    margin-top: 5px;
-}
-
 .button.font-sans {
     font-family: var(--dx-g-font-sans);
 }

package/src/modules/dx/featuresList/featuresList.css

@@ -20,5 +20,5 @@
 .icon {
     color: #3ba755;
     padding-right: var(--dx-g-spacing-md);
-    padding-top: var(--dx-g-spacing-2xs);
+    padding-top: var(--dx-g-spacing-sm);
 }

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

@@ -19,6 +19,9 @@
                         onstatechange={handleStateChange}
                     ></dx-header-search>
                 </div>
+                <div if:true={showTbidLogin} class="header-tbid-login">
+                    <dx-avatar-button></dx-avatar-button>
+                </div>
                 <div if:true={showSignup} class="header-login-signup">
                     <dx-button
                         aria-label="Sign Up For Salesforce Developer Edition"

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/hr/hr.css

@@ -13,7 +13,7 @@ h2 {
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
     color: var(--dx-g-blue-vibrant-20);
-    text-transform: uppercase;
+    text-transform: capitalize;
     letter-spacing: 0;
     line-height: 18px;
 }
@@ -22,7 +22,6 @@ p::before,
 h2::before,
 p::after,
 h2::after {
-    transform: translateY(-2px); /* offset for display font ghost padding */
     content: "";
     flex: 1 1;
     border-bottom: 2px solid var(--dx-g-gray-95);
@@ -42,7 +41,7 @@ h2::after {
 dx-button {
     display: flex;
     width: 100%;
-    text-transform: uppercase;
+    text-transform: capitalize;
     padding: 0 var(--dx-c-hr-padding-horizontal);
 }
 

package/src/modules/dx/imageAndLabel/imageAndLabel.css

@@ -17,7 +17,6 @@ img {
 }
 
 span {
-    margin-top: 3px;
     white-space: nowrap;
 }
 

package/src/modules/dx/logo/logo.css

@@ -23,7 +23,6 @@ a:hover {
 }
 
 .logo-link > span {
-    margin-top: 3px;
     color: var(--dx-c-logo-label-color);
 }
 

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/metadataBadge/metadataBadge.css

@@ -32,14 +32,6 @@
     letter-spacing: 0.5px;
 }
 
-.badge span {
-    transform: translateY(2px);
-}
-
-.badge.size-small span {
-    transform: translateY(1px);
-}
-
 @media screen and (max-width: 768px) {
     .badge:not(.size-small) {
         height: var(--dx-g-spacing-lg);

package/src/modules/dx/pagination/pagination.css

@@ -27,8 +27,7 @@
 }
 
 .dx-pagination-pages button {
-    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md)
-        var(--dx-g-spacing-2xs) var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-md);
     border-radius: var(--dx-g-spacing-lg);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);

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

@@ -63,3 +63,18 @@
 .popover-small {
     width: 136px;
 }
+
+.popover-arrow {
+    position: absolute;
+    background: white;
+    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,29 @@ 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 isNoWorkToDo =
+            slot.name !== "control" ||
+            !slotElement ||
+            (this.control && slotElement.isSameNode(this.control));
+
+        if (isNoWorkToDo) {
+            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 +292,60 @@ 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);
+                }
             });
         }
     };