uselagoon · DaveDarsa · Sep 3, 2023 · Aug 18, 2023
diff --git a/src/components/AddTask/components/DrushArchiveDump.js b/src/components/AddTask/components/DrushArchiveDump.js
@@ -23,7 +23,7 @@ const taskDrushArchiveDump = gql`
   }
 `;
 
-const DrushArchiveDump = ({ pageEnvironment, onCompleted, onError }) => (
+const DrushArchiveDump = ({ pageEnvironment, onCompleted, onError, onNewTask }) => (
   <Mutation
     mutation={taskDrushArchiveDump}
     onCompleted={onCompleted}
@@ -32,7 +32,10 @@ const DrushArchiveDump = ({ pageEnvironment, onCompleted, onError }) => (
       environment: pageEnvironment.id,
     }}
   >
-    {taskDrushArchiveDump => {
+    {(taskDrushArchiveDump, { loading, data }) => {
+      if (data) {
+        onNewTask();
+      }
       return (
         <SelectWrapper>
           <div className="envSelect">
@@ -54,7 +57,7 @@ const DrushArchiveDump = ({ pageEnvironment, onCompleted, onError }) => (
               required
             />
           </div>
-          <Button action={taskDrushArchiveDump}>Run task</Button>
+          <Button action={taskDrushArchiveDump} disabled={loading}>{loading ? <span className="loader"></span> : "Run task"}</Button>
         </SelectWrapper>
       );
     }}

diff --git a/src/components/AddTask/components/DrushCacheClear.js b/src/components/AddTask/components/DrushCacheClear.js
@@ -23,7 +23,7 @@ const taskDrushCacheClear = gql`
   }
 `;
 
-const DrushCacheClear = ({ pageEnvironment, onCompleted, onError }) => (
+const DrushCacheClear = ({ pageEnvironment, onCompleted, onError, onNewTask }) => (
   <Mutation
     mutation={taskDrushCacheClear}
     onCompleted={onCompleted}
@@ -32,7 +32,10 @@ const DrushCacheClear = ({ pageEnvironment, onCompleted, onError }) => (
       environment: pageEnvironment.id,
     }}
   >
-    {taskDrushCacheClear => {
+    {(taskDrushCacheClear, { loading, data }) => {
+      if (data) {
+        onNewTask();
+      }
       return (
         <SelectWrapper>
           <div className="envSelect">
@@ -54,7 +57,7 @@ const DrushCacheClear = ({ pageEnvironment, onCompleted, onError }) => (
               required
             />
           </div>
-          <Button action={taskDrushCacheClear}>Run task</Button>
+          <Button disabled={loading} action={taskDrushCacheClear}>{loading ? <span className="loader"></span> : "Run task"}</Button>
         </SelectWrapper>
       );
     }}

diff --git a/src/components/AddTask/components/DrushCron.js b/src/components/AddTask/components/DrushCron.js
@@ -24,7 +24,7 @@ const taskDrushCron = gql`
   }
 `;
 
-const DrushCron = ({ pageEnvironment, onCompleted, onError }) => (
+const DrushCron = ({ pageEnvironment, onCompleted, onError, onNewTask }) => (
   <Mutation
     mutation={taskDrushCron}
     onCompleted={onCompleted}
@@ -33,7 +33,10 @@ const DrushCron = ({ pageEnvironment, onCompleted, onError }) => (
       environment: pageEnvironment.id,
     }}
   >
-    {taskDrushCron => {
+    {(taskDrushCron, { loading, data }) => {
+      if (data) {
+        onNewTask();
+      }
       return (
         <SelectWrapper>
           <div className="envSelect">
@@ -55,7 +58,8 @@ const DrushCron = ({ pageEnvironment, onCompleted, onError }) => (
               required
             />
           </div>
-          <Button action={taskDrushCron}>Run task</Button>
+          <Button action={taskDrushCron} disabled={!loading}>{loading ? <span className="loader"></span> : "Run task"}</Button>
+          <Button action={taskDrushCron} disabled={loading}>{loading ? <span className="loader"></span> : "Run task"}</Button>
         </SelectWrapper>
       );
     }}

diff --git a/src/components/AddTask/components/DrushRsyncFiles.js b/src/components/AddTask/components/DrushRsyncFiles.js
@@ -33,9 +33,13 @@ const DrushRsyncFiles = ({
   onError,
   options,
   getEnvName,
+  onNewTask,
 }) => (
   <Mutation mutation={taskDrushRsyncFiles} onCompleted={onCompleted} onError={onError}>
     {(taskDrushRsyncFiles, { loading, called, error, data }) => {
+      if (data) {
+        onNewTask();
+      }
       return (
         <SelectWrapper>
           <div className="warning">
@@ -82,9 +86,9 @@ const DrushRsyncFiles = ({
                 },
               })
             }
-            disabled={!selectedSourceEnv}
+            disabled={!selectedSourceEnv || loading }
           >
-            Run task
+            {loading ? <span className="loader"></span> : "Run task"}
           </Button>
         </SelectWrapper>
       );

diff --git a/src/components/AddTask/components/DrushSqlDump.js b/src/components/AddTask/components/DrushSqlDump.js
@@ -23,7 +23,7 @@ const taskDrushSqlDump = gql`
   }
 `;
 
-const DrushSqlDump = ({ pageEnvironment, onCompleted, onError }) => (
+const DrushSqlDump = ({ pageEnvironment, onCompleted, onError, onNewTask }) => (
   <Mutation
     mutation={taskDrushSqlDump}
     onCompleted={onCompleted}
@@ -32,7 +32,10 @@ const DrushSqlDump = ({ pageEnvironment, onCompleted, onError }) => (
       environment: pageEnvironment.id,
     }}
   >
-    {taskDrushSqlDump => {
+    {(taskDrushSqlDump, { loading, data }) => {
+      if (data) {
+        onNewTask();
+      }
       return (
         <SelectWrapper>
           <div className="envSelect">
@@ -54,7 +57,7 @@ const DrushSqlDump = ({ pageEnvironment, onCompleted, onError }) => (
               required
             />
           </div>
-          <Button action={taskDrushSqlDump}>Run task</Button>
+          <Button action={taskDrushSqlDump} disabled={loading}>{loading ? <span className="loader"></span> : "Run task"}</Button>
         </SelectWrapper>
       );
     }}

diff --git a/src/components/AddTask/components/DrushSqlSync.js b/src/components/AddTask/components/DrushSqlSync.js
@@ -33,9 +33,13 @@ const DrushSqlSync = ({
   onError,
   options,
   getEnvName,
+  onNewTask,
 }) => (
   <Mutation mutation={taskDrushSqlSync} onCompleted={onCompleted} onError={onError}>
     {(taskDrushSqlSync, { loading, called, error, data }) => {
+      if (data) {
+        onNewTask();
+      }
       return (
         <SelectWrapper>
           <div className="warning">
@@ -82,9 +86,9 @@ const DrushSqlSync = ({
                 },
               })
             }
-            disabled={!selectedSourceEnv}
+            disabled={!selectedSourceEnv || loading}
           >
-            Run task
+            {loading ? <span className="loader"></span> : "Run task"}
           </Button>
         </SelectWrapper>
       );

diff --git a/src/components/AddTask/components/DrushUserLogin.js b/src/components/AddTask/components/DrushUserLogin.js
@@ -23,7 +23,7 @@ const taskDrushUserLogin = gql`
   }
 `;
 
-const DrushUserLogin = ({ pageEnvironment, onCompleted, onError }) => (
+const DrushUserLogin = ({ pageEnvironment, onCompleted, onError, onNewTask }) => (
   <Mutation
     mutation={taskDrushUserLogin}
     onCompleted={onCompleted}
@@ -32,7 +32,10 @@ const DrushUserLogin = ({ pageEnvironment, onCompleted, onError }) => (
       environment: pageEnvironment.id,
     }}
   >
-    {taskDrushUserLogin => {
+    {(taskDrushUserLogin, { loading, data }) => {
+      if (data) {
+      onNewTask();
+    }
       return (
         <SelectWrapper>
           <div className="envSelect">
@@ -54,7 +57,7 @@ const DrushUserLogin = ({ pageEnvironment, onCompleted, onError }) => (
               required
             />
           </div>
-          <Button action={taskDrushUserLogin}>Run task</Button>
+          <Button action={taskDrushUserLogin} disabled={loading}>{loading ? <span className="loader"></span> : "Run task"}</Button>
         </SelectWrapper>
       );
     }}

diff --git a/src/components/AddTask/components/InvokeRegisteredTask.js b/src/components/AddTask/components/InvokeRegisteredTask.js
@@ -43,6 +43,7 @@ const InvokeRegisteredTask = ({
   onError,
   isConfirmOpen,
   setIsConfirmOpen,
+  onNewTask,
 }) => {
   let taskArgumentsExist = false;
   let argumentVariablesHaveValues = true;
@@ -78,7 +79,10 @@ const InvokeRegisteredTask = ({
         })(),
       }}
     >
-      {mutationInvokeRegisteredTask => {
+      {(mutationInvokeRegisteredTask, { loading, data }) => {
+        if (data) {
+          onNewTask();
+        }
         return (
           <StyledRegisteredTasks>
             <div className="taskArguments">
@@ -147,10 +151,10 @@ const InvokeRegisteredTask = ({
               />
             )) || (
               <Button
-                disabled={taskArgumentsExist && !argumentVariablesHaveValues}
+                disabled={taskArgumentsExist && !argumentVariablesHaveValues || loading}
                 action={mutationInvokeRegisteredTask}
               >
-                Run task
+                {loading ? <span className="loader"></span> : "Run task"}
               </Button>
             )}
           </StyledRegisteredTasks>

diff --git a/src/components/AddTask/components/Styles.tsx b/src/components/AddTask/components/Styles.tsx
@@ -36,6 +36,37 @@ export const SelectWrapper = styled.div`
     color: white;
     padding: 10px;
   }
+
+  .btn--disabled {
+    margin-right: 0;
+  }
+
+  .loader {
+    display: inline-block;
+    width: 50px;
+    height: 15px;
+  }
+
+  .loader:after {
+    content: " ";
+    display: block;
+    width: 20px;
+    height: 20px;
+    margin-left: 15px;
+    border-radius: 50%;
+    border: 2px solid ${color.blue};
+    border-color: ${color.blue} transparent ${color.blue} transparent;
+    animation: loader 1.2s linear infinite;
+  }
+
+  @keyframes loader {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 `;
 
 export const StyledRegisteredTasks = styled.div`
@@ -63,4 +94,35 @@ export const StyledRegisteredTasks = styled.div`
     color: white;
     padding: 10px;
   }
+
+  .btn--disabled {
+    margin-right: 0;
+  }
+
+  .loader {
+    display: inline-block;
+    width: 50px;
+    height: 15px;
+  }
+
+  .loader:after {
+    content: " ";
+    display: block;
+    width: 20px;
+    height: 20px;
+    margin-left: 15px;
+    border-radius: 50%;
+    border: 2px solid ${color.blue};
+    border-color: ${color.blue} transparent ${color.blue} transparent;
+    animation: loader 1.2s linear infinite;
+  }
+
+  @keyframes loader {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 `;
diff --git a/src/components/AddTask/index.js b/src/components/AddTask/index.js
@@ -26,6 +26,7 @@ const AddTask = ({
   onCompleted,
   onError,
   options,
+  onNewTask,
 }) => {
   const newTaskComponents = {
     DrushArchiveDump,
@@ -70,6 +71,7 @@ const AddTask = ({
                 selectedTask={selectedTask}
                 onCompleted={onCompleted}
                 onError={onError}
+                onNewTask={onNewTask}
               />
             </div>
           )}

diff --git a/src/components/DeployLatest/StyledDeployLatest.js b/src/components/DeployLatest/StyledDeployLatest.js
@@ -32,4 +32,31 @@ export const NewDeployment = styled.div`
     text-align: right;
     width: 100%;
   }
+  .btn--disabled {
+    margin-right: 0;
+  }
+  .loader {
+    display: inline-block;
+    width: 50px;
+    height: 15px;
+  }
+  .loader:after {
+    content: " ";
+    display: block;
+    width: 20px;
+    height: 20px;
+    margin-left: 15px;
+    border-radius: 50%;
+    border: 2px solid ${color.blue};
+    border-color: ${color.blue} transparent ${color.blue} transparent;
+    animation: loader 1.2s linear infinite;
+  }
+  @keyframes loader {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 `;
diff --git a/src/components/DeployLatest/index.js b/src/components/DeployLatest/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import { Mutation } from 'react-apollo';
 
 import Button from 'components/Button';
@@ -15,7 +15,7 @@ const DEPLOY_ENVIRONMENT_LATEST_MUTATION = gql`
 /**
  * Button that deploys the latest environment.
  */
-const DeployLatest = ({ pageEnvironment: environment, ...rest }) => {
+const DeployLatest = ({ pageEnvironment: environment, onDeploy, ...rest }) => {
   let deploymentsEnabled = true;
 
   if (environment.deployType === 'branch' || environment.deployType === 'promote') {
@@ -55,12 +55,14 @@ const DeployLatest = ({ pageEnvironment: environment, ...rest }) => {
           >
             {(deploy, { loading, error, data }) => {
               const success = data && data.deployEnvironmentLatest === 'success';
+              if (success) {
+                onDeploy();
+              }
               return (
                 <React.Fragment>
                   <Button action={deploy} disabled={loading}>
-                    Deploy
+                    {loading ? <span className="loader"></span> : "Deploy"}
                   </Button>
-
                   {success && <div className="deploy_result">Deployment queued.</div>}
 
                   {error && (