Show owner list when current address in not an owner

This commit is contained in:
Germán Martínez 2019-07-03 18:33:05 +02:00
parent 482da14439
commit b064b0fa9f
3 changed files with 63 additions and 59 deletions

View File

@ -9,7 +9,7 @@ import Col from '~/components/layout/Col'
import Table from '~/components/Table'
import { type Column, cellWidth } from '~/components/Table/TableHead'
import Row from '~/components/layout/Row'
import Paragraph from '~/components/layout/Paragraph'
import Heading from '~/components/layout/Heading'
import Hairline from '~/components/layout/Hairline'
import Button from '~/components/layout/Button'
import Img from '~/components/layout/Img'
@ -22,7 +22,7 @@ import type { Owner } from '~/routes/safe/store/models/owner'
import {
getOwnerData, generateColumns, OWNERS_TABLE_NAME_ID, OWNERS_TABLE_ADDRESS_ID, type OwnerRow,
} from './dataFetcher'
import { sm, boldFont } from '~/theme/variables'
import { lg, sm, boldFont } from '~/theme/variables'
import { styles } from './style'
import ReplaceOwnerIcon from './assets/icons/replace-owner.svg'
import RenameOwnerIcon from './assets/icons/rename-owner.svg'
@ -43,6 +43,10 @@ const addOwnerButtonStyle = {
fontWeight: boldFont,
}
const title = {
padding: lg,
}
type Props = {
classes: Object,
safeAddress: string,
@ -53,6 +57,7 @@ type Props = {
userAddress: string,
createTransaction: Function,
updateSafe: Function,
granted: boolean,
}
type State = {
@ -103,6 +108,7 @@ class ManageOwners extends React.Component<Props, State> {
userAddress,
createTransaction,
updateSafe,
granted,
} = this.props
const {
showAddOwner,
@ -120,9 +126,7 @@ class ManageOwners extends React.Component<Props, State> {
return (
<React.Fragment>
<Block className={classes.formContainer}>
<Paragraph noMargin className={classes.title} size="lg" weight="bolder">
Manage Safe Owners
</Paragraph>
<Heading tag="h3" style={title}>Manage Safe Owners</Heading>
<Table
label="Owners"
defaultOrderBy={OWNERS_TABLE_NAME_ID}
@ -144,49 +148,57 @@ class ManageOwners extends React.Component<Props, State> {
</TableCell>
))}
<TableCell component="td">
<Row align="end" className={classes.actions}>
<Img
alt="Edit owner"
className={classes.editOwnerIcon}
src={RenameOwnerIcon}
onClick={this.onShow('EditOwner', row)}
testId={RENAME_OWNER_BTN_TESTID}
/>
<Img
alt="Replace owner"
className={classes.replaceOwnerIcon}
src={ReplaceOwnerIcon}
onClick={this.onShow('ReplaceOwner', row)}
/>
<Img
alt="Remove owner"
className={classes.removeOwnerIcon}
src={RemoveOwnerIcon}
onClick={this.onShow('RemoveOwner', row)}
testId={REMOVE_OWNER_BTN_TESTID}
/>
</Row>
{granted && (
<Row align="end" className={classes.actions}>
<Img
alt="Edit owner"
className={classes.editOwnerIcon}
src={RenameOwnerIcon}
onClick={this.onShow('EditOwner', row)}
testId={RENAME_OWNER_BTN_TESTID}
/>
<Img
alt="Replace owner"
className={classes.replaceOwnerIcon}
src={ReplaceOwnerIcon}
onClick={this.onShow('ReplaceOwner', row)}
/>
{ownerData.size > 1 && (
<Img
alt="Remove owner"
className={classes.removeOwnerIcon}
src={RemoveOwnerIcon}
onClick={this.onShow('RemoveOwner', row)}
testId={REMOVE_OWNER_BTN_TESTID}
/>
)}
</Row>
)}
</TableCell>
</TableRow>
))
}
</Table>
</Block>
<Hairline />
<Row style={controlsStyle} align="end" grow>
<Col end="xs">
<Button
style={addOwnerButtonStyle}
size="small"
variant="contained"
color="primary"
onClick={this.onShow('AddOwner')}
testId={ADD_OWNER_BTN_TESTID}
>
Add new owner
</Button>
</Col>
</Row>
{granted && (
<React.Fragment>
<Hairline />
<Row style={controlsStyle} align="end" grow>
<Col end="xs">
<Button
style={addOwnerButtonStyle}
size="small"
variant="contained"
color="primary"
onClick={this.onShow('AddOwner')}
testId={ADD_OWNER_BTN_TESTID}
>
Add new owner
</Button>
</Col>
</Row>
</React.Fragment>
)}
<AddOwnerModal
onClose={this.onHide('AddOwner')}
isOpen={showAddOwner}

View File

@ -2,10 +2,6 @@
import { lg } from '~/theme/variables'
export const styles = () => ({
title: {
padding: `${lg} 20px`,
fontSize: '16px',
},
formContainer: {
minHeight: '369px',
},

View File

@ -20,8 +20,6 @@ import actions, { type Actions } from './actions'
import { styles } from './style'
import RemoveSafeIcon from './assets/icons/bin.svg'
export const OWNERS_SETTINGS_TAB_TEST_ID = 'owner-settings-tab'
type State = {
showRemoveSafe: boolean,
menuOptionIndex: number,
@ -111,18 +109,15 @@ class Settings extends React.Component<Props, State> {
Safe name
</Row>
<Hairline />
<Row
className={cn(classes.menuOption, menuOptionIndex === 2 && classes.active)}
onClick={this.handleChange(2)}
>
Owners ({owners.size})
</Row>
<Hairline />
{granted && (
<React.Fragment>
<Row
className={cn(classes.menuOption, menuOptionIndex === 2 && classes.active)}
onClick={this.handleChange(2)}
testId={OWNERS_SETTINGS_TAB_TEST_ID}
>
Owners (
{owners.size}
)
</Row>
<Hairline />
<Row
className={cn(classes.menuOption, menuOptionIndex === 3 && classes.active)}
onClick={this.handleChange(3)}
@ -139,7 +134,7 @@ class Settings extends React.Component<Props, State> {
{menuOptionIndex === 1 && (
<ChangeSafeName safeAddress={safeAddress} safeName={safeName} updateSafe={updateSafe} />
)}
{granted && menuOptionIndex === 2 && (
{menuOptionIndex === 2 && (
<ManageOwners
owners={owners}
threshold={threshold}
@ -149,6 +144,7 @@ class Settings extends React.Component<Props, State> {
createTransaction={createTransaction}
userAddress={userAddress}
updateSafe={updateSafe}
granted={granted}
/>
)}
{granted && menuOptionIndex === 3 && (