mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-04 23:50:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor(onboarding): replace UButton with Button component for consistency

Browse Source 
- Updated `OnboardingAdminPanel` and `OnboardingTestHarness` components to use the new `Button` component from `@unraid/ui` instead of the deprecated `UButton`.
- Adjusted button properties to align with the new component's API, including changes to color and variant attributes.
- This refactor enhances consistency across the onboarding UI components and improves maintainability.
This commit is contained in:
Eli Bosley
2025-12-25 08:39:44 -05:00
parent ae8c8a46e2
commit fa2ee15742
2 changed files with 20 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/components/Activation/OnboardingAdminPanel.standalone.vue
View File

@@ -3,6 +3,7 @@ import { computed, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useApolloClient } from '@vue/apollo-composable';
import { Button } from '@unraid/ui';
import { parse } from 'graphql';
import { DEFAULT_ACTIVATION_STEPS } from '~/components/Activation/onboardingTestDefaults';
@@ -153,15 +154,14 @@ const resetOnboarding = async () => {
Review the current onboarding state and reset progress if needed.
</p>
</div>
<UButton
color="error"
variant="solid"
<Button
variant="destructive"
size="sm"
:loading="resetStatus === 'loading'"
:disabled="resetStatus === 'loading'"
@click="resetOnboarding"
>
Reset Onboarding
</UButton>
</Button>
</div>
</template>

39
web/src/components/Activation/OnboardingTestHarness.standalone.vue
View File

@@ -3,6 +3,7 @@ import { computed, onMounted, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useApolloClient } from '@vue/apollo-composable';
import { Button } from '@unraid/ui';
import { parse } from 'graphql';
import { DEFAULT_ACTIVATION_STEPS } from '~/components/Activation/onboardingTestDefaults';
@@ -471,13 +472,9 @@ onMounted(() => {
class="mt-4"
/>
<div class="mt-4 flex flex-wrap gap-2">
<UButton color="primary" size="sm" @click="applyOverrides">Apply Overrides</UButton>
<UButton color="neutral" variant="outline" size="sm" @click="loadDraftFromOverrides">
Reload
</UButton>
<UButton color="error" variant="outline" size="sm" @click="clearOverrides">
Clear Overrides
</UButton>
<Button variant="primary" size="sm" @click="applyOverrides">Apply Overrides</Button>
<Button variant="outline" size="sm" @click="loadDraftFromOverrides"> Reload </Button>
<Button variant="destructive" size="sm" @click="clearOverrides"> Clear Overrides </Button>
</div>
</UCard>
@@ -495,9 +492,7 @@ onMounted(() => {
placeholder="Select a preset"
/>
</UFormField>
<UButton color="neutral" variant="outline" size="sm" class="mt-3" @click="applyPreset">
Load preset
</UButton>
<Button variant="outline" size="sm" class="mt-3" @click="applyPreset"> Load preset </Button>
</UCard>
<UCard>
@@ -505,21 +500,17 @@ onMounted(() => {
<div class="font-medium">Modal Actions</div>
</template>
<div class="flex flex-col gap-2">
<UButton color="primary" variant="soft" size="sm" @click="showActivationModal">
<Button variant="primary" size="sm" @click="showActivationModal">
Show Activation Modal
</UButton>
<UButton color="neutral" variant="outline" size="sm" @click="resetActivationModal">
</Button>
<Button variant="outline" size="sm" @click="resetActivationModal">
Reset Activation Modal
</UButton>
<UButton color="neutral" variant="outline" size="sm" @click="hideActivationModal">
</Button>
<Button variant="outline" size="sm" @click="hideActivationModal">
Hide Activation Modal
</UButton>
<UButton color="primary" variant="soft" size="sm" @click="showWelcomeModal">
Show Welcome Modal
</UButton>
<UButton color="neutral" variant="outline" size="sm" @click="hideWelcomeModal">
Hide Welcome Modal
</UButton>
</Button>
<Button variant="primary" size="sm" @click="showWelcomeModal"> Show Welcome Modal </Button>
<Button variant="outline" size="sm" @click="hideWelcomeModal"> Hide Welcome Modal </Button>
</div>
</UCard>
@@ -527,9 +518,9 @@ onMounted(() => {
<template #header>
<div class="font-medium">Data Actions</div>
</template>
<UButton color="neutral" variant="outline" size="sm" @click="refetchOnboarding">
<Button variant="outline" size="sm" @click="refetchOnboarding">
Refetch Onboarding Query
</UButton>
</Button>
</UCard>
<UAlert