Remove the app repair dialog in favor of just a simple button to trigger repair

dashboard/src/components/app/Repair.vue

@@ -1,15 +1,15 @@
 <script setup>
 
-import { ref, onMounted, useTemplateRef } from 'vue';
+import { ref, onMounted } from 'vue';
 import { Button, Switch } from '@cloudron/pankow';
 import { taskNameFromInstallationState } from '../../utils.js';
 import { ISTATES } from '../../constants.js';
-import AppRepairDialog from '../AppRepairDialog.vue';
 import AppsModel from '../../models/AppsModel.js';
 
 const props = defineProps([ 'app' ]);
 
 const appsModel = AppsModel.create();
+const busyRepair = ref(false);
 const busyRestart = ref(false);
 const debugMode = ref(false);
 const debugModeBusy = ref(false);
@@ -30,12 +30,20 @@ async function onDebugMode(newValue) {
   }
 
   // let the task start
-  setTimeout(() => { debugModeBusy.value = false; }, 2000);
+  setTimeout(() => { debugModeBusy.value = false; }, 4000);
 }
 
-const repairDialog = useTemplateRef('repairDialog');
 async function onRepair() {
-  repairDialog.value.open(props.app);
+  busyRepair.value = true;
+
+  const [error] = await appsModel.repair(props.app.id, {});
+  if (error) {
+    console.error(error);
+    busyRepair.value = false;
+    return;
+  }
+
+  setTimeout(() => { busyRepair.value = false; }, 4000);
 }
 
 async function onRestart() {
@@ -55,8 +63,6 @@ onMounted(() => {
 
 <template>
   <div>
-    <AppRepairDialog ref="repairDialog" />
-
     <label>{{ $t('app.repair.recovery.title') }}</label>
     <p v-html="$t('app.repair.recovery.description', { docsLink: 'https://docs.cloudron.io/troubleshooting/#unresponsive-app' })"></p>
 
@@ -70,6 +76,6 @@ onMounted(() => {
     <label>{{ $t('app.repair.taskError.title') }}</label>
     <p>{{ $t('app.repair.taskError.description') }}</p>
     <p v-if="app.error">An error occurred during the <b>{{ taskNameFromInstallationState(app.error.details.installationState) }}</b> operation: <span class="text-danger"><b>{{ app.error.reason + ': ' + app.error.message }}</b></span></p>
-    <Button @click="onRepair()" :disabled="app.taskId || !app.error" v-tooltip="app.taskId ? $t('app.repair.appIsBusyTooltip') : ''">{{ $t('app.repair.taskError.retryAction', { task: app.error ? taskNameFromInstallationState(app.error.details.installationState) : '' }) }}</Button>
+    <Button @click="onRepair()" :disabled="busyRepair || app.taskId || !app.error" :loading="busyRepair">{{ $t('app.repair.taskError.retryAction', { task: app.error ? taskNameFromInstallationState(app.error.details.installationState) : '' }) }}</Button>
   </div>
 </template>