From 81d88df757716a743a5e2b020c51ee856eb3bf29 Mon Sep 17 00:00:00 2001 From: Mikhail Yohman Date: Sat, 23 Sep 2023 22:05:27 -0600 Subject: [PATCH] Add YAML tab for Job Output event modal. --- .../screens/Job/JobOutput/HostEventModal.js | 24 +++++++++++- .../Job/JobOutput/HostEventModal.test.js | 38 ++++++++++++++----- 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 a9199513b1c3..12a6bf804c90 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 }) { )} + {t`YAML`}} + aria-label={t`YAML tab`} + ouiaId="yaml-tab" + > + {activeTabKey === 2 && jsonObj ? ( + {}} + rows={20} + hasErrors={false} + /> + ) : ( + + )} + {stdOut?.length ? ( {t`Output`}} aria-label={t`Output tab`} ouiaId="standard-out-tab" @@ -163,7 +183,7 @@ function HostEventModal({ onClose, hostEvent = {}, isOpen = false }) { ) : null} {stdErr?.length ? ( {t`Standard Error`}} 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 0b877b4e4c75..033d18fdf5f2 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', () => { {}} 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( {}} 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( + {}} 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(