feat(update): implement download and installation functionality for u…

…pdates with progress tracking

apps/desktop/dev-app-update.yml

@@ -1,2 +1,3 @@
 provider: generic
-url: http://localhost:8080
+url: http://localhost:8080/
+updaterCacheDirName: mqttx-updater

apps/desktop/electron-builder.yml

@@ -70,4 +70,4 @@ npmRebuild: false
 publish:
   provider: generic
   # TODO: change to our own server
-  url: http://localhost:8080
+  url: http://localhost:8080/

apps/desktop/src/main/update.ts

@@ -67,6 +67,12 @@ function useAppUpdater() {
   ipcMain.handle('check-for-updates', async () => {
     return await autoUpdater.checkForUpdates()
   })
+  ipcMain.handle('download-update', async () => {
+    return await autoUpdater.downloadUpdate()
+  })
+  ipcMain.handle('install-update', async () => {
+    autoUpdater.quitAndInstall()
+  })
 }
 
 export { useAppUpdater }

apps/desktop/src/preload/index.d.ts

@@ -7,8 +7,10 @@ declare global {
     electron: ElectronAPI
     api: {
       execute: (...args: any[]) => Promise<any>
-      checkForUpdates: () => Promise<UpdateCheckResult | null>
       onUpdateStatus: (callback: (event: Electron.IpcRendererEvent, updateEvent: UpdateEvent) => void) => void
+      checkForUpdates: () => Promise<UpdateCheckResult | null>
+      downloadUpdate: () => Promise<void>
+      installUpdate: () => Promise<void>
     }
   }
 }

apps/desktop/src/preload/index.ts

@@ -4,10 +4,12 @@ import { contextBridge, ipcRenderer } from 'electron'
 // Custom APIs for renderer
 const api = {
   execute: (...args) => ipcRenderer.invoke('db:execute', ...args),
-  checkForUpdates: () => ipcRenderer.invoke('check-for-updates'),
   onUpdateStatus: callback => ipcRenderer.on('update-status', (event, status, data) => {
     callback(event, { status, data })
   }),
+  checkForUpdates: () => ipcRenderer.invoke('check-for-updates'),
+  downloadUpdate: () => ipcRenderer.invoke('download-update'),
+  installUpdate: () => ipcRenderer.invoke('install-update'),
 }
 
 // Use `contextBridge` APIs to expose Electron APIs to

apps/desktop/src/renderer/components.d.ts

@@ -37,6 +37,7 @@ declare module 'vue' {
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
@@ -47,9 +48,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SettingsView: typeof import('./../../../../packages/ui/src/components/SettingsView.vue')['default']
     UpdateAvailable: typeof import('./src/components/update/Available.vue')['default']
+    UpdateDownloadProgress: typeof import('./src/components/update/DownloadProgress.vue')['default']
     UpdateView: typeof import('./src/components/update/View.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

apps/desktop/src/renderer/src/components/update/Available.vue

@@ -19,8 +19,7 @@ function remindLater() {
 }
 
 function downloadUpdate() {
-  // TODO: download update
-  // window.api.downloadUpdate()
+  window.api.downloadUpdate()
   dialogVisible.value = false
 }
 

apps/desktop/src/renderer/src/components/update/DownloadProgress.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { ProgressInfo } from 'electron-updater'
+
+const props = defineProps<{
+  downloadProgress: ProgressInfo | null
+  updateDownloaded: boolean
+}>()
+
+const dialogVisible = defineModel<boolean>({ default: true })
+
+const { downloadProgress, updateDownloaded } = toRefs(props)
+
+function installUpdate() {
+  window.api.installUpdate()
+}
+</script>
+
+<template>
+  <MyDialog
+    v-model="dialogVisible"
+    :title="$t('update.downloadProgress')"
+    width="460px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+    center
+  >
+    <div>
+      <div class="mb-2 text-default">
+        {{ !updateDownloaded ? $t('update.downloading') : $t('update.downloaded') }}
+      </div>
+      <ElProgress :percentage="updateDownloaded ? 100 : downloadProgress?.percent" />
+    </div>
+    <template #footer>
+      <ElButton v-if="!updateDownloaded" type="danger">
+        {{ $t('update.cancel') }}
+      </ElButton>
+      <ElButton v-else type="primary" @click="installUpdate">
+        {{ $t('update.install') }}
+      </ElButton>
+    </template>
+  </MyDialog>
+</template>

apps/desktop/src/renderer/src/components/update/View.vue

@@ -8,6 +8,7 @@ const changelog = ref('')
 
 const downloadProgressDialogVisible = ref(false)
 const downloadProgress = ref<ProgressInfo | null>(null)
+const updateDownloaded = ref(false)
 
 window.api.onUpdateStatus((_event, updateEvent) => {
   const { status } = updateEvent
@@ -24,6 +25,9 @@ window.api.onUpdateStatus((_event, updateEvent) => {
   } else if (status === 'download-progress') {
     downloadProgressDialogVisible.value = true
     downloadProgress.value = updateEvent.data
+  } else if (status === 'update-downloaded') {
+    downloadProgressDialogVisible.value = true
+    updateDownloaded.value = true
   } else if (status === 'error') {
     ElMessage({
       message: updateEvent.data.message,
@@ -48,4 +52,9 @@ onMounted(async () => {
     :version="version"
     :release-notes="changelog"
   />
+  <UpdateDownloadProgress
+    v-model="downloadProgressDialogVisible"
+    :download-progress="downloadProgress"
+    :update-downloaded="updateDownloaded"
+  />
 </template>