refactor(web): update handle third-party drivers

web/components/HeaderOsVersion.ce.vue

@@ -22,7 +22,7 @@ const updateOsActionsStore = useUpdateOsActionsStore();
 
 const { osVersion } = storeToRefs(serverStore);
 const { available } = storeToRefs(updateOsStore);
-const { rebootType } = storeToRefs(updateOsActionsStore);
+const { rebootType, rebootTypeText } = storeToRefs(updateOsActionsStore);
 </script>
 
 <template>
@@ -58,7 +58,7 @@ const { rebootType } = storeToRefs(updateOsActionsStore);
         :icon="ExclamationTriangleIcon"
         size="12px"
       >
-        {{ rebootType === 'downgrade' ? t('Reboot Required for Downgrade') : t('Reboot Required for Update') }}
+        {{ t(rebootTypeText) }}
       </UiBadge>
     </a>
   </div>

web/components/UpdateOs.ce.vue

@@ -49,6 +49,9 @@ const { rebootType } = storeToRefs(updateOsActionsStore);
       :release-date="restoreReleaseDate"
       :version="restoreVersion"
       :t="t" />
+    <UpdateOsThirdPartyDrivers
+      v-if="rebootType === 'thirdPartyDriversDownloading'"
+      :t="t" />
   </div>
 </template>
 

web/components/UpdateOs/Status.vue

@@ -25,7 +25,11 @@ const updateOsActionsStore = useUpdateOsActionsStore();
 
 const { guid, keyfile, osVersion } = storeToRefs(serverStore);
 const { available, parsedReleaseTimestamp } = storeToRefs(updateOsStore);
-const { rebootType } = storeToRefs(updateOsActionsStore);
+const { rebootType, rebootTypeText } = storeToRefs(updateOsActionsStore);
+
+watchEffect(() => {
+  console.debug('[rebootType]', rebootType.value, rebootTypeText.value);
+});
 </script>
 
 <template>
@@ -64,7 +68,7 @@ const { rebootType } = storeToRefs(updateOsActionsStore);
           :color="'yellow'"
           :icon="ExclamationTriangleIcon"
         >
-          {{ rebootType === 'downgrade' ? t('Reboot Required for Downgrade') : t('Reboot Required for Update') }}
+          {{ t(rebootTypeText) }}
         </UiBadge>
       </div>
 
@@ -73,7 +77,7 @@ const { rebootType } = storeToRefs(updateOsActionsStore);
           v-if="rebootType === ''"
           :t="t" />
         <BrandButton
-          v-else
+          v-else-if="rebootType === 'downgrade' || rebootType === 'upgrade'"
           @click="updateOsActionsStore.rebootServer()"
           :icon="ArrowPathIcon"
           :text="rebootType === 'downgrade' ? t('Reboot Now to Downgrade') : t('Reboot Now to Update')" />

web/components/UpdateOs/ThirdPartyDrivers.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { ExclamationTriangleIcon } from '@heroicons/vue/24/solid';
+import { storeToRefs } from 'pinia';
+
+import { useUpdateOsActionsStore } from '~/store/updateOsActions';
+
+defineProps<{
+  t: any;
+}>();
+
+const { rebootTypeText } = storeToRefs(useUpdateOsActionsStore());
+</script>
+
+<template>
+  <UiCardWrapper :increased-padding="true">
+    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-20px sm:gap-24px">
+      <div class="grid gap-y-16px">
+        <h3 class="text-20px font-semibold leading-normal flex flex-row items-center gap-8px">
+          <ExclamationTriangleIcon class="w-20px shrink-0" />
+          {{ t(rebootTypeText) }}
+        </h3>
+        <div class="text-16px leading-relaxed opacity-75 whitespace-normal">
+          <p>{{ t('During the Unraid OS update process third-party drivers were detected and are currently being updated in the background. Please wait for those to finish downloading before rebooting your server to complete the update process. You should receive a system notification when complete. You may also refresh this page to check for an updated status.') }}</p>
+        </div>
+      </div>
+    </div>
+  </UiCardWrapper>
+</template>

web/locales/en_US.json

@@ -234,6 +234,7 @@
   "Reboot Now to Update": "Reboot Now to Update",
   "Reboot Required for Downgrade": "Reboot Required for Downgrade",
   "Reboot Required for Update": "Reboot Required for Update",
+  "Updating 3rd party drivers": "Updating 3rd party drivers",
   "Update Available": "Update Available",
   "Up-to-date": "Up-to-date",
   "Open a bug report": "Open a bug report",

web/scripts/deploy-dev.sh

@@ -23,7 +23,7 @@ fi
 echo "$server_name" > "$state_file"
 
 # Replace the value inside the rsync command with the user's input
-rsync_command="rsync -avz -e ssh .nuxt/nuxt-custom-elements/dist/unraid-components root@${server_name}.local:/usr/local/emhttp/plugins/dynamix.my.servers"
+rsync_command="rsync -avz -e ssh .nuxt/nuxt-custom-elements/dist/unraid-components root@${server_name}:/usr/local/emhttp/plugins/dynamix.my.servers"
 
 echo "Executing the following command:"
 echo "$rsync_command"

web/store/updateOsActions.ts

@@ -34,9 +34,22 @@ export const useUpdateOsActionsStore = defineStore('updateOsActions', () => {
   // State
   const osVersion = computed(() => serverStore.osVersion);
   /** used when coming back from callback, this will be the release to install */
-  const rebootType = ref<'downgrade' | 'upgrade' | ''>('');
   const status = ref<'confirming' | 'checking' | 'ineligible' | 'failed' | 'ready' | 'success' | 'updating' | 'downgrading'>('ready');
   const callbackUpdateRelease = ref<Release | null>(null);
+  const rebootType = ref<'thirdPartyDriversDownloading' | 'downgrade' | 'upgrade' | ''>('');
+  const rebootTypeText = computed(() => {
+    /** translations are handled by rendering template's `t()` */
+    switch (rebootType.value) {
+      case 'thirdPartyDriversDownloading':
+        return 'Updating 3rd party drivers';
+      case 'downgrade':
+        return 'Reboot Required for Downgrade';
+      case 'upgrade':
+        return 'Reboot Required for Update'
+      default:
+        return '';
+    }
+  })
 
   // Actions
   const initUpdateOsCallback = (includeNextReleases: boolean = false): UserProfileLink => {
@@ -120,6 +133,7 @@ export const useUpdateOsActionsStore = defineStore('updateOsActions', () => {
     callbackUpdateRelease,
     osVersion,
     rebootType,
+    rebootTypeText,
     status,
     // Actions
     confirmUpdateOs,