@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

package/components/auth/token-validator.test.js

@@ -1,199 +0,0 @@
-/* eslint-disable no-magic-numbers */
-import HTTP from '../http/http';
-
-import Auth from './auth';
-import AuthStorage from './storage';
-import TokenValidator from './token-validator';
-
-import MockedStorage from 'imports-loader?imports=default|storage-mock|window!../storage/storage__local';
-
-describe('Auth', () => {
-  describe('TokenValidator', () => {
-    const storage = new AuthStorage({
-      storage: MockedStorage
-    });
-    const http = new HTTP();
-    const getUser = token => http.authorizedFetch(Auth.API_PROFILE_PATH, token);
-    const tokenValidator = new TokenValidator({
-      scope: ['0-0-0-0-0', 'youtrack'],
-      optionalScopes: ['youtrack']
-    }, getUser, storage);
-    const lifeTime = 60 * 60;
-    const expires = TokenValidator._epoch() + lifeTime;
-
-    describe('getValidatedToken', () => {
-      beforeEach(function beforeEach() {
-        sandbox.stub(AuthStorage.prototype, 'getToken');
-      });
-
-      it('should resolve access token when it is valid', () => {
-
-        AuthStorage.prototype.getToken.returns(Promise.resolve({
-          accessToken: 'token',
-          expires,
-          lifeTime,
-          scopes: ['0-0-0-0-0', 'youtrack']
-        }));
-
-        return tokenValidator.validateTokenLocally().
-          should.eventually.be.equal('token');
-      });
-
-      it('should resolve access token when token is given for all required scopes', () => {
-        AuthStorage.prototype.getToken.returns(Promise.resolve({
-          accessToken: 'token',
-          expires,
-          lifeTime,
-          scopes: ['0-0-0-0-0']
-        }));
-
-        return tokenValidator.validateTokenLocally().
-          should.eventually.be.equal('token');
-      });
-
-      it('should reject if accessToken is empty', () => {
-        AuthStorage.prototype.getToken.returns(Promise.resolve({
-          accessToken: null,
-          expires,
-          lifeTime,
-          scopes: ['0-0-0-0-0']
-        }));
-
-        return tokenValidator.validateTokenLocally().
-          should.be.rejectedWith(TokenValidator.TokenValidationError, 'Token not found');
-      });
-
-      it('should reject if there is no token stored', () => {
-        AuthStorage.prototype.getToken.returns(Promise.resolve(null));
-        return tokenValidator.validateTokenLocally().
-          should.be.rejectedWith(TokenValidator.TokenValidationError, 'Token not found');
-      });
-
-      it('should reject if token is about to be expired (<1/6 lifeTime left)', () => {
-        AuthStorage.prototype.getToken.returns(Promise.resolve({
-          accessToken: 'token',
-          expires: TokenValidator._epoch() + (lifeTime / 6) - 1,
-          lifeTime,
-          scopes: ['0-0-0-0-0']
-        }));
-        return tokenValidator.validateTokenLocally().
-          should.be.rejectedWith(TokenValidator.TokenValidationError, 'Token expired');
-      });
-
-      it('should reject if short-life token is about to be expired (<1/6 lifeTime left)', () => {
-        const minimalLifeTime = 60 * 5;
-        AuthStorage.prototype.getToken.returns(Promise.resolve({
-          accessToken: 'token',
-          expires: TokenValidator._epoch() + (minimalLifeTime / 6) - 1,
-          lifeTime: minimalLifeTime,
-          scopes: ['0-0-0-0-0']
-        }));
-        return tokenValidator.validateTokenLocally().
-          should.be.rejectedWith(TokenValidator.TokenValidationError, 'Token expired');
-      });
-
-      it('should reject if token is about to be expired but lifeTime is not set and default time used', () => {
-        AuthStorage.prototype.getToken.returns(Promise.resolve({
-          accessToken: 'token',
-          expires: TokenValidator._epoch() + 5 * 60,
-          scopes: ['0-0-0-0-0']
-        }));
-        return tokenValidator.validateTokenLocally().
-          should.be.rejectedWith(TokenValidator.TokenValidationError, 'Token expired');
-      });
-
-      it('should reject if token scopes don\'t match required scopes', () => {
-        AuthStorage.prototype.getToken.returns(Promise.resolve({
-          accessToken: 'token',
-          expires,
-          lifeTime,
-          scopes: ['youtrack']
-        }));
-
-        return tokenValidator.validateTokenLocally().
-          should.
-          be.
-          rejectedWith(TokenValidator.TokenValidationError, 'Token doesn\'t match required scopes');
-      });
-    });
-
-    describe('validateAgainstUser', () => {
-      beforeEach(function beforeEach() {
-        sandbox.stub(HTTP.prototype, 'authorizedFetch');
-      });
-
-      it('should resolve to access token when user is returned', async () => {
-        const token = {accessToken: 'token'};
-        HTTP.prototype.authorizedFetch.returns(Promise.resolve({login: 'user'}));
-        const promise = tokenValidator._validateAgainstUser(token);
-        promise.should.be.fulfilled;
-        await promise;
-        HTTP.prototype.authorizedFetch.should.have.been.calledWith(Auth.API_PROFILE_PATH, 'token');
-      });
-
-      it('should reject with redirect if 401 response received', () => {
-        const token = {accessToken: 'token'};
-        HTTP.prototype.authorizedFetch.returns(Promise.reject({
-          status: 401,
-          response: {
-            json() {
-              return Promise.resolve({error: 'Problem'});
-            }
-          }
-        }));
-        return tokenValidator._validateAgainstUser(token).
-          should.be.rejectedWith(TokenValidator.TokenValidationError, 'Problem');
-      });
-
-      it('should reject with redirect if invalid_grant response received', () => {
-        const token = {accessToken: 'token'};
-        HTTP.prototype.authorizedFetch.returns(Promise.reject({
-          response: {
-            json() {
-              return Promise.resolve({error: 'invalid_grant'});
-            }
-          }
-        }));
-        return tokenValidator._validateAgainstUser(token).
-          should.be.rejectedWith(TokenValidator.TokenValidationError, 'invalid_grant');
-      });
-
-      it('should reject with redirect if invalid_request response received', () => {
-        const token = {accessToken: 'token'};
-        HTTP.prototype.authorizedFetch.returns(Promise.reject({
-          response: {
-            json() {
-              return Promise.resolve({error: 'invalid_request'});
-            }
-          }
-        }));
-        return tokenValidator._validateAgainstUser(token).
-          should.be.rejectedWith(TokenValidator.TokenValidationError, 'invalid_request');
-      });
-
-      it('should reject with redirect if 401 response without json received', () => {
-        const token = {accessToken: 'token'};
-        HTTP.prototype.authorizedFetch.returns(Promise.reject({
-          status: 401,
-          message: '403 Forbidden',
-          response: {
-            json() {
-              return Promise.reject();
-            }
-          }
-        }));
-        return tokenValidator._validateAgainstUser(token).
-          should.be.rejectedWith(TokenValidator.TokenValidationError, '403 Forbidden');
-      });
-    });
-
-
-    describe('TokenValidationError', () => {
-      it('should be cool', () => {
-        (() => {
-          throw new TokenValidator.TokenValidationError('message');
-        }).should.throw(TokenValidator.TokenValidationError, 'message');
-      });
-    });
-  });
-});

package/components/auth-dialog/auth-dialog.examples.js

@@ -1,76 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-
-import AuthDialog from '@jetbrains/ring-ui/components/auth-dialog/auth-dialog';
-
-import youtrackLogo from '!file-loader!@jetbrains/logos/youtrack/youtrack.svg';
-
-
-export default {
-  title: 'Components/Auth Dialog',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'A component that shows an authentication dialog.',
-    hermione: {captureSelector: '*[data-test~=ring-dialog]'},
-    a11y: {element: '*[data-test~=ring-dialog]'}
-  }
-};
-
-export const authDialog = ({onConfirm, onCancel}) => {
-  class AuthDialogDemo extends React.Component {
-    state = {
-      confirm: {
-        show: true,
-        onConfirm: () => {},
-        onReject: () => {}
-      }
-    };
-
-    componentDidMount() {
-      this.showAuthDialog();
-    }
-
-    hideAuthDialog = () => {
-      this.setState({confirm: {show: false}});
-    };
-
-    showAuthDialog = () =>
-      new Promise((resolve, reject) => {
-        this.setState({
-          confirm: {
-            show: true,
-            errorMessage: 'Authorization is required',
-            serviceName: 'YouTrack',
-            onConfirm: () => this.hideAuthDialog() || resolve(),
-            onCancel: () => this.hideAuthDialog() || reject()
-          }
-        });
-      }).
-        then(onConfirm).
-        catch(onCancel);
-
-    render() {
-      return (
-        <div>
-          <div>
-            <Button onClick={this.showAuthDialog}>Show dialog</Button>
-          </div>
-          <AuthDialog
-            {...this.state.confirm}
-            serviceImage={youtrackLogo}
-            confirmLabel="Log in"
-            cancelLabel="Stay a guest"
-          />
-        </div>
-      );
-    }
-  }
-
-  return <AuthDialogDemo/>;
-};
-
-authDialog.argTypes = {onConfirm: {}, onCancel: {}};

package/components/auth-dialog/auth-dialog.js

@@ -1,115 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import {Content} from '../island/island';
-import Dialog from '../dialog/dialog';
-import Button from '../button/button';
-
-import {H2} from '../heading/heading';
-
-import styles from './auth-dialog.css';
-
-/**
- * @name Auth Dialog
- */
-
-export default class AuthDialog extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    title: PropTypes.string,
-    errorMessage: PropTypes.string,
-    serviceImage: PropTypes.string,
-    serviceName: PropTypes.string,
-    loginCaption: PropTypes.string,
-    loginToCaption: PropTypes.string,
-
-    show: PropTypes.bool,
-    cancelOnEsc: PropTypes.bool,
-    confirmLabel: PropTypes.string,
-    cancelLabel: PropTypes.string,
-
-    onConfirm: PropTypes.func,
-    onCancel: PropTypes.func
-  };
-
-  static defaultProps = {
-    loginCaption: 'Log in',
-    loginToCaption: 'Log in to %serviceName%',
-    show: false,
-    cancelOnEsc: true,
-    confirmLabel: 'Log in',
-    cancelLabel: 'Remain a guest',
-    onConfirm: () => {},
-    onCancel: () => {}
-  };
-
-  onEscPress = () => {
-    if (this.props.cancelOnEsc) {
-      this.props.onCancel();
-    }
-  };
-
-  render() {
-    const {
-      show,
-      className,
-      errorMessage,
-      serviceImage,
-      serviceName,
-      loginCaption,
-      loginToCaption,
-      confirmLabel,
-      cancelLabel,
-      onConfirm,
-      onCancel
-    } = this.props;
-
-    const defaultTitle = serviceName ? loginToCaption : loginCaption;
-    const title = (this.props.title || defaultTitle).replace('%serviceName%', serviceName);
-
-    return (
-      <Dialog
-        label={title}
-        data-test="ring-auth-dialog"
-        className={className}
-        contentClassName={classNames(className, styles.dialog)}
-        onEscPress={this.onEscPress}
-        show={show}
-        trapFocus
-      >
-        <Content>
-          <div className={styles.content}>
-            {serviceImage && (
-              <img
-                alt={`${serviceName} logo`}
-                className={styles.logo}
-                src={serviceImage}
-              />
-            )}
-            <H2 className={styles.title}>{title}</H2>
-            {errorMessage && (
-              <div className={styles.error}>{errorMessage}</div>
-            )}
-            <Button
-              primary
-              className={styles.firstButton}
-              data-test="auth-dialog-confirm-button"
-              onClick={onConfirm}
-            >
-              {confirmLabel}
-            </Button>
-            <Button
-              className={styles.button}
-              data-test="auth-dialog-cancel-button"
-              onClick={onCancel}
-            >
-              {cancelLabel}
-            </Button>
-          </div>
-        </Content>
-      </Dialog>
-    );
-  }
-}
-

package/components/auth-dialog/auth-dialog.test.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-
-import AuthDialog from './auth-dialog';
-
-describe('AuthDialog', () => {
-  it('should render confirm', () => {
-    render(<AuthDialog show title="Foo"/>);
-    screen.getByRole('heading', {text: 'Foo'}).should.exist;
-  });
-});

package/components/auth-dialog-service/auth-dialog-service.examples.js

@@ -1,66 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import hubConfig from '../../.storybook/hub-config';
-
-import Auth from '@jetbrains/ring-ui/components/auth/auth';
-import HTTP from '@jetbrains/ring-ui/components/http/http';
-import Button from '@jetbrains/ring-ui/components/button/button';
-
-import showAuthDialog from '@jetbrains/ring-ui/components/auth-dialog-service/auth-dialog-service';
-
-export default {
-  title: 'Services/Auth Dialog Service',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes:
-      'A wrapper for the AuthDialog component. Allows showing the auth dialog without mounting the AuthDialog component first. Can be used outside React.',
-    hermione: {skip: true}
-  }
-};
-
-export const authDialogService = ({onConfirm, onCancel}) => {
-  const auth = new Auth(hubConfig);
-  const http = new HTTP(auth, auth.getAPIPath());
-
-  class AuthDialogDemo extends React.Component {
-    componentDidMount() {
-      auth.init();
-      http.get('services/0-0-0-0-0?fields=name,iconUrl').then(serviceDetails => {
-        this.setState({serviceDetails});
-        this.showAuthDialog();
-      });
-    }
-
-    componentWillUnmount() {
-      if (this.hideAuthDialog) {
-        this.hideAuthDialog();
-      }
-    }
-
-    showAuthDialog = () => {
-      const {serviceDetails} = this.state;
-
-      this.hideAuthDialog = showAuthDialog({
-        serviceDetails,
-        errorMessage: 'Error message',
-        onConfirm,
-        onCancel
-      });
-    };
-
-    render() {
-      return (
-        <div>
-          <Button onClick={this.showAuthDialog}>Show auth dialog</Button>
-        </div>
-      );
-    }
-  }
-
-  return <AuthDialogDemo/>;
-};
-
-authDialogService.argTypes = {onConfirm: {}, onCancel: {}};

package/components/auth-dialog-service/auth-dialog-service.test.js

@@ -1,75 +0,0 @@
-import {Simulate} from 'react-dom/test-utils';
-
-import styles from '../auth-dialog/auth-dialog.css';
-
-import authDialog from './auth-dialog-service';
-
-describe('Auth Dialog Service', () => {
-  const getContainer = () => document.querySelector('*[data-test~="ring-auth-dialog"]');
-  let hideAuthDialog;
-
-  afterEach(() => {
-    hideAuthDialog();
-  });
-
-  it('should show auth dialog', () => {
-    hideAuthDialog = authDialog();
-    const container = getContainer().
-      querySelector(`.${styles.content.split(' ').join('.')}`);
-    container.should.not.be.undefined;
-  });
-
-  it('should show auth dialog text', () => {
-    hideAuthDialog = authDialog({title: 'foo'});
-    getContainer().querySelector(`.${styles.title}`).should.contain.text('foo');
-  });
-
-  it('should show auth dialog error message', () => {
-    hideAuthDialog = authDialog({title: 'foo', errorMessage: 'error mess'});
-    getContainer().should.contain.text('error mess');
-  });
-
-  it('should show auth dialog serviceName', () => {
-    hideAuthDialog = authDialog({serviceName: 'My service'});
-    getContainer().querySelector(`.${styles.title}`).should.contain.text('Log in to My service');
-  });
-
-  it('should replace serviceName in in title', () => {
-    hideAuthDialog = authDialog({title: '==%serviceName%==', serviceName: 'My service'});
-    getContainer().querySelector(`.${styles.title}`).should.contain.text('==My service==');
-  });
-
-  it('should show auth dialog image', () => {
-    hideAuthDialog = authDialog({serviceImage: 'image://url'});
-    getContainer().should.contain('img[src="image://url"]');
-  });
-
-  it('should show auth dialog button text', () => {
-    hideAuthDialog = authDialog({title: 'foo', confirmLabel: 'confirm text'});
-    getContainer().should.contain.text('confirm text');
-  });
-
-  it('should show reject button text', () => {
-    hideAuthDialog = authDialog({title: 'foo', cancelLabel: 'reject text'});
-    getContainer().should.contain.text('reject text');
-  });
-
-  it('should call onConfirm on confirm click', () => {
-    const onConfirm = sandbox.spy();
-    hideAuthDialog = authDialog({onConfirm});
-    const okButton = getContainer().querySelector('*[data-test="auth-dialog-confirm-button"]');
-    Simulate.click(okButton);
-
-
-    onConfirm.should.have.been.called;
-  });
-
-  it('should call onCancel on cancel click', () => {
-    const onCancel = sandbox.spy();
-    hideAuthDialog = authDialog({onCancel});
-    const cancelButton = getContainer().querySelector('*[data-test="auth-dialog-cancel-button"]');
-    Simulate.click(cancelButton);
-
-    onCancel.should.have.been.called;
-  });
-});

package/components/avatar/avatar.examples.js

@@ -1,46 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Avatar, {Size} from '@jetbrains/ring-ui/components/avatar/avatar';
-import {avatarDataUri} from '@jetbrains/ring-ui/components/avatar/avatar-example-datauri';
-
-export default {
-  title: 'Components/Avatar',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays an avatar. In case of a loading error an empty square is displayed.'
-  }
-};
-
-export const avatar = () => {
-  function Example() {
-    return (
-      <div>
-        {Object.keys(Size).map(size => (
-          <div className="avatar-demo" key={size}>
-            <Avatar size={Size[size]} url={avatarDataUri}/>
-            <Avatar size={Size[size]} username="Jet Brains"/>
-            <Avatar size={Size[size]} username="Jet Brains" round/>
-            <Avatar size={Size[size]}/>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  return <Example/>;
-};
-
-avatar.parameters = {
-  storyStyles: `
-<style>
-  .avatar-demo {
-    display: flex;
-    justify-content: space-between;
-    width: 240px;
-    margin-bottom: 16px;
-  }
-</style>`
-};