feat: improve updating ux (#1758)

Author: Stuart Nelson

assets/locales/en.json

@@ -5,6 +5,7 @@
   "ipfsIsNotRunning": "IPFS is Not Running",
   "ipfsHasErrored": "IPFS has Errored",
   "runningWithGC": "Running (GC in progress)",
+  "runningWhileCheckingForUpdate": "Running (Checking for Updates)",
   "start": "Start",
   "stop": "Stop",
   "restart": "Restart",
@@ -28,6 +29,7 @@
   "clickToOpenLogs": "Click here to open the logs.",
   "ipfsNotRunning": "IPFS is not running",
   "checkForUpdates": "Check for Updates…",
+  "checkingForUpdates": "Checking for Updates",
   "yes": "Yes",
   "no": "No",
   "close": "Close",

src/auto-updater/index.js

@@ -1,6 +1,7 @@
 const { shell } = require('electron')
 const { autoUpdater } = require('electron-updater')
 const i18n = require('i18next')
+const { ipcMain } = require('electron')
 const logger = require('../common/logger')
 const { notify } = require('../common/notify')
 const { showDialog } = require('../dialogs')
@@ -125,11 +126,13 @@ function setup (ctx) {
 }
 
 async function checkForUpdates () {
+  ipcMain.emit('updating')
   try {
     await autoUpdater.checkForUpdates()
   } catch (_) {
     // Ignore. The errors are already handled on 'error' event.
   }
+  ipcMain.emit('updatingEnded')
 }
 
 module.exports = async function (ctx) {

src/tray.js

@@ -54,7 +54,8 @@ function buildMenu (ctx) {
       ['ipfsIsStopping', 'yellow'],
       ['ipfsIsNotRunning', 'gray'],
       ['ipfsHasErrored', 'red'],
-      ['runningWithGC', 'yellow']
+      ['runningWithGC', 'yellow'],
+      ['runningWhileCheckingForUpdate', 'yellow']
     ].map(([status, color]) => ({
       id: status,
       label: i18n.t(status),
@@ -203,9 +204,15 @@ function buildMenu (ctx) {
         },
         { type: 'separator' },
         {
+          id: 'checkForUpdates',
           label: i18n.t('checkForUpdates'),
           click: () => { ctx.manualCheckForUpdates() }
         },
+        {
+          id: 'checkingForUpdates',
+          label: i18n.t('checkingForUpdates'),
+          enabled: false
+        },
         { type: 'separator' },
         {
           label: i18n.t('viewOnGitHub'),
@@ -245,7 +252,8 @@ module.exports = function (ctx) {
 
   const state = {
     status: null,
-    gcRunning: false
+    gcRunning: false,
+    isUpdating: false
   }
 
   // macOS tray drop files
@@ -276,15 +284,16 @@ module.exports = function (ctx) {
   }
 
   const updateMenu = () => {
-    const { status, gcRunning } = state
+    const { status, gcRunning, isUpdating } = state
     const errored = status === STATUS.STARTING_FAILED || status === STATUS.STOPPING_FAILED
 
-    menu.getMenuItemById('ipfsIsStarting').visible = status === STATUS.STARTING_STARTED && !gcRunning
-    menu.getMenuItemById('ipfsIsRunning').visible = status === STATUS.STARTING_FINISHED && !gcRunning
-    menu.getMenuItemById('ipfsIsStopping').visible = status === STATUS.STOPPING_STARTED && !gcRunning
-    menu.getMenuItemById('ipfsIsNotRunning').visible = status === STATUS.STOPPING_FINISHED && !gcRunning
-    menu.getMenuItemById('ipfsHasErrored').visible = errored && !gcRunning
+    menu.getMenuItemById('ipfsIsStarting').visible = status === STATUS.STARTING_STARTED && !gcRunning && !isUpdating
+    menu.getMenuItemById('ipfsIsRunning').visible = status === STATUS.STARTING_FINISHED && !gcRunning && !isUpdating
+    menu.getMenuItemById('ipfsIsStopping').visible = status === STATUS.STOPPING_STARTED && !gcRunning && !isUpdating
+    menu.getMenuItemById('ipfsIsNotRunning').visible = status === STATUS.STOPPING_FINISHED && !gcRunning && !isUpdating
+    menu.getMenuItemById('ipfsHasErrored').visible = errored && !gcRunning && !isUpdating
     menu.getMenuItemById('runningWithGC').visible = gcRunning
+    menu.getMenuItemById('runningWhileCheckingForUpdate').visible = isUpdating
 
     menu.getMenuItemById('startIpfs').visible = status === STATUS.STOPPING_FINISHED
     menu.getMenuItemById('stopIpfs').visible = status === STATUS.STARTING_FINISHED
@@ -309,6 +318,10 @@ module.exports = function (ctx) {
     menu.getMenuItemById('setCustomBinary').visible = !hasCustomBinary()
     menu.getMenuItemById('clearCustomBinary').visible = hasCustomBinary()
 
+    menu.getMenuItemById('checkForUpdates').enabled = !isUpdating
+    menu.getMenuItemById('checkForUpdates').visible = !isUpdating
+    menu.getMenuItemById('checkingForUpdates').visible = isUpdating
+
     if (status === STATUS.STARTING_FINISHED) {
       tray.setImage(icon(on))
     } else {
@@ -342,6 +355,16 @@ module.exports = function (ctx) {
     updateMenu()
   })
 
+  ipcMain.on('updating', () => {
+    state.isUpdating = true
+    updateMenu()
+  })
+
+  ipcMain.on('updatingEnded', () => {
+    state.isUpdating = false
+    updateMenu()
+  })
+
   ipcMain.on('configUpdated', () => { updateMenu() })
   ipcMain.on('languageUpdated', () => { setupMenu() })