From 0be9b458e7e39c67d4671967b931c3d6b27f85e3 Mon Sep 17 00:00:00 2001
From: cgoodwin90 <chris_2190@hotmail.com>
Date: Fri, 18 Aug 2023 17:14:34 +1000
Subject: [PATCH] First pass at adding refetch functionality for deployments &
 tasks

---
 .../AddTask/components/DrushArchiveDump.js    |  9 ++-
 .../AddTask/components/DrushCacheClear.js     |  9 ++-
 .../AddTask/components/DrushCron.js           | 10 ++-
 .../AddTask/components/DrushRsyncFiles.js     |  8 ++-
 .../AddTask/components/DrushSqlDump.js        |  9 ++-
 .../AddTask/components/DrushSqlSync.js        |  8 ++-
 .../AddTask/components/DrushUserLogin.js      |  9 ++-
 .../components/InvokeRegisteredTask.js        | 10 ++-
 src/components/AddTask/components/Styles.tsx  | 62 +++++++++++++++++++
 src/components/AddTask/index.js               |  2 +
 .../DeployLatest/StyledDeployLatest.js        | 27 ++++++++
 src/components/DeployLatest/index.js          | 10 +--
 src/pages/deployments.js                      |  6 +-
 src/pages/tasks.js                            |  6 +-
 14 files changed, 155 insertions(+), 30 deletions(-)

diff --git a/src/components/AddTask/components/DrushArchiveDump.js b/src/components/AddTask/components/DrushArchiveDump.js
index d47b0c08..53bc6e32 100644
--- 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
index b722d817..baa83e75 100644
--- 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
index 46082fc9..a1dc044c 100644
--- 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
index b538ee35..049c6782 100644
--- 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
index 3b498870..258b1765 100644
--- 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
index 8af21480..353cb187 100644
--- 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
index e9ffa15a..2a3f52fc 100644
--- 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
index cff279cc..dfc3726f 100644
--- 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
index 4e9f6b70..e24a548f 100644
--- 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
index ead81e6d..74df16e8 100644
--- 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
index 352806de..8e474e6d 100644
--- 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
index 9855b1ea..df675996 100644
--- 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 && (
diff --git a/src/pages/deployments.js b/src/pages/deployments.js
index a79e3fb9..a2c58dbe 100644
--- a/src/pages/deployments.js
+++ b/src/pages/deployments.js
@@ -46,13 +46,15 @@ const resultLimit = urlResultLimit === -1 ? null : urlResultLimit;
  */
 export const PageDeployments = ({ router }) => {
   const { continueTour } = useTourContext();
-  const { data, error, loading, subscribeToMore } = useQuery(EnvironmentWithDeploymentsQuery, {
+  const { data, error, loading, subscribeToMore, refetch } = useQuery(EnvironmentWithDeploymentsQuery, {
     variables: {
       openshiftProjectName: router.query.openshiftProjectName,
       limit: resultLimit,
     },
   });
 
+  const handleRefetch = async () => await refetch({ openshiftProjectName: router.query.openshiftProjectName, limit: resultLimit, });
+
   useEffect(() => {
     if (!loading && data?.environment) {
       continueTour();
@@ -160,7 +162,7 @@ export const PageDeployments = ({ router }) => {
         <DeploymentsWrapper>
           <NavTabs activeTab="deployments" environment={environment} />
           <div className="content">
-            <DeployLatest pageEnvironment={environment} />
+            <DeployLatest pageEnvironment={environment} onDeploy={handleRefetch} />
             <Deployments
               deployments={environment.deployments}
               environmentSlug={environment.openshiftProjectName}
diff --git a/src/pages/tasks.js b/src/pages/tasks.js
index 6e7b5b7c..4277cd56 100644
--- a/src/pages/tasks.js
+++ b/src/pages/tasks.js
@@ -48,13 +48,15 @@ const resultLimit = urlResultLimit === -1 ? null : urlResultLimit;
  */
 export const PageTasks = ({ router, renderAddTasks }) => {
   const { continueTour } = useTourContext();
-  const { data, error, loading, subscribeToMore } = useQuery(EnvironmentWithTasksQuery, {
+  const { data, error, loading, subscribeToMore, refetch } = useQuery(EnvironmentWithTasksQuery, {
     variables: {
       openshiftProjectName: router.query.openshiftProjectName,
       limit: resultLimit,
     },
   });
 
+  const handleRefetch = async () => await refetch({ openshiftProjectName: router.query.openshiftProjectName, limit: resultLimit, });
+
   useEffect(() => {
     if (!loading && data?.environment?.tasks.length) {
       setTimeout(() => {
@@ -165,7 +167,7 @@ export const PageTasks = ({ router, renderAddTasks }) => {
         <TasksWrapper>
           <NavTabs activeTab="tasks" environment={environment} />
           <div className="content">
-            {!renderAddTasks && <AddTask pageEnvironment={environment} />}
+            {!renderAddTasks && <AddTask pageEnvironment={environment} onNewTask={handleRefetch} />}
             <Tasks
               tasks={environment.tasks}
               environmentSlug={environment.openshiftProjectName}