From 6c7e1fc4eb912665365e38f512cc786e3314cbe1 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Wed, 5 May 2021 09:56:41 -0400
Subject: [PATCH] Adds Job Cancel Button

This refactors the cancel button on the job output page so that it can be used on the Project List page,
the Project detail page, and the Inventory Source list page. Once websockets are ready for the Inventory Source details page
and we can track the status of the source we can use this button there too.
---
 .../JobCancelButton/JobCancelButton.jsx       |  99 ++++++++++
 .../JobCancelButton/JobCancelButton.test.jsx  | 180 ++++++++++++++++++
 .../src/components/JobCancelButton/index.js   |   1 +
 awx/ui_next/src/locales/en/messages.po        |  56 ++++--
 awx/ui_next/src/locales/es/messages.po        |  54 ++++--
 awx/ui_next/src/locales/fr/messages.po        |  54 ++++--
 awx/ui_next/src/locales/ja/messages.po        |  54 ++++--
 awx/ui_next/src/locales/nl/messages.po        |  54 ++++--
 awx/ui_next/src/locales/zh/messages.po        |  54 ++++--
 awx/ui_next/src/locales/zu/messages.po        |  56 ++++--
 .../InventorySourceListItem.jsx               |  16 +-
 .../shared/InventorySourceSyncButton.jsx      |  74 ++-----
 .../shared/InventorySourceSyncButton.test.jsx |  40 +---
 .../Job/JobOutput/shared/OutputToolbar.jsx    |  27 +--
 .../Project/ProjectDetail/ProjectDetail.jsx   |  21 +-
 .../Project/ProjectList/ProjectListItem.jsx   |  19 +-
 16 files changed, 624 insertions(+), 235 deletions(-)
 create mode 100644 awx/ui_next/src/components/JobCancelButton/JobCancelButton.jsx
 create mode 100644 awx/ui_next/src/components/JobCancelButton/JobCancelButton.test.jsx
 create mode 100644 awx/ui_next/src/components/JobCancelButton/index.js

diff --git a/awx/ui_next/src/components/JobCancelButton/JobCancelButton.jsx b/awx/ui_next/src/components/JobCancelButton/JobCancelButton.jsx
new file mode 100644
index 0000000000..b3ab1e9fa7
--- /dev/null
+++ b/awx/ui_next/src/components/JobCancelButton/JobCancelButton.jsx
@@ -0,0 +1,99 @@
+import React, { useCallback, useState } from 'react';
+import { t } from '@lingui/macro';
+import { MinusCircleIcon } from '@patternfly/react-icons';
+import { Button, Tooltip } from '@patternfly/react-core';
+import { getJobModel } from '../../util/jobs';
+import useRequest, { useDismissableError } from '../../util/useRequest';
+import AlertModal from '../AlertModal';
+import ErrorDetail from '../ErrorDetail';
+
+function JobCancelButton({
+  job = {},
+  errorTitle,
+  title,
+  showIconButton,
+  errorMessage,
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const { error: cancelError, request: cancelJob } = useRequest(
+    useCallback(async () => {
+      setIsOpen(false);
+      await getJobModel(job.type).cancel(job.id);
+    }, [job.id, job.type]),
+    {}
+  );
+  const { error, dismissError: dismissCancelError } = useDismissableError(
+    cancelError
+  );
+
+  return (
+    <>
+      <Tooltip content={title}>
+        {showIconButton ? (
+          <Button
+            aria-label={title}
+            ouiaId="cancel job"
+            onClick={setIsOpen}
+            variant="plain"
+          >
+            <MinusCircleIcon />
+          </Button>
+        ) : (
+          <Button
+            aria-label={title}
+            variant="secondary"
+            ouiaId="cancel job"
+            onClick={setIsOpen}
+          >{t`Cancel Sync`}</Button>
+        )}
+      </Tooltip>
+      {isOpen && (
+        <AlertModal
+          isOpen={isOpen}
+          variant="danger"
+          onClose={() => setIsOpen(false)}
+          title={title}
+          label={title}
+          actions={[
+            <Button
+              id="cancel-job-confirm-button"
+              key="delete"
+              variant="danger"
+              aria-label={t`Confirm cancel job`}
+              ouiaId="confirm cancel job"
+              onClick={cancelJob}
+            >
+              {t`Confirm cancellation`}
+            </Button>,
+            <Button
+              id="cancel-job-return-button"
+              key="cancel"
+              ouiaId="return"
+              aria-label={t`Return`}
+              variant="secondary"
+              onClick={() => setIsOpen(false)}
+            >
+              {t`Return`}
+            </Button>,
+          ]}
+        >
+          {t`Are you sure you want to submit the request to cancel this job?`}
+        </AlertModal>
+      )}
+      {error && (
+        <AlertModal
+          isOpen={error}
+          variant="danger"
+          onClose={dismissCancelError}
+          title={errorTitle}
+          label={errorTitle}
+        >
+          {errorMessage}
+          <ErrorDetail error={error} />
+        </AlertModal>
+      )}
+    </>
+  );
+}
+
+export default JobCancelButton;
diff --git a/awx/ui_next/src/components/JobCancelButton/JobCancelButton.test.jsx b/awx/ui_next/src/components/JobCancelButton/JobCancelButton.test.jsx
new file mode 100644
index 0000000000..dd98838ac2
--- /dev/null
+++ b/awx/ui_next/src/components/JobCancelButton/JobCancelButton.test.jsx
@@ -0,0 +1,180 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import {
+  ProjectUpdatesAPI,
+  AdHocCommandsAPI,
+  SystemJobsAPI,
+  WorkflowJobsAPI,
+  JobsAPI,
+} from '../../api';
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import JobCancelButton from './JobCancelButton';
+
+jest.mock('../../api');
+
+describe('<JobCancelButton/>', () => {
+  let wrapper;
+
+  test('should render properly', () => {
+    act(() => {
+      wrapper = mountWithContexts(
+        <JobCancelButton
+          job={{ id: 1, type: 'project_update' }}
+          errorTitle="Error"
+          title="Title"
+        />
+      );
+    });
+    expect(wrapper.length).toBe(1);
+    expect(wrapper.find('MinusCircleIcon').length).toBe(0);
+  });
+  test('should render icon button', () => {
+    act(() => {
+      wrapper = mountWithContexts(
+        <JobCancelButton
+          job={{ id: 1, type: 'project_update' }}
+          errorTitle="Error"
+          title="Title"
+          showIconButton
+        />
+      );
+    });
+    expect(wrapper.find('MinusCircleIcon').length).toBe(1);
+  });
+  test('should call api', async () => {
+    act(() => {
+      wrapper = mountWithContexts(
+        <JobCancelButton
+          job={{ id: 1, type: 'project_update' }}
+          errorTitle="Error"
+          title="Title"
+          showIconButton
+        />
+      );
+    });
+    await act(async () => wrapper.find('Button').prop('onClick')(true));
+    wrapper.update();
+
+    expect(wrapper.find('AlertModal').length).toBe(1);
+    await act(() =>
+      wrapper.find('Button#cancel-job-confirm-button').prop('onClick')()
+    );
+    expect(ProjectUpdatesAPI.cancel).toBeCalledWith(1);
+  });
+  test('should throw error', async () => {
+    ProjectUpdatesAPI.cancel.mockRejectedValue(
+      new Error({
+        response: {
+          config: {
+            method: 'post',
+            url: '/api/v2/projectupdates',
+          },
+          data: 'An error occurred',
+          status: 403,
+        },
+      })
+    );
+    act(() => {
+      wrapper = mountWithContexts(
+        <JobCancelButton
+          job={{ id: 'a', type: 'project_update' }}
+          errorTitle="Error"
+          title="Title"
+          showIconButton
+        />
+      );
+    });
+    await act(async () => wrapper.find('Button').prop('onClick')(true));
+    wrapper.update();
+    expect(wrapper.find('AlertModal').length).toBe(1);
+    await act(() =>
+      wrapper.find('Button#cancel-job-confirm-button').prop('onClick')()
+    );
+    wrapper.update();
+    expect(wrapper.find('ErrorDetail').length).toBe(1);
+    expect(wrapper.find('AlertModal[title="Title"]').length).toBe(0);
+  });
+
+  test('should cancel Ad Hoc Command job', async () => {
+    act(() => {
+      wrapper = mountWithContexts(
+        <JobCancelButton
+          job={{ id: 1, type: 'ad_hoc_command' }}
+          errorTitle="Error"
+          title="Title"
+          showIconButton
+        />
+      );
+    });
+    await act(async () => wrapper.find('Button').prop('onClick')(true));
+    wrapper.update();
+
+    expect(wrapper.find('AlertModal').length).toBe(1);
+    await act(() =>
+      wrapper.find('Button#cancel-job-confirm-button').prop('onClick')()
+    );
+    expect(AdHocCommandsAPI.cancel).toBeCalledWith(1);
+  });
+
+  test('should cancel system job', async () => {
+    act(() => {
+      wrapper = mountWithContexts(
+        <JobCancelButton
+          job={{ id: 1, type: 'system_job' }}
+          errorTitle="Error"
+          title="Title"
+          showIconButton
+        />
+      );
+    });
+    await act(async () => wrapper.find('Button').prop('onClick')(true));
+    wrapper.update();
+
+    expect(wrapper.find('AlertModal').length).toBe(1);
+    await act(() =>
+      wrapper.find('Button#cancel-job-confirm-button').prop('onClick')()
+    );
+    expect(SystemJobsAPI.cancel).toBeCalledWith(1);
+  });
+
+  test('should cancel workflow job', async () => {
+    act(() => {
+      wrapper = mountWithContexts(
+        <JobCancelButton
+          job={{ id: 1, type: 'workflow_job' }}
+          errorTitle="Error"
+          title="Title"
+          showIconButton
+        />
+      );
+    });
+    await act(async () => wrapper.find('Button').prop('onClick')(true));
+    wrapper.update();
+
+    expect(wrapper.find('AlertModal').length).toBe(1);
+    await act(() =>
+      wrapper.find('Button#cancel-job-confirm-button').prop('onClick')()
+    );
+    expect(WorkflowJobsAPI.cancel).toBeCalledWith(1);
+  });
+  test('should cancel workflow job', async () => {
+    act(() => {
+      wrapper = mountWithContexts(
+        <JobCancelButton
+          job={{ id: 1, type: 'hakunah_matata' }}
+          errorTitle="Error"
+          title="Title"
+          showIconButton
+        />
+      );
+    });
+    await act(async () => wrapper.find('Button').prop('onClick')(true));
+    wrapper.update();
+
+    expect(wrapper.find('AlertModal').length).toBe(1);
+    await act(() =>
+      wrapper.find('Button#cancel-job-confirm-button').prop('onClick')()
+    );
+    expect(JobsAPI.cancel).toBeCalledWith(1);
+  });
+});
diff --git a/awx/ui_next/src/components/JobCancelButton/index.js b/awx/ui_next/src/components/JobCancelButton/index.js
new file mode 100644
index 0000000000..6940bcd1f9
--- /dev/null
+++ b/awx/ui_next/src/components/JobCancelButton/index.js
@@ -0,0 +1 @@
+export { default } from './JobCancelButton';
diff --git a/awx/ui_next/src/locales/en/messages.po b/awx/ui_next/src/locales/en/messages.po
index eea5b70c6f..0cb039e414 100644
--- a/awx/ui_next/src/locales/en/messages.po
+++ b/awx/ui_next/src/locales/en/messages.po
@@ -242,7 +242,7 @@ msgstr "Action"
 #: screens/Organization/OrganizationList/OrganizationList.jsx:160
 #: screens/Organization/OrganizationList/OrganizationListItem.jsx:68
 #: screens/Project/ProjectList/ProjectList.jsx:177
-#: screens/Project/ProjectList/ProjectListItem.jsx:170
+#: screens/Project/ProjectList/ProjectListItem.jsx:171
 #: screens/Team/TeamList/TeamList.jsx:156
 #: screens/Team/TeamList/TeamListItem.jsx:47
 #: screens/User/UserList/UserList.jsx:166
@@ -949,16 +949,16 @@ msgid "Cancel subscription edit"
 msgstr "Cancel subscription edit"
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:66
-msgid "Cancel sync"
-msgstr "Cancel sync"
+#~ msgid "Cancel sync"
+#~ msgstr "Cancel sync"
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:58
-msgid "Cancel sync process"
-msgstr "Cancel sync process"
+#~ msgid "Cancel sync process"
+#~ msgstr "Cancel sync process"
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:62
-msgid "Cancel sync source"
-msgstr "Cancel sync source"
+#~ msgid "Cancel sync source"
+#~ msgstr "Cancel sync source"
 
 #: components/JobList/JobList.jsx:207
 #: components/Workflow/WorkflowNodeHelp.jsx:95
@@ -3146,14 +3146,27 @@ msgstr "Failed to associate role"
 msgid "Failed to associate."
 msgstr "Failed to associate."
 
+#: screens/Inventory/InventorySources/InventorySourceListItem.jsx:126
+msgid "Failed to cancel Inventory Source Sync"
+msgstr "Failed to cancel Inventory Source Sync"
+
+#: screens/Project/ProjectDetail/ProjectDetail.jsx:209
+#: screens/Project/ProjectList/ProjectListItem.jsx:182
+msgid "Failed to cancel Project Update"
+msgstr "Failed to cancel Project Update"
+
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:100
-msgid "Failed to cancel inventory source sync."
-msgstr "Failed to cancel inventory source sync."
+#~ msgid "Failed to cancel inventory source sync."
+#~ msgstr "Failed to cancel inventory source sync."
 
 #: components/JobList/JobList.jsx:290
 msgid "Failed to cancel one or more jobs."
 msgstr "Failed to cancel one or more jobs."
 
+#: screens/Job/JobOutput/shared/OutputToolbar.jsx:185
+msgid "Failed to cancel {0}"
+msgstr "Failed to cancel {0}"
+
 #: screens/Credential/CredentialList/CredentialListItem.jsx:85
 msgid "Failed to copy credential."
 msgstr "Failed to copy credential."
@@ -3391,7 +3404,7 @@ msgstr "Failed to retrieve node credentials."
 msgid "Failed to send test notification."
 msgstr "Failed to send test notification."
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:89
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:54
 msgid "Failed to sync inventory source."
 msgstr "Failed to sync inventory source."
 
@@ -3734,7 +3747,7 @@ msgstr "Group"
 msgid "Group details"
 msgstr "Group details"
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:122
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:121
 msgid "Group type"
 msgstr "Group type"
 
@@ -4340,6 +4353,10 @@ msgstr "Inventory ID"
 msgid "Inventory Source"
 msgstr "Inventory Source"
 
+#: screens/Inventory/InventorySources/InventorySourceListItem.jsx:125
+msgid "Inventory Source Error"
+msgstr "Inventory Source Error"
+
 #: screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx:92
 msgid "Inventory Source Sync"
 msgstr "Inventory Source Sync"
@@ -6232,6 +6249,11 @@ msgstr "Project Sync"
 msgid "Project Update"
 msgstr "Project Update"
 
+#: screens/Project/ProjectDetail/ProjectDetail.jsx:207
+#: screens/Project/ProjectList/ProjectListItem.jsx:179
+msgid "Project Update Error"
+msgstr "Project Update Error"
+
 #: screens/Project/Project.jsx:139
 msgid "Project not found."
 msgstr "Project not found."
@@ -6631,6 +6653,8 @@ msgstr ""
 #~ msgid "Retrieve the enabled state from the given dict of host variables. The enabled variable may be specified using dot notation, e.g: 'foo.bar'"
 #~ msgstr "Retrieve the enabled state from the given dict of host variables. The enabled variable may be specified using dot notation, e.g: 'foo.bar'"
 
+#: components/JobCancelButton/JobCancelButton.jsx:71
+#: components/JobCancelButton/JobCancelButton.jsx:75
 #: components/JobList/JobListCancelButton.jsx:159
 #: components/JobList/JobListCancelButton.jsx:162
 #: screens/Job/JobDetail/JobDetail.jsx:434
@@ -7073,7 +7097,7 @@ msgid "Select a row to approve"
 msgstr "Select a row to approve"
 
 #: components/PaginatedDataList/ToolbarDeleteButton.jsx:160
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:100
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:99
 msgid "Select a row to delete"
 msgstr ""
 
@@ -7454,7 +7478,7 @@ msgstr "Show"
 msgid "Show Changes"
 msgstr "Show Changes"
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:127
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:126
 msgid "Show all groups"
 msgstr "Show all groups"
 
@@ -7467,7 +7491,7 @@ msgstr "Show changes"
 msgid "Show less"
 msgstr "Show less"
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:126
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:125
 msgid "Show only root groups"
 msgstr "Show only root groups"
 
@@ -7788,11 +7812,11 @@ msgstr "Start message"
 msgid "Start message body"
 msgstr "Start message body"
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:70
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:35
 msgid "Start sync process"
 msgstr "Start sync process"
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:74
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:39
 msgid "Start sync source"
 msgstr "Start sync source"
 
diff --git a/awx/ui_next/src/locales/es/messages.po b/awx/ui_next/src/locales/es/messages.po
index c8aed0f036..02e792b72c 100644
--- a/awx/ui_next/src/locales/es/messages.po
+++ b/awx/ui_next/src/locales/es/messages.po
@@ -908,16 +908,16 @@ msgid "Cancel subscription edit"
 msgstr ""
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:66
-msgid "Cancel sync"
-msgstr ""
+#~ msgid "Cancel sync"
+#~ msgstr ""
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:58
-msgid "Cancel sync process"
-msgstr ""
+#~ msgid "Cancel sync process"
+#~ msgstr ""
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:62
-msgid "Cancel sync source"
-msgstr ""
+#~ msgid "Cancel sync source"
+#~ msgstr ""
 
 #: components/JobList/JobList.jsx:207
 #: components/Workflow/WorkflowNodeHelp.jsx:95
@@ -3030,14 +3030,27 @@ msgstr ""
 msgid "Failed to associate."
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:100
-msgid "Failed to cancel inventory source sync."
+#: screens/Inventory/InventorySources/InventorySourceListItem.jsx:126
+msgid "Failed to cancel Inventory Source Sync"
 msgstr ""
 
+#: screens/Project/ProjectDetail/ProjectDetail.jsx:209
+#: screens/Project/ProjectList/ProjectListItem.jsx:182
+msgid "Failed to cancel Project Update"
+msgstr ""
+
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:100
+#~ msgid "Failed to cancel inventory source sync."
+#~ msgstr ""
+
 #: components/JobList/JobList.jsx:290
 msgid "Failed to cancel one or more jobs."
 msgstr ""
 
+#: screens/Job/JobOutput/shared/OutputToolbar.jsx:185
+msgid "Failed to cancel {0}"
+msgstr ""
+
 #: screens/Credential/CredentialList/CredentialListItem.jsx:85
 msgid "Failed to copy credential."
 msgstr ""
@@ -3275,7 +3288,7 @@ msgstr ""
 msgid "Failed to send test notification."
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:89
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:54
 msgid "Failed to sync inventory source."
 msgstr ""
 
@@ -3611,7 +3624,7 @@ msgstr ""
 msgid "Group details"
 msgstr ""
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:122
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:121
 msgid "Group type"
 msgstr ""
 
@@ -4175,6 +4188,10 @@ msgstr ""
 msgid "Inventory Source"
 msgstr ""
 
+#: screens/Inventory/InventorySources/InventorySourceListItem.jsx:125
+msgid "Inventory Source Error"
+msgstr ""
+
 #: screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx:92
 msgid "Inventory Source Sync"
 msgstr ""
@@ -5988,6 +6005,11 @@ msgstr ""
 msgid "Project Update"
 msgstr ""
 
+#: screens/Project/ProjectDetail/ProjectDetail.jsx:207
+#: screens/Project/ProjectList/ProjectListItem.jsx:179
+msgid "Project Update Error"
+msgstr ""
+
 #: screens/Project/Project.jsx:139
 msgid "Project not found."
 msgstr ""
@@ -6369,6 +6391,8 @@ msgstr ""
 #~ msgid "Retrieve the enabled state from the given dict of host variables. The enabled variable may be specified using dot notation, e.g: 'foo.bar'"
 #~ msgstr ""
 
+#: components/JobCancelButton/JobCancelButton.jsx:71
+#: components/JobCancelButton/JobCancelButton.jsx:75
 #: components/JobList/JobListCancelButton.jsx:159
 #: components/JobList/JobListCancelButton.jsx:162
 #: screens/Job/JobDetail/JobDetail.jsx:434
@@ -6805,7 +6829,7 @@ msgid "Select a row to approve"
 msgstr ""
 
 #: components/PaginatedDataList/ToolbarDeleteButton.jsx:160
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:100
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:99
 msgid "Select a row to delete"
 msgstr ""
 
@@ -7160,7 +7184,7 @@ msgstr ""
 msgid "Show Changes"
 msgstr ""
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:127
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:126
 msgid "Show all groups"
 msgstr ""
 
@@ -7173,7 +7197,7 @@ msgstr ""
 msgid "Show less"
 msgstr ""
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:126
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:125
 msgid "Show only root groups"
 msgstr ""
 
@@ -7476,11 +7500,11 @@ msgstr ""
 msgid "Start message body"
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:70
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:35
 msgid "Start sync process"
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:74
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:39
 msgid "Start sync source"
 msgstr ""
 
diff --git a/awx/ui_next/src/locales/fr/messages.po b/awx/ui_next/src/locales/fr/messages.po
index 036c82f839..b947e186d0 100644
--- a/awx/ui_next/src/locales/fr/messages.po
+++ b/awx/ui_next/src/locales/fr/messages.po
@@ -938,16 +938,16 @@ msgid "Cancel subscription edit"
 msgstr ""
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:66
-msgid "Cancel sync"
-msgstr "Annuler sync"
+#~ msgid "Cancel sync"
+#~ msgstr "Annuler sync"
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:58
-msgid "Cancel sync process"
-msgstr "Annuler le processus de synchronisation"
+#~ msgid "Cancel sync process"
+#~ msgstr "Annuler le processus de synchronisation"
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:62
-msgid "Cancel sync source"
-msgstr "Annuler la source de synchronisation"
+#~ msgid "Cancel sync source"
+#~ msgstr "Annuler la source de synchronisation"
 
 #: components/JobList/JobList.jsx:207
 #: components/Workflow/WorkflowNodeHelp.jsx:95
@@ -3110,14 +3110,27 @@ msgstr "N'a pas réussi à associer le rôle"
 msgid "Failed to associate."
 msgstr "N'a pas réussi à associer."
 
+#: screens/Inventory/InventorySources/InventorySourceListItem.jsx:126
+msgid "Failed to cancel Inventory Source Sync"
+msgstr ""
+
+#: screens/Project/ProjectDetail/ProjectDetail.jsx:209
+#: screens/Project/ProjectList/ProjectListItem.jsx:182
+msgid "Failed to cancel Project Update"
+msgstr ""
+
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:100
-msgid "Failed to cancel inventory source sync."
-msgstr "N'a pas réussi à annuler la synchronisation des sources d'inventaire."
+#~ msgid "Failed to cancel inventory source sync."
+#~ msgstr "N'a pas réussi à annuler la synchronisation des sources d'inventaire."
 
 #: components/JobList/JobList.jsx:290
 msgid "Failed to cancel one or more jobs."
 msgstr "N'a pas réussi à supprimer un ou plusieurs Jobs"
 
+#: screens/Job/JobOutput/shared/OutputToolbar.jsx:185
+msgid "Failed to cancel {0}"
+msgstr ""
+
 #: screens/Credential/CredentialList/CredentialListItem.jsx:85
 msgid "Failed to copy credential."
 msgstr "N'a pas réussi à copier les identifiants"
@@ -3355,7 +3368,7 @@ msgstr "Impossible de récupérer les informations d'identification des nœuds."
 msgid "Failed to send test notification."
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:89
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:54
 msgid "Failed to sync inventory source."
 msgstr "Impossible de synchroniser la source de l'inventaire."
 
@@ -3691,7 +3704,7 @@ msgstr "Groupe"
 msgid "Group details"
 msgstr "Détails du groupe"
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:122
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:121
 msgid "Group type"
 msgstr "Type de groupe"
 
@@ -4255,6 +4268,10 @@ msgstr "ID Inventaire"
 msgid "Inventory Source"
 msgstr ""
 
+#: screens/Inventory/InventorySources/InventorySourceListItem.jsx:125
+msgid "Inventory Source Error"
+msgstr ""
+
 #: screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx:92
 msgid "Inventory Source Sync"
 msgstr "Sync Source d’inventaire"
@@ -6068,6 +6085,11 @@ msgstr "Sync Projet"
 msgid "Project Update"
 msgstr "Mise à jour du projet"
 
+#: screens/Project/ProjectDetail/ProjectDetail.jsx:207
+#: screens/Project/ProjectList/ProjectListItem.jsx:179
+msgid "Project Update Error"
+msgstr ""
+
 #: screens/Project/Project.jsx:139
 msgid "Project not found."
 msgstr "Projet non trouvé."
@@ -6445,6 +6467,8 @@ msgstr ""
 #~ msgid "Retrieve the enabled state from the given dict of host variables. The enabled variable may be specified using dot notation, e.g: 'foo.bar'"
 #~ msgstr ""
 
+#: components/JobCancelButton/JobCancelButton.jsx:71
+#: components/JobCancelButton/JobCancelButton.jsx:75
 #: components/JobList/JobListCancelButton.jsx:159
 #: components/JobList/JobListCancelButton.jsx:162
 #: screens/Job/JobDetail/JobDetail.jsx:434
@@ -6881,7 +6905,7 @@ msgid "Select a row to approve"
 msgstr "Sélectionnez une ligne à approuver"
 
 #: components/PaginatedDataList/ToolbarDeleteButton.jsx:160
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:100
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:99
 msgid "Select a row to delete"
 msgstr "Sélectionnez une ligne à supprimer"
 
@@ -7245,7 +7269,7 @@ msgstr "Afficher"
 msgid "Show Changes"
 msgstr "Afficher les modifications"
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:127
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:126
 msgid "Show all groups"
 msgstr "Afficher tous les groupes"
 
@@ -7258,7 +7282,7 @@ msgstr "Afficher les modifications"
 msgid "Show less"
 msgstr "Afficher moins de détails"
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:126
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:125
 msgid "Show only root groups"
 msgstr "Afficher uniquement les groupes racines"
 
@@ -7570,11 +7594,11 @@ msgstr "Message de départ"
 msgid "Start message body"
 msgstr "Démarrer le corps du message"
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:70
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:35
 msgid "Start sync process"
 msgstr "Démarrer le processus de synchronisation"
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:74
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:39
 msgid "Start sync source"
 msgstr "Démarrer la source de synchronisation"
 
diff --git a/awx/ui_next/src/locales/ja/messages.po b/awx/ui_next/src/locales/ja/messages.po
index ef561692a8..3034ee8da4 100644
--- a/awx/ui_next/src/locales/ja/messages.po
+++ b/awx/ui_next/src/locales/ja/messages.po
@@ -938,16 +938,16 @@ msgid "Cancel subscription edit"
 msgstr ""
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:66
-msgid "Cancel sync"
-msgstr "同期の取り消し"
+#~ msgid "Cancel sync"
+#~ msgstr "同期の取り消し"
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:58
-msgid "Cancel sync process"
-msgstr "同期プロセスの取り消し"
+#~ msgid "Cancel sync process"
+#~ msgstr "同期プロセスの取り消し"
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:62
-msgid "Cancel sync source"
-msgstr "同期プロセスの取り消し"
+#~ msgid "Cancel sync source"
+#~ msgstr "同期プロセスの取り消し"
 
 #: components/JobList/JobList.jsx:207
 #: components/Workflow/WorkflowNodeHelp.jsx:95
@@ -3106,14 +3106,27 @@ msgstr "ロールの関連付けに失敗しました"
 msgid "Failed to associate."
 msgstr "関連付けに失敗しました。"
 
+#: screens/Inventory/InventorySources/InventorySourceListItem.jsx:126
+msgid "Failed to cancel Inventory Source Sync"
+msgstr ""
+
+#: screens/Project/ProjectDetail/ProjectDetail.jsx:209
+#: screens/Project/ProjectList/ProjectListItem.jsx:182
+msgid "Failed to cancel Project Update"
+msgstr ""
+
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:100
-msgid "Failed to cancel inventory source sync."
-msgstr "インベントリーソースの同期をキャンセルできませんでした。"
+#~ msgid "Failed to cancel inventory source sync."
+#~ msgstr "インベントリーソースの同期をキャンセルできませんでした。"
 
 #: components/JobList/JobList.jsx:290
 msgid "Failed to cancel one or more jobs."
 msgstr "1 つ以上のジョブを取り消すことができませんでした。"
 
+#: screens/Job/JobOutput/shared/OutputToolbar.jsx:185
+msgid "Failed to cancel {0}"
+msgstr ""
+
 #: screens/Credential/CredentialList/CredentialListItem.jsx:85
 msgid "Failed to copy credential."
 msgstr "認証情報をコピーできませんでした。"
@@ -3351,7 +3364,7 @@ msgstr "ノード認証情報を取得できませんでした。"
 msgid "Failed to send test notification."
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:89
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:54
 msgid "Failed to sync inventory source."
 msgstr "インベントリーソースを同期できませんでした。"
 
@@ -3687,7 +3700,7 @@ msgstr "グループ"
 msgid "Group details"
 msgstr "グループの詳細"
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:122
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:121
 msgid "Group type"
 msgstr "グループタイプ"
 
@@ -4251,6 +4264,10 @@ msgstr "インベントリー ID"
 msgid "Inventory Source"
 msgstr ""
 
+#: screens/Inventory/InventorySources/InventorySourceListItem.jsx:125
+msgid "Inventory Source Error"
+msgstr ""
+
 #: screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx:92
 msgid "Inventory Source Sync"
 msgstr "インベントリーソース同期"
@@ -6064,6 +6081,11 @@ msgstr "プロジェクトの同期"
 msgid "Project Update"
 msgstr "プロジェクトの更新"
 
+#: screens/Project/ProjectDetail/ProjectDetail.jsx:207
+#: screens/Project/ProjectList/ProjectListItem.jsx:179
+msgid "Project Update Error"
+msgstr ""
+
 #: screens/Project/Project.jsx:139
 msgid "Project not found."
 msgstr "プロジェクトが見つかりません。"
@@ -6441,6 +6463,8 @@ msgstr ""
 #~ msgid "Retrieve the enabled state from the given dict of host variables. The enabled variable may be specified using dot notation, e.g: 'foo.bar'"
 #~ msgstr ""
 
+#: components/JobCancelButton/JobCancelButton.jsx:71
+#: components/JobCancelButton/JobCancelButton.jsx:75
 #: components/JobList/JobListCancelButton.jsx:159
 #: components/JobList/JobListCancelButton.jsx:162
 #: screens/Job/JobDetail/JobDetail.jsx:434
@@ -6877,7 +6901,7 @@ msgid "Select a row to approve"
 msgstr "承認する行の選択"
 
 #: components/PaginatedDataList/ToolbarDeleteButton.jsx:160
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:100
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:99
 msgid "Select a row to delete"
 msgstr "削除する行の選択"
 
@@ -7241,7 +7265,7 @@ msgstr "表示"
 msgid "Show Changes"
 msgstr "変更の表示"
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:127
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:126
 msgid "Show all groups"
 msgstr "すべてのグループの表示"
 
@@ -7254,7 +7278,7 @@ msgstr "変更の表示"
 msgid "Show less"
 msgstr "簡易表示"
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:126
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:125
 msgid "Show only root groups"
 msgstr "root グループのみを表示"
 
@@ -7566,11 +7590,11 @@ msgstr "開始メッセージ"
 msgid "Start message body"
 msgstr "開始メッセージのボディー"
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:70
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:35
 msgid "Start sync process"
 msgstr "同期プロセスの開始"
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:74
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:39
 msgid "Start sync source"
 msgstr "同期ソースの開始"
 
diff --git a/awx/ui_next/src/locales/nl/messages.po b/awx/ui_next/src/locales/nl/messages.po
index ab0881d184..f7ca2771f5 100644
--- a/awx/ui_next/src/locales/nl/messages.po
+++ b/awx/ui_next/src/locales/nl/messages.po
@@ -908,16 +908,16 @@ msgid "Cancel subscription edit"
 msgstr ""
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:66
-msgid "Cancel sync"
-msgstr ""
+#~ msgid "Cancel sync"
+#~ msgstr ""
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:58
-msgid "Cancel sync process"
-msgstr ""
+#~ msgid "Cancel sync process"
+#~ msgstr ""
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:62
-msgid "Cancel sync source"
-msgstr ""
+#~ msgid "Cancel sync source"
+#~ msgstr ""
 
 #: components/JobList/JobList.jsx:207
 #: components/Workflow/WorkflowNodeHelp.jsx:95
@@ -3030,14 +3030,27 @@ msgstr ""
 msgid "Failed to associate."
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:100
-msgid "Failed to cancel inventory source sync."
+#: screens/Inventory/InventorySources/InventorySourceListItem.jsx:126
+msgid "Failed to cancel Inventory Source Sync"
 msgstr ""
 
+#: screens/Project/ProjectDetail/ProjectDetail.jsx:209
+#: screens/Project/ProjectList/ProjectListItem.jsx:182
+msgid "Failed to cancel Project Update"
+msgstr ""
+
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:100
+#~ msgid "Failed to cancel inventory source sync."
+#~ msgstr ""
+
 #: components/JobList/JobList.jsx:290
 msgid "Failed to cancel one or more jobs."
 msgstr ""
 
+#: screens/Job/JobOutput/shared/OutputToolbar.jsx:185
+msgid "Failed to cancel {0}"
+msgstr ""
+
 #: screens/Credential/CredentialList/CredentialListItem.jsx:85
 msgid "Failed to copy credential."
 msgstr ""
@@ -3275,7 +3288,7 @@ msgstr ""
 msgid "Failed to send test notification."
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:89
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:54
 msgid "Failed to sync inventory source."
 msgstr ""
 
@@ -3611,7 +3624,7 @@ msgstr ""
 msgid "Group details"
 msgstr ""
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:122
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:121
 msgid "Group type"
 msgstr ""
 
@@ -4175,6 +4188,10 @@ msgstr ""
 msgid "Inventory Source"
 msgstr ""
 
+#: screens/Inventory/InventorySources/InventorySourceListItem.jsx:125
+msgid "Inventory Source Error"
+msgstr ""
+
 #: screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx:92
 msgid "Inventory Source Sync"
 msgstr ""
@@ -5988,6 +6005,11 @@ msgstr ""
 msgid "Project Update"
 msgstr ""
 
+#: screens/Project/ProjectDetail/ProjectDetail.jsx:207
+#: screens/Project/ProjectList/ProjectListItem.jsx:179
+msgid "Project Update Error"
+msgstr ""
+
 #: screens/Project/Project.jsx:139
 msgid "Project not found."
 msgstr ""
@@ -6369,6 +6391,8 @@ msgstr ""
 #~ msgid "Retrieve the enabled state from the given dict of host variables. The enabled variable may be specified using dot notation, e.g: 'foo.bar'"
 #~ msgstr ""
 
+#: components/JobCancelButton/JobCancelButton.jsx:71
+#: components/JobCancelButton/JobCancelButton.jsx:75
 #: components/JobList/JobListCancelButton.jsx:159
 #: components/JobList/JobListCancelButton.jsx:162
 #: screens/Job/JobDetail/JobDetail.jsx:434
@@ -6805,7 +6829,7 @@ msgid "Select a row to approve"
 msgstr ""
 
 #: components/PaginatedDataList/ToolbarDeleteButton.jsx:160
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:100
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:99
 msgid "Select a row to delete"
 msgstr ""
 
@@ -7160,7 +7184,7 @@ msgstr ""
 msgid "Show Changes"
 msgstr ""
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:127
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:126
 msgid "Show all groups"
 msgstr ""
 
@@ -7173,7 +7197,7 @@ msgstr ""
 msgid "Show less"
 msgstr ""
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:126
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:125
 msgid "Show only root groups"
 msgstr ""
 
@@ -7476,11 +7500,11 @@ msgstr ""
 msgid "Start message body"
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:70
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:35
 msgid "Start sync process"
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:74
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:39
 msgid "Start sync source"
 msgstr ""
 
diff --git a/awx/ui_next/src/locales/zh/messages.po b/awx/ui_next/src/locales/zh/messages.po
index ee30242550..d9ff17ce7b 100644
--- a/awx/ui_next/src/locales/zh/messages.po
+++ b/awx/ui_next/src/locales/zh/messages.po
@@ -938,16 +938,16 @@ msgid "Cancel subscription edit"
 msgstr ""
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:66
-msgid "Cancel sync"
-msgstr "取消同步"
+#~ msgid "Cancel sync"
+#~ msgstr "取消同步"
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:58
-msgid "Cancel sync process"
-msgstr "取消同步进程"
+#~ msgid "Cancel sync process"
+#~ msgstr "取消同步进程"
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:62
-msgid "Cancel sync source"
-msgstr "取消同步源"
+#~ msgid "Cancel sync source"
+#~ msgstr "取消同步源"
 
 #: components/JobList/JobList.jsx:207
 #: components/Workflow/WorkflowNodeHelp.jsx:95
@@ -3106,14 +3106,27 @@ msgstr "关联角色失败"
 msgid "Failed to associate."
 msgstr "关联失败。"
 
+#: screens/Inventory/InventorySources/InventorySourceListItem.jsx:126
+msgid "Failed to cancel Inventory Source Sync"
+msgstr ""
+
+#: screens/Project/ProjectDetail/ProjectDetail.jsx:209
+#: screens/Project/ProjectList/ProjectListItem.jsx:182
+msgid "Failed to cancel Project Update"
+msgstr ""
+
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:100
-msgid "Failed to cancel inventory source sync."
-msgstr "取消清单源同步失败。"
+#~ msgid "Failed to cancel inventory source sync."
+#~ msgstr "取消清单源同步失败。"
 
 #: components/JobList/JobList.jsx:290
 msgid "Failed to cancel one or more jobs."
 msgstr "取消一个或多个作业失败。"
 
+#: screens/Job/JobOutput/shared/OutputToolbar.jsx:185
+msgid "Failed to cancel {0}"
+msgstr ""
+
 #: screens/Credential/CredentialList/CredentialListItem.jsx:85
 msgid "Failed to copy credential."
 msgstr "复制凭证失败。"
@@ -3351,7 +3364,7 @@ msgstr "获取节点凭证失败。"
 msgid "Failed to send test notification."
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:89
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:54
 msgid "Failed to sync inventory source."
 msgstr "同步清单源失败。"
 
@@ -3687,7 +3700,7 @@ msgstr "组"
 msgid "Group details"
 msgstr "组详情"
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:122
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:121
 msgid "Group type"
 msgstr "组类型"
 
@@ -4251,6 +4264,10 @@ msgstr "清单 ID"
 msgid "Inventory Source"
 msgstr ""
 
+#: screens/Inventory/InventorySources/InventorySourceListItem.jsx:125
+msgid "Inventory Source Error"
+msgstr ""
+
 #: screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx:92
 msgid "Inventory Source Sync"
 msgstr "清单源同步"
@@ -6064,6 +6081,11 @@ msgstr "项目同步"
 msgid "Project Update"
 msgstr "项目更新"
 
+#: screens/Project/ProjectDetail/ProjectDetail.jsx:207
+#: screens/Project/ProjectList/ProjectListItem.jsx:179
+msgid "Project Update Error"
+msgstr ""
+
 #: screens/Project/Project.jsx:139
 msgid "Project not found."
 msgstr "未找到项目。"
@@ -6441,6 +6463,8 @@ msgstr ""
 #~ msgid "Retrieve the enabled state from the given dict of host variables. The enabled variable may be specified using dot notation, e.g: 'foo.bar'"
 #~ msgstr ""
 
+#: components/JobCancelButton/JobCancelButton.jsx:71
+#: components/JobCancelButton/JobCancelButton.jsx:75
 #: components/JobList/JobListCancelButton.jsx:159
 #: components/JobList/JobListCancelButton.jsx:162
 #: screens/Job/JobDetail/JobDetail.jsx:434
@@ -6877,7 +6901,7 @@ msgid "Select a row to approve"
 msgstr "选择要批准的行"
 
 #: components/PaginatedDataList/ToolbarDeleteButton.jsx:160
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:100
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:99
 msgid "Select a row to delete"
 msgstr "选择要删除的行"
 
@@ -7241,7 +7265,7 @@ msgstr "显示"
 msgid "Show Changes"
 msgstr "显示更改"
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:127
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:126
 msgid "Show all groups"
 msgstr "显示所有组"
 
@@ -7254,7 +7278,7 @@ msgstr "显示更改"
 msgid "Show less"
 msgstr "显示更少"
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:126
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:125
 msgid "Show only root groups"
 msgstr "只显示 root 组"
 
@@ -7566,11 +7590,11 @@ msgstr "开始消息"
 msgid "Start message body"
 msgstr "开始消息正文"
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:70
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:35
 msgid "Start sync process"
 msgstr "启动同步进程"
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:74
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:39
 msgid "Start sync source"
 msgstr "启动同步源"
 
diff --git a/awx/ui_next/src/locales/zu/messages.po b/awx/ui_next/src/locales/zu/messages.po
index cf73975035..639cf2e04e 100644
--- a/awx/ui_next/src/locales/zu/messages.po
+++ b/awx/ui_next/src/locales/zu/messages.po
@@ -8,7 +8,7 @@ msgstr ""
 "Language: zu\n"
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: \n"
+"PO-Revision-Date: \n
 "Last-Translator: \n"
 "Language-Team: \n"
 "Plural-Forms: \n"
@@ -892,16 +892,16 @@ msgid "Cancel subscription edit"
 msgstr ""
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:66
-msgid "Cancel sync"
-msgstr ""
+#~ msgid "Cancel sync"
+#~ msgstr ""
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:58
-msgid "Cancel sync process"
-msgstr ""
+#~ msgid "Cancel sync process"
+#~ msgstr ""
 
 #: screens/Inventory/shared/InventorySourceSyncButton.jsx:62
-msgid "Cancel sync source"
-msgstr ""
+#~ msgid "Cancel sync source"
+#~ msgstr ""
 
 #: components/JobList/JobList.jsx:207
 #: components/Workflow/WorkflowNodeHelp.jsx:95
@@ -2965,14 +2965,27 @@ msgstr ""
 msgid "Failed to associate."
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:100
-msgid "Failed to cancel inventory source sync."
+#: screens/Inventory/InventorySources/InventorySourceListItem.jsx:126
+msgid "Failed to cancel Inventory Source Sync"
 msgstr ""
 
+#: screens/Project/ProjectDetail/ProjectDetail.jsx:209
+#: screens/Project/ProjectList/ProjectListItem.jsx:182
+msgid "Failed to cancel Project Update"
+msgstr ""
+
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:100
+#~ msgid "Failed to cancel inventory source sync."
+#~ msgstr ""
+
 #: components/JobList/JobList.jsx:290
 msgid "Failed to cancel one or more jobs."
 msgstr ""
 
+#: screens/Job/JobOutput/shared/OutputToolbar.jsx:185
+msgid "Failed to cancel {0}"
+msgstr ""
+
 #: screens/Credential/CredentialList/CredentialListItem.jsx:85
 msgid "Failed to copy credential."
 msgstr ""
@@ -3210,7 +3223,7 @@ msgstr ""
 msgid "Failed to send test notification."
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:89
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:54
 msgid "Failed to sync inventory source."
 msgstr ""
 
@@ -3541,7 +3554,7 @@ msgstr ""
 msgid "Group details"
 msgstr ""
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:122
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:121
 msgid "Group type"
 msgstr ""
 
@@ -4079,6 +4092,10 @@ msgstr ""
 msgid "Inventory Source"
 msgstr ""
 
+#: screens/Inventory/InventorySources/InventorySourceListItem.jsx:125
+msgid "Inventory Source Error"
+msgstr ""
+
 #: screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx:92
 msgid "Inventory Source Sync"
 msgstr ""
@@ -5855,6 +5872,11 @@ msgstr ""
 msgid "Project Update"
 msgstr ""
 
+#: screens/Project/ProjectDetail/ProjectDetail.jsx:207
+#: screens/Project/ProjectList/ProjectListItem.jsx:179
+msgid "Project Update Error"
+msgstr ""
+
 #: screens/Project/Project.jsx:139
 msgid "Project not found."
 msgstr ""
@@ -6218,6 +6240,8 @@ msgid ""
 "The enabled variable may be specified using dot notation, e.g: 'foo.bar'"
 msgstr ""
 
+#: components/JobCancelButton/JobCancelButton.jsx:71
+#: components/JobCancelButton/JobCancelButton.jsx:75
 #: components/JobList/JobListCancelButton.jsx:159
 #: components/JobList/JobListCancelButton.jsx:162
 #: screens/Job/JobDetail/JobDetail.jsx:434
@@ -6650,7 +6674,7 @@ msgid "Select a row to approve"
 msgstr ""
 
 #: components/PaginatedDataList/ToolbarDeleteButton.jsx:160
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:100
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:99
 msgid "Select a row to delete"
 msgstr ""
 
@@ -6989,7 +7013,7 @@ msgstr ""
 msgid "Show Changes"
 msgstr ""
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:127
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:126
 msgid "Show all groups"
 msgstr ""
 
@@ -7002,7 +7026,7 @@ msgstr ""
 msgid "Show less"
 msgstr ""
 
-#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:126
+#: screens/Inventory/InventoryGroups/InventoryGroupsList.jsx:125
 msgid "Show only root groups"
 msgstr ""
 
@@ -7301,11 +7325,11 @@ msgstr ""
 msgid "Start message body"
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:70
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:35
 msgid "Start sync process"
 msgstr ""
 
-#: screens/Inventory/shared/InventorySourceSyncButton.jsx:74
+#: screens/Inventory/shared/InventorySourceSyncButton.jsx:39
 msgid "Start sync source"
 msgstr ""
 
diff --git a/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceListItem.jsx b/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceListItem.jsx
index 8230497323..a5b4603bfc 100644
--- a/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceListItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceListItem.jsx
@@ -11,6 +11,7 @@ import styled from 'styled-components';
 
 import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import StatusIcon from '../../../components/StatusIcon';
+import JobCancelButton from '../../../components/JobCancelButton';
 import InventorySourceSyncButton from '../shared/InventorySourceSyncButton';
 import { formatDateString } from '../../../util/dates';
 
@@ -95,7 +96,20 @@ function InventorySourceListItem({
             visible={source.summary_fields.user_capabilities.start}
             tooltip={t`Sync`}
           >
-            <InventorySourceSyncButton source={source} />
+            {['running', 'pending', 'waiting'].includes(source?.status) ? (
+              <JobCancelButton
+                job={{
+                  type: 'inventory_update',
+                  id: source.summary_fields.last_job.id,
+                }}
+                errorTitle={t`Inventory Source Sync Error`}
+                errorMessage={t`Failed to cancel Inventory Source Sync`}
+                title={t`Cancel Inventory Source Sync`}
+                showIconButton
+              />
+            ) : (
+              <InventorySourceSyncButton source={source} />
+            )}
           </ActionItem>
           <ActionItem
             visible={source.summary_fields.user_capabilities.edit}
diff --git a/awx/ui_next/src/screens/Inventory/shared/InventorySourceSyncButton.jsx b/awx/ui_next/src/screens/Inventory/shared/InventorySourceSyncButton.jsx
index 07272a5d7a..472771cda5 100644
--- a/awx/ui_next/src/screens/Inventory/shared/InventorySourceSyncButton.jsx
+++ b/awx/ui_next/src/screens/Inventory/shared/InventorySourceSyncButton.jsx
@@ -3,11 +3,11 @@ import React, { useCallback } from 'react';
 import { t } from '@lingui/macro';
 import PropTypes from 'prop-types';
 import { Button, Tooltip } from '@patternfly/react-core';
-import { SyncIcon, MinusCircleIcon } from '@patternfly/react-icons';
+import { SyncIcon } from '@patternfly/react-icons';
 import useRequest, { useDismissableError } from '../../../util/useRequest';
 import AlertModal from '../../../components/AlertModal/AlertModal';
 import ErrorDetail from '../../../components/ErrorDetail/ErrorDetail';
-import { InventoryUpdatesAPI, InventorySourcesAPI } from '../../../api';
+import { InventorySourcesAPI } from '../../../api';
 
 function InventorySourceSyncButton({ source, icon }) {
   const {
@@ -25,60 +25,25 @@ function InventorySourceSyncButton({ source, icon }) {
     {}
   );
 
-  const {
-    isLoading: cancelSyncLoading,
-    error: cancelSyncError,
-    request: cancelSyncProcess,
-  } = useRequest(
-    useCallback(async () => {
-      const {
-        data: {
-          summary_fields: {
-            current_update: { id },
-          },
-        },
-      } = await InventorySourcesAPI.readDetail(source.id);
-
-      await InventoryUpdatesAPI.createSyncCancel(id);
-    }, [source.id])
-  );
-
   const {
     error: startError,
     dismissError: dismissStartError,
   } = useDismissableError(startSyncError);
-  const {
-    error: cancelError,
-    dismissError: dismissCancelError,
-  } = useDismissableError(cancelSyncError);
 
   return (
     <>
-      {['running', 'pending', 'updating'].includes(source.status) ? (
-        <Tooltip content={t`Cancel sync process`} position="top">
-          <Button
-            ouiaId={`${source}-cancel-sync-button`}
-            isDisabled={cancelSyncLoading || startSyncLoading}
-            aria-label={t`Cancel sync source`}
-            variant={icon ? 'plain' : 'secondary'}
-            onClick={cancelSyncProcess}
-          >
-            {icon ? <MinusCircleIcon /> : t`Cancel sync`}
-          </Button>
-        </Tooltip>
-      ) : (
-        <Tooltip content={t`Start sync process`} position="top">
-          <Button
-            ouiaId={`${source}-sync-button`}
-            isDisabled={cancelSyncLoading || startSyncLoading}
-            aria-label={t`Start sync source`}
-            variant={icon ? 'plain' : 'secondary'}
-            onClick={startSyncProcess}
-          >
-            {icon ? <SyncIcon /> : t`Sync`}
-          </Button>
-        </Tooltip>
-      )}
+      <Tooltip content={t`Start sync process`} position="top">
+        <Button
+          ouiaId={`${source}-sync-button`}
+          isDisabled={startSyncLoading}
+          aria-label={t`Start sync source`}
+          variant={icon ? 'plain' : 'secondary'}
+          onClick={startSyncProcess}
+        >
+          {icon ? <SyncIcon /> : t`Sync`}
+        </Button>
+      </Tooltip>
+
       {startError && (
         <AlertModal
           isOpen={startError}
@@ -90,17 +55,6 @@ function InventorySourceSyncButton({ source, icon }) {
           <ErrorDetail error={startError} />
         </AlertModal>
       )}
-      {cancelError && (
-        <AlertModal
-          isOpen={cancelError}
-          variant="error"
-          title={t`Error!`}
-          onClose={dismissCancelError}
-        >
-          {t`Failed to cancel inventory source sync.`}
-          <ErrorDetail error={cancelError} />
-        </AlertModal>
-      )}
     </>
   );
 }
diff --git a/awx/ui_next/src/screens/Inventory/shared/InventorySourceSyncButton.test.jsx b/awx/ui_next/src/screens/Inventory/shared/InventorySourceSyncButton.test.jsx
index 9adb77c0b3..b7c8508d99 100644
--- a/awx/ui_next/src/screens/Inventory/shared/InventorySourceSyncButton.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/shared/InventorySourceSyncButton.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { InventoryUpdatesAPI, InventorySourcesAPI } from '../../../api';
+import { InventorySourcesAPI } from '../../../api';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 import InventorySourceSyncButton from './InventorySourceSyncButton';
 
@@ -36,17 +36,6 @@ describe('<InventorySourceSyncButton />', () => {
     ).toBe(false);
   });
 
-  test('should render cancel sync button', () => {
-    wrapper = mountWithContexts(
-      <InventorySourceSyncButton
-        source={{ status: 'pending', ...source }}
-        onSyncLoading={onSyncLoading}
-        onFetchSources={() => {}}
-      />
-    );
-    expect(wrapper.find('MinusCircleIcon').length).toBe(1);
-  });
-
   test('should start sync properly', async () => {
     InventorySourcesAPI.createSyncStart.mockResolvedValue({
       data: { status: 'pending' },
@@ -58,33 +47,6 @@ describe('<InventorySourceSyncButton />', () => {
     expect(InventorySourcesAPI.createSyncStart).toBeCalledWith(1);
   });
 
-  test('should cancel sync properly', async () => {
-    InventorySourcesAPI.readDetail.mockResolvedValue({
-      data: { summary_fields: { current_update: { id: 120 } } },
-    });
-    InventoryUpdatesAPI.createSyncCancel.mockResolvedValue({
-      data: { status: '' },
-    });
-
-    wrapper = mountWithContexts(
-      <InventorySourceSyncButton
-        source={{ status: 'pending', ...source }}
-        onSyncLoading={onSyncLoading}
-        onFetchSources={() => {}}
-      />
-    );
-    expect(wrapper.find('Button[aria-label="Cancel sync source"]').length).toBe(
-      1
-    );
-
-    await act(async () =>
-      wrapper.find('Button[aria-label="Cancel sync source"]').simulate('click')
-    );
-
-    expect(InventorySourcesAPI.readDetail).toBeCalledWith(1);
-    expect(InventoryUpdatesAPI.createSyncCancel).toBeCalledWith(120);
-  });
-
   test('should throw error on sync start properly', async () => {
     InventorySourcesAPI.createSyncStart.mockRejectedValueOnce(
       new Error({
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 c46d5547a2..6a35d72d0e 100644
--- a/awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx
+++ b/awx/ui_next/src/screens/Job/JobOutput/shared/OutputToolbar.jsx
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { t } from '@lingui/macro';
 import { bool, shape, func } from 'prop-types';
 import {
-  MinusCircleIcon,
   DownloadIcon,
   RocketIcon,
   TrashAltIcon,
@@ -15,6 +14,7 @@ import {
   LaunchButton,
   ReLaunchDropDown,
 } from '../../../../components/LaunchButton';
+import JobCancelButton from '../../../../components/JobCancelButton';
 
 const BadgeGroup = styled.div`
   margin-left: 20px;
@@ -62,13 +62,7 @@ const OUTPUT_NO_COUNT_JOB_TYPES = [
   'inventory_update',
 ];
 
-const OutputToolbar = ({
-  job,
-  onDelete,
-  onCancel,
-  isDeleteDisabled,
-  jobStatus,
-}) => {
+const OutputToolbar = ({ job, onDelete, isDeleteDisabled, jobStatus }) => {
   const hideCounts = OUTPUT_NO_COUNT_JOB_TYPES.includes(job.type);
 
   const playCount = job?.playbook_counts?.play_count;
@@ -184,16 +178,13 @@ const OutputToolbar = ({
       )}
       {job.summary_fields.user_capabilities.start &&
         ['pending', 'waiting', 'running'].includes(jobStatus) && (
-          <Tooltip content={t`Cancel Job`}>
-            <Button
-              ouiaId="job-output-cancel-button"
-              variant="plain"
-              aria-label={t`Cancel Job`}
-              onClick={onCancel}
-            >
-              <MinusCircleIcon />
-            </Button>
-          </Tooltip>
+          <JobCancelButton
+            job={job}
+            errorTitle={t`Job Cancel Error`}
+            title={t`Job Cancel`}
+            errorMessage={t`Failed to cancel ${job.name}`}
+            showIconButton
+          />
         )}
       {job.summary_fields.user_capabilities.delete &&
         ['new', 'successful', 'failed', 'error', 'canceled'].includes(
diff --git a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
index 22ae88d711..13b2b54397 100644
--- a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
@@ -15,6 +15,7 @@ import {
   UserDateDetail,
 } from '../../../components/DetailList';
 import ErrorDetail from '../../../components/ErrorDetail';
+import JobCancelButton from '../../../components/JobCancelButton';
 import ExecutionEnvironmentDetail from '../../../components/ExecutionEnvironmentDetail';
 import CredentialChip from '../../../components/CredentialChip';
 import { ProjectsAPI } from '../../../api';
@@ -199,12 +200,20 @@ function ProjectDetail({ project }) {
             {t`Edit`}
           </Button>
         )}
-        {summary_fields.user_capabilities?.start && (
-          <ProjectSyncButton
-            projectId={project.id}
-            lastJobStatus={job && job.status}
-          />
-        )}
+        {summary_fields.user_capabilities?.start &&
+          (['running', 'pending', 'waiting'].includes(job?.status) ? (
+            <JobCancelButton
+              job={{ id: job.id, type: 'project_update' }}
+              errorTitle={t`Project Sync Error`}
+              title={t`Cancel Project Sync`}
+              errorMessage={t`Failed to cancel Project Sync`}
+            />
+          ) : (
+            <ProjectSyncButton
+              projectId={project.id}
+              lastJobStatus={job && job.status}
+            />
+          ))}
         {summary_fields.user_capabilities?.delete && (
           <DeleteButton
             name={name}
diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
index d3300af7cf..750ed9f0fd 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
@@ -26,6 +26,7 @@ import { toTitleCase } from '../../../util/strings';
 import CopyButton from '../../../components/CopyButton';
 import ProjectSyncButton from '../shared/ProjectSyncButton';
 import { Project } from '../../../types';
+import JobCancelButton from '../../../components/JobCancelButton';
 
 const Label = styled.span`
   color: var(--pf-global--disabled-color--100);
@@ -172,10 +173,20 @@ function ProjectListItem({
             visible={project.summary_fields.user_capabilities.start}
             tooltip={t`Sync Project`}
           >
-            <ProjectSyncButton
-              projectId={project.id}
-              lastJobStatus={job && job.status}
-            />
+            {['running', 'pending', 'waiting'].includes(job?.status) ? (
+              <JobCancelButton
+                job={{ id: job.id, type: 'project_update' }}
+                errorTitle={t`Project Sync Error`}
+                title={t`Cancel Project Sync`}
+                showIconButton
+                errorMessage={t`Failed to cancel Project Sync`}
+              />
+            ) : (
+              <ProjectSyncButton
+                projectId={project.id}
+                lastJobStatus={job && job.status}
+              />
+            )}
           </ActionItem>
           <ActionItem
             visible={project.summary_fields.user_capabilities.edit}