From f3dc9663b865d715ff498f48b8943388ffab8abd Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 9 May 2024 16:20:53 -0700
Subject: [PATCH] feat: UI Update OS Cancel

---
 web/components/UpdateOs/Status.vue | 18 +++++++++++++++---
 web/composables/services/webgui.ts | 22 ++++++++++++++++++++++
 web/locales/en_US.json             |  3 ++-
 web/store/updateOs.ts              | 18 +++++++++++++++++-
 4 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/web/components/UpdateOs/Status.vue b/web/components/UpdateOs/Status.vue
index 14b4a2d89..0aef3bf07 100644
--- a/web/components/UpdateOs/Status.vue
+++ b/web/components/UpdateOs/Status.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import {
   ArrowPathIcon,
+  ArrowTopRightOnSquareIcon,
   BellAlertIcon,
   CheckCircleIcon,
   ExclamationTriangleIcon,
@@ -11,10 +12,11 @@ import { storeToRefs } from 'pinia';
 
 import { WEBGUI_TOOLS_REGISTRATION } from '~/helpers/urls';
 import useDateTimeHelper from '~/composables/dateTime';
+import { useAccountStore } from '~/store/account';
 import { useServerStore } from '~/store/server';
 import { useUpdateOsStore } from '~/store/updateOs';
 import { useUpdateOsActionsStore } from '~/store/updateOsActions';
-import type { UserProfileLink } from '~/types/userProfile';
+import type { ButtonProps } from '~/types/ui/button';
 
 import BrandLoadingWhite from '~/components/Brand/LoadingWhite.vue';
 
@@ -34,6 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
   subtitle: undefined,
 });
 
+const accountStore = useAccountStore();
 const serverStore = useServerStore();
 const updateOsStore = useUpdateOsStore();
 const updateOsActionsStore = useUpdateOsActionsStore();
@@ -65,7 +68,7 @@ const regExpOutput = computed(() => {
 
 const showRebootButton = computed(() => rebootType.value === 'downgrade' || rebootType.value === 'update');
 
-const checkButton = computed((): UserProfileLink => {
+const checkButton = computed((): ButtonProps => {
   if (!available.value && !availableWithRenewal.value) {
     return {
       click: () => {
@@ -187,7 +190,16 @@ const checkButton = computed((): UserProfileLink => {
             :btn-style="!anyAvailable ? 'outline' : 'fill'"
             :icon="checkButton.icon"
             :text="checkButton.text"
-            @click="checkButton.click()"
+            @click="checkButton.click"
+          />
+        </span>
+
+        <span v-if="rebootType !== ''">
+          <BrandButton
+            btn-style="outline"
+            :icon="XCircleIcon"
+            :text="t('Cancel {0}', [rebootType === 'downgrade' ? t('Downgrade') : t('Update')])"
+            @click="updateOsStore.cancelUpdate()"
           />
         </span>
       </div>
diff --git a/web/composables/services/webgui.ts b/web/composables/services/webgui.ts
index d6532499f..eba7abae6 100644
--- a/web/composables/services/webgui.ts
+++ b/web/composables/services/webgui.ts
@@ -142,3 +142,25 @@ export const WebguiUpdateIgnore = async (payload: WebguiUnraidCheckPayload): Pro
     throw new Error('Error ignoring update');
   }
 };
+
+export interface WebguiUpdateCancelResponse {
+  message?: string;
+  success?: boolean;
+}
+export const WebguiUpdateCancel = async (): Promise<WebguiUpdateCancelResponse> => {
+  console.debug('[WebguiUpdateCancel]');
+  try {
+    const response = await request
+      .url('/plugins/dynamix.plugin.manager/include/UnraidUpdateCancel.php')
+      .get()
+      .json(json => json as WebguiUpdateCancelResponse)
+      .catch((error) => {
+        console.error('[WebguiUpdateCancel] catch failed to execute UpdateUpdateCancel', error);
+        throw new Error('Error attempting to revert OS files to cancel update');
+      });
+    return response as WebguiUpdateCancelResponse;
+  } catch (error) {
+    console.error('[WebguiUpdateCancel] catch failed to execute UpdateUpdateCancel', error);
+    throw new Error('Error attempting to revert OS files to cancel update');
+  }
+};
diff --git a/web/locales/en_US.json b/web/locales/en_US.json
index b537b617a..2da749f44 100644
--- a/web/locales/en_US.json
+++ b/web/locales/en_US.json
@@ -364,5 +364,6 @@
   "Enable update notifications": "Enable update notifications",
   "Link Key": "Link Key",
   "Not Linked": "Not Linked",
-  "Learn more and link your key to your account": "Learn more and link your key to your account"
+  "Learn more and link your key to your account": "Learn more and link your key to your account",
+  "Cancel {0}": "Cancel {0}"
 }
diff --git a/web/store/updateOs.ts b/web/store/updateOs.ts
index 7225efb94..6d646e075 100644
--- a/web/store/updateOs.ts
+++ b/web/store/updateOs.ts
@@ -4,7 +4,10 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import { defineStore, createPinia, setActivePinia } from 'pinia';
 import { computed } from 'vue';
 
-import { WebguiCheckForUpdate } from '~/composables/services/webgui';
+import {
+  WebguiCheckForUpdate,
+  WebguiUpdateCancel,
+} from '~/composables/services/webgui';
 import { useServerStore } from '~/store/server';
 import type { ServerUpdateOsResponse } from '~/types/server';
 /**
@@ -70,6 +73,18 @@ export const useUpdateOsStore = defineStore('updateOs', () => {
     }
   };
 
+  const cancelUpdate = async (): Promise<void> => {
+    try {
+      const response = await WebguiUpdateCancel();
+      if (!response.success) {
+        throw new Error('Unable to cancel update');
+      }
+      window.location.reload();
+    } catch (error) {
+      throw new Error('[cancelUpdate] Error cancelling update');
+    }
+  };
+
   const setModalOpen = (val: boolean) => {
     modalOpen.value = val;
   };
@@ -86,6 +101,7 @@ export const useUpdateOsStore = defineStore('updateOs', () => {
     availableRequiresAuth,
     // actions
     localCheckForUpdate,
+    cancelUpdate,
     setModalOpen,
   };
 });