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,6 +37,18 @@ function UpdaterPage(props) {
           {' to learn more.'}
         </p>
       </div>
+      {props.isDownloading ?
+        <Navbar
+          className='UpdaterPage-footer'
+          fixedBottom={true}
+          fluid={true}
+        >
+          <ProgressBar
+            active={true}
+            now={props.progress}
+            label={`${props.progress}%`}
+          />
+        </Navbar> :
         <Navbar
           className='UpdaterPage-footer'
           fixedBottom={true}
@@ -59,12 +71,15 @@ function UpdaterPage(props) {
             />
           </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,9 +8,30 @@ const UpdaterPage = require('./components/UpdaterPage.jsx');
 const thisURL = url.parse(location.href, true);
 const notifyOnly = thisURL.query.notifyOnly === 'true';
 
-ReactDOM.render(
+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={notifyOnly}
+        notifyOnly={this.props.notifyOnly}
+        {...this.state}
         onClickReleaseNotes={() => {
           ipcRenderer.send('click-release-notes');
         }}
@@ -25,6 +47,20 @@ ReactDOM.render(
         onClickDownload={() => {
           ipcRenderer.send('click-download');
         }}
+      />
+    );
+  }
+}
+
+UpdaterPageContainer.propTypes = {
+  notifyOnly: propTypes.bool,
+  initialState: propTypes.object
+};
+
+ReactDOM.render(
+  <UpdaterPageContainer
+    notifyOnly={notifyOnly}
+    initialState={{isDownloading: false, progress: 0}}
   />,
   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', () => {