@jetbrains/ring-ui 4.1.0-beta.9 → 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/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-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

@@ -39,7 +39,7 @@ export default class AnalyticsFUSPlugin {
       recorderVersion,
       productCode: productId,
       productBuild,
-      internal: true,
+      internal: isDevelopment,
       groups,
       useForSubdomains: true
     });

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.js

@@ -70,6 +70,7 @@ export default class AuthDialog extends Component {
 
     return (
       <Dialog
+        label={title}
         data-test="ring-auth-dialog"
         className={className}
         contentClassName={classNames(className, styles.dialog)}

package/components/avatar/avatar.css

@@ -1,10 +1,13 @@
 @import "../global/variables.css";
 
 .avatar {
+  display: inline-block;
   object-fit: cover;
   object-position: center;
 
-  border-radius: var(--ring-border-radius); /* This is a "graceful degradation" fallback, while the real value is controlled by JS */
+  /* This is a "graceful degradation" fallback, while the real value is controlled by JS */
+
+  border-radius: var(--ring-border-radius);
 }
 
 .subavatar {

package/components/avatar/avatar.examples.js

@@ -21,7 +21,8 @@ export const avatar = () => {
         {Object.keys(Size).map(size => (
           <div className="avatar-demo" key={size}>
             <Avatar size={Size[size]} url={avatarDataUri}/>
-            <Avatar size={Size[size]} url={avatarDataUri} round/>
+            <Avatar size={Size[size]} username="Jet Brains"/>
+            <Avatar size={Size[size]} username="Jet Brains" round/>
             <Avatar size={Size[size]}/>
           </div>
         ))}
@@ -38,7 +39,7 @@ avatar.parameters = {
   .avatar-demo {
     display: flex;
     justify-content: space-between;
-    width: 200px;
+    width: 240px;
     margin-bottom: 16px;
   }
 </style>`

package/components/avatar/avatar.js

@@ -6,6 +6,7 @@ import {encodeURL, isDataURI, parseQueryString} from '../global/url';
 import {getPixelRatio} from '../global/dom';
 
 import styles from './avatar.css';
+import FallbackAvatar from './fallback-avatar';
 
 /**
  * @name Avatar
@@ -15,6 +16,7 @@ export const Size = {
   Size18: 18,
   Size20: 20,
   Size24: 24,
+  Size28: 28,
   Size32: 32,
   Size40: 40,
   Size48: 48,
@@ -30,7 +32,9 @@ export default class Avatar extends PureComponent {
     url: PropTypes.string,
     round: PropTypes.bool,
     subavatar: PropTypes.string,
-    subavatarSize: PropTypes.number
+    subavatarSize: PropTypes.number,
+    username: PropTypes.string,
+    skipParams: PropTypes.bool
   };
 
   static defaultProps = {
@@ -53,7 +57,18 @@ export default class Avatar extends PureComponent {
   };
 
   render() {
-    const {size, url, dpr, style, round, subavatar, subavatarSize, ...restProps} = this.props;
+    const {
+      size,
+      url,
+      dpr,
+      style,
+      round,
+      subavatar,
+      subavatarSize,
+      username,
+      skipParams,
+      ...restProps
+    } = this.props;
     const sizeString = `${size}px`;
     const subavatarSizeString = `${subavatarSize}px`;
     const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
@@ -76,14 +91,24 @@ export default class Avatar extends PureComponent {
         <span
           {...restProps}
           data-test="avatar"
-          className={classNames(styles.avatar, styles.empty, this.props.className)}
+          className={
+            classNames(styles.avatar, this.props.className, {[styles.empty]: username == null})
+          }
           style={styleObj}
-        />
+        >{
+            username != null && (
+              <FallbackAvatar
+                size={size}
+                round={round}
+                username={username}
+              />
+            )
+          }</span>
       );
     }
 
     let src = url;
-    if (!isDataURI(url)) {
+    if (!skipParams && !isDataURI(url)) {
       const [urlStart, query] = url.split('?');
       const queryParams = {
         ...parseQueryString(query),
@@ -102,7 +127,7 @@ export default class Avatar extends PureComponent {
         subavatarSizeString
       };
 
-      subavatarSrc = encodeURL(urlStart, queryParams);
+      subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
       return (
         <div>
           <img