ondra/ironmount
1
1
Fork 0
mirror of https://github.com/nicotsx/ironmount.git synced 2025-12-10 12:10:51 +01:00
Code Issues Packages Projects Releases 1 Wiki Activity

refactor: improve error handling with global router catchall

Browse Source
This commit is contained in:
Nicolas Meienberger
2025-09-24 17:44:41 +02:00
parent db88bb6de2
commit 677db2f90f
16 changed files with 321 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/app/api-client/types.gen.ts
View File

@@ -13,6 +13,7 @@ export type ListVolumesResponses = {
*/
200: {
volumes: Array<{
autoRemount: boolean;
config:
| {
backend: "directory";
@@ -155,6 +156,7 @@ export type GetVolumeResponses = {
* Volume details
*/
200: {
autoRemount: boolean;
config:
| {
backend: "directory";

2
apps/client/app/components/create-volume-dialog.tsx
View File

@@ -41,7 +41,7 @@ export const CreateVolumeDialog = ({ open, setOpen }: Props) => {
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button className="bg-blue-900 hover:bg-blue-800">
<Plus size={16} />
<Plus size={16} className="mr-2" />
Create volume
</Button>
</DialogTrigger>

2
apps/client/app/components/create-volume-form.tsx
View File

@@ -30,6 +30,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
resolver: arktypeResolver(formSchema),
defaultValues: initialValues,
});
const { watch, getValues } = form;
const watchedBackend = watch("backend");
@@ -40,6 +41,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
const testBackendConnection = useMutation({
...testConnectionMutation(),
onMutate: () => {
setTestMessage("");
setTestStatus("loading");
},
onError: () => {

20
apps/client/app/components/ui/button.tsx
View File

@@ -1,5 +1,6 @@
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { Loader2 } from "lucide-react";
import type * as React from "react";
import { cn } from "~/lib/utils";
@@ -9,16 +10,13 @@ const buttonVariants = cva(
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
@@ -44,15 +42,19 @@ function Button({
}: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean;
}) {
} & { loading?: boolean }) {
const Comp = asChild ? Slot : "button";
return (
<Comp
disabled={props.loading}
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
className={cn(buttonVariants({ variant, size, className }), "transition-all")}
{...props}
/>
>
<Loader2 className={cn("h-4 w-4 animate-spin absolute", { invisible: !props.loading })} />
<div className={cn("flex items-center justify-center", { invisible: props.loading })}>{props.children}</div>
</Comp>
);
}

221
apps/client/app/components/ui/form.tsx
View File

@@ -1,165 +1,136 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
import { Slot } from "@radix-ui/react-slot";
import {
Controller,
FormProvider,
useFormContext,
useFormState,
type ControllerProps,
type FieldPath,
type FieldValues,
} from "react-hook-form"
Controller,
FormProvider,
useFormContext,
useFormState,
type ControllerProps,
type FieldPath,
type FieldValues,
} from "react-hook-form";
import { cn } from "~/lib/utils"
import { Label } from "~/components/ui/label"
import { cn } from "~/lib/utils";
import { Label } from "~/components/ui/label";
const Form = FormProvider
const Form = FormProvider;
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
name: TName
}
name: TName;
};
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue
)
const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
const FormField = <
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
...props
...props
}: ControllerProps<TFieldValues, TName>) => {
return (
<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
</FormFieldContext.Provider>
)
}
return (
<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
</FormFieldContext.Provider>
);
};
const useFormField = () => {
const fieldContext = React.useContext(FormFieldContext)
const itemContext = React.useContext(FormItemContext)
const { getFieldState } = useFormContext()
const formState = useFormState({ name: fieldContext.name })
const fieldState = getFieldState(fieldContext.name, formState)
const fieldContext = React.useContext(FormFieldContext);
const itemContext = React.useContext(FormItemContext);
const { getFieldState } = useFormContext();
const formState = useFormState({ name: fieldContext.name });
const fieldState = getFieldState(fieldContext.name, formState);
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>")
}
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>");
}
const { id } = itemContext
const { id } = itemContext;
return {
id,
name: fieldContext.name,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
}
}
return {
id,
name: fieldContext.name,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
};
};
type FormItemContextValue = {
id: string
}
id: string;
};
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue
)
const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
const id = React.useId()
const id = React.useId();
return (
<FormItemContext.Provider value={{ id }}>
<div
data-slot="form-item"
className={cn("grid gap-2", className)}
{...props}
/>
</FormItemContext.Provider>
)
return (
<FormItemContext.Provider value={{ id }}>
<div data-slot="form-item" className={cn("grid gap-2", className)} {...props} />
</FormItemContext.Provider>
);
}
function FormLabel({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
const { error, formItemId } = useFormField()
function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
const { error, formItemId } = useFormField();
return (
<Label
data-slot="form-label"
data-error={!!error}
className={cn("data-[error=true]:text-destructive", className)}
htmlFor={formItemId}
{...props}
/>
)
return (
<Label
data-slot="form-label"
data-error={!!error}
className={cn("data-[error=true]:text-destructive", className)}
htmlFor={formItemId}
{...props}
/>
);
}
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
return (
<Slot
data-slot="form-control"
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
}
aria-invalid={!!error}
{...props}
/>
)
return (
<Slot
data-slot="form-control"
id={formItemId}
aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
aria-invalid={!!error}
{...props}
/>
);
}
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
const { formDescriptionId } = useFormField()
const { formDescriptionId } = useFormField();
return (
<p
data-slot="form-description"
id={formDescriptionId}
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
)
return (
<p
data-slot="form-description"
id={formDescriptionId}
className={cn("text-muted-foreground text-xs", className)}
{...props}
/>
);
}
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message ?? "") : props.children
const { error, formMessageId } = useFormField();
const body = error ? String(error?.message ?? "") : props.children;
if (!body) {
return null
}
if (!body) {
return null;
}
return (
<p
data-slot="form-message"
id={formMessageId}
className={cn("text-destructive text-sm", className)}
{...props}
>
{body}
</p>
)
return (
<p data-slot="form-message" id={formMessageId} className={cn("text-destructive text-sm", className)} {...props}>
{body}
</p>
);
}
export {
useFormField,
Form,
FormItem,
FormLabel,
FormControl,
FormDescription,
FormMessage,
FormField,
}
export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

11
apps/client/app/modules/details/components/healthchecks-card.tsx
View File

@@ -21,10 +21,13 @@ export const HealthchecksCard = ({ volume }: Props) => {
<ScanHeartIcon size={24} />
<h2 className="text-lg font-medium">Health Checks</h2>
</span>
<span className="">Status: {volume.status ?? "Unknown"}</span>
<span className="text-sm text-muted-foreground mb-4">Checked {timeAgo || "never"}</span>
<span className="flex items-center">
Enable auto remount
{volume.lastError && <span className="text-md text-red-600 ">{volume.lastError}</span>}
{volume.status === "mounted" && <span className="text-md text-green-600">Healthy</span>}
{volume.status !== "unmounted" && (
<span className="text-xs text-muted-foreground mb-4">Checked {timeAgo || "never"}</span>
)}
<span className="flex items-center gap-2">
Remount on error
<Switch className="ml-auto cursor-pointer" checked={volume.autoRemount} />
</span>
</div>

21
apps/client/app/routes/details.tsx
View File

@@ -1,5 +1,4 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import { WifiIcon } from "lucide-react";
import { useNavigate, useParams } from "react-router";
import { toast } from "sonner";
import { getVolume } from "~/api-client";
@@ -88,7 +87,7 @@ export default function DetailsPage({ loaderData }: Route.ComponentProps) {
<>
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold mb-0 uppercase">Volume: {name}</h1>
<h1 className="text-3xl font-bold mb-0 uppercase">{name}</h1>
<div className="text-sm font-semibold mb-2 text-muted-foreground flex items-center gap-2">
<span className="flex items-center gap-2">
<StatusDot status={data.status} /> {data.status[0].toUpperCase() + data.status.slice(1)}
@@ -100,7 +99,7 @@ export default function DetailsPage({ loaderData }: Route.ComponentProps) {
<Button
variant="secondary"
onClick={() => mountVol.mutate({ path: { name } })}
disabled={mountVol.isPending}
loading={mountVol.isPending}
className={cn({ hidden: data.status === "mounted" })}
>
Mount
@@ -108,7 +107,7 @@ export default function DetailsPage({ loaderData }: Route.ComponentProps) {
<Button
variant="secondary"
onClick={() => unmountVol.mutate({ path: { name } })}
disabled={unmountVol.isPending}
loading={unmountVol.isPending}
className={cn({ hidden: data.status !== "mounted" })}
>
Unmount
@@ -118,16 +117,14 @@ export default function DetailsPage({ loaderData }: Route.ComponentProps) {
</Button>
</div>
</div>
<div className="flex gap-4">
<Card className="my-4 p-6 flex-1">
<div className="grid gap-4 grid-cols-1 lg:grid-cols-3 lg:grid-rows-[auto_1fr]">
<Card className="p-6 lg:col-span-2 lg:row-span-2">
<CreateVolumeForm initialValues={{ ...data, ...data?.config }} onSubmit={console.log} />
</Card>
<div className="flex flex-col my-4 gap-4">
<HealthchecksCard volume={data} />
<Card className="p-6 flex-1">
<h2 className="text-lg font-medium">Volume Information</h2>
</Card>
</div>
<HealthchecksCard volume={data} />
<Card className="p-6 h-full">
<h2 className="text-lg font-medium">Volume Information</h2>
</Card>
</div>
</>
);