feat: Add progress to settings page, too

src/less/components/settings.less

@@ -52,6 +52,10 @@
     .action {
       text-align: right;
     }
+
+    .bp3-progress-bar {
+      margin-top: 8px;
+    }
   }
 
   .settings-content {

src/renderer/components/settings-electron.tsx

@@ -8,7 +8,8 @@ import {
   IButtonProps,
   Icon,
   IconName,
-  Tooltip
+  Tooltip,
+  ProgressBar
 } from '@blueprintjs/core';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -360,20 +361,20 @@ export class ElectronSettings extends React.Component<ElectronSettingsProps, Ele
    */
   private renderHumanState(item: RunnableVersion): JSX.Element {
     const { state } = item;
-    let icon: IconName = 'box';
+
+    if (state === VersionState.downloading || state === VersionState.unzipping) {
+      return <ProgressBar value={item.downloadProgress} />;
+    }
+
     let humanState = 'Downloaded';
 
-    if (state === VersionState.downloading) {
-      icon = 'cloud-download';
-      humanState = 'Downloading';
-    } else if (state === VersionState.unknown) {
-      icon = 'cloud';
+    if (state === VersionState.unknown) {
       humanState = 'Not downloaded';
     }
 
     return (
       <span>
-        <Icon icon={icon} /> {humanState}
+        {humanState}
       </span>
     );
   }
@@ -395,17 +396,23 @@ export class ElectronSettings extends React.Component<ElectronSettingsProps, Ele
     };
 
     // Already downloaded
-    if (state === 'ready') {
+    if (state === VersionState.ready) {
+      buttonProps.disabled = false;
       buttonProps.onClick = () => appState.removeVersion(key);
       buttonProps.icon = 'trash';
       buttonProps.text = source === VersionSource.local
         ? 'Remove'
         : 'Delete';
-    } else if (state === 'downloading') {
+    } else if (state === VersionState.downloading) {
       buttonProps.disabled = true;
       buttonProps.loading = true;
       buttonProps.text = 'Downloading';
       buttonProps.icon = 'cloud-download';
+    } else if (state === VersionState.unzipping) {
+      buttonProps.disabled = true;
+      buttonProps.loading = true;
+      buttonProps.text = 'Unzipping';
+      buttonProps.icon = 'cloud-download';
     } else {
       buttonProps.disabled = false;
       buttonProps.loading = false;

tests/mocks/electron-versions.ts

@@ -14,6 +14,10 @@ export const mockVersionsArray = [
     state: VersionState.ready,
     version: '1.8.7',
     source: VersionSource.remote
+  }, {
+    state: VersionState.ready,
+    version: '1.8.6',
+    source: VersionSource.remote
   }
 ];
 

tests/renderer/components/__snapshots__/commands-version-chooser-spec.tsx.snap

@@ -26,6 +26,11 @@ exports[`VersionSelect component renders 1`] = `
             "state": "unknown",
             "version": "1.0.0",
           },
+          "1.8.6": Object {
+            "source": "remote",
+            "state": "ready",
+            "version": "1.8.6",
+          },
           "1.8.7": Object {
             "source": "remote",
             "state": "ready",
@@ -64,6 +69,11 @@ exports[`VersionSelect component renders 1`] = `
             "state": "ready",
             "version": "1.8.7",
           },
+          Object {
+            "source": "remote",
+            "state": "ready",
+            "version": "1.8.6",
+          },
           Object {
             "source": "remote",
             "state": "unknown",

tests/renderer/components/__snapshots__/settings-electron-spec.tsx.snap

@@ -180,10 +180,6 @@ exports[`ElectronSettings component renders 1`] = `
           </td>
           <td>
             <span>
-              <Blueprint3.Icon
-                icon="box"
-              />
-               
               Downloaded
             </span>
           </td>
@@ -191,6 +187,7 @@ exports[`ElectronSettings component renders 1`] = `
             className="action"
           >
             <Blueprint3.Button
+              disabled={false}
               fill={true}
               icon="trash"
               onClick={[Function]}
@@ -206,13 +203,7 @@ exports[`ElectronSettings component renders 1`] = `
             2.0.2
           </td>
           <td>
-            <span>
-              <Blueprint3.Icon
-                icon="cloud-download"
-              />
-               
-              Downloading
-            </span>
+            <Blueprint3.ProgressBar />
           </td>
           <td
             className="action"
@@ -235,10 +226,6 @@ exports[`ElectronSettings component renders 1`] = `
           </td>
           <td>
             <span>
-              <Blueprint3.Icon
-                icon="box"
-              />
-               
               Downloaded
             </span>
           </td>
@@ -246,6 +233,7 @@ exports[`ElectronSettings component renders 1`] = `
             className="action"
           >
             <Blueprint3.Button
+              disabled={false}
               fill={true}
               icon="trash"
               onClick={[Function]}

tests/renderer/components/settings-electron-spec.tsx

@@ -25,6 +25,7 @@ describe('ElectronSettings component', () => {
     store.versions['2.0.2'].state = 'downloading';
     store.versions['2.0.1'].state = 'ready';
     store.versions['1.8.7'].state = 'unknown';
+    store.versions['1.8.6'].state = 'unzipping';
   });
 
   it('renders', () => {
@@ -94,7 +95,7 @@ describe('ElectronSettings component', () => {
     const instance = wrapper.instance() as any;
     await instance.handleDeleteAll();
 
-    expect(store.removeVersion).toHaveBeenCalledTimes(2);
+    expect(store.removeVersion).toHaveBeenCalledTimes(3);
   });
 
   it('handles the downloadAll()', async () => {

tests/renderer/state-spec.ts

@@ -283,17 +283,21 @@ describe('AppState', () => {
     });
 
     it('excludes channels', () => {
+      const expectedLength = Object.keys(appState.versions).length;
+
       appState.channelsToShow = [ 'Unsupported' as any ];
       expect(appState.versionsToShow.length).toEqual(0);
       appState.channelsToShow = [ 'Stable' as any ];
-      expect(appState.versionsToShow.length).toEqual(3);
+      expect(appState.versionsToShow.length).toEqual(expectedLength);
     });
 
     it('excludes states', () => {
+      const expectedLength = Object.keys(appState.versions).length;
+
       appState.statesToShow = [ VersionState.downloading ];
       expect(appState.versionsToShow.length).toEqual(0);
       appState.statesToShow = [ VersionState.ready ];
-      expect(appState.versionsToShow.length).toEqual(3);
+      expect(appState.versionsToShow.length).toEqual(expectedLength);
     });
   });
 
@@ -422,7 +426,7 @@ describe('AppState', () => {
       // refreshed - we didn't actually add the local version
       // above, since versions.ts is mocked
       expect(Object.keys(appState.versions)).toEqual(
-        ['2.0.2', '2.0.1', '1.8.7']
+        ['2.0.2', '2.0.1', '1.8.7', '1.8.6']
       );
     });
   });

tests/renderer/touch-bar-manager-spec.ts

@@ -1,7 +1,7 @@
 import { VersionSource, VersionState } from '../../src/interfaces';
 import { AppState } from '../../src/renderer/state';
 import { TouchBarManager } from '../../src/renderer/touch-bar-manager';
-import { mockVersions } from '../mocks/electron-versions';
+import { mockVersions, mockVersionsArray } from '../mocks/electron-versions';
 import { overridePlatform, resetPlatform } from '../utils';
 
 const { lastElectronVersion } = require('../fixtures/releases-metadata.json');
@@ -27,7 +27,8 @@ describe('TouchBarManager', () => {
   it('creates a touch bar with versions', () => {
     const touchBarMgr = new TouchBarManager(appState);
 
-    expect(touchBarMgr.versionSelector.items).toHaveLength(3);
+    const expectedLength = Object.keys(appState.versions).length;
+    expect(touchBarMgr.versionSelector.items).toHaveLength(expectedLength);
 
     const [ item ] = touchBarMgr.versionSelector.items;
 
@@ -43,7 +44,8 @@ describe('TouchBarManager', () => {
       version: '3.3.3'
     };
 
-    expect(touchBarMgr.versionSelector.items).toHaveLength(4);
+    const expectedLength = Object.keys(appState.versions).length;
+    expect(touchBarMgr.versionSelector.items).toHaveLength(expectedLength);
 
     const [ item ] = touchBarMgr.versionSelector.items;