Vault Management UI (first round) (#4446)

* Add RPCs for parity_vault (create, open, list, etc.)

* WIP

* WIP

* WIP

* WIP (create should create)

* Create & close working

* WIP

* WIP

* WIP

* Open & Close now working

* WIP

* WIP

* Merge relevant changes from js-home

* Hover actions

* WIP (start of account assignment)

* Open, Close & Account assignment works

* Fix margins

* UI updates

* Update tests

* Add the parity_{get|set}VaultMeta calls

* Handle metadata

* Adjust padding in Open/Close modals

* moveAccounts take both in and out

* Adjust padding

* Fix stretch

* Optimize hover stretch

* pre-merge

* Cleanup variable naming (duplication)

* Rename Vault{Close,Open} -> Vault{Lock,Unlock}

* clearVaultFields uses setters

* TODO for small Portal sizes

* Vaults rendering tests

* .only

* libusb compile

* VaultCard rendering tests

* Update message keys (rename gone rouge)

* Display passwordHint op vault unlock

* Update failing tests

* Manually dispatch allAccountsInfo when move completed

* Open/Close always shows vault image in colour

* Password submit submits modal (PR comment)

* Add link to account

js/src/ui/Page/page.js

@@ -31,22 +31,20 @@ export default class Page extends Component {
 
   render () {
     const { buttons, className, children, title } = this.props;
-    const classes = `${styles.layout} ${className}`;
-    let actionbar = null;
-
-    if (title || buttons) {
-      actionbar = (
-        <Actionbar
-          buttons={ buttons }
-          title={ title }
-        />
-      );
-    }
 
     return (
       <div>
-        { actionbar }
-        <div className={ classes }>
+        {
+          title || buttons
+            ? (
+              <Actionbar
+                buttons={ buttons }
+                title={ title }
+              />
+            )
+            : null
+        }
+        <div className={ [styles.layout, className].join(' ') }>
           { children }
         </div>
       </div>

js/src/ui/Page/page.spec.js

@@ -0,0 +1,79 @@
+// 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 Page from './';
+
+const BUTTONS = ['buttonA', 'buttonB'];
+const CLASSNAME = 'testClass';
+const TESTTEXT = 'testing children';
+const TITLE = 'test title';
+
+let component;
+
+function render () {
+  component = shallow(
+    <Page
+      buttons={ BUTTONS }
+      className={ CLASSNAME }
+      title={ TITLE }
+    >
+      <div id='testContent'>
+        { TESTTEXT }
+      </div>
+    </Page>
+  );
+
+  return component;
+}
+
+describe('ui/Page', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  it('renders the children', () => {
+    expect(component.find('div[id="testContent"]').text()).to.equal(TESTTEXT);
+  });
+
+  describe('components', () => {
+    describe('ActionBar', () => {
+      let actions;
+
+      beforeEach(() => {
+        actions = component.find('Actionbar');
+      });
+
+      it('renders the actionbar', () => {
+        expect(actions.get(0)).to.be.ok;
+      });
+
+      it('passes the provided title', () => {
+        expect(actions.props().title).to.equal(TITLE);
+      });
+
+      it('passed the provided buttons', () => {
+        expect(actions.props().buttons).to.equal(BUTTONS);
+      });
+    });
+  });
+});