initialize variables field/detail with formatted JSON strings

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,

awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx

@@ -24,7 +24,15 @@ describe('<VariablesDetail>', () => {
     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(
+      <VariablesDetail value='{"foo": "bar"}' label="Variables" />
+    );
+    const input = wrapper.find('VariablesDetail___StyledCodeEditor');
+    expect(input).toHaveLength(1);
+    expect(input.prop('value')).toEqual('{\n  "foo": "bar"\n}');
   });
 
   test('should convert between modes', () => {

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 (
     <div className="pf-c-form__group">

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(
+    let wrapper;
-      <Formik initialValues={{ variables: value }} onSubmit={jest.fn()}>
+    await act(async () => {
-        {formik => (
+      wrapper = mountWithContexts(
-          <form onSubmit={formik.handleSubmit}>
+        <Formik initialValues={{ variables: value }} onSubmit={jest.fn()}>
-            <VariablesField id="the-field" name="variables" label="Variables" />
+          {formik => (
-            <button type="submit" id="submit">
+            <form onSubmit={formik.handleSubmit}>
-              Submit
+              <VariablesField
-            </button>
+                id="the-field"
-          </form>
+                name="variables"
-        )}
+                label="Variables"
-      </Formik>
+              />
-    );
+              <button type="submit" id="submit">
+                Submit
+              </button>
+            </form>
+          )}
+        </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 initialValues={{ variables: value }} onSubmit={jest.fn()}>
+          {formik => (
+            <form onSubmit={formik.handleSubmit}>
+              <VariablesField
+                id="the-field"
+                name="variables"
+                label="Variables"
+              />
+              <button type="submit" id="submit">
+                Submit
+              </button>
+            </form>
+          )}
+        </Formik>
+      );
+    });
+    wrapper.update();
+
+    expect(wrapper.find('CodeEditor').prop('value')).toEqual(
+      '{\n  "foo": "bar"\n}'
+    );
+  });
 });