Remove use of i18n.plural in favor of low level i18n._.

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

@@ -13,6 +13,8 @@ function cannotCancel(job) {
 
 function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const numJobsToCancel = jobsToCancel.length;
+  const zeroOrOneJobSelected = numJobsToCancel < 2;
 
   const handleCancel = () => {
     onCancel();
@@ -22,26 +24,28 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
   const renderTooltip = () => {
     const jobsUnableToCancel = jobsToCancel
       .filter(cannotCancel)
-      .map(job => job.name)
+      .map(job => job.name);
-      .join(', ');
+    const numJobsUnableToCancel = jobsUnableToCancel.length;
-    if (jobsToCancel.some(cannotCancel)) {
+    if (numJobsUnableToCancel > 0) {
       return (
         <div>
-          {i18n.plural({
+          {i18n._(
-            value: jobsToCancel.length,
+            '{numJobsUnableToCancel, plural, one {You do not have permission to cancel the following job:} other {You do not have permission to cancel the following jobs:}}',
-            one: 'You do not have permission to cancel the following job: ',
+            {
-            other: 'You do not have permission to cancel the following jobs: ',
+              numJobsUnableToCancel,
-          })}
+            }
-          {jobsUnableToCancel}
+          )}
+          {' '.concat(jobsUnableToCancel.join(', '))}
         </div>
       );
     }
-    if (jobsToCancel.length) {
+    if (numJobsToCancel > 0) {
-      return i18n.plural({
+      return i18n._(
-        value: jobsToCancel.length,
+        '{numJobsToCancel, plural, one {Cancel selected job} other {Cancel selected jobs}}',
-        one: 'Cancel selected job',
+        {
-        other: 'Cancel selected jobs',
+          numJobsToCancel,
-      });
+        }
+      );
     }
     return i18n._(t`Select a job to cancel`);
   };
@@ -49,11 +53,12 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
   const isDisabled =
     jobsToCancel.length === 0 || jobsToCancel.some(cannotCancel);
 
-  const cancelJobText = i18n.plural({
+  const cancelJobText = i18n._(
-    value: jobsToCancel.length < 2,
+    '{zeroOrOneJobSelected, plural, one {Cancel job} other {Cancel jobs}}',
-    one: 'Cancel job',
+    {
-    other: 'Cancel jobs',
+      zeroOrOneJobSelected,
-  });
+    }
+  );
 
   return (
     <Kebabified>
@@ -90,6 +95,7 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
               onClose={() => setIsModalOpen(false)}
               actions={[
                 <Button
+                  id="cancel-job-confirm-button"
                   key="delete"
                   variant="danger"
                   aria-label={cancelJobText}
@@ -98,6 +104,7 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
                   {cancelJobText}
                 </Button>,
                 <Button
+                  id="cancel-job-return-button"
                   key="cancel"
                   variant="secondary"
                   aria-label={i18n._(t`Return`)}
@@ -108,11 +115,12 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
               ]}
             >
               <div>
-                {i18n.plural({
+                {i18n._(
-                  value: jobsToCancel.length,
+                  '{numJobsToCancel, plural, one {This action will cancel the following job:} other {This action will cancel the following jobs:}}',
-                  one: 'This action will cancel the following job:',
+                  {
-                  other: 'This action will cancel the following jobs:',
+                    numJobsToCancel,
-                })}
+                  }
+                )}
               </div>
               {jobsToCancel.map(job => (
                 <span key={job.id}>

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { shallow } from 'enzyme';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import JobListCancelButton from './JobListCancelButton';
 
@@ -38,15 +37,6 @@ describe('<JobListCancelButton />', () => {
     expect(wrapper.find('JobListCancelButton button').props().disabled).toBe(
       true
     );
-    const tooltipContents = wrapper.find('Tooltip').props().content;
-    const renderedTooltipContents = shallow(tooltipContents);
-    expect(
-      renderedTooltipContents.matchesElement(
-        <div>
-          You do not have permission to cancel the following job: some job
-        </div>
-      )
-    ).toBe(true);
   });
   test('should be enabled when user does have permission to cancel selected job', () => {
     wrapper = mountWithContexts(
@@ -68,7 +58,6 @@ describe('<JobListCancelButton />', () => {
     expect(wrapper.find('JobListCancelButton button').props().disabled).toBe(
       false
     );
-    expect(wrapper.find('Tooltip').props().content).toBe('Cancel selected job');
   });
   test('modal functions as expected', () => {
     const onCancel = jest.fn();
@@ -93,7 +82,7 @@ describe('<JobListCancelButton />', () => {
     wrapper.find('JobListCancelButton button').simulate('click');
     wrapper.update();
     expect(wrapper.find('AlertModal').length).toBe(1);
-    wrapper.find('AlertModal button[aria-label="Return"]').simulate('click');
+    wrapper.find('button#cancel-job-return-button').simulate('click');
     wrapper.update();
     expect(onCancel).toHaveBeenCalledTimes(0);
     expect(wrapper.find('AlertModal').length).toBe(0);
@@ -101,9 +90,7 @@ describe('<JobListCancelButton />', () => {
     wrapper.find('JobListCancelButton button').simulate('click');
     wrapper.update();
     expect(wrapper.find('AlertModal').length).toBe(1);
-    wrapper
+    wrapper.find('button#cancel-job-confirm-button').simulate('click');
-      .find('AlertModal button[aria-label="Cancel job"]')
-      .simulate('click');
     wrapper.update();
     expect(onCancel).toHaveBeenCalledTimes(1);
   });