Add table to Safe owner list

src/components/Table/index.jsx

@@ -21,6 +21,7 @@ type Props<K> = {
   children: Function,
   size: number,
   defaultFixed?: boolean,
+  noBorder: boolean,
 }
 
 type State = {
@@ -30,6 +31,7 @@ type State = {
   orderProp: boolean,
   rowsPerPage: number,
   fixed?: boolean,
+  noBorder: boolean,
 }
 
 const styles = {
@@ -99,7 +101,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
 
   render() {
     const {
-      data, label, columns, classes, children, size, defaultOrderBy, defaultFixed,
+      data, label, columns, classes, children, size, defaultOrderBy, defaultFixed, noBorder,
     } = this.props
     const {
       order, orderBy, page, orderProp, rowsPerPage, fixed,
@@ -117,7 +119,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
 
     const paginationClasses = {
       selectRoot: classes.selectRoot,
-      root: classes.paginationRoot,
+      root: !noBorder && classes.paginationRoot,
       input: classes.white,
     }
 
@@ -132,13 +134,13 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
     return (
       <React.Fragment>
         {!isEmpty && (
-          <Table aria-labelledby={label} className={classes.root}>
+          <Table aria-labelledby={label} className={!noBorder && classes.root}>
             <TableHead columns={columns} order={order} orderBy={orderByParam} onSort={this.onSort} />
             <TableBody>{children(sortedData)}</TableBody>
           </Table>
         )}
         {isEmpty && (
-          <Row className={classNames(classes.loader, classes.root)} style={this.getEmptyStyle(emptyRows + 1)}>
+          <Row className={classNames(classes.loader, !noBorder && classes.root)} style={this.getEmptyStyle(emptyRows + 1)}>
             <CircularProgress size={60} />
           </Row>
         )}

src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.jsx

@@ -0,0 +1,21 @@
+// @flow
+import * as React from 'react'
+import Block from '~/components/layout/Block'
+import Paragraph from '~/components/layout/Paragraph'
+import Identicon from '~/components/Identicon'
+
+type Props = {
+  address: string,
+}
+
+const OwnerAddressTableCell = (props: Props) => {
+  const { address } = props
+  return (
+    <Block align="left">
+      <Identicon address={address} diameter={32} />
+      <Paragraph style={{ marginLeft: 10 }}>{address}</Paragraph>
+    </Block>
+  )
+}
+
+export default OwnerAddressTableCell

src/routes/safe/components/Settings/ManageOwners/dataFetcher.js

@@ -0,0 +1,55 @@
+// @flow
+import { List } from 'immutable'
+import type { Owner } from '~/routes/safe/store/models/owner'
+import { type SortRow } from '~/components/Table/sorting'
+import { type Column } from '~/components/Table/TableHead'
+
+export const OWNERS_TABLE_NAME_ID = 'name'
+export const OWNERS_TABLE_ADDRESS_ID = 'address'
+export const OWNERS_TABLE_ACTIONS_ID = 'actions'
+
+type OwnerData = {
+  name: string,
+  address: string,
+}
+
+export type OwnerRow = SortRow<OwnerData>
+
+export const getOwnerData = (owners: List<Owner>): List<OwnerRow> => {
+  const rows = owners.map((owner: Owner) => ({
+    [OWNERS_TABLE_NAME_ID]: owner.get('name'),
+    [OWNERS_TABLE_ADDRESS_ID]: owner.get('address'),
+  }))
+
+  return rows
+}
+
+export const generateColumns = () => {
+  const nameColumn: Column = {
+    id: OWNERS_TABLE_NAME_ID,
+    order: false,
+    disablePadding: false,
+    label: 'Name',
+    width: 150,
+    align: 'left',
+  }
+
+  const addressColumn: Column = {
+    id: OWNERS_TABLE_ADDRESS_ID,
+    order: false,
+    disablePadding: false,
+    label: 'Address',
+    width: 350,
+    align: 'left',
+  }
+
+  const actionsColumn: Column = {
+    id: OWNERS_TABLE_ACTIONS_ID,
+    order: false,
+    disablePadding: false,
+    label: '',
+    custom: true,
+  }
+
+  return List([nameColumn, addressColumn, actionsColumn])
+}

src/routes/safe/components/Settings/ManageOwners/index.jsx

@@ -1,6 +1,7 @@
 // @flow
 import React from 'react'
 import classNames from 'classnames'
+import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import Identicon from '~/components/Identicon'
 import Block from '~/components/layout/Block'
@@ -9,12 +10,19 @@ import Field from '~/components/forms/Field'
 import {
   composeValidators, required, minMaxLength,
 } from '~/components/forms/validator'
+import Table from '~/components/Table'
+import { type Column, cellWidth } from '~/components/Table/TableHead'
+import TableRow from '@material-ui/core/TableRow'
+import TableCell from '@material-ui/core/TableCell'
 import TextField from '~/components/forms/TextField'
 import Row from '~/components/layout/Row'
 import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
 import Button from '~/components/layout/Button'
 import AddOwnerModal from './AddOwnerModal'
+import OwnerAddressTableCell from './OwnerAddressTableCell'
+import type { Owner } from '~/routes/safe/store/models/owner'
+import { getOwnerData, generateColumns, OWNERS_TABLE_ADDRESS_ID, type OwnerRow, } from './dataFetcher'
 import { sm, boldFont } from '~/theme/variables'
 import { styles } from './style'
 
@@ -38,7 +46,7 @@ type Props = {
   createTransaction: Function,
 }
 
-type Action = 'AddOwner'
+type Action = 'AddOwner' | 'EditOwner' | 'ReplaceOwner' | 'RemoveOwner'
 
 class ManageOwners extends React.Component<Props, State> {
   state = {
@@ -66,45 +74,53 @@ class ManageOwners extends React.Component<Props, State> {
     } = this.props
     const { showAddOwner } = this.state
 
+    const columns = generateColumns()
+    const ownerData = getOwnerData(owners)
+
     return (
       <React.Fragment>
         <Block className={classes.formContainer}>
           <Paragraph noMargin className={classes.title} size="lg" weight="bolder">
             Manage Safe Owners
           </Paragraph>
-          <Row className={classes.header}>
-            <Col xs={3}>NAME</Col>
-            <Col xs={9}>ADDRESS</Col>
-          </Row>
-          <Hairline />
-          <Block>
-            {owners.map(owner => (
-              <React.Fragment key={owner.get('address')}>
-                <Row className={classes.owner}>
-                  <Col xs={3}>
-                    <Paragraph size="lg" noMargin>
-                      {owner.get('name')}
-                    </Paragraph>
-                  </Col>
-                  <Col xs={1} align="right">
-                    <Block className={classNames(classes.name, classes.userName)}>
-                      <Identicon address={owner.get('address')} diameter={32} />
-                    </Block>
-                  </Col>
-                  <Col xs={8}>
-                    <Block className={classNames(classes.name, classes.userName)}>
-                      <Block align="center" className={classes.user}>
-                        <Paragraph size="md" color="disabled" noMargin>
-                          {owner.get('address')}
-                        </Paragraph>
-                      </Block>
-                    </Block>
-                  </Col>
-                </Row>
-                <Hairline />
-              </React.Fragment>
+
+          <Table
+            label="owners"
+            columns={columns}
+            data={ownerData}
+            size={ownerData.size}
+            defaultFixed
+            noBorder
+          >
+            {(sortedData: Array<OwnerRow>) => sortedData.map((row: any, index: number) => (
+              <TableRow tabIndex={-1} key={index} className={classes.hide}>
+                {columns.map((column: Column) => (
+                  <TableCell key={column.id} style={cellWidth(column.width)} align={column.align} component="td">
+                    {column.id === OWNERS_TABLE_ADDRESS_ID ? <OwnerAddressTableCell address={row[column.id]} /> : row[column.id]}
+                  </TableCell>
+                ))}
+                <TableCell component="td">
+                  <Row align="end" className={classes.actions}>
+                    <Button
+                      onClick={this.onShow('EditOwner')}
+                    >
+                      Edit
+                    </Button>
+                    <Button
+                      onClick={this.onShow('ReplaceOwner')}
+                    >
+                      Replace
+                    </Button>
+                    <Button
+                      onClick={this.onShow('RemoveOwner')}
+                    >
+                      Remove
+                    </Button>
+                  </Row>
+                </TableCell>
+              </TableRow>
             ))}
-          </Block>
+          </Table>
         </Block>
         <Hairline />
         <Row style={controlsStyle} align="end" grow>

src/routes/safe/components/Settings/ManageOwners/style.js

@@ -1,6 +1,6 @@
 // @flow
 import {
-  sm, xs, lg, border,
+  sm, xs, md, lg, border,
 } from '~/theme/variables'
 
 export const styles = () => ({
@@ -11,9 +11,6 @@ export const styles = () => ({
   formContainer: {
     minHeight: '369px',
   },
-  header: {
-    padding: `${sm} ${lg}`,
-  },
   owners: {
     padding: lg,
   },
@@ -25,7 +22,7 @@ export const styles = () => ({
     whiteSpace: 'nowrap',
   },
   owner: {
-    padding: sm,
+    padding: md,
     paddingLeft: lg,
     alignItems: 'center',
   },