Merge pull request #8928 from mabashian/8207-cancel-button-disable

Disable cancel button on jobs list when one or more selected jobs is not running

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

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

@@ -7,8 +7,15 @@ import { KebabifiedContext } from '../../contexts/Kebabified';
 import AlertModal from '../AlertModal';
 import { Job } from '../../types';
 
-function cannotCancel(job) {
+function cannotCancelBecausePermissions(job) {
-  return !job.summary_fields.user_capabilities.start;
+  return (
+    !job.summary_fields.user_capabilities.start &&
+    ['pending', 'waiting', 'running'].includes(job.status)
+  );
+}
+
+function cannotCancelBecauseNotRunning(job) {
+  return !['pending', 'waiting', 'running'].includes(job.status);
 }
 
 function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
@@ -33,20 +40,40 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
   }, [isKebabified, isModalOpen, onKebabModalChange]);
 
   const renderTooltip = () => {
-    const jobsUnableToCancel = jobsToCancel
+    const cannotCancelPermissions = jobsToCancel
-      .filter(cannotCancel)
+      .filter(cannotCancelBecausePermissions)
       .map(job => job.name);
-    const numJobsUnableToCancel = jobsUnableToCancel.length;
+    const cannotCancelNotRunning = jobsToCancel
+      .filter(cannotCancelBecauseNotRunning)
+      .map(job => job.name);
+    const numJobsUnableToCancel = cannotCancelPermissions.concat(
+      cannotCancelNotRunning
+    ).length;
     if (numJobsUnableToCancel > 0) {
       return (
         <div>
-          {i18n._(
+          {cannotCancelPermissions.length > 0 && (
-            '{numJobsUnableToCancel, plural, one {You do not have permission to cancel the following job:} other {You do not have permission to cancel the following jobs:}}',
+            <div>
-            {
+              {i18n._(
-              numJobsUnableToCancel,
+                '{numJobsUnableToCancel, plural, one {You do not have permission to cancel the following job:} other {You do not have permission to cancel the following jobs:}}',
-            }
+                {
+                  numJobsUnableToCancel: cannotCancelPermissions.length,
+                }
+              )}
+              {' '.concat(cannotCancelPermissions.join(', '))}
+            </div>
+          )}
+          {cannotCancelNotRunning.length > 0 && (
+            <div>
+              {i18n._(
+                '{numJobsUnableToCancel, plural, one {You cannot cancel the following job because it is not running:} other {You cannot cancel the following jobs because they are not running:}}',
+                {
+                  numJobsUnableToCancel: cannotCancelNotRunning.length,
+                }
+              )}
+              {' '.concat(cannotCancelNotRunning.join(', '))}
+            </div>
           )}
-          {' '.concat(jobsUnableToCancel.join(', '))}
         </div>
       );
     }
@@ -62,7 +89,9 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
   };
 
   const isDisabled =
-    jobsToCancel.length === 0 || jobsToCancel.some(cannotCancel);
+    jobsToCancel.length === 0 ||
+    jobsToCancel.some(cannotCancelBecausePermissions) ||
+    jobsToCancel.some(cannotCancelBecauseNotRunning);
 
   const cancelJobText = i18n._(
     '{zeroOrOneJobSelected, plural, one {Cancel job} other {Cancel jobs}}',

awx/ui_next/src/components/JobList/JobListCancelButton.test.jsx

@@ -30,6 +30,29 @@ describe('<JobListCancelButton />', () => {
                 start: false,
               },
             },
+            status: 'running',
+          },
+        ]}
+      />
+    );
+    expect(wrapper.find('JobListCancelButton button').props().disabled).toBe(
+      true
+    );
+  });
+  test('should be disabled when selected job is not running', () => {
+    wrapper = mountWithContexts(
+      <JobListCancelButton
+        jobsToCancel={[
+          {
+            id: 1,
+            name: 'some job',
+            summary_fields: {
+              user_capabilities: {
+                delete: false,
+                start: false,
+              },
+            },
+            status: 'successful',
           },
         ]}
       />
@@ -51,6 +74,7 @@ describe('<JobListCancelButton />', () => {
                 start: true,
               },
             },
+            status: 'running',
           },
         ]}
       />
@@ -73,6 +97,7 @@ describe('<JobListCancelButton />', () => {
                 start: true,
               },
             },
+            status: 'running',
           },
         ]}
         onCancel={onCancel}