External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-16 04:10:44 -03:30
Code Issues Packages Projects Releases Wiki Activity

initialize variables field/detail with formatted JSON strings

Browse Source
This commit is contained in:
Keith J. Grant 2021-03-16 15:55:35 -07:00
parent 8375141d67
commit 768fe94088
4 changed files with 81 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx
View File

@ -23,6 +23,23 @@ import {
import CodeEditor from './CodeEditor';
import { JSON_MODE, YAML_MODE } from './constants';
function getValueAsMode(value, mode) {
if (!value) {
if (mode === JSON_MODE) {
return '{}';
}
return '---';
}
const modeMatches = isJsonString(value) === (mode === JSON_MODE);
if (modeMatches) {
if (mode === YAML_MODE) {
return value;
}
return JSON.stringify(JSON.parse(value), null, 2);
}
return mode === YAML_MODE ? jsonToYaml(value) : yamlToJson(value);
}
function VariablesDetail({
dataCy,
helpText,

10
awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx
View File

@ -24,7 +24,15 @@ describe('<VariablesDetail>', () => {
const input = wrapper.find('VariablesDetail___StyledCodeEditor');
expect(input).toHaveLength(1);
expect(input.prop('mode')).toEqual('javascript');
expect(input.prop('value')).toEqual('{"foo": "bar"}');
});
test('should format JSON', () => {
const wrapper = mountWithContexts(
<VariablesDetail value='{"foo": "bar"}' label="Variables" />
);
const input = wrapper.find('VariablesDetail___StyledCodeEditor');
expect(input).toHaveLength(1);
expect(input.prop('value')).toEqual('{\n "foo": "bar"\n}');
});
test('should convert between modes', () => {

9
awx/ui_next/src/components/CodeEditor/VariablesField.jsx
View File

@ -193,7 +193,14 @@ function VariablesFieldInternals({
setShouldValidate,
handleChange,
}) {
const [field, meta] = useField(name);
const [field, meta, helpers] = useField(name);
useEffect(function formatJsonString() {
if (mode === YAML_MODE) {
return;
}
helpers.setValue(JSON.stringify(JSON.parse(field.value), null, 2));
}, []); // eslint-disable-line react-hooks/exhaustive-deps
return (
<div className="pf-c-form__group">

63
awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx
View File

@ -5,10 +5,6 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
import VariablesField from './VariablesField';
describe('VariablesField', () => {
beforeEach(() => {
document.body.createTextRange = jest.fn();
});
it('should render code editor', () => {
const value = '---\n';
const wrapper = mountWithContexts(
@ -200,18 +196,25 @@ describe('VariablesField', () => {
it('should initialize to JSON if value is JSON', async () => {
const value = '{"foo": "bar"}';
const wrapper = mountWithContexts(
<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>
);
let wrapper;
await act(async () => {
wrapper = mountWithContexts(
<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('CodeEditor').prop('mode')).toEqual('javascript');
});
@ -238,4 +241,32 @@ describe('VariablesField', () => {
expect(wrapper.find('Modal').prop('isOpen')).toEqual(true);
expect(wrapper.find('Modal CodeEditor')).toHaveLength(1);
});
it('should format JSON for code editor', async () => {
const value = '{"foo": "bar"}';
let wrapper;
await act(async () => {
wrapper = mountWithContexts(
<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>
);
});
wrapper.update();
expect(wrapper.find('CodeEditor').prop('value')).toEqual(
'{\n "foo": "bar"\n}'
);
});
});