UI interface completed, to be tested

js/src/modals/UpgradeParity/Info/info.js

@@ -1,31 +0,0 @@
-// Copyright 2015, 2016 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 { observer } from 'mobx-react';
-import React, { Component, PropTypes } from 'react';
-
-@observer
-export default class Info extends Component {
-  static propTypes = {
-    store: PropTypes.object.isRequired
-  }
-
-  render () {
-    return (
-      <div>info</div>
-    );
-  }
-}

js/src/modals/UpgradeParity/Updating/index.js

@@ -1,17 +0,0 @@
-// Copyright 2015, 2016 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/>.
-
-export default from './updating';

js/src/modals/UpgradeParity/Updating/updating.js

@@ -1,31 +0,0 @@
-// Copyright 2015, 2016 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 { observer } from 'mobx-react';
-import React, { Component, PropTypes } from 'react';
-
-@observer
-export default class Updating extends Component {
-  static propTypes = {
-    store: PropTypes.object.isRequired
-  }
-
-  render () {
-    return (
-      <div>hello</div>
-    );
-  }
-}

js/src/modals/UpgradeParity/upgradeParity.css

@@ -0,0 +1,26 @@
+/* Copyright 2015, 2016 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/>.
+*/
+
+.error {
+  padding-top: 1.5em;
+}
+
+.infoStep {
+  div+div {
+    padding-top: 1.5em;
+  }
+}

js/src/modals/UpgradeParity/upgradeParity.js

@@ -18,14 +18,13 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Modal } from '~/ui';
+import { Button } from '~/ui';
 import { CancelIcon, DoneIcon, NextIcon, SnoozeIcon } from '~/ui/Icons';
-
+import Modal, { Busy, Completed } from '~/ui/Modal';
-import Info from './Info';
-import Updating from './Updating';
 
 import ModalStore, { STEP_COMPLETED, STEP_ERROR, STEP_INFO, STEP_UPDATING } from './modalStore';
 import UpgradeStore from './upgradeStore';
+import styles from './upgradeParity.css';
 
 @observer
 export default class UpgradeParity extends Component {
@@ -43,6 +42,22 @@ export default class UpgradeParity extends Component {
     return (
       <Modal
         actions={ this.renderActions() }
+        current={ this.store.step }
+        steps={ [
+          <FormattedMessage
+            id='upgradeParity.step.info'
+            defaultMessage='upgrade available' />,
+          <FormattedMessage
+            id='upgradeParity.step.updating'
+            defaultMessage='upgrading parity' />,
+          this.store.step === STEP_ERROR
+            ? <FormattedMessage
+              id='upgradeParity.step.completed'
+              defaultMessage='upgrade completed' />
+            : <FormattedMessage
+              id='upgradeParity.step.error'
+              defaultMessage='error' />
+        ] }
         visible>
         { this.renderStep() }
       </Modal>
@@ -105,12 +120,110 @@ export default class UpgradeParity extends Component {
   }
 
   renderStep () {
+    const { available, consensusCapability, error, upgrading, version } = this.store.upgrade;
+
+    const currentversion = this.renderVersion(version);
+    const newversion = upgrading
+      ? this.renderVersion(upgrading.version)
+      : this.renderVersion(available.version);
+
     switch (this.store.step) {
       case STEP_INFO:
-        return <Info store={ this.store } />;
+        let consensusInfo = null;
+        if (consensusCapability === 'capable') {
+          consensusInfo = (
+            <div>
+              <FormattedMessage
+                id='upgradeParity.consensus.capable'
+                defaultMessage='Your current Parity version is capable of handling the nework requirements.' />
+            </div>
+          );
+        } else if (consensusCapability.capableUntil) {
+          consensusInfo = (
+            <div>
+              <FormattedMessage
+                id='upgradeParity.consensus.capableUntil'
+                defaultMessage='Your current Parity version is capable of handling the nework requirements until block {blockNumber}'
+                values={ {
+                  blockNumber: consensusCapability.capableUntil
+                } } />
+            </div>
+          );
+        } else if (consensusCapability.incapableSince) {
+          consensusInfo = (
+            <div>
+              <FormattedMessage
+                id='upgradeParity.consensus.incapableSince'
+                defaultMessage='Your current Parity version is incapable of handling the nework requirements since block {blockNumber}'
+                values={ {
+                  blockNumber: consensusCapability.incapableSince
+                } } />
+            </div>
+          );
+        }
+
+        return (
+          <div className={ styles.infoStep }>
+            <div>
+              <FormattedMessage
+                id='upgradeParity.info.upgrade'
+                defaultMessage='A new version of Parity, version {newversion} is available as an upgrade from your current version {currentversion}'
+                values={ {
+                  currentversion,
+                  newversion
+                } } />
+            </div>
+            { consensusInfo }
+          </div>
+        );
 
       case STEP_UPDATING:
-        return <Updating store={ this.store } />;
+        return (
+          <Busy
+            title={
+              <FormattedMessage
+                id='upgradeParity.busy'
+                defaultMessage='Your upgrade to Parity {newversion} is currently in progress'
+                values={ {
+                  newversion
+                } } />
+            } />
+        );
+
+      case STEP_COMPLETED:
+        return (
+          <Completed>
+            <FormattedMessage
+              id='upgradeParity.completed'
+              defaultMessage='Your upgrade to Parity {newversion} has been successfully completed.'
+              values={ {
+                newversion
+              } } />
+          </Completed>
+        );
+
+      case STEP_ERROR:
+        return (
+          <Completed>
+            <div>
+              <FormattedMessage
+                id='upgradeParity.failed'
+                defaultMessage='Your upgrade to Parity {newversion} has failed with an error.'
+                values={ {
+                  newversion
+                } } />
+            </div>
+            <div className={ styles.error }>
+              { error.message }
+            </div>
+          </Completed>
+        );
     }
   }
+
+  renderVersion (versionInfo) {
+    const { track, version } = versionInfo;
+
+    return `${version.major}.${version.minor}.${version.patch}-${track}`;
+  }
 }

js/src/modals/UpgradeParity/upgradeStore.js

@@ -21,6 +21,8 @@ const CHECK_INTERVAL = 1 * 60 * 1000;
 export default class UpgradeStore {
   @observable available = null;
   @observable consensusCapability = null;
+  @observable upgrading = null;
+  @observable version = null;
 
   constructor (api) {
     this._api = api;
@@ -29,22 +31,28 @@ export default class UpgradeStore {
     setInterval(this.checkUpgrade, CHECK_INTERVAL);
   }
 
-  @action setAvailableUpgrade (available, consensusCapability) {
+  @action setUpgrading () {
+    this.upgrading = this.available;
+  }
+
+  @action setVersions (available, version, consensusCapability) {
     transaction(() => {
       this.available = available;
       this.consensusCapability = consensusCapability;
+      this.version = version;
     });
   }
 
   checkUpgrade = () => {
-    return Promise
+    Promise
       .all([
         this._api.parity.upgradeReady(),
-        this._api.parity.consensusCapability()
+        this._api.parity.consensusCapability(),
+        this._api.parity.versionInfo()
       ])
-      .then(([available, consensusCapability]) => {
+      .then(([available, consensusCapability, version]) => {
-        console.log('[checkUpgrade]', 'available:', available, 'consensusCapability:', consensusCapability);
+        console.log('[checkUpgrade]', 'available:', available, 'version:', version, 'consensusCapability:', consensusCapability);
-        this.setAvailableUpgrade(available, consensusCapability);
+        this.setVersions(available, version, consensusCapability);
       })
       .catch((error) => {
         console.warn('checkUpgrade', error);
@@ -52,6 +60,8 @@ export default class UpgradeStore {
   }
 
   executeUpgrade = () => {
+    this.setUpgrading();
+
     return this._api.parity.executeUpgrade();
   }
 }

js/src/ui/Modal/Busy/busy.js

@@ -16,17 +16,19 @@
 
 import React, { Component, PropTypes } from 'react';
 
+import { nodeOrStringProptype } from '~/util/proptypes';
+
 import styles from './busy.css';
 
 export default class Busy extends Component {
   static propTypes = {
-    title: PropTypes.string,
+    children: PropTypes.node,
-    state: PropTypes.string,
+    state: nodeOrStringProptype(),
-    children: PropTypes.node
+    title: nodeOrStringProptype()
   }
 
   render () {
-    const { children, title, state } = this.props;
+    const { children, state, title } = this.props;
 
     return (
       <div className={ styles.center }>

js/src/ui/Modal/modal.css

@@ -14,16 +14,17 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 .actions {
   background: rgba(0, 0, 0, 0.25) !important;
-}
 
-.actions button:not([disabled]) {
+  button:not([disabled]) {
     color: white !important;
-}
 
-.actions button:not([disabled]) svg {
+    svg {
       fill: white !important;
+    }
+  }
 }
 
 .body {
@@ -36,26 +37,26 @@
 .content {
   transform: translate(0px, 0px) !important;
   transition: none !important;
-}
 
-.content>div {
+  &>div {
     background: rgba(0, 0, 0, 0.5) !important;
     transition: none !important;
+  }
 }
 
 .title {
+  background: rgba(0, 0, 0, 0.25) !important;
   padding: 1em;
   margin-bottom: 0;
-  background: rgba(0, 0, 0, 0.25) !important;
-}
 
-.title h3 {
+  h3 {
     margin: 0;
     text-transform: uppercase;
-}
+  }
 
-.title .steps {
+  .steps {
     margin-bottom: -1em;
+  }
 }
 
 .waiting {