@salesforcedevs/dx-components 0.80.0 → 1.2.2-avatar-button-2

package/lwc.config.json

@@ -1,6 +1,7 @@
 {
     "modules": [{ "dir": "src/modules" }],
     "expose": [
+        "dx/avatarButton",
         "dx/banner",
         "dx/brandThemeProvider",
         "dx/breadcrumbs",
@@ -46,6 +47,7 @@
         "dx/imageAndLabel",
         "dx/input",
         "dx/logo",
+        "dx/metadataBadge",
         "dx/modalDrawer",
         "dx/pagination",
         "dx/podcastHost",
@@ -68,10 +70,12 @@
         "dx/tooltip",
         "dx/tree",
         "dx/typeBadge",
-        "dx/typeBadgeGroup",
         "dx/vimeoPlayer",
         "dxBaseElements/headerBase",
         "dxBaseElements/matchMediaElement",
+        "dxConstants/brands",
+        "dxConstants/colors",
+        "dxConstants/contentTypes",
         "dxHelpers/animations",
         "dxHelpers/button",
         "dxHelpers/card",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.80.0",
+    "version": "1.2.2-avatar-button-2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -19,7 +19,8 @@
         "debounce": "^1.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"
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10",

package/src/modules/dx/avatarButton/avatarButton.css

@@ -0,0 +1,129 @@
+: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-small-container {
+    padding: 2px 0;
+}
+
+.avatar {
+    border-radius: 100%;
+    border: 2px solid #0d9dda;
+}
+
+.avatar.avatar-small {
+    display: block;
+    height: var(--dx-g-spacing-lg);
+    width: var(--dx-g-spacing-lg);
+}
+
+.avatar.avatar-medium {
+    margin-bottom: 14px;
+    width: var(--dx-g-spacing-2xl);
+}
+
+.login-container {
+    padding: 16px;
+}
+
+.login-container.logged-in {
+    padding-top: 68px;
+}
+
+.header-img {
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: -1;
+}
+
+.heading {
+    color: var(--dx-g-blue-vibrant-20);
+    display: block;
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+    line-height: 28px;
+}
+
+.sub-heading {
+    color: var(--dx-g-blue-vibrant-20);
+    display: block;
+    font-family: var(--dx-g-font-sans);
+    font-size: 12px;
+    line-height: 18px;
+    padding: 8px 0;
+}
+
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.login-list-item {
+    padding-bottom: 10px;
+}
+
+.login-section ~ .login-section {
+    border-top: 1px solid var(--dx-g-gray-90);
+    margin-top: 12px;
+}
+
+.login-section-title {
+    color: var(--dx-g-gray-30);
+    display: inline-block;
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+    padding: 20px 0 12px;
+}
+
+.login-link {
+    color: var(--dx-g-blue-vibrant-20);
+    display: block;
+}
+
+.login-link-label {
+    display: inline-block;
+    font-family: var(--dx-g-font-display);
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.login-link-img {
+    display: inline-block;
+    height: 16px;
+    margin-left: 6px;
+    vertical-align: middle;
+}
+
+.login-link-icon {
+    display: inline-block;
+    margin-left: 6px;
+    vertical-align: baseline;
+}
+
+.login-link-blurb {
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+    padding-top: 4px;
+}
+
+.heading-links {
+    color: var(--dx-g-gray-90);
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+a.inline-link {
+    color: var(--dx-g-blue-vibrant-50);
+}

package/src/modules/dx/avatarButton/avatarButton.html

@@ -0,0 +1,155 @@
+<template>
+    <div if:true={isLoggedIn}>
+        <dx-popover offset="small" width="320px" open-on-hover>
+            <div slot="control" class="avatar-small-container login-control">
+                <img src={userInfo.avatarImgSrc} class="avatar avatar-small" />
+            </div>
+            <div slot="content">
+                <div class="login-container logged-in">
+                    <img
+                        src="/assets/svg/login-widget-bg.png"
+                        class="header-img"
+                    />
+                    <img
+                        src={userInfo.avatarImgSrc}
+                        class="avatar avatar-medium"
+                    />
+                    <span class="heading">{userInfo.fullName}</span>
+                    <span class="sub-heading">{userInfo.username}</span>
+                    <div class="heading-links">
+                        <!--
+                        <a href="#" class="inline-link">Switch account</a>
+                        &nbsp;&nbsp;|&nbsp;&nbsp;
+                        -->
+                        <a
+                            href="#"
+                            onclick={handleComponentLogout}
+                            class="inline-link"
+                        >
+                            Logout
+                        </a>
+                    </div>
+                    <div class="login-section">
+                        <span class="login-section-title">Trailblazer.me</span>
+                        <ul>
+                            <li class="login-list-item">
+                                <a href={settingsUrl} class="login-link">
+                                    <span class="login-link-label">
+                                        Settings
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                            <li class="login-list-item">
+                                <a href={profileUrl} class="login-link">
+                                    <span class="login-link-label">
+                                        Profile
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                            <li class="login-list-item">
+                                <a href="#" class="login-link">
+                                    <span class="login-link-label">
+                                        Developer Forums
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                                <div class="login-link-blurb">
+                                    Our Developer Forums have a new home!&nbsp;
+                                    <a href="#" class="inline-link">
+                                        Learn more
+                                    </a>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </dx-popover>
+    </div>
+    <div if:false={isLoggedIn}>
+        <dx-popover offset="small" width="320px" open-on-hover>
+            <dx-button
+                slot="control"
+                class="login-control"
+                icon-symbol="user"
+                icon-position="left"
+                loading={isLoading}
+                variant="custom"
+            >
+                Login
+            </dx-button>
+            <div slot="content">
+                <div class="login-container">
+                    <span class="heading">Login</span>
+                    <div class="login-section">
+                        <span class="login-section-title">Products</span>
+                        <ul>
+                            <li class="login-list-item">
+                                <a href="#" class="login-link">
+                                    <span class="login-link-label">
+                                        Salesforce
+                                    </span>
+                                    <img
+                                        class="login-link-img"
+                                        src="/assets/svg/salesforce-cloud.svg"
+                                        alt="Salesforce logo"
+                                    />
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                            <li class="login-list-item">
+                                <a href="#" class="login-link">
+                                    <span class="login-link-label">
+                                        Marketing Cloud
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="login-section">
+                        <span class="login-section-title">
+                            Community & Resources
+                        </span>
+                        <ul>
+                            <li class="login-list-item">
+                                <a href={loginUrl} class="login-link">
+                                    <span class="login-link-label">
+                                        Trailblazer.me
+                                    </span>
+                                </a>
+                                <div class="login-link-blurb">
+                                    Login into access a rich community of
+                                    Salesforce Developers, get ideas, and find
+                                    solutions.
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </dx-popover>
+    </div>
+</template>

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

@@ -0,0 +1,347 @@
+import { api, LightningElement } from "lwc";
+import { track } from "dxUtils/analytics";
+
+// 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;
+    readonly 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 = {
+        get fullName() {
+            if (this.firstName && this.lastName) {
+                return `${this.firstName} ${this.lastName}`;
+            }
+            return this.firstName || this.lastName || "";
+        }
+    };
+    private isLoading = false;
+    private settingsUrl = TBID_SETTINGS_URL;
+    private profileUrl = TBID_PROFILE_URL;
+    private _didReceiveUserInfo = false;
+    private eventSource?: EventSource;
+
+    private get loginUrl() {
+        return `${TBID_API_LOGIN_URL}?startURL=${encodeURIComponent(
+            window.location.href
+        )}`;
+    }
+
+    private get isLoggedIn() {
+        return this._didReceiveUserInfo;
+    }
+
+    connectedCallback() {
+        const searchParams = new URLSearchParams(window.location.search);
+
+        if (searchParams.get("loginSuccess") === "true") {
+            // clear the query param
+            this.isLoading = true;
+            searchParams.delete("loginSuccess");
+            window.location.search = searchParams.toString();
+        }
+
+        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) {
+                    // this.trackLogin(); TODO: track only clicks
+                    this.platformEventsSubscribe();
+                    this.requestUserInfo();
+                }
+            }, 1000);
+        } else {
+            if (this.isLoading) {
+                // This was a login.
+                this.platformEventsSubscribe();
+                // this.trackLogin(); TODO: track only clicks
+            }
+            this.requestUserInfo();
+        }
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener("tbid-login", this.handleSsoLogin);
+        window.removeEventListener("tbid-logout", this.handleSsoLogout);
+    }
+
+    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.UserPhotoChange,
+            this.requestUserInfo
+        );
+        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.UserPhotoChange,
+            this.requestUserInfo
+        );
+        this.eventSource.removeEventListener(
+            PlatformEventsType.UserMerge,
+            this.handleSsoLogout
+        );
+        if (this.eventSource.readyState !== 2 /* CLOSED */) {
+            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) {
+            this.trackLogout();
+        }
+
+        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}`); // 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.handleLogout.bind(this, 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}`);
+            }
+        }
+
+        if (userInfo) {
+            this.updateAvatarWithUserInfo(userInfo);
+            this._didReceiveUserInfo = true;
+        }
+
+        // this.trackLogin(); TODO: only track clicks
+    };
+
+    private handleComponentLogin = () => {
+        // Either of these methods will trigger a redirect, so we track the successful login after
+        // the redirect completes, and not here.
+        if (window.SFIDWidget) {
+            // If the SFIDWidget is around, defer to it for login. This will ensure that the SSO
+            // session is used if possible.
+            window.SFIDWidget.login();
+        } else {
+            window.location.href = this.loginUrl;
+        }
+    };
+
+    private trackLogin = () => {
+        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 trackLogout = () => {
+        track(document, "custEv_userLogout", {
+            clickText: "logout",
+            clickUrl: TBID_API_LOGOUT_URL,
+            itemTitle: "TBID Logout Link",
+            elementType: "link"
+        });
+    };
+
+    private updateAvatarWithUserInfo = (userInfo: any) => {
+        if (!userInfo) {
+            return;
+        }
+
+        this.userInfo.avatarImgSrc = userInfo.photos?.thumbnail;
+        this.userInfo.firstName = userInfo.given_name;
+        this.userInfo.lastName = userInfo.family_name;
+        this.userInfo.username = userInfo.preferred_username;
+        this.userInfo.id = userInfo.user_id;
+        this.userInfo.orgId = userInfo.organization_id;
+
+        if (userInfo.custom_attributes) {
+            this.userInfo.company = userInfo.custom_attributes.CompanyName;
+            this.userInfo.relationship =
+                userInfo.custom_attributes.RelationshipToSalesforce;
+            this.userInfo.role = userInfo.custom_attributes.Role;
+        }
+        // TODO: Consider displaying initials if no photo. Is there always a photo even if just a default one?
+    };
+
+    private requestUserInfo = async () => {
+        this.isLoading = true;
+
+        try {
+            const userInfoRes = await fetch(TBID_API_USERINFO_URL);
+
+            if (userInfoRes.ok) {
+                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/cardEvent/cardEvent.html

@@ -44,8 +44,7 @@
                         {location}
                     </span>
                     <dx-type-badge
-                        color={brandType}
-                        type="content-type"
+                        color={typeBadgeColor}
                         value={type}
                         if:true={type}
                     ></dx-type-badge>