@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/components/tooltip/tooltip.test.js

@@ -1,128 +0,0 @@
-import React from 'react';
-import {
-  isCompositeComponentWithType
-} from 'react-dom/test-utils';
-import {mount, render} from 'enzyme';
-
-import Popup from '../popup/popup';
-
-import Tooltip from './tooltip';
-
-describe('Tooltip', () => {
-  const defaultProps = {
-    title: 'test tooltip',
-    className: 'test-class',
-    children: 'test elem'
-  };
-  const mountTooltip = props => mount(<Tooltip {...defaultProps} {...props}/>);
-  const renderTooltip = props => render(<Tooltip {...defaultProps} {...props}/>);
-
-  it('should create component', () => {
-    mountTooltip().should.have.type(Tooltip);
-  });
-
-  describe('Children', () => {
-    it('should wrap text children', () => {
-      const wrapper = renderTooltip();
-      wrapper.should.have.text('test elem');
-      wrapper.should.have.tagName('span');
-    });
-
-    it('should wrap children', () => {
-      const wrapper = renderTooltip({
-        title: 'test tooltip',
-        children: <span>{'test span'}</span>
-      });
-
-      wrapper.should.have.tagName('span');
-      wrapper.children().first().should.have.text('test span');
-      wrapper.children().first().should.have.tagName('span');
-    });
-
-    it('should pass props to children', () => {
-      mountTooltip().should.have.className('test-class');
-    });
-
-    it('should not pass title to children', () => {
-      const wrapper = mountTooltip();
-      wrapper.children().first().should.not.have.prop('title');
-    });
-  });
-
-  describe('Popup', () => {
-    it('should unbind listeners when empty title is provided', () => {
-      const wrapper = mountTooltip();
-      const bindEvents = sandbox.spy(wrapper.getDOMNode(), 'removeEventListener');
-
-      wrapper.setProps({
-        title: ''
-      });
-
-      bindEvents.should.have.been.calledTwice;
-    });
-
-    it('should render popup', () => {
-      const wrapper = mountTooltip();
-      const instance = wrapper.instance();
-      instance.tryToShowPopup();
-
-      isCompositeComponentWithType(instance.popup, Popup).should.be.true;
-    });
-
-    it('should not render popup when empty title is provided', () => {
-      const wrapper = mountTooltip({
-        title: ''
-      });
-      const instance = wrapper.instance();
-
-      instance.tryToShowPopup();
-      instance.popup.isVisible().should.be.false;
-    });
-
-    it('should render with delay when provided', () => {
-      const clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
-      const wrapper = mountTooltip({
-        delay: 100
-      });
-      const instance = wrapper.instance();
-
-      instance.tryToShowPopup();
-
-      instance.popup.isVisible().should.be.false;
-
-      // eslint-disable-next-line no-magic-numbers
-      clock.tick(200);
-      instance.popup.isVisible().should.be.true;
-    });
-
-    it('should pass custom props to popup', () => {
-      const wrapper = mountTooltip({
-        popupProps: {
-          className: 'tooltip-test-popup'
-        }
-      });
-      const instance = wrapper.instance();
-
-      instance.tryToShowPopup();
-      instance.popup.popup.should.have.class('tooltip-test-popup');
-    });
-
-    it('should close popup on unmount', () => {
-      const wrapper = mountTooltip();
-      const instance = wrapper.instance();
-      instance.tryToShowPopup();
-      wrapper.unmount();
-
-      should.not.exist(instance.popup);
-    });
-
-    it('should not close popup on click on tooltip', () => {
-      const wrapper = mountTooltip();
-      const instance = wrapper.instance();
-      instance.tryToShowPopup();
-      wrapper.simulate('click');
-
-      instance.popup.isVisible().should.be.true;
-    });
-  });
-});

package/components/user-agreement/service.js

@@ -1,292 +0,0 @@
-import React from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
-
-import Storage from '../storage/storage';
-import alertService from '../alert-service/alert-service';
-import Link from '../link/link';
-import Alert from '../alert/alert';
-import Group from '../group/group';
-
-import UserAgreement from './user-agreement';
-
-const GUEST_SESSION_KEY = 'end-user-agreement-consent';
-const ONE_HOUR = 60 * 60 * 1000; // eslint-disable-line no-magic-numbers
-
-const storageKey = 'userAgreementKey';
-export const showMessage = 'userAgreementShow';
-export const hideMessage = 'userAgreementHide';
-
-const DEFAULT_CONSENT = {
-  accepted: false,
-  majorVersion: 0,
-  minorVersion: 0
-};
-
-const DEFAULT_AGREEMENT = {
-  enabled: false,
-  majorVersion: 0,
-  minorVersion: 0,
-  requiredForREST: false,
-  text: ''
-};
-
-export default class UserAgreementService {
-  constructor(config = {}) {
-    if (!config.getUserAgreement) {
-      throw new Error('Please pass a "getUserAgreement" option to UserAgreementService');
-    }
-
-    if (!config.getUserConsent) {
-      throw new Error('Please pass a "getUserConsent" option to UserAgreementService');
-    }
-
-    if (!config.setUserConsent) {
-      throw new Error('Please pass a "setUserConsent" option to UserAgreementService');
-    }
-
-    this.config = config;
-    this.interval = config.interval || this.interval;
-  }
-
-  _dialogPromise = null;
-  _alertPromise = null;
-  tabId = Math.random();
-  interval = ONE_HOUR;
-  container = document.createElement('div');
-  storage = new Storage();
-  checkingPromise = null;
-  guest = false;
-
-  userAgreement = DEFAULT_AGREEMENT;
-  userConsent = DEFAULT_CONSENT;
-
-  startChecking = () => {
-    this.intervalId = setInterval(this.checkConsentAndShowDialog, this.interval);
-    window.addEventListener('storage', this.onStorageEvent);
-    this.checkConsentAndShowDialog();
-  };
-
-  stopChecking = () => {
-    clearInterval(this.intervalId);
-    window.removeEventListener('storage', this.onStorageEvent);
-    this.hideDialog();
-  };
-
-  onStorageEvent = event => {
-    if (event.key === storageKey) {
-      const {tabId, command} = JSON.parse(event.newValue);
-
-      if (tabId !== this.tabId) {
-        if (command === showMessage) {
-          this.checkConsentAndShowDialog(true);
-        } else if (command === hideMessage) {
-          this.hideDialogAndAlert(true);
-        }
-      }
-    }
-  };
-
-  _notifyAboutShowing = () => {
-    localStorage.setItem(storageKey, JSON.stringify({command: showMessage, tabId: this.tabId}));
-  };
-
-  _notifyAboutHiding = () => {
-    localStorage.setItem(storageKey, JSON.stringify({command: hideMessage, tabId: this.tabId}));
-  };
-
-  getUserAgreement = async () => {
-    this.userAgreement = await this.config.getUserAgreement() || DEFAULT_AGREEMENT;
-    return this.userAgreement;
-  };
-
-  getUserConsent = async () => {
-    const {guest, endUserAgreementConsent} = await this.config.getUserConsent();
-
-    this.guest = guest;
-
-    if (guest) {
-      this.userConsent = await this.storage.get(GUEST_SESSION_KEY) || this.userConsent;
-    } else {
-      this.userConsent = endUserAgreementConsent || this.userConsent;
-    }
-
-    return this.userConsent;
-  };
-
-  checkConsentAndShowDialog = async withoutNotifications => {
-    if (await this.checkConsent()) {
-      return this.hideDialogAndAlert(withoutNotifications);
-    } else {
-      return this.showDialogOrAlert(withoutNotifications);
-    }
-  };
-
-  checkConsent = async () => {
-    if (!this.checkingPromise) {
-      this.checkingPromise = Promise.all([
-        this.getUserAgreement(),
-        this.getUserConsent()
-      ]);
-    }
-
-    const [userAgreement, userConsent] = await this.checkingPromise;
-    this.checkingPromise = null;
-
-    const {enabled, majorVersion: actualVersion} = userAgreement;
-    const {accepted, majorVersion: acceptedVersion} = userConsent;
-
-    return !enabled || (accepted && actualVersion === acceptedVersion);
-  };
-
-  showAlert = withoutNotifications => {
-    if (this._alertPromise) {
-      return this._alertPromise;
-    }
-    this._alertPromise = new Promise((resolve, reject) => {
-      const {userAgreement, reviewNow, remindLater} = (this.config.translations || {});
-      const onRemind = () => {
-        this.hideDialogAndAlert(withoutNotifications);
-        reject('Postponed');
-      };
-
-      const onReview = async () => {
-        await this.showDialog(true, false, {onRemindLater: onRemind});
-        this.hideAlert(withoutNotifications);
-        resolve();
-      };
-
-      const message = (
-        <Group>
-          <span>{userAgreement || 'User Agreement'}</span>
-          <Link onClick={onReview} data-test="review">{reviewNow || 'Review now'}</Link>
-          <Link onClick={onRemind} data-test="later">{remindLater || 'Remind me later'}</Link>
-        </Group>
-      );
-      this.alertKey = alertService.addAlert(message, Alert.Type.WARNING, 0, {closeable: false});
-    });
-
-    if (!withoutNotifications) {
-      this._notifyAboutShowing();
-    }
-
-    return this._alertPromise;
-  };
-
-  hideAlert = withoutNotifications => {
-    const {onRemindLater} = this.config;
-
-    alertService.remove(this.alertKey);
-    this.alertKey = null;
-    this._alertPromise = null;
-
-    if (onRemindLater) {
-      onRemindLater();
-    }
-
-    if (!withoutNotifications) {
-      this._notifyAboutHiding();
-    }
-  };
-
-  showDialog = (withoutNotifications, preview = false, restOptions) => {
-    const {translations, onDialogShow} = this.config;
-    const {text} = this.userAgreement;
-    const show = true;
-
-    if (!this._dialogPromise) {
-      this._dialogPromise = new Promise((resolve, reject) => {
-        const onAccept = async () => {
-          await this.onAccept();
-          resolve();
-        };
-
-        const onDecline = async () => {
-          await this.onDecline();
-          reject();
-        };
-
-        const onClose = this.hideDialogAndAlert;
-
-        const props = {
-          text,
-          show,
-          onAccept,
-          onDecline,
-          onClose,
-          translations,
-          preview, ...restOptions
-        };
-
-        render(
-          <UserAgreement {...props}/>,
-          this.container
-        );
-
-        if (onDialogShow) {
-          onDialogShow();
-        }
-      });
-
-      if (!withoutNotifications) {
-        this._notifyAboutShowing();
-      }
-    }
-
-    return this._dialogPromise;
-  };
-
-  hideDialog = withoutNotifications => {
-    const {onDialogHide} = this.config;
-
-    unmountComponentAtNode(this.container);
-
-    if (onDialogHide) {
-      onDialogHide();
-      this._dialogPromise = null;
-
-      if (!withoutNotifications) {
-        this._notifyAboutHiding();
-      }
-    }
-  };
-
-  showDialogOrAlert = (...args) => {
-    if (this.guest && !this.userAgreement.requiredForREST) {
-      return this.showAlert(...args);
-    }
-    return this.showDialog(...args);
-  };
-
-  hideDialogAndAlert = (...args) => {
-    this.hideAlert(...args);
-    this.hideDialog(...args);
-  };
-
-  onAccept = async () => {
-    const {setUserConsent, onAccept} = this.config;
-
-    if (this.guest) {
-      const {majorVersion, minorVersion} = this.userAgreement;
-      this.userConsent = {majorVersion, minorVersion, accepted: true};
-      await this.storage.set(GUEST_SESSION_KEY, this.userConsent);
-    } else {
-      this.userConsent = await setUserConsent();
-    }
-
-    this.hideDialog();
-
-    if (onAccept) {
-      onAccept();
-    }
-  };
-
-  onDecline = () => {
-    const {onDecline} = this.config;
-
-    this.hideDialog();
-
-    if (onDecline) {
-      onDecline();
-    }
-  };
-}

package/components/user-agreement/user-agreement.examples.js

@@ -1,112 +0,0 @@
-import React, {Component} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import alert from '@jetbrains/ring-ui/components/alert-service/alert-service';
-
-import UserAgreement from '@jetbrains/ring-ui/components/user-agreement/user-agreement';
-import UserAgreementService from '@jetbrains/ring-ui/components/user-agreement/service';
-import text from '@jetbrains/ring-ui/components/user-agreement/toolbox.eula';
-
-export default {
-  title: 'Components/User Agreement',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    component: UserAgreement,
-    framework: 'react',
-    hermione: {captureSelector: '*[data-test~=ring-dialog]'},
-    a11y: {element: '*[data-test~=ring-dialog]'}
-  }
-};
-
-export const dialog = args => (
-  <div>
-    <UserAgreement {...args}/>
-  </div>
-);
-
-dialog.args = {
-  show: true,
-  text,
-  onRemindLater: null
-};
-dialog.argTypes = {
-  onRemindLater: {}
-};
-dialog.parameters = {
-  actions: {argTypesRegex: '^on(?!RemindLater).*'}
-};
-dialog.storyName = 'dialog';
-
-function noop() {}
-export const service = ({
-  onGetUserAgreement = noop,
-  onGetUserConsent = noop,
-  onSetUserConsent = noop,
-  onAccept,
-  onDecline,
-  onDialogShow,
-  onDialogHide
-}) => {
-  const fakeUserAgreement = {
-    enabled: true,
-    majorVersion: 1.0,
-    text
-  };
-
-  const fakeUserConsent = {
-    guest: true,
-    accepted: false
-  };
-
-  const agreementService = new UserAgreementService({
-    getUserAgreement: () => {
-      onGetUserAgreement(fakeUserAgreement);
-      return fakeUserAgreement;
-    },
-    getUserConsent: () => {
-      onGetUserConsent(fakeUserConsent);
-      return fakeUserConsent;
-    },
-    setUserConsent: onSetUserConsent,
-    onAccept,
-    onDecline,
-    onDialogShow,
-    onDialogHide,
-    interval: 10000
-  });
-
-  class UserAgreementServiceDemo extends Component {
-    componentDidMount() {
-      agreementService.startChecking();
-    }
-
-    componentWillUnmount() {
-      agreementService.stopChecking();
-      alert._getShowingAlerts().forEach(item => alert.removeWithoutAnimation(item.key));
-    }
-
-    render() {
-      return null;
-    }
-  }
-
-  return <UserAgreementServiceDemo/>;
-};
-
-service.argTypes = {
-  onGetUserAgreement: {},
-  onGetUserConsent: {},
-  onSetUserConsent: {},
-  onAccept: {},
-  onDecline: {},
-  onDialogShow: {},
-  onDialogHide: {}
-};
-service.storyName = 'service';
-service.parameters = {
-  component: null,
-  hermione: {skip: true},
-  a11y: {element: '*[data-test="alert-container"]'}
-};

package/components/user-agreement/user-agreement.js

@@ -1,124 +0,0 @@
-/**
- * @name User Agreement
- */
-
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import Dialog from '../dialog/dialog';
-import {Content, Header} from '../island/island';
-import Panel from '../panel/panel';
-import Button from '../button/button';
-import Markdown from '../markdown/markdown';
-
-import style from './user-agreement.css';
-
-function noop() {}
-
-/**
- * A component that displays a user agreement dialog.
- */
-export default class UserAgreement extends PureComponent {
-  static propTypes = {
-    show: PropTypes.bool,
-    preview: PropTypes.bool,
-    text: PropTypes.string.isRequired,
-    onAccept: PropTypes.func,
-    onDecline: PropTypes.func,
-    onClose: PropTypes.func,
-    onRemindLater: PropTypes.func,
-    translations: PropTypes.shape({
-      userAgreement: PropTypes.string.isRequired,
-      accept: PropTypes.string.isRequired,
-      decline: PropTypes.string.isRequired,
-      close: PropTypes.string.isRequired,
-      scrollToAccept: PropTypes.string.isRequired,
-      remindLater: PropTypes.string.isRequired
-    }),
-    className: PropTypes.string
-  };
-
-  static defaultProps = {
-    translations: {
-      userAgreement: 'User Agreement',
-      accept: 'Accept',
-      decline: 'Decline',
-      close: 'Close',
-      scrollToAccept: 'View the entire agreement to continue',
-      remindLater: 'Remind me later'
-    },
-    show: false,
-    onAccept: noop,
-    onDecline: noop,
-    onClose: noop
-  };
-
-  state = {
-    scrolledDown: false
-  };
-
-  onScrollToBottom = () => this.setState({scrolledDown: true});
-
-  render() {
-    const {scrolledDown} = this.state;
-    const {
-      translations,
-      onAccept,
-      onDecline,
-      onClose,
-      onRemindLater,
-      text,
-      show,
-      preview,
-      className
-    } = this.props;
-
-    return (
-      <Dialog
-        label={translations.userAgreement}
-        show={show}
-        className={classNames(style.agreementDialog, className)}
-        contentClassName={style.dialogContent}
-        trapFocus
-        autoFocusFirst={false}
-        data-test="user-agreement"
-      >
-        <Header>{translations.userAgreement}</Header>
-        <Content
-          fade
-          onScrollToBottom={this.onScrollToBottom}
-        >
-          <Markdown source={text} tabindex={-1}/>
-        </Content>
-        {!preview && (
-          <Panel>
-            {onRemindLater && !scrolledDown && (
-              <div className={style.suggestion}>{translations.scrollToAccept}</div>
-            )}
-            <Button primary disabled={!scrolledDown} onClick={onAccept} data-test="accept">
-              {translations.accept}
-            </Button>
-            <Button onClick={onDecline} autoFocus data-test="decline">
-              {translations.decline}
-            </Button>
-
-            {!onRemindLater && !scrolledDown && (
-              <span className={style.suggestion}>{translations.scrollToAccept}</span>
-            )}
-            {onRemindLater && (
-              <Button className={style.remindLaterButton} onClick={onRemindLater} data-test="later">
-                {translations.remindLater}
-              </Button>
-            )}
-          </Panel>
-        )}
-        {preview && (
-          <Panel>
-            <Button onClick={onClose} autoFocus data-test="close">{translations.close}</Button>
-          </Panel>
-        )}
-      </Dialog>
-    );
-  }
-}