refactor: dedicated edit page for notifications (#741)
This commit is contained in:
Nico
GitHub
parent
731ebad1ee
commit
95aadf6e73
6 changed files with 459 additions and 193 deletions
|
|
@ -145,72 +145,74 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
|
|||
onSubmit={form.handleSubmit(onSubmit, scrollToFirstError)}
|
||||
className={cn("space-y-4", className)}
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="My notification" max={32} min={2} />
|
||||
</FormControl>
|
||||
<FormDescription>Unique identifier for this notification destination.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="type"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Type</FormLabel>
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
field.onChange(value);
|
||||
if (!initialValues) {
|
||||
form.reset({
|
||||
name: form.getValues().name || "",
|
||||
...defaultValuesForType[value as keyof typeof defaultValuesForType],
|
||||
});
|
||||
}
|
||||
}}
|
||||
value={field.value ?? ""}
|
||||
disabled={mode === "update"}
|
||||
>
|
||||
<fieldset className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<SelectTrigger className={mode === "update" ? "bg-gray-50" : ""}>
|
||||
<SelectValue placeholder="Select notification type" />
|
||||
</SelectTrigger>
|
||||
<Input {...field} placeholder="My notification" max={32} min={2} />
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="email">Email (SMTP)</SelectItem>
|
||||
<SelectItem value="slack">Slack</SelectItem>
|
||||
<SelectItem value="discord">Discord</SelectItem>
|
||||
<SelectItem value="gotify">Gotify</SelectItem>
|
||||
<SelectItem value="ntfy">Ntfy</SelectItem>
|
||||
<SelectItem value="pushover">Pushover</SelectItem>
|
||||
<SelectItem value="telegram">Telegram</SelectItem>
|
||||
<SelectItem value="generic">Generic Webhook</SelectItem>
|
||||
<SelectItem value="custom">Custom (Shoutrrr URL)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>Choose the notification delivery method.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormDescription>Unique identifier for this notification destination.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{watchedType === "email" && <EmailForm form={form} />}
|
||||
{watchedType === "slack" && <SlackForm form={form} />}
|
||||
{watchedType === "discord" && <DiscordForm form={form} />}
|
||||
{watchedType === "gotify" && <GotifyForm form={form} />}
|
||||
{watchedType === "ntfy" && <NtfyForm form={form} />}
|
||||
{watchedType === "pushover" && <PushoverForm form={form} />}
|
||||
{watchedType === "telegram" && <TelegramForm form={form} />}
|
||||
{watchedType === "generic" && <GenericForm form={form} />}
|
||||
{watchedType === "custom" && <CustomForm form={form} />}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="type"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Type</FormLabel>
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
field.onChange(value);
|
||||
if (!initialValues) {
|
||||
form.reset({
|
||||
name: form.getValues().name || "",
|
||||
...defaultValuesForType[value as keyof typeof defaultValuesForType],
|
||||
});
|
||||
}
|
||||
}}
|
||||
value={field.value ?? ""}
|
||||
disabled={mode === "update"}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger className={mode === "update" ? "bg-gray-50" : ""}>
|
||||
<SelectValue placeholder="Select notification type" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="email">Email (SMTP)</SelectItem>
|
||||
<SelectItem value="slack">Slack</SelectItem>
|
||||
<SelectItem value="discord">Discord</SelectItem>
|
||||
<SelectItem value="gotify">Gotify</SelectItem>
|
||||
<SelectItem value="ntfy">Ntfy</SelectItem>
|
||||
<SelectItem value="pushover">Pushover</SelectItem>
|
||||
<SelectItem value="telegram">Telegram</SelectItem>
|
||||
<SelectItem value="generic">Generic Webhook</SelectItem>
|
||||
<SelectItem value="custom">Custom (Shoutrrr URL)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormDescription>Choose the notification delivery method.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{watchedType === "email" && <EmailForm form={form} />}
|
||||
{watchedType === "slack" && <SlackForm form={form} />}
|
||||
{watchedType === "discord" && <DiscordForm form={form} />}
|
||||
{watchedType === "gotify" && <GotifyForm form={form} />}
|
||||
{watchedType === "ntfy" && <NtfyForm form={form} />}
|
||||
{watchedType === "pushover" && <PushoverForm form={form} />}
|
||||
{watchedType === "telegram" && <TelegramForm form={form} />}
|
||||
{watchedType === "generic" && <GenericForm form={form} />}
|
||||
{watchedType === "custom" && <CustomForm form={form} />}
|
||||
</fieldset>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { useId } from "react";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { Bell, Save } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
getNotificationDestinationOptions,
|
||||
updateNotificationDestinationMutation,
|
||||
} from "~/client/api-client/@tanstack/react-query.gen";
|
||||
import { Alert, AlertDescription } from "~/client/components/ui/alert";
|
||||
import { Button } from "~/client/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
|
||||
import { parseError } from "~/client/lib/errors";
|
||||
import { CreateNotificationForm, type NotificationFormValues } from "../components/create-notification-form";
|
||||
|
||||
export function EditNotificationPage({ notificationId }: { notificationId: string }) {
|
||||
const navigate = useNavigate();
|
||||
const formId = useId();
|
||||
|
||||
const { data } = useSuspenseQuery({
|
||||
...getNotificationDestinationOptions({ path: { id: notificationId } }),
|
||||
});
|
||||
|
||||
const updateDestination = useMutation({
|
||||
...updateNotificationDestinationMutation(),
|
||||
onSuccess: () => {
|
||||
toast.success("Notification destination updated successfully");
|
||||
void navigate({ to: `/notifications/${data.id}` });
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error("Failed to update notification destination", {
|
||||
description: parseError(error)?.message,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = (values: NotificationFormValues) => {
|
||||
updateDestination.mutate({
|
||||
path: { id: String(data.id) },
|
||||
body: {
|
||||
name: values.name,
|
||||
config: values,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
||||
<Bell className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<CardTitle>Edit Notification Destination</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{updateDestination.isError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
<strong>Failed to update notification destination:</strong>
|
||||
<br />
|
||||
{parseError(updateDestination.error)?.message}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<CreateNotificationForm
|
||||
mode="update"
|
||||
formId={formId}
|
||||
onSubmit={handleSubmit}
|
||||
initialValues={{
|
||||
...data.config,
|
||||
name: data.name,
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-end gap-2 pt-4 border-t">
|
||||
<Button type="button" variant="secondary" onClick={() => navigate({ to: `/notifications/${data.id}` })}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" form={formId} loading={updateDestination.isPending}>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { toast } from "sonner";
|
||||
import { useState, useId } from "react";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
deleteNotificationDestinationMutation,
|
||||
getNotificationDestinationOptions,
|
||||
testNotificationDestinationMutation,
|
||||
updateNotificationDestinationMutation,
|
||||
} from "~/client/api-client/@tanstack/react-query.gen";
|
||||
import { Button } from "~/client/components/ui/button";
|
||||
import {
|
||||
|
|
@ -22,20 +21,161 @@ import {
|
|||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "~/client/components/ui/dropdown-menu";
|
||||
import { Badge } from "~/client/components/ui/badge";
|
||||
import { Card, CardTitle } from "~/client/components/ui/card";
|
||||
import { Separator } from "~/client/components/ui/separator";
|
||||
import { parseError } from "~/client/lib/errors";
|
||||
import { cn } from "~/client/lib/utils";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
|
||||
import { Bell, ChevronDown, Save, TestTube2, Trash2 } from "lucide-react";
|
||||
import { Alert, AlertDescription } from "~/client/components/ui/alert";
|
||||
import { CreateNotificationForm, type NotificationFormValues } from "../components/create-notification-form";
|
||||
import {
|
||||
Bell,
|
||||
Bot,
|
||||
ChevronDown,
|
||||
Globe,
|
||||
Hash,
|
||||
Key,
|
||||
Link,
|
||||
Lock,
|
||||
Mail,
|
||||
AtSign,
|
||||
MessageSquare,
|
||||
Pencil,
|
||||
Server,
|
||||
Settings,
|
||||
Shield,
|
||||
Smile,
|
||||
TestTube2,
|
||||
Trash2,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import type { GetNotificationDestinationResponse } from "~/client/api-client/types.gen";
|
||||
import { useTimeFormat } from "~/client/lib/datetime";
|
||||
|
||||
type NotificationConfig = GetNotificationDestinationResponse["config"];
|
||||
type Props = {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: string;
|
||||
mono?: boolean;
|
||||
};
|
||||
|
||||
function ConfigRow({ icon, label, value, mono }: Props) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 py-3 first:pt-0 last:pb-0">
|
||||
<span className="text-muted-foreground shrink-0">{icon}</span>
|
||||
<span className="text-sm text-muted-foreground w-40 shrink-0">{label}</span>
|
||||
<span className={cn("text-sm break-all", { "font-mono bg-muted/50 px-2 py-0.5 rounded": mono })}>{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NotificationConfigRows({ config }: { config: NotificationConfig }) {
|
||||
switch (config.type) {
|
||||
case "slack":
|
||||
return (
|
||||
<>
|
||||
<ConfigRow icon={<Globe className="h-4 w-4" />} label="Webhook URL" value={config.webhookUrl} mono />
|
||||
<ConfigRow icon={<Hash className="h-4 w-4" />} label="Channel" value={config.channel || "—"} />
|
||||
<ConfigRow icon={<Bot className="h-4 w-4" />} label="Bot Username" value={config.username || "—"} />
|
||||
<ConfigRow icon={<Smile className="h-4 w-4" />} label="Icon Emoji" value={config.iconEmoji || "—"} />
|
||||
</>
|
||||
);
|
||||
case "discord":
|
||||
return (
|
||||
<>
|
||||
<ConfigRow icon={<Globe className="h-4 w-4" />} label="Webhook URL" value={config.webhookUrl} mono />
|
||||
<ConfigRow icon={<Bot className="h-4 w-4" />} label="Username" value={config.username || "—"} />
|
||||
<ConfigRow icon={<Link className="h-4 w-4" />} label="Avatar URL" value={config.avatarUrl || "—"} mono />
|
||||
<ConfigRow icon={<MessageSquare className="h-4 w-4" />} label="Thread ID" value={config.threadId || "—"} />
|
||||
</>
|
||||
);
|
||||
case "email":
|
||||
return (
|
||||
<>
|
||||
<ConfigRow icon={<Server className="h-4 w-4" />} label="SMTP Host" value={config.smtpHost} mono />
|
||||
<ConfigRow icon={<Server className="h-4 w-4" />} label="SMTP Port" value={String(config.smtpPort)} />
|
||||
<ConfigRow icon={<AtSign className="h-4 w-4" />} label="Username" value={config.username || "—"} />
|
||||
<ConfigRow icon={<Lock className="h-4 w-4" />} label="Password" value={config.password || "—"} />
|
||||
<ConfigRow icon={<Mail className="h-4 w-4" />} label="From" value={config.from} />
|
||||
{config.fromName && (
|
||||
<ConfigRow icon={<Mail className="h-4 w-4" />} label="From Name" value={config.fromName} />
|
||||
)}
|
||||
<ConfigRow icon={<Users className="h-4 w-4" />} label="To" value={config.to.join(", ")} />
|
||||
<ConfigRow icon={<Shield className="h-4 w-4" />} label="TLS" value={config.useTLS ? "Enabled" : "Disabled"} />
|
||||
</>
|
||||
);
|
||||
case "gotify":
|
||||
return (
|
||||
<>
|
||||
<ConfigRow icon={<Globe className="h-4 w-4" />} label="Server URL" value={config.serverUrl} mono />
|
||||
<ConfigRow icon={<Key className="h-4 w-4" />} label="Token" value={config.token} mono />
|
||||
<ConfigRow icon={<Globe className="h-4 w-4" />} label="Path" value={config.path || "—"} mono />
|
||||
<ConfigRow icon={<Settings className="h-4 w-4" />} label="Priority" value={String(config.priority)} />
|
||||
</>
|
||||
);
|
||||
case "ntfy":
|
||||
return (
|
||||
<>
|
||||
<ConfigRow
|
||||
icon={<Globe className="h-4 w-4" />}
|
||||
label="Server URL"
|
||||
value={config.serverUrl || "Default (ntfy.sh)"}
|
||||
mono
|
||||
/>
|
||||
<ConfigRow icon={<Hash className="h-4 w-4" />} label="Topic" value={config.topic} />
|
||||
<ConfigRow icon={<Settings className="h-4 w-4" />} label="Priority" value={config.priority} />
|
||||
<ConfigRow icon={<AtSign className="h-4 w-4" />} label="Username" value={config.username || "—"} />
|
||||
<ConfigRow icon={<Lock className="h-4 w-4" />} label="Password" value={config.password || "—"} />
|
||||
<ConfigRow icon={<Key className="h-4 w-4" />} label="Access Token" value={config.accessToken || "—"} />
|
||||
</>
|
||||
);
|
||||
case "pushover":
|
||||
return (
|
||||
<>
|
||||
<ConfigRow icon={<Key className="h-4 w-4" />} label="User Key" value={config.userKey} mono />
|
||||
<ConfigRow icon={<Key className="h-4 w-4" />} label="API Token" value={config.apiToken} mono />
|
||||
<ConfigRow icon={<Settings className="h-4 w-4" />} label="Devices" value={config.devices || "—"} />
|
||||
<ConfigRow icon={<Settings className="h-4 w-4" />} label="Priority" value={String(config.priority)} />
|
||||
</>
|
||||
);
|
||||
case "telegram":
|
||||
return (
|
||||
<>
|
||||
<ConfigRow icon={<Key className="h-4 w-4" />} label="Bot Token" value={config.botToken} mono />
|
||||
<ConfigRow icon={<Hash className="h-4 w-4" />} label="Chat ID" value={config.chatId} mono />
|
||||
<ConfigRow icon={<MessageSquare className="h-4 w-4" />} label="Thread ID" value={config.threadId || "—"} />
|
||||
</>
|
||||
);
|
||||
case "generic":
|
||||
return (
|
||||
<>
|
||||
<ConfigRow icon={<Globe className="h-4 w-4" />} label="URL" value={config.url} mono />
|
||||
<ConfigRow icon={<Settings className="h-4 w-4" />} label="Method" value={config.method} />
|
||||
<ConfigRow icon={<Settings className="h-4 w-4" />} label="Content Type" value={config.contentType || "—"} />
|
||||
<ConfigRow
|
||||
icon={<Settings className="h-4 w-4" />}
|
||||
label="JSON Mode"
|
||||
value={config.useJson ? "Enabled" : "Disabled"}
|
||||
/>
|
||||
<ConfigRow icon={<Key className="h-4 w-4" />} label="Title Key" value={config.titleKey || "—"} mono />
|
||||
<ConfigRow icon={<Key className="h-4 w-4" />} label="Message Key" value={config.messageKey || "—"} mono />
|
||||
{config.headers?.map((h, i) => (
|
||||
<ConfigRow key={i} icon={<Link className="h-4 w-4" />} label={`Header ${i + 1}`} value={h} mono />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
case "custom":
|
||||
return <ConfigRow icon={<Globe className="h-4 w-4" />} label="Shoutrrr URL" value={config.shoutrrrUrl} mono />;
|
||||
}
|
||||
}
|
||||
|
||||
export function NotificationDetailsPage({ notificationId }: { notificationId: string }) {
|
||||
const navigate = useNavigate();
|
||||
const formId = useId();
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const { formatDateTime } = useTimeFormat();
|
||||
|
||||
const { data } = useSuspenseQuery({
|
||||
...getNotificationDestinationOptions({ path: { id: notificationId } }),
|
||||
|
|
@ -54,18 +194,6 @@ export function NotificationDetailsPage({ notificationId }: { notificationId: st
|
|||
},
|
||||
});
|
||||
|
||||
const updateDestination = useMutation({
|
||||
...updateNotificationDestinationMutation(),
|
||||
onSuccess: () => {
|
||||
toast.success("Notification destination updated successfully");
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error("Failed to update notification destination", {
|
||||
description: parseError(error)?.message,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const testDestination = useMutation({
|
||||
...testNotificationDestinationMutation(),
|
||||
onSuccess: () => {
|
||||
|
|
@ -83,101 +211,86 @@ export function NotificationDetailsPage({ notificationId }: { notificationId: st
|
|||
deleteDestination.mutate({ path: { id: String(data.id) } });
|
||||
};
|
||||
|
||||
const handleSubmit = (values: NotificationFormValues) => {
|
||||
updateDestination.mutate({
|
||||
path: { id: String(data.id) },
|
||||
body: {
|
||||
name: values.name,
|
||||
config: values,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleTest = () => {
|
||||
testDestination.mutate({ path: { id: String(data.id) } });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="text-sm font-semibold text-muted-foreground flex items-center gap-2">
|
||||
<span
|
||||
className={cn("inline-flex items-center gap-2 px-2 py-1 rounded-md text-xs bg-gray-500/10 text-gray-500", {
|
||||
"bg-success/10 text-success": data.enabled,
|
||||
"bg-red-500/10 text-red-500": !data.enabled,
|
||||
})}
|
||||
>
|
||||
{data.enabled ? "Enabled" : "Disabled"}
|
||||
</span>
|
||||
<span className="text-xs bg-primary/10 rounded-md px-2 py-1 capitalize">{data.type}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
onClick={handleTest}
|
||||
disabled={testDestination.isPending || !data.enabled}
|
||||
variant="outline"
|
||||
loading={testDestination.isPending}
|
||||
>
|
||||
<TestTube2 className="h-4 w-4 mr-2" />
|
||||
Test
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">
|
||||
Actions
|
||||
<ChevronDown className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
disabled={deleteDestination.isPending}
|
||||
>
|
||||
<Trash2 />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
|
||||
<Bell className="w-5 h-5 text-primary" />
|
||||
<div className="flex flex-col gap-6 @container">
|
||||
<Card className="px-6 py-5">
|
||||
<div className="flex flex-col @wide:flex-row @wide:items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="hidden @medium:flex items-center justify-center w-10 h-10 shrink-0 rounded-lg bg-muted/50 border border-border/50">
|
||||
<Bell className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-lg font-semibold tracking-tight">{data.name}</h2>
|
||||
<Separator orientation="vertical" className="h-4 mx-1" />
|
||||
<Badge variant="outline" className="capitalize gap-1.5">
|
||||
<span
|
||||
className={cn("w-2 h-2 rounded-full shrink-0", {
|
||||
"bg-success": data.enabled,
|
||||
"bg-red-500": !data.enabled,
|
||||
})}
|
||||
/>
|
||||
{data.enabled ? "Enabled" : "Disabled"}
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="capitalize">
|
||||
{data.type}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-0.5">Created {formatDateTime(data.createdAt)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
onClick={handleTest}
|
||||
disabled={testDestination.isPending || !data.enabled}
|
||||
variant="outline"
|
||||
loading={testDestination.isPending}
|
||||
>
|
||||
<TestTube2 className="h-4 w-4 mr-2" />
|
||||
Test
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">
|
||||
Actions
|
||||
<ChevronDown className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => navigate({ to: `/notifications/${data.id}/edit` })}>
|
||||
<Pencil />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
disabled={deleteDestination.isPending}
|
||||
>
|
||||
<Trash2 />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<CardTitle>{data.name}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{updateDestination.isError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
<strong>Failed to update notification destination:</strong>
|
||||
<br />
|
||||
{parseError(updateDestination.error)?.message}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<CreateNotificationForm
|
||||
mode="update"
|
||||
formId={formId}
|
||||
onSubmit={handleSubmit}
|
||||
initialValues={{
|
||||
...data.config,
|
||||
name: data.name,
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-end gap-2 pt-4 border-t">
|
||||
<Button type="submit" form={formId} loading={updateDestination.isPending}>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
Save Changes
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
<Card className="px-6 py-6">
|
||||
<CardTitle className="flex items-center gap-2 mb-5">
|
||||
<Settings className="h-4 w-4 text-muted-foreground" />
|
||||
Configuration
|
||||
</CardTitle>
|
||||
<div className="space-y-0 divide-y divide-border/50">
|
||||
<NotificationConfigRows config={data.config} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
|
||||
<AlertDialogContent>
|
||||
|
|
|
|||
|
|
@ -25,15 +25,16 @@ import { Route as dashboardAdminIndexRouteImport } from './routes/(dashboard)/ad
|
|||
import { Route as dashboardVolumesCreateRouteImport } from './routes/(dashboard)/volumes/create'
|
||||
import { Route as dashboardRepositoriesCreateRouteImport } from './routes/(dashboard)/repositories/create'
|
||||
import { Route as dashboardNotificationsCreateRouteImport } from './routes/(dashboard)/notifications/create'
|
||||
import { Route as dashboardNotificationsNotificationIdRouteImport } from './routes/(dashboard)/notifications/$notificationId'
|
||||
import { Route as dashboardBackupsCreateRouteImport } from './routes/(dashboard)/backups/create'
|
||||
import { Route as authLoginErrorRouteImport } from './routes/(auth)/login.error'
|
||||
import { Route as dashboardVolumesVolumeIdIndexRouteImport } from './routes/(dashboard)/volumes/$volumeId/index'
|
||||
import { Route as dashboardRepositoriesRepositoryIdIndexRouteImport } from './routes/(dashboard)/repositories/$repositoryId/index'
|
||||
import { Route as dashboardNotificationsNotificationIdIndexRouteImport } from './routes/(dashboard)/notifications/$notificationId/index'
|
||||
import { Route as dashboardBackupsBackupIdIndexRouteImport } from './routes/(dashboard)/backups/$backupId/index'
|
||||
import { Route as dashboardVolumesVolumeIdEditRouteImport } from './routes/(dashboard)/volumes/$volumeId/edit'
|
||||
import { Route as dashboardSettingsSsoNewRouteImport } from './routes/(dashboard)/settings/sso/new'
|
||||
import { Route as dashboardRepositoriesRepositoryIdEditRouteImport } from './routes/(dashboard)/repositories/$repositoryId/edit'
|
||||
import { Route as dashboardNotificationsNotificationIdEditRouteImport } from './routes/(dashboard)/notifications/$notificationId/edit'
|
||||
import { Route as dashboardBackupsBackupIdEditRouteImport } from './routes/(dashboard)/backups/$backupId/edit'
|
||||
import { Route as dashboardRepositoriesRepositoryIdSnapshotIdIndexRouteImport } from './routes/(dashboard)/repositories/$repositoryId/$snapshotId/index'
|
||||
import { Route as dashboardRepositoriesRepositoryIdSnapshotIdRestoreRouteImport } from './routes/(dashboard)/repositories/$repositoryId/$snapshotId/restore'
|
||||
|
|
@ -121,12 +122,6 @@ const dashboardNotificationsCreateRoute =
|
|||
path: '/notifications/create',
|
||||
getParentRoute: () => dashboardRouteRoute,
|
||||
} as any)
|
||||
const dashboardNotificationsNotificationIdRoute =
|
||||
dashboardNotificationsNotificationIdRouteImport.update({
|
||||
id: '/notifications/$notificationId',
|
||||
path: '/notifications/$notificationId',
|
||||
getParentRoute: () => dashboardRouteRoute,
|
||||
} as any)
|
||||
const dashboardBackupsCreateRoute = dashboardBackupsCreateRouteImport.update({
|
||||
id: '/backups/create',
|
||||
path: '/backups/create',
|
||||
|
|
@ -149,6 +144,12 @@ const dashboardRepositoriesRepositoryIdIndexRoute =
|
|||
path: '/repositories/$repositoryId/',
|
||||
getParentRoute: () => dashboardRouteRoute,
|
||||
} as any)
|
||||
const dashboardNotificationsNotificationIdIndexRoute =
|
||||
dashboardNotificationsNotificationIdIndexRouteImport.update({
|
||||
id: '/notifications/$notificationId/',
|
||||
path: '/notifications/$notificationId/',
|
||||
getParentRoute: () => dashboardRouteRoute,
|
||||
} as any)
|
||||
const dashboardBackupsBackupIdIndexRoute =
|
||||
dashboardBackupsBackupIdIndexRouteImport.update({
|
||||
id: '/backups/$backupId/',
|
||||
|
|
@ -172,6 +173,12 @@ const dashboardRepositoriesRepositoryIdEditRoute =
|
|||
path: '/repositories/$repositoryId/edit',
|
||||
getParentRoute: () => dashboardRouteRoute,
|
||||
} as any)
|
||||
const dashboardNotificationsNotificationIdEditRoute =
|
||||
dashboardNotificationsNotificationIdEditRouteImport.update({
|
||||
id: '/notifications/$notificationId/edit',
|
||||
path: '/notifications/$notificationId/edit',
|
||||
getParentRoute: () => dashboardRouteRoute,
|
||||
} as any)
|
||||
const dashboardBackupsBackupIdEditRoute =
|
||||
dashboardBackupsBackupIdEditRouteImport.update({
|
||||
id: '/backups/$backupId/edit',
|
||||
|
|
@ -205,7 +212,6 @@ export interface FileRoutesByFullPath {
|
|||
'/api/$': typeof ApiSplatRoute
|
||||
'/login/error': typeof authLoginErrorRoute
|
||||
'/backups/create': typeof dashboardBackupsCreateRoute
|
||||
'/notifications/$notificationId': typeof dashboardNotificationsNotificationIdRoute
|
||||
'/notifications/create': typeof dashboardNotificationsCreateRoute
|
||||
'/repositories/create': typeof dashboardRepositoriesCreateRoute
|
||||
'/volumes/create': typeof dashboardVolumesCreateRoute
|
||||
|
|
@ -216,10 +222,12 @@ export interface FileRoutesByFullPath {
|
|||
'/settings/': typeof dashboardSettingsIndexRoute
|
||||
'/volumes/': typeof dashboardVolumesIndexRoute
|
||||
'/backups/$backupId/edit': typeof dashboardBackupsBackupIdEditRoute
|
||||
'/notifications/$notificationId/edit': typeof dashboardNotificationsNotificationIdEditRoute
|
||||
'/repositories/$repositoryId/edit': typeof dashboardRepositoriesRepositoryIdEditRoute
|
||||
'/settings/sso/new': typeof dashboardSettingsSsoNewRoute
|
||||
'/volumes/$volumeId/edit': typeof dashboardVolumesVolumeIdEditRoute
|
||||
'/backups/$backupId/': typeof dashboardBackupsBackupIdIndexRoute
|
||||
'/notifications/$notificationId/': typeof dashboardNotificationsNotificationIdIndexRoute
|
||||
'/repositories/$repositoryId/': typeof dashboardRepositoriesRepositoryIdIndexRoute
|
||||
'/volumes/$volumeId/': typeof dashboardVolumesVolumeIdIndexRoute
|
||||
'/backups/$backupId/$snapshotId/restore': typeof dashboardBackupsBackupIdSnapshotIdRestoreRoute
|
||||
|
|
@ -234,7 +242,6 @@ export interface FileRoutesByTo {
|
|||
'/api/$': typeof ApiSplatRoute
|
||||
'/login/error': typeof authLoginErrorRoute
|
||||
'/backups/create': typeof dashboardBackupsCreateRoute
|
||||
'/notifications/$notificationId': typeof dashboardNotificationsNotificationIdRoute
|
||||
'/notifications/create': typeof dashboardNotificationsCreateRoute
|
||||
'/repositories/create': typeof dashboardRepositoriesCreateRoute
|
||||
'/volumes/create': typeof dashboardVolumesCreateRoute
|
||||
|
|
@ -245,10 +252,12 @@ export interface FileRoutesByTo {
|
|||
'/settings': typeof dashboardSettingsIndexRoute
|
||||
'/volumes': typeof dashboardVolumesIndexRoute
|
||||
'/backups/$backupId/edit': typeof dashboardBackupsBackupIdEditRoute
|
||||
'/notifications/$notificationId/edit': typeof dashboardNotificationsNotificationIdEditRoute
|
||||
'/repositories/$repositoryId/edit': typeof dashboardRepositoriesRepositoryIdEditRoute
|
||||
'/settings/sso/new': typeof dashboardSettingsSsoNewRoute
|
||||
'/volumes/$volumeId/edit': typeof dashboardVolumesVolumeIdEditRoute
|
||||
'/backups/$backupId': typeof dashboardBackupsBackupIdIndexRoute
|
||||
'/notifications/$notificationId': typeof dashboardNotificationsNotificationIdIndexRoute
|
||||
'/repositories/$repositoryId': typeof dashboardRepositoriesRepositoryIdIndexRoute
|
||||
'/volumes/$volumeId': typeof dashboardVolumesVolumeIdIndexRoute
|
||||
'/backups/$backupId/$snapshotId/restore': typeof dashboardBackupsBackupIdSnapshotIdRestoreRoute
|
||||
|
|
@ -266,7 +275,6 @@ export interface FileRoutesById {
|
|||
'/api/$': typeof ApiSplatRoute
|
||||
'/(auth)/login/error': typeof authLoginErrorRoute
|
||||
'/(dashboard)/backups/create': typeof dashboardBackupsCreateRoute
|
||||
'/(dashboard)/notifications/$notificationId': typeof dashboardNotificationsNotificationIdRoute
|
||||
'/(dashboard)/notifications/create': typeof dashboardNotificationsCreateRoute
|
||||
'/(dashboard)/repositories/create': typeof dashboardRepositoriesCreateRoute
|
||||
'/(dashboard)/volumes/create': typeof dashboardVolumesCreateRoute
|
||||
|
|
@ -277,10 +285,12 @@ export interface FileRoutesById {
|
|||
'/(dashboard)/settings/': typeof dashboardSettingsIndexRoute
|
||||
'/(dashboard)/volumes/': typeof dashboardVolumesIndexRoute
|
||||
'/(dashboard)/backups/$backupId/edit': typeof dashboardBackupsBackupIdEditRoute
|
||||
'/(dashboard)/notifications/$notificationId/edit': typeof dashboardNotificationsNotificationIdEditRoute
|
||||
'/(dashboard)/repositories/$repositoryId/edit': typeof dashboardRepositoriesRepositoryIdEditRoute
|
||||
'/(dashboard)/settings/sso/new': typeof dashboardSettingsSsoNewRoute
|
||||
'/(dashboard)/volumes/$volumeId/edit': typeof dashboardVolumesVolumeIdEditRoute
|
||||
'/(dashboard)/backups/$backupId/': typeof dashboardBackupsBackupIdIndexRoute
|
||||
'/(dashboard)/notifications/$notificationId/': typeof dashboardNotificationsNotificationIdIndexRoute
|
||||
'/(dashboard)/repositories/$repositoryId/': typeof dashboardRepositoriesRepositoryIdIndexRoute
|
||||
'/(dashboard)/volumes/$volumeId/': typeof dashboardVolumesVolumeIdIndexRoute
|
||||
'/(dashboard)/backups/$backupId/$snapshotId/restore': typeof dashboardBackupsBackupIdSnapshotIdRestoreRoute
|
||||
|
|
@ -297,7 +307,6 @@ export interface FileRouteTypes {
|
|||
| '/api/$'
|
||||
| '/login/error'
|
||||
| '/backups/create'
|
||||
| '/notifications/$notificationId'
|
||||
| '/notifications/create'
|
||||
| '/repositories/create'
|
||||
| '/volumes/create'
|
||||
|
|
@ -308,10 +317,12 @@ export interface FileRouteTypes {
|
|||
| '/settings/'
|
||||
| '/volumes/'
|
||||
| '/backups/$backupId/edit'
|
||||
| '/notifications/$notificationId/edit'
|
||||
| '/repositories/$repositoryId/edit'
|
||||
| '/settings/sso/new'
|
||||
| '/volumes/$volumeId/edit'
|
||||
| '/backups/$backupId/'
|
||||
| '/notifications/$notificationId/'
|
||||
| '/repositories/$repositoryId/'
|
||||
| '/volumes/$volumeId/'
|
||||
| '/backups/$backupId/$snapshotId/restore'
|
||||
|
|
@ -326,7 +337,6 @@ export interface FileRouteTypes {
|
|||
| '/api/$'
|
||||
| '/login/error'
|
||||
| '/backups/create'
|
||||
| '/notifications/$notificationId'
|
||||
| '/notifications/create'
|
||||
| '/repositories/create'
|
||||
| '/volumes/create'
|
||||
|
|
@ -337,10 +347,12 @@ export interface FileRouteTypes {
|
|||
| '/settings'
|
||||
| '/volumes'
|
||||
| '/backups/$backupId/edit'
|
||||
| '/notifications/$notificationId/edit'
|
||||
| '/repositories/$repositoryId/edit'
|
||||
| '/settings/sso/new'
|
||||
| '/volumes/$volumeId/edit'
|
||||
| '/backups/$backupId'
|
||||
| '/notifications/$notificationId'
|
||||
| '/repositories/$repositoryId'
|
||||
| '/volumes/$volumeId'
|
||||
| '/backups/$backupId/$snapshotId/restore'
|
||||
|
|
@ -357,7 +369,6 @@ export interface FileRouteTypes {
|
|||
| '/api/$'
|
||||
| '/(auth)/login/error'
|
||||
| '/(dashboard)/backups/create'
|
||||
| '/(dashboard)/notifications/$notificationId'
|
||||
| '/(dashboard)/notifications/create'
|
||||
| '/(dashboard)/repositories/create'
|
||||
| '/(dashboard)/volumes/create'
|
||||
|
|
@ -368,10 +379,12 @@ export interface FileRouteTypes {
|
|||
| '/(dashboard)/settings/'
|
||||
| '/(dashboard)/volumes/'
|
||||
| '/(dashboard)/backups/$backupId/edit'
|
||||
| '/(dashboard)/notifications/$notificationId/edit'
|
||||
| '/(dashboard)/repositories/$repositoryId/edit'
|
||||
| '/(dashboard)/settings/sso/new'
|
||||
| '/(dashboard)/volumes/$volumeId/edit'
|
||||
| '/(dashboard)/backups/$backupId/'
|
||||
| '/(dashboard)/notifications/$notificationId/'
|
||||
| '/(dashboard)/repositories/$repositoryId/'
|
||||
| '/(dashboard)/volumes/$volumeId/'
|
||||
| '/(dashboard)/backups/$backupId/$snapshotId/restore'
|
||||
|
|
@ -500,13 +513,6 @@ declare module '@tanstack/react-router' {
|
|||
preLoaderRoute: typeof dashboardNotificationsCreateRouteImport
|
||||
parentRoute: typeof dashboardRouteRoute
|
||||
}
|
||||
'/(dashboard)/notifications/$notificationId': {
|
||||
id: '/(dashboard)/notifications/$notificationId'
|
||||
path: '/notifications/$notificationId'
|
||||
fullPath: '/notifications/$notificationId'
|
||||
preLoaderRoute: typeof dashboardNotificationsNotificationIdRouteImport
|
||||
parentRoute: typeof dashboardRouteRoute
|
||||
}
|
||||
'/(dashboard)/backups/create': {
|
||||
id: '/(dashboard)/backups/create'
|
||||
path: '/backups/create'
|
||||
|
|
@ -535,6 +541,13 @@ declare module '@tanstack/react-router' {
|
|||
preLoaderRoute: typeof dashboardRepositoriesRepositoryIdIndexRouteImport
|
||||
parentRoute: typeof dashboardRouteRoute
|
||||
}
|
||||
'/(dashboard)/notifications/$notificationId/': {
|
||||
id: '/(dashboard)/notifications/$notificationId/'
|
||||
path: '/notifications/$notificationId'
|
||||
fullPath: '/notifications/$notificationId/'
|
||||
preLoaderRoute: typeof dashboardNotificationsNotificationIdIndexRouteImport
|
||||
parentRoute: typeof dashboardRouteRoute
|
||||
}
|
||||
'/(dashboard)/backups/$backupId/': {
|
||||
id: '/(dashboard)/backups/$backupId/'
|
||||
path: '/backups/$backupId'
|
||||
|
|
@ -563,6 +576,13 @@ declare module '@tanstack/react-router' {
|
|||
preLoaderRoute: typeof dashboardRepositoriesRepositoryIdEditRouteImport
|
||||
parentRoute: typeof dashboardRouteRoute
|
||||
}
|
||||
'/(dashboard)/notifications/$notificationId/edit': {
|
||||
id: '/(dashboard)/notifications/$notificationId/edit'
|
||||
path: '/notifications/$notificationId/edit'
|
||||
fullPath: '/notifications/$notificationId/edit'
|
||||
preLoaderRoute: typeof dashboardNotificationsNotificationIdEditRouteImport
|
||||
parentRoute: typeof dashboardRouteRoute
|
||||
}
|
||||
'/(dashboard)/backups/$backupId/edit': {
|
||||
id: '/(dashboard)/backups/$backupId/edit'
|
||||
path: '/backups/$backupId/edit'
|
||||
|
|
@ -624,7 +644,6 @@ const authRouteRouteWithChildren = authRouteRoute._addFileChildren(
|
|||
|
||||
interface dashboardRouteRouteChildren {
|
||||
dashboardBackupsCreateRoute: typeof dashboardBackupsCreateRoute
|
||||
dashboardNotificationsNotificationIdRoute: typeof dashboardNotificationsNotificationIdRoute
|
||||
dashboardNotificationsCreateRoute: typeof dashboardNotificationsCreateRoute
|
||||
dashboardRepositoriesCreateRoute: typeof dashboardRepositoriesCreateRoute
|
||||
dashboardVolumesCreateRoute: typeof dashboardVolumesCreateRoute
|
||||
|
|
@ -635,10 +654,12 @@ interface dashboardRouteRouteChildren {
|
|||
dashboardSettingsIndexRoute: typeof dashboardSettingsIndexRoute
|
||||
dashboardVolumesIndexRoute: typeof dashboardVolumesIndexRoute
|
||||
dashboardBackupsBackupIdEditRoute: typeof dashboardBackupsBackupIdEditRoute
|
||||
dashboardNotificationsNotificationIdEditRoute: typeof dashboardNotificationsNotificationIdEditRoute
|
||||
dashboardRepositoriesRepositoryIdEditRoute: typeof dashboardRepositoriesRepositoryIdEditRoute
|
||||
dashboardSettingsSsoNewRoute: typeof dashboardSettingsSsoNewRoute
|
||||
dashboardVolumesVolumeIdEditRoute: typeof dashboardVolumesVolumeIdEditRoute
|
||||
dashboardBackupsBackupIdIndexRoute: typeof dashboardBackupsBackupIdIndexRoute
|
||||
dashboardNotificationsNotificationIdIndexRoute: typeof dashboardNotificationsNotificationIdIndexRoute
|
||||
dashboardRepositoriesRepositoryIdIndexRoute: typeof dashboardRepositoriesRepositoryIdIndexRoute
|
||||
dashboardVolumesVolumeIdIndexRoute: typeof dashboardVolumesVolumeIdIndexRoute
|
||||
dashboardBackupsBackupIdSnapshotIdRestoreRoute: typeof dashboardBackupsBackupIdSnapshotIdRestoreRoute
|
||||
|
|
@ -648,8 +669,6 @@ interface dashboardRouteRouteChildren {
|
|||
|
||||
const dashboardRouteRouteChildren: dashboardRouteRouteChildren = {
|
||||
dashboardBackupsCreateRoute: dashboardBackupsCreateRoute,
|
||||
dashboardNotificationsNotificationIdRoute:
|
||||
dashboardNotificationsNotificationIdRoute,
|
||||
dashboardNotificationsCreateRoute: dashboardNotificationsCreateRoute,
|
||||
dashboardRepositoriesCreateRoute: dashboardRepositoriesCreateRoute,
|
||||
dashboardVolumesCreateRoute: dashboardVolumesCreateRoute,
|
||||
|
|
@ -660,11 +679,15 @@ const dashboardRouteRouteChildren: dashboardRouteRouteChildren = {
|
|||
dashboardSettingsIndexRoute: dashboardSettingsIndexRoute,
|
||||
dashboardVolumesIndexRoute: dashboardVolumesIndexRoute,
|
||||
dashboardBackupsBackupIdEditRoute: dashboardBackupsBackupIdEditRoute,
|
||||
dashboardNotificationsNotificationIdEditRoute:
|
||||
dashboardNotificationsNotificationIdEditRoute,
|
||||
dashboardRepositoriesRepositoryIdEditRoute:
|
||||
dashboardRepositoriesRepositoryIdEditRoute,
|
||||
dashboardSettingsSsoNewRoute: dashboardSettingsSsoNewRoute,
|
||||
dashboardVolumesVolumeIdEditRoute: dashboardVolumesVolumeIdEditRoute,
|
||||
dashboardBackupsBackupIdIndexRoute: dashboardBackupsBackupIdIndexRoute,
|
||||
dashboardNotificationsNotificationIdIndexRoute:
|
||||
dashboardNotificationsNotificationIdIndexRoute,
|
||||
dashboardRepositoriesRepositoryIdIndexRoute:
|
||||
dashboardRepositoriesRepositoryIdIndexRoute,
|
||||
dashboardVolumesVolumeIdIndexRoute: dashboardVolumesVolumeIdIndexRoute,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { getNotificationDestinationOptions } from "~/client/api-client/@tanstack/react-query.gen";
|
||||
import { EditNotificationPage } from "~/client/modules/notifications/routes/edit-notification";
|
||||
|
||||
export const Route = createFileRoute("/(dashboard)/notifications/$notificationId/edit")({
|
||||
component: RouteComponent,
|
||||
errorComponent: () => <div>Failed to load notification</div>,
|
||||
loader: async ({ params, context }) => {
|
||||
const notification = await context.queryClient.ensureQueryData({
|
||||
...getNotificationDestinationOptions({ path: { id: params.notificationId } }),
|
||||
});
|
||||
|
||||
return notification;
|
||||
},
|
||||
staticData: {
|
||||
breadcrumb: (match) => [
|
||||
{ label: "Notifications", href: "/notifications" },
|
||||
{
|
||||
label: match.loaderData?.name || "Notification Details",
|
||||
href: `/notifications/${match.params.notificationId}`,
|
||||
},
|
||||
{ label: "Edit" },
|
||||
],
|
||||
},
|
||||
head: ({ loaderData }) => ({
|
||||
meta: [
|
||||
{ title: `Zerobyte - Edit ${loaderData?.name}` },
|
||||
{
|
||||
name: "description",
|
||||
content: "Edit notification destination settings.",
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return <EditNotificationPage notificationId={Route.useParams().notificationId} />;
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import { createFileRoute } from "@tanstack/react-router";
|
|||
import { getNotificationDestinationOptions } from "~/client/api-client/@tanstack/react-query.gen";
|
||||
import { NotificationDetailsPage } from "~/client/modules/notifications/routes/notification-details";
|
||||
|
||||
export const Route = createFileRoute("/(dashboard)/notifications/$notificationId")({
|
||||
export const Route = createFileRoute("/(dashboard)/notifications/$notificationId/")({
|
||||
component: RouteComponent,
|
||||
errorComponent: () => <div>Failed to load notification</div>,
|
||||
loader: async ({ params, context }) => {
|
||||
|
|
@ -23,7 +23,7 @@ export const Route = createFileRoute("/(dashboard)/notifications/$notificationId
|
|||
{ title: `Zerobyte - ${loaderData?.name}` },
|
||||
{
|
||||
name: "description",
|
||||
content: "View and edit notification destination settings.",
|
||||
content: "View notification destination settings.",
|
||||
},
|
||||
],
|
||||
}),
|
||||
Loading…
Reference in a new issue