From 0db4e6756c6bf54b108e4e34a60bd1b22cc1a582 Mon Sep 17 00:00:00 2001 From: Alex Kwiatkowski Date: Tue, 8 Jan 2019 15:59:49 -0800 Subject: [PATCH 1/9] Rename ConfigList to KeyValueList --- .../{ConfigList.js => KeyValueList.js} | 20 +++++++++---------- gui/src/containers/Configuration.js | 7 +++++-- 2 files changed, 15 insertions(+), 12 deletions(-) rename gui/src/components/{ConfigList.js => KeyValueList.js} (81%) diff --git a/gui/src/components/ConfigList.js b/gui/src/components/KeyValueList.js similarity index 81% rename from gui/src/components/ConfigList.js rename to gui/src/components/KeyValueList.js index ccaa84cc471..7cb08eb3c42 100644 --- a/gui/src/components/ConfigList.js +++ b/gui/src/components/KeyValueList.js @@ -22,8 +22,8 @@ const renderError = error => ( ) -const renderConfigs = configs => ( - configs.map(([k, v]) => ( +const renderConfigs = entries => ( + entries.map(([k, v]) => ( @@ -43,17 +43,17 @@ const renderConfigs = configs => ( )) ) -const renderBody = (configs, error) => { +const renderBody = (entries, error) => { if (error) { return renderError(error) - } else if (configs.length === 0) { + } else if (entries.length === 0) { return renderFetching() } else { - return renderConfigs(configs) + return renderConfigs(entries) } } -const ConfigList = ({configs, error}) => ( +const KeyValueList = ({entries, error}) => ( @@ -67,15 +67,15 @@ const ConfigList = ({configs, error}) => ( - {renderBody(configs, error)} + {renderBody(entries, error)}
) -ConfigList.propTypes = { - configs: PropTypes.array.isRequired, +KeyValueList.propTypes = { + entries: PropTypes.array.isRequired, error: PropTypes.string } -export default ConfigList +export default KeyValueList diff --git a/gui/src/containers/Configuration.js b/gui/src/containers/Configuration.js index 2332c06279b..32643d4d042 100644 --- a/gui/src/containers/Configuration.js +++ b/gui/src/containers/Configuration.js @@ -9,7 +9,7 @@ import Card from '@material-ui/core/Card' import CardContent from '@material-ui/core/CardContent' import Divider from '@material-ui/core/Divider' import PaddedCard from 'components/PaddedCard' -import ConfigList from 'components/ConfigList' +import KeyValueList from 'components/KeyValueList' import Content from 'components/Content' import DeleteJobRuns from 'containers/Configuration/DeleteJobRuns' import { fetchConfiguration } from 'actions' @@ -32,7 +32,10 @@ export const Configuration = useHooks(props => { - + From 1830e9c98acb53209c0ca367691642794c9af847 Mon Sep 17 00:00:00 2001 From: Alex Kwiatkowski Date: Tue, 8 Jan 2019 16:09:32 -0800 Subject: [PATCH 2/9] Can toggle display of KeyValueList head --- gui/__tests__/components/KeyValueList.test.js | 21 ++++++++++++++ gui/src/components/KeyValueList.js | 28 +++++++++++-------- gui/src/containers/Configuration.js | 1 + 3 files changed, 39 insertions(+), 11 deletions(-) create mode 100644 gui/__tests__/components/KeyValueList.test.js diff --git a/gui/__tests__/components/KeyValueList.test.js b/gui/__tests__/components/KeyValueList.test.js new file mode 100644 index 00000000000..e0b7160906b --- /dev/null +++ b/gui/__tests__/components/KeyValueList.test.js @@ -0,0 +1,21 @@ +import React from 'react' +import { render } from 'enzyme' +import KeyValueList from 'components/KeyValueList' + +const renderComponent = props => ( + render( + + ) +) + +describe('components/KeyValueList', () => { + it('can display a header', () => { + let withHeader = renderComponent({entries: [], showHead: true}) + expect(withHeader.text()).toContain('Key') + expect(withHeader.text()).toContain('Value') + + let withoutHeader = renderComponent({entries: []}) + expect(withoutHeader.text()).not.toContain('Key') + expect(withoutHeader.text()).not.toContain('Value') + }) +}) diff --git a/gui/src/components/KeyValueList.js b/gui/src/components/KeyValueList.js index 7cb08eb3c42..78225284f19 100644 --- a/gui/src/components/KeyValueList.js +++ b/gui/src/components/KeyValueList.js @@ -53,19 +53,20 @@ const renderBody = (entries, error) => { } } -const KeyValueList = ({entries, error}) => ( +const KeyValueList = ({entries, error, showHead}) => ( - - - - Key - - - Value - - - + {showHead && + + + + Key + + + Value + + + } {renderBody(entries, error)} @@ -74,8 +75,13 @@ const KeyValueList = ({entries, error}) => ( ) KeyValueList.propTypes = { + showHead: PropTypes.bool.isRequired, entries: PropTypes.array.isRequired, error: PropTypes.string } +KeyValueList.defaultProps = { + showHead: false +} + export default KeyValueList diff --git a/gui/src/containers/Configuration.js b/gui/src/containers/Configuration.js index 32643d4d042..e1b09c4d54e 100644 --- a/gui/src/containers/Configuration.js +++ b/gui/src/containers/Configuration.js @@ -35,6 +35,7 @@ export const Configuration = useHooks(props => { From ffde62fa0213ce9139994fe64bcf08eb1186835b Mon Sep 17 00:00:00 2001 From: Alex Kwiatkowski Date: Tue, 8 Jan 2019 16:52:49 -0800 Subject: [PATCH 3/9] Add configurable headers to KeyValueList --- gui/__tests__/components/KeyValueList.test.js | 32 +++++++++++-------- gui/src/components/Cards/Title.js | 25 +++++++++++++++ gui/src/components/KeyValueList.js | 13 ++++++-- gui/src/containers/Configuration.js | 23 +++---------- 4 files changed, 60 insertions(+), 33 deletions(-) create mode 100644 gui/src/components/Cards/Title.js diff --git a/gui/__tests__/components/KeyValueList.test.js b/gui/__tests__/components/KeyValueList.test.js index e0b7160906b..42227359729 100644 --- a/gui/__tests__/components/KeyValueList.test.js +++ b/gui/__tests__/components/KeyValueList.test.js @@ -2,20 +2,26 @@ import React from 'react' import { render } from 'enzyme' import KeyValueList from 'components/KeyValueList' -const renderComponent = props => ( - render( - - ) -) - describe('components/KeyValueList', () => { - it('can display a header', () => { - let withHeader = renderComponent({entries: [], showHead: true}) - expect(withHeader.text()).toContain('Key') - expect(withHeader.text()).toContain('Value') + it('can display header columns', () => { + let withHead = render() + expect(withHead.text()).toContain('Key') + expect(withHead.text()).toContain('Value') + + let withoutHead = render() + expect(withoutHead.text()).not.toContain('Key') + expect(withoutHead.text()).not.toContain('Value') + }) - let withoutHeader = renderComponent({entries: []}) - expect(withoutHeader.text()).not.toContain('Key') - expect(withoutHeader.text()).not.toContain('Value') + it('renders entry pairs', () => { + const entries = [ + ['CHAINLINK_DEV', 'true'], + ['DATABASE_TIMEOUT', 1000] + ] + let wrapper = render() + expect(wrapper.text()).toContain('CHAINLINK_DEV') + expect(wrapper.text()).toContain('true') + expect(wrapper.text()).toContain('DATABASE_TIMEOUT') + expect(wrapper.text()).toContain('1000') }) }) diff --git a/gui/src/components/Cards/Title.js b/gui/src/components/Cards/Title.js new file mode 100644 index 00000000000..c9ed95cc5dd --- /dev/null +++ b/gui/src/components/Cards/Title.js @@ -0,0 +1,25 @@ +import React from 'react' +import PropTypes from 'prop-types' +import CardContent from '@material-ui/core/CardContent' +import Divider from '@material-ui/core/Divider' +import Typography from '@material-ui/core/Typography' + +const Title = ({children, divider}) => ( + + + {children} + + + {divider && } + +) + +Title.propTypes = { + divider: PropTypes.bool.isRequired +} + +Title.defaultProps = { + divider: false +} + +export default Title diff --git a/gui/src/components/KeyValueList.js b/gui/src/components/KeyValueList.js index 78225284f19..aac2a09061f 100644 --- a/gui/src/components/KeyValueList.js +++ b/gui/src/components/KeyValueList.js @@ -7,6 +7,9 @@ import TableCell from '@material-ui/core/TableCell' import TableHead from '@material-ui/core/TableHead' import TableRow from '@material-ui/core/TableRow' import Typography from '@material-ui/core/Typography' +import CardContent from '@material-ui/core/CardContent' +import Divider from '@material-ui/core/Divider' +import CardTitle from 'components/Cards/Title' const renderFetching = () => ( @@ -53,17 +56,23 @@ const renderBody = (entries, error) => { } } +const HeadCol = ({children}) => ( + {children} +) + const KeyValueList = ({entries, error, showHead}) => ( + Configuration +
{showHead && - Key + Key - Value + Value } diff --git a/gui/src/containers/Configuration.js b/gui/src/containers/Configuration.js index e1b09c4d54e..89ce6750b3d 100644 --- a/gui/src/containers/Configuration.js +++ b/gui/src/containers/Configuration.js @@ -5,9 +5,6 @@ import { connect } from 'react-redux' import { withRouteData } from 'react-static' import Grid from '@material-ui/core/Grid' import Typography from '@material-ui/core/Typography' -import Card from '@material-ui/core/Card' -import CardContent from '@material-ui/core/CardContent' -import Divider from '@material-ui/core/Divider' import PaddedCard from 'components/PaddedCard' import KeyValueList from 'components/KeyValueList' import Content from 'components/Content' @@ -23,21 +20,11 @@ export const Configuration = useHooks(props => { - - - - Configuration - - - - - - - + From 1d1956ff14f0f2bf6c006e984e1ec35dfc4c27d1 Mon Sep 17 00:00:00 2001 From: Alex Kwiatkowski Date: Tue, 8 Jan 2019 16:55:30 -0800 Subject: [PATCH 4/9] Use in recently created jobs --- gui/src/components/Cards/SimpleList.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/gui/src/components/Cards/SimpleList.js b/gui/src/components/Cards/SimpleList.js index 70f370635c4..42021ffef86 100644 --- a/gui/src/components/Cards/SimpleList.js +++ b/gui/src/components/Cards/SimpleList.js @@ -2,17 +2,12 @@ import React from 'react' import Table from '@material-ui/core/Table' import TableBody from '@material-ui/core/TableBody' import Card from '@material-ui/core/Card' -import CardContent from '@material-ui/core/CardContent' -import Typography from '@material-ui/core/Typography' +import CardTitle from 'components/Cards/Title' const SimpleList = ({children, title}) => { return ( - - - {title} - - + {title}
From 91e9b2e5fe9eda01055384404d415d6d022878c8 Mon Sep 17 00:00:00 2001 From: Alex Kwiatkowski Date: Tue, 8 Jan 2019 17:25:13 -0800 Subject: [PATCH 5/9] Add configurable title to KeyValueList --- gui/__tests__/components/KeyValueList.test.js | 5 +++++ gui/src/components/KeyValueList.js | 5 +++-- gui/src/containers/Configuration.js | 1 + 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/gui/__tests__/components/KeyValueList.test.js b/gui/__tests__/components/KeyValueList.test.js index 42227359729..0000dbcc1c8 100644 --- a/gui/__tests__/components/KeyValueList.test.js +++ b/gui/__tests__/components/KeyValueList.test.js @@ -3,6 +3,11 @@ import { render } from 'enzyme' import KeyValueList from 'components/KeyValueList' describe('components/KeyValueList', () => { + it('can display a title', () => { + let withTitle = render() + expect(withTitle.text()).toContain('My Title') + }) + it('can display header columns', () => { let withHead = render() expect(withHead.text()).toContain('Key') diff --git a/gui/src/components/KeyValueList.js b/gui/src/components/KeyValueList.js index aac2a09061f..723f518668b 100644 --- a/gui/src/components/KeyValueList.js +++ b/gui/src/components/KeyValueList.js @@ -60,9 +60,9 @@ const HeadCol = ({children}) => ( Date: Wed, 9 Jan 2019 08:59:06 -0800 Subject: [PATCH 6/9] Rename renderConfigs -> renderEntries --- gui/src/components/KeyValueList.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/gui/src/components/KeyValueList.js b/gui/src/components/KeyValueList.js index 723f518668b..c001a466ceb 100644 --- a/gui/src/components/KeyValueList.js +++ b/gui/src/components/KeyValueList.js @@ -7,8 +7,6 @@ import TableCell from '@material-ui/core/TableCell' import TableHead from '@material-ui/core/TableHead' import TableRow from '@material-ui/core/TableRow' import Typography from '@material-ui/core/Typography' -import CardContent from '@material-ui/core/CardContent' -import Divider from '@material-ui/core/Divider' import CardTitle from 'components/Cards/Title' const renderFetching = () => ( @@ -25,7 +23,7 @@ const renderError = error => ( ) -const renderConfigs = entries => ( +const renderEntries = entries => ( entries.map(([k, v]) => ( @@ -52,7 +50,7 @@ const renderBody = (entries, error) => { } else if (entries.length === 0) { return renderFetching() } else { - return renderConfigs(entries) + return renderEntries(entries) } } From 6ac0e4e031f6c2c3151b4a61f95b95935fc01e95 Mon Sep 17 00:00:00 2001 From: Alex Kwiatkowski Date: Wed, 9 Jan 2019 09:06:48 -0800 Subject: [PATCH 7/9] Extract KeyValueList row + col components --- gui/src/components/KeyValueList.js | 74 ++++++++++++++---------------- 1 file changed, 35 insertions(+), 39 deletions(-) diff --git a/gui/src/components/KeyValueList.js b/gui/src/components/KeyValueList.js index c001a466ceb..da49d334b70 100644 --- a/gui/src/components/KeyValueList.js +++ b/gui/src/components/KeyValueList.js @@ -9,54 +9,54 @@ import TableRow from '@material-ui/core/TableRow' import Typography from '@material-ui/core/Typography' import CardTitle from 'components/Cards/Title' -const renderFetching = () => ( - - ... - -) - -const renderError = error => ( - - - {error} - - -) - const renderEntries = entries => ( entries.map(([k, v]) => ( - - - - {k} - - - - - - - {v} - - - + {k} + {v} )) ) const renderBody = (entries, error) => { if (error) { - return renderError(error) + return } else if (entries.length === 0) { - return renderFetching() + return } else { return renderEntries(entries) } } -const HeadCol = ({children}) => ( - {children} -) +const FetchingRow = () => ( + + ... + +) + +const ErrorRow = ({error}) => ( + + + {error} + + +) + +const Col = ({children}) => ( + + + {children} + + +) + +const HeadCol = ({children}) => ( + + + {children} + + +) const KeyValueList = ({entries, error, showHead, title}) => ( @@ -66,12 +66,8 @@ const KeyValueList = ({entries, error, showHead, title}) => ( {showHead && - - Key - - - Value - + Key + Value } From 340e106dbb3e7906244593a1a09f31f356c22691 Mon Sep 17 00:00:00 2001 From: Alex Kwiatkowski Date: Wed, 9 Jan 2019 09:14:07 -0800 Subject: [PATCH 8/9] Extract shared SpanRow --- gui/src/components/KeyValueList.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/gui/src/components/KeyValueList.js b/gui/src/components/KeyValueList.js index da49d334b70..a4cd00f4631 100644 --- a/gui/src/components/KeyValueList.js +++ b/gui/src/components/KeyValueList.js @@ -20,7 +20,7 @@ const renderEntries = entries => ( const renderBody = (entries, error) => { if (error) { - return + return {error} } else if (entries.length === 0) { return } else { @@ -28,19 +28,15 @@ const renderBody = (entries, error) => { } } -const FetchingRow = () => ( +const SpanRow = ({children}) => ( - ... + {children} ) -const ErrorRow = ({error}) => ( - - - {error} - - -) +const FetchingRow = () => ... + +const ErrorRow = ({children}) => {children} const Col = ({children}) => ( From 4925ea61e667a50ddcecd6d4ff506e9fc811764d Mon Sep 17 00:00:00 2001 From: Alex Kwiatkowski Date: Wed, 9 Jan 2019 09:16:02 -0800 Subject: [PATCH 9/9] Remove unused Fragment --- gui/src/components/KeyValueList.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/gui/src/components/KeyValueList.js b/gui/src/components/KeyValueList.js index a4cd00f4631..f48f0e0131b 100644 --- a/gui/src/components/KeyValueList.js +++ b/gui/src/components/KeyValueList.js @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react' +import React from 'react' import PropTypes from 'prop-types' import Card from '@material-ui/core/Card' import Table from '@material-ui/core/Table' @@ -40,9 +40,7 @@ const ErrorRow = ({children}) => {children} const Col = ({children}) => ( - - {children} - + {children} )