From 0e0a652dff176a8feee3684ec9bb48b54eabcd43 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 8 Nov 2023 15:06:31 -0800
Subject: [PATCH] refactor(web): improved header reboot pill link

---
 web/components/HeaderOsVersion.ce.vue | 23 ++++++++++++++++++-----
 web/helpers/urls.ts                   |  2 ++
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/web/components/HeaderOsVersion.ce.vue b/web/components/HeaderOsVersion.ce.vue
index 1320d5055..b98593876 100644
--- a/web/components/HeaderOsVersion.ce.vue
+++ b/web/components/HeaderOsVersion.ce.vue
@@ -10,7 +10,7 @@ import { useI18n } from 'vue-i18n';
 import 'tailwindcss/tailwind.css';
 import '~/assets/main.css';
 
-import { WEBGUI_TOOLS_UPDATE } from '~/helpers/urls';
+import { WEBGUI_TOOLS_DOWNGRADE, WEBGUI_TOOLS_UPDATE } from '~/helpers/urls';
 import { useServerStore } from '~/store/server';
 import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
 
@@ -25,7 +25,16 @@ const { available } = storeToRefs(updateOsStore);
 const { ineligibleText, rebootType, rebootTypeText } = storeToRefs(updateOsActionsStore);
 
 const showUpdateAvailable = computed(() => !ineligibleText.value && available.value && rebootType.value === '');
-const showRebootRequired = computed(() => rebootType.value !== '');
+
+const rebootRequiredLink = computed(() => {
+  if (rebootType.value === 'downgrade') {
+    return WEBGUI_TOOLS_DOWNGRADE.toString();
+  }
+  if (rebootType.value === 'update') {
+    return WEBGUI_TOOLS_UPDATE.toString();
+  }
+  return '';
+});
 </script>
 
 <template>
@@ -47,21 +56,25 @@ const showRebootRequired = computed(() => rebootType.value !== '');
     </button>
 
     <a
-      v-if="showUpdateAvailable || showRebootRequired"
+      v-if="showUpdateAvailable"
       :href="WEBGUI_TOOLS_UPDATE.toString()"
       class="group"
       :title="t('Go to Tools > Update')"
     >
       <UiBadge
-        v-if="showUpdateAvailable"
         color="orange"
         :icon="BellAlertIcon"
         size="12px"
       >
         {{ t('Update Available') }}
       </UiBadge>
+    </a>
+    <a
+      v-else-if="rebootRequiredLink"
+      :href="rebootRequiredLink"
+      class="group"
+    >
       <UiBadge
-        v-else-if="showRebootRequired"
         :color="'yellow'"
         :icon="ExclamationTriangleIcon"
         size="12px"
diff --git a/web/helpers/urls.ts b/web/helpers/urls.ts
index cfb4695fb..400cf866f 100644
--- a/web/helpers/urls.ts
+++ b/web/helpers/urls.ts
@@ -16,6 +16,7 @@ const WEBGUI = new URL(import.meta.env.VITE_WEBGUI ?? window.location.origin);
 const WEBGUI_GRAPHQL = new URL('/graphql', WEBGUI);
 const WEBGUI_SETTINGS_MANAGMENT_ACCESS = new URL('/Settings/ManagementAccess', WEBGUI);
 const WEBGUI_CONNECT_SETTINGS = new URL('#UnraidNetSettings', WEBGUI_SETTINGS_MANAGMENT_ACCESS);
+const WEBGUI_TOOLS_DOWNGRADE = new URL('/Tools/Downgrade', WEBGUI);
 const WEBGUI_TOOLS_REGISTRATION = new URL('/Tools/Registration', WEBGUI);
 const WEBGUI_TOOLS_UPDATE = new URL('/Tools/Update', WEBGUI);
 
@@ -49,6 +50,7 @@ export {
   WEBGUI_CONNECT_SETTINGS,
   WEBGUI_GRAPHQL,
   WEBGUI_SETTINGS_MANAGMENT_ACCESS,
+  WEBGUI_TOOLS_DOWNGRADE,
   WEBGUI_TOOLS_REGISTRATION,
   WEBGUI_TOOLS_UPDATE,
 };