refactor(web): os status

web/components/UpdateOs/CheckButton.vue

@@ -13,7 +13,7 @@ import 'tailwindcss/tailwind.css';
 import '~/assets/main.css';
 
 import { useServerStore } from '~/store/server';
-import { useUpdateOsStore } from '~/store/updateOsActions';
+import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
 
 const props = defineProps<{
   t: any;
@@ -21,14 +21,14 @@ const props = defineProps<{
 
 const serverStore = useServerStore();
 const updateOsStore = useUpdateOsStore();
+const updateOsActionsStore = useUpdateOsActionsStore();
 
 const { guid, keyfile, osVersion } = storeToRefs(serverStore);
 const { isOsVersionStable, parsedReleaseTimestamp } = storeToRefs(updateOsStore);
+const { status } = storeToRefs(updateOsActionsStore);
 
 const includeNext = ref(isOsVersionStable.value ?? false);
 
-const status = ref<'ready' | 'checking' | 'ineligible'>('ready');
-
 const buttonText = computed(() => {
   if (status.value === 'checking') {
     return props.t('Checking...');
@@ -37,11 +37,7 @@ const buttonText = computed(() => {
 });
 
 const check = async () => {
-  if (status.value === 'ineligible') {
-    return;
-  }
-
-  status.value = 'checking';
+  updateOsActionsStore.setStatus('checking');
 
   await updateOsStore.checkForUpdate({
     cache: true,
@@ -51,21 +47,21 @@ const check = async () => {
     osVersion: osVersion.value,
     skipCache: true,
   }).finally(() => {
-    status.value = 'ready';
+    updateOsActionsStore.setStatus('ready');
   })
 };
 
 watchEffect(() => {
   if (!guid.value || !keyfile.value) {
-    status.value = 'ineligible';
+    updateOsActionsStore.setStatus('ineligible');
   } else {
-    status.value = 'ready';
+    updateOsActionsStore.setStatus('ready');
   }
 });
 </script>
 
 <template>
-  <div v-if="status !== 'ineligible'" class="flex flex-col sm:flex-shrink-0 items-center gap-16px">
+  <div class="flex flex-col sm:flex-shrink-0 sm:flex-grow-0 items-center gap-16px">
     <SwitchGroup as="div">
       <div class="flex flex-shrink-0 items-center gap-16px">
         <Switch
@@ -111,7 +107,7 @@ watchEffect(() => {
     <span class="flex flex-col gap-y-8px">
       <BrandButton
         @click="check"
-        :disabled="status !== 'ready'"
+        :disabled="status === 'checking'"
         btn-style="outline"
         :text="buttonText"
         class="flex-0" />

web/components/UpdateOs/Status.vue

@@ -13,6 +13,8 @@ import useDateTimeHelper from '~/composables/dateTime';
 import { useServerStore } from '~/store/server';
 import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
 
+import BrandLoadingWhite from '~/components/Brand/LoadingWhite.vue';
+
 export interface Props {
   restoreVersion?: string | undefined;
   showUpdateCheck?: boolean;
@@ -31,7 +33,7 @@ const updateOsActionsStore = useUpdateOsActionsStore();
 
 const { dateTimeFormat, osVersion, regExp, regUpdatesExpired } = storeToRefs(serverStore);
 const { available, availableWithRenewal, parsedReleaseTimestamp } = storeToRefs(updateOsStore);
-const { ineligibleText, rebootType, rebootTypeText } = storeToRefs(updateOsActionsStore);
+const { ineligibleText, rebootType, rebootTypeText, status } = storeToRefs(updateOsActionsStore);
 
 const {
   outputDateTimeReadableDiff: readableDiffRegExp,
@@ -92,10 +94,18 @@ const regExpOutput = computed(() => {
           {{ t('Key ineligible for {0}', [availableWithRenewal]) }}
         </UiBadge>
 
+
         <UiBadge
-          v-if="rebootType === ''"
-          :color="available ? 'orange' : 'green'"
-          :icon="available ? BellAlertIcon : CheckCircleIcon"
+          v-if="status === 'checking'"
+          :color="'orange'"
+          :icon="BrandLoadingWhite"
+        >
+          {{ t('Checking...') }}
+        </UiBadge>
+        <UiBadge
+          v-else-if="rebootType === ''"
+          :color="available || availableWithRenewal ? 'orange' : 'green'"
+          :icon="available || availableWithRenewal ? BellAlertIcon : CheckCircleIcon"
           :title="parsedReleaseTimestamp ? t('Last checked: {0}', [parsedReleaseTimestamp.relative]) : ''"
         >
           {{ (available
@@ -106,7 +116,7 @@ const regExpOutput = computed(() => {
           }}
         </UiBadge>
         <UiBadge
-          v-else
+          v-else-if="rebootType !== ''"
           :color="'yellow'"
           :icon="ExclamationTriangleIcon"
         >