@jetbrains/ring-ui 4.1.8 → 4.1.12

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.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-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,10 +59,10 @@ class SelectLazy {
     this.detachEvents();
     if (this.type === 'dropdown') {
       this.ctrl.selectInstance = render(this.reactSelect, this.container);
+      this.ctrl.selectInstance._openPopupIfClosed();
     } else {
       this.ctrl.selectInstance = hydrate(this.reactSelect, this.container);
     }
-    this.ctrl.selectInstance._openPopupIfClosed();
   }
 }
 

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-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) {
@@ -138,11 +142,11 @@ class SelectLazy {
 
     if (this.type === 'dropdown') {
       this.ctrl.selectInstance = render(this.reactSelect, this.container);
+
+      this.ctrl.selectInstance._openPopupIfClosed();
     } else {
       this.ctrl.selectInstance = hydrate(this.reactSelect, this.container);
     }
-
-    this.ctrl.selectInstance._openPopupIfClosed();
   }
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "4.1.8",
+  "version": "4.1.12",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -67,7 +67,7 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.16.7",
+    "@babel/cli": "^7.16.8",
     "@babel/eslint-parser": "^7.16.5",
     "@jetbrains/eslint-config": "^5.3.1",
     "@jetbrains/generator-ring-ui": "^4.1.4",
@@ -75,20 +75,20 @@
     "@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.12",
+    "@storybook/addon-docs": "6.4.10",
+    "@storybook/addon-essentials": "6.4.12",
     "@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",
@@ -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.7",
     "merge-options": "^3.0.4",
     "mocha": "^9.1.3",
     "pinst": "^2.1.6",
@@ -188,10 +188,10 @@
     "extricate-loader": "^3.0.0",
     "fastdom": "^1.0.10",
     "file-loader": "^6.2.0",
-    "focus-trap": "^6.7.1",
+    "focus-trap": "^6.7.2",
     "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",
@@ -221,5 +221,5 @@
     "node": ">=7.4",
     "npm": ">=6.0.0"
   },
-  "gitHead": "dca1856fa248b940b4375685e61b9e8687317b4d"
+  "gitHead": "48dc9eeda100d347581148a0453ea2d8aa6b88e7"
 }