Add a loading toast when auto-updater download begins (#3995)

* Add a loading toast when update download begins

* Temporarily turn on artifact builds to test

* fmt

* Oops forgot to rename where I used a type

* Update src/index.tsx

* Update src/index.tsx

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)

* Add an `update-error` listener

* Flatten autoupdater hooks

* Revert "Temporarily turn on artifact builds to test"

This reverts commit e2e1991977.

* Switch branch to build-publish-apps on to this one

* Make the loading toast not attempt to display a version number

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)

* fmt

* Update .github/workflows/build-test-publish-apps.yml

Co-authored-by: Pierre Jacquier <pierrejacquier39@gmail.com>

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Pierre Jacquier <pierrejacquier39@gmail.com>

interface.d.ts

@@ -69,9 +69,13 @@ export interface IElectronAPI {
   kittycad: (access: string, args: any) => any
   listMachines: () => Promise<MachinesListing>
   getMachineApiIp: () => Promise<string | null>
+  onUpdateDownloadStart: (
+    callback: (value: { version: string }) => void
+  ) => Electron.IpcRenderer
   onUpdateDownloaded: (
     callback: (value: string) => void
   ) => Electron.IpcRenderer
+  onUpdateError: (callback: (value: { error: Error }) => void) => Electron
   appRestart: () => void
 }
 

src/index.tsx

@@ -8,6 +8,7 @@ import ModalContainer from 'react-modal-promise'
 import { isDesktop } from 'lib/isDesktop'
 import { AppStreamProvider } from 'AppState'
 import { ToastUpdate } from 'components/ToastUpdate'
+import { AUTO_UPDATER_TOAST_ID } from 'lib/constants'
 
 // uncomment for xstate inspector
 // import { DEV } from 'env'
@@ -53,7 +54,22 @@ root.render(
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals()
 
-isDesktop() &&
+if (isDesktop()) {
+  // Listen for update download progress to begin
+  // to show a loading toast.
+  window.electron.onUpdateDownloadStart(() => {
+    const message = `Downloading app update...`
+    console.log(message)
+    toast.loading(message, { id: AUTO_UPDATER_TOAST_ID })
+  })
+  // Listen for update download errors to show
+  // an error toast and clear the loading toast.
+  window.electron.onUpdateError(({ error }) => {
+    console.error(error)
+    toast.error('An error occurred while downloading the update.', {
+      id: AUTO_UPDATER_TOAST_ID,
+    })
+  })
   window.electron.onUpdateDownloaded((version: string) => {
     const message = `A new update (${version}) was downloaded and will be available next time you open the app.`
     console.log(message)
@@ -64,6 +80,7 @@ isDesktop() &&
           window.electron.appRestart()
         },
       }),
-      { duration: 30000 }
+      { duration: 30000, id: AUTO_UPDATER_TOAST_ID }
     )
   })
+}

src/lib/constants.ts

@@ -102,3 +102,6 @@ export const KCL_SAMPLES_MANIFEST_URLS = {
     'https://raw.githubusercontent.com/KittyCAD/kcl-samples/main/manifest.json',
   localFallback: '/kcl-samples-manifest-fallback.json',
 } as const
+
+/** Toast id for the app auto-updater toast */
+export const AUTO_UPDATER_TOAST_ID = 'auto-updater-toast'

src/main.ts

@@ -261,10 +261,30 @@ app.on('ready', () => {
     autoUpdater.checkForUpdates().catch(reportRejection)
   }, fifteenMinutes)
 
+  autoUpdater.on('error', (error) => {
+    console.error('updater-error', error)
+    mainWindow?.webContents.send('updater-error', error)
+  })
+
   autoUpdater.on('update-available', (info) => {
     console.log('update-available', info)
   })
 
+  autoUpdater.prependOnceListener('download-progress', (progress) => {
+    // For now, we'll send nothing and just start a loading spinner.
+    // See below for a TODO to send progress data to the renderer.
+    console.log('update-download-start', {
+      version: '',
+    })
+    mainWindow?.webContents.send('update-download-start', progress)
+  })
+
+  autoUpdater.on('download-progress', (progress) => {
+    // TODO: in a future PR (https://github.com/KittyCAD/modeling-app/issues/3994)
+    // send this data to mainWindow to show a progress bar for the download.
+    console.log('download-progress', progress)
+  })
+
   autoUpdater.on('update-downloaded', (info) => {
     console.log('update-downloaded', info)
     mainWindow?.webContents.send('update-downloaded', info.version)

src/preload.ts

@@ -16,8 +16,13 @@ const startDeviceFlow = (host: string): Promise<string> =>
   ipcRenderer.invoke('startDeviceFlow', host)
 const loginWithDeviceFlow = (): Promise<string> =>
   ipcRenderer.invoke('loginWithDeviceFlow')
+const onUpdateDownloadStart = (
+  callback: (value: { version: string }) => void
+) => ipcRenderer.on('update-download-start', (_event, value) => callback(value))
 const onUpdateDownloaded = (callback: (value: string) => void) =>
   ipcRenderer.on('update-downloaded', (_event, value) => callback(value))
+const onUpdateError = (callback: (value: Error) => void) =>
+  ipcRenderer.on('update-error', (_event, value) => callback(value))
 const appRestart = () => ipcRenderer.invoke('app.restart')
 
 const isMac = os.platform() === 'darwin'
@@ -144,6 +149,8 @@ contextBridge.exposeInMainWorld('electron', {
   kittycad,
   listMachines,
   getMachineApiIp,
+  onUpdateDownloadStart,
   onUpdateDownloaded,
+  onUpdateError,
   appRestart,
 })