feat: ui to allow second update without reboot

web/components/UpdateOs/Status.vue

@@ -14,6 +14,7 @@ import useDateTimeHelper from '~/composables/dateTime';
 import { useServerStore } from '~/store/server';
 import { useUpdateOsStore } from '~/store/updateOs';
 import { useUpdateOsActionsStore } from '~/store/updateOsActions';
+import type { UserProfileLink } from '~/types/userProfile';
 
 import BrandLoadingWhite from '~/components/Brand/LoadingWhite.vue';
 
@@ -41,6 +42,8 @@ const { dateTimeFormat, osVersion, rebootType, rebootVersion, regExp, regUpdates
 const { available, availableWithRenewal } = storeToRefs(updateOsStore);
 const { ineligibleText, rebootTypeText, status } = storeToRefs(updateOsActionsStore);
 
+const anyAvailable = computed(() => available.value || availableWithRenewal.value);
+
 const {
   outputDateTimeReadableDiff: readableDiffRegExp,
   outputDateTimeFormatted: formattedRegExp,
@@ -59,6 +62,30 @@ const regExpOutput = computed(() => {
       : props.t('Eligible for free feature updates for {0}', [readableDiffRegExp.value]),
   };
 });
+
+const showRebootButton = computed(() => rebootType.value === 'downgrade' || rebootType.value === 'update');
+
+const checkButton = computed((): UserProfileLink => {
+  if (!available.value && !availableWithRenewal.value) {
+    return {
+      click: () => {
+        updateOsStore.localCheckForUpdate();
+      },
+      icon: ArrowPathIcon,
+      text: props.t('Check for Update'),
+    };
+  }
+
+  return {
+    click: () => {
+      updateOsStore.setModalOpen(true);
+    },
+    icon: BellAlertIcon,
+    text: availableWithRenewal.value
+      ? props.t('Unraid OS {0} Released', [availableWithRenewal.value])
+      : props.t('Unraid OS {0} Update Available', [available.value]),
+  };
+});
 </script>
 
 <template>
@@ -117,8 +144,8 @@ const regExpOutput = computed(() => {
         <template v-else>
           <UiBadge
             v-if="rebootType === ''"
-            :color="available || availableWithRenewal ? 'orange' : 'green'"
-            :icon="available || availableWithRenewal ? BellAlertIcon : CheckCircleIcon"
+            :color="anyAvailable ? 'orange' : 'green'"
+            :icon="anyAvailable ? BellAlertIcon : CheckCircleIcon"
           >
             {{ (available
               ? t('Unraid {0} Available', [available])
@@ -145,17 +172,24 @@ const regExpOutput = computed(() => {
         </UiBadge>
       </div>
 
-      <div class="shrink-0">
-        <UpdateOsCallbackButton
-          v-if="showUpdateCheck && rebootType === ''"
-          :t="t"
-        />
-        <BrandButton
-          v-else-if="rebootType === 'downgrade' || rebootType === 'update'"
-          :icon="ArrowPathIcon"
-          :text="rebootType === 'downgrade' ? t('Reboot Now to Downgrade to {0}', [rebootVersion]) : t('Reboot Now to Update to {0}', [rebootVersion])"
-          @click="updateOsActionsStore.rebootServer()"
-        />
+      <div class="inline-flex flex-col flex-shrink-0 gap-16px flex-grow items-center">
+        <span v-if="showRebootButton">
+          <BrandButton
+            :btn-style="anyAvailable ? 'outline' : 'fill'"
+            :icon="ArrowPathIcon"
+            :text="rebootType === 'downgrade' ? t('Reboot Now to Downgrade to {0}', [rebootVersion]) : t('Reboot Now to Update to {0}', [rebootVersion])"
+            @click="updateOsActionsStore.rebootServer()"
+          />
+        </span>
+
+        <span>
+          <BrandButton
+            :btn-style="!anyAvailable ? 'outline' : 'fill'"
+            :icon="checkButton.icon"
+            :text="checkButton.text"
+            @click="checkButton.click()"
+          />
+        </span>
       </div>
     </div>
   </div>

web/components/UserProfile/DropdownContent.vue

@@ -5,6 +5,7 @@ import {
   ArrowTopRightOnSquareIcon,
   BellAlertIcon,
   CogIcon,
+  ExclamationTriangleIcon,
   KeyIcon,
   UserIcon,
 } from '@heroicons/vue/24/solid';
@@ -13,6 +14,8 @@ import {
   CONNECT_DASHBOARD,
   WEBGUI_CONNECT_SETTINGS,
   WEBGUI_TOOLS_REGISTRATION,
+  WEBGUI_TOOLS_DOWNGRADE,
+  WEBGUI_TOOLS_UPDATE,
 } from '~/helpers/urls';
 import { useAccountStore } from '~/store/account';
 import { useErrorsStore } from '~/store/errors';
@@ -50,7 +53,7 @@ const signOutAction = computed(() => stateData.value.actions?.filter((act: { nam
  */
 const filteredKeyActions = computed(() => keyActions.value?.filter(action => !['renew'].includes(action.name)));
 
-const manageUnraidNetAccount = computed(() => {
+const manageUnraidNetAccount = computed((): UserProfileLink => {
   return {
     external: true,
     click: () => { accountStore.manage(); },
@@ -60,7 +63,7 @@ const manageUnraidNetAccount = computed(() => {
   };
 });
 
-const updateOsCheckForUpdatesButton = computed(() => {
+const updateOsCheckForUpdatesButton = computed((): UserProfileLink => {
   return {
     click: () => {
       updateOsStore.localCheckForUpdate();
@@ -69,7 +72,7 @@ const updateOsCheckForUpdatesButton = computed(() => {
     text: props.t('Check for Update'),
   };
 });
-const updateOsResponseModalOpenButton = computed(() => {
+const updateOsResponseModalOpenButton = computed((): UserProfileLink => {
   return {
     click: () => {
       updateOsStore.setModalOpen(true);
@@ -81,25 +84,29 @@ const updateOsResponseModalOpenButton = computed(() => {
       : props.t('Unraid OS {0} Update Available', [osUpdateAvailable.value]),
   };
 });
-const updateOsToolsUpdatePageButton = computed(() => {
+const rebootDetectedButton = computed((): UserProfileLink => {
   return {
-    external: true,
-    href: WEBGUI_TOOLS_REGISTRATION.toString(),
-    icon: KeyIcon,
+    href: rebootType.value === 'downgrade'
+      ? WEBGUI_TOOLS_DOWNGRADE.toString()
+      : WEBGUI_TOOLS_UPDATE.toString(),
+    icon: ExclamationTriangleIcon,
     text: rebootType.value === 'downgrade'
-      ? props.t('Reboot Now to Downgrade to {0}', [rebootVersion.value])
-      : props.t('Reboot Now to Update to {0}', [rebootVersion.value]),
+      ? props.t('Reboot Required for Downgrade')
+      : props.t('Reboot Required for Update'),
   };
 });
 
-const updateOsButton = computed(() => {
+const updateOsButtons = computed((): UserProfileLink[] => {
+  const btns = [];
   if (rebootType.value === 'downgrade' || rebootType.value === 'update') {
-    return updateOsToolsUpdatePageButton.value;
+    btns.push(rebootDetectedButton.value);
   }
   if (osUpdateAvailable.value) {
-    return updateOsResponseModalOpenButton.value;
+    btns.push(updateOsResponseModalOpenButton.value);
+  } else {
+    btns.push(updateOsCheckForUpdatesButton.value);
   }
-  return updateOsCheckForUpdatesButton.value;
+  return btns;
 });
 
 const links = computed(():UserProfileLink[] => {
@@ -114,7 +121,7 @@ const links = computed(():UserProfileLink[] => {
       : []),
 
     // ensure we only show the update button when we don't have an error
-    ...(!stateDataError.value ? [updateOsButton.value] : []),
+    ...(!stateDataError.value ? [...updateOsButtons.value] : []),
 
     // connect plugin links
     ...(registered.value && connectPluginInstalled.value