From 225f57fefd61ec8da83a26164b40b7422912d1c9 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Thu, 27 Aug 2020 09:26:23 -0400
Subject: [PATCH] Remove use of i18n.plural in favor of low level i18n._.

---
 .../JobList/JobListCancelButton.jsx           | 58 +++++++++++--------
 .../JobList/JobListCancelButton.test.jsx      | 17 +-----
 2 files changed, 35 insertions(+), 40 deletions(-)

diff --git a/awx/ui_next/src/components/JobList/JobListCancelButton.jsx b/awx/ui_next/src/components/JobList/JobListCancelButton.jsx
index a178034479..a4fbc197b4 100644
--- a/awx/ui_next/src/components/JobList/JobListCancelButton.jsx
+++ b/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)
-      .join(', ');
-    if (jobsToCancel.some(cannotCancel)) {
+      .map(job => job.name);
+    const numJobsUnableToCancel = jobsUnableToCancel.length;
+    if (numJobsUnableToCancel > 0) {
       return (
         <div>
-          {i18n.plural({
-            value: jobsToCancel.length,
-            one: 'You do not have permission to cancel the following job: ',
-            other: 'You do not have permission to cancel the following jobs: ',
-          })}
-          {jobsUnableToCancel}
+          {i18n._(
+            '{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,
+            }
+          )}
+          {' '.concat(jobsUnableToCancel.join(', '))}
         </div>
       );
     }
-    if (jobsToCancel.length) {
-      return i18n.plural({
-        value: jobsToCancel.length,
-        one: 'Cancel selected job',
-        other: 'Cancel selected jobs',
-      });
+    if (numJobsToCancel > 0) {
+      return i18n._(
+        '{numJobsToCancel, plural, 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({
-    value: jobsToCancel.length < 2,
-    one: 'Cancel job',
-    other: 'Cancel jobs',
-  });
+  const cancelJobText = i18n._(
+    '{zeroOrOneJobSelected, plural, 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({
-                  value: jobsToCancel.length,
-                  one: 'This action will cancel the following job:',
-                  other: 'This action will cancel the following jobs:',
-                })}
+                {i18n._(
+                  '{numJobsToCancel, plural, 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}>
diff --git a/awx/ui_next/src/components/JobList/JobListCancelButton.test.jsx b/awx/ui_next/src/components/JobList/JobListCancelButton.test.jsx
index 7f085615cf..43bdbe1352 100644
--- a/awx/ui_next/src/components/JobList/JobListCancelButton.test.jsx
+++ b/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
-      .find('AlertModal button[aria-label="Cancel job"]')
-      .simulate('click');
+    wrapper.find('button#cancel-job-confirm-button').simulate('click');
     wrapper.update();
     expect(onCancel).toHaveBeenCalledTimes(1);
   });