VariablesDetail: don't evaluate YAML expressions

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

@@ -1,5 +1,5 @@
 import 'styled-components/macro';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { node, number, oneOfType, shape, string, arrayOf } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -23,39 +23,42 @@ import {
 import CodeEditor from './CodeEditor';
 import { JSON_MODE, YAML_MODE } from './constants';
 
-function getValueAsMode(value, mode) {
+function VariablesDetail({
-  if (!value) {
+  dataCy,
-    if (mode === JSON_MODE) {
+  helpText,
-      return '{}';
+  value,
-    }
+  label,
-    return '---';
+  rows,
-  }
+  fullHeight,
-  const modeMatches = isJsonString(value) === (mode === JSON_MODE);
+  i18n,
-  if (modeMatches) {
+}) {
-    return value;
-  }
-  return mode === YAML_MODE ? jsonToYaml(value) : yamlToJson(value);
-}
-
-function VariablesDetail({ dataCy, helpText, value, label, rows, i18n }) {
   const [mode, setMode] = useState(
     isJsonObject(value) || isJsonString(value) ? JSON_MODE : YAML_MODE
   );
-  const [currentValue, setCurrentValue] = useState(
-    isJsonObject(value) ? JSON.stringify(value, null, 2) : value || '---'
-  );
   const [isExpanded, setIsExpanded] = useState(false);
-  const [error, setError] = useState(null);
 
-  useEffect(() => {
+  let currentValue = value;
-    setCurrentValue(
+  let error;
-      getValueAsMode(
+
-        isJsonObject(value) ? JSON.stringify(value, null, 2) : value,
+  const getValueInCurrentMode = () => {
-        mode
+    if (!value) {
-      )
+      if (mode === JSON_MODE) {
-    );
+        return '{}';
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+      }
-  }, [value]);
+      return '---';
+    }
+    const modeMatches = isJsonString(value) === (mode === JSON_MODE);
+    if (modeMatches) {
+      return value;
+    }
+    return mode === YAML_MODE ? jsonToYaml(value) : yamlToJson(value);
+  };
+
+  try {
+    currentValue = getValueInCurrentMode();
+  } catch (err) {
+    error = err;
+  }
 
   const labelCy = dataCy ? `${dataCy}-label` : null;
   const valueCy = dataCy ? `${dataCy}-value` : null;
@@ -76,8 +79,6 @@ function VariablesDetail({ dataCy, helpText, value, label, rows, i18n }) {
           mode={mode}
           setMode={setMode}
           currentValue={currentValue}
-          setCurrentValue={setCurrentValue}
-          setError={setError}
           onExpand={() => setIsExpanded(true)}
           i18n={i18n}
         />
@@ -93,6 +94,7 @@ function VariablesDetail({ dataCy, helpText, value, label, rows, i18n }) {
           value={currentValue}
           readOnly
           rows={rows}
+          fullHeight={fullHeight}
           css="margin-top: 10px"
         />
         {error && (
@@ -129,8 +131,6 @@ function VariablesDetail({ dataCy, helpText, value, label, rows, i18n }) {
             mode={mode}
             setMode={setMode}
             currentValue={currentValue}
-            setCurrentValue={setCurrentValue}
-            setError={setError}
             i18n={i18n}
           />
           <CodeEditor
@@ -163,11 +163,8 @@ function ModeToggle({
   label,
   helpText,
   dataCy,
-  currentValue,
-  setCurrentValue,
   mode,
   setMode,
-  setError,
   onExpand,
   i18n,
 }) {
@@ -196,12 +193,7 @@ function ModeToggle({
               ]}
               value={mode}
               onChange={newMode => {
-                try {
+                setMode(newMode);
-                  setCurrentValue(getValueAsMode(currentValue, newMode));
-                  setMode(newMode);
-                } catch (err) {
-                  setError(err);
-                }
               }}
             />
           </SplitItem>

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

@@ -39,7 +39,7 @@ describe('<VariablesDetail>', () => {
     wrapper.find('MultiButtonToggle').invoke('onChange')('yaml');
     const input2 = wrapper.find('VariablesDetail___StyledCodeEditor');
     expect(input2.prop('mode')).toEqual('yaml');
-    expect(input2.prop('value')).toEqual('foo: bar\n');
+    expect(input2.prop('value')).toEqual('---foo: bar');
   });
 
   test('should render label and value= --- when there are no values', () => {