From 79e2e89a80312c0776d33d9e61af30b610734d87 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Fri, 3 Nov 2023 16:51:48 -0700
Subject: [PATCH] refactor(web): downgrade status

---
 .../dynamix.my.servers/include/myservers2.php |  2 +-
 web/components/DowngradeOs.ce.vue             |  5 +++-
 web/components/UpdateOs/Downgrade.vue         |  1 -
 web/components/UpdateOs/Status.vue            | 24 ++++++++++++++++---
 web/composables/installPlugin.ts              |  2 ++
 web/locales/en_US.json                        |  1 +
 6 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/myservers2.php b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/myservers2.php
index 4a0f21d5a..f1eb60386 100644
--- a/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/myservers2.php
+++ b/plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/myservers2.php
@@ -4,7 +4,7 @@ require_once("$docroot/plugins/dynamix.my.servers/include/state.php");
 require_once("$docroot/plugins/dynamix.my.servers/include/translations.php");
 
 /**
- * Reboot detection was moved from Update.page to here as to seed the web components on every page rather than just on /Tools/Update
+ * Reboot detection
  */
 $readme = @file_get_contents("$docroot/plugins/unRAIDServer/README.md",false,null,0,20)?:''; // read first 20 bytes of README.md
 $reboot = preg_match("/^\*\*(REBOOT REQUIRED|DOWNGRADE)/", $readme);
diff --git a/web/components/DowngradeOs.ce.vue b/web/components/DowngradeOs.ce.vue
index d24443c91..d2efbf410 100644
--- a/web/components/DowngradeOs.ce.vue
+++ b/web/components/DowngradeOs.ce.vue
@@ -41,7 +41,10 @@ const { rebootType } = storeToRefs(updateOsActionsStore);
 
 <template>
   <UiPageContainer>
-    <UpdateOsStatus :title="t('Downgrade Unraid OS')" :t="t" />
+    <UpdateOsStatus
+      :title="t('Downgrade Unraid OS')"
+      :downgrade-not-available="restoreVersion === ''"
+      :t="t" />
     <UpdateOsDowngrade
       v-if="restoreVersion && rebootType === ''"
       :release-date="restoreReleaseDate"
diff --git a/web/components/UpdateOs/Downgrade.vue b/web/components/UpdateOs/Downgrade.vue
index 5ffee1004..a8db9e6b1 100644
--- a/web/components/UpdateOs/Downgrade.vue
+++ b/web/components/UpdateOs/Downgrade.vue
@@ -73,7 +73,6 @@ const downgradeButton = ref<UserProfileLink | undefined>({
           :text="t('Open a bug report')"
         />
         <BrandButton
-          btn-style="outline"
           :external="downgradeButton?.external"
           :icon="ArrowUturnDownIcon"
           :name="downgradeButton?.name"
diff --git a/web/components/UpdateOs/Status.vue b/web/components/UpdateOs/Status.vue
index 21b7c1687..f6d5e4a4a 100644
--- a/web/components/UpdateOs/Status.vue
+++ b/web/components/UpdateOs/Status.vue
@@ -5,6 +5,7 @@ import {
   CheckCircleIcon,
   ExclamationTriangleIcon,
   InformationCircleIcon,
+  XCircleIcon,
 } from '@heroicons/vue/24/solid';
 import { storeToRefs } from 'pinia';
 
@@ -16,15 +17,19 @@ import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActio
 import BrandLoadingWhite from '~/components/Brand/LoadingWhite.vue';
 
 export interface Props {
+  downgradeNotAvailable?: boolean;
   restoreVersion?: string | undefined;
   showUpdateCheck?: boolean;
   t: any;
   title?: string;
+  subtitle?: string;
 }
 const props = withDefaults(defineProps<Props>(), {
+  downgradeNotAvailable: false,
   restoreVersion: undefined,
   showUpdateCheck: false,
   title: undefined,
+  subtitle: undefined,
 });
 
 const serverStore = useServerStore();
@@ -57,9 +62,14 @@ const regExpOutput = computed(() => {
 
 <template>
   <div class="grid gap-y-16px">
-    <h1 v-if="title" class="text-24px">
-      {{ title }}
-    </h1>
+    <header class="grid gap-y-4px">
+      <h1 v-if="title" class="text-24px font-semibold">
+        {{ title }}
+      </h1>
+      <h2 v-if="subtitle" class="text-20px">
+        {{ subtitle }}
+      </h2>
+    </header>
     <div class="flex flex-col md:flex-row gap-16px justify-start md:items-start md:justify-between">
       <div class="inline-flex flex-wrap justify-start gap-8px">
         <button
@@ -125,6 +135,14 @@ const regExpOutput = computed(() => {
             {{ t(rebootTypeText) }}
           </UiBadge>
         </template>
+
+        <UiBadge
+          v-if="downgradeNotAvailable"
+          :color="'gray'"
+          :icon="XCircleIcon"
+        >
+          {{ t('No downgrade available') }}
+        </UiBadge>
       </div>
 
       <div class="shrink-0">
diff --git a/web/composables/installPlugin.ts b/web/composables/installPlugin.ts
index 01ff794cb..a02a6820c 100644
--- a/web/composables/installPlugin.ts
+++ b/web/composables/installPlugin.ts
@@ -6,11 +6,13 @@ export interface InstallPluginPayload {
 
 const useInstallPlugin = () => {
   const install = (payload: InstallPluginPayload) => {
+    console.debug('[installPlugin]', payload);
     try {
       // @ts-ignore – `openPlugin` will be included in 6.10.4+ DefaultPageLayout
       if (typeof openPlugin === 'function') {
         const plgUrl = new URL(payload.pluginUrl);
         const installString = `${plgUrl.pathname.replace('.plg', '').substring(1)}:install`; // mimic what is done on the install plg page JS but without the regex that's hard to read
+        console.debug('[installPlugin]', { installString, plgUrl });
         // @ts-ignore
         openPlugin(
           `plugin ${payload.update ? 'update' : 'install'} ${payload.pluginUrl}`, // command
diff --git a/web/locales/en_US.json b/web/locales/en_US.json
index 72c915ceb..41a5c5912 100644
--- a/web/locales/en_US.json
+++ b/web/locales/en_US.json
@@ -222,6 +222,7 @@
   "Last checked: {0}": "Last checked: {0}",
   "Downgrade Unraid OS": "Downgrade Unraid OS",
   "Downgrade Unraid OS to {0}": "Downgrade Unraid OS to {0}",
+  "No downgrade available": "No downgrade available",
   "Begin restore to Unraid {0}": "Begin restore to Unraid {0}",
   "Version available for restore {0}": "Version available for restore {0}",
   "check for OS updates": "check for OS updates",