feat(ux): Disabled Execute button while request is in progress (#6776)

Avoid sending multiple request while old is in progress

Co-authored-by: Tim Lai <timothy.lai@gmail.com>

src/core/components/execute.jsx

@@ -11,7 +11,8 @@ export default class Execute extends Component {
     method: PropTypes.string.isRequired,
     oas3Selectors: PropTypes.object.isRequired,
     oas3Actions: PropTypes.object.isRequired,
-    onExecute: PropTypes.func
+    onExecute: PropTypes.func,
+    disabled: PropTypes.bool
   }
 
   handleValidateParameters = () => {
@@ -24,7 +25,7 @@ export default class Execute extends Component {
     let { path, method, specSelectors, oas3Selectors, oas3Actions } = this.props
     let validationErrors = {
       missingBodyValue: false,
-      missingRequiredKeys: [] 
+      missingRequiredKeys: []
     }
     // context: reset errors, then (re)validate
     oas3Actions.clearRequestBodyValidateError({ path, method })
@@ -92,8 +93,9 @@ export default class Execute extends Component {
   onChangeProducesWrapper = ( val ) => this.props.specActions.changeProducesValue([this.props.path, this.props.method], val)
 
   render(){
+    const { disabled } = this.props
     return (
-        <button className="btn execute opblock-control__btn" onClick={ this.onClick }>
+        <button className="btn execute opblock-control__btn" onClick={ this.onClick } disabled={disabled}>
           Execute
         </button>
     )

src/core/components/operation.jsx

@@ -198,7 +198,8 @@ export default class Operation extends PureComponent {
                     oas3Actions={ oas3Actions }
                     path={ path }
                     method={ method }
-                    onExecute={ onExecute } />
+                    onExecute={ onExecute }
+                    disabled={executeInProgress}/>
               }
 
               { (!tryItOutEnabled || !response || !allowTryItOut) ? null :