@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/user-agreement/service.tsx

@@ -0,0 +1,340 @@
+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, {UserAgreementAttrs, UserAgreementTranslations} from './user-agreement';
+
+const GUEST_SESSION_KEY = 'end-user-agreement-consent';
+const ONE_HOUR = 60 * 60 * 1000; // eslint-disable-line @typescript-eslint/no-magic-numbers
+
+const storageKey = 'userAgreementKey';
+export const showMessage = 'userAgreementShow';
+export const hideMessage = 'userAgreementHide';
+
+export interface Consent {
+  accepted?: boolean | null | undefined
+  majorVersion?: number | null | undefined
+  minorVersion?: number | null | undefined
+}
+const DEFAULT_CONSENT: Consent = {
+  accepted: false,
+  majorVersion: 0,
+  minorVersion: 0
+};
+
+export interface ConsentResponse {
+  guest?: boolean | null | undefined
+  endUserAgreementConsent?: Consent | null | undefined
+}
+
+export interface Agreement {
+  text: string
+  enabled?: boolean | null | undefined
+  majorVersion?: number | null | undefined
+  minorVersion?: number | null | undefined
+  requiredForREST?: boolean | null | undefined
+}
+const DEFAULT_AGREEMENT: Agreement = {
+  enabled: false,
+  majorVersion: 0,
+  minorVersion: 0,
+  requiredForREST: false,
+  text: ''
+};
+
+export interface UserAgreementServiceTranslations extends UserAgreementTranslations {
+  reviewNow: string
+}
+
+export interface UserAgreementServiceConfig {
+  getUserAgreement: () => Promise<Agreement | null | undefined> | Agreement | null | undefined
+  getUserConsent: () => Promise<ConsentResponse> | ConsentResponse
+  setUserConsent: () => Promise<Consent> | Consent
+  interval?: number | null | undefined
+  translations?: UserAgreementServiceTranslations | undefined
+  onDialogShow?: (() => void) | null | undefined
+  onDialogHide?: (() => void) | null | undefined
+  onRemindLater?: (() => void) | null | undefined
+  onAccept?: (() => void) | null | undefined
+  onDecline?: (() => void) | null | undefined
+}
+export default class UserAgreementService {
+  config: UserAgreementServiceConfig;
+  constructor(config: UserAgreementServiceConfig) {
+    if (!config) {
+      throw new Error('Please pass a config to UserAgreementService');
+    }
+
+    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;
+  }
+
+  private _dialogPromise: Promise<unknown> | null = null;
+  private _alertPromise: Promise<unknown> | null = null;
+  tabId = Math.random();
+  interval = ONE_HOUR;
+  container = document.createElement('div');
+  storage = new Storage();
+  checkingPromise: Promise<[Agreement, Consent]> | null = null;
+  guest: boolean | null | undefined = false;
+
+  userAgreement = DEFAULT_AGREEMENT;
+  userConsent = DEFAULT_CONSENT;
+
+  intervalId?: number;
+  startChecking = () => {
+    this.intervalId = window.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: StorageEvent) => {
+    if (event.key === storageKey && event.newValue != null) {
+      const {tabId, command} = JSON.parse(event.newValue);
+
+      if (tabId !== this.tabId) {
+        if (command === showMessage) {
+          this.checkConsentAndShowDialog(true);
+        } else if (command === hideMessage) {
+          this.hideDialogAndAlert(true);
+        }
+      }
+    }
+  };
+
+  private _notifyAboutShowing = () => {
+    localStorage.setItem(storageKey, JSON.stringify({command: showMessage, tabId: this.tabId}));
+  };
+
+  private _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?: boolean) => {
+    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);
+  };
+
+  alertKey?: string | number | null;
+  showAlert = (withoutNotifications?: boolean) => {
+    if (this._alertPromise) {
+      return this._alertPromise;
+    }
+    this._alertPromise = new Promise<void>((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?: boolean) => {
+    const {onRemindLater} = this.config;
+
+    alertService.remove(this.alertKey);
+    this.alertKey = null;
+    this._alertPromise = null;
+
+    if (onRemindLater) {
+      onRemindLater();
+    }
+
+    if (!withoutNotifications) {
+      this._notifyAboutHiding();
+    }
+  };
+
+  showDialog = (
+    withoutNotifications?: boolean,
+    preview = false,
+    restOptions?: Partial<UserAgreementAttrs>
+  ) => {
+    const {translations, onDialogShow} = this.config;
+    const {text} = this.userAgreement;
+    const show = true;
+
+    if (!this._dialogPromise) {
+      this._dialogPromise = new Promise<void>((resolve, reject) => {
+        const onAccept = async () => {
+          await this.onAccept();
+          resolve();
+        };
+
+        const onDecline = async () => {
+          await this.onDecline();
+          reject();
+        };
+
+        const onClose = this.hideDialogAndAlert;
+
+        const props: UserAgreementAttrs = {
+          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?: boolean) => {
+    const {onDialogHide} = this.config;
+
+    unmountComponentAtNode(this.container);
+
+    if (onDialogHide) {
+      onDialogHide();
+      this._dialogPromise = null;
+
+      if (!withoutNotifications) {
+        this._notifyAboutHiding();
+      }
+    }
+  };
+
+  showDialogOrAlert = (
+    withoutNotifications?: boolean,
+    preview?: boolean,
+    restOptions?: Partial<UserAgreementAttrs>
+  ) => {
+    if (this.guest && !this.userAgreement.requiredForREST) {
+      return this.showAlert(withoutNotifications);
+    }
+    return this.showDialog(withoutNotifications, preview, restOptions);
+  };
+
+  hideDialogAndAlert = (withoutNotifications?: boolean) => {
+    this.hideAlert(withoutNotifications);
+    this.hideDialog(withoutNotifications);
+  };
+
+  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.tsx

@@ -0,0 +1,130 @@
+import React, {Component} from 'react';
+
+import {Story} from '@storybook/react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import alert from '../alert-service/alert-service';
+
+import UserAgreement, {UserAgreementAttrs} from './user-agreement';
+import UserAgreementService, {Agreement, Consent, ConsentResponse} from './service';
+import text from './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: Story<UserAgreementAttrs> = 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() {}
+interface ServiceArgs {
+  onGetUserAgreement?: ((agreement: Agreement) => void) | undefined
+  onGetUserConsent?: ((response: ConsentResponse) => void) | undefined
+  onSetUserConsent?: ((consent: Consent) => void) | undefined
+  onAccept?: (() => void) | null | undefined
+  onDecline?: (() => void) | null | undefined
+  onDialogShow?: (() => void) | null | undefined
+  onDialogHide?: (() => void) | null | undefined
+}
+export const service: Story<ServiceArgs> = ({
+  onGetUserAgreement = noop,
+  onGetUserConsent = noop,
+  onSetUserConsent = noop,
+  onAccept,
+  onDecline,
+  onDialogShow,
+  onDialogHide
+}) => {
+  const fakeUserAgreement: Agreement = {
+    enabled: true,
+    majorVersion: 1.0,
+    text
+  };
+
+  const fakeUserConsent: Consent = {
+    accepted: false
+  };
+
+  const fakeUserConsentResponse: ConsentResponse = {
+    guest: true,
+    endUserAgreementConsent: fakeUserConsent
+  };
+
+  const agreementService = new UserAgreementService({
+    getUserAgreement: () => {
+      onGetUserAgreement(fakeUserAgreement);
+      return fakeUserAgreement;
+    },
+    getUserConsent: () => {
+      onGetUserConsent(fakeUserConsentResponse);
+      return fakeUserConsentResponse;
+    },
+    setUserConsent: () => {
+      onSetUserConsent(fakeUserConsent);
+      return fakeUserConsent;
+    },
+    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.tsx

@@ -0,0 +1,146 @@
+/**
+ * @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() {}
+
+export interface UserAgreementTranslations {
+  userAgreement: string
+  accept: string
+  decline: string
+  close: string
+  scrollToAccept: string
+  remindLater: string
+}
+
+export interface UserAgreementProps {
+  text: string
+  translations: UserAgreementTranslations
+  show: boolean
+  onAccept: () => void
+  onDecline: () => void
+  onClose: () => void
+  preview?: boolean | null | undefined
+  onRemindLater?: (() => void) | null | undefined
+  className?: string | null | undefined
+}
+/**
+ * A component that displays a user agreement dialog.
+ */
+export default class UserAgreement extends PureComponent<UserAgreementProps> {
+  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}/>
+        </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>
+    );
+  }
+}
+export type UserAgreementAttrs =
+  JSX.LibraryManagedAttributes<typeof UserAgreement, UserAgreementProps>