From 768fe94088e0bb5035ed67a12ef1420b81067353 Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Tue, 16 Mar 2021 15:55:35 -0700 Subject: [PATCH 1/3] initialize variables field/detail with formatted JSON strings --- .../components/CodeEditor/VariablesDetail.jsx | 17 +++++ .../CodeEditor/VariablesDetail.test.jsx | 10 ++- .../components/CodeEditor/VariablesField.jsx | 9 ++- .../CodeEditor/VariablesField.test.jsx | 63 ++++++++++++++----- 4 files changed, 81 insertions(+), 18 deletions(-) diff --git a/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx b/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx index beda9dcacd..e866c0cb12 100644 --- a/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx @@ -23,6 +23,23 @@ import { import CodeEditor from './CodeEditor'; import { JSON_MODE, YAML_MODE } from './constants'; +function getValueAsMode(value, mode) { + if (!value) { + if (mode === JSON_MODE) { + return '{}'; + } + return '---'; + } + const modeMatches = isJsonString(value) === (mode === JSON_MODE); + if (modeMatches) { + if (mode === YAML_MODE) { + return value; + } + return JSON.stringify(JSON.parse(value), null, 2); + } + return mode === YAML_MODE ? jsonToYaml(value) : yamlToJson(value); +} + function VariablesDetail({ dataCy, helpText, diff --git a/awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx b/awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx index c28061cf3f..8b5da1a9e3 100644 --- a/awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx @@ -24,7 +24,15 @@ describe('', () => { const input = wrapper.find('VariablesDetail___StyledCodeEditor'); expect(input).toHaveLength(1); expect(input.prop('mode')).toEqual('javascript'); - expect(input.prop('value')).toEqual('{"foo": "bar"}'); + }); + + test('should format JSON', () => { + const wrapper = mountWithContexts( + + ); + const input = wrapper.find('VariablesDetail___StyledCodeEditor'); + expect(input).toHaveLength(1); + expect(input.prop('value')).toEqual('{\n "foo": "bar"\n}'); }); test('should convert between modes', () => { diff --git a/awx/ui_next/src/components/CodeEditor/VariablesField.jsx b/awx/ui_next/src/components/CodeEditor/VariablesField.jsx index aec4e4824f..d5a053c1c3 100644 --- a/awx/ui_next/src/components/CodeEditor/VariablesField.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesField.jsx @@ -193,7 +193,14 @@ function VariablesFieldInternals({ setShouldValidate, handleChange, }) { - const [field, meta] = useField(name); + const [field, meta, helpers] = useField(name); + + useEffect(function formatJsonString() { + if (mode === YAML_MODE) { + return; + } + helpers.setValue(JSON.stringify(JSON.parse(field.value), null, 2)); + }, []); // eslint-disable-line react-hooks/exhaustive-deps return (
diff --git a/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx b/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx index 977fb4a724..d562e46846 100644 --- a/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx @@ -5,10 +5,6 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers'; import VariablesField from './VariablesField'; describe('VariablesField', () => { - beforeEach(() => { - document.body.createTextRange = jest.fn(); - }); - it('should render code editor', () => { const value = '---\n'; const wrapper = mountWithContexts( @@ -200,18 +196,25 @@ describe('VariablesField', () => { it('should initialize to JSON if value is JSON', async () => { const value = '{"foo": "bar"}'; - const wrapper = mountWithContexts( - - {formik => ( -
- - - - )} -
- ); + let wrapper; + await act(async () => { + wrapper = mountWithContexts( + + {formik => ( +
+ + + + )} +
+ ); + }); expect(wrapper.find('CodeEditor').prop('mode')).toEqual('javascript'); }); @@ -238,4 +241,32 @@ describe('VariablesField', () => { expect(wrapper.find('Modal').prop('isOpen')).toEqual(true); expect(wrapper.find('Modal CodeEditor')).toHaveLength(1); }); + + it('should format JSON for code editor', async () => { + const value = '{"foo": "bar"}'; + let wrapper; + await act(async () => { + wrapper = mountWithContexts( + + {formik => ( +
+ + + + )} +
+ ); + }); + wrapper.update(); + + expect(wrapper.find('CodeEditor').prop('value')).toEqual( + '{\n "foo": "bar"\n}' + ); + }); }); From b8179673778a545a2c7bea4f34f4908f5b10432b Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Mon, 19 Apr 2021 09:38:50 -0700 Subject: [PATCH 2/3] delete unused function --- .../components/CodeEditor/VariablesDetail.jsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx b/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx index e866c0cb12..beda9dcacd 100644 --- a/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx @@ -23,23 +23,6 @@ import { import CodeEditor from './CodeEditor'; import { JSON_MODE, YAML_MODE } from './constants'; -function getValueAsMode(value, mode) { - if (!value) { - if (mode === JSON_MODE) { - return '{}'; - } - return '---'; - } - const modeMatches = isJsonString(value) === (mode === JSON_MODE); - if (modeMatches) { - if (mode === YAML_MODE) { - return value; - } - return JSON.stringify(JSON.parse(value), null, 2); - } - return mode === YAML_MODE ? jsonToYaml(value) : yamlToJson(value); -} - function VariablesDetail({ dataCy, helpText, From 804cf74cd8ad319e5fc94dd94e3c7257b5540895 Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Mon, 19 Apr 2021 11:00:27 -0700 Subject: [PATCH 3/3] fix formatting JSON on initialize --- awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx | 3 +++ awx/ui_next/src/components/CodeEditor/VariablesField.jsx | 7 ++++--- .../src/components/CodeEditor/VariablesField.test.jsx | 1 + 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx b/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx index beda9dcacd..3e8b08f69e 100644 --- a/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx @@ -49,6 +49,9 @@ function VariablesDetail({ } const modeMatches = isJsonString(value) === (mode === JSON_MODE); if (modeMatches) { + if (mode === JSON_MODE) { + return JSON.stringify(JSON.parse(value), null, 2); + } return value; } return mode === YAML_MODE ? jsonToYaml(value) : yamlToJson(value); diff --git a/awx/ui_next/src/components/CodeEditor/VariablesField.jsx b/awx/ui_next/src/components/CodeEditor/VariablesField.jsx index d5a053c1c3..58fee94765 100644 --- a/awx/ui_next/src/components/CodeEditor/VariablesField.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesField.jsx @@ -57,11 +57,12 @@ function VariablesField({ ); const [field, meta, helpers] = useField({ name, validate }); - // mode's useState above couldn't be initialized to JSON_MODE because - // the field value had to be defined below it - useEffect(function initializeMode() { + useEffect(function initializeJSON() { if (isJsonString(field.value)) { + // mode's useState above couldn't be initialized to JSON_MODE because + // the field value had to be defined below it setMode(JSON_MODE); + helpers.setValue(JSON.stringify(JSON.parse(field.value), null, 2)); } }, []); // eslint-disable-line react-hooks/exhaustive-deps diff --git a/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx b/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx index d562e46846..6925d7b3b1 100644 --- a/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx @@ -215,6 +215,7 @@ describe('VariablesField', () => { ); }); + wrapper.update(); expect(wrapper.find('CodeEditor').prop('mode')).toEqual('javascript'); });