mirror of
https://github.com/nicotsx/ironmount.git
synced 2025-12-10 12:10:51 +01:00
feat: repositories frontend
This commit is contained in:
Nicolas Meienberger
@@ -33,13 +33,12 @@ export function AppSidebar() {
|
||||
return (
|
||||
<Sidebar variant="inset" collapsible="icon" className="p-0">
|
||||
<SidebarHeader className="bg-card-header border-b border-border/50 hidden md:flex h-[65px] flex-row items-center p-4">
|
||||
<Link to="/volumes" className="flex items-center gap-3 font-semibold">
|
||||
<Mountain className="size-5 text-strong-accent ml-[6px]" />
|
||||
<Link to="/volumes" className="flex items-center gap-3 font-semibold pl-2">
|
||||
<Mountain className="size-5 text-strong-accent" />
|
||||
<span
|
||||
className={cn(
|
||||
"text-base transition-opacity duration-200",
|
||||
state === "collapsed" && "opacity-0 w-0 overflow-hidden",
|
||||
)}
|
||||
className={cn("text-base transition-all duration-200", {
|
||||
"opacity-0 w-0 overflow-hidden ": state === "collapsed",
|
||||
})}
|
||||
>
|
||||
Ironmount
|
||||
</span>
|
||||
|
||||
66
apps/client/app/components/create-repository-dialog.tsx
Normal file
66
apps/client/app/components/create-repository-dialog.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { Database } from "lucide-react";
|
||||
import { useId } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { createRepositoryMutation } from "~/api-client/@tanstack/react-query.gen";
|
||||
import { parseError } from "~/lib/errors";
|
||||
import { CreateRepositoryForm } from "./create-repository-form";
|
||||
import { Button } from "./ui/button";
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
|
||||
import { ScrollArea } from "./ui/scroll-area";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export const CreateRepositoryDialog = ({ open, setOpen }: Props) => {
|
||||
const formId = useId();
|
||||
|
||||
const create = useMutation({
|
||||
...createRepositoryMutation(),
|
||||
onSuccess: () => {
|
||||
toast.success("Repository created successfully");
|
||||
setOpen(false);
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error("Failed to create repository", {
|
||||
description: parseError(error)?.message,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Database size={16} className="mr-2" />
|
||||
Create Repository
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<ScrollArea className="h-[500px] p-4">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create repository</DialogTitle>
|
||||
</DialogHeader>
|
||||
<CreateRepositoryForm
|
||||
className="mt-4"
|
||||
mode="create"
|
||||
formId={formId}
|
||||
onSubmit={(values) => {
|
||||
create.mutate({ body: { config: values, name: values.name, compressionMode: values.compressionMode } });
|
||||
}}
|
||||
/>
|
||||
<DialogFooter className="mt-4">
|
||||
<Button type="button" variant="secondary" onClick={() => setOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" form={formId} disabled={create.isPending}>
|
||||
Create
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</ScrollArea>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
223
apps/client/app/components/create-repository-form.tsx
Normal file
223
apps/client/app/components/create-repository-form.tsx
Normal file
@@ -0,0 +1,223 @@
|
||||
import { arktypeResolver } from "@hookform/resolvers/arktype";
|
||||
import { COMPRESSION_MODES, repositoryConfigSchema } from "@ironmount/schemas/restic";
|
||||
import { type } from "arktype";
|
||||
import { useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { cn, slugify } from "~/lib/utils";
|
||||
import { deepClean } from "~/utils/object";
|
||||
import { Button } from "./ui/button";
|
||||
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
|
||||
import { Input } from "./ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
|
||||
|
||||
export const formSchema = type({
|
||||
name: "2<=string<=32",
|
||||
compressionMode: type.valueOf(COMPRESSION_MODES).optional(),
|
||||
}).and(repositoryConfigSchema);
|
||||
const cleanSchema = type.pipe((d) => formSchema(deepClean(d)));
|
||||
|
||||
export type FormValues = typeof formSchema.inferIn;
|
||||
|
||||
type Props = {
|
||||
onSubmit: (values: FormValues) => void;
|
||||
mode?: "create" | "update";
|
||||
initialValues?: Partial<FormValues>;
|
||||
formId?: string;
|
||||
loading?: boolean;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const defaultValuesForType = {
|
||||
local: { backend: "local" as const, compressionMode: "auto" as const },
|
||||
s3: { backend: "s3" as const, compressionMode: "auto" as const },
|
||||
};
|
||||
|
||||
export const CreateRepositoryForm = ({
|
||||
onSubmit,
|
||||
mode = "create",
|
||||
initialValues,
|
||||
formId,
|
||||
loading,
|
||||
className,
|
||||
}: Props) => {
|
||||
const form = useForm<FormValues>({
|
||||
resolver: arktypeResolver(cleanSchema as unknown as typeof formSchema),
|
||||
defaultValues: initialValues,
|
||||
resetOptions: {
|
||||
keepDefaultValues: true,
|
||||
keepDirtyValues: false,
|
||||
},
|
||||
});
|
||||
|
||||
const { watch } = form;
|
||||
|
||||
const watchedBackend = watch("backend");
|
||||
const watchedName = watch("name");
|
||||
|
||||
useEffect(() => {
|
||||
if (watchedBackend && watchedBackend in defaultValuesForType) {
|
||||
form.reset({ name: watchedName, ...defaultValuesForType[watchedBackend as keyof typeof defaultValuesForType] });
|
||||
}
|
||||
}, [watchedBackend, watchedName, form]);
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form id={formId} onSubmit={form.handleSubmit(onSubmit)} className={cn("space-y-4", className)}>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="Repository name"
|
||||
onChange={(e) => field.onChange(slugify(e.target.value))}
|
||||
max={32}
|
||||
min={2}
|
||||
disabled={mode === "update"}
|
||||
className={mode === "update" ? "bg-gray-50" : ""}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>Unique identifier for the repository.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="backend"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Backend</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a backend" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="local">Local</SelectItem>
|
||||
<SelectItem value="s3">S3</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>Choose the storage backend for this repository.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="compressionMode"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Compression Mode</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select compression mode" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="off">Off</SelectItem>
|
||||
<SelectItem value="auto">Auto</SelectItem>
|
||||
<SelectItem value="fastest">Fastest</SelectItem>
|
||||
<SelectItem value="better">Better</SelectItem>
|
||||
<SelectItem value="max">Max</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>Compression mode for backups stored in this repository.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{watchedBackend === "local" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="path"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Path</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="/path/to/repository" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>Local filesystem path where the repository will be stored.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{watchedBackend === "s3" && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="endpoint"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Endpoint</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="s3.amazonaws.com" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>S3-compatible endpoint URL.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="bucket"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Bucket</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="my-backup-bucket" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>S3 bucket name for storing backups.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="accessKeyId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Access Key ID</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="AKIAIOSFODNN7EXAMPLE" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>S3 access key ID for authentication.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="secretAccessKey"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Secret Access Key</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder="••••••••" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>S3 secret access key for authentication.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{mode === "update" && (
|
||||
<Button type="submit" className="w-full" loading={loading}>
|
||||
Save Changes
|
||||
</Button>
|
||||
)}
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
18
apps/client/app/components/repository-icon.tsx
Normal file
18
apps/client/app/components/repository-icon.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import type { RepositoryBackend } from "@ironmount/schemas/restic";
|
||||
import { Database, HardDrive, Cloud } from "lucide-react";
|
||||
|
||||
type Props = {
|
||||
backend: RepositoryBackend;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const RepositoryIcon = ({ backend, className = "h-4 w-4" }: Props) => {
|
||||
switch (backend) {
|
||||
case "local":
|
||||
return <HardDrive className={className} />;
|
||||
case "s3":
|
||||
return <Cloud className={className} />;
|
||||
default:
|
||||
return <Database className={className} />;
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user