Add YAML tab for Job Output event modal.

2 files changed, 50 insertions, 12 deletions

diff --git a/awx/ui/src/screens/Job/JobOutput/HostEventModal.js b/awx/ui/src/screens/Job/JobOutput/HostEventModal.js
index a9199513b1..12a6bf804c 100644
--- a/awx/ui/src/screens/Job/JobOutput/HostEventModal.js
+++ b/awx/ui/src/screens/Job/JobOutput/HostEventModal.js
@@ -3,6 +3,7 @@ import { Modal, Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 import { t } from '@lingui/macro';
 import { encode } from 'html-entities';
+import { jsonToYaml } from 'util/yaml';
 import StatusLabel from '../../../components/StatusLabel';
 import { DetailList, Detail } from '../../../components/DetailList';
 import ContentEmpty from '../../../components/ContentEmpty';
@@ -144,9 +145,28 @@ function HostEventModal({ onClose, hostEvent = {}, isOpen = false }) {
             <ContentEmpty title={t`No JSON Available`} />
           )}
         </Tab>
+        <Tab
+          eventKey={2}
+          title={<TabTitleText>{t`YAML`}</TabTitleText>}
+          aria-label={t`YAML tab`}
+          ouiaId="yaml-tab"
+        >
+          {activeTabKey === 2 && jsonObj ? (
+            <CodeEditor
+              mode="javascript"
+              readOnly
+              value={jsonToYaml(JSON.stringify(jsonObj))}
+              onChange={() => {}}
+              rows={20}
+              hasErrors={false}
+            />
+          ) : (
+            <ContentEmpty title={t`No YAML Available`} />
+          )}
+        </Tab>
         {stdOut?.length ? (
           <Tab
-            eventKey={2}
+            eventKey={3}
             title={<TabTitleText>{t`Output`}</TabTitleText>}
             aria-label={t`Output tab`}
             ouiaId="standard-out-tab"
@@ -163,7 +183,7 @@ function HostEventModal({ onClose, hostEvent = {}, isOpen = false }) {
         ) : null}
         {stdErr?.length ? (
           <Tab
-            eventKey={3}
+            eventKey={4}
             title={<TabTitleText>{t`Standard Error`}</TabTitleText>}
             aria-label={t`Standard error tab`}
             ouiaId="standard-error-tab"
diff --git a/awx/ui/src/screens/Job/JobOutput/HostEventModal.test.js b/awx/ui/src/screens/Job/JobOutput/HostEventModal.test.js
index 0b877b4e4c..033d18fdf5 100644
--- a/awx/ui/src/screens/Job/JobOutput/HostEventModal.test.js
+++ b/awx/ui/src/screens/Job/JobOutput/HostEventModal.test.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 import HostEventModal from './HostEventModal';
+import { jsonToYaml } from 'util/yaml';
 
 const hostEvent = {
   changed: true,
@@ -167,6 +168,8 @@ const jsonValue = `{
   ]
 }`;
 
+const yamlValue = jsonToYaml(jsonValue);
+
 describe('HostEventModal', () => {
   test('initially renders successfully', () => {
     const wrapper = shallow(
@@ -187,7 +190,7 @@ describe('HostEventModal', () => {
       <HostEventModal hostEvent={hostEvent} onClose={() => {}} isOpen />
     );
 
-    expect(wrapper.find('Tabs Tab').length).toEqual(4);
+    expect(wrapper.find('Tabs Tab').length).toEqual(5);
   });
 
   test('should initially show details tab', () => {
@@ -287,7 +290,7 @@ describe('HostEventModal', () => {
     expect(codeEditor.prop('value')).toEqual(jsonValue);
   });
 
-  test('should display Standard Out tab content on tab click', () => {
+  test('should display YAML tab content on tab click', () => {
     const wrapper = shallow(
       <HostEventModal hostEvent={hostEvent} onClose={() => {}} isOpen />
     );
@@ -299,6 +302,21 @@ describe('HostEventModal', () => {
     const codeEditor = wrapper.find('Tab[eventKey=2] CodeEditor');
     expect(codeEditor.prop('mode')).toBe('javascript');
     expect(codeEditor.prop('readOnly')).toBe(true);
+    expect(codeEditor.prop('value')).toEqual(yamlValue);
+  });
+
+  test('should display Standard Out tab content on tab click', () => {
+    const wrapper = shallow(
+      <HostEventModal hostEvent={hostEvent} onClose={() => {}} isOpen />
+    );
+
+    const handleTabClick = wrapper.find('Tabs').prop('onSelect');
+    handleTabClick(null, 3);
+    wrapper.update();
+
+    const codeEditor = wrapper.find('Tab[eventKey=3] CodeEditor');
+    expect(codeEditor.prop('mode')).toBe('javascript');
+    expect(codeEditor.prop('readOnly')).toBe(true);
     expect(codeEditor.prop('value')).toEqual(hostEvent.event_data.res.stdout);
   });
 
@@ -316,10 +334,10 @@ describe('HostEventModal', () => {
     );
 
     const handleTabClick = wrapper.find('Tabs').prop('onSelect');
-    handleTabClick(null, 3);
+    handleTabClick(null, 4);
     wrapper.update();
 
-    const codeEditor = wrapper.find('Tab[eventKey=3] CodeEditor');
+    const codeEditor = wrapper.find('Tab[eventKey=4] CodeEditor');
     expect(codeEditor.prop('mode')).toBe('javascript');
     expect(codeEditor.prop('readOnly')).toBe(true);
     expect(codeEditor.prop('value')).toEqual('error content');
@@ -351,10 +369,10 @@ describe('HostEventModal', () => {
     );
 
     const handleTabClick = wrapper.find('Tabs').prop('onSelect');
-    handleTabClick(null, 2);
+    handleTabClick(null, 3);
     wrapper.update();
 
-    const codeEditor = wrapper.find('Tab[eventKey=2] CodeEditor');
+    const codeEditor = wrapper.find('Tab[eventKey=3] CodeEditor');
     expect(codeEditor.prop('mode')).toBe('javascript');
     expect(codeEditor.prop('readOnly')).toBe(true);
     expect(codeEditor.prop('value')).toEqual('foo bar');
@@ -375,10 +393,10 @@ describe('HostEventModal', () => {
     );
 
     const handleTabClick = wrapper.find('Tabs').prop('onSelect');
-    handleTabClick(null, 2);
+    handleTabClick(null, 3);
     wrapper.update();
 
-    const codeEditor = wrapper.find('Tab[eventKey=2] CodeEditor');
+    const codeEditor = wrapper.find('Tab[eventKey=3] CodeEditor');
     expect(codeEditor.prop('mode')).toBe('javascript');
     expect(codeEditor.prop('readOnly')).toBe(true);
     expect(codeEditor.prop('value')).toEqual('baz\nbar');
@@ -394,10 +412,10 @@ describe('HostEventModal', () => {
     );
 
     const handleTabClick = wrapper.find('Tabs').prop('onSelect');
-    handleTabClick(null, 2);
+    handleTabClick(null, 3);
     wrapper.update();
 
-    const codeEditor = wrapper.find('Tab[eventKey=2] CodeEditor');
+    const codeEditor = wrapper.find('Tab[eventKey=3] CodeEditor');
     expect(codeEditor.prop('mode')).toBe('javascript');
     expect(codeEditor.prop('readOnly')).toBe(true);
     expect(codeEditor.prop('value')).toEqual(