Merge pull request #9925 from keithjgrant/4249-prevent-double-launch

Prevent double-clicking/double-launching jobs

SUMMARY
Prevents double-launching a job if the user double-clicks the launch icon. This is done by disabling the button upon first launch. Applied to all instances of <LaunchButton>.
Addresses: #4249
ISSUE TYPE

Bugfix Pull Request

COMPONENT NAME

UI

Reviewed-by: Alex Corey <Alex.swansboro@gmail.com>
Reviewed-by: Kersom <None>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>

awx/ui_next/src/components/JobList/JobListItem.jsx

@@ -91,18 +91,22 @@ function JobListItem({
           >
             {job.status === 'failed' && job.type === 'job' ? (
               <LaunchButton resource={job}>
-                {({ handleRelaunch }) => (
+                {({ handleRelaunch, isLaunching }) => (
-                  <ReLaunchDropDown handleRelaunch={handleRelaunch} />
+                  <ReLaunchDropDown
+                    handleRelaunch={handleRelaunch}
+                    isLaunching={isLaunching}
+                  />
                 )}
               </LaunchButton>
             ) : (
               <LaunchButton resource={job}>
-                {({ handleRelaunch }) => (
+                {({ handleRelaunch, isLaunching }) => (
                   <Button
                     ouiaId={`${job.id}-relaunch-button`}
                     variant="plain"
                     onClick={handleRelaunch}
                     aria-label={i18n._(t`Relaunch`)}
+                    isDisabled={isLaunching}
                   >
                     <RocketIcon />
                   </Button>

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 [isLaunching, setIsLaunching] = useState(false);
   const [resourceCredentials, setResourceCredentials] = useState([]);
   const [error, setError] = useState(null);
+
   const handleLaunch = async () => {
+    setIsLaunching(true);
     const readLaunch =
       resource.type === 'workflow_job_template'
         ? WorkflowJobTemplatesAPI.readLaunch(resource.id)
@@ -96,6 +99,8 @@ function LaunchButton({ resource, i18n, children, history }) {
       history.push(`/jobs/${job.id}/output`);
     } catch (launchError) {
       setError(launchError);
+    } finally {
+      setIsLaunching(false);
     }
   };
 
@@ -103,6 +108,7 @@ function LaunchButton({ resource, i18n, children, history }) {
     let readRelaunch;
     let relaunch;
 
+    setIsLaunching(true);
     if (resource.type === 'inventory_update') {
       // We'll need to handle the scenario where the src no longer exists
       readRelaunch = InventorySourcesAPI.readLaunchUpdate(
@@ -146,6 +152,8 @@ function LaunchButton({ resource, i18n, children, history }) {
       }
     } catch (err) {
       setError(err);
+    } finally {
+      setIsLaunching(false);
     }
   };
 
@@ -154,6 +162,7 @@ function LaunchButton({ resource, i18n, children, history }) {
       {children({
         handleLaunch,
         handleRelaunch,
+        isLaunching,
       })}
       {error && (
         <AlertModal

awx/ui_next/src/components/LaunchButton/LaunchButton.test.jsx

@@ -114,6 +114,49 @@ describe('LaunchButton', () => {
     expect(history.location.pathname).toEqual('/jobs/9000/output');
   });
 
+  test('should disable button to prevent duplicate clicks', async () => {
+    WorkflowJobTemplatesAPI.readLaunch.mockResolvedValue({
+      data: {
+        can_start_without_user_input: true,
+      },
+    });
+    const history = createMemoryHistory({
+      initialEntries: ['/jobs/9000'],
+    });
+    WorkflowJobTemplatesAPI.launch.mockImplementation(async () => {
+      // return asynchronously so isLaunching isn't set back to false in the
+      // same tick
+      await sleep(10);
+      return {
+        data: {
+          id: 9000,
+        },
+      };
+    });
+    const wrapper = mountWithContexts(
+      <LaunchButton
+        resource={{
+          id: 1,
+          type: 'workflow_job_template',
+        }}
+      >
+        {({ handleLaunch, isLaunching }) => (
+          <button type="submit" onClick={handleLaunch} disabled={isLaunching} />
+        )}
+      </LaunchButton>,
+      {
+        context: {
+          router: { history },
+        },
+      }
+    );
+    const button = wrapper.find('button');
+    await act(() => button.prop('onClick')());
+    wrapper.update();
+
+    expect(wrapper.find('button').prop('disabled')).toEqual(true);
+  });
+
   test('should relaunch job correctly', async () => {
     JobsAPI.readRelaunch.mockResolvedValue({
       data: {

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 }) {
+function ReLaunchDropDown({
-  const [isOpen, setIsOPen] = useState(false);
+  isPrimary = false,
+  handleRelaunch,
+  isLaunching,
+  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={isLaunching}
     >
       {i18n._(t`All`)}
     </DropdownItem>,
@@ -46,6 +53,7 @@ function ReLaunchDropDown({ isPrimary = false, handleRelaunch, i18n, ouiaId }) {
       onClick={() => {
         handleRelaunch({ hosts: 'failed' });
       }}
+      isDisabled={isLaunching}
     >
       {i18n._(t`Failed hosts`)}
     </DropdownItem>,

awx/ui_next/src/components/TemplateList/TemplateListItem.jsx

@@ -176,11 +176,11 @@ function TemplateListItem({
             tooltip={i18n._(t`Launch Template`)}
           >
             <LaunchButton resource={template}>
-              {({ handleLaunch }) => (
+              {({ handleLaunch, isLaunching }) => (
                 <Button
                   ouiaId={`${template.id}-launch-button`}
                   id={`template-action-launch-${template.id}`}
-                  isDisabled={isDisabled}
+                  isDisabled={isDisabled || isLaunching}
                   aria-label={i18n._(t`Launch template`)}
                   variant="plain"
                   onClick={handleLaunch}

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, isLaunching }) => (
                 <ReLaunchDropDown
                   ouiaId="job-detail-relaunch-dropdown"
                   isPrimary
                   handleRelaunch={handleRelaunch}
+                  isLaunching={isLaunching}
                 />
               )}
             </LaunchButton>
           ) : (
             <LaunchButton resource={job} aria-label={i18n._(t`Relaunch`)}>
-              {({ handleRelaunch }) => (
+              {({ handleRelaunch, isLaunching }) => (
                 <Button
                   ouiaId="job-detail-relaunch-button"
                   type="submit"
                   onClick={handleRelaunch}
+                  isDisabled={isLaunching}
                 >
                   {i18n._(t`Relaunch`)}
                 </Button>

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, isLaunching }) => (
                   <ReLaunchDropDown
                     handleRelaunch={handleRelaunch}
                     ouiaId="job-output-relaunch-dropdown"
+                    isLaunching={isLaunching}
                   />
                 )}
               </LaunchButton>
             ) : (
               <LaunchButton resource={job}>
-                {({ handleRelaunch }) => (
+                {({ handleRelaunch, isLaunching }) => (
                   <Button
                     ouiaId="job-output-relaunch-button"
                     variant="plain"
                     onClick={handleRelaunch}
                     aria-label={i18n._(t`Relaunch`)}
+                    isDisabled={isLaunching}
                   >
                     <RocketIcon />
                   </Button>

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, isLaunching }) => (
                   <Button
                     ouiaId={`${template.id}-launch-button`}
                     css="grid-column: 1"
                     variant="plain"
                     onClick={handleLaunch}
+                    isDisabled={isLaunching}
                   >
                     <RocketIcon />
                   </Button>

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, isLaunching }) => (
               <Button
                 ouiaId="job-template-detail-launch-button"
                 variant="secondary"
                 type="submit"
                 onClick={handleLaunch}
+                isDisabled={isLaunching}
               >
                 {i18n._(t`Launch`)}
               </Button>

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, isLaunching }) => (
               <Button
                 ouiaId="workflow-job-template-detail-launch-button"
                 variant="secondary"
                 type="submit"
                 onClick={handleLaunch}
+                isDisabled={isLaunching}
               >
                 {i18n._(t`Launch`)}
               </Button>

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, isLaunching }) => (
                   <ActionButton
                     id="visualizer-launch"
                     variant="plain"
-                    isDisabled={hasUnsavedChanges || totalNodes === 0}
+                    isDisabled={
+                      hasUnsavedChanges || totalNodes === 0 || isLaunching
+                    }
                     onClick={handleLaunch}
                   >
                     <RocketIcon />