From 105bcf23bea2dcd280788a465f983a5ee738f47f Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Tue, 22 Apr 2025 18:03:01 +0200
Subject: [PATCH] Add UI to archive app instead of uninstall

---
 dashboard/src/components/app/Uninstall.vue | 28 ++++++++++++++++++----
 dashboard/src/components/app/Updates.vue   |  2 +-
 dashboard/src/models/AppsModel.js          | 11 +++++++++
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/dashboard/src/components/app/Uninstall.vue b/dashboard/src/components/app/Uninstall.vue
index a795f5921..7d852b6dc 100644
--- a/dashboard/src/components/app/Uninstall.vue
+++ b/dashboard/src/components/app/Uninstall.vue
@@ -48,12 +48,30 @@ async function onUninstall() {
   window.location.href = '/#/apps';
 }
 
-function onArchive() {
-  // TODO
+async function onArchive() {
+  if (!latestBackup.value) return;
+
+  const yes = await inputDialog.value.confirm({
+    title: t('app.archiveDialog.title', { app: (props.app.label || props.app.fqdn) }),
+    message: t('app.archiveDialog.description', { date: prettyLongDate(latestBackup.value.creationTime) }),
+    confirmStyle: 'danger',
+    confirmLabel: t('app.archive.action'),
+    rejectLabel: t('main.dialog.cancel')
+  });
+
+  if (!yes) return;
+
+  const [error] = await appsModel.archive(props.app.id, latestBackup.value.id);
+  if (error) return console.error(error);
+
+  window.location.href = '/#/apps';
 }
 
-onMounted(() => {
-  latestBackup.value = null;
+onMounted(async () => {
+  const [error, result] = await appsModel.backups(props.app.id);
+  if (error) return console.error(error);
+
+  latestBackup.value = result[0] || null;
 });
 
 </script>
@@ -78,7 +96,7 @@ onMounted(() => {
     <div v-if="app.type !== APP_TYPES.PROXIED">
       <label>{{ $t('app.archive.title') }}</label>
       <p v-html="$t('app.archive.description')"></p>
-      <p class="text-bold text-success" v-if="latestBackup" v-html="$t('app.archive.latestBackupInfo', { date: prettyLongDate(uninstall.latestBackup.creationTime) })"></p>
+      <p class="text-bold text-success" v-if="latestBackup" v-html="$t('app.archive.latestBackupInfo', { date: prettyLongDate(latestBackup.creationTime) })"></p>
       <p class="text-bold text-warning" v-else v-html="$t('app.archive.noBackup')"></p>
       <Button :disabled="!latestBackup" @click="onArchive()">{{ $t('app.archive.action') }}</Button>
     </div>
diff --git a/dashboard/src/components/app/Updates.vue b/dashboard/src/components/app/Updates.vue
index 322d78974..af208a899 100644
--- a/dashboard/src/components/app/Updates.vue
+++ b/dashboard/src/components/app/Updates.vue
@@ -67,7 +67,7 @@ function onAskUpdate() {
 }
 
 function onSetupSubscription() {
-  // TODO
+  // TODO payment
 }
 
 onMounted(async () => {
diff --git a/dashboard/src/models/AppsModel.js b/dashboard/src/models/AppsModel.js
index f1bc9a8b5..40c18f5ef 100644
--- a/dashboard/src/models/AppsModel.js
+++ b/dashboard/src/models/AppsModel.js
@@ -283,6 +283,17 @@ function create() {
       if (result.status !== 202) return [result];
       return [null];
     },
+    async archive(id, backupId) {
+      let result;
+      try {
+        result = await fetcher.post(`${API_ORIGIN}/api/v1/apps/${id}/archive`, { backupId }, { access_token: accessToken });
+      } catch (e) {
+        return [e];
+      }
+
+      if (result.status !== 202) return [result];
+      return [null];
+    },
     async getEvents(id) {
       let result;
       try {