shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 16:51:11 +03:00
Code Releases Activity

Merge pull request #5699 from keithjgrant/5235-variables-field

Browse Source 
Make VariablesField detect correct mode on mount

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot] 2020-01-22 16:54:52 +00:00 committed by GitHub
commit 046518ab8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx
View File

@ -2,12 +2,10 @@ import React, { useState } from 'react';
import { string, number } from 'prop-types'; import { string, number } from 'prop-types';
import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core'; import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core';
import { DetailName, DetailValue } from '@components/DetailList'; import { DetailName, DetailValue } from '@components/DetailList';
import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
import CodeMirrorInput from './CodeMirrorInput'; import CodeMirrorInput from './CodeMirrorInput';
import YamlJsonToggle from './YamlJsonToggle'; import YamlJsonToggle from './YamlJsonToggle';
import { yamlToJson, jsonToYaml, isJson } from '../../util/yaml'; import { JSON_MODE, YAML_MODE } from './constants';
const YAML_MODE = 'yaml';
const JSON_MODE = 'javascript';
function VariablesDetail({ value, label, rows }) { function VariablesDetail({ value, label, rows }) {
const [mode, setMode] = useState(isJson(value) ? JSON_MODE : YAML_MODE); const [mode, setMode] = useState(isJson(value) ? JSON_MODE : YAML_MODE);

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

@ -1,16 +1,16 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { string, bool } from 'prop-types'; import { string, bool } from 'prop-types';
import { Field } from 'formik'; import { Field, useFormikContext } from 'formik';
import { Split, SplitItem } from '@patternfly/react-core'; import { Split, SplitItem } from '@patternfly/react-core';
import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
import CodeMirrorInput from './CodeMirrorInput'; import CodeMirrorInput from './CodeMirrorInput';
import YamlJsonToggle from './YamlJsonToggle'; import YamlJsonToggle from './YamlJsonToggle';
import { yamlToJson, jsonToYaml } from '../../util/yaml'; import { JSON_MODE, YAML_MODE } from './constants';
const YAML_MODE = 'yaml';
function VariablesField({ id, name, label, readOnly }) { function VariablesField({ id, name, label, readOnly }) {
// TODO: detect initial mode const { values } = useFormikContext();
const [mode, setMode] = useState(YAML_MODE); const value = values[name];
const [mode, setMode] = useState(isJson(value) ? JSON_MODE : YAML_MODE);
return ( return (
<Field name={name}> <Field name={name}>
@ -44,8 +44,8 @@ function VariablesField({ id, name, label, readOnly }) {
mode={mode} mode={mode}
readOnly={readOnly} readOnly={readOnly}
{...field} {...field}
onChange={value => { onChange={newVal => {
form.setFieldValue(name, value); form.setFieldValue(name, newVal);
}} }}
hasErrors={!!form.errors[field.name]} hasErrors={!!form.errors[field.name]}
/> />

18
awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
View File

@ -97,4 +97,22 @@ describe('VariablesField', () => {
variables: '---\nnewval: changed', variables: '---\nnewval: changed',
}); });
}); });
it('should initialize to JSON if value is JSON', async () => {
const value = '{"foo": "bar"}';
const wrapper = mount(
<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('CodeMirrorInput').prop('mode')).toEqual('javascript');
});
}); });

4
awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
View File

@ -5,9 +5,7 @@ import styled from 'styled-components';
import ButtonGroup from '@components/ButtonGroup'; import ButtonGroup from '@components/ButtonGroup';
import { yamlToJson, jsonToYaml, isJson } from '@util/yaml'; import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
import CodeMirrorInput from './CodeMirrorInput'; import CodeMirrorInput from './CodeMirrorInput';
import { JSON_MODE, YAML_MODE } from './constants';
const YAML_MODE = 'yaml';
const JSON_MODE = 'javascript';
function formatJson(jsonString) { function formatJson(jsonString) {
return JSON.stringify(JSON.parse(jsonString), null, 2); return JSON.stringify(JSON.parse(jsonString), null, 2);

2
awx/ui_next/src/components/CodeMirrorInput/constants.js Normal file
View File

@ -0,0 +1,2 @@
export const YAML_MODE = 'yaml';
export const JSON_MODE = 'javascript';