Fix execution erorr handling

Prior to this fix, upon clicking on `Execute`, the executions page would
get loaded before waiting for a response. If an error would get returned
from the request, it would get redirected to executions page with a loading
circle, without them actually loading. This patch makes sure to wait for the
response before redirecting to the executions page. If an error occurs, it
gets displayed in a pop-up, but the modal never closes.

src/components/modules/TransferModule/ReplicaExecutionOptions/ReplicaExecutionOptions.tsx

@@ -25,6 +25,7 @@ import { executionOptions } from "@src/constants";
 import type { Field } from "@src/@types/Field";
 
 import executionImage from "./images/execution.svg";
+import LoadingButton from "@src/components/ui/LoadingButton/LoadingButton";
 
 const Wrapper = styled.div<any>`
   display: flex;
@@ -56,6 +57,7 @@ type Props = {
   disableExecutionOptions: boolean;
   onChange?: (fieldName: string, fieldValue: string) => void;
   executionLabel: string;
+  executing?: boolean;
   onCancelClick: () => void;
   onExecuteClick: (options: Field[]) => void;
 };
@@ -66,6 +68,7 @@ type State = {
 class ReplicaExecutionOptions extends React.Component<Props, State> {
   static defaultProps = {
     executionLabel: "Execute",
+    executing: false,
   };
 
   state: State = {
@@ -137,13 +140,17 @@ class ReplicaExecutionOptions extends React.Component<Props, State> {
           <Button secondary onClick={this.props.onCancelClick}>
             Cancel
           </Button>
-          <Button
-            onClick={() => {
-              this.props.onExecuteClick(this.state.fields);
-            }}
-          >
-            {this.props.executionLabel}
-          </Button>
+          {this.props.executing ? (
+            <LoadingButton>Executing ...</LoadingButton>
+          ) : (
+            <Button
+              onClick={() => {
+                this.props.onExecuteClick(this.state.fields);
+              }}
+            >
+              {this.props.executionLabel}
+            </Button>
+          )}
         </Buttons>
       </Wrapper>
     );

src/components/smart/ReplicaDetailsPage/ReplicaDetailsPage.tsx

@@ -71,6 +71,7 @@ type State = {
   pausePolling: boolean;
   initialLoading: boolean;
   deploying: boolean;
+  executing: boolean;
 };
 @observer
 class ReplicaDetailsPage extends React.Component<Props, State> {
@@ -89,6 +90,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
     pausePolling: false,
     initialLoading: true,
     deploying: false,
+    executing: false,
   };
 
   stopPolling: boolean | null = null;
@@ -549,14 +551,20 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
     }
   }
 
-  executeReplica(fields: Field[]) {
+  async executeReplica(fields: Field[]) {
     const replica = this.replica;
     if (!replica) {
       return;
     }
-    replicaStore.execute(replica.id, fields);
-    this.handleCloseOptionsModal();
-    this.props.history.push(`/transfers/${replica.id}/executions`);
+    this.setState({ executing: true });
+    try {
+      await replicaStore.execute(replica.id, fields);
+
+      this.handleCloseOptionsModal();
+      this.props.history.push(`/transfers/${replica.id}/executions`);
+    } finally {
+      this.setState({ executing: false });
+    }
   }
 
   async pollData() {
@@ -840,6 +848,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
             onExecuteClick={fields => {
               this.executeReplica(fields);
             }}
+            executing={this.state.executing}
           />
         </Modal>
         {this.state.showDeploymentModal ? (