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

Refactors YamlJsonToggle component into something a little more generic so that it can be used to toggle between local and utc times in the schedule details view.

Browse Source
This commit is contained in:
mabashian 2020-02-28 17:25:31 -05:00
parent e096ad18cb
commit a997b40852
8 changed files with 89 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react';
import { string, node, number } from 'prop-types';
import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core';
import { DetailName, DetailValue } from '@components/DetailList';
import Toggle from '@components/Toggle';
import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
import CodeMirrorInput from './CodeMirrorInput';
import YamlJsonToggle from './YamlJsonToggle';
import { JSON_MODE, YAML_MODE } from './constants';
function getValueAsMode(value, mode) {
@ -50,8 +50,12 @@ function VariablesDetail({ value, label, rows }) {
</div>
</SplitItem>
<SplitItem>
<YamlJsonToggle
mode={mode}
<Toggle
leftLabel="YAML"
leftMode={YAML_MODE}
rightLabel="JSON"
rightMode={JSON_MODE}
currentMode={mode}
onChange={newMode => {
try {
setCurrentValue(getValueAsMode(currentValue, newMode));

8
awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx
View File

@ -31,12 +31,12 @@ describe('<VariablesDetail>', () => {
const wrapper = shallow(
<VariablesDetail value="---foo: bar" label="Variables" />
);
wrapper.find('YamlJsonToggle').invoke('onChange')('javascript');
wrapper.find('Toggle').invoke('onChange')('javascript');
const input = wrapper.find('Styled(CodeMirrorInput)');
expect(input.prop('mode')).toEqual('javascript');
expect(input.prop('value')).toEqual('{\n "foo": "bar"\n}');
wrapper.find('YamlJsonToggle').invoke('onChange')('yaml');
wrapper.find('Toggle').invoke('onChange')('yaml');
const input2 = wrapper.find('Styled(CodeMirrorInput)');
expect(input2.prop('mode')).toEqual('yaml');
expect(input2.prop('value')).toEqual('foo: bar\n');
@ -53,7 +53,7 @@ describe('<VariablesDetail>', () => {
<VariablesDetail value="---foo: bar" label="Variables" />
);
act(() => {
wrapper.find('YamlJsonToggle').invoke('onChange')('javascript');
wrapper.find('Toggle').invoke('onChange')('javascript');
});
wrapper.setProps({
value: '---bar: baz',
@ -73,7 +73,7 @@ describe('<VariablesDetail>', () => {
test('should default empty json to "{}"', () => {
const wrapper = mount(<VariablesDetail value="" label="Variables" />);
act(() => {
wrapper.find('YamlJsonToggle').invoke('onChange')('javascript');
wrapper.find('Toggle').invoke('onChange')('javascript');
});
wrapper.setProps({ value: '' });
const input = wrapper.find('Styled(CodeMirrorInput)');

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

@ -6,9 +6,9 @@ import { useField } from 'formik';
import styled from 'styled-components';
import { Split, SplitItem } from '@patternfly/react-core';
import { CheckboxField } from '@components/FormField';
import Toggle from '@components/Toggle';
import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
import CodeMirrorInput from './CodeMirrorInput';
import YamlJsonToggle from './YamlJsonToggle';
import { JSON_MODE, YAML_MODE } from './constants';
const FieldHeader = styled.div`
@ -34,8 +34,12 @@ function VariablesField({ i18n, id, name, label, readOnly, promptId }) {
</label>
</SplitItem>
<SplitItem>
<YamlJsonToggle
mode={mode}
<Toggle
leftLabel="YAML"
leftMode={YAML_MODE}
rightLabel="JSON"
rightMode={JSON_MODE}
currentMode={mode}
onChange={newMode => {
try {
const newVal =

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

@ -1,21 +1,16 @@
import React, { useState } from 'react';
import { string, func, bool, number } from 'prop-types';
import { Button, Split, SplitItem } from '@patternfly/react-core';
import { Split, SplitItem } from '@patternfly/react-core';
import styled from 'styled-components';
import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
import Toggle from '@components/Toggle';
import CodeMirrorInput from './CodeMirrorInput';
import ButtonGroup from './ButtonGroup';
import { JSON_MODE, YAML_MODE } from './constants';
function formatJson(jsonString) {
return JSON.stringify(JSON.parse(jsonString), null, 2);
}
const SmallButton = styled(Button)`
padding: 3px 8px;
font-size: var(--pf-global--FontSize--xs);
`;
const SplitItemRight = styled(SplitItem)`
margin-bottom: 5px;
`;
@ -47,40 +42,25 @@ function VariablesInput(props) {
</label>
</SplitItem>
<SplitItemRight>
<ButtonGroup>
<SmallButton
onClick={() => {
if (mode === YAML_MODE) {
return;
}
try {
onChange(jsonToYaml(value));
setMode(YAML_MODE);
} catch (err) {
onError(err.message);
}
}}
variant={mode === YAML_MODE ? 'primary' : 'secondary'}
>
YAML
</SmallButton>
<SmallButton
onClick={() => {
<Toggle
leftLabel="YAML"
leftMode={YAML_MODE}
rightLabel="JSON"
rightMode={JSON_MODE}
currentMode={mode}
onChange={newMode => {
try {
if (mode === JSON_MODE) {
return;
}
try {
onChange(jsonToYaml(value));
} else {
onChange(yamlToJson(value));
setMode(JSON_MODE);
} catch (err) {
onError(err.message);
}
}}
variant={mode === JSON_MODE ? 'primary' : 'secondary'}
>
JSON
</SmallButton>
</ButtonGroup>
setMode(newMode);
} catch (err) {
onError(err.message);
}
}}
/>
</SplitItemRight>
</Split>
<CodeMirrorInput

44
awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx
View File

@ -1,44 +0,0 @@
import React from 'react';
import { oneOf, func } from 'prop-types';
import styled from 'styled-components';
import { Button } from '@patternfly/react-core';
import ButtonGroup from './ButtonGroup';
const SmallButton = styled(Button)`
padding: 3px 8px;
font-size: var(--pf-global--FontSize--xs);
`;
const YAML_MODE = 'yaml';
const JSON_MODE = 'javascript';
function YamlJsonToggle({ mode, onChange }) {
const setMode = newMode => {
if (mode !== newMode) {
onChange(newMode);
}
};
return (
<ButtonGroup>
<SmallButton
onClick={() => setMode(YAML_MODE)}
variant={mode === YAML_MODE ? 'primary' : 'secondary'}
>
YAML
</SmallButton>
<SmallButton
onClick={() => setMode(JSON_MODE)}
variant={mode === JSON_MODE ? 'primary' : 'secondary'}
>
JSON
</SmallButton>
</ButtonGroup>
);
}
YamlJsonToggle.propTypes = {
mode: oneOf([YAML_MODE, JSON_MODE]).isRequired,
onChange: func.isRequired,
};
export default YamlJsonToggle;

0
awx/ui_next/src/components/CodeMirrorInput/ButtonGroup.jsx → awx/ui_next/src/components/Toggle/ButtonGroup.jsx
View File

52
awx/ui_next/src/components/Toggle/Toggle.jsx Normal file
View File

@ -0,0 +1,52 @@
import React from 'react';
import { func, string } from 'prop-types';
import styled from 'styled-components';
import { Button } from '@patternfly/react-core';
import ButtonGroup from './ButtonGroup';
const SmallButton = styled(Button)`
padding: 3px 8px;
font-size: var(--pf-global--FontSize--xs);
`;
function Toggle({
leftLabel,
leftMode,
rightLabel,
rightMode,
currentMode,
onChange,
}) {
const setValue = newValue => {
if (currentMode !== newValue) {
onChange(newValue);
}
};
return (
<ButtonGroup>
<SmallButton
onClick={() => setValue(leftMode)}
variant={currentMode === leftMode ? 'primary' : 'secondary'}
>
{leftLabel}
</SmallButton>
<SmallButton
onClick={() => setValue(rightMode)}
variant={currentMode === rightMode ? 'primary' : 'secondary'}
>
{rightLabel}
</SmallButton>
</ButtonGroup>
);
}
Toggle.propTypes = {
leftLabel: string.isRequired,
leftMode: string.isRequired,
rightLabel: string.isRequired,
rightMode: string.isRequired,
currentMode: string.isRequired,
onChange: func.isRequired,
};
export default Toggle;

1
awx/ui_next/src/components/Toggle/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './Toggle';