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/Title/title.css

@@ -15,12 +15,17 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-.title {
+.title,
+.subtitle {
   .steps {
     margin: -0.5em 0 -1em 0;
   }
 
   .waiting {
-    margin: 1em -1em -1em -1em;
+    margin: 1em -1.5em 0 -1.5em;
   }
 }
+
+.subtitle {
+  opacity: 0.75;
+}

js/src/ui/Title/title.js

@@ -30,15 +30,18 @@ import styles from './title.css';
 export default class Title extends Component {
   static propTypes = {
     activeStep: PropTypes.number,
+    description: nodeOrStringProptype(),
     busy: PropTypes.bool,
     busySteps: PropTypes.array,
+    byline: nodeOrStringProptype(),
     className: PropTypes.string,
+    isSubTitle: PropTypes.bool,
     steps: PropTypes.array,
     title: nodeOrStringProptype()
   }
 
   render () {
-    const { activeStep, className, steps, title } = this.props;
+    const { activeStep, byline, className, description, isSubTitle, steps, title } = this.props;
 
     if (!title && !steps) {
       return null;
@@ -47,10 +50,17 @@ export default class Title extends Component {
     return (
       <div
         className={
-          [styles.title, className].join(' ')
+          [
+            isSubTitle
+              ? styles.subtitle
+              : styles.title,
+            className
+          ].join(' ')
         }
       >
         <ContainerTitle
+          byline={ byline }
+          description={ description }
           title={
             steps
               ? steps[activeStep || 0]

js/src/ui/Title/title.spec.js

@@ -0,0 +1,90 @@
+// 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 Title from './';
+
+let component;
+let instance;
+
+function render (props = {}) {
+  component = shallow(
+    <Title
+      activeStep={ 0 }
+      byline='testByline'
+      className='testClass'
+      description='testDescription'
+      title='testTitle'
+      { ...props }
+    />
+  );
+  instance = component.instance();
+
+  return component;
+}
+
+describe('ui/Title', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  describe('instance methods', () => {
+    describe('renderSteps', () => {
+      let stepper;
+
+      beforeEach(() => {
+        render({ steps: ['stepA', 'stepB'] });
+        stepper = shallow(instance.renderSteps());
+      });
+
+      it('renders the Stepper', () => {
+        expect(stepper.find('Stepper').get(0)).to.be.ok;
+      });
+    });
+
+    describe('renderTimeline', () => {
+      let steps;
+
+      beforeEach(() => {
+        render({ steps: ['stepA', 'StepB'] });
+        steps = instance.renderTimeline();
+      });
+
+      it('renders the Step', () => {
+        expect(steps.length).to.equal(2);
+      });
+    });
+
+    describe('renderWaiting', () => {
+      let waiting;
+
+      beforeEach(() => {
+        render({ busy: true });
+        waiting = shallow(instance.renderWaiting());
+      });
+
+      it('renders the LinearProgress', () => {
+        expect(waiting.find('LinearProgress').get(0)).to.be.ok;
+      });
+    });
+  });
+});