@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/th/search/mocks/responses.ts

@@ -0,0 +1,54 @@
+import { CoveoCompletion, UserRecent } from '../types';
+
+export const completions: { completions: CoveoCompletion[] } = {
+    completions: [
+        {
+            expression: 'LWC',
+            score: 1,
+            highlighted: 'LWC',
+            executableConfidence: 1
+        },
+        {
+            expression: 'Visualforce Pages',
+            score: 1,
+            highlighted: 'Visualforce Pages',
+            executableConfidence: 1
+        }
+    ]
+};
+
+export const recents: { recents: UserRecent[] } = {
+    recents: [
+        {
+            color: null,
+            completion: null,
+            content_type: 'Module',
+            icon_url: '/images/badge-1.png',
+            path: '/en/content/learn/modules/salesforce-cms-basics',
+            title: 'Salesforce CMS Basics 1',
+            type: 'recent_favorite'
+        },
+        {
+            color: null,
+            completion: null,
+            content_type: 'Module',
+            icon_url: '/images/badge-1.png',
+            path: '/en/content/learn/modules/salesforce-cms-basics',
+            title: 'Salesforce CMS Basics 2',
+            type: 'recent_favorite'
+        },
+        {
+            color: 'var(--tds-color-brand)',
+            completion: null,
+            content_type: 'Trailmix',
+            icon_url: '/images/badge-1.png',
+            path: '/en/content/learn/modules/salesforce-cms-basics',
+            title: 'Salesforce CMS Basics 3',
+            type: 'recent_favorite'
+        }
+    ]
+};
+
+export const token = {
+    token: 'TOKEN'
+};

package/src/modules/th/search/search.css

@@ -0,0 +1,4 @@
+:host {
+    display: block;
+    width: 100%;
+}

package/src/modules/th/search/search.html

@@ -0,0 +1,12 @@
+<template>
+    <tds-search
+        completions={completions}
+        default-value={defaultCompletionTerms}
+        if:true={config}
+        onfocus={onFocus}
+        onchange={onChange}
+        onsearch={onSearch}
+        placeholder={config.labels.placeholder}
+        recents={recents}
+    ></tds-search>
+</template>

package/src/modules/th/search/search.ts

@@ -0,0 +1,172 @@
+import { api, LightningElement, wire } from 'lwc';
+import {
+    ContextAdapter as ThContextAdapter,
+    ContextAdapterValue as ThContextAdapterValue
+} from 'th/contextAdapter';
+
+import { debounce } from 'shared/debounce';
+import { getJSON } from 'shared/fetch';
+import { TrailheadAPIClient } from 'shared/trailhead';
+
+import {
+    Completion,
+    Recent,
+    RecentSection,
+    SearchEvent
+} from '../../tds/search/types';
+
+import { RECENTS_PATH, TOKEN_PATH } from './constants';
+import { CoveoCompletion, Config, UserRecent } from './types';
+
+export default class extends LightningElement {
+    @api config: Config = null!;
+
+    private accessToken: string | null = null;
+
+    private get client() {
+        return new TrailheadAPIClient({ csrfToken: this.context.csrf });
+    }
+
+    private completionTerms: string = '';
+    private completionController: AbortController | null = null;
+    private completions: Completion[] = [];
+
+    @wire(ThContextAdapter)
+    private context: ThContextAdapterValue = null!;
+
+    private defaultCompletionTerms = '';
+
+    private getCompletions = debounce(async (terms: string) => {
+        let { completionController: prevController, config } = this;
+        if (prevController) prevController.abort();
+        if (!config) return;
+        if (!terms.length) {
+            this.completions = [];
+            return;
+        }
+        let controller = (this.completionController = new AbortController());
+        let accessToken = await this.getAccessToken();
+        let url = getCompletionsUrl({
+            accessToken,
+            baseUrl: config.coveo.querySuggestUrl,
+            locale: config.coveo.locale,
+            terms
+        });
+        let { completions } = await getJSON<{ completions: CoveoCompletion[] }>(
+            url,
+            { signal: controller.signal }
+        );
+        if (this.completionTerms === terms)
+            this.completions = completions.map((c) => ({
+                value: c.expression,
+                valueHighlighted: c.highlighted
+            }));
+    }, 250);
+
+    private recents: RecentSection[] | null = null;
+
+    private async getAccessToken() {
+        if (this.accessToken) return this.accessToken;
+        let { token } = await this.client.post<{ token: string }>(TOKEN_PATH);
+        this.accessToken = token;
+        return token;
+    }
+
+    private async getRecents() {
+        let { config } = this;
+        try {
+            let { recents } = await this.client.get<{ recents: UserRecent[] }>(
+                RECENTS_PATH
+            );
+            let { recent_favorite, recent_item } = recents.reduce<
+                {
+                    [type in UserRecent['type']]: UserRecent[];
+                }
+            >((a, b) => (a[b.type].push(b), a), {
+                recent_favorite: [],
+                recent_item: []
+            });
+            this.recents = [
+                {
+                    items: recent_item.map(toRecent),
+                    title: config.labels.recentViewed
+                },
+                {
+                    items: recent_favorite.map(toRecent),
+                    title: config.labels.recentFavorites
+                }
+            ].filter((s) => s.items.length);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    private onFocus(e: FocusEvent) {
+        if (!this.recents) this.getRecents();
+    }
+
+    private onChange(e: CustomEvent<{ value: string }>) {
+        this.completionTerms = e.detail.value;
+        this.getCompletions(e.detail.value);
+    }
+
+    private onSearch(e: CustomEvent<SearchEvent>) {
+        let { config } = this;
+        switch (e.detail.type) {
+            case 'completion': {
+                let query = new URLSearchParams({
+                    keywords: e.detail.value.value,
+                    suggested: 'true'
+                }).toString();
+                window.location.href = `${config!.searchUrl}?${query}`;
+                break;
+            }
+            case 'input': {
+                let query = new URLSearchParams({
+                    keywords: e.detail.value
+                }).toString();
+                window.location.href = `${config!.searchUrl}?${query}`;
+                break;
+            }
+            case 'recent': {
+                window.location.href = e.detail.value.path;
+                break;
+            }
+        }
+    }
+
+    connectedCallback() {
+        let params = new URLSearchParams(window.location.search);
+        if (params.has('keywords')) {
+            this.defaultCompletionTerms = params.get('keywords')!;
+        }
+    }
+}
+
+function getCompletionsUrl(params: {
+    accessToken: string;
+    baseUrl: string;
+    locale: string;
+    terms: string;
+}) {
+    let { accessToken, baseUrl, locale, terms } = { ...params };
+    if (!/^http/.test(baseUrl)) baseUrl = `${process.env.API_HOST}${baseUrl}`;
+    let query = new URLSearchParams({
+        access_token: accessToken,
+        count: '10',
+        enableWordCompletion: 'true',
+        locale,
+        q: terms
+    }).toString();
+    return `${baseUrl}?${query}`;
+}
+
+function toRecent(recent: UserRecent): Recent {
+    return {
+        icon: recent.icon_url,
+        iconBackgroundColor: recent.color ? recent.color : undefined,
+        path: recent.path,
+        pretitle: recent.content_type,
+        title: recent.title
+    };
+}

package/src/modules/th/search/types.d.ts

@@ -0,0 +1,29 @@
+export type Config = {
+    coveo: {
+        locale: string;
+        querySuggestUrl: string;
+    };
+    labels: {
+        placeholder: string;
+        recentViewed: string;
+        recentFavorites: string;
+    };
+    searchUrl: string;
+};
+
+export type CoveoCompletion = {
+    expression: string;
+    score: number;
+    highlighted: string;
+    executableConfidence: number;
+};
+
+export type UserRecent = {
+    color: string | null;
+    completion: string | null;
+    content_type: string;
+    icon_url: string;
+    path: string;
+    title: string;
+    type: 'recent_favorite' | 'recent_item';
+};

package/src/modules/th/tbid/__tests__/__snapshots__/tbid.test.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`undefined: toMatchHTMLSnapshot 1`] = `"<head><meta name="salesforce-cache-max-age" content="0"><meta name="salesforce-brand" content="trailhead"><meta name="salesforce-community" content="/tbid-community-uri"><meta name="salesforce-use-min-js" content="false"><meta name="salesforce-init-handler" content="__tbid_init"><meta name="salesforce-login-handler" content="__tbid_login"><meta name="salesforce-logout-handler" content="__tbid_logout"><meta name="salesforce-mode" content="authprovider"><meta name="salesforce-redirect-uri" content="/tbid-redirect-uri"><meta name="salesforce-authprovider-login" content="/tbid-auth-provider-login-path"><meta name="salesforce-authprovider-signup" content="/tbid-auth-provider-signup-path"><script src="/tbid-community-uri/resource/authProviderEmbeddedLogin_v1_3"></script></head>"`;

package/src/modules/th/tbid/__tests__/tbid.test.ts

@@ -0,0 +1,242 @@
+import fetchMock from 'jest-fetch-mock';
+
+import { html, renderIntoBody, nextTick } from 'shared/testutils';
+
+import Tbid, {
+    EVENT_LOGIN,
+    EVENT_LOGOUT,
+    TRAILHEAD_EVENT_LOGIN,
+    TRAILHEAD_EVENT_LOGOUT,
+    TRAILHEAD_EVENT_SIGNUP,
+    TBID_EVENT_INIT,
+    TBID_EVENT_LOGIN,
+    TBID_EVENT_LOGOUT,
+    TBID_INIT,
+    TBID_LOGIN,
+    TBID_LOGOUT,
+    TBID_LOGOUT_PATH,
+    Lock,
+    LOCK_KEY,
+    LOCK_TIMEOUT
+} from '../tbid';
+
+customElements.define('th-tbid', Tbid.CustomElementConstructor);
+
+const render = ({
+    authenticated = 'false',
+    loginTried = 'false'
+}: { authenticated?: string; loginTried?: string } = {}) =>
+    renderIntoBody(
+        html`
+            <th-tbid
+                authenticated=${authenticated}
+                csrf-token="token"
+                login-redirect-path="/login-redirect-path"
+                login-status-path="/login-status-path"
+                login-tried=${loginTried}
+                logout-redirect-path="/logout-redirect-path"
+                tbid-auth-provider-login-path="/tbid-auth-provider-login-path"
+                tbid-auth-provider-signup-path="/tbid-auth-provider-signup-path"
+                tbid-community-uri="/tbid-community-uri"
+                tbid-redirect-uri="/tbid-redirect-uri"
+            ></th-tbid>
+        `
+    ) as unknown as Tbid;
+
+let location = {};
+
+Object.defineProperty(window, 'location', {
+    get: () => location
+});
+
+beforeEach(() => {
+    window.location.href = '/';
+    window.sessionStorage.removeItem(LOCK_KEY);
+});
+
+describe('th-tbid', () => {
+    afterEach(() => {
+        document.head.querySelectorAll('meta').forEach((n) => n.remove());
+    });
+    it('sets the correct meta tags', () => {
+        render();
+        expect(document.head.outerHTML).toMatchHTMLSnapshot();
+    });
+    it('sets the window globals', () => {
+        render();
+        // @ts-ignore
+        expect(window[TBID_INIT]).toBeInstanceOf(Function);
+        // @ts-ignore
+        expect(window[TBID_LOGIN]).toBeInstanceOf(Function);
+        // @ts-ignore
+        expect(window[TBID_LOGOUT]).toBeInstanceOf(Function);
+    });
+    it(`handles the ${TRAILHEAD_EVENT_LOGIN} event`, () => {
+        render();
+        let fn = jest.fn();
+        Object.defineProperty(window, 'SFIDWidget', {
+            value: { login: fn },
+            writable: true
+        });
+        document.dispatchEvent(new CustomEvent(TRAILHEAD_EVENT_LOGIN));
+        expect(fn).toHaveBeenCalled();
+    });
+    it(`handles the ${TRAILHEAD_EVENT_LOGOUT} event`, async () => {
+        render();
+        let fn = jest.fn();
+        Object.defineProperty(window, 'SFIDWidget', {
+            value: { logout: fn },
+            writable: true
+        });
+        document.dispatchEvent(new CustomEvent(TRAILHEAD_EVENT_LOGOUT));
+        let iframe = document.body.querySelector(
+            `iframe[src="/tbid-community-uri${TBID_LOGOUT_PATH}"]`
+        );
+        expect(iframe).toBeInTheDocument();
+        iframe!.dispatchEvent(new CustomEvent('load'));
+        await nextTick();
+        expect(fn).toHaveBeenCalled();
+    });
+    it(`handles the ${TRAILHEAD_EVENT_SIGNUP}`, () => {
+        render();
+        let fn = jest.fn();
+        Object.defineProperty(window, 'SFIDWidget', {
+            value: { signup: fn },
+            writable: true
+        });
+        document.dispatchEvent(new CustomEvent(TRAILHEAD_EVENT_SIGNUP));
+        expect(fn).toHaveBeenCalled();
+    });
+    describe('onLogin', () => {
+        it('redirects if user is not_logged_in & login-tried != true', async () => {
+            fetchMock.doMockOnceIf(
+                (r) => r.url === '/login-status-path',
+                JSON.stringify({ user: 'not_logged_in' })
+            );
+            render();
+            // @ts-ignore
+            await window[TBID_LOGIN]();
+            expect(window.location.href).toEqual('/login-redirect-path');
+        });
+        it('retries if there is a lock', async () => {
+            jest.useFakeTimers();
+            fetchMock.doMockIf(
+                (r) => r.url === '/login-status-path',
+                JSON.stringify({ user: 'not_logged_in' })
+            );
+            let element = render();
+            let onLogin = jest.fn();
+            element.addEventListener(TBID_EVENT_LOGIN, onLogin);
+            // A: No lock
+            // @ts-ignore
+            await window[TBID_LOGIN]();
+            expect(onLogin).toHaveBeenCalledTimes(1);
+            expect(window.location.href).toEqual('/login-redirect-path');
+            window.location.href = '/';
+            // B: Lock
+            // @ts-ignore
+            await window[TBID_LOGIN]();
+            expect(onLogin).toHaveBeenCalledTimes(2);
+            expect(window.location.href).toEqual('/');
+            // C: Lock expired
+            let now = Date.now();
+            let nowMock = jest
+                .spyOn(Date, 'now')
+                .mockImplementation(() => now + LOCK_TIMEOUT);
+            jest.runAllTimers();
+            jest.useRealTimers();
+            await nextTick();
+            expect(onLogin).toHaveBeenCalledTimes(3);
+            nowMock.mockRestore();
+            fetchMock.resetMocks();
+        });
+        it('calls onInit if user is logged_in and authenticated', async () => {
+            fetchMock.doMockOnceIf(
+                (r) => r.url === '/login-status-path',
+                JSON.stringify({ user: 'logged_in' })
+            );
+            let element = render({ authenticated: 'true' });
+            let onInit = jest.fn();
+            element.addEventListener(TBID_EVENT_INIT, onInit);
+            // @ts-ignore
+            await window[TBID_LOGIN]();
+            expect(onInit).toHaveBeenCalled();
+            expect(window.sessionStorage.getItem(LOCK_KEY)).toBeNull();
+        });
+        it('calls onInit if user is not_logged_in and login-tried', async () => {
+            fetchMock.doMockOnceIf(
+                (r) => r.url === '/login-status-path',
+                JSON.stringify({ user: 'not_logged_in' })
+            );
+            let element = render({ loginTried: 'true' });
+            let onInit = jest.fn();
+            element.addEventListener(TBID_EVENT_INIT, onInit);
+            // @ts-ignore
+            await window[TBID_LOGIN]();
+            expect(onInit).toHaveBeenCalled();
+            expect(window.sessionStorage.getItem(LOCK_KEY)).toBeNull();
+        });
+        it('dispatches login', () => {
+            fetchMock.doMockOnceIf(
+                (r) => r.url === '/login-status-path',
+                JSON.stringify({ user: 'not_logged_in' })
+            );
+            let element = render();
+            let fn = jest.fn();
+            element.addEventListener(EVENT_LOGIN, fn);
+            // @ts-ignore
+            window[TBID_LOGIN]();
+            expect(fn).toHaveBeenCalled();
+        });
+    });
+    describe('onLogout', () => {
+        it('calls SFIDWidget.init()', () => {
+            render();
+            let init = jest.fn();
+            Object.defineProperty(window, 'SFIDWidget', {
+                value: { init },
+                writable: true
+            });
+            // @ts-ignore
+            window[TBID_LOGOUT]();
+            expect(init).toHaveBeenCalled();
+        });
+        it('redirects', () => {
+            render();
+            // @ts-ignore
+            window[TBID_LOGOUT]();
+            expect(window.location.href).toEqual('/logout-redirect-path');
+        });
+        it('dispatches logout', () => {
+            let element = render();
+            let fn = jest.fn();
+            element.addEventListener(EVENT_LOGOUT, fn);
+            // @ts-ignore
+            window[TBID_LOGOUT]();
+            expect(fn).toHaveBeenCalled();
+        });
+    });
+    describe('Lock', () => {
+        afterEach(() => {
+            window.sessionStorage.removeItem('tbid');
+        });
+        it('acquire', async () => {
+            let now = Date.now();
+            let lock = new Lock('tbid', 1000);
+            expect(lock.aquire()).toBe(true);
+            expect(lock.aquire()).toBe(false);
+            let mock = jest
+                .spyOn(Date, 'now')
+                .mockImplementation(() => now + 2000);
+            expect(lock.aquire()).toBe(true);
+            mock.mockRestore();
+        });
+        it('release', async () => {
+            let lock = new Lock('tbid', 1000);
+            expect(lock.aquire()).toBe(true);
+            expect(lock.aquire()).toBe(false);
+            lock.release();
+            expect(lock.aquire()).toBe(true);
+        });
+    });
+});

package/src/modules/th/tbid/tbid.html

@@ -0,0 +1 @@
+<template></template>

package/src/modules/th/tbid/tbid.stories.mdx

@@ -0,0 +1,25 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="th/th-tbid" />
+
+# Usage
+
+```html
+<th-tbid
+  authenticated="false"
+  csrf-token="token"
+  login-redirect-path="/login-redirect-path"
+  login-status-path="/login-status-path"
+  login-tried="false"
+  logout-redirect-path="/logout-path"
+  tbid-auth-provider-login-path="/tbid-auth-provider-login-path"
+  tbid-auth-provider-signup-path="/tbid-auth-provider-signup-path"
+  tbid-community-uri="/tbid-community-uri"
+  tbid-redirect-uri="/tbid-redirect-uri"
+></th-tbid>
+
+<script
+  src="https://trailhead.salesforce.com/ui/modules/th-tbid.js"
+  type="module"
+></script>
+```