From a997b40852649f67622fa2bfb6527ac9345dee3f Mon Sep 17 00:00:00 2001 From: mabashian Date: Fri, 28 Feb 2020 17:25:31 -0500 Subject: [PATCH] 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. --- .../CodeMirrorInput/VariablesDetail.jsx | 10 +++- .../CodeMirrorInput/VariablesDetail.test.jsx | 8 +-- .../CodeMirrorInput/VariablesField.jsx | 10 +++- .../CodeMirrorInput/VariablesInput.jsx | 56 ++++++------------- .../CodeMirrorInput/YamlJsonToggle.jsx | 44 --------------- .../ButtonGroup.jsx | 0 awx/ui_next/src/components/Toggle/Toggle.jsx | 52 +++++++++++++++++ awx/ui_next/src/components/Toggle/index.js | 1 + 8 files changed, 89 insertions(+), 92 deletions(-) delete mode 100644 awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx rename awx/ui_next/src/components/{CodeMirrorInput => Toggle}/ButtonGroup.jsx (100%) create mode 100644 awx/ui_next/src/components/Toggle/Toggle.jsx create mode 100644 awx/ui_next/src/components/Toggle/index.js diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx index 83533f1168..97634975b4 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx @@ -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 }) { - { try { setCurrentValue(getValueAsMode(currentValue, newMode)); diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx index 05548f8aa8..455b47b04b 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx @@ -31,12 +31,12 @@ describe('', () => { const wrapper = shallow( ); - 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('', () => { ); act(() => { - wrapper.find('YamlJsonToggle').invoke('onChange')('javascript'); + wrapper.find('Toggle').invoke('onChange')('javascript'); }); wrapper.setProps({ value: '---bar: baz', @@ -73,7 +73,7 @@ describe('', () => { test('should default empty json to "{}"', () => { const wrapper = mount(); act(() => { - wrapper.find('YamlJsonToggle').invoke('onChange')('javascript'); + wrapper.find('Toggle').invoke('onChange')('javascript'); }); wrapper.setProps({ value: '' }); const input = wrapper.find('Styled(CodeMirrorInput)'); diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx index 336a3fa996..4ea07052ec 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx @@ -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 }) { - { try { const newVal = diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx index faddd2bc13..785b05df6c 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx @@ -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) { - - { - if (mode === YAML_MODE) { - return; - } - try { - onChange(jsonToYaml(value)); - setMode(YAML_MODE); - } catch (err) { - onError(err.message); - } - }} - variant={mode === YAML_MODE ? 'primary' : 'secondary'} - > - YAML - - { + { + 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 - - + setMode(newMode); + } catch (err) { + onError(err.message); + } + }} + /> { - if (mode !== newMode) { - onChange(newMode); - } - }; - - return ( - - setMode(YAML_MODE)} - variant={mode === YAML_MODE ? 'primary' : 'secondary'} - > - YAML - - setMode(JSON_MODE)} - variant={mode === JSON_MODE ? 'primary' : 'secondary'} - > - JSON - - - ); -} -YamlJsonToggle.propTypes = { - mode: oneOf([YAML_MODE, JSON_MODE]).isRequired, - onChange: func.isRequired, -}; - -export default YamlJsonToggle; diff --git a/awx/ui_next/src/components/CodeMirrorInput/ButtonGroup.jsx b/awx/ui_next/src/components/Toggle/ButtonGroup.jsx similarity index 100% rename from awx/ui_next/src/components/CodeMirrorInput/ButtonGroup.jsx rename to awx/ui_next/src/components/Toggle/ButtonGroup.jsx diff --git a/awx/ui_next/src/components/Toggle/Toggle.jsx b/awx/ui_next/src/components/Toggle/Toggle.jsx new file mode 100644 index 0000000000..db0d796000 --- /dev/null +++ b/awx/ui_next/src/components/Toggle/Toggle.jsx @@ -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 ( + + setValue(leftMode)} + variant={currentMode === leftMode ? 'primary' : 'secondary'} + > + {leftLabel} + + setValue(rightMode)} + variant={currentMode === rightMode ? 'primary' : 'secondary'} + > + {rightLabel} + + + ); +} +Toggle.propTypes = { + leftLabel: string.isRequired, + leftMode: string.isRequired, + rightLabel: string.isRequired, + rightMode: string.isRequired, + currentMode: string.isRequired, + onChange: func.isRequired, +}; + +export default Toggle; diff --git a/awx/ui_next/src/components/Toggle/index.js b/awx/ui_next/src/components/Toggle/index.js new file mode 100644 index 0000000000..c2ec545530 --- /dev/null +++ b/awx/ui_next/src/components/Toggle/index.js @@ -0,0 +1 @@ +export { default } from './Toggle';