Merge pull request #880 from smartcontractkit/chores/key-value-list

Extract KeyValueList and allow configuration for Transactions#Show

gui/__tests__/components/KeyValueList.test.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { render } from 'enzyme'
+import KeyValueList from 'components/KeyValueList'
+
+describe('components/KeyValueList', () => {
+  it('can display a title', () => {
+    let withTitle = render(<KeyValueList entries={[]} title='My Title' />)
+    expect(withTitle.text()).toContain('My Title')
+  })
+
+  it('can display header columns', () => {
+    let withHead = render(<KeyValueList entries={[]} showHead />)
+    expect(withHead.text()).toContain('Key')
+    expect(withHead.text()).toContain('Value')
+
+    let withoutHead = render(<KeyValueList entries={[]} />)
+    expect(withoutHead.text()).not.toContain('Key')
+    expect(withoutHead.text()).not.toContain('Value')
+  })
+
+  it('renders entry pairs', () => {
+    const entries = [
+      ['CHAINLINK_DEV', 'true'],
+      ['DATABASE_TIMEOUT', 1000]
+    ]
+    let wrapper = render(<KeyValueList entries={entries} />)
+    expect(wrapper.text()).toContain('CHAINLINK_DEV')
+    expect(wrapper.text()).toContain('true')
+    expect(wrapper.text()).toContain('DATABASE_TIMEOUT')
+    expect(wrapper.text()).toContain('1000')
+  })
+})

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 (
     <Card>
-      <CardContent>
-        <Typography variant='h5' color='secondary'>
-          {title}
-        </Typography>
-      </CardContent>
+      <CardTitle>{title}</CardTitle>
 
       <Table>
         <TableBody>

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}) => (
+  <React.Fragment>
+    <CardContent>
+      <Typography variant='h5' color='secondary'>{children}</Typography>
+    </CardContent>
+
+    {divider && <Divider />}
+  </React.Fragment>
+)
+
+Title.propTypes = {
+  divider: PropTypes.bool.isRequired
+}
+
+Title.defaultProps = {
+  divider: false
+}
+
+export default Title

gui/src/components/KeyValueList.js

@@ -0,0 +1,85 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Card from '@material-ui/core/Card'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+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 CardTitle from 'components/Cards/Title'
+
+const renderEntries = entries => (
+  entries.map(([k, v]) => (
+    <TableRow key={k}>
+      <Col>{k}</Col>
+      <Col>{v}</Col>
+    </TableRow>
+  ))
+)
+
+const renderBody = (entries, error) => {
+  if (error) {
+    return <ErrorRow>{error}</ErrorRow>
+  } else if (entries.length === 0) {
+    return <FetchingRow />
+  } else {
+    return renderEntries(entries)
+  }
+}
+
+const SpanRow = ({children}) => (
+  <TableRow>
+    <TableCell component='th' scope='row' colSpan={3}>{children}</TableCell>
+  </TableRow>
+)
+
+const FetchingRow = () => <SpanRow>...</SpanRow>
+
+const ErrorRow = ({children}) => <SpanRow>{children}</SpanRow>
+
+const Col = ({children}) => (
+  <TableCell>
+    <Typography variant='body1'>{children}</Typography>
+  </TableCell>
+)
+
+const HeadCol = ({children}) => (
+  <TableCell>
+    <Typography variant='body1' color='textSecondary'>
+      {children}
+    </Typography>
+  </TableCell>
+)
+
+const KeyValueList = ({entries, error, showHead, title}) => (
+  <Card>
+    {title && <CardTitle divider>{title}</CardTitle>}
+
+    <Table>
+      {showHead &&
+        <TableHead>
+          <TableRow>
+            <HeadCol>Key</HeadCol>
+            <HeadCol>Value</HeadCol>
+          </TableRow>
+        </TableHead>}
+      <TableBody>
+        {renderBody(entries, error)}
+      </TableBody>
+    </Table>
+  </Card>
+)
+
+KeyValueList.propTypes = {
+  showHead: PropTypes.bool.isRequired,
+  entries: PropTypes.array.isRequired,
+  title: PropTypes.string,
+  error: PropTypes.string
+}
+
+KeyValueList.defaultProps = {
+  showHead: false
+}
+
+export default KeyValueList

gui/src/containers/Configuration.js

@@ -5,11 +5,8 @@ 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 ConfigList from 'components/ConfigList'
+import KeyValueList from 'components/KeyValueList'
 import Content from 'components/Content'
 import DeleteJobRuns from 'containers/Configuration/DeleteJobRuns'
 import { fetchConfiguration } from 'actions'
@@ -23,17 +20,12 @@ export const Configuration = useHooks(props => {
     <Content>
       <Grid container spacing={40}>
         <Grid item sm={12} md={8}>
-          <Card>
-            <CardContent>
-              <Typography variant='h5' color='secondary'>
-                Configuration
-              </Typography>
-            </CardContent>
-
-            <Divider />
-
-            <ConfigList configs={props.configs} error={props.error} />
-          </Card>
+          <KeyValueList
+            title='Configuration'
+            entries={props.configs}
+            error={props.error}
+            showHead
+          />
         </Grid>
         <Grid item sm={12} md={4}>
           <Grid container spacing={40}>