Toggle upgrade modal via upgrade link

js/src/modals/UpgradeParity/store.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { action, observable, transaction } from 'mobx';
+import { action, computed, observable, transaction } from 'mobx';
 import store from 'store';
 
 const LS_UPDATE = '_parity::update';
@@ -22,10 +22,10 @@ const LS_UPDATE = '_parity::update';
 const A_MINUTE = 60 * 1000;
 const A_DAY = 24 * 60 * A_MINUTE;
 
-const STEP_INFO = 1;
+const STEP_INFO = 0;
-const STEP_UPDATING = 2;
+const STEP_UPDATING = 1;
-const STEP_COMPLETED = 3;
+const STEP_COMPLETED = 2;
-const STEP_ERROR = 4;
+const STEP_ERROR = 3;
 
 const CHECK_INTERVAL = 1 * A_MINUTE;
 
@@ -34,6 +34,7 @@ export default class Store {
   @observable consensusCapability = null;
   @observable closed = true;
   @observable error = null;
+  @observable remindAt = 0;
   @observable step = 0;
   @observable upgrading = null;
   @observable version = null;
@@ -47,37 +48,17 @@ export default class Store {
     setInterval(this.checkUpgrade, CHECK_INTERVAL);
   }
 
-  @action setUpgrading () {
+  @computed get isVisible () {
-    transaction(() => {
+    return !this.closed && Date.now() >= this.remindAt;
-      this.upgrading = this.available;
-      this.setStep(STEP_UPDATING);
-    });
   }
 
-  @action setVersions (available, version, consensusCapability) {
+  @action closeModal = () => {
     transaction(() => {
-      this.available = available;
+      this.closed = true;
-      this.consensusCapability = consensusCapability;
+      this.setStep(0, null);
-      this.version = version;
     });
   }
 
-  checkUpgrade = () => {
-    Promise
-      .all([
-        this._api.parity.upgradeReady(),
-        this._api.parity.consensusCapability(),
-        this._api.parity.versionInfo()
-      ])
-      .then(([available, consensusCapability, version]) => {
-        console.log('[checkUpgrade]', 'available:', available, 'version:', version, 'consensusCapability:', consensusCapability);
-        this.setVersions(available, version, consensusCapability);
-      })
-      .catch((error) => {
-        console.warn('checkUpgrade', error);
-      });
-  }
-
   @action loadStorage = () => {
     const values = store.get(LS_UPDATE) || {};
 
@@ -93,7 +74,22 @@ export default class Store {
   @action setStep = (step, error = null) => {
     transaction(() => {
       this.error = error;
-      this.setp = step;
+      this.step = step;
+    });
+  }
+
+  @action setUpgrading () {
+    transaction(() => {
+      this.upgrading = this.available;
+      this.setStep(STEP_UPDATING, null);
+    });
+  }
+
+  @action setVersions (available, version, consensusCapability) {
+    transaction(() => {
+      this.available = available;
+      this.consensusCapability = consensusCapability;
+      this.version = version;
     });
   }
 
@@ -112,7 +108,7 @@ export default class Store {
           throw new Error('Unable to complete update');
         }
 
-        this.setStep(STEP_COMPLETED);
+        this.setStep(STEP_COMPLETED, null);
       })
       .catch((error) => {
         console.error('upgradeNow', error);
@@ -120,6 +116,26 @@ export default class Store {
         this.setStep(STEP_ERROR, error);
       });
   }
+
+  checkUpgrade = () => {
+    if (!this._api) {
+      return;
+    }
+
+    Promise
+      .all([
+        this._api.parity.upgradeReady(),
+        this._api.parity.consensusCapability(),
+        this._api.parity.versionInfo()
+      ])
+      .then(([available, consensusCapability, version]) => {
+        console.log('[checkUpgrade]', 'available:', available, 'version:', version, 'consensusCapability:', consensusCapability);
+        this.setVersions(available, version, consensusCapability);
+      })
+      .catch((error) => {
+        console.warn('checkUpgrade', error);
+      });
+  }
 }
 
 export {

js/src/modals/UpgradeParity/store.spec.js

@@ -0,0 +1,58 @@
+// 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 Store from './store';
+
+let store;
+
+describe('modals/UpgradeParity/store', () => {
+  describe('@actions', () => {
+    beforeEach(() => {
+      store = new Store();
+    });
+
+    describe('openModal & closeModal', () => {
+      it('toggles between the closed states', () => {
+        expect(store.closed).to.be.true;
+        store.openModal();
+        expect(store.closed).to.be.false;
+        store.closeModal();
+        expect(store.closed).to.be.true;
+      });
+
+      it('resets the step state upon closing', () => {
+        store.setStep(5, 'soem error');
+        store.closeModal();
+        expect(store.step).to.equal(0);
+        expect(store.error).to.be.null;
+      });
+    });
+
+    describe('setStep', () => {
+      it('sets the step as provided', () => {
+        expect(store.step).to.equal(0);
+        store.setStep(3);
+        expect(store.step).to.equal(3);
+      });
+
+      it('sets the error when provided', () => {
+        expect(store.error).to.be.null;
+        store.setStep(3, new Error('some error'));
+        expect(store.error).to.match(/some error/);
+      });
+    });
+  });
+});

js/src/modals/UpgradeParity/upgradeParity.css

@@ -16,11 +16,17 @@
 */
 
 .error {
-  padding-top: 1.5em;
+  padding-top: 1.25em;
 }
 
 .infoStep {
   div+div {
-    padding-top: 1.5em;
+    padding-top: 1.25em;
   }
 }
+
+.version {
+  display: inline;
+  opacity: 0.5;
+  white-space: normal;
+}

js/src/modals/UpgradeParity/upgradeParity.js

@@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Button } from '~/ui';
-import { CancelIcon, DoneIcon, NextIcon, SnoozeIcon } from '~/ui/Icons';
+import { CancelIcon, DoneIcon, NextIcon } from '~/ui/Icons';
 import Modal, { Busy, Completed } from '~/ui/Modal';
 
 import { STEP_COMPLETED, STEP_ERROR, STEP_INFO, STEP_UPDATING } from './store';
@@ -38,7 +38,7 @@ export default class UpgradeParity extends Component {
   render () {
     const { store } = this.props;
 
-    if (!store.showUpgrade) {
+    if (!store.isVisible) {
       return null;
     }
 
@@ -55,11 +55,11 @@ export default class UpgradeParity extends Component {
             defaultMessage='upgrading parity' />,
           store.step === STEP_ERROR
             ? <FormattedMessage
-              id='upgradeParity.step.completed'
-              defaultMessage='upgrade completed' />
-            : <FormattedMessage
               id='upgradeParity.step.error'
               defaultMessage='error' />
+            : <FormattedMessage
+              id='upgradeParity.step.completed'
+              defaultMessage='upgrade completed' />
         ] }
         visible>
         { this.renderStep() }
@@ -73,6 +73,7 @@ export default class UpgradeParity extends Component {
     const closeButton =
       <Button
         icon={ <CancelIcon /> }
+        key='close'
         label={
           <FormattedMessage
             id='upgradeParity.button.close'
@@ -82,6 +83,7 @@ export default class UpgradeParity extends Component {
     const doneButton =
       <Button
         icon={ <DoneIcon /> }
+        key='done'
         label={
           <FormattedMessage
             id='upgradeParity.button.done'
@@ -92,16 +94,9 @@ export default class UpgradeParity extends Component {
     switch (store.step) {
       case STEP_INFO:
         return [
-          <Button
-            icon={ <SnoozeIcon /> }
-            label={
-              <FormattedMessage
-                id='upgradeParity.button.snooze'
-                defaultMessage='ask me tomorrow' />
-            }
-            onClick={ store.snoozeTillTomorrow } />,
           <Button
             icon={ <NextIcon /> }
+            key='upgrade'
             label={
               <FormattedMessage
                 id='upgradeParity.button.upgrade'
@@ -127,46 +122,13 @@ export default class UpgradeParity extends Component {
   renderStep () {
     const { store } = this.props;
 
-    const currentversion = this.renderVersion(store.version);
+    const currentversion = this.formatVersion(store);
     const newversion = store.upgrading
-      ? this.renderVersion(store.upgrading.version)
+      ? this.formatVersion(store.upgrading)
-      : this.renderVersion(store.available.version);
+      : this.formatVersion(store.available);
 
     switch (store.step) {
       case STEP_INFO:
-        let consensusInfo = null;
-        if (store.consensusCapability === 'capable') {
-          consensusInfo = (
-            <div>
-              <FormattedMessage
-                id='upgradeParity.consensus.capable'
-                defaultMessage='Your current Parity version is capable of handling the nework requirements.' />
-            </div>
-          );
-        } else if (store.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: store.consensusCapability.capableUntil
-                } } />
-            </div>
-          );
-        } else if (store.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: store.consensusCapability.incapableSince
-                } } />
-            </div>
-          );
-        }
-
         return (
           <div className={ styles.infoStep }>
             <div>
@@ -174,11 +136,11 @@ export default class UpgradeParity extends Component {
                 id='upgradeParity.info.upgrade'
                 defaultMessage='A new version of Parity, version {newversion} is available as an upgrade from your current version {currentversion}'
                 values={ {
-                  currentversion,
+                  currentversion: <div className={ styles.version }>{ currentversion }</div>,
-                  newversion
+                  newversion: <div className={ styles.version }>{ newversion }</div>
                 } } />
             </div>
-            { consensusInfo }
+            { this.renderConsensusInfo() }
           </div>
         );
 
@@ -190,7 +152,7 @@ export default class UpgradeParity extends Component {
                 id='upgradeParity.busy'
                 defaultMessage='Your upgrade to Parity {newversion} is currently in progress'
                 values={ {
-                  newversion
+                  newversion: <div className={ styles.version }>{ newversion }</div>
                 } } />
             } />
         );
@@ -202,7 +164,7 @@ export default class UpgradeParity extends Component {
               id='upgradeParity.completed'
               defaultMessage='Your upgrade to Parity {newversion} has been successfully completed.'
               values={ {
-                newversion
+                newversion: <div className={ styles.version }>{ newversion }</div>
               } } />
           </Completed>
         );
@@ -215,7 +177,7 @@ export default class UpgradeParity extends Component {
                 id='upgradeParity.failed'
                 defaultMessage='Your upgrade to Parity {newversion} has failed with an error.'
                 values={ {
-                  newversion
+                  newversion: <div className={ styles.version }>{ newversion }</div>
                 } } />
             </div>
             <div className={ styles.error }>
@@ -226,8 +188,63 @@ export default class UpgradeParity extends Component {
     }
   }
 
-  renderVersion (versionInfo) {
+  renderConsensusInfo () {
-    const { track, version } = versionInfo;
+    const { store } = this.props;
+    const { consensusCapability } = store;
+
+    if (consensusCapability) {
+      if (consensusCapability === 'capable') {
+        return (
+          <div>
+            <FormattedMessage
+              id='upgradeParity.consensus.capable'
+              defaultMessage='Your current Parity version is capable of handling the network requirements.' />
+          </div>
+        );
+      } else if (consensusCapability.capableUntil) {
+        return (
+          <div>
+            <FormattedMessage
+              id='upgradeParity.consensus.capableUntil'
+              defaultMessage='Your current Parity version is capable of handling the network requirements until block {blockNumber}'
+              values={ {
+                blockNumber: consensusCapability.capableUntil
+              } } />
+          </div>
+        );
+      } else if (consensusCapability.incapableSince) {
+        return (
+          <div>
+            <FormattedMessage
+              id='upgradeParity.consensus.incapableSince'
+              defaultMessage='Your current Parity version is incapable of handling the network requirements since block {blockNumber}'
+              values={ {
+                blockNumber: consensusCapability.incapableSince
+              } } />
+          </div>
+        );
+      }
+    }
+
+    return (
+      <div>
+        <FormattedMessage
+          id='upgradeParity.consensus.unknown'
+          defaultMessage='Your current Parity version is capable of handling the network requirements.' />
+      </div>
+    );
+  }
+
+  formatVersion (struct) {
+    if (!struct || !struct.version) {
+      return (
+        <FormattedMessage
+          id='upgradeParity.version.unknown'
+          defaultMessage='unknown' />
+      );
+    }
+
+    const { track, version } = struct.version;
 
     return `${version.major}.${version.minor}.${version.patch}-${track}`;
   }

js/src/ui/Modal/Title/title.js

@@ -36,7 +36,13 @@ export default class Title extends Component {
 
     return (
       <div className={ styles.title }>
-        <h3>{ steps ? steps[current] : title }</h3>
+        <h3>
+          {
+            steps
+              ? steps[current]
+              : title
+          }
+        </h3>
         { this.renderSteps() }
         { this.renderWaiting() }
       </div>
@@ -63,10 +69,10 @@ export default class Title extends Component {
   renderTimeline () {
     const { steps } = this.props;
 
-    return steps.map((label) => {
+    return steps.map((label, index) => {
       return (
         <Step
-          key={ label }>
+          key={ index }>
           <StepLabel>
             { label }
           </StepLabel>

js/src/ui/Modal/modal.js

@@ -14,10 +14,10 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import { Dialog } from 'material-ui';
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Dialog } from 'material-ui';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
 
@@ -51,7 +51,7 @@ class Modal extends Component {
 
   render () {
     const { muiTheme } = this.context;
-    const { actions, busy, className, current, children, compact, steps, waiting, title, visible, settings } = this.props;
+    const { actions, busy, children, className, current, compact, settings, steps, title, visible, waiting } = this.props;
     const contentStyle = muiTheme.parity.getBackgroundStyle(null, settings.backgroundSeed);
     const header = (
       <Title