mirror of
https://github.com/unraid/api.git
synced 2026-04-27 18:51:05 -05:00
Michael Datelle
32c6fe6295
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Refactor** - Improved component tests by integrating Pinia's testing utilities for more reliable store mocking and state management. - Updated test setup to streamline plugin usage and remove unnecessary configuration. - Enhanced test clarity by relying on store state changes and Vue's reactivity instead of manual mock updates. - Simplified test cases by focusing on passed props and standardized store mocking. - **Chores** - Updated test directory structure for better organization. - Added additional test mocks for dependencies. - **New Features** - Added comprehensive tests for the ColorSwitcher component, verifying UI elements and theme store interactions. - Introduced tests for the DevSettings component, confirming UI rendering and interaction behavior. - Added detailed tests for the DowngradeOs component covering store interactions and conditional UI rendering. - Added new test suites for DummyServerSwitcher component, ensuring correct rendering and reactive state updates. - Added new test suites for HeaderOsVersion component, validating version badge rendering and error state handling. - Added new test suite for the I18nHost component, validating internationalization context provisioning and error handling. - Added a comprehensive test suite for the Modal component, covering UI behavior, styling, and event handling. - Added new test suite for the Registration component, verifying rendering based on server state. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: mdatelle <mike@datelle.net>
110 lines
3.1 KiB
Vue
110 lines
3.1 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
import { BellAlertIcon, ExclamationTriangleIcon, InformationCircleIcon } from '@heroicons/vue/24/solid';
|
|
import { Badge } from '@unraid/ui';
|
|
import { getReleaseNotesUrl, WEBGUI_TOOLS_DOWNGRADE, WEBGUI_TOOLS_UPDATE } from '~/helpers/urls';
|
|
|
|
import { useServerStore } from '~/store/server';
|
|
import { useUpdateOsStore } from '~/store/updateOs';
|
|
import { useUpdateOsActionsStore } from '~/store/updateOsActions';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const serverStore = useServerStore();
|
|
const updateOsStore = useUpdateOsStore();
|
|
const updateOsActionsStore = useUpdateOsActionsStore();
|
|
|
|
const { osVersion, rebootType, stateDataError } = storeToRefs(serverStore);
|
|
const { available, availableWithRenewal } = storeToRefs(updateOsStore);
|
|
const { rebootTypeText } = storeToRefs(updateOsActionsStore);
|
|
|
|
const updateOsStatus = computed(() => {
|
|
if (stateDataError.value) {
|
|
// only allowed to update when server is does not have a state error
|
|
return null;
|
|
}
|
|
|
|
if (rebootTypeText.value) {
|
|
return {
|
|
badge: {
|
|
color: 'yellow',
|
|
icon: ExclamationTriangleIcon,
|
|
},
|
|
href:
|
|
rebootType.value === 'downgrade'
|
|
? WEBGUI_TOOLS_DOWNGRADE.toString()
|
|
: WEBGUI_TOOLS_UPDATE.toString(),
|
|
text: t(rebootTypeText.value),
|
|
};
|
|
}
|
|
|
|
if (availableWithRenewal.value || available.value) {
|
|
return {
|
|
badge: {
|
|
color: 'orange',
|
|
icon: BellAlertIcon,
|
|
},
|
|
click: () => {
|
|
updateOsStore.setModalOpen(true);
|
|
},
|
|
text: availableWithRenewal.value ? t('Update Released') : t('Update Available'),
|
|
title: availableWithRenewal.value
|
|
? t('Unraid OS {0} Released', [availableWithRenewal.value])
|
|
: t('Unraid OS {0} Update Available', [available.value]),
|
|
};
|
|
}
|
|
|
|
return null;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-row justify-start gap-x-4px">
|
|
<a
|
|
class="group leading-none"
|
|
:title="t('View release notes')"
|
|
:href="getReleaseNotesUrl(osVersion).toString()"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
<Badge
|
|
variant="custom"
|
|
:icon="InformationCircleIcon"
|
|
icon-styles="text-header-text-secondary"
|
|
size="sm"
|
|
class="text-header-text-secondary group-hover:text-orange-dark group-focus:text-orange-dark group-hover:underline group-focus:underline"
|
|
>
|
|
{{ osVersion }}
|
|
</Badge>
|
|
</a>
|
|
<component
|
|
:is="updateOsStatus.href ? 'a' : 'button'"
|
|
v-if="updateOsStatus"
|
|
:href="updateOsStatus.href ?? undefined"
|
|
:title="updateOsStatus.title ?? undefined"
|
|
class="group"
|
|
@click="updateOsStatus.click?.()"
|
|
>
|
|
<Badge
|
|
v-if="updateOsStatus.badge"
|
|
:color="updateOsStatus.badge.color"
|
|
:icon="updateOsStatus.badge.icon"
|
|
size="xs"
|
|
>
|
|
{{ updateOsStatus.text }}
|
|
</Badge>
|
|
<template v-else>
|
|
{{ updateOsStatus.text }}
|
|
</template>
|
|
</component>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="postcss">
|
|
/* Import unraid-ui globals first */
|
|
@import '@unraid/ui/styles';
|
|
</style>
|