DeleteAccount & LoadContract modal updates (#4320)
* i18n & tests for DeleteAccount * i18n & tests for LoadContract
This commit is contained in:
Jaco Greeff
GitHub
parent
b51b7849dc
commit
1940809dd4
|
|
@ -15,6 +15,7 @@
|
|||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
|
|
@ -46,22 +47,33 @@ class DeleteAccount extends Component {
|
|||
return (
|
||||
<ConfirmDialog
|
||||
className={ styles.body }
|
||||
title='confirm removal'
|
||||
visible
|
||||
onDeny={ this.closeDeleteDialog }
|
||||
onConfirm={ this.onDeleteConfirmed }
|
||||
onDeny={ this.closeDeleteDialog }
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='deleteAccount.title'
|
||||
defaultMessage='confirm removal'
|
||||
/>
|
||||
}
|
||||
visible
|
||||
>
|
||||
<div className={ styles.hero }>
|
||||
Are you sure you want to permanently delete the following account?
|
||||
<FormattedMessage
|
||||
id='deleteAccount.question'
|
||||
defaultMessage='Are you sure you want to permanently delete the following account?'
|
||||
/>
|
||||
</div>
|
||||
<div className={ styles.info }>
|
||||
<IdentityIcon
|
||||
className={ styles.icon }
|
||||
address={ account.address }
|
||||
className={ styles.icon }
|
||||
/>
|
||||
<div className={ styles.nameinfo }>
|
||||
<div className={ styles.header }>
|
||||
<IdentityName address={ account.address } unknown />
|
||||
<IdentityName
|
||||
address={ account.address }
|
||||
unknown
|
||||
/>
|
||||
</div>
|
||||
<div className={ styles.address }>
|
||||
{ account.address }
|
||||
|
|
@ -73,11 +85,21 @@ class DeleteAccount extends Component {
|
|||
</div>
|
||||
<div className={ styles.password }>
|
||||
<Input
|
||||
label='account password'
|
||||
hint='provide the account password to confirm the account deletion'
|
||||
hint={
|
||||
<FormattedMessage
|
||||
id='deleteAccount.password.hint'
|
||||
defaultMessage='provide the account password to confirm the account deletion'
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='deleteAccount.password.label'
|
||||
defaultMessage='account password'
|
||||
/>
|
||||
}
|
||||
onChange={ this.onChangePassword }
|
||||
type='password'
|
||||
value={ password }
|
||||
onChange={ this.onChangePassword }
|
||||
/>
|
||||
</div>
|
||||
</ConfirmDialog>
|
||||
|
|
@ -93,7 +115,7 @@ class DeleteAccount extends Component {
|
|||
const { account, newError } = this.props;
|
||||
const { password } = this.state;
|
||||
|
||||
api.parity
|
||||
return api.parity
|
||||
.killAccount(account.address, password)
|
||||
.then((result) => {
|
||||
if (result === true) {
|
||||
|
|
@ -114,15 +136,11 @@ class DeleteAccount extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
return {};
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return bindActionCreators({ newError }, dispatch);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
null,
|
||||
mapDispatchToProps
|
||||
)(DeleteAccount);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,139 @@
|
|||
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import DeleteAccount from './';
|
||||
|
||||
let api;
|
||||
let component;
|
||||
let instance;
|
||||
let onClose;
|
||||
let router;
|
||||
let store;
|
||||
|
||||
const TEST_ADDRESS = '0x123456789012345678901234567890';
|
||||
const TEST_PASSWORD = 'testPassword';
|
||||
|
||||
function createApi () {
|
||||
api = {
|
||||
parity: {
|
||||
killAccount: sinon.stub().resolves(true)
|
||||
}
|
||||
};
|
||||
|
||||
return api;
|
||||
}
|
||||
|
||||
function createRouter () {
|
||||
router = {
|
||||
push: sinon.stub()
|
||||
};
|
||||
|
||||
return router;
|
||||
}
|
||||
|
||||
function createStore () {
|
||||
store = {
|
||||
dispatch: sinon.stub(),
|
||||
subscribe: sinon.stub(),
|
||||
getState: () => {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
|
||||
return store;
|
||||
}
|
||||
|
||||
function render () {
|
||||
onClose = sinon.stub();
|
||||
component = shallow(
|
||||
<DeleteAccount
|
||||
account={ {
|
||||
address: TEST_ADDRESS,
|
||||
meta: {
|
||||
description: 'testDescription'
|
||||
}
|
||||
} }
|
||||
onClose={ onClose }
|
||||
/>,
|
||||
{
|
||||
context: {
|
||||
store: createStore()
|
||||
}
|
||||
}
|
||||
).find('DeleteAccount').shallow({
|
||||
context: {
|
||||
api: createApi(),
|
||||
router: createRouter()
|
||||
}
|
||||
});
|
||||
instance = component.instance();
|
||||
|
||||
return component;
|
||||
}
|
||||
|
||||
describe('modals/DeleteAccount', () => {
|
||||
beforeEach(() => {
|
||||
render();
|
||||
});
|
||||
|
||||
it('renders defaults', () => {
|
||||
expect(component).to.be.ok;
|
||||
});
|
||||
|
||||
describe('event handlers', () => {
|
||||
describe('onChangePassword', () => {
|
||||
it('sets the state with the new password', () => {
|
||||
instance.onChangePassword(null, TEST_PASSWORD);
|
||||
expect(instance.state.password).to.equal(TEST_PASSWORD);
|
||||
});
|
||||
});
|
||||
|
||||
describe('closeDeleteDialog', () => {
|
||||
it('calls onClose', () => {
|
||||
instance.closeDeleteDialog();
|
||||
expect(onClose).to.have.been.called;
|
||||
});
|
||||
});
|
||||
|
||||
describe('onDeleteConfirmed', () => {
|
||||
beforeEach(() => {
|
||||
sinon.spy(instance, 'closeDeleteDialog');
|
||||
instance.onChangePassword(null, TEST_PASSWORD);
|
||||
return instance.onDeleteConfirmed();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
instance.closeDeleteDialog.restore();
|
||||
});
|
||||
|
||||
it('calls parity_killAccount', () => {
|
||||
expect(api.parity.killAccount).to.have.been.calledWith(TEST_ADDRESS, TEST_PASSWORD);
|
||||
});
|
||||
|
||||
it('changes the route to /accounts', () => {
|
||||
expect(router.push).to.have.been.calledWith('/accounts');
|
||||
});
|
||||
|
||||
it('closes the dialog', () => {
|
||||
expect(instance.closeDeleteDialog).to.have.been.called;
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -14,22 +14,23 @@
|
|||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
|
||||
import ContentClear from 'material-ui/svg-icons/content/clear';
|
||||
import CheckIcon from 'material-ui/svg-icons/navigation/check';
|
||||
import DeleteIcon from 'material-ui/svg-icons/action/delete';
|
||||
|
||||
import { List, ListItem, makeSelectable } from 'material-ui/List';
|
||||
import { Subheader, IconButton, Tabs, Tab } from 'material-ui';
|
||||
import { List, ListItem, makeSelectable } from 'material-ui/List';
|
||||
import moment from 'moment';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { Button, Modal, Editor } from '~/ui';
|
||||
import { CancelIcon, CheckIcon, DeleteIcon } from '~/ui/Icons';
|
||||
|
||||
import styles from './loadContract.css';
|
||||
|
||||
const SelectableList = makeSelectable(List);
|
||||
|
||||
const REMOVAL_STYLE = {
|
||||
backgroundColor: 'none',
|
||||
cursor: 'default'
|
||||
};
|
||||
const SELECTED_STYLE = {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)'
|
||||
};
|
||||
|
|
@ -52,14 +53,24 @@ export default class LoadContract extends Component {
|
|||
render () {
|
||||
const { deleteRequest } = this.state;
|
||||
|
||||
const title = deleteRequest
|
||||
? 'confirm removal'
|
||||
: 'view contracts';
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={ title }
|
||||
actions={ this.renderDialogActions() }
|
||||
title={
|
||||
deleteRequest
|
||||
? (
|
||||
<FormattedMessage
|
||||
id='loadContract.title.remove'
|
||||
defaultMessage='confirm removal'
|
||||
/>
|
||||
)
|
||||
: (
|
||||
<FormattedMessage
|
||||
id='loadContract.title.view'
|
||||
defaultMessage='view contracts'
|
||||
/>
|
||||
)
|
||||
}
|
||||
visible
|
||||
>
|
||||
{ this.renderBody() }
|
||||
|
|
@ -73,17 +84,25 @@ export default class LoadContract extends Component {
|
|||
}
|
||||
|
||||
const { contracts, snippets } = this.props;
|
||||
|
||||
const contractsTab = Object.keys(contracts).length === 0
|
||||
? null
|
||||
: (
|
||||
<Tab label='Local' >
|
||||
<Tab
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='loadContract.tab.local'
|
||||
defaultMessage='Local'
|
||||
/>
|
||||
}
|
||||
>
|
||||
{ this.renderEditor() }
|
||||
|
||||
<SelectableList
|
||||
onChange={ this.onClickContract }
|
||||
>
|
||||
<Subheader>Saved Contracts</Subheader>
|
||||
<SelectableList onChange={ this.onClickContract }>
|
||||
<Subheader>
|
||||
<FormattedMessage
|
||||
id='loadContract.header.saved'
|
||||
defaultMessage='Saved Contracts'
|
||||
/>
|
||||
</Subheader>
|
||||
{ this.renderContracts(contracts) }
|
||||
</SelectableList>
|
||||
</Tab>
|
||||
|
|
@ -93,14 +112,22 @@ export default class LoadContract extends Component {
|
|||
<div className={ styles.loadContainer }>
|
||||
<Tabs onChange={ this.handleChangeTab }>
|
||||
{ contractsTab }
|
||||
|
||||
<Tab label='Snippets' >
|
||||
<Tab
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='loadContract.tab.snippets'
|
||||
defaultMessage='Snippets'
|
||||
/>
|
||||
}
|
||||
>
|
||||
{ this.renderEditor() }
|
||||
|
||||
<SelectableList
|
||||
onChange={ this.onClickContract }
|
||||
>
|
||||
<Subheader>Contract Snippets</Subheader>
|
||||
<SelectableList onChange={ this.onClickContract }>
|
||||
<Subheader>
|
||||
<FormattedMessage
|
||||
id='loadContract.header.snippets'
|
||||
defaultMessage='Contract Snippets'
|
||||
/>
|
||||
</Subheader>
|
||||
{ this.renderContracts(snippets, false) }
|
||||
</SelectableList>
|
||||
</Tab>
|
||||
|
|
@ -116,13 +143,23 @@ export default class LoadContract extends Component {
|
|||
return (
|
||||
<div className={ styles.confirmRemoval }>
|
||||
<p>
|
||||
Are you sure you want to remove the following
|
||||
contract from your saved contracts?
|
||||
<FormattedMessage
|
||||
id='loadContract.removal.confirm'
|
||||
defaultMessage='Are you sure you want to remove the following contract from your saved contracts?'
|
||||
/>
|
||||
</p>
|
||||
<ListItem
|
||||
primaryText={ name }
|
||||
secondaryText={ `Saved ${moment(timestamp).fromNow()}` }
|
||||
style={ { backgroundColor: 'none', cursor: 'default' } }
|
||||
secondaryText={
|
||||
<FormattedMessage
|
||||
id='loadContract.removal.savedAt'
|
||||
defaultMessage='Saved {when}'
|
||||
values={ {
|
||||
when: moment(timestamp).fromNow()
|
||||
} }
|
||||
/>
|
||||
}
|
||||
style={ REMOVAL_STYLE }
|
||||
/>
|
||||
|
||||
<div className={ styles.editor }>
|
||||
|
|
@ -152,9 +189,9 @@ export default class LoadContract extends Component {
|
|||
<div className={ styles.editor }>
|
||||
<p>{ name }</p>
|
||||
<Editor
|
||||
value={ sourcecode }
|
||||
maxLines={ 20 }
|
||||
readOnly
|
||||
maxLines={ 20 }
|
||||
value={ sourcecode }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -169,23 +206,36 @@ export default class LoadContract extends Component {
|
|||
const { id, name, timestamp, description } = contract;
|
||||
const onDelete = () => this.onDeleteRequest(id);
|
||||
|
||||
const secondaryText = description || `Saved ${moment(timestamp).fromNow()}`;
|
||||
const remove = removable
|
||||
? (
|
||||
<IconButton onTouchTap={ onDelete }>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<ListItem
|
||||
value={ id }
|
||||
key={ id }
|
||||
primaryText={ name }
|
||||
secondaryText={ secondaryText }
|
||||
style={ selected === id ? SELECTED_STYLE : null }
|
||||
rightIconButton={ remove }
|
||||
rightIconButton={
|
||||
removable
|
||||
? (
|
||||
<IconButton onTouchTap={ onDelete }>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
)
|
||||
: null
|
||||
}
|
||||
secondaryText={
|
||||
description || (
|
||||
<FormattedMessage
|
||||
id='loadContract.contract.savedAt'
|
||||
defaultMessage='Saved {when}'
|
||||
values={ {
|
||||
when: moment(timestamp).fromNow()
|
||||
} }
|
||||
/>
|
||||
)
|
||||
}
|
||||
style={
|
||||
selected === id
|
||||
? SELECTED_STYLE
|
||||
: null
|
||||
}
|
||||
value={ id }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
@ -197,46 +247,61 @@ export default class LoadContract extends Component {
|
|||
if (deleteRequest) {
|
||||
return [
|
||||
<Button
|
||||
icon={ <ContentClear /> }
|
||||
label='No'
|
||||
icon={ <CancelIcon /> }
|
||||
key='No'
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='loadContract.button.no'
|
||||
defaultMessage='No'
|
||||
/>
|
||||
}
|
||||
onClick={ this.onRejectRemoval }
|
||||
/>,
|
||||
<Button
|
||||
icon={ <DeleteIcon /> }
|
||||
label='Yes'
|
||||
key='Yes'
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='loadContract.button.yes'
|
||||
defaultMessage='Yes'
|
||||
/>
|
||||
}
|
||||
onClick={ this.onConfirmRemoval }
|
||||
/>
|
||||
];
|
||||
}
|
||||
|
||||
const cancelBtn = (
|
||||
return [
|
||||
<Button
|
||||
icon={ <ContentClear /> }
|
||||
label='Cancel'
|
||||
icon={ <CancelIcon /> }
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='loadContract.button.cancel'
|
||||
defaultMessage='Cancel'
|
||||
/>
|
||||
}
|
||||
onClick={ this.onClose }
|
||||
/>
|
||||
);
|
||||
|
||||
const loadBtn = (
|
||||
/>,
|
||||
<Button
|
||||
icon={ <CheckIcon /> }
|
||||
label='Load'
|
||||
onClick={ this.onLoad }
|
||||
disabled={ this.state.selected === -1 }
|
||||
icon={ <CheckIcon /> }
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='loadContract.button.load'
|
||||
defaultMessage='Load'
|
||||
/>
|
||||
}
|
||||
onClick={ this.onLoad }
|
||||
/>
|
||||
);
|
||||
|
||||
return [ cancelBtn, loadBtn ];
|
||||
];
|
||||
}
|
||||
|
||||
handleChangeTab = () => {
|
||||
this.setState({ selected: -1 });
|
||||
}
|
||||
|
||||
onClickContract = (_, value) => {
|
||||
this.setState({ selected: value });
|
||||
onClickContract = (event, selected) => {
|
||||
this.setState({ selected });
|
||||
}
|
||||
|
||||
onClose = () => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,159 @@
|
|||
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import LoadContract from './';
|
||||
|
||||
const CONTRACTS = {
|
||||
345: { id: 345, name: 'test345' },
|
||||
456: { id: 456, name: 'test456' },
|
||||
987: { id: 987, name: 'test987' }
|
||||
};
|
||||
const SNIPPETS = {
|
||||
123: { id: 123, name: 'test123' }
|
||||
};
|
||||
|
||||
let component;
|
||||
let instance;
|
||||
let onClose;
|
||||
let onDelete;
|
||||
let onLoad;
|
||||
|
||||
function render () {
|
||||
onClose = sinon.stub();
|
||||
onDelete = sinon.stub();
|
||||
onLoad = sinon.stub();
|
||||
component = shallow(
|
||||
<LoadContract
|
||||
contracts={ CONTRACTS }
|
||||
onClose={ onClose }
|
||||
onDelete={ onDelete }
|
||||
onLoad={ onLoad }
|
||||
snippets={ SNIPPETS }
|
||||
/>
|
||||
);
|
||||
instance = component.instance();
|
||||
|
||||
return component;
|
||||
}
|
||||
|
||||
describe('modals/LoadContract', () => {
|
||||
beforeEach(() => {
|
||||
render();
|
||||
});
|
||||
|
||||
it('renders defaults', () => {
|
||||
expect(component).to.be.ok;
|
||||
});
|
||||
|
||||
describe('event methods', () => {
|
||||
describe('handleChangeTab', () => {
|
||||
beforeEach(() => {
|
||||
instance.onClickContract(null, 345);
|
||||
instance.handleChangeTab();
|
||||
});
|
||||
|
||||
it('resets the selected value', () => {
|
||||
expect(instance.state.selected).to.equal(-1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('onClickContract', () => {
|
||||
beforeEach(() => {
|
||||
instance.onClickContract(null, 456);
|
||||
});
|
||||
|
||||
it('sets the selected value', () => {
|
||||
expect(instance.state.selected).to.equal(456);
|
||||
});
|
||||
});
|
||||
|
||||
describe('onClose', () => {
|
||||
beforeEach(() => {
|
||||
instance.onClose();
|
||||
});
|
||||
|
||||
it('calls onClose', () => {
|
||||
expect(onClose).to.have.been.called;
|
||||
});
|
||||
});
|
||||
|
||||
describe('onLoad', () => {
|
||||
beforeEach(() => {
|
||||
instance.onLoad();
|
||||
});
|
||||
|
||||
it('calls onLoad', () => {
|
||||
expect(onLoad).to.have.been.called;
|
||||
});
|
||||
|
||||
it('calls onClose', () => {
|
||||
expect(onClose).to.have.been.called;
|
||||
});
|
||||
});
|
||||
|
||||
describe('onDeleteRequest', () => {
|
||||
beforeEach(() => {
|
||||
instance.onDeleteRequest(987);
|
||||
});
|
||||
|
||||
it('sets deleteRequest true', () => {
|
||||
expect(instance.state.deleteRequest).to.be.true;
|
||||
});
|
||||
|
||||
it('sets the deleteId', () => {
|
||||
expect(instance.state.deleteId).to.equal(987);
|
||||
});
|
||||
});
|
||||
|
||||
describe('onConfirmRemoval', () => {
|
||||
beforeEach(() => {
|
||||
instance.onDeleteRequest(987);
|
||||
instance.onConfirmRemoval();
|
||||
});
|
||||
|
||||
it('calls onDelete', () => {
|
||||
expect(onDelete).to.have.been.calledWith(987);
|
||||
});
|
||||
|
||||
it('sets deleteRequest false', () => {
|
||||
expect(instance.state.deleteRequest).to.be.false;
|
||||
});
|
||||
|
||||
it('clears the deleteId', () => {
|
||||
expect(instance.state.deleteId).to.equal(-1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('onRejectRemoval', () => {
|
||||
beforeEach(() => {
|
||||
instance.onDeleteRequest(987);
|
||||
instance.onRejectRemoval();
|
||||
});
|
||||
|
||||
it('sets deleteRequest false', () => {
|
||||
expect(instance.state.deleteRequest).to.be.false;
|
||||
});
|
||||
|
||||
it('clears the deleteId', () => {
|
||||
expect(instance.state.deleteId).to.equal(-1);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue