From dc0256441fcb157af5f0e529f0ec9ca343e4536e Mon Sep 17 00:00:00 2001
From: "Keith J. Grant" <barkeep@keithjgrant.com>
Date: Thu, 15 Apr 2021 14:51:39 -0700
Subject: [PATCH] disable launch buttons to prevent double-clicking

---
 awx/ui_next/src/components/JobList/JobListItem.jsx | 10 +++++++---
 .../src/components/LaunchButton/LaunchButton.jsx   |  7 +++++++
 .../components/LaunchButton/ReLaunchDropDown.jsx   | 14 +++++++++++---
 .../components/TemplateList/TemplateListItem.jsx   |  4 ++--
 .../src/screens/Job/JobDetail/JobDetail.jsx        |  6 ++++--
 .../screens/Job/JobOutput/shared/OutputToolbar.jsx |  6 ++++--
 .../ProjectJobTemplatesListItem.jsx                |  3 ++-
 .../JobTemplateDetail/JobTemplateDetail.jsx        |  3 ++-
 .../WorkflowJobTemplateDetail.jsx                  |  3 ++-
 .../VisualizerToolbar.jsx                          |  6 ++++--
 10 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/awx/ui_next/src/components/JobList/JobListItem.jsx b/awx/ui_next/src/components/JobList/JobListItem.jsx
index 62b51a551d..0efc24829d 100644
--- a/awx/ui_next/src/components/JobList/JobListItem.jsx
+++ b/awx/ui_next/src/components/JobList/JobListItem.jsx
@@ -91,18 +91,22 @@ function JobListItem({
           >
             {job.status === 'failed' && job.type === 'job' ? (
               <LaunchButton resource={job}>
-                {({ handleRelaunch }) => (
-                  <ReLaunchDropDown handleRelaunch={handleRelaunch} />
+                {({ handleRelaunch, isSending }) => (
+                  <ReLaunchDropDown
+                    handleRelaunch={handleRelaunch}
+                    isSending={isSending}
+                  />
                 )}
               </LaunchButton>
             ) : (
               <LaunchButton resource={job}>
-                {({ handleRelaunch }) => (
+                {({ handleRelaunch, isSending }) => (
                   <Button
                     ouiaId={`${job.id}-relaunch-button`}
                     variant="plain"
                     onClick={handleRelaunch}
                     aria-label={i18n._(t`Relaunch`)}
+                    isDisabled={isSending}
                   >
                     <RocketIcon />
                   </Button>
diff --git a/awx/ui_next/src/components/LaunchButton/LaunchButton.jsx b/awx/ui_next/src/components/LaunchButton/LaunchButton.jsx
index e846c5fbd8..c6d0a72da4 100644
--- a/awx/ui_next/src/components/LaunchButton/LaunchButton.jsx
+++ b/awx/ui_next/src/components/LaunchButton/LaunchButton.jsx
@@ -36,9 +36,12 @@ function LaunchButton({ resource, i18n, children, history }) {
   const [showLaunchPrompt, setShowLaunchPrompt] = useState(false);
   const [launchConfig, setLaunchConfig] = useState(null);
   const [surveyConfig, setSurveyConfig] = useState(null);
+  const [isSending, setIsSending] = useState(false);
   const [resourceCredentials, setResourceCredentials] = useState([]);
   const [error, setError] = useState(null);
+
   const handleLaunch = async () => {
+    setIsSending(true);
     const readLaunch =
       resource.type === 'workflow_job_template'
         ? WorkflowJobTemplatesAPI.readLaunch(resource.id)
@@ -96,6 +99,7 @@ function LaunchButton({ resource, i18n, children, history }) {
       history.push(`/jobs/${job.id}/output`);
     } catch (launchError) {
       setError(launchError);
+      setIsSending(false);
     }
   };
 
@@ -103,6 +107,7 @@ function LaunchButton({ resource, i18n, children, history }) {
     let readRelaunch;
     let relaunch;
 
+    setIsSending(true);
     if (resource.type === 'inventory_update') {
       // We'll need to handle the scenario where the src no longer exists
       readRelaunch = InventorySourcesAPI.readLaunchUpdate(
@@ -146,6 +151,7 @@ function LaunchButton({ resource, i18n, children, history }) {
       }
     } catch (err) {
       setError(err);
+      setIsSending(false);
     }
   };
 
@@ -154,6 +160,7 @@ function LaunchButton({ resource, i18n, children, history }) {
       {children({
         handleLaunch,
         handleRelaunch,
+        isSending,
       })}
       {error && (
         <AlertModal
diff --git a/awx/ui_next/src/components/LaunchButton/ReLaunchDropDown.jsx b/awx/ui_next/src/components/LaunchButton/ReLaunchDropDown.jsx
index 911c5390b8..51c0158fc9 100644
--- a/awx/ui_next/src/components/LaunchButton/ReLaunchDropDown.jsx
+++ b/awx/ui_next/src/components/LaunchButton/ReLaunchDropDown.jsx
@@ -11,11 +11,17 @@ import {
 } from '@patternfly/react-core';
 import { RocketIcon } from '@patternfly/react-icons';
 
-function ReLaunchDropDown({ isPrimary = false, handleRelaunch, i18n, ouiaId }) {
-  const [isOpen, setIsOPen] = useState(false);
+function ReLaunchDropDown({
+  isPrimary = false,
+  handleRelaunch,
+  isSending,
+  i18n,
+  ouiaId,
+}) {
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggle = () => {
-    setIsOPen(prev => !prev);
+    setIsOpen(prev => !prev);
   };
 
   const dropdownItems = [
@@ -35,6 +41,7 @@ function ReLaunchDropDown({ isPrimary = false, handleRelaunch, i18n, ouiaId }) {
       onClick={() => {
         handleRelaunch({ hosts: 'all' });
       }}
+      isDisabled={isSending}
     >
       {i18n._(t`All`)}
     </DropdownItem>,
@@ -46,6 +53,7 @@ function ReLaunchDropDown({ isPrimary = false, handleRelaunch, i18n, ouiaId }) {
       onClick={() => {
         handleRelaunch({ hosts: 'failed' });
       }}
+      isDisabled={isSending}
     >
       {i18n._(t`Failed hosts`)}
     </DropdownItem>,
diff --git a/awx/ui_next/src/components/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/components/TemplateList/TemplateListItem.jsx
index ca935c6f7a..cf8bb37202 100644
--- a/awx/ui_next/src/components/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/components/TemplateList/TemplateListItem.jsx
@@ -176,11 +176,11 @@ function TemplateListItem({
             tooltip={i18n._(t`Launch Template`)}
           >
             <LaunchButton resource={template}>
-              {({ handleLaunch }) => (
+              {({ handleLaunch, isSending }) => (
                 <Button
                   ouiaId={`${template.id}-launch-button`}
                   id={`template-action-launch-${template.id}`}
-                  isDisabled={isDisabled}
+                  isDisabled={isDisabled || isSending}
                   aria-label={i18n._(t`Launch template`)}
                   variant="plain"
                   onClick={handleLaunch}
diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
index 8fff5d825c..4e455440d0 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
@@ -371,21 +371,23 @@ function JobDetail({ job, i18n }) {
           job.summary_fields.user_capabilities.start &&
           (job.status === 'failed' && job.type === 'job' ? (
             <LaunchButton resource={job}>
-              {({ handleRelaunch }) => (
+              {({ handleRelaunch, isSending }) => (
                 <ReLaunchDropDown
                   ouiaId="job-detail-relaunch-dropdown"
                   isPrimary
                   handleRelaunch={handleRelaunch}
+                  isSending={isSending}
                 />
               )}
             </LaunchButton>
           ) : (
             <LaunchButton resource={job} aria-label={i18n._(t`Relaunch`)}>
-              {({ handleRelaunch }) => (
+              {({ handleRelaunch, isSending }) => (
                 <Button
                   ouiaId="job-detail-relaunch-button"
                   type="submit"
                   onClick={handleRelaunch}
+                  isDisabled={isSending}
                 >
                   {i18n._(t`Relaunch`)}
                 </Button>
diff --git a/awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx b/awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx
index 03faba1faa..c13daeb498 100644
--- a/awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx
+++ b/awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx
@@ -144,21 +144,23 @@ const OutputToolbar = ({
           >
             {job.status === 'failed' && job.type === 'job' ? (
               <LaunchButton resource={job}>
-                {({ handleRelaunch }) => (
+                {({ handleRelaunch, isSending }) => (
                   <ReLaunchDropDown
                     handleRelaunch={handleRelaunch}
                     ouiaId="job-output-relaunch-dropdown"
+                    isSending={isSending}
                   />
                 )}
               </LaunchButton>
             ) : (
               <LaunchButton resource={job}>
-                {({ handleRelaunch }) => (
+                {({ handleRelaunch, isSending }) => (
                   <Button
                     ouiaId="job-output-relaunch-button"
                     variant="plain"
                     onClick={handleRelaunch}
                     aria-label={i18n._(t`Relaunch`)}
+                    isDisabled={isSending}
                   >
                     <RocketIcon />
                   </Button>
diff --git a/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.jsx b/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.jsx
index 9f93620f56..c6cdf5c791 100644
--- a/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesListItem.jsx
@@ -116,12 +116,13 @@ function ProjectJobTemplateListItem({
           {canLaunch && template.type === 'job_template' && (
             <Tooltip content={i18n._(t`Launch Template`)} position="top">
               <LaunchButton resource={template}>
-                {({ handleLaunch }) => (
+                {({ handleLaunch, isSending }) => (
                   <Button
                     ouiaId={`${template.id}-launch-button`}
                     css="grid-column: 1"
                     variant="plain"
                     onClick={handleLaunch}
+                    isDisabled={isSending}
                   >
                     <RocketIcon />
                   </Button>
diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
index a003dcc9d5..47c06a3f6d 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
@@ -387,12 +387,13 @@ function JobTemplateDetail({ i18n, template }) {
           )}
         {canLaunch && (
           <LaunchButton resource={template} aria-label={i18n._(t`Launch`)}>
-            {({ handleLaunch }) => (
+            {({ handleLaunch, isSending }) => (
               <Button
                 ouiaId="job-template-detail-launch-button"
                 variant="secondary"
                 type="submit"
                 onClick={handleLaunch}
+                isDisabled={isSending}
               >
                 {i18n._(t`Launch`)}
               </Button>
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
index f1e6775ed5..989ad776f1 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
@@ -227,12 +227,13 @@ function WorkflowJobTemplateDetail({ template, i18n }) {
           )}
         {canLaunch && (
           <LaunchButton resource={template} aria-label={i18n._(t`Launch`)}>
-            {({ handleLaunch }) => (
+            {({ handleLaunch, isSending }) => (
               <Button
                 ouiaId="workflow-job-template-detail-launch-button"
                 variant="secondary"
                 type="submit"
                 onClick={handleLaunch}
+                isDisabled={isSending}
               >
                 {i18n._(t`Launch`)}
               </Button>
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx
index c0c18e2ab7..3083d7702f 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx
@@ -125,11 +125,13 @@ function VisualizerToolbar({
                 resource={template}
                 aria-label={i18n._(t`Launch workflow`)}
               >
-                {({ handleLaunch }) => (
+                {({ handleLaunch, isSending }) => (
                   <ActionButton
                     id="visualizer-launch"
                     variant="plain"
-                    isDisabled={hasUnsavedChanges || totalNodes === 0}
+                    isDisabled={
+                      hasUnsavedChanges || totalNodes === 0 || isSending
+                    }
                     onClick={handleLaunch}
                   >
                     <RocketIcon />