Merge pull request #5699 from keithjgrant/5235-variables-field

Make VariablesField detect correct mode on mount

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx

@@ -2,12 +2,10 @@ import React, { useState } from 'react';
 import { string, number } from 'prop-types';
 import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core';
 import { DetailName, DetailValue } from '@components/DetailList';
+import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
 import CodeMirrorInput from './CodeMirrorInput';
 import YamlJsonToggle from './YamlJsonToggle';
-import { yamlToJson, jsonToYaml, isJson } from '../../util/yaml';
-
-const YAML_MODE = 'yaml';
-const JSON_MODE = 'javascript';
+import { JSON_MODE, YAML_MODE } from './constants';
 
 function VariablesDetail({ value, label, rows }) {
   const [mode, setMode] = useState(isJson(value) ? JSON_MODE : YAML_MODE);

awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx

@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
 import { string, bool } from 'prop-types';
-import { Field } from 'formik';
+import { Field, useFormikContext } from 'formik';
 import { Split, SplitItem } from '@patternfly/react-core';
+import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
 import CodeMirrorInput from './CodeMirrorInput';
 import YamlJsonToggle from './YamlJsonToggle';
-import { yamlToJson, jsonToYaml } from '../../util/yaml';
-
-const YAML_MODE = 'yaml';
+import { JSON_MODE, YAML_MODE } from './constants';
 
 function VariablesField({ id, name, label, readOnly }) {
-  // TODO: detect initial mode
-  const [mode, setMode] = useState(YAML_MODE);
+  const { values } = useFormikContext();
+  const value = values[name];
+  const [mode, setMode] = useState(isJson(value) ? JSON_MODE : YAML_MODE);
 
   return (
     <Field name={name}>
@@ -44,8 +44,8 @@ function VariablesField({ id, name, label, readOnly }) {
             mode={mode}
             readOnly={readOnly}
             {...field}
-            onChange={value => {
-              form.setFieldValue(name, value);
+            onChange={newVal => {
+              form.setFieldValue(name, newVal);
             }}
             hasErrors={!!form.errors[field.name]}
           />

awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx

@@ -97,4 +97,22 @@ describe('VariablesField', () => {
       variables: '---\nnewval: changed',
     });
   });
+
+  it('should initialize to JSON if value is JSON', async () => {
+    const value = '{"foo": "bar"}';
+    const wrapper = mount(
+      <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>
+    );
+
+    expect(wrapper.find('CodeMirrorInput').prop('mode')).toEqual('javascript');
+  });
 });

awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx

@@ -5,9 +5,7 @@ import styled from 'styled-components';
 import ButtonGroup from '@components/ButtonGroup';
 import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
 import CodeMirrorInput from './CodeMirrorInput';
-
-const YAML_MODE = 'yaml';
-const JSON_MODE = 'javascript';
+import { JSON_MODE, YAML_MODE } from './constants';
 
 function formatJson(jsonString) {
   return JSON.stringify(JSON.parse(jsonString), null, 2);

awx/ui_next/src/components/CodeMirrorInput/constants.js

@@ -0,0 +1,2 @@
+export const YAML_MODE = 'yaml';
+export const JSON_MODE = 'javascript';