have a manual update button

Signed-off-by: Vikalp Rusia <53312141+VikalpRusia@users.noreply.github.com>

Author: VikalpRusia

pkg/rancher-desktop/components/UpdateStatus.vue

@@ -2,13 +2,21 @@
   <div>
     <div class="version">
       <version />
-      <rd-checkbox
-        v-if="updatePossible"
-        v-model="updatesEnabled"
-        class="updatesEnabled"
-        label="Check for updates automatically"
-        :is-locked="autoUpdateLocked"
-      />
+      <div v-if="updatePossible" class="check-updates">
+        <rd-checkbox
+          v-model="updatesEnabled"
+          class="updatesEnabled"
+          label="Check for updates automatically"
+          :is-locked="autoUpdateLocked"
+        />
+        <button
+          class="btn role-secondary"
+          @click="manuallyCheckUpdate"
+        >
+          <span v-if="isUpdateErrored">Retry Update</span>
+          <span v-else>Check for Updates</span>
+        </button>
+      </div>
     </div>
     <card
       v-if="hasUpdate"
@@ -142,6 +150,10 @@ class UpdateStatus extends UpdateStatusProps {
     return this.updatesEnabled && !!this.updateState?.available;
   }
 
+  get isUpdateErrored() {
+    return this.updateState?.error;
+  }
+
   get updateReady() {
     return this.hasUpdate && !!this.updateState?.downloaded && !this.updateState?.error;
   }
@@ -200,6 +212,10 @@ class UpdateStatus extends UpdateStatusProps {
     this.$emit('apply');
   }
 
+  manuallyCheckUpdate() {
+    this.$emit('check-for-updates');
+  }
+
   get autoUpdateLocked() {
     return this.isAutoUpdateLocked;
   }
@@ -211,7 +227,8 @@ export default UpdateStatus;
 <style lang="scss" scoped>
   .version {
     display: flex;
-    justify-content: space-between
+    justify-content: space-between;
+    align-items: center;
   }
   .update-notification {
     font-weight: 900;
@@ -223,6 +240,12 @@ export default UpdateStatus;
     margin-left: 2em;
     margin-right: 1em;
   }
+
+  .check-updates {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
 </style>
 
 <style lang="scss">

pkg/rancher-desktop/main/update/index.ts

@@ -72,6 +72,11 @@ Electron.ipcMain.on('update-apply', () => {
   autoUpdater.quitAndInstall();
 });
 
+Electron.ipcMain.on('check-for-updates', () => {
+  console.error('working');
+  triggerUpdateCheck();
+});
+
 function isLonghornUpdateInfo(info: UpdateInfo | LonghornUpdateInfo): info is LonghornUpdateInfo {
   return (info as LonghornUpdateInfo).nextUpdateTime !== undefined;
 }

pkg/rancher-desktop/pages/General.vue

@@ -20,6 +20,7 @@
       :is-auto-update-locked="autoUpdateLocked"
       @enabled="onUpdateEnabled"
       @apply="onUpdateApply"
+      @check-for-updates="onUpdateCheck"
     />
     <hr>
     <telemetry-opt-in
@@ -100,6 +101,10 @@ export default {
     onUpdateState(event, state) {
       this.$data.updateState = state;
     },
+    onUpdateCheck() {
+      console.log('till here');
+      ipcRenderer.send('check-for-updates');
+    },
     updateTelemetry(value) {
       ipcRenderer.invoke('settings-write', { application: { telemetry: { enabled: value } } });
     },

pkg/rancher-desktop/typings/electron-ipc.d.ts

@@ -32,6 +32,7 @@ export interface IpcMainEvents {
   'update-state': () => void;
   // Quit and apply the update.
   'update-apply': () => void;
+  'check-for-updates': () => void;
   // #endregion
 
   // #region main/containerEvents