fix formatting JSON on initialize

This commit is contained in:
Keith J. Grant
2021-04-19 11:00:27 -07:00
parent b817967377
commit 804cf74cd8
3 changed files with 8 additions and 3 deletions

View File

@@ -49,6 +49,9 @@ function VariablesDetail({
} }
const modeMatches = isJsonString(value) === (mode === JSON_MODE); const modeMatches = isJsonString(value) === (mode === JSON_MODE);
if (modeMatches) { if (modeMatches) {
if (mode === JSON_MODE) {
return JSON.stringify(JSON.parse(value), null, 2);
}
return value; return value;
} }
return mode === YAML_MODE ? jsonToYaml(value) : yamlToJson(value); return mode === YAML_MODE ? jsonToYaml(value) : yamlToJson(value);

View File

@@ -57,11 +57,12 @@ function VariablesField({
); );
const [field, meta, helpers] = useField({ name, validate }); const [field, meta, helpers] = useField({ name, validate });
// mode's useState above couldn't be initialized to JSON_MODE because useEffect(function initializeJSON() {
// the field value had to be defined below it
useEffect(function initializeMode() {
if (isJsonString(field.value)) { 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); setMode(JSON_MODE);
helpers.setValue(JSON.stringify(JSON.parse(field.value), null, 2));
} }
}, []); // eslint-disable-line react-hooks/exhaustive-deps }, []); // eslint-disable-line react-hooks/exhaustive-deps

View File

@@ -215,6 +215,7 @@ describe('VariablesField', () => {
</Formik> </Formik>
); );
}); });
wrapper.update();
expect(wrapper.find('CodeEditor').prop('mode')).toEqual('javascript'); expect(wrapper.find('CodeEditor').prop('mode')).toEqual('javascript');
}); });