Add cancel button to workflow job output (#12338)

Add cancel button to workflow job output

See: https://github.com/ansible/awx/issues/10514

awx/ui/src/components/JobCancelButton/JobCancelButton.js

@@ -8,12 +8,13 @@ import AlertModal from '../AlertModal';
 import ErrorDetail from '../ErrorDetail';
 
 function JobCancelButton({
-  job = {},
   errorTitle,
   title,
   showIconButton,
   errorMessage,
   buttonText,
+  style = {},
+  job = {},
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const { error: cancelError, request: cancelJob } = useRequest(
@@ -38,6 +39,7 @@ function JobCancelButton({
             ouiaId="cancel-job-button"
             onClick={() => setIsOpen(true)}
             variant="plain"
+            style={style}
           >
             <MinusCircleIcon />
           </Button>
@@ -48,6 +50,7 @@ function JobCancelButton({
             variant="secondary"
             ouiaId="cancel-job-button"
             onClick={() => setIsOpen(true)}
+            style={style}
           >
             {buttonText || t`Cancel Job`}
           </Button>

awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.js

@@ -11,6 +11,7 @@ import {
 } from '@patternfly/react-icons';
 import styled from 'styled-components';
 import StatusLabel from 'components/StatusLabel';
+import JobCancelButton from 'components/JobCancelButton';
 import {
   WorkflowDispatchContext,
   WorkflowStateContext,
@@ -61,7 +62,6 @@ const ActionButton = styled(Button)`
     color: white;
   }
 `;
-
 function WorkflowOutputToolbar({ job }) {
   const dispatch = useContext(WorkflowDispatchContext);
   const history = useHistory();
@@ -80,6 +80,18 @@ function WorkflowOutputToolbar({ job }) {
         <StatusLabel status={job.status} />
       </ToolbarJob>
       <ToolbarActions>
+        {['new', 'pending', 'waiting', 'running'].includes(job?.status) &&
+        job?.summary_fields?.user_capabilities?.start ? (
+          <JobCancelButton
+            style={{ margin: '0px 6px', padding: '6px 10px' }}
+            job={job}
+            errorTitle={t`Job Cancel Error`}
+            title={t`Cancel ${job.name}`}
+            errorMessage={t`Failed to cancel ${job.name}`}
+            showIconButton
+          />
+        ) : null}
+
         <ActionButton
           ouiaId="edit-workflow"
           aria-label={t`Edit workflow`}

awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.test.js

@@ -10,7 +10,12 @@ let wrapper;
 const dispatch = jest.fn();
 const job = {
   id: 1,
-  status: 'successful',
+  status: 'running',
+  summary_fields: {
+    user_capabilities: {
+      start: true,
+    },
+  },
 };
 const workflowContext = {
   nodes: [],
@@ -49,6 +54,7 @@ describe('WorkflowOutputToolbar', () => {
     shouldFind('Button#workflow-output-toggle-legend');
     shouldFind('Badge');
     shouldFind('Button#workflow-output-toggle-tools');
+    shouldFind('JobCancelButton');
   });
 
   test('Shows correct number of nodes', () => {