From 39d631b0562cce72309723376b86355cd9e022a4 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 28 Apr 2025 17:06:31 +0200
Subject: [PATCH] Reorder bits in the app backup page

---
 dashboard/src/components/AppRepairDialog.vue |  2 +-
 dashboard/src/components/app/Backups.vue     | 63 +++++++++++---------
 2 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/dashboard/src/components/AppRepairDialog.vue b/dashboard/src/components/AppRepairDialog.vue
index d8ffb87ce..83f4ba1b5 100644
--- a/dashboard/src/components/AppRepairDialog.vue
+++ b/dashboard/src/components/AppRepairDialog.vue
@@ -1,7 +1,7 @@
 <script setup>
 
 import { ref, useTemplateRef } from 'vue';
-import { Dialog, FormGroup, SingleSelect, TextInput } from 'pankow';
+import { Dialog, FormGroup, SingleSelect } from 'pankow';
 import { prettyDate } from 'pankow/utils';
 import { ISTATES } from '../constants.js';
 import { taskNameFromInstallationState } from '../utils.js';
diff --git a/dashboard/src/components/app/Backups.vue b/dashboard/src/components/app/Backups.vue
index c5618d3f0..2778be67c 100644
--- a/dashboard/src/components/app/Backups.vue
+++ b/dashboard/src/components/app/Backups.vue
@@ -9,6 +9,7 @@ import { Icon, Button, Switch, Checkbox, FormGroup, TextInput, TableView, Button
 import { prettyLongDate } from 'pankow/utils';
 import { API_ORIGIN, SECRET_PLACEHOLDER } from '../../constants.js';
 import { download } from '../../utils.js';
+import AppImportDialog from '../AppImportDialog.vue';
 import AppRestoreDialog from '../AppRestoreDialog.vue';
 import SettingsItem from '../SettingsItem.vue';
 import AppsModel from '../../models/AppsModel.js';
@@ -158,8 +159,9 @@ async function onRestoreSubmit() {
   restoreDialog.value.close();
 }
 
+const importDialog = useTemplateRef('importDialog');
 function onImport() {
-  // TODO
+  importDialog.value.open(props.app.id);
 }
 
 const cloneDialog = useTemplateRef('cloneDialog');
@@ -187,6 +189,7 @@ onMounted(async () => {
 
   <div>
     <AppRestoreDialog ref="cloneDialog"/>
+    <AppImportDialog ref="importDialog"/>
     <Dialog ref="editDialog"
       :title="$t('backups.backupEdit.title')"
       :reject-label="$t('main.dialog.cancel')"
@@ -251,10 +254,37 @@ onMounted(async () => {
       </div>
     </Dialog>
 
-    <label>{{ $t('app.backups.backups.title') }}</label>
-    <p>{{ $t('app.backups.backups.description') }}</p>
+    <SettingsItem>
+      <FormGroup>
+        <label>{{ $t('app.backups.auto.title') }}</label>
+        <div v-html="$t('app.backups.auto.description', { backupLink: '/#/backups' })"></div>
+      </FormGroup>
+      <Switch v-model="autoBackupsEnabled" @change="onChangeAutoBackups"/>
+    </SettingsItem>
 
-    <br/>
+    <SettingsItem>
+      <FormGroup>
+        <label>{{ $t('app.backups.import.title') }}</label>
+        <div>{{ $t('app.backups.import.description') }}</div>
+      </FormGroup>
+      <div style="display: flex; align-items: center">
+        <Button @click="onImport()" :loading="importBusy" :disabled="importBusy || app.taskId || app.runState === 'stopped'" tooltip-enable="app.taskId" uib-tooltip="App is not running">{{ $t('app.backups.backups.importAction') }}</Button>
+      </div>
+    </SettingsItem>
+
+    <hr/>
+
+    <SettingsItem>
+      <FormGroup>
+        <label>{{ $t('app.backups.backups.title') }}</label>
+        <div>{{ $t('app.backups.backups.description') }}</div>
+      </FormGroup>
+      <div style="display: flex; align-items: center">
+        <Button @click="onCreate()" :loading="createBusy" :disabled="createBusy || app.taskId || app.error || app.runState === 'stopped'" tooltip-enable="app.error || app.taskId || app.runState === 'stopped'" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'Task active' : (app.runState === 'stopped' ? 'App is not running' : ''))">{{ $t('app.backups.backups.createBackupAction') }}</Button>
+      </div>
+    </SettingsItem>
+
+    <p class="has-error" v-if="errorMessage">{{ errorMessage }}</p>
 
     <TableView :model="backups" :columns="columns" :busy="busy">
       <template #preserveSecs="backup">
@@ -275,30 +305,5 @@ onMounted(async () => {
         </div>
       </template>
     </TableView>
-
-    <br/>
-
-    <p class="has-error" v-if="errorMessage">{{ errorMessage }}</p>
-    <Button @click="onCreate()" :loading="createBusy" :disabled="createBusy || app.taskId || app.error || app.runState === 'stopped'" tooltip-enable="app.error || app.taskId || app.runState === 'stopped'" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'Task active' : (app.runState === 'stopped' ? 'App is not running' : ''))">{{ $t('app.backups.backups.createBackupAction') }}</Button>
-
-    <hr/>
-
-    <SettingsItem>
-      <FormGroup>
-        <label>{{ $t('app.backups.import.title') }}</label>
-        <div>{{ $t('app.backups.import.description') }}</div>
-      </FormGroup>
-      <div style="display: flex; align-items: center">
-        <Button @click="onImport()" :loading="importBusy" :disabled="importBusy || app.taskId || app.runState === 'stopped'" tooltip-enable="app.taskId" uib-tooltip="App is not running">{{ $t('app.backups.backups.importAction') }}</Button>
-      </div>
-    </SettingsItem>
-
-    <SettingsItem>
-      <FormGroup>
-        <label>{{ $t('app.backups.auto.title') }}</label>
-        <div v-html="$t('app.backups.auto.description', { backupLink: '/#/backups' })"></div>
-      </FormGroup>
-      <Switch v-model="autoBackupsEnabled" @change="onChangeAutoBackups"/>
-    </SettingsItem>
   </div>
 </template>