External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-19 21:51:26 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #13708 from marshmalien/13675-code-editor-lastYaml

Browse Source 
Match CodeMirror mode to value type on initialization
This commit is contained in:
Vishali Sanghishetty 2023-03-16 16:39:21 -04:00 committed by GitHub
commit 3e6e0463b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
awx/ui/src/components/CodeEditor/VariablesField.js
View File

@ -6,7 +6,12 @@ import { useField } from 'formik';
import styled from 'styled-components';
import { Split, SplitItem, Button, Modal } from '@patternfly/react-core';
import { ExpandArrowsAltIcon } from '@patternfly/react-icons';
import { yamlToJson, jsonToYaml, isJsonString } from 'util/yaml';
import {
yamlToJson,
jsonToYaml,
isJsonString,
parseVariableField,
} from 'util/yaml';
import { CheckboxField } from '../FormField';
import MultiButtonToggle from '../MultiButtonToggle';
import CodeEditor from './CodeEditor';
@ -37,36 +42,24 @@ function VariablesField({
// track focus manually, because the Code Editor library doesn't wire
// into Formik completely
const [shouldValidate, setShouldValidate] = useState(false);
const [mode, setMode] = useState(initialMode || YAML_MODE);
const validate = useCallback(
(value) => {
if (!shouldValidate) {
return undefined;
}
try {
if (mode === YAML_MODE) {
yamlToJson(value);
} else {
JSON.parse(value);
}
parseVariableField(value);
} catch (error) {
return error.message;
}
return undefined;
},
[shouldValidate, mode]
[shouldValidate]
);
const [field, meta, helpers] = useField({ name, validate });
useEffect(() => {
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);
onModeChange(JSON_MODE);
helpers.setValue(JSON.stringify(JSON.parse(field.value), null, 2));
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
const [mode, setMode] = useState(() =>
isJsonString(field.value) ? JSON_MODE : initialMode || YAML_MODE
);
useEffect(
() => {