@inboxsdk/core 0.2.27 → 0.2.28-alpha.1

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-app-sidebar-view/index.test.js

@@ -0,0 +1,162 @@
+/* @flow */
+
+import _ from 'lodash';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+import delay from 'pdelay';
+import fs from 'fs';
+import idMap from '../../../../lib/idMap';
+import GmailAppSidebarView from './index';
+import ContentPanelViewDriver from '../../../../driver-common/sidebar/ContentPanelViewDriver';
+import MockWebStorage from 'mock-webstorage';
+
+jest.mock('../../../../lib/dom/make-element-child-stream', () => {
+  return () => require('kefir-bus')();
+});
+
+jest.mock('../../../../lib/dom/make-mutation-observer-chunked-stream', () => {
+  return () => require('kefir-bus')();
+});
+
+global.localStorage = new MockWebStorage();
+global._APP_SIDEBAR_TEST = true;
+
+describe('GmailAppSidebarView Primary', function () {
+  beforeEach(() => {
+    makeSidebarContainerElement();
+  });
+
+  afterEach(() => {
+    removeSidebarContainerElement();
+  });
+
+  it('construction works', () => {
+    const gmailAppSidebarView = new GmailAppSidebarView(
+      makeDriver(),
+      makeContentContainerElement()
+    );
+  });
+
+  it('sidebar is added', async () => {
+    const container = makeContentContainerElement();
+    const gmailAppSidebarView = new GmailAppSidebarView(
+      makeDriver(),
+      container
+    );
+
+    const descriptor = Kefir.constant({
+      title: 'foo',
+      iconUrl: '/bar.png',
+      el: document.createElement('div'),
+    });
+
+    const fakeThreadView: Object = {
+      getStopper: _.constant(kefirStopper()),
+    };
+
+    const panel = gmailAppSidebarView.addThreadSidebarContentPanel(
+      descriptor,
+      fakeThreadView
+    );
+
+    await delay(0);
+    expect(
+      container.querySelectorAll('.' + idMap('app_sidebar_content_panel'))
+        .length
+    ).toBe(1);
+
+    panel.remove();
+    expect(
+      container.querySelectorAll('.' + idMap('app_sidebar_content_panel'))
+        .length
+    ).toBe(0);
+  });
+
+  it('multiple sidebars can be added', async () => {
+    const container = makeContentContainerElement();
+    const gmailAppSidebarView = new GmailAppSidebarView(
+      makeDriver(),
+      container
+    );
+
+    const descriptor1 = Kefir.constant({
+      title: 'foo1',
+      iconUrl: '/bar.png',
+      el: document.createElement('div'),
+    });
+
+    const descriptor2 = Kefir.constant({
+      title: 'foo2',
+      iconUrl: '/bar.png',
+      el: document.createElement('div'),
+    });
+
+    const fakeThreadView: Object = {
+      getStopper: _.constant(kefirStopper()),
+    };
+
+    gmailAppSidebarView.addThreadSidebarContentPanel(
+      descriptor1,
+      fakeThreadView
+    );
+
+    gmailAppSidebarView.addThreadSidebarContentPanel(
+      descriptor2,
+      fakeThreadView
+    );
+
+    await delay(0);
+    expect(
+      container.querySelectorAll('.' + idMap('app_sidebar_content_panel'))
+        .length
+    ).toBe(2);
+  });
+});
+
+function makeDriver(appId, opts): any {
+  return {
+    getAppId: () => appId || 'test',
+    getOpts: () => opts || { appName: 'Test', appIconUrl: 'testImage.png' },
+    getLogger() {
+      return {
+        eventSdkPassive() {},
+        error(err, details) {
+          console.error('logger.error called:', err, details); //eslint-disable-line no-console
+          throw err;
+        },
+      };
+    },
+  };
+}
+
+function makeSidebarContainerElement() {
+  const newDiv = document.createElement('div');
+  newDiv.className = 'brC-aT5-aOt-Jw';
+
+  const sidebar = document.createElement('div');
+  sidebar.className = 'J-KU-Jg';
+  sidebar.setAttribute('role', 'tablist');
+
+  const separator = document.createElement('div');
+  separator.setAttribute('role', 'separator');
+
+  sidebar.appendChild(separator);
+  newDiv.appendChild(sidebar);
+
+  document.body && document.body.appendChild(newDiv);
+}
+
+function removeSidebarContainerElement() {
+  const oldDivs = Array.from(document.getElementsByClassName('brC-aT5-aOt-Jw'));
+  oldDivs.forEach((oldDiv) => {
+    const parent = oldDiv.parentNode;
+    parent && parent.removeChild(oldDiv);
+  });
+}
+
+function makeContentContainerElement() {
+  const contentContainerElement = document.createElement('div');
+  contentContainerElement.className = 'bq9';
+  return contentContainerElement;
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-app-sidebar-view/primary/add-companion-global-icon-area.js

@@ -0,0 +1,39 @@
+/* @flow */
+
+import { defn } from 'ud';
+
+import querySelector from '../../../../../lib/dom/querySelectorOrFail';
+import type Logger from '../../../../../lib/logger';
+
+/*
+As of Feb 6th, 2018.
+  div.brC-aT5-aOt-Jw - the container for native global icons and sidebar icons
+    div.brC-aT5-aOt-bsf-Jw - container for global icons
+    div.brC-aT5-aOt-ato-Kp-Jw - container for sidebar icons
+      div.bvq - matches the structure in regular add-on icon sidebar
+*/
+
+const GLOBAL_ICON_AREA_SELECTOR = '.brC-aT5-aOt-bsf-Jw';
+
+function addCompanionGlobalIconArea(
+  logger: Logger,
+  iconArea: HTMLElement,
+  companionSidebarIconContainerEl: HTMLElement
+) {
+  const sidebarIconArea = companionSidebarIconContainerEl.querySelector(
+    GLOBAL_ICON_AREA_SELECTOR
+  );
+  if (!sidebarIconArea) {
+    logger.error(new Error('addCompanionGlobalIconArea: no sidebarIconArea'));
+    return;
+  }
+  const nativeIconArea = sidebarIconArea.firstElementChild;
+  if (!nativeIconArea) {
+    logger.error(new Error('addCompanionGlobalIconArea: no nativeIconArea'));
+    return;
+  }
+
+  nativeIconArea.insertAdjacentElement('beforebegin', iconArea);
+}
+
+export default defn(module, addCompanionGlobalIconArea);

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-app-sidebar-view/primary/add-companion-thread-icon-area.js

@@ -0,0 +1,47 @@
+/* @flow */
+
+import { defn } from 'ud';
+
+import Kefir from 'kefir';
+import makeMutationObserverChunkedStream from '../../../../../lib/dom/make-mutation-observer-chunked-stream';
+import querySelector from '../../../../../lib/dom/querySelectorOrFail';
+import type Logger from '../../../../../lib/logger';
+
+/*
+As of Feb 6th, 2018.
+  div.brC-aT5-aOt-Jw - the container for native global icons and sidebar icons
+    div.brC-aT5-aOt-bsf-Jw - container for sdk global sidebar icons
+      [role=tablist] - container for native and sdk thread sidebar icons
+*/
+
+const TAB_LIST_SELECTOR = '[role=tablist],.J-KU-Jg';
+
+function addCompanionThreadIconArea(
+  logger: Logger,
+  iconArea: HTMLElement,
+  companionSidebarIconContainerEl: HTMLElement
+) {
+  const tabList =
+    companionSidebarIconContainerEl.querySelector(TAB_LIST_SELECTOR);
+  if (!tabList) {
+    logger.error(new Error('addCompanionThreadIconArea: no tablist'));
+    return;
+  }
+
+  const separator =
+    companionSidebarIconContainerEl.querySelector('[role=separator]');
+  if (!separator) {
+    logger.error(
+      new Error('addCompanionThreadIconArea: failed to find separator')
+    );
+    tabList.insertAdjacentElement('beforebegin', iconArea);
+  } else {
+    if (!separator.parentElement) throw new Error();
+    separator.parentElement.insertBefore(
+      iconArea,
+      separator.nextElementSibling
+    );
+  }
+}
+
+export default defn(module, addCompanionThreadIconArea);

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-app-sidebar-view/primary/add-to-icon-area.js

@@ -0,0 +1,33 @@
+/* @flow */
+
+import type OrderManager from 'order-manager';
+import { defn } from 'ud';
+import findIndex from 'lodash/findIndex';
+
+import insertElementInOrder from '../../../../../lib/dom/insert-element-in-order';
+
+function addToIconArea(
+  orderManager: OrderManager<*>,
+  appName: string,
+  container: HTMLElement,
+  iconArea: HTMLElement
+) {
+  //first set icon order hints
+  [...iconArea.querySelectorAll('[data-app-name]')].forEach((el) => {
+    const elAppName = el.getAttribute('data-app-name');
+    const index = findIndex(
+      orderManager.getOrderedItems(),
+      ({ value }) => value.appName === elAppName
+    );
+    el.setAttribute('data-order-hint', index);
+  });
+
+  const index = findIndex(
+    orderManager.getOrderedItems(),
+    ({ value }) => value.appName === appName
+  );
+  if (index > -1) container.setAttribute('data-order-hint', index);
+  insertElementInOrder(iconArea, container, ['data-order-hint']);
+}
+
+export default defn(module, addToIconArea);