Allow to redo the update if the app task failed

dashboard/src/components/app/Updates.vue

@@ -3,16 +3,19 @@
 import { ref, onMounted, useTemplateRef } from 'vue';
 import { marked } from 'marked';
 import { Button, Switch, Dialog, Checkbox } from '@cloudron/pankow';
+import { ISTATES } from '../../constants.js';
 import SettingsItem from '../SettingsItem.vue';
 import AppsModel from '../../models/AppsModel.js';
 import UpdaterModel from '../../models/UpdaterModel.js';
 import ProfileModel from '../../models/ProfileModel.js';
+import TasksModel from '../../models/TasksModel.js';
 
 const props = defineProps([ 'app' ]);
 
 const appsModel = AppsModel.create();
 const updaterModel = UpdaterModel.create();
 const profileModel = ProfileModel.create();
+const tasksModel = TasksModel.create();
 
 const dialog = useTemplateRef('dialog');
 const update = ref(null);
@@ -36,6 +39,21 @@ async function onAutoUpdatesEnabledChange(value) {
   autoUpdatesEnabledBusy.value = false;
 }
 
+async function waitForTask(id) {
+  if (!id) return;
+
+  const [error, result] = await tasksModel.get(id);
+  if (error) return console.error(error);
+
+  // task done, refresh menu
+  if (!result.active) {
+    await onCheck();
+    return;
+  }
+
+  setTimeout(waitForTask.bind(null, id), 2000);
+}
+
 async function onCheck() {
   busyCheck.value = true;
 
@@ -54,7 +72,7 @@ async function onUpdate() {
   busyUpdate.value = true;
   updateError.value = '';
 
-  let [error] = await appsModel.update(props.app.id, update.value.manifest, skipBackup.value);
+  const [error, result] = await appsModel.update(props.app.id, update.value.manifest, skipBackup.value);
   if (error) {
     busyUpdate.value = false;
     if (error.status === 400) updateError.value = error.body ? error.body.message : 'Internal error';
@@ -65,8 +83,7 @@ async function onUpdate() {
 
   dialog.value.close();
 
-  [error] = await appsModel.checkUpdate(props.app.id);
-  if (error) return console.error(error);
+  waitForTask(result);
 }
 
 function onAskUpdate() {
@@ -142,7 +159,7 @@ onMounted(async () => {
       </div>
 
       <!-- show update button only if update available -->
-      <Button v-if="update" :danger="update.unstable ? true : null" :success="update.unstable ? null : true" @click="onAskUpdate()" :disabled="app.taskId || app.error || app.runState === 'stopped' || app.installationState === 'pending_update'" v-tooltip="(app.error || app.taskId || app.runState === 'stopped') ? (app.error ? 'App is in error state' : 'App is not running') : ''">{{ $t('app.updateDialog.updateAction') }}</Button>
+      <Button v-if="update" :danger="update.unstable ? true : null" :success="update.unstable ? null : true" @click="onAskUpdate()" :disabled="app.taskId || (app.error && app.error.details.installationState !== ISTATES.PENDING_UPDATE) || app.runState === 'stopped' || app.installationState === 'pending_update'">{{ $t('app.updateDialog.updateAction') }}</Button>
     </SettingsItem>
   </div>
 </template>