@inboxsdk/core 0.2.28-alpha.0 → 0.2.28-alpha.1

package/src/platform-implementation-js/driver-common/getGmailThreadIdForRfcMessageId.js

@@ -0,0 +1,61 @@
+/* @flow */
+
+import { defn } from 'ud';
+import { extractThreads } from '../dom-driver/gmail/gmail-response-processor';
+import getSyncThreadsForSearch from './getSyncThreadsForSearch';
+import gmailAjax from './gmailAjax';
+import getAccountUrlPart from './getAccountUrlPart';
+import type { Driver } from '../driver-interfaces/driver';
+
+async function getGmailThreadIdForRfcMessageId(
+  driver: Driver,
+  rfcMessageId: string
+): Promise<string> {
+  if ((driver: any).isUsingSyncAPI && (driver: any).isUsingSyncAPI()) {
+    const { threads: threadDescriptors } = await getSyncThreadsForSearch(
+      driver,
+      'rfc822msgid:' + rfcMessageId
+    );
+    return threadDescriptors[0].oldGmailThreadID;
+  } else {
+    return forOldAPI(driver, rfcMessageId);
+  }
+}
+
+async function forOldAPI(
+  driver: Driver,
+  rfcMessageId: string
+): Promise<string> {
+  const response = await gmailAjax({
+    method: 'POST',
+    url: `https://mail.google.com/mail${getAccountUrlPart()}/`,
+    data: {
+      ik: driver.getPageCommunicator().getIkValue(),
+      at: await driver.getGmailActionToken(),
+      ui: '2',
+      view: 'tl',
+      start: '0',
+      num: '1',
+      rt: 'c',
+      search: 'query',
+      q: `rfc822msgid:${rfcMessageId}`,
+    },
+    xhrFields: {
+      withCredentials: true,
+    },
+    canRetry: true,
+    headers: {
+      'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
+    },
+  });
+
+  const threads = extractThreads(response.text);
+  if (threads.length !== 1) {
+    throw new Error(
+      "Failed to find gmail thread id for rfc message id. Message may not exist in user's account."
+    );
+  }
+  return threads[0].gmailThreadId;
+}
+
+export default defn(module, getGmailThreadIdForRfcMessageId);

package/src/platform-implementation-js/driver-common/getOriginalMessagePage.d.ts

@@ -9,3 +9,4 @@ type Options = {
 declare function getOriginalMessagePage(driver: Driver, options: Options): Promise<string>;
 declare const _default: typeof getOriginalMessagePage;
 export default _default;
+//# sourceMappingURL=getOriginalMessagePage.d.ts.map

package/src/platform-implementation-js/driver-common/getOriginalMessagePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getOriginalMessagePage.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/driver-common/getOriginalMessagePage.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,KAAK,OAAO,GACR;IACE,iBAAiB,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,IAAI,CAAC;CACtB,GACD;IACE,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,IAAI,CAAC;CAC1B,CAAC;AAEN,iBAAe,sBAAsB,CACnC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,GACf,OAAO,CAAC,MAAM,CAAC,CAgCjB;;AAED,wBAAoD"}

package/src/platform-implementation-js/driver-common/getRfcMessageIdForSyncMessageId.js

@@ -0,0 +1,32 @@
+/* @flow */
+
+import { defn } from 'ud';
+
+import getOriginalMessagePage from './getOriginalMessagePage';
+
+import htmlToText from '../../common/html-to-text';
+
+import type { Driver } from '../driver-interfaces/driver';
+
+// Messages sent from the local user in Inbox have a fake ID in the DOM (with
+// the "msg-a:r" prefix) that doesn't match up with anything in the Gmail API.
+// This function translates the Inbox ID into the real ID that can be found in
+// the Gmail API.
+async function getRfcMessageIdForSyncMessageId(
+  driver: Driver,
+  syncMessageID: string
+): Promise<string> {
+  const text = await getOriginalMessagePage(driver, {
+    syncMessageID: syncMessageID,
+  });
+
+  const match = text.match(/^Message-ID:\s+(\S+)\s*$/im);
+  if (!match) {
+    throw new Error(
+      "Failed to find rfc id for gmail thread id. Message may not exist in user's account."
+    );
+  }
+  return htmlToText(match[1]);
+}
+
+export default defn(module, getRfcMessageIdForSyncMessageId);

package/src/platform-implementation-js/driver-common/getSyncThreadsForSearch.d.ts

@@ -6,3 +6,4 @@ declare function getSyncThreadsForSearch(driver: Driver, searchTerm: string): Pr
 }>;
 declare const _default: typeof getSyncThreadsForSearch;
 export default _default;
+//# sourceMappingURL=getSyncThreadsForSearch.d.ts.map

package/src/platform-implementation-js/driver-common/getSyncThreadsForSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSyncThreadsForSearch.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/driver-common/getSyncThreadsForSearch.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,mDAAmD,CAAC;AAE/E,iBAAe,uBAAuB,CACpC,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM,GACjB,OAAO,CAAC;IAAE,OAAO,EAAE,UAAU,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CA4CnD;;AAED,wBAAqD"}

package/src/platform-implementation-js/driver-common/getThreadIdFromMessageId.js

@@ -0,0 +1,21 @@
+/* @flow */
+
+import { defn } from 'ud';
+import requestGmailThread from './requestGmailThread';
+import { extractGmailThreadIdFromMessageIdSearch } from '../dom-driver/gmail/gmail-response-processor';
+import type { Driver } from '../driver-interfaces/driver';
+
+async function getThreadIdFromMessageId(
+  driver: Driver,
+  messageId: string
+): Promise<string> {
+  const ikValue = driver.getPageCommunicator().getIkValue();
+  const text = await requestGmailThread(ikValue, messageId);
+  const threadId = extractGmailThreadIdFromMessageIdSearch(text);
+  if (!threadId) {
+    throw new Error('Failed to find thread id for given message id');
+  }
+  return threadId;
+}
+
+export default defn(module, getThreadIdFromMessageId);

package/src/platform-implementation-js/driver-common/gmailAjax.d.ts

@@ -2,3 +2,4 @@ import { AjaxOpts, AjaxResponse } from '../../common/ajax';
 declare function gmailAjax(opts: AjaxOpts): Promise<AjaxResponse>;
 declare const _default: typeof gmailAjax;
 export default _default;
+//# sourceMappingURL=gmailAjax.d.ts.map

package/src/platform-implementation-js/driver-common/gmailAjax.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gmailAjax.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/driver-common/gmailAjax.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAa3D,iBAAe,SAAS,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC,CAqD9D;;AAED,wBAAuC"}

package/src/platform-implementation-js/driver-common/inboxAjax.js

@@ -0,0 +1,8 @@
+/* @flow */
+
+import { defn } from 'ud';
+import rateLimitQueuer from '../../common/rate-limit-queuer';
+import ajax from '../../common/ajax';
+
+const inboxAjax = defn(module, rateLimitQueuer(ajax, 1000, 7));
+export default inboxAjax;

package/src/platform-implementation-js/driver-common/render-custom-icon.d.ts

@@ -1 +1,2 @@
 export default function renderCustomIcon(containerElement: HTMLElement, customIconElement: HTMLElement, append: boolean, insertBeforeEl?: HTMLElement | null | undefined): void;
+//# sourceMappingURL=render-custom-icon.d.ts.map

package/src/platform-implementation-js/driver-common/render-custom-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-custom-icon.d.ts","sourceRoot":"","sources":["../../../../../src/platform-implementation-js/driver-common/render-custom-icon.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,gBAAgB,EAAE,WAAW,EAC7B,iBAAiB,EAAE,WAAW,EAC9B,MAAM,EAAE,OAAO,EACf,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,QAsBhD"}

package/src/platform-implementation-js/driver-common/requestGmailThread.js

@@ -0,0 +1,35 @@
+/* @flow */
+
+import { defn } from 'ud';
+import querystring from 'querystring';
+import gmailAjax from './gmailAjax';
+import getAccountUrlPart from './getAccountUrlPart';
+
+async function requestGmailThread(
+  ikValue: string,
+  threadId: string
+): Promise<string> {
+  const queryParameters = {
+    ui: 2,
+    ik: ikValue,
+    view: 'cv',
+    th: threadId,
+    pcd: 1,
+    mb: 0,
+    rt: 'c',
+    search: 'inbox',
+    type: threadId,
+  };
+
+  const { text } = await gmailAjax({
+    method: 'POST',
+    url: `https://mail.google.com/mail${getAccountUrlPart()}?${querystring.stringify(
+      queryParameters
+    )}`,
+    canRetry: true,
+  });
+
+  return text;
+}
+
+export default defn(module, requestGmailThread);

package/src/platform-implementation-js/driver-common/sidebar/AppSidebar.js

@@ -0,0 +1,408 @@
+/* @flow */
+
+import flatMap from 'lodash/flatMap';
+import sortBy from 'lodash/sortBy';
+import cx from 'classnames';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import React from 'react';
+import DraggableList from 'react-draggable-list';
+import SmoothCollapse from 'react-smooth-collapse';
+import get from '../../../common/get-or-fail';
+import idMap from '../../lib/idMap';
+import ElementContainer from '../../lib/react/ElementContainer';
+
+const springConfig = { stiffness: 400, damping: 50 };
+
+type ExpansionSettings = {
+  apps: {
+    [appId: string]: {
+      ids: {
+        [id: string]: {
+          lastUse: number,
+          expanded: boolean,
+        },
+      },
+    },
+  },
+};
+
+const MAX_SIDEBAR_SETTINGS = 200;
+
+export type PanelDescriptor = {
+  instanceId: string,
+  appId: string,
+  id: string,
+  title: string,
+  iconClass: ?string,
+  iconUrl: ?string,
+  hideTitleBar: boolean,
+  el: HTMLElement,
+  appName?: string,
+};
+export type Props = {
+  panels: PanelDescriptor[],
+  onClose?: () => void,
+  onOutsideClick?: () => void,
+  onMoveEnd(
+    newList: PanelDescriptor[],
+    item: PanelDescriptor,
+    oldIndex: number,
+    newIndex: number
+  ): void,
+  onExpandedToggle?: () => void,
+  container?: () => HTMLElement,
+};
+type State = {
+  expansionSettings: ExpansionSettings,
+};
+export default class AppSidebar extends React.Component<Props, State> {
+  _list: DraggableList<*>;
+  _main: HTMLElement;
+  _stopper = kefirStopper();
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      expansionSettings: this._readExpansionSettings(),
+    };
+  }
+  componentDidMount() {
+    Kefir.fromEvents(window, 'storage')
+      .filter((e) => e.key === 'inboxsdk__sidebar_expansion_settings')
+      .takeUntilBy(this._stopper)
+      .onValue(() => {
+        this.setState({
+          expansionSettings: this._readExpansionSettings(),
+        });
+      });
+  }
+  componentWillUnmount() {
+    this._stopper.destroy();
+  }
+  scrollPanelIntoView(instanceId: string, useContainer: boolean = false) {
+    const panel: Panel = this._list.getItemInstance(instanceId);
+    const getContainer = this.props.container;
+    panel.scrollIntoView(useContainer, getContainer && getContainer());
+  }
+  closePanel(instanceId: string) {
+    const panelDescriptor = this.props.panels.find(
+      (desc) => desc.instanceId === instanceId
+    );
+    if (panelDescriptor) {
+      this._expandedToggle(panelDescriptor.appId, panelDescriptor.id, false);
+    }
+  }
+  openPanel(instanceId: string) {
+    const panelDescriptor = this.props.panels.find(
+      (desc) => desc.instanceId === instanceId
+    );
+    if (panelDescriptor) {
+      this._expandedToggle(panelDescriptor.appId, panelDescriptor.id, true);
+    }
+  }
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    return (
+      this.props.panels !== nextProps.panels ||
+      this.state.expansionSettings !== nextState.expansionSettings
+    );
+  }
+  _expandedToggle(appId: string, id: string, expanded: boolean) {
+    // Operate on the latest value from localStorage
+    let expansionSettings = this._readExpansionSettings();
+    if (!Object.prototype.hasOwnProperty.call(expansionSettings.apps, appId)) {
+      expansionSettings.apps[appId] = {
+        ids: {},
+      };
+    }
+    const appSettings = expansionSettings.apps[appId];
+    appSettings.ids[id] = {
+      lastUse: Date.now(),
+      expanded,
+    };
+    this.setState({ expansionSettings }, this.props.onExpandedToggle);
+    this._saveExpansionSettings(expansionSettings);
+  }
+  _readExpansionSettings(): ExpansionSettings {
+    let data;
+    try {
+      data = JSON.parse(
+        global.localStorage.getItem('inboxsdk__sidebar_expansion_settings') ||
+          'null'
+      );
+    } catch (err) {
+      console.error('Failed to read sidebar settings', err); //eslint-disable-line no-console
+    }
+    if (data) return data;
+    return { apps: {} };
+  }
+  _saveExpansionSettings(data: ExpansionSettings) {
+    const allSidebarIds: Array<[string, string]> = flatMap(
+      Object.keys(data.apps),
+      (appId) => Object.keys(data.apps[appId].ids).map((id) => [appId, id])
+    );
+    if (allSidebarIds.length > MAX_SIDEBAR_SETTINGS) {
+      const idsToRemove: Array<[string, string]> = sortBy(
+        allSidebarIds,
+        ([appId, id]) => data.apps[appId].ids[id].lastUse
+      ).slice(0, allSidebarIds.length - MAX_SIDEBAR_SETTINGS);
+      idsToRemove.forEach(([appId, id]) => {
+        delete data.apps[appId].ids[id];
+        if (Object.keys(data.apps[appId].ids).length === 0) {
+          delete data.apps[appId];
+        }
+      });
+    }
+    try {
+      global.localStorage.setItem(
+        'inboxsdk__sidebar_expansion_settings',
+        JSON.stringify(data)
+      );
+    } catch (err) {
+      console.error('Failed to save sidebar settings', err); //eslint-disable-line no-console
+    }
+  }
+  render() {
+    const { expansionSettings } = this.state;
+    const { panels, onClose, onOutsideClick, onMoveEnd, container } =
+      this.props;
+    const showControls = panels.length > 1;
+
+    const hideTitleBar = panels.length === 1 && panels[0].hideTitleBar;
+
+    const panelList = panels.map((panelDescriptor) => {
+      const appExpansionSettings = Object.prototype.hasOwnProperty.call(
+        expansionSettings.apps,
+        panelDescriptor.appId
+      )
+        ? expansionSettings.apps[panelDescriptor.appId]
+        : null;
+      const panelExpansionSettings = appExpansionSettings
+        ? appExpansionSettings.ids[panelDescriptor.id]
+        : null;
+      const expanded = panelExpansionSettings
+        ? panelExpansionSettings.expanded
+        : true;
+      return {
+        panelDescriptor,
+        showControls,
+        expanded,
+        onExpandedToggle: (expanded) => {
+          this._expandedToggle(
+            panelDescriptor.appId,
+            panelDescriptor.id,
+            expanded
+          );
+        },
+      };
+    });
+
+    return (
+      <div
+        className={cx(idMap('app_sidebar'), {
+          [idMap('hideTitleBar')]: hideTitleBar,
+        })}
+      >
+        <div
+          className={idMap('app_sidebar_main')}
+          ref={(el) => {
+            if (el) this._main = el;
+          }}
+        >
+          <div className={idMap('app_sidebar_content_area')}>
+            <DraggableList
+              padding={0}
+              ref={(el) => {
+                if (el) this._list = el;
+              }}
+              itemKey={(x) => x.panelDescriptor.instanceId}
+              template={Panel}
+              list={panelList}
+              onMoveEnd={(newList, movedItem, oldIndex, newIndex) => {
+                onMoveEnd(
+                  newList.map((x) => x.panelDescriptor),
+                  movedItem.panelDescriptor,
+                  oldIndex,
+                  newIndex
+                );
+              }}
+              springConfig={springConfig}
+              container={container || (() => this._main)}
+            />
+          </div>
+          {onOutsideClick && (
+            <div
+              className={idMap('app_sidebar_content_area_padding')}
+              onClick={(event) => {
+                event.preventDefault();
+                onOutsideClick();
+              }}
+            />
+          )}
+        </div>
+        {onClose && (
+          <button
+            className="inboxsdk__close_button"
+            type="button"
+            title="Close"
+            onClick={onClose}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+type PanelProps = {
+  item: {
+    panelDescriptor: PanelDescriptor,
+    showControls: boolean,
+    expanded: boolean,
+    onExpandedToggle(expanded: boolean): void,
+  },
+  dragHandleProps: Object,
+  itemSelected: number,
+};
+class Panel extends React.Component<PanelProps> {
+  _el: HTMLElement;
+  scrollIntoView(useContainer: boolean, container?: ?HTMLElement) {
+    if (useContainer && container) {
+      const offsetParent = this._el.parentElement;
+      if (offsetParent) {
+        (container: any).scrollTo({
+          top: (offsetParent: any).offsetTop,
+          behavior: 'smooth',
+        });
+      }
+    } else {
+      this._el.scrollIntoView({
+        behavior: 'smooth',
+      });
+    }
+  }
+  getDragHeight() {
+    return 40;
+  }
+  componentDidMount() {
+    const expanded = !this.props.item.showControls || this.props.item.expanded;
+    if (expanded) {
+      ((document.body: any): HTMLElement).dispatchEvent(
+        new CustomEvent('inboxsdkSidebarPanelActivated', {
+          bubbles: true,
+          cancelable: false,
+          detail: { instanceId: this.props.item.panelDescriptor.instanceId },
+        })
+      );
+    }
+  }
+  componentDidUpdate(prevProps: PanelProps) {
+    const prevExpanded =
+      !prevProps.item.showControls || prevProps.item.expanded;
+    const expanded = !this.props.item.showControls || this.props.item.expanded;
+    if (!prevExpanded && expanded) {
+      ((document.body: any): HTMLElement).dispatchEvent(
+        new CustomEvent('inboxsdkSidebarPanelActivated', {
+          bubbles: true,
+          cancelable: false,
+          detail: { instanceId: this.props.item.panelDescriptor.instanceId },
+        })
+      );
+    } else if (prevExpanded && !expanded) {
+      ((document.body: any): HTMLElement).dispatchEvent(
+        new CustomEvent('inboxsdkSidebarPanelDeactivated', {
+          bubbles: true,
+          cancelable: false,
+          detail: { instanceId: this.props.item.panelDescriptor.instanceId },
+        })
+      );
+    }
+  }
+  shouldComponentUpdate(nextProps: PanelProps) {
+    return (
+      this.props.itemSelected !== nextProps.itemSelected ||
+      this.props.item.panelDescriptor !== nextProps.item.panelDescriptor ||
+      this.props.item.showControls !== nextProps.item.showControls ||
+      this.props.item.expanded !== nextProps.item.expanded
+    );
+  }
+  render() {
+    const {
+      dragHandleProps,
+      itemSelected,
+      item: {
+        panelDescriptor: { title, appName, iconClass, iconUrl, el },
+        showControls,
+        expanded,
+        onExpandedToggle,
+      },
+    } = this.props;
+    const scale = itemSelected * 0.01 + 1;
+    const shadow = itemSelected * 4;
+
+    return (
+      <div
+        ref={(el) => {
+          if (el) this._el = el;
+        }}
+        className={cx(idMap('app_sidebar_content_panel'), {
+          [idMap('dragged')]: itemSelected > 0.2,
+          [idMap('expanded')]: expanded,
+          [idMap('showControls')]: showControls,
+        })}
+        style={{
+          transform: scale === 1 ? 'none' : `scale(${scale})`,
+          boxShadow:
+            shadow === 0
+              ? 'none'
+              : `0px 0px ${shadow}px 0px rgba(0, 0, 0, 0.3)`,
+        }}
+      >
+        <div
+          className={idMap('app_sidebar_content_panel_top_line')}
+          data-app-name={appName}
+        >
+          <span
+            className={idMap('app_sidebar_content_panel_title')}
+            {...(showControls ? dragHandleProps : null)}
+          >
+            <div className={idMap('app_sidebar_content_panel_grip')} />
+            <span
+              className={idMap(
+                'app_sidebar_content_panel_title_icon_container'
+              )}
+            >
+              <span
+                className={cx(
+                  idMap('app_sidebar_content_panel_title_icon'),
+                  iconClass
+                )}
+              >
+                {iconUrl && <img src={iconUrl} />}
+              </span>
+            </span>
+            <span className={idMap('app_sidebar_content_panel_title_text')}>
+              {title}
+            </span>
+          </span>
+          <span
+            className={idMap('app_sidebar_content_panel_toggle')}
+            onClick={() => onExpandedToggle(!expanded)}
+          >
+            <button
+              type="button"
+              className={idMap('app_sidebar_content_panel_toggle_button')}
+            />
+          </span>
+        </div>
+        <SmoothCollapse
+          expanded={!showControls || expanded}
+          heightTransition=".15s ease"
+        >
+          <ElementContainer
+            className={idMap('app_sidebar_content_panel_content')}
+            el={el}
+          />
+        </SmoothCollapse>
+      </div>
+    );
+  }
+}