@inboxsdk/core 0.2.28-alpha.2 → 0.2.28-alpha.4

package/src/platform-implementation-js/lib/wait-for.js

@@ -0,0 +1,28 @@
+export default function waitFor(condition, timeout = 120 * 1000, steptime = 250) {
+    // make this error here so we have a sensible stack.
+    const timeoutError = new Error('waitFor timeout');
+    return new Promise(function (resolve, reject) {
+        let waited = 0;
+        function step() {
+            try {
+                const result = condition();
+                if (result) {
+                    resolve(result);
+                }
+                else {
+                    if (waited >= timeout) {
+                        reject(timeoutError);
+                    }
+                    else {
+                        waited += steptime;
+                        setTimeout(step, steptime);
+                    }
+                }
+            }
+            catch (e) {
+                reject(e);
+            }
+        }
+        setTimeout(step, 1);
+    });
+}

package/src/platform-implementation-js/lib/waitForAsync.js

@@ -0,0 +1,19 @@
+import delay from 'pdelay';
+export default async function waitForAsync(condition, timeout = 120 * 1000, steptime = 250) {
+    // make this error here so we have a sensible stack.
+    const timeoutError = new Error('waitForAsync timeout');
+    const timeoutTime = Date.now() + timeout;
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        const result = await condition();
+        if (result) {
+            return result;
+        }
+        await delay(steptime);
+        if (Date.now() > timeoutTime) {
+            throw timeoutError;
+        }
+    }
+    // eslint-disable-next-line no-unreachable
+    throw new Error();
+}

package/src/platform-implementation-js/namespaces/app-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-menu.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/namespaces/app-menu.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE;QACR,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,EAAE,CAAC;CACxB,CAAC;AAYF,MAAM,MAAM,0BAA0B,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE;QACd,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;QACjC,OAAO,CAAC,EAAE;YACR,SAAS,EAAE,MAAM,CAAC;YAClB,UAAU,EAAE,MAAM,CAAC;SACpB,CAAC;QACF,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CAIH,CAAC;AAaF,MAAM,CAAC,OAAO,OAAO,OAAO;;gBAGd,MAAM,EAAE,WAAW;IAI/B,WAAW,CAAC,kBAAkB,EAAE,qBAAqB,GAAG,eAAe;IASjE,OAAO;IAKb,uBAAuB,CAAC,qBAAqB,EAAE,MAAM;CAGtD"}
+{"version":3,"file":"app-menu.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/namespaces/app-menu.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE;QACR,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE;QACd,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;QACjC,OAAO,CAAC,EAAE;YACR,SAAS,EAAE,MAAM,CAAC;YAClB,UAAU,EAAE,MAAM,CAAC;SACpB,CAAC;QACF,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CAIH,CAAC;AAaF,MAAM,CAAC,OAAO,OAAO,OAAO;;gBAGd,MAAM,EAAE,WAAW;IAI/B,WAAW,CAAC,kBAAkB,EAAE,qBAAqB,GAAG,eAAe;IASjE,OAAO;IAKb,uBAAuB,CAAC,qBAAqB,EAAE,MAAM;CAGtD"}

package/src/platform-implementation-js/namespaces/app-menu.js

@@ -0,0 +1,31 @@
+import GmailElementGetter from '../dom-driver/gmail/gmail-element-getter';
+import { AppMenuItemView } from '../views/app-menu-item-view';
+// export type CollapsiblePanelView = {
+//   update: (panelDescriptor: AppMenuItemPanelDescriptor) => void;
+//   destroy: () => void;
+//   collapse: (state: boolean) => boolean;
+//   isCollapsed: () => boolean;
+//   // TBD
+//   // Aleem: add ability to add primary/secondary button to all panels (mainly ours but Google's too)
+//   // typed-emitter
+//   on: (event: 'toggle') => void;
+// };
+export default class AppMenu {
+    #driver;
+    constructor(driver) {
+        this.#driver = driver;
+    }
+    addMenuItem(menuItemDescriptor) {
+        // TODO: should we support the Observable being passed in
+        const navItemView = new AppMenuItemView(this.#driver, menuItemDescriptor);
+        // this.#menuItemViews.push(navItemView);
+        return navItemView;
+    }
+    async isShown() {
+        const result = await GmailElementGetter.getAppMenuAsync();
+        return !!result;
+    }
+    isCollapsiblePanelShown(_panelIndexOrIDorType) {
+        // shim
+    }
+}

package/src/platform-implementation-js/namespaces/butter-bar.js

@@ -0,0 +1,163 @@
+import defaults from 'lodash/defaults';
+import sortBy from 'lodash/sortBy';
+import find from 'lodash/find';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import defer from '../../common/defer';
+import get from '../../common/get-or-fail';
+const ancientComplainTime = 2 * 60 * 1000;
+const dummyPacket = Object.freeze({
+    destroy: Object.freeze(function () {
+        // do nothing
+    }),
+});
+const memberMap = new WeakMap();
+// documented in src/docs/
+export default class ButterBar {
+    constructor(appId, driver) {
+        const members = {
+            driver,
+            messagesByKey: new Map(),
+            queuedPackets: [],
+        };
+        memberMap.set(this, members);
+    }
+    showMessage(options) {
+        defaults(options, {
+            priority: 0,
+            time: 15 * 1000,
+            hideOnViewChanged: true,
+            persistent: false,
+        });
+        this.hideMessage(options.messageKey);
+        const members = get(memberMap, this);
+        const butterBarDriver = members.driver.getButterBarDriver();
+        const messageId = Date.now() + '-' + Math.random();
+        {
+            let queue = butterBarDriver.getSharedMessageQueue();
+            queue.unshift({
+                messageId,
+                priority: options.priority,
+                persistent: options.persistent,
+            });
+            queue = sortBy(queue, (item) => -item.priority);
+            queue = queue.filter((item, i) => i === 0 || item.persistent);
+            butterBarDriver.setSharedMessageQueue(queue);
+            if (!find(queue, (item) => item.messageId === messageId)) {
+                return dummyPacket;
+            }
+        }
+        const stopper = kefirBus();
+        if (options.hideOnViewChanged) {
+            // Set hideOnViewChanged to true only after this run of the event
+            // loop completes. This fixes the issue where a butterbar message
+            // with hideOnViewChanged spawned in a gmail viewChanged handler
+            // would die immediately as the rest of the event's handlers are
+            // called.
+            stopper.plug(Kefir.later(0, null)
+                .flatMap(() => members.driver.getRouteViewDriverStream().changes())
+                .map(() => null));
+        }
+        if (isFinite(options.time)) {
+            stopper.plug(Kefir.later(options.time, null));
+        }
+        // Error made here for sensible stack
+        const timeoutErr = new Error('Butter bar message timed out');
+        stopper.plug(Kefir.later(ancientComplainTime, null).map((x) => {
+            members.driver.getLogger().errorApp(timeoutErr);
+            return x;
+        }));
+        stopper.take(1).onValue(() => {
+            if (options.messageKey) {
+                members.messagesByKey.delete(options.messageKey);
+            }
+            const queue = butterBarDriver.getSharedMessageQueue();
+            butterBarDriver.setSharedMessageQueue(queue.filter((item) => item.messageId !== messageId));
+        });
+        butterBarDriver
+            .getNoticeAvailableStream()
+            .toProperty(() => null)
+            .takeUntilBy(stopper)
+            .filter(() => {
+            const queue = butterBarDriver.getSharedMessageQueue();
+            if (!queue[0])
+                stopper.value(undefined);
+            return queue[0] && queue[0].messageId === messageId;
+        })
+            .onValue(() => {
+            const rawHandle = butterBarDriver.showMessage(options);
+            stopper.take(1).onValue(() => {
+                rawHandle.destroy();
+            });
+        });
+        const message = {
+            destroy() {
+                stopper.value(undefined);
+            },
+        };
+        if (options.messageKey) {
+            members.messagesByKey.set(options.messageKey, message);
+        }
+        return message;
+    }
+    showLoading(options = {}) {
+        defaults(options, {
+            text: 'Loading...',
+            priority: -3,
+            time: Infinity,
+            persistent: true,
+            hideOnViewChanged: true,
+        });
+        options.time = Infinity; // Loading messages should exist until destroyed.
+        return this.showMessage(options);
+    }
+    showError(options) {
+        defaults(options, {
+            priority: 100,
+            className: 'inboxsdk__butterbar_error',
+        });
+        return this.showMessage(options);
+    }
+    showSaving(options = {}) {
+        defaults(options, {
+            text: 'Saving...',
+            confirmationText: 'Saved',
+            confirmationTime: 1 * 1000,
+            priority: -2,
+            time: Infinity,
+            persistent: true,
+            hideOnViewChanged: false,
+            showConfirmation: true,
+        });
+        const savingMessage = this.showMessage(options);
+        const deferred = defer();
+        deferred.promise.then(() => {
+            savingMessage.destroy();
+            if (options.showConfirmation) {
+                this.showMessage({
+                    text: options.confirmationText,
+                    messageKey: options.messageKey,
+                    time: options.confirmationTime,
+                    priority: 200,
+                });
+            }
+        }, () => {
+            savingMessage.destroy();
+        });
+        return deferred;
+    }
+    hideMessage(messageKey) {
+        if (messageKey) {
+            const members = get(memberMap, this);
+            const message = members.messagesByKey.get(messageKey);
+            if (message) {
+                message.destroy();
+            }
+        }
+    }
+    hideGmailMessage() {
+        const members = get(memberMap, this);
+        const butterBarDriver = members.driver.getButterBarDriver();
+        butterBarDriver.hideGmailMessage();
+    }
+}

package/src/platform-implementation-js/views/SimpleElementView.js

@@ -0,0 +1,16 @@
+import SafeEventEmitter from '../lib/safe-event-emitter';
+export default class SimpleElementView extends SafeEventEmitter {
+    el;
+    destroyed = false;
+    constructor(el) {
+        super();
+        this.el = el;
+    }
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        this.emit('destroy');
+        this.el.remove();
+    }
+}

package/src/platform-implementation-js/views/app-menu-item-view.js

@@ -0,0 +1,257 @@
+import isEqual from 'lodash/isEqual';
+import kefir from 'kefir';
+import EventEmitter from '../lib/safe-event-emitter';
+import { GmailAppMenuItemView, NATIVE_CLASS, INBOXSDK_CLASS, } from '../dom-driver/gmail/views/gmail-app-menu-item-view';
+import { CollapsiblePanelView } from './collapsible-panel-view';
+import { addCollapsiblePanel } from '../dom-driver/gmail/gmail-driver/add-collapsible-panel';
+import GmailElementGetter from '../dom-driver/gmail/gmail-element-getter';
+let prevNative = {
+    menuItem: null,
+    panel: null,
+    route: null,
+};
+const setPrevNative = (next) => {
+    prevNative = {
+        ...prevNative,
+        ...next,
+    };
+};
+/**
+ * Contains both a native Gmail app menu item and a collapsible panel.
+ */
+export class AppMenuItemView extends EventEmitter {
+    /**
+     * Native panels are HTMLElements, custom panels are CollapsiblePanelViews.
+     */
+    static #activePanel;
+    static #nativeMenuItemChangeStream = (() => {
+        const stream = kefir.stream((emitter) => {
+            const observer = new MutationObserver((mutations) => {
+                for (const mutation of mutations) {
+                    const { target } = mutation;
+                    if (mutation.type === 'attributes' &&
+                        target instanceof HTMLElement &&
+                        target.classList.contains(NATIVE_CLASS) &&
+                        !target.classList.contains(INBOXSDK_CLASS)) {
+                        if (target.classList.contains(GmailAppMenuItemView.elementCss.ACTIVE)) {
+                            emitter.emit(['activated', target]);
+                        }
+                        else if (target.classList.contains(GmailAppMenuItemView.elementCss.HOVER)) {
+                            emitter.emit(['hovered', target]);
+                        }
+                    }
+                }
+            });
+            const f = async () => {
+                const gmailAppMenu = await GmailElementGetter.getAppMenuAsync();
+                if (!gmailAppMenu) {
+                    return;
+                }
+                const { ACTIVE } = GmailAppMenuItemView.elementCss;
+                const nativeMenuItemSelector = `.${NATIVE_CLASS}.${ACTIVE}:not(.${INBOXSDK_CLASS})`;
+                const nativeActivePanel = AppMenuItemView.#getNativeActivePanel();
+                setPrevNative({
+                    menuItem: gmailAppMenu.querySelector(nativeMenuItemSelector),
+                    panel: nativeActivePanel,
+                });
+                AppMenuItemView.#activePanel = nativeActivePanel;
+                document.addEventListener('mousedown', (e) => {
+                    const { target } = e;
+                    if (!(target instanceof Element)) {
+                        return;
+                    }
+                    if (!gmailAppMenu.contains(target)) {
+                        return;
+                    }
+                    const closest = target.closest(`.${NATIVE_CLASS}:not(.${INBOXSDK_CLASS})`);
+                    if (closest) {
+                        emitter.emit(['mousedown-on-native-el', closest, e]);
+                    }
+                });
+                observer.observe(gmailAppMenu, {
+                    attributes: true,
+                    childList: true,
+                    subtree: true,
+                });
+            };
+            f();
+        });
+        return stream;
+    })();
+    static #getNativeActivePanel() {
+        const appMenuElement = GmailElementGetter.getAppMenuContainer();
+        const { ACTIVE, HOVER } = CollapsiblePanelView.elementCss;
+        const nativePanel = appMenuElement?.querySelector(`${CollapsiblePanelView.elementSelectors.NATIVE}.${ACTIVE}:not(.${HOVER}):not(${CollapsiblePanelView.elementSelectors.CUSTOM})`);
+        return nativePanel;
+    }
+    static #customMenuItems = new Set();
+    static {
+        AppMenuItemView.#nativeMenuItemChangeStream.onValue(async (e) => {
+            const [type, el /*, mouseEvent */] = e;
+            if (type === 'activated') {
+                AppMenuItemView.#activePanel = AppMenuItemView.#getNativeActivePanel();
+                await Promise.all(Array.from(AppMenuItemView.#customMenuItems).map(async (customMenuItem) => {
+                    await customMenuItem.#deactivate();
+                }));
+            }
+            if (type === 'mousedown-on-native-el') {
+                if (prevNative.menuItem !== el) {
+                    prevNative.menuItem = el;
+                    return;
+                }
+                else {
+                    const { menuItem, panel, route } = prevNative;
+                    prevNative.menuItem = el;
+                    if (route) {
+                        document.location.hash = route;
+                    }
+                    menuItem?.classList.add(GmailAppMenuItemView.elementCss.ACTIVE);
+                    menuItem.classList.remove(GmailAppMenuItemView.elementCss.HOVER);
+                    panel?.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+                    panel?.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+                }
+            }
+        });
+    }
+    #driver;
+    #destroyed = false;
+    #gmailViewPromise;
+    #collapsiblePanel;
+    /** Denotes if either the collapsable panel or app menu item are hovered. */
+    #hovered = false;
+    constructor(driver, menuItemDescriptor) {
+        super();
+        this.#driver = driver;
+        const gmailAppMenuItemView = this.#driver.addAppMenuItem(menuItemDescriptor);
+        this.#gmailViewPromise = gmailAppMenuItemView;
+        gmailAppMenuItemView.then((gmailView) => {
+            if (this.#destroyed || !gmailView) {
+                return; //we have been removed already
+            }
+            // add callbacks and listeners here
+            gmailView.on('click', this.#onClick);
+            gmailView.on('destroy', () => this.remove());
+            gmailView.on('blur', this.#onBlur);
+            gmailView.on('hover', this.#onHover);
+            // handle routing
+            driver.getRouteViewDriverStream().onValue((routeView) => {
+                const routeViewID = routeView.getRouteID();
+                const routeViewParams = routeView.getParams();
+                const routeViewType = routeView.getRouteType();
+                // Ignore custom routes that don't have a route id
+                // TODO fix chat/spaces routes to have NATIVE routeViewTypes so we can gate on that instead.
+                if (!(routeViewType === 'UNKNOWN' && routeViewID === null)) {
+                    console.log({ routeViewID, routeViewType });
+                    if (routeViewType !== 'CUSTOM') {
+                        prevNative.route === document.location.hash;
+                    }
+                }
+                const { activeRouteID, routeID, routeParams, activeRouteParams } = gmailView.menuItemDescriptor ?? {};
+                let isActive = isEqual(activeRouteID || routeID, routeViewID);
+                if (isActive) {
+                    if (activeRouteParams) {
+                        isActive = isEqual(activeRouteParams, routeViewParams);
+                    }
+                    else if (routeParams) {
+                        isActive = isEqual(routeParams, routeViewParams);
+                    }
+                }
+                // deactivation is handled by the native menu item change stream
+                if (isActive) {
+                    this.#activate();
+                }
+            });
+        });
+        AppMenuItemView.#customMenuItems.add(this);
+    }
+    async addCollapsiblePanel(panelDescriptor) {
+        const collapsiblePanel = await addCollapsiblePanel(this.#driver, panelDescriptor);
+        if (collapsiblePanel) {
+            collapsiblePanel.on('blur', this.#onBlur);
+            collapsiblePanel.on('hover', this.#onHover);
+        }
+        this.#collapsiblePanel = collapsiblePanel;
+        return collapsiblePanel;
+    }
+    async update(menuItemDescriptor) {
+        const gmailView = await this.#gmailViewPromise;
+        gmailView.setMenuItemDescriptor(menuItemDescriptor);
+    }
+    remove() {
+        if (this.#destroyed)
+            return;
+        this.#destroyed = true;
+        AppMenuItemView.#customMenuItems.delete(this);
+        this.emit('destroy');
+        this.#collapsiblePanel?.remove();
+        this.#gmailViewPromise.then((gmailView) => gmailView.remove());
+    }
+    async #deactivate() {
+        const gmailView = await this.#gmailViewPromise;
+        gmailView.deactivate();
+        this.#collapsiblePanel?.deactivate();
+    }
+    async #activate() {
+        AppMenuItemView.#activePanel = this.#collapsiblePanel;
+        const gmailView = await this.#gmailViewPromise;
+        const appMenuElement = GmailElementGetter.getAppMenuContainer();
+        const { ACTIVE } = GmailAppMenuItemView.elementCss;
+        // Note this affects both the active app menu item and the collapsible panel.
+        for (const el of appMenuElement?.querySelectorAll(`.${ACTIVE}`) ?? []) {
+            el.classList.remove(ACTIVE);
+        }
+        gmailView.activate();
+        this.#collapsiblePanel?.activate();
+    }
+    #onBlur = async (e) => {
+        const gmailView = await this.#gmailViewPromise;
+        const { relatedTarget } = e;
+        const blurringMenuItem = relatedTarget instanceof Node &&
+            gmailView.element?.contains(relatedTarget);
+        const blurringPanel = relatedTarget instanceof Node &&
+            this.#collapsiblePanel?.element?.contains(relatedTarget);
+        if (blurringMenuItem || blurringPanel) {
+            return;
+        }
+        this.#hovered = false;
+        gmailView.blur();
+        const hasActivePanel = this.#hasActivePanel();
+        this.#collapsiblePanel?.blur(hasActivePanel);
+        if (!hasActivePanel) {
+            if (AppMenuItemView.#activePanel instanceof CollapsiblePanelView) {
+                AppMenuItemView.#activePanel?.activate();
+            }
+            else if (AppMenuItemView.#activePanel instanceof HTMLElement) {
+                AppMenuItemView.#activePanel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+            }
+        }
+        this.emit('blur');
+    };
+    #hasActivePanel() {
+        return (this.#collapsiblePanel != null &&
+            AppMenuItemView.#activePanel === this.#collapsiblePanel);
+    }
+    #onHover = async (_e) => {
+        if (this.#hovered) {
+            return;
+        }
+        this.#hovered = true;
+        const gmailView = await this.#gmailViewPromise;
+        gmailView.hover();
+        const hasActivePanel = this.#hasActivePanel();
+        if (!hasActivePanel) {
+            if (AppMenuItemView.#activePanel instanceof CollapsiblePanelView) {
+                AppMenuItemView.#activePanel?.deactivate();
+            }
+            else if (AppMenuItemView.#activePanel instanceof HTMLElement) {
+                AppMenuItemView.#activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
+            }
+        }
+        this.#collapsiblePanel?.hover(hasActivePanel);
+        this.emit('hover');
+    };
+    #onClick = () => {
+        this.#activate();
+        this.emit('click');
+    };
+}