@jetbrains/ring-ui 4.1.0-beta.3 → 4.1.1

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [4.1.0]
+
+### Pre-built version
+
+Ring UI now comes with pre-built version in `@jetbrains/ring-ui/dist` directory. 
+This addresses the following issues:
+
+* does not require using specific bundler (WebPack) anymore
+* does not require dealing with Ring UI building configuration
+* decreases your project build time
+
+See "README.md" for quick start with pre-built version
+
 ## [4.0.0]
 
 ### BREAKING CHANGES

package/README.md

@@ -7,27 +7,28 @@ This collection of UI components aims to provide all the necessary building bloc
 
 ## Installation
 
-There are three ways of installing and using RingUI. Choose **one** that suits your needs best:
+`npm install @jetbrains/ring-ui`
 
 ### Quick start (importing components as ES modules)
 
 The easiest way is to import necessary components as ES modules:
-```javascript
-import Icon from "@jetbrains/ring-ui/dist/icon"
-import Logo from "@jetbrains/ring-ui/dist/logo"
-import Input from "@jetbrains/ring-ui/dist/input"
-import Select from "@jetbrains/ring-ui/dist/select"
-import Toggle from "@jetbrains/ring-ui/dist/toggle"
-import { Tabs, Tab } from "@jetbrains/ring-ui/dist/tabs"
+```js
+// You need to import RingUI styles once
+import '@jetbrains/ring-ui/dist/style.css';
 
-import "@jetbrains/ring-ui/dist/style.css"
+import alertService from '@jetbrains/ring-ui/dist/alert-service/alert-service';
+import Button from '@jetbrains/ring-ui/dist/button/button';
 
 ...
 
-<Select
-  className="select-field"
-  size="FULL"
-/>
+export const Demo = () => {
+  return (
+    <Button onClick={() => alertService.successMessage('Hello world')}>
+      Click me
+    </Button>
+  );
+};
+
 ```
 
 The bundle size will depend on the amount of components you imported.
@@ -43,9 +44,10 @@ The bundle size will depend on the amount of components you imported.
   - `npm run build` to build a production bundle
   - `npm run create-component` to create a new component template with styles and tests
 
-### Webpack injection
+### Building Ring UI from source via Webpack
 
-In case boilerplate generators are not your thing and you prefer to understand the inner workings a bit better.
+In case you have complex build, and you want to compile RingUI sources together with your sources
+in a same build process, you can use the following configuration:
 
 1. Install Ring UI with `npm install @jetbrains/ring-ui --save-exact` 
 

package/babel.config.js

@@ -1,4 +1,5 @@
 const browserslist = require('browserslist');
+const deprecate = require('util-deprecate');
 
 const coreJsVersion = process.env.RING_UI_COREJS_VERSION ||
   require('core-js/package.json').version;
@@ -9,8 +10,8 @@ module.exports = function config(api) {
   api.cache(true);
 
   if (isDeprecatedCoreJS) {
-    // eslint-disable-next-line no-console
-    console.log(`Compiling Ring UI with deprecated Core JS version "${coreJsVersion}". Consider updating to 3rd.`);
+    // TODO remove in 5.0
+    deprecate(() => null, `Compiling Ring UI with deprecated Core JS version "${coreJsVersion}". Consider updating to 3rd.`)();
   }
 
   return {

package/components/alert/alert.js

@@ -82,6 +82,7 @@ export default class Alert extends PureComponent {
     children: PropTypes.node,
     className: PropTypes.string,
     captionClassName: PropTypes.string,
+    closeButtonClassName: PropTypes.string,
     'data-test': PropTypes.string
   };
 
@@ -121,12 +122,17 @@ export default class Alert extends PureComponent {
   static Type = Type;
 
   closeRequest = (...args) => {
+    this.startCloseAnimation();
+    return this.props.onCloseRequest(...args);
+  };
+
+  startCloseAnimation = () => {
     const height = getRect(this.node).height;
     this.setState({height});
-    return this.props.onCloseRequest(...args);
   };
 
   _close() {
+    this.startCloseAnimation();
     setTimeout(() => {
       this.props.onClose();
     }, ANIMATION_TIME);
@@ -189,7 +195,7 @@ export default class Alert extends PureComponent {
   };
 
   render() {
-    const {type, inline, isClosing, isShaking,
+    const {type, inline, isClosing, isShaking, closeButtonClassName,
       showWithAnimation, className, 'data-test': dataTest} = this.props;
 
     const classes = classNames(className, {
@@ -218,7 +224,7 @@ export default class Alert extends PureComponent {
             ? (
               <button
                 type="button"
-                className={styles.close}
+                className={classNames(styles.close, closeButtonClassName)}
                 data-test="alert-close"
                 aria-label="close alert"
                 onClick={this.closeRequest}

package/components/alert/alert.test.js

@@ -1,86 +1,59 @@
 import React from 'react';
-import {shallow, mount, render} from 'enzyme';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import Alert from './alert';
 import styles from './alert.css';
 
+const TIMEOUT = 100;
 const TICK = 500;
 
 describe('Alert', () => {
-  const mountAlert = props => mount(<Alert {...props}/>);
-  const shallowAlert = props => shallow(<Alert {...props}/>);
-  const renderAlert = props => render(<Alert {...props}/>);
-
-  let clock;
-  beforeEach(() => {
-    clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
-  });
-
-  it('should render', () => {
-    mountAlert({}).should.have.type(Alert);
-  });
-
   it('should render text', () => {
-    const alertComponent = renderAlert({
-      children: 'Test message',
-      type: Alert.Type.MESSAGE
-    });
-    alertComponent.should.have.text('Test message');
+    render(<Alert type={Alert.Type.MESSAGE}>{'Test message'}</Alert>);
+    screen.getByText('Test message').should.exist;
   });
 
   it('should transfer className', () => {
-    shallowAlert({className: 'foo'}).should.have.className('foo');
+    render(<Alert className="foo"/>);
+    screen.getByTestId('alert').should.have.class('foo');
   });
 
   it('should render component', () => {
-    const alertComponent = renderAlert({
-      children: <div>{'foo'}</div>,
-      type: Alert.Type.MESSAGE
-    });
-    alertComponent.should.have.text('foo');
+    render(<Alert type={Alert.Type.MESSAGE}><div>{'foo'}</div></Alert>);
+    screen.getByText('foo').should.exist;
   });
 
   it('should render an error', () => {
-    const alertComponent = shallowAlert({
-      children: 'Test',
-      type: Alert.Type.ERROR
-    });
-    alertComponent.should.have.className(styles.error);
+    render(<Alert type={Alert.Type.ERROR}>{'Test'}</Alert>);
+    screen.getByTestId('alert').should.have.class(styles.error);
   });
 
   it('should be closeable if by default', () => {
-    const alertComponent = shallowAlert({children: 'Test element'});
+    render(<Alert>{'Test element'}</Alert>);
 
-    alertComponent.should.have.descendants('button[data-test="alert-close"]');
+    screen.getByRole('button', {name: 'close alert'}).should.exist;
   });
 
   it('should be not closeable if defined', () => {
-    const alertComponent = shallowAlert({
-      children: 'Test element',
-      closeable: false
-    });
+    render(<Alert closeable={false}>{'Test element'}</Alert>);
 
-    alertComponent.should.not.have.descendants('button[data-test="alert-close"]');
+    should.not.exist(screen.queryByRole('button', {name: 'close alert'}));
   });
 
   it('should call onCloseRequest on click by close button', () => {
     const closeSpy = sandbox.spy();
-    const alertComponent = shallowAlert({
-      children: 'Test element',
-      onCloseRequest: closeSpy
-    });
-    const closeElement = alertComponent.find('button[data-test="alert-close"]');
-    closeElement.simulate('click');
+    render(<Alert onCloseRequest={closeSpy}>{'Test element'}</Alert>);
+    const closeElement = screen.queryByRole('button', {name: 'close alert'});
+    userEvent.click(closeElement);
     closeSpy.should.have.been.called;
   });
 
   it('should call onCloseRequest on timeout', () => {
+    const clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
     const closeSpy = sandbox.spy();
-    mountAlert({
-      children: 'Test element',
-      timeout: 100,
-      onCloseRequest: closeSpy
-    });
+    render(<Alert timeout={TIMEOUT} onCloseRequest={closeSpy}>{'Test element'}</Alert>);
+
     clock.tick(TICK);
 
     closeSpy.should.have.been.called;

package/components/alert/container.css

@@ -1,7 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
-@value alert from './alert.css';
+@value alert from "./alert.css";
 
 .alertContainer {
   position: fixed;

package/components/alert/container.test.js

@@ -1,22 +1,12 @@
 import React from 'react';
-import {mount} from 'enzyme';
+import {render, screen} from '@testing-library/react';
 
 import Alert from './alert';
 import AlertContainer from './container';
 
 describe('Alert Container', () => {
-  const children = <Alert>{'Test'}</Alert>;
-
-  const mountAlertContainer = props => mount(
-    <AlertContainer {...props}>{children}</AlertContainer>
-  );
-
-  it('should render alert container component', () => {
-    mountAlertContainer().should.have.type(AlertContainer);
-  });
-
   it('should render alert container to body', () => {
-    mountAlertContainer();
-    document.body.should.contain('*[data-test="alert-container"]');
+    render(<AlertContainer><Alert>{'Test'}</Alert></AlertContainer>);
+    screen.getByTestId('alert-container').should.exist;
   });
 });

package/components/alert-service/alert-service.examples.css

@@ -0,0 +1,18 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+@value animation-duration: 300ms;
+@value animation-easing: ease-out;
+
+.customAlert {
+  background: var(--ring-main-color);
+}
+
+.closeButton,
+.closeButton:hover {
+  color: var(--ring-dark-text-color);
+}
+
+.closeButton:hover {
+  opacity: 0.8;
+}

package/components/alert-service/alert-service.examples.js

@@ -2,6 +2,8 @@ import React from 'react';
 
 import reactDecorator from '../../.storybook/react-decorator';
 
+import styles from './alert-service.examples.css';
+
 import Button from '@jetbrains/ring-ui/components/button/button';
 import ButtonToolbar from '@jetbrains/ring-ui/components/button-toolbar/button-toolbar';
 
@@ -26,6 +28,7 @@ export const alertService = () => {
       setTimeout(() => {
         alert.message('A initial message', MSG_TIMEOUT);
         alert.error('Error message');
+        this.showCustomMessage();
       });
     }
 
@@ -33,6 +36,21 @@ export const alertService = () => {
       alert._getShowingAlerts().forEach(item => alert.removeWithoutAnimation(item.key));
     }
 
+    showCustomMessage = () => {
+      this.lastKey = alert.addAlert(
+        <div className={styles.customAlert}>
+          <h1>Hello!</h1>
+          <p>{'This is a custom message'}</p>
+        </div>,
+        null,
+        0,
+        {
+          className: styles.customAlert,
+          closeButtonClassName: styles.closeButton
+        }
+      );
+    };
+
     showError = () => {
       this.lastKey = alert.error('Something wrong happened');
     };
@@ -59,6 +77,9 @@ export const alertService = () => {
           <Button onClick={this.showMessage} primary>
             Show message
           </Button>
+          <Button onClick={this.showCustomMessage}>
+            Show custom message
+          </Button>
           <Button onClick={this.showRandomWarning}>Show warning</Button>
           <Button onClick={this.removeLastAlert}>Remove last alert</Button>
         </ButtonToolbar>

package/components/alert-service/alert-service.js

@@ -76,7 +76,8 @@ class AlertService {
     }, ANIMATION_TIME);
   }
 
-  addAlert(message, type, timeout = this.defaultTimeout, restOptions = {}) {
+  addAlert(message, type, timeout = this.defaultTimeout, options = {}) {
+    const {onCloseRequest, onClose, ...restOptions} = options;
     const sameAlert = this.findSameAlert(message, type);
     if (sameAlert) {
       sameAlert.isShaking = true;
@@ -91,8 +92,14 @@ class AlertService {
       type,
       timeout,
       isClosing: false,
-      onCloseRequest: () => this.startAlertClosing(alert),
-      onClose: () => this.removeWithoutAnimation(alert.key),
+      onCloseRequest: () => {
+        onCloseRequest && onCloseRequest();
+        this.startAlertClosing(alert);
+      },
+      onClose: () => {
+        onClose && onClose();
+        this.removeWithoutAnimation(alert.key);
+      },
       ...restOptions
     };
 

package/components/analytics/analytics__fus-plugin.js

@@ -24,9 +24,9 @@ export default class AnalyticsFUSPlugin {
       return;
     }
     ((i, s, o, g, r) => {
-      i[r] = i[r] || (() => {
+      i[r] = i[r] || function addArgumentsToQueueForWaitingTheScriptLoading() {
         (i[r].query = i[r].query || []).push(arguments);
-      });
+      };
       const script = document.createElement(o);
       script.async = true;
       script.src = g;
@@ -39,7 +39,7 @@ export default class AnalyticsFUSPlugin {
       recorderVersion,
       productCode: productId,
       productBuild,
-      internal: true,
+      internal: isDevelopment,
       groups,
       useForSubdomains: true
     });

package/components/analytics/analytics__ga-plugin.js

@@ -10,9 +10,9 @@ export default class AnalyticsGAPlugin {
     }
     ((i, s, o, g, r) => {
       i.GoogleAnalyticsObject = r;
-      i[r] = i[r] || (() => {
+      i[r] = i[r] || function addArgumentsToQueueForWaitingTheScriptLoading() {
         (i[r].q = i[r].q || []).push(arguments);
-      });
+      };
       i[r].l = 1 * new Date();
       const a = s.createElement(o);
       const m = s.getElementsByTagName(o)[0];

package/components/auth/auth.test.js

@@ -203,7 +203,8 @@ describe('Auth', () => {
         redirectUri: 'http://localhost:8080/hub',
         clientId: '1-1-1-1-1',
         scope: ['0-0-0-0-0', 'youtrack'],
-        optionalScopes: ['youtrack']
+        optionalScopes: ['youtrack'],
+        waitForRedirectTimeout: 0
       });
       try {
         await auth.init();
@@ -226,7 +227,8 @@ describe('Auth', () => {
       auth = new Auth({
         serverUri: '',
         redirect: true,
-        cleanHash: true
+        cleanHash: true,
+        waitForRedirectTimeout: 0
       });
 
       try {
@@ -245,7 +247,8 @@ describe('Auth', () => {
         auth = new Auth({
           serverUri: '',
           redirect: true,
-          cleanHash: true
+          cleanHash: true,
+          waitForRedirectTimeout: 0
         });
 
         try {
@@ -265,7 +268,8 @@ describe('Auth', () => {
       auth = new Auth({
         serverUri: '',
         redirect: true,
-        cleanHash: false
+        cleanHash: false,
+        waitForRedirectTimeout: 0
       });
 
       try {
@@ -284,7 +288,8 @@ describe('Auth', () => {
         serverUri: '',
         redirect: true,
         redirectUri: 'http://localhost:8080/hub',
-        requestCredentials: 'skip'
+        requestCredentials: 'skip',
+        waitForRedirectTimeout: 0
       });
       try {
         await auth.init();
@@ -313,7 +318,8 @@ describe('Auth', () => {
         redirectUri: 'http://localhost:8080/hub',
         clientId: '1-1-1-1-1',
         scope: ['0-0-0-0-0', 'youtrack'],
-        optionalScopes: ['youtrack']
+        optionalScopes: ['youtrack'],
+        waitForRedirectTimeout: 0
       });
 
       auth._storage._tokenStorage = auth._storage._stateStorage =
@@ -330,7 +336,8 @@ describe('Auth', () => {
         auth._storage.saveToken({
           accessToken: 'token',
           expires: TokenValidator._epoch() + HOUR,
-          scopes: ['0-0-0-0-0']
+          scopes: ['0-0-0-0-0'],
+          waitForRedirectTimeout: 0
         });
       });
 

package/components/auth/auth__core.js

@@ -14,6 +14,7 @@ export const DEFAULT_EXPIRES_TIMEOUT = 40 * 60;
 export const DEFAULT_BACKGROUND_TIMEOUT = 10 * 1000;
 const DEFAULT_BACKEND_CHECK_TIMEOUT = 10 * 1000;
 const BACKGROUND_REDIRECT_TIMEOUT = 20 * 1000;
+const DEFAULT_WAIT_FOR_REDIRECT_TIMEOUT = 5 * 1000;
 /* eslint-enable no-magic-numbers */
 
 export const USER_CHANGED_EVENT = 'userChange';
@@ -46,6 +47,7 @@ const DEFAULT_CONFIG = {
   onBackendDown: () => {},
 
   defaultExpiresIn: DEFAULT_EXPIRES_TIMEOUT,
+  waitForRedirectTimeout: DEFAULT_WAIT_FOR_REDIRECT_TIMEOUT,
   translations: {
     login: 'Log in',
     loginTo: 'Log in to %serviceName%',
@@ -231,7 +233,7 @@ export default class Auth {
    * that should be restored after returning back from auth server.
    */
   async init() {
-    this._storage.onTokenChange(token => {
+    this._storage.onTokenChange(async token => {
       const isGuest = this.user ? this.user.guest : false;
 
       if (isGuest && !token) {
@@ -241,7 +243,13 @@ export default class Auth {
       if (!token) {
         this.logout();
       } else {
-        this._detectUserChange(token.accessToken);
+        try {
+          await this._detectUserChange(token.accessToken);
+        } catch (error) {
+          if (this._canShowDialogs()) {
+            this._showAuthDialog({nonInteractive: true, error});
+          }
+        }
       }
     });
 
@@ -305,6 +313,11 @@ export default class Auth {
     const authRequest = await this._requestBuilder.prepareAuthRequest();
     this._redirectCurrentPage(authRequest.url);
 
+    // HUB-10867 Since we already redirecting the page, there is no actual need to throw an error
+    // and scare user with flashing error
+    // But let's keep it just in case redirect was not successful
+    await new Promise(resolve => setTimeout(resolve, this.config.waitForRedirectTimeout));
+
     throw error;
   }
 
@@ -466,35 +479,31 @@ export default class Auth {
   async _detectUserChange(accessToken) {
     const windowWasOpen = this._isLoginWindowOpen;
 
-    try {
-      const user = await this.getUser(accessToken);
-      const onApply = () => {
-        this.user = user;
-        this.listeners.trigger(USER_CHANGED_EVENT, user);
-      };
+    const user = await this.getUser(accessToken);
+    const onApply = () => {
+      this.user = user;
+      this.listeners.trigger(USER_CHANGED_EVENT, user);
+    };
 
-      if (user && this.user && this.user.id !== user.id) {
-        if (!this._canShowDialogs() || this.user.guest || windowWasOpen) {
-          onApply();
-          return;
-        }
-        if (user.guest) {
-          this._showAuthDialog({nonInteractive: true});
-          return;
-        }
+    if (user && this.user && this.user.id !== user.id) {
+      if (!this._canShowDialogs() || this.user.guest || windowWasOpen) {
+        onApply();
+        return;
+      }
+      if (user.guest) {
+        this._showAuthDialog({nonInteractive: true});
+        return;
+      }
 
-        await this._showUserChangedDialog({
-          newUser: user,
-          onApply,
-          onPostpone: () => {
-            this.listeners.trigger(USER_CHANGE_POSTPONED_EVENT);
-            this.config.onPostponeChangedUser(this.user, user);
-          }
-        });
+      await this._showUserChangedDialog({
+        newUser: user,
+        onApply,
+        onPostpone: () => {
+          this.listeners.trigger(USER_CHANGE_POSTPONED_EVENT);
+          this.config.onPostponeChangedUser(this.user, user);
+        }
+      });
 
-      }
-    } catch (e) {
-      // noop
     }
   }
 
@@ -554,7 +563,7 @@ export default class Auth {
       loginToCaption: translations.loginTo,
       confirmLabel: translations.login,
       cancelLabel: cancelable ? translations.cancel : translations.postpone,
-      errorMessage: error && error.toString ? error.toString() : null,
+      errorMessage: this._extractErrorMessage(error, true),
       onConfirm,
       onCancel
     });
@@ -601,6 +610,29 @@ export default class Auth {
     });
   }
 
+  _extractErrorMessage(error, logError = false) {
+    if (!error) {
+      return null;
+    }
+    if (logError) {
+      // eslint-disable-next-line no-console
+      console.error('RingUI Auth error', error);
+    }
+
+    try {
+      // We've got some error from this list
+      // https://www.jetbrains.com/help/youtrack/devportal/OAuth-2.0-Errors.html
+      if (error.code && typeof error.code.code === 'string') {
+        const readableCode = error.code.code.split('_').join(' ');
+        return `Authorization error: ${readableCode}`;
+      }
+    } catch {
+      // noop
+    }
+
+    return error.toString ? error.toString() : null;
+  }
+
   _showBackendDownDialog(backendError) {
     const {onBackendDown, translations} = this.config;
     const REPEAT_TIMEOUT = 5000;
@@ -711,11 +743,10 @@ export default class Auth {
   }
 
   async switchUser() {
-    if (this.config.embeddedLogin) {
-      await this._runEmbeddedLogin();
+    if (!this.config.embeddedLogin) {
+      throw new Error('Auth: switchUser only supported for "embeddedLogin" mode');
     }
-
-    throw new Error('Auth: switchUser only supported for "embeddedLogin" mode');
+    await this._runEmbeddedLogin();
   }
 
   /**

package/components/auth-dialog/auth-dialog.css

@@ -28,14 +28,13 @@
   margin-top: calc(unit * 4);
 }
 
-.title {
+.title.title {
+  margin-top: 0;
   margin-bottom: unit;
 
   text-align: center;
 
-  font-size: 24px;
   font-weight: 100;
-  line-height: 28px;
 }
 
 .logo {