From 804cf74cd8ad319e5fc94dd94e3c7257b5540895 Mon Sep 17 00:00:00 2001
From: "Keith J. Grant" <barkeep@keithjgrant.com>
Date: Mon, 19 Apr 2021 11:00:27 -0700
Subject: [PATCH] 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', () => {
         </Formik>
       );
     });
+    wrapper.update();
 
     expect(wrapper.find('CodeEditor').prop('mode')).toEqual('javascript');
   });