@jetbrains/ring-ui 4.1.7 → 4.1.11

package/components/auth/auth.test.js

@@ -516,19 +516,17 @@ describe('Auth', () => {
       }
     });
 
-    it('should show login overlay if token refresh fails and window login enabled', async () => {
+    it('should show login overlay if token refresh fails and window login enabled', done => {
       auth._backgroundFlow._timeout = 100;
       sandbox.stub(BackgroundFlow.prototype, '_redirectFrame');
       sandbox.stub(Auth.prototype, '_showAuthDialog');
 
-      try {
-        await auth.requestToken();
-      } catch (reject) {
-        Auth.prototype._showAuthDialog.should.have.been.calledWith({
-          nonInteractive: true,
-          error: reject
-        });
-      }
+      auth.requestToken();
+
+      setTimeout(() => {
+        Auth.prototype._showAuthDialog.should.have.been.called;
+        done();
+      }, auth._backgroundFlow._timeout * 2);
     });
   });
 

package/components/auth/auth__core.js

@@ -52,6 +52,7 @@ const DEFAULT_CONFIG = {
     login: 'Log in',
     loginTo: 'Log in to %serviceName%',
     cancel: 'Cancel',
+    tryAgainLabel: 'Try again',
     postpone: 'Postpone',
     youHaveLoggedInAs: 'You have logged in as another user: %userName%',
     applyChange: 'Apply change',
@@ -405,9 +406,27 @@ export default class Auth {
     try {
       return await this._backgroundFlow.authorize();
     } catch (error) {
-
       if (this._canShowDialogs()) {
-        return this._showAuthDialog({nonInteractive: true, error});
+        return new Promise(resolve => {
+          const onTryAgain = async () => {
+            try {
+              const result = await this._backgroundFlow.authorize();
+              resolve(result);
+            } catch (retryError) {
+              this._showAuthDialog({
+                nonInteractive: true,
+                error: retryError,
+                onTryAgain
+              });
+              throw retryError;
+            }
+          };
+          this._showAuthDialog({
+            nonInteractive: true,
+            error,
+            onTryAgain
+          });
+        });
       } else {
         const authRequest = await this._requestBuilder.prepareAuthRequest();
         this._redirectCurrentPage(authRequest.url);
@@ -516,7 +535,7 @@ export default class Auth {
     this.logout();
   }
 
-  _showAuthDialog({nonInteractive, error, canCancel} = {}) {
+  _showAuthDialog({nonInteractive, error, canCancel, onTryAgain} = {}) {
     const {embeddedLogin, onPostponeLogout, translations} = this.config;
     const cancelable = this.user.guest || canCancel;
 
@@ -557,15 +576,22 @@ export default class Auth {
       }
     };
 
+    const onTryAgainClick = async () => {
+      await onTryAgain();
+      closeDialog();
+    };
+
     const hide = this._authDialogService({
       ...this._service,
       loginCaption: translations.login,
       loginToCaption: translations.loginTo,
       confirmLabel: translations.login,
+      tryAgainLabel: translations.tryAgainLabel,
       cancelLabel: cancelable ? translations.cancel : translations.postpone,
       errorMessage: this._extractErrorMessage(error, true),
       onConfirm,
-      onCancel
+      onCancel,
+      onTryAgain: onTryAgain ? onTryAgainClick : null
     });
 
     const stopTokenListening = this._storage.onTokenChange(token => {

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

@@ -1,14 +1,13 @@
 import React from 'react';
 
+import youtrackLogo from '!file-loader!@jetbrains/logos/youtrack/youtrack.svg';
+
 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()],

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

@@ -28,9 +28,11 @@ export default class AuthDialog extends Component {
     cancelOnEsc: PropTypes.bool,
     confirmLabel: PropTypes.string,
     cancelLabel: PropTypes.string,
+    tryAgainLabel: PropTypes.string,
 
     onConfirm: PropTypes.func,
-    onCancel: PropTypes.func
+    onCancel: PropTypes.func,
+    onTryAgain: PropTypes.func
   };
 
   static defaultProps = {
@@ -44,12 +46,38 @@ export default class AuthDialog extends Component {
     onCancel: () => {}
   };
 
+  state = {
+    retrying: false
+  };
+
+  componentDidMount() {
+    window.addEventListener('online', this.onRetryPress);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('online', this.onRetryPress);
+  }
+
   onEscPress = () => {
     if (this.props.cancelOnEsc) {
       this.props.onCancel();
     }
   };
 
+  onRetryPress = async () => {
+    if (!this.props.onTryAgain || this.state.retrying) {
+      return;
+    }
+    this.setState({retrying: true});
+    try {
+      await this.props.onTryAgain();
+    } catch (e) {
+      // do nothing, error is handled in onTryAgain
+    } finally {
+      this.setState({retrying: false});
+    }
+  };
+
   render() {
     const {
       show,
@@ -61,10 +89,14 @@ export default class AuthDialog extends Component {
       loginToCaption,
       confirmLabel,
       cancelLabel,
+      tryAgainLabel,
       onConfirm,
-      onCancel
+      onCancel,
+      onTryAgain
     } = this.props;
 
+    const {retrying} = this.state;
+
     const defaultTitle = serviceName ? loginToCaption : loginCaption;
     const title = (this.props.title || defaultTitle).replace('%serviceName%', serviceName);
 
@@ -99,6 +131,17 @@ export default class AuthDialog extends Component {
             >
               {confirmLabel}
             </Button>
+            {onTryAgain && (
+              <Button
+                className={styles.button}
+                data-test="auth-dialog-retry-button"
+                onClick={() => this.onRetryPress()}
+                loader={retrying}
+                disabled={retrying}
+              >
+                {tryAgainLabel}
+              </Button>
+            )}
             <Button
               className={styles.button}
               data-test="auth-dialog-cancel-button"

package/components/select/select.js

@@ -727,9 +727,9 @@ export default class Select extends Component {
     return isInputMode(this.props.type);
   }
 
-  _clickHandler = (forceShowPopup = false) => {
+  _clickHandler = () => {
     if (!this.props.disabled) {
-      if (this.state.showPopup && !forceShowPopup) {
+      if (this.state.showPopup) {
         this._hidePopup();
       } else {
         this.props.onBeforeOpen();
@@ -738,6 +738,14 @@ export default class Select extends Component {
     }
   };
 
+  _openPopupIfClosed = () => {
+    if (this.props.disabled || this.state.showPopup) {
+      return;
+    }
+    this.props.onBeforeOpen();
+    this._showPopup();
+  };
+
   _filterChangeHandler = e => {
     this._setFilter(e.target.value, e);
   };

package/components/select-ng/select-ng__lazy.js

@@ -38,11 +38,11 @@ class SelectLazy {
   }
 
   attachEvents() {
-    this.container.addEventListener('click', this.onClick);
+    this.container.addEventListener('click', this.onClick, {capture: true});
   }
 
   detachEvents() {
-    this.container.removeEventListener('click', this.onClick);
+    this.container.removeEventListener('click', this.onClick, {capture: true});
   }
 
   render(props) {
@@ -59,11 +59,9 @@ class SelectLazy {
     this.detachEvents();
     if (this.type === 'dropdown') {
       this.ctrl.selectInstance = render(this.reactSelect, this.container);
-      // In "dropdown" mode we don't click select itself, so need to force click handler
-      this.ctrl.selectInstance._clickHandler();
+      this.ctrl.selectInstance._openPopupIfClosed();
     } else {
       this.ctrl.selectInstance = hydrate(this.reactSelect, this.container);
-      this.ctrl.selectInstance._clickHandler(true);
     }
   }
 }

package/dist/auth/auth__core.js

@@ -86,6 +86,7 @@ const DEFAULT_CONFIG = {
     login: 'Log in',
     loginTo: 'Log in to %serviceName%',
     cancel: 'Cancel',
+    tryAgainLabel: 'Try again',
     postpone: 'Postpone',
     youHaveLoggedInAs: 'You have logged in as another user: %userName%',
     applyChange: 'Apply change',
@@ -475,9 +476,27 @@ class Auth {
       return await this._backgroundFlow.authorize();
     } catch (error) {
       if (this._canShowDialogs()) {
-        return this._showAuthDialog({
-          nonInteractive: true,
-          error
+        return new Promise(resolve => {
+          const onTryAgain = async () => {
+            try {
+              const result = await this._backgroundFlow.authorize();
+              resolve(result);
+            } catch (retryError) {
+              this._showAuthDialog({
+                nonInteractive: true,
+                error: retryError,
+                onTryAgain
+              });
+
+              throw retryError;
+            }
+          };
+
+          this._showAuthDialog({
+            nonInteractive: true,
+            error,
+            onTryAgain
+          });
         });
       } else {
         const authRequest = await this._requestBuilder.prepareAuthRequest();
@@ -603,7 +622,8 @@ class Auth {
     let {
       nonInteractive,
       error,
-      canCancel
+      canCancel,
+      onTryAgain
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       embeddedLogin,
@@ -654,14 +674,21 @@ class Auth {
       }
     };
 
+    const onTryAgainClick = async () => {
+      await onTryAgain();
+      closeDialog();
+    };
+
     const hide = this._authDialogService({ ...this._service,
       loginCaption: translations.login,
       loginToCaption: translations.loginTo,
       confirmLabel: translations.login,
+      tryAgainLabel: translations.tryAgainLabel,
       cancelLabel: cancelable ? translations.cancel : translations.postpone,
       errorMessage: this._extractErrorMessage(error, true),
       onConfirm,
-      onCancel
+      onCancel,
+      onTryAgain: onTryAgain ? onTryAgainClick : null
     });
 
     const stopTokenListening = this._storage.onTokenChange(token => {

package/dist/auth-dialog/auth-dialog.js

@@ -49,11 +49,42 @@ class AuthDialog extends Component {
   constructor() {
     super(...arguments);
 
+    _defineProperty(this, "state", {
+      retrying: false
+    });
+
     _defineProperty(this, "onEscPress", () => {
       if (this.props.cancelOnEsc) {
         this.props.onCancel();
       }
     });
+
+    _defineProperty(this, "onRetryPress", async () => {
+      if (!this.props.onTryAgain || this.state.retrying) {
+        return;
+      }
+
+      this.setState({
+        retrying: true
+      });
+
+      try {
+        await this.props.onTryAgain();
+      } catch (e) {// do nothing, error is handled in onTryAgain
+      } finally {
+        this.setState({
+          retrying: false
+        });
+      }
+    });
+  }
+
+  componentDidMount() {
+    window.addEventListener('online', this.onRetryPress);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('online', this.onRetryPress);
   }
 
   render() {
@@ -67,9 +98,14 @@ class AuthDialog extends Component {
       loginToCaption,
       confirmLabel,
       cancelLabel,
+      tryAgainLabel,
       onConfirm,
-      onCancel
+      onCancel,
+      onTryAgain
     } = this.props;
+    const {
+      retrying
+    } = this.state;
     const defaultTitle = serviceName ? loginToCaption : loginCaption;
     const title = (this.props.title || defaultTitle).replace('%serviceName%', serviceName);
     return /*#__PURE__*/React.createElement(Dialog, {
@@ -95,7 +131,13 @@ class AuthDialog extends Component {
       className: modules_ae521deb.firstButton,
       "data-test": "auth-dialog-confirm-button",
       onClick: onConfirm
-    }, confirmLabel), /*#__PURE__*/React.createElement(Button, {
+    }, confirmLabel), onTryAgain && /*#__PURE__*/React.createElement(Button, {
+      className: modules_ae521deb.button,
+      "data-test": "auth-dialog-retry-button",
+      onClick: () => this.onRetryPress(),
+      loader: retrying,
+      disabled: retrying
+    }, tryAgainLabel), /*#__PURE__*/React.createElement(Button, {
       className: modules_ae521deb.button,
       "data-test": "auth-dialog-cancel-button",
       onClick: onCancel
@@ -116,8 +158,10 @@ _defineProperty(AuthDialog, "propTypes", {
   cancelOnEsc: PropTypes.bool,
   confirmLabel: PropTypes.string,
   cancelLabel: PropTypes.string,
+  tryAgainLabel: PropTypes.string,
   onConfirm: PropTypes.func,
-  onCancel: PropTypes.func
+  onCancel: PropTypes.func,
+  onTryAgain: PropTypes.func
 });
 
 _defineProperty(AuthDialog, "defaultProps", {

package/dist/select/select.js

@@ -379,20 +379,28 @@ class Select extends Component {
 
     _defineProperty(this, "doesLabelMatch", doesLabelMatch);
 
-    _defineProperty(this, "_clickHandler", function () {
-      let forceShowPopup = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
-      if (!_this.props.disabled) {
-        if (_this.state.showPopup && !forceShowPopup) {
-          _this._hidePopup();
+    _defineProperty(this, "_clickHandler", () => {
+      if (!this.props.disabled) {
+        if (this.state.showPopup) {
+          this._hidePopup();
         } else {
-          _this.props.onBeforeOpen();
+          this.props.onBeforeOpen();
 
-          _this._showPopup();
+          this._showPopup();
         }
       }
     });
 
+    _defineProperty(this, "_openPopupIfClosed", () => {
+      if (this.props.disabled || this.state.showPopup) {
+        return;
+      }
+
+      this.props.onBeforeOpen();
+
+      this._showPopup();
+    });
+
     _defineProperty(this, "_filterChangeHandler", e => {
       this._setFilter(e.target.value, e);
     });

package/dist/select-ng/select-ng__lazy.js

@@ -115,11 +115,15 @@ class SelectLazy {
   }
 
   attachEvents() {
-    this.container.addEventListener('click', this.onClick);
+    this.container.addEventListener('click', this.onClick, {
+      capture: true
+    });
   }
 
   detachEvents() {
-    this.container.removeEventListener('click', this.onClick);
+    this.container.removeEventListener('click', this.onClick, {
+      capture: true
+    });
   }
 
   render(props) {
@@ -137,13 +141,11 @@ class SelectLazy {
     this.detachEvents();
 
     if (this.type === 'dropdown') {
-      this.ctrl.selectInstance = render(this.reactSelect, this.container); // In "dropdown" mode we don't click select itself, so need to force click handler
+      this.ctrl.selectInstance = render(this.reactSelect, this.container);
 
-      this.ctrl.selectInstance._clickHandler();
+      this.ctrl.selectInstance._openPopupIfClosed();
     } else {
       this.ctrl.selectInstance = hydrate(this.reactSelect, this.container);
-
-      this.ctrl.selectInstance._clickHandler(true);
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "4.1.7",
+  "version": "4.1.11",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -70,25 +70,25 @@
     "@babel/cli": "^7.16.7",
     "@babel/eslint-parser": "^7.16.5",
     "@jetbrains/eslint-config": "^5.3.1",
-    "@jetbrains/generator-ring-ui": "^4.1.3",
+    "@jetbrains/generator-ring-ui": "^4.1.4",
     "@jetbrains/stylelint-config": "^3.0.2",
     "@primer/octicons": "^16.2.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-replace": "^3.0.1",
-    "@storybook/addon-a11y": "6.4.9",
-    "@storybook/addon-docs": "6.4.9",
-    "@storybook/addon-essentials": "6.4.9",
+    "@storybook/addon-a11y": "6.4.10",
+    "@storybook/addon-docs": "6.4.10",
+    "@storybook/addon-essentials": "6.4.10",
     "@storybook/addon-storyshots": "6.4.3",
     "@storybook/addon-storyshots-puppeteer": "6.4.3",
     "@storybook/addon-storysource": "6.4.9",
     "@storybook/addons": "6.4.9",
-    "@storybook/builder-webpack5": "6.4.9",
-    "@storybook/client-api": "6.4.9",
+    "@storybook/builder-webpack5": "6.4.10",
+    "@storybook/client-api": "6.4.12",
     "@storybook/core": "6.4.9",
-    "@storybook/html": "6.4.9",
-    "@storybook/manager-webpack5": "^6.4.9",
-    "@storybook/source-loader": "6.4.9",
-    "@storybook/theming": "6.4.9",
+    "@storybook/html": "6.4.10",
+    "@storybook/manager-webpack5": "^6.4.10",
+    "@storybook/source-loader": "6.4.10",
+    "@storybook/theming": "6.4.12",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
@@ -108,7 +108,7 @@
     "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-angular": "^4.1.0",
     "eslint-plugin-bdd": "^2.1.1",
-    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "events": "^3.3.0",
@@ -117,7 +117,7 @@
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "imports-loader": "^3.1.1",
-    "jest": "~27.4.5",
+    "jest": "~27.4.7",
     "jest-teamcity": "^1.10.0",
     "karma": "^6.3.9",
     "karma-chrome-launcher": "3.1.0",
@@ -126,7 +126,7 @@
     "karma-teamcity-reporter": "^2.0.0",
     "karma-webpack": "^5.0.0",
     "lerna": "^4.0.0",
-    "lint-staged": "^12.1.5",
+    "lint-staged": "^12.1.6",
     "merge-options": "^3.0.4",
     "mocha": "^9.1.3",
     "pinst": "^2.1.6",
@@ -191,7 +191,7 @@
     "focus-trap": "^6.7.1",
     "focus-visible": "^5.2.0",
     "highlight.js": "^10.7.2",
-    "html-loader": "^3.0.1",
+    "html-loader": "^3.1.0",
     "interpolate-loader": "^2.0.1",
     "just-debounce-it": "^3.0.1",
     "memoize-one": "^6.0.0",
@@ -202,7 +202,7 @@
     "postcss-loader": "^6.2.1",
     "postcss-modules-values-replace": "^3.4.0",
     "postcss-preset-env": "^7.2.0",
-    "prop-types": "^15.8.0",
+    "prop-types": "^15.8.1",
     "react-markdown": "^5.0.3",
     "react-movable": "^3.0.2",
     "react-virtualized": "^9.22.3",
@@ -221,5 +221,5 @@
     "node": ">=7.4",
     "npm": ">=6.0.0"
   },
-  "gitHead": "882b425327661b41b8234af5416e4a7db850addd"
+  "gitHead": "9a657099ffa39aee3526ec1174f2eddeed034111"
 }