feat: qa improvements for backups page (#4857)

* feat: fix backup action disabling logic

* feat: allow actions when backup is being created

* feat: qa fixes

* feat: backups empty state

* fix: lint

* intl:extract

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

packages/ui/src/components/servers/backups/BackupItem.vue

@@ -4,11 +4,11 @@ import {
 	ClockIcon,
 	DownloadIcon,
 	EditIcon,
-	LockIcon,
-	LockOpenIcon,
+	// LockIcon,
+	// LockOpenIcon,
 	MoreVerticalIcon,
 	RotateCounterClockwiseIcon,
-	ShieldIcon,
+	// ShieldIcon,
 	TrashIcon,
 	UserRoundIcon,
 	XIcon,
@@ -25,7 +25,8 @@ import ProgressBar from '../../base/ProgressBar.vue'
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{
-	(e: 'download' | 'rename' | 'restore' | 'lock' | 'retry'): void
+	// TODO: Re-add 'lock' when lock functionality is implemented
+	(e: 'download' | 'rename' | 'restore' | 'retry'): void
 	(e: 'delete', skipConfirmation?: boolean): void
 }>()
 
@@ -36,14 +37,14 @@ const props = withDefaults(
 		kyrosUrl?: string
 		jwt?: string
 		showDebugInfo?: boolean
-		disabled?: string
+		restoreDisabled?: string
 	}>(),
 	{
 		preview: false,
 		kyrosUrl: undefined,
 		jwt: undefined,
 		showDebugInfo: false,
-		disabled: undefined,
+		restoreDisabled: undefined,
 	},
 )
 
@@ -93,7 +94,9 @@ const failedToRestore = computed(() => props.backup.task?.restore?.state === 'fa
 
 const backupIcon = computed(() => {
 	if (props.backup.automated) {
-		return props.backup.locked ? ShieldIcon : ClockIcon
+		// TODO: Re-add locked icon when lock functionality is implemented
+		// return props.backup.locked ? ShieldIcon : ClockIcon
+		return ClockIcon
 	}
 	return UserRoundIcon
 })
@@ -112,7 +115,8 @@ const overflowMenuOptions = computed<OverflowOption[]>(() => {
 	}
 
 	options.push({ id: 'rename', action: () => emit('rename') })
-	options.push({ id: 'lock', action: () => emit('lock') })
+	// TODO: Re-add when lock functionality is implemented
+	// options.push({ id: 'lock', action: () => emit('lock') })
 
 	// Delete only available when not creating (has separate Cancel button)
 	if (!creating.value) {
@@ -121,7 +125,6 @@ const overflowMenuOptions = computed<OverflowOption[]>(() => {
 			id: 'delete',
 			color: 'red',
 			action: () => emit('delete'),
-			disabled: !!props.disabled,
 		})
 	}
 
@@ -136,18 +139,19 @@ const overflowMenuOptions = computed<OverflowOption[]>(() => {
 // }
 
 const messages = defineMessages({
-	locked: {
-		id: 'servers.backups.item.locked',
-		defaultMessage: 'Locked',
-	},
-	lock: {
-		id: 'servers.backups.item.lock',
-		defaultMessage: 'Lock',
-	},
-	unlock: {
-		id: 'servers.backups.item.unlock',
-		defaultMessage: 'Unlock',
-	},
+	// TODO: Re-add when lock functionality is implemented
+	// locked: {
+	// 	id: 'servers.backups.item.locked',
+	// 	defaultMessage: 'Locked',
+	// },
+	// lock: {
+	// 	id: 'servers.backups.item.lock',
+	// 	defaultMessage: 'Lock',
+	// },
+	// unlock: {
+	// 	id: 'servers.backups.item.unlock',
+	// 	defaultMessage: 'Unlock',
+	// },
 	restore: {
 		id: 'servers.backups.item.restore',
 		defaultMessage: 'Restore',
@@ -219,9 +223,10 @@ const messages = defineMessages({
 					>
 						{{ formatMessage(messages.auto) }}
 					</span>
-					<span v-if="backup.locked" class="flex items-center gap-1 text-sm text-secondary">
+					<!-- TODO: Re-add when lock functionality is implemented -->
+					<!-- <span v-if="backup.locked" class="flex items-center gap-1 text-sm text-secondary">
 						<LockIcon class="size-4" />
-					</span>
+					</span> -->
 				</div>
 				<div class="flex items-center gap-1.5 text-sm text-secondary">
 					<template v-if="failedToCreate || failedToRestore">
@@ -312,21 +317,22 @@ const messages = defineMessages({
 						<template #rename>
 							<EditIcon class="size-5" /> {{ formatMessage(messages.rename) }}
 						</template>
-						<template v-if="backup.locked" #lock>
+						<!-- TODO: Re-add when lock functionality is implemented -->
+						<!-- <template v-if="backup.locked" #lock>
 							<LockOpenIcon class="size-5" /> {{ formatMessage(messages.unlock) }}
 						</template>
 						<template v-else #lock>
 							<LockIcon class="size-5" /> {{ formatMessage(messages.lock) }}
-						</template>
+						</template> -->
 					</OverflowMenu>
 				</ButtonStyled>
 			</template>
 			<template v-else>
 				<ButtonStyled color="brand" type="outlined">
 					<button
-						v-tooltip="props.disabled"
+						v-tooltip="props.restoreDisabled"
 						class="!border-[1px]"
-						:disabled="!!props.disabled"
+						:disabled="!!props.restoreDisabled"
 						@click="() => emit('restore')"
 					>
 						<RotateCounterClockwiseIcon class="size-5" />
@@ -342,12 +348,13 @@ const messages = defineMessages({
 						<template #rename>
 							<EditIcon class="size-5" /> {{ formatMessage(messages.rename) }}
 						</template>
-						<template v-if="backup.locked" #lock>
+						<!-- TODO: Re-add when lock functionality is implemented -->
+						<!-- <template v-if="backup.locked" #lock>
 							<LockOpenIcon class="size-5" /> {{ formatMessage(messages.unlock) }}
 						</template>
 						<template v-else #lock>
 							<LockIcon class="size-5" /> {{ formatMessage(messages.lock) }}
-						</template>
+						</template> -->
 						<template #delete>
 							<TrashIcon class="size-5" /> {{ formatMessage(commonMessages.deleteLabel) }}
 						</template>

packages/ui/src/components/servers/backups/BackupRestoreModal.vue

@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" header="Restore backup" fade="warning">
+	<NewModal ref="modal" header="Restore backup" fade="danger">
 		<div class="flex flex-col gap-6 max-w-[600px]">
 			<Admonition v-if="ctx.isServerRunning.value" type="critical" header="Server is running">
 				Stop the server before restoring a backup.