Revert "Upgrade to EUI 0.0.19. (#16576) (#16591)"

This reverts commit 2ddedaaea8.
2018-02-08 09:10:04 -05:00 · 2018-02-08 09:10:04 -05:00 · 4317ab50b6
parent 94f744b98f
commit 4317ab50b6
5 changed files with 350 additions and 12 deletions
--- a/package.json
+++ b/package.json
@ -76,7 +76,7 @@
  },
  "dependencies": {
    "@elastic/datemath": "4.0.2",
-    "@elastic/eui": "0.0.19",
+    "@elastic/eui": "0.0.18",
    "@elastic/filesaver": "1.1.2",
    "@elastic/numeral": "2.3.0",
    "@elastic/test-subj-selector": "0.2.1",
--- a/src/ui/public/notify/toasts/snapshots/global_toast_list.test.js.snap
+++ b/src/ui/public/notify/toasts/snapshots/global_toast_list.test.js.snap
@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GlobalToastList is rendered 1`] = `
+<div
+  class="euiGlobalToastList"
+/>
+`;
+
+exports[`GlobalToastList props toasts is rendered 1`] = `
+<div
+  class="euiGlobalToastList"
+>
+  <div
+    class="euiToast euiToast--success euiGlobalToastListItem"
+    data-test-subj="a"
+    id="a"
+  >
+    <div
+      class="euiToastHeader euiToastHeader--withBody"
+    >
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiToastHeader__icon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xlink="http://www.w3.org/1999/xlink"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <path
+            d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
+            id="check-a"
+          />
+        </defs>
+        <use
+          href="#check-a"
+        />
+      </svg>
+      <span
+        class="euiToastHeader__title"
+      >
+        A
+      </span>
+    </div>
+    <button
+      aria-label="Dismiss toast"
+      class="euiToast__closeButton"
+      data-test-subj="toastCloseButton"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xlink="http://www.w3.org/1999/xlink"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <path
+            d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
+            id="cross-a"
+          />
+        </defs>
+        <use
+          fill-rule="nonzero"
+          href="#cross-a"
+        />
+      </svg>
+    </button>
+    <div
+      class="euiText euiText--small"
+    >
+      a
+    </div>
+  </div>
+  <div
+    class="euiToast euiToast--danger euiGlobalToastListItem"
+    data-test-subj="b"
+    id="b"
+  >
+    <div
+      class="euiToastHeader euiToastHeader--withBody"
+    >
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiToastHeader__icon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          fill-rule="evenodd"
+        >
+          <path
+            d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
+          />
+          <path
+            d="M7 6h1v5H7zM7 12h1v1H7z"
+          />
+        </g>
+      </svg>
+      <span
+        class="euiToastHeader__title"
+      >
+        B
+      </span>
+    </div>
+    <button
+      aria-label="Dismiss toast"
+      class="euiToast__closeButton"
+      data-test-subj="toastCloseButton"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xlink="http://www.w3.org/1999/xlink"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <path
+            d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
+            id="cross-a"
+          />
+        </defs>
+        <use
+          fill-rule="nonzero"
+          href="#cross-a"
+        />
+      </svg>
+    </button>
+    <div
+      class="euiText euiText--small"
+    >
+      b
+    </div>
+  </div>
+</div>
+`;
--- a/src/ui/public/notify/toasts/global_toast_list.js
+++ b/src/ui/public/notify/toasts/global_toast_list.js
@ -5,37 +5,126 @@ import PropTypes from 'prop-types';

 import {
  EuiGlobalToastList,
+  EuiGlobalToastListItem,
+  EuiToast,
 } from '@elastic/eui';

+export const TOAST_FADE_OUT_MS = 250;
+
 export class GlobalToastList extends Component {
  constructor(props) {
    super(props);

+    this.state = {
+      toastIdToDismissedMap: {}
+    };
+
+    this.timeoutIds = [];
+    this.toastIdToScheduledForDismissalMap = {};
+
    if (this.props.subscribe) {
      this.props.subscribe(() => this.forceUpdate());
    }
  }

  static propTypes = {
-    subscribe: PropTypes.func,
    toasts: PropTypes.array,
+    subscribe: PropTypes.func,
    dismissToast: PropTypes.func.isRequired,
    toastLifeTimeMs: PropTypes.number.isRequired,
  };

+  static defaultProps = {
+    toasts: [],
+  };
+
+  scheduleAllToastsForDismissal = () => {
+    this.props.toasts.forEach(toast => {
+      if (!this.toastIdToScheduledForDismissalMap[toast.id]) {
+        this.scheduleToastForDismissal(toast);
+      }
+    });
+  };
+
+  scheduleToastForDismissal = (toast, isImmediate = false) => {
+    this.toastIdToScheduledForDismissalMap[toast.id] = true;
+    const toastLifeTimeMs = isImmediate ? 0 : this.props.toastLifeTimeMs;
+
+    // Start fading the toast out once its lifetime elapses.
+    this.timeoutIds.push(setTimeout(() => {
+      this.startDismissingToast(toast);
+    }, toastLifeTimeMs));
+
+    // Remove the toast after it's done fading out.
+    this.timeoutIds.push(setTimeout(() => {
+      this.props.dismissToast(toast);
+      this.setState(prevState => {
+        const toastIdToDismissedMap = { ...prevState.toastIdToDismissedMap };
+        delete toastIdToDismissedMap[toast.id];
+        delete this.toastIdToScheduledForDismissalMap[toast.id];
+
+        return {
+          toastIdToDismissedMap,
+        };
+      });
+    }, toastLifeTimeMs + TOAST_FADE_OUT_MS));
+  };
+
+  startDismissingToast(toast) {
+    this.setState(prevState => {
+      const toastIdToDismissedMap = {
+        ...prevState.toastIdToDismissedMap,
+        [toast.id]: true,
+      };
+
+      return {
+        toastIdToDismissedMap,
+      };
+    });
+  }
+
+  componentDidMount() {
+    this.scheduleAllToastsForDismissal();
+  }
+
+  componentWillUnmount() {
+    this.timeoutIds.forEach(clearTimeout);
+  }
+
+  componentDidUpdate() {
+    this.scheduleAllToastsForDismissal();
+  }
+
  render() {
    const {
      toasts,
-      dismissToast,
-      toastLifeTimeMs,
    } = this.props;

+    const renderedToasts = toasts.map(toast => {
+      const {
+        text,
+        ...rest
+      } = toast;
+
+      return (
+        <EuiGlobalToastListItem
+          key={toast.id}
+          isDismissed={this.state.toastIdToDismissedMap[toast.id]}
+        >
+          <EuiToast
+            onClose={this.scheduleToastForDismissal.bind(toast, true)}
+            {...rest}
+          >
+            {text}
+          </EuiToast>
+        </EuiGlobalToastListItem>
+      );
+    });
+
    return (
-      <EuiGlobalToastList
-        toasts={toasts}
-        dismissToast={dismissToast}
-        toastLifeTimeMs={toastLifeTimeMs}
-      />
+      <EuiGlobalToastList>
+        {renderedToasts}
+      </EuiGlobalToastList>
    );
  }
 }
--- a/src/ui/public/notify/toasts/global_toast_list.test.js
+++ b/src/ui/public/notify/toasts/global_toast_list.test.js
@ -0,0 +1,103 @@
+import React from 'react';
+import { render, mount } from 'enzyme';
+import sinon from 'sinon';
+import { findTestSubject } from '@elastic/eui/lib/test';
+
+import {
+  GlobalToastList,
+  TOAST_FADE_OUT_MS,
+} from './global_toast_list';
+
+describe('GlobalToastList', () => {
+  test('is rendered', () => {
+    const component = render(
+      <GlobalToastList
+        dismissToast={() => {}}
+        toastLifeTimeMs={5}
+      />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    describe('toasts', () => {
+      test('is rendered', () => {
+        const toasts = [{
+          title: 'A',
+          text: 'a',
+          color: 'success',
+          iconType: 'check',
+          'data-test-subj': 'a',
+          id: 'a',
+        }, {
+          title: 'B',
+          text: 'b',
+          color: 'danger',
+          iconType: 'alert',
+          'data-test-subj': 'b',
+          id: 'b',
+        }];
+
+        const component = render(
+          <GlobalToastList
+            toasts={toasts}
+            dismissToast={() => {}}
+            toastLifeTimeMs={5}
+          />
+        );
+
+        expect(component)
+          .toMatchSnapshot();
+      });
+    });
+
+    describe('dismissToast', () => {
+      test('is called when a toast is clicked', done => {
+        const dismissToastSpy = sinon.spy();
+        const component = mount(
+          <GlobalToastList
+            toasts={[{
+              'data-test-subj': 'b',
+              id: 'b',
+            }]}
+            dismissToast={dismissToastSpy}
+            toastLifeTimeMs={100}
+          />
+        );
+
+        const toastB = findTestSubject(component, 'b');
+        const closeButton = findTestSubject(toastB, 'toastCloseButton');
+        closeButton.simulate('click');
+
+        // The callback is invoked once the toast fades from view.
+        setTimeout(() => {
+          expect(dismissToastSpy.called).toBe(true);
+          done();
+        }, TOAST_FADE_OUT_MS + 1);
+      });
+
+      test('is called when the toast lifetime elapses', done => {
+        const TOAST_LIFE_TIME_MS = 5;
+        const dismissToastSpy = sinon.spy();
+        mount(
+          <GlobalToastList
+            toasts={[{
+              'data-test-subj': 'b',
+              id: 'b',
+            }]}
+            dismissToast={dismissToastSpy}
+            toastLifeTimeMs={TOAST_LIFE_TIME_MS}
+          />
+        );
+
+        // The callback is invoked once the toast fades from view.
+        setTimeout(() => {
+          expect(dismissToastSpy.called).toBe(true);
+          done();
+        }, TOAST_LIFE_TIME_MS + TOAST_FADE_OUT_MS);
+      });
+    });
+  });
+});
--- a/yarn.lock
+++ b/yarn.lock
@ -87,9 +87,9 @@
  version "0.0.0"
  uid ""

-"@elastic/eui@0.0.19":
-  version "0.0.19"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.19.tgz#f5e57151c20eb9ef0544155b09a1b9c5d8bfa6ef"
+"@elastic/eui@0.0.18":
+  version "0.0.18"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.18.tgz#eeae6e93ead3bd014f401f577f06af75fff60898"
  dependencies:
    brace "^0.10.0"
    classnames "^2.2.5"