From c1b2428b5da9c881f0189949ef34a9da3f0658d2 Mon Sep 17 00:00:00 2001
From: nixocio <nixocio@gmail.com>
Date: Tue, 20 Jul 2021 16:25:38 -0400
Subject: [PATCH] Create map of strings to be translated

Create map of strings to be translated to StatusLabel

closes:https://github.com/ansible/awx/issues/8586
---
 .../src/components/StatusLabel/StatusLabel.js      | 14 +++++++++++++-
 .../src/components/StatusLabel/StatusLabel.test.js |  8 ++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/awx/ui_next/src/components/StatusLabel/StatusLabel.js b/awx/ui_next/src/components/StatusLabel/StatusLabel.js
index 7d994c78e2..30d250a4d1 100644
--- a/awx/ui_next/src/components/StatusLabel/StatusLabel.js
+++ b/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];
 
diff --git a/awx/ui_next/src/components/StatusLabel/StatusLabel.test.js b/awx/ui_next/src/components/StatusLabel/StatusLabel.test.js
index 9b1997dcb3..6eb1cf4b7c 100644
--- a/awx/ui_next/src/components/StatusLabel/StatusLabel.test.js
+++ b/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);