Show progress bar while downloading update

src/browser/components/UpdaterPage.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const propTypes = require('prop-types');
-const {Button, Navbar} = require('react-bootstrap');
+const {Button, Navbar, ProgressBar} = require('react-bootstrap');
 
 function InstallButton(props) {
   if (props.notifyOnly) {
@@ -37,34 +37,49 @@ function UpdaterPage(props) {
           {' to learn more.'}
         </p>
       </div>
-      <Navbar
+      {props.isDownloading ?
-        className='UpdaterPage-footer'
+        <Navbar
-        fixedBottom={true}
+          className='UpdaterPage-footer'
-        fluid={true}
+          fixedBottom={true}
-      >
+          fluid={true}
-        <Button
+        >
-          className='UpdaterPage-skipButton'
+          <ProgressBar
-          bsStyle='link'
+            active={true}
-          onClick={props.onClickSkip}
+            now={props.progress}
-        >{'Skip this version'}</Button>
+            label={`${props.progress}%`}
-        <div className='pull-right'>
-          <Button
-            bsStyle='link'
-            onClick={props.onClickRemind}
-          >{'Remind me in 2 days'}</Button>
-          <InstallButton
-            notifyOnly={props.notifyOnly}
-            onClickInstall={props.onClickInstall}
-            onClickDownload={props.onClickDownload}
           />
-        </div>
+        </Navbar> :
-      </Navbar>
+        <Navbar
+          className='UpdaterPage-footer'
+          fixedBottom={true}
+          fluid={true}
+        >
+          <Button
+            className='UpdaterPage-skipButton'
+            bsStyle='link'
+            onClick={props.onClickSkip}
+          >{'Skip this version'}</Button>
+          <div className='pull-right'>
+            <Button
+              bsStyle='link'
+              onClick={props.onClickRemind}
+            >{'Remind me in 2 days'}</Button>
+            <InstallButton
+              notifyOnly={props.notifyOnly}
+              onClickInstall={props.onClickInstall}
+              onClickDownload={props.onClickDownload}
+            />
+          </div>
+        </Navbar>
+      }
     </div>
   );
 }
 
 UpdaterPage.propTypes = {
   notifyOnly: propTypes.bool.isRequired,
+  isDownloading: propTypes.bool.isRequired,
+  progress: propTypes.number,
   onClickInstall: propTypes.func.isRequired,
   onClickDownload: propTypes.func.isRequired,
   onClickReleaseNotes: propTypes.func.isRequired,

src/browser/updater.jsx

@@ -1,5 +1,6 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
+const propTypes = require('prop-types');
 const {ipcRenderer} = require('electron');
 const url = require('url');
 const UpdaterPage = require('./components/UpdaterPage.jsx');
@@ -7,24 +8,59 @@ const UpdaterPage = require('./components/UpdaterPage.jsx');
 const thisURL = url.parse(location.href, true);
 const notifyOnly = thisURL.query.notifyOnly === 'true';
 
+class UpdaterPageContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = props.initialState;
+  }
+
+  componentDidMount() {
+    ipcRenderer.on('start-download', () => {
+      this.setState({
+        isDownloading: true
+      });
+    });
+    ipcRenderer.on('progress', (event, progress) => {
+      this.setState({
+        progress
+      });
+    });
+  }
+
+  render() {
+    return (
+      <UpdaterPage
+        notifyOnly={this.props.notifyOnly}
+        {...this.state}
+        onClickReleaseNotes={() => {
+          ipcRenderer.send('click-release-notes');
+        }}
+        onClickSkip={() => {
+          ipcRenderer.send('click-skip');
+        }}
+        onClickRemind={() => {
+          ipcRenderer.send('click-remind');
+        }}
+        onClickInstall={() => {
+          ipcRenderer.send('click-install');
+        }}
+        onClickDownload={() => {
+          ipcRenderer.send('click-download');
+        }}
+      />
+    );
+  }
+}
+
+UpdaterPageContainer.propTypes = {
+  notifyOnly: propTypes.bool,
+  initialState: propTypes.object
+};
+
 ReactDOM.render(
-  <UpdaterPage
+  <UpdaterPageContainer
     notifyOnly={notifyOnly}
-    onClickReleaseNotes={() => {
+    initialState={{isDownloading: false, progress: 0}}
-      ipcRenderer.send('click-release-notes');
-    }}
-    onClickSkip={() => {
-      ipcRenderer.send('click-skip');
-    }}
-    onClickRemind={() => {
-      ipcRenderer.send('click-remind');
-    }}
-    onClickInstall={() => {
-      ipcRenderer.send('click-install');
-    }}
-    onClickDownload={() => {
-      ipcRenderer.send('click-download');
-    }}
   />,
   document.getElementById('content')
 );

src/main/autoUpdater.js

@@ -102,8 +102,12 @@ function initialize(appState, mainWindow, notifyOnly = false) {
         }, INTERVAL_48_HOURS_IN_MS);
         updaterModal.close();
       }).on('click-install', () => {
+        updaterModal.webContents.send('start-download');
+        autoUpdater.signals.progress((data) => { // eslint-disable-line max-nested-callbacks
+          updaterModal.send('progress', Math.floor(data.percent));
+          console.log('progress:', data);
+        });
         downloadAndInstall();
-        updaterModal.close();
       }).on('click-download', () => {
         shell.openExternal('https://about.mattermost.com/download/#mattermostApps');
       }).on('click-release-notes', () => {