@inboxsdk/core 0.2.27 → 0.2.28-alpha.1

package/src/platform-implementation-js/dom-driver/inbox/registerSearchSuggestionsProvider.js

@@ -0,0 +1,317 @@
+/* @flow */
+
+import type InboxDriver from './inbox-driver';
+import type { AutocompleteSearchResult } from '../../../injected-js/gmail/modify-suggestions';
+
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+import toItemWithLifetimeStream from '../../lib/toItemWithLifetimeStream';
+import makeMutationObserverChunkedStream from '../../lib/dom/make-mutation-observer-chunked-stream';
+import fromEventTargetCapture from '../../lib/from-event-target-capture';
+import insertElementInOrder from '../../lib/dom/insert-element-in-order';
+import searchBarParser from './detection/searchBar/parser';
+import copyAndValidateAutocompleteResults from '../../lib/copyAndValidateAutocompleteResults';
+import setupCustomAutocompleteSelectionHandling from './setupCustomAutocompleteSelectionHandling';
+import autoHtml from 'auto-html';
+
+const ORDERING_ATTR = 'data-inboxsdk-search-provider-count';
+const DEFAULT_RESULT_ICON =
+  '//www.gstatic.com/images/icons/material/system/2x/search_black_24dp.png';
+
+const getProviderOrder = () => {
+  const { documentElement } = document;
+  if (!documentElement) {
+    throw new Error();
+  }
+  const orderAttr = documentElement.getAttribute(ORDERING_ATTR);
+  const providerOrder = (orderAttr ? parseInt(orderAttr) + 1 : 0).toString();
+
+  documentElement.setAttribute(ORDERING_ATTR, providerOrder);
+
+  return providerOrder;
+};
+
+const handleResultChosen = ({ driver, searchInput, result, event }) => {
+  if (typeof result.onClick === 'function') {
+    result.onClick();
+  }
+
+  if (typeof result.externalURL === 'string') {
+    window.open(result.externalURL);
+  }
+
+  if (result.routeName && result.routeParams) {
+    driver.goto(result.routeName, result.routeParams);
+  }
+
+  if (typeof result.searchTerm === 'string') {
+    searchInput.value = result.searchTerm;
+    searchInput.dispatchEvent(new Event('input'));
+  }
+};
+
+const renderResultsList = ({
+  driver,
+  searchInput,
+  removalStream,
+  results,
+  providerOrder,
+}) => {
+  const container = document.createElement('div');
+
+  container.setAttribute('data-order-hint', providerOrder);
+  container.classList.add('inboxsdk__search_suggestion_group');
+
+  results.forEach((result) => {
+    const listItem = document.createElement('li');
+
+    const description =
+      result.description || result.descriptionHTML
+        ? autoHtml`
+      <span class="inboxsdk__search_suggestion_desc">
+        ${result.description || { __html: (result.descriptionHTML: any) }}
+      </span>
+    `
+        : '';
+
+    listItem.classList.add('inboxsdk__search_suggestion');
+    listItem.innerHTML = autoHtml`
+      <img src="${result.iconUrl || DEFAULT_RESULT_ICON}">
+      <span>
+        <span class="inboxsdk__search_suggestion_name" role="option">
+          ${result.name || { __html: (result.nameHTML: any) }}
+        </span>
+        ${{ __html: description }}
+      </span>
+    `;
+
+    Kefir.fromEvents(listItem, 'click')
+      .takeUntilBy(removalStream)
+      .onValue((event: MouseEvent) =>
+        handleResultChosen({ driver, searchInput, result, event })
+      );
+
+    container.appendChild(listItem);
+  });
+
+  return container;
+};
+
+export default function registerSearchSuggestionsProvider(
+  driver: InboxDriver,
+  handler: (string) => Promise<Array<AutocompleteSearchResult>>
+) {
+  const stopper = kefirStopper();
+  const providerOrder = getProviderOrder();
+
+  toItemWithLifetimeStream(driver.getTagTree().getAllByTag('searchBar'))
+    .flatMap(({ el, removalStream }) => {
+      const { searchInput } = searchBarParser(el.getValue()).elements;
+      if (searchInput instanceof HTMLInputElement) {
+        return Kefir.constant({
+          searchInput,
+          searchInputRemovalStream: removalStream,
+        });
+      } else {
+        return Kefir.never();
+      }
+    })
+    .flatMap(({ searchInput, searchInputRemovalStream }) =>
+      toItemWithLifetimeStream(
+        driver.getTagTree().getAllByTag('searchAutocompleteResults')
+      )
+        .takeUntilBy(searchInputRemovalStream)
+        .map(({ el, removalStream }) => ({
+          searchInput,
+          searchInputRemovalStream,
+          resultsEl: el.getValue(),
+          resultsElRemovalStream: removalStream,
+        }))
+    )
+    .flatMap(
+      ({
+        searchInput,
+        searchInputRemovalStream,
+        resultsEl,
+        resultsElRemovalStream,
+      }) => {
+        const inputs: Kefir.Observable<{ target: HTMLInputElement } & Event> =
+          Kefir.fromEvents(searchInput, 'input')
+            .takeUntilBy(searchInputRemovalStream)
+            .takeUntilBy(resultsElRemovalStream);
+
+        const enterAndTabPresses: Kefir.Observable<KeyboardEvent> =
+          Kefir.fromEvents(searchInput, 'keydown')
+            .filter(({ keyCode }) => keyCode === 13 || keyCode === 9)
+            .takeUntilBy(searchInputRemovalStream)
+            .takeUntilBy(resultsElRemovalStream);
+
+        return inputs.map((event) => ({
+          event,
+          searchInput,
+          resultsEl,
+          inputStream: inputs,
+          enterAndTabPresses,
+          resultsElRemovalStream,
+        }));
+      }
+    )
+    .flatMapLatest((item) => {
+      const suggestionsResponse = driver
+        .getPageCommunicator()
+        .ajaxInterceptStream.filter(
+          ({ type }) => type === 'searchSuggestionsReceieved'
+        );
+
+      const removalStream = Kefir.merge([
+        // Handle cleanup when a new search query is entered. We want to wait
+        // to remove our old results until *after* Inbox's results from the new
+        // query have come back, since that will allow our modifications to
+        // switch from old -> new in sync with Inbox's native suggestions.
+        // If we didn't wait on `suggestionsResponse` to trigger cleanup,
+        // Our modifications would disappear the moment the user started typing,
+        // which ends up looking jarring and inconsistent with Inbox's results
+        // which stick around until the new results are ready.
+        item.inputStream.take(1).flatMap(() => suggestionsResponse),
+
+        // Handle cleanup when the user deletes their entire search query.
+        item.inputStream.filter(({ target: { value } }) => value === ''),
+        item.resultsElRemovalStream,
+      ]).take(1);
+
+      return Kefir.combine([
+        Kefir.fromPromise(Promise.resolve(handler(item.event.target.value))),
+        // Wait to send results to the UI until Inbox's results have come back
+        // to avoid rendering too soon.
+        suggestionsResponse.take(1),
+      ])
+        .takeUntilBy(removalStream)
+        .map(([results, _ignored]: [Array<AutocompleteSearchResult>, any]) => ({
+          ...item,
+          removalStream,
+          results,
+        }));
+    })
+    .takeUntilBy(stopper)
+    .flatMap(
+      ({
+        resultsEl,
+        searchInput,
+        resultsElRemovalStream,
+        removalStream,
+        enterAndTabPresses,
+        results,
+      }) => {
+        try {
+          const validatedResults = copyAndValidateAutocompleteResults(
+            driver,
+            results
+          );
+
+          return Kefir.constant({
+            resultsEl,
+            searchInput,
+            resultsElRemovalStream,
+            removalStream,
+            enterAndTabPresses,
+            results: validatedResults,
+          });
+        } catch (error) {
+          return Kefir.constantError(error);
+        }
+      }
+    )
+    .filter(({ results }) => results.length > 0)
+    .onError((error) => driver.getLogger().error(error))
+    .onValue(
+      ({
+        resultsEl,
+        searchInput,
+        resultsElRemovalStream,
+        removalStream,
+        enterAndTabPresses,
+        results,
+      }) => {
+        setupCustomAutocompleteSelectionHandling({
+          resultsEl,
+          resultsElRemovalStream,
+          searchInput,
+        });
+
+        const suggestionsElement = renderResultsList({
+          driver,
+          searchInput,
+          removalStream,
+          results,
+          providerOrder,
+        });
+
+        insertElementInOrder(resultsEl, suggestionsElement);
+
+        // NOTE: Because we're manually overriding the 'display' property, we've
+        // basically taken responsibility for showing/hiding `resultsEl`
+        // since Inbox no longer knows when the element is truly visible.
+        // When we want to show results for a search term but Inbox doesn't have
+        // any results, we need to force the results element to be displayed.
+        // When Inbox hides the element it also removes a class that applies
+        // some padding adjustments, so we have to force that as well.
+        resultsEl.style.display = 'block';
+        resultsEl.style.padding = '6px 0';
+
+        removalStream.onValue(() => {
+          suggestionsElement.remove();
+
+          // Because we've mostly overridden Inbox's native show/hide logic we're
+          // responsible for hiding `resultsEl` in a couple removal cases:
+          // 1) when we go directly from only custom results to having
+          // no text in the search box.
+          // 2) when there are only custom results and the user subsequently
+          // enters a search that returns no results of any type.
+          if (searchInput.value === '' || resultsEl.matches(':empty')) {
+            resultsEl.style.display = 'none';
+          }
+        });
+
+        // We have to take over responsibility for hiding `resultsEl` when
+        // the user presses enter or tab because our other overrides prevent Inbox
+        // from handling this sensibly.
+        enterAndTabPresses
+          .takeUntilBy(removalStream)
+          .take(1)
+          .onValue(() => {
+            resultsEl.style.display = 'none';
+          });
+
+        // When Inbox gets the *first* set of suggestions after opening search,
+        // it clears away the current children of the `resultsEl` element.
+        // When this happens, our modifications will get cleared away if
+        // we've already added them — this can happen if Inbox skips a turn of
+        // the event loop between getting the AJAX response back and rendering to
+        // the DOM. To handle this case, we watch `resultsEl` for mutations
+        // and re-add our modifications if they've been cleared.
+        // We also force `resultsEl` to show because the first time
+        // we display modifications that aren't accompanied by native results
+        // Inbox hides `resultsEl` after we force it to show. Because Inbox
+        // removes the previous search's results in the same event loop tick as
+        // hiding `resultsEl`, we can hook into the child element removal and
+        // re-show it before the hidden state gets painted to the screen.
+        // We need to stop this entire process when tab or enter is pressed,
+        // because if a custom result was selected when the key was pressed
+        // then Inbox will remove the native results that no longer match the
+        // search term — causing this observer to fire and subsequently
+        // re-show `resultsEl` just as we're trying to manually hide it.
+        makeMutationObserverChunkedStream(resultsEl, { childList: true })
+          .takeUntilBy(enterAndTabPresses)
+          .takeUntilBy(removalStream)
+          .onValue(() => {
+            resultsEl.style.display = 'block';
+            if (suggestionsElement.parentElement !== resultsEl) {
+              insertElementInOrder(resultsEl, suggestionsElement);
+            }
+          });
+      }
+    );
+
+  return () => stopper.destroy();
+}

package/src/platform-implementation-js/dom-driver/inbox/setupCustomAutocompleteSelectionHandling.js

@@ -0,0 +1,251 @@
+/* @flow */
+
+import Kefir from 'kefir';
+import fromEventTargetCapture from '../../lib/from-event-target-capture';
+import closest from 'closest-ng';
+
+const SELECTION_MASTER_ATTR = 'data-inboxsdk-selection-master-claimed';
+
+const hasNativeResults = (resultsEl: HTMLElement) =>
+  resultsEl.querySelectorAll('li:not(.inboxsdk__search_suggestion)').length > 0;
+
+const hasCustomResults = (resultsEl: HTMLElement) =>
+  resultsEl.querySelectorAll('.inboxsdk__search_suggestion').length > 0;
+
+const getSelectedNativeResult = (resultsEl: HTMLElement) => {
+  const nativeResults = resultsEl.querySelectorAll(
+    'li:not(.inboxsdk__search_suggestion)'
+  );
+
+  // Unfortunately there are no distinguishable features of a selected
+  // native result besides its background color... (ಥ﹏ಥ)
+  return Array.from(nativeResults).find((result) => {
+    const { backgroundColor }: { backgroundColor: string } =
+      getComputedStyle(result);
+
+    const colorValues = backgroundColor.match(/([\d.]+)/g);
+
+    return colorValues && parseFloat(colorValues[3]) > 0;
+  });
+};
+
+const selectFirstCustomResult = (resultsEl: HTMLElement) => {
+  const firstCustomResult = resultsEl.querySelector(
+    '.inboxsdk__search_suggestion_group:first-of-type > ' +
+      '.inboxsdk__search_suggestion:first-child'
+  );
+
+  firstCustomResult && firstCustomResult.classList.add('inboxsdk__selected');
+};
+
+const setupCustomResultHoverListeners = (resultsEl, resultsElRemovalStream) => {
+  Kefir.fromEvents(resultsEl, 'mouseover')
+    .takeUntilBy(resultsElRemovalStream)
+    .map(({ target }: { target: HTMLElement }) =>
+      closest(target, '.inboxsdk__search_suggestion:not(.inboxsdk__selected)')
+    )
+    .filter(Boolean)
+    .onValue((el) => {
+      const customResults = resultsEl.querySelectorAll(
+        '.inboxsdk__search_suggestion.inboxsdk__selected'
+      );
+
+      // Needed to ensure custom results selected via keyboard events
+      // have their selected state removed (since no mouseout event fires).
+      Array.from(customResults).forEach((result) =>
+        result.classList.remove('inboxsdk__selected')
+      );
+
+      el.classList.add('inboxsdk__selected');
+    });
+
+  Kefir.fromEvents(resultsEl, 'mouseout')
+    .takeUntilBy(resultsElRemovalStream)
+    .map(({ target }: { target: HTMLElement }) =>
+      closest(target, '.inboxsdk__search_suggestion.inboxsdk__selected')
+    )
+    .filter(Boolean)
+    .onValue((el) => el.classList.remove('inboxsdk__selected'));
+};
+
+export default function setupCustomAutocompleteSelectionHandling({
+  resultsEl,
+  resultsElRemovalStream,
+  searchInput,
+}: {
+  resultsEl: HTMLElement,
+  resultsElRemovalStream: Kefir.Observable<any>,
+  searchInput: HTMLInputElement,
+}): void {
+  if (resultsEl.hasAttribute(SELECTION_MASTER_ATTR)) {
+    return;
+  }
+
+  resultsEl.setAttribute(SELECTION_MASTER_ATTR, 'true');
+
+  // We need to be able to cancel up/down arrow events before Inbox gets them,
+  // but we only want to listen for events that happen while the search box
+  // is in focus (since that's when up/down arrows manipulate selection).
+  // As a result, we need to grab the search box's parent element so we can
+  // capture and cancel events prior to Inbox's listeners (and our own).
+  const searchInputParent = searchInput.parentElement;
+  if (!searchInputParent) {
+    throw new Error();
+  }
+
+  const keyboardEvents: Kefir.Observable<KeyboardEvent> =
+    fromEventTargetCapture(searchInputParent, 'keydown').takeUntilBy(
+      resultsElRemovalStream
+    );
+
+  const upArrowPresses = keyboardEvents.filter(({ keyCode }) => keyCode === 38);
+  const downArrowPresses = keyboardEvents.filter(
+    ({ keyCode }) => keyCode === 40
+  );
+  const enterPresses = keyboardEvents.filter(({ keyCode }) => keyCode === 13);
+
+  upArrowPresses.onValue((event) => {
+    const selectedNativeResult = getSelectedNativeResult(resultsEl);
+    const selectedCustomResult = resultsEl.querySelector(
+      '.inboxsdk__search_suggestion.inboxsdk__selected'
+    );
+    const customResultGroup =
+      selectedCustomResult &&
+      closest(selectedCustomResult, '.inboxsdk__search_suggestion_group');
+
+    if (selectedNativeResult) {
+      return;
+    }
+
+    if (
+      selectedCustomResult &&
+      customResultGroup &&
+      selectedCustomResult.matches(':first-child') &&
+      customResultGroup.matches(':first-of-type')
+    ) {
+      // If there are native results, Inbox will automatically select
+      // the last one when it sees this up arrow press, so all we need to do
+      // is remove the highlighting from our result. If there *aren't* any
+      // native results, then nothing will be selected, which is consistent
+      // with native behavior (hitting the up arrow with the first item selected
+      // leaves *nothing* selected).
+      selectedCustomResult.classList.remove('inboxsdk__selected');
+    } else if (hasCustomResults(resultsEl) && !selectedCustomResult) {
+      event.stopPropagation();
+
+      const lastCustomResult = resultsEl.querySelector(
+        '.inboxsdk__search_suggestion_group:last-of-type > ' +
+          '.inboxsdk__search_suggestion:last-child'
+      );
+
+      lastCustomResult && lastCustomResult.classList.add('inboxsdk__selected');
+    } else if (selectedCustomResult && customResultGroup) {
+      event.stopPropagation();
+      selectedCustomResult.classList.remove('inboxsdk__selected');
+
+      // The case where this is the first result in the first group
+      // has already been handled above, so if this check is true then
+      // the selected result is the first item in a non-first group.
+      if (selectedCustomResult.matches(':first-child')) {
+        const previousResultGroup = customResultGroup.previousElementSibling;
+        const customResultToSelect =
+          previousResultGroup &&
+          previousResultGroup.querySelector(
+            '.inboxsdk__search_suggestion:last-child'
+          );
+
+        customResultToSelect &&
+          customResultToSelect.classList.add('inboxsdk__selected');
+      } else {
+        const previousCustomResult =
+          selectedCustomResult.previousElementSibling;
+        previousCustomResult &&
+          previousCustomResult.classList.add('inboxsdk__selected');
+      }
+    }
+  });
+
+  downArrowPresses.onValue((event) => {
+    const selectedNativeResult = getSelectedNativeResult(resultsEl);
+    const selectedCustomResult = resultsEl.querySelector(
+      '.inboxsdk__search_suggestion.inboxsdk__selected'
+    );
+    const customResultGroup =
+      selectedCustomResult &&
+      closest(selectedCustomResult, '.inboxsdk__search_suggestion_group');
+
+    if (
+      selectedNativeResult &&
+      !selectedNativeResult.matches(':last-of-type')
+    ) {
+      return;
+    }
+
+    if (selectedNativeResult) {
+      selectFirstCustomResult(resultsEl);
+    } else if (
+      selectedCustomResult &&
+      customResultGroup &&
+      selectedCustomResult.matches(':last-child') &&
+      customResultGroup.matches(':last-of-type')
+    ) {
+      // Inbox's native behavior is to leave nothing selected when you hit
+      // the down arrow while the last item is selected, so we don't
+      // try to select any other results if the last custom result is currently
+      // selected.
+      event.stopPropagation();
+      selectedCustomResult.classList.remove('inboxsdk__selected');
+    } else if (!selectedCustomResult) {
+      // Inbox will automatically select the first native result if
+      // one exists.
+      if (hasNativeResults(resultsEl)) {
+        return;
+      }
+
+      // Theoretically we could stop propegation here, but inbox doesn't do
+      // anything with the event anyway given that there's no results to select.
+      selectFirstCustomResult(resultsEl);
+    } else if (selectedCustomResult && customResultGroup) {
+      event.stopPropagation();
+      selectedCustomResult.classList.remove('inboxsdk__selected');
+
+      // The case where this is the last result in the last group
+      // has already been handled above, so if this check is true then
+      // the selected result is the last item in a non-last group.
+      if (selectedCustomResult.matches(':last-child')) {
+        const nextResultGroup = customResultGroup.nextElementSibling;
+        const customResultToSelect =
+          nextResultGroup &&
+          nextResultGroup.querySelector(
+            '.inboxsdk__search_suggestion:first-child'
+          );
+
+        customResultToSelect &&
+          customResultToSelect.classList.add('inboxsdk__selected');
+      } else {
+        const nextCustomResult = selectedCustomResult.nextElementSibling;
+        nextCustomResult &&
+          nextCustomResult.classList.add('inboxsdk__selected');
+      }
+    }
+  });
+
+  enterPresses.onValue((event) => {
+    const selectedCustomResult = resultsEl.querySelector(
+      '.inboxsdk__search_suggestion.inboxsdk__selected'
+    );
+
+    // If the user hits enter and has a custom result selected, we want to
+    // trigger the custom result's action *but* avoid letting the native
+    // behavior (hiding `resultsEl`) happen.
+    if (selectedCustomResult) {
+      event.stopPropagation();
+
+      selectedCustomResult.dispatchEvent(new MouseEvent('click'));
+    }
+  });
+
+  keyboardEvents.onEnd(() => resultsEl.removeAttribute(SELECTION_MASTER_ATTR));
+
+  setupCustomResultHoverListeners(resultsEl, resultsElRemovalStream);
+}

package/src/platform-implementation-js/dom-driver/inbox/setupRouteViewDriverStream.js

@@ -0,0 +1,76 @@
+/* @flow */
+
+import Kefir from 'kefir';
+
+import InboxDriver from './inbox-driver';
+import InboxRouteView from './views/inbox-route-view';
+import InboxCustomRouteView from './views/inbox-custom-route-view';
+import InboxDummyRouteView from './views/inbox-dummy-route-view';
+
+import routeIDmatchesHash from '../../lib/routeIDmatchesHash';
+
+export default function setupRouteViewDriverStream(
+  driver: InboxDriver
+): Kefir.Observable<
+  InboxRouteView | InboxDummyRouteView | InboxCustomRouteView
+> {
+  const customRouteIDs = driver.getCustomRouteIDs();
+
+  let lastRouteView = null;
+
+  driver.getStopper().onValue(() => {
+    if (lastRouteView) {
+      lastRouteView.destroy();
+    }
+  });
+
+  return Kefir.merge([
+    Kefir.merge([
+      Kefir.fromEvents(document, 'inboxSDKpushState'),
+      Kefir.fromEvents(window, 'popstate'),
+    ]).map(
+      (e) =>
+        (process.env.NODE_ENV === 'test' && e.detail && e.detail.__test_url) ||
+        document.location.href
+    ),
+    Kefir.fromEvents(window, 'hashchange')
+      .map((e) => e.newURL)
+      // When the user hits back and leaves a hash URL, a hashchange *and*
+      // popstate events are emitted. Let's just process the popstate event
+      // alone.
+      .filter((href) => /#/.test(href)),
+  ])
+    .toProperty(() => document.location.href)
+    .map((href) => {
+      const m = /#([^?]*)/.exec(href);
+      if (!m) return { type: 'NATIVE' };
+      const hash = m[1];
+      for (let routeIDs of customRouteIDs) {
+        let routeID = routeIDmatchesHash(routeIDs, hash);
+        if (routeID) {
+          return { hash, type: 'CUSTOM', routeID };
+        }
+      }
+      return { type: 'OTHER_APP_CUSTOM' };
+    })
+    .map((detail) => {
+      if (detail.type === 'CUSTOM') {
+        return new InboxCustomRouteView(detail.routeID, detail.hash);
+      } else if (detail.type === 'NATIVE') {
+        driver.showNativeRouteView();
+        return new InboxDummyRouteView('NATIVE');
+      } else if (detail.type === 'OTHER_APP_CUSTOM') {
+        return new InboxDummyRouteView('OTHER_APP_CUSTOM');
+      } else {
+        driver.getLogger().error(new Error('should not happen'));
+        return new InboxDummyRouteView('UNKNOWN');
+      }
+    })
+    .map((routeView) => {
+      if (lastRouteView) {
+        lastRouteView.destroy();
+      }
+      lastRouteView = routeView;
+      return routeView;
+    });
+}