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

Merge pull request #9600 from keithjgrant/3167-variables-formatting

Browse Source 
Initialize variables field/detail with formatted JSON strings

SUMMARY
When a variables detail or variables field are mounted with JSON code, this ensures the JSON is formatted with friendly whitespace, regardless how it was originally formatted when saved.
addresses #3167
ISSUE TYPE

Bugfix Pull Request

COMPONENT NAME

UI

Reviewed-by: Kersom <None>
Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
This commit is contained in:
softwarefactory-project-zuul[bot] 2021-04-21 17:07:46 +00:00 committed by GitHub
commit 5ef7dd894a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 72 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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);

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', () => {

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

@ -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
@ -193,7 +194,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">

64
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,26 @@ 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>
);
});
wrapper.update();
expect(wrapper.find('CodeEditor').prop('mode')).toEqual('javascript');
});
@ -238,4 +242,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}'
);
});
});