fix: update RestoreVolumeBackups and ShowVolumeBackups components for improved functionality

- Refactored the RestoreVolumeBackups component to ensure the type prop is required and added serverId handling for better integration.
- Corrected variable naming for destinationId in the form handling to prevent potential issues.
- Enhanced the ShowVolumeBackups component to pass serverId to the RestoreVolumeBackups component, ensuring consistent data flow.
- Improved user interface elements for backup file selection, ensuring better usability and clarity.

apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx

@@ -47,35 +47,33 @@ import { formatBytes } from "../../database/backups/restore-backup";
 
 interface Props {
 	id: string;
-	type?: "application" | "compose" | "postgres" | "mariadb" | "mongo" | "mysql";
+	type: "application" | "compose";
 	serverId?: string;
 }
 
-const RestoreBackupSchema = z
-	.object({
-		destinationId: z
-			.string({
-				required_error: "Please select a destination",
-			})
-			.min(1, {
-				message: "Destination is required",
-			}),
-		backupFile: z
-			.string({
-				required_error: "Please select a backup file",
-			})
-			.min(1, {
-				message: "Backup file is required",
-			}),
-		volumeName: z
-			.string({
-				required_error: "Please enter a volume name",
-			})
-			.min(1, {
-				message: "Volume name is required",
-			}),
-	})
-	.superRefine((data, ctx) => {});
+const RestoreBackupSchema = z.object({
+	destinationId: z
+		.string({
+			required_error: "Please select a destination",
+		})
+		.min(1, {
+			message: "Destination is required",
+		}),
+	backupFile: z
+		.string({
+			required_error: "Please select a backup file",
+		})
+		.min(1, {
+			message: "Backup file is required",
+		}),
+	volumeName: z
+		.string({
+			required_error: "Please enter a volume name",
+		})
+		.min(1, {
+			message: "Volume name is required",
+		}),
+});
 
 export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
@@ -93,8 +91,9 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 		resolver: zodResolver(RestoreBackupSchema),
 	});
 
-	const destionationId = form.watch("destinationId");
+	const destinationId = form.watch("destinationId");
 	const volumeName = form.watch("volumeName");
+	const backupFile = form.watch("backupFile");
 
 	const debouncedSetSearch = debounce((value: string) => {
 		setDebouncedSearchTerm(value);
@@ -107,12 +106,12 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 
 	const { data: files = [], isLoading } = api.backup.listBackupFiles.useQuery(
 		{
-			destinationId: destionationId,
+			destinationId: destinationId,
 			search: debouncedSearchTerm,
 			serverId: serverId ?? "",
 		},
 		{
-			enabled: isOpen && !!destionationId,
+			enabled: isOpen && !!destinationId,
 		},
 	);
 
@@ -122,9 +121,12 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 
 	api.volumeBackups.restoreVolumeBackupWithLogs.useSubscription(
 		{
-			volumeBackupId: id,
-			destinationId: form.watch("destinationId"),
-			volumeName: volumeName,
+			id,
+			serviceType: type,
+			serverId,
+			destinationId,
+			volumeName,
+			backupFileName: backupFile,
 		},
 		{
 			enabled: isDeploying,
@@ -146,7 +148,7 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 		},
 	);
 
-	const onSubmit = async (data: z.infer<typeof RestoreBackupSchema>) => {
+	const onSubmit = async () => {
 		setIsDeploying(true);
 	};
 
@@ -246,10 +248,10 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 							name="backupFile"
 							render={({ field }) => (
 								<FormItem className="">
-									<FormLabel className="flex items-center justify-between">
+									<FormLabel className="flex items-center">
 										Search Backup Files
 										{field.value && (
-											<Badge variant="outline">
+											<Badge variant="outline" className="truncate w-52">
 												{field.value}
 												<Copy
 													className="ml-2 size-4 cursor-pointer"
@@ -273,7 +275,9 @@ export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{field.value || "Search and select a backup file"}
+													<span className="truncate text-left flex-1 w-52">
+														{field.value || "Search and select a backup file"}
+													</span>
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>

apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx

@@ -29,10 +29,15 @@ import { RestoreVolumeBackups } from "./restore-volume-backups";
 
 interface Props {
 	id: string;
-	type?: "application" | "compose" | "postgres" | "mariadb" | "mongo" | "mysql";
+	type?: "application" | "compose";
+	serverId?: string;
 }
 
-export const ShowVolumeBackups = ({ id, type = "application" }: Props) => {
+export const ShowVolumeBackups = ({
+	id,
+	type = "application",
+	serverId,
+}: Props) => {
 	const {
 		data: volumeBackups,
 		isLoading: isLoadingVolumeBackups,
@@ -74,7 +79,7 @@ export const ShowVolumeBackups = ({ id, type = "application" }: Props) => {
 							<HandleVolumeBackups id={id} volumeBackupType={type} />
 						)}
 						<div className="flex items-center gap-2">
-							<RestoreVolumeBackups id={id} type={type} />
+							<RestoreVolumeBackups id={id} type={type} serverId={serverId} />
 						</div>
 					</div>
 				</div>
@@ -228,7 +233,7 @@ export const ShowVolumeBackups = ({ id, type = "application" }: Props) => {
 						</p>
 						<div className="flex items-center gap-2">
 							<HandleVolumeBackups id={id} volumeBackupType={type} />
-							<RestoreVolumeBackups id={id} type={type} />
+							<RestoreVolumeBackups id={id} type={type} serverId={serverId} />
 						</div>
 					</div>
 				)}

apps/dokploy/components/dashboard/database/backups/restore-backup.tsx

@@ -415,7 +415,7 @@ export const RestoreBackup = ({
 									<FormLabel className="flex items-center justify-between">
 										Search Backup Files
 										{field.value && (
-											<Badge variant="outline">
+											<Badge variant="outline" className="truncate">
 												{field.value}
 												<Copy
 													className="ml-2 size-4 cursor-pointer"
@@ -439,7 +439,9 @@ export const RestoreBackup = ({
 														!field.value && "text-muted-foreground",
 													)}
 												>
-													{field.value || "Search and select a backup file"}
+													<span className="truncate text-left flex-1 w-52">
+														{field.value || "Search and select a backup file"}
+													</span>
 													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 												</Button>
 											</FormControl>