Merge pull request #10696 from nixocio/ui_status_label

Create map of strings to be translated

awx/ui_next/src/components/StatusLabel/StatusLabel.js

@@ -1,5 +1,6 @@
 import 'styled-components/macro';
 import React from 'react';
+import { t } from '@lingui/macro';
 import { oneOf } from 'prop-types';
 import { Label, Tooltip } from '@patternfly/react-core';
 import {
@@ -49,7 +50,18 @@ const icons = {
 };
 
 export default function StatusLabel({ status, tooltipContent = '' }) {
-  const label = status.charAt(0).toUpperCase() + status.slice(1);
+  const upperCaseStatus = {
+    success: t`Success`,
+    successful: t`Successful`,
+    failed: t`Failed`,
+    error: t`Error`,
+    running: t`Running`,
+    pending: t`Pending`,
+    waiting: t`Waiting`,
+    disabled: t`Disabled`,
+    canceled: t`Canceled`,
+  };
+  const label = upperCaseStatus[status] || t`Undefined`;
   const color = colors[status] || 'grey';
   const Icon = icons[status];
 

awx/ui_next/src/components/StatusLabel/StatusLabel.test.js

@@ -52,6 +52,14 @@ describe('StatusLabel', () => {
     expect(wrapper.text()).toEqual('Waiting');
   });
 
+  test('should render disabled', () => {
+    const wrapper = mount(<StatusLabel status="disabled" />);
+    expect(wrapper).toHaveLength(1);
+    expect(wrapper.find('MinusCircleIcon')).toHaveLength(1);
+    expect(wrapper.find('Label').prop('color')).toEqual('grey');
+    expect(wrapper.text()).toEqual('Disabled');
+  });
+
   test('should render canceled', () => {
     const wrapper = mount(<StatusLabel status="canceled" />);
     expect(wrapper).toHaveLength(1);