Merge pull request #977 from ParthS007/button-disable

Disable web buttons in forms after onClick

CHANGELOG.rst

@@ -3,4 +3,11 @@ Changelog
 
 in development
 --------------
-* Create a changelog and required machinery
+
+Added
+~~~~~
+
+* Added feature for disabling button for synchronous responses
+    - Button gets disabled onClick on `Connect` and `Submit` in st2-login and st2-history module respectively
+
+    Contributed by @ParthS007

apps/st2-history/history-popup.component.js

@@ -39,6 +39,7 @@ export default class HistoryPopup extends React.Component {
 
   state = {
     preview: false,
+    disabled: false,
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -89,6 +90,7 @@ export default class HistoryPopup extends React.Component {
       delete this.state.payload[payLoadKey];
     }
     this.props.onSubmit(this.state.payload);
+    this.setState({ disabled: true });
   }
 
   render() {
@@ -136,6 +138,7 @@ export default class HistoryPopup extends React.Component {
                     submit
                     className="st2-details__toolbar-button"
                     value="Submit"
+                    disabled={this.state.disabled}
                     onClick={(e) => this.handleSubmit(e)}
                     data-test="rerun_submit"
                   />

modules/st2-login/login.component.js

@@ -157,6 +157,7 @@ export default class Login extends React.Component {
       username: '',
       password: '',
       remember: true,
+      disabled: false,
 
       server,
       servers,
@@ -168,13 +169,13 @@ export default class Login extends React.Component {
 
   connect(e) {
     e.preventDefault();
-
+    this.setState({ disabled: true });
     this.setState({ error: null });
 
     const { server, username, password, remember } = this.state;
     return api.connect(server, username, password, remember)
       .then(() => this.props.onConnect())
-      .catch((err) => this.setState({ error: err.message }))
+      .catch((err) => this.setState({ error: err.message, disabled: false }))
     ;
   }
 
@@ -240,6 +241,7 @@ export default class Login extends React.Component {
               className={cx('st2-forms__button', style.button)}
               type="submit"
               value="Connect"
+              disabled={this.state.disabled}
             />
 
             <label className={style.checkboxWrapper}>