From cb3ab673611999a67cb383e57c01bda1ca850726 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Fri, 17 Jan 2020 13:39:18 -0800
Subject: [PATCH] make VariablesField detect correct mode on mount

---
 .../CodeMirrorInput/VariablesDetail.jsx        |  6 ++----
 .../CodeMirrorInput/VariablesField.jsx         | 16 ++++++++--------
 .../CodeMirrorInput/VariablesField.test.jsx    | 18 ++++++++++++++++++
 .../CodeMirrorInput/VariablesInput.jsx         |  4 +---
 .../components/CodeMirrorInput/constants.js    |  2 ++
 5 files changed, 31 insertions(+), 15 deletions(-)
 create mode 100644 awx/ui_next/src/components/CodeMirrorInput/constants.js

diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx
index d89ea07b58..2e8984ed96 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx
+++ b/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);
diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
index 44b9e0d45d..79bd41a826 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
+++ b/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]}
           />
diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
index dc21b91dae..79dfdbae42 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
+++ b/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');
+  });
 });
diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
index 76476ea92b..2e58337ccc 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
+++ b/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);
diff --git a/awx/ui_next/src/components/CodeMirrorInput/constants.js b/awx/ui_next/src/components/CodeMirrorInput/constants.js
new file mode 100644
index 0000000000..79f71887e2
--- /dev/null
+++ b/awx/ui_next/src/components/CodeMirrorInput/constants.js
@@ -0,0 +1,2 @@
+export const YAML_MODE = 'yaml';
+export const JSON_MODE = 'javascript';