wehub-resource-sync
1450 lines
48 KiB
TypeScript
1450 lines
48 KiB
TypeScript
import { TrashIcon } from "@heroicons/react/20/solid";
|
|
import { useFetcher, useSearchParams } from "@remix-run/react";
|
|
import { useEffect, useState } from "react";
|
|
import { typedjson, useTypedLoaderData } from "remix-typedjson";
|
|
import { z } from "zod";
|
|
import {
|
|
Alert,
|
|
AlertCancel,
|
|
AlertContent,
|
|
AlertDescription,
|
|
AlertFooter,
|
|
AlertHeader,
|
|
AlertTitle,
|
|
AlertTrigger,
|
|
} from "~/components/primitives/Alert";
|
|
import { Button } from "~/components/primitives/Buttons";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "~/components/primitives/Dialog";
|
|
import { Checkbox, CheckboxWithLabel } from "~/components/primitives/Checkbox";
|
|
import { Hint } from "~/components/primitives/Hint";
|
|
import { Input } from "~/components/primitives/Input";
|
|
import { Label } from "~/components/primitives/Label";
|
|
import { NotificationCard } from "~/components/navigation/NotificationCard";
|
|
import { PaginationControls } from "~/components/primitives/Pagination";
|
|
import { Paragraph } from "~/components/primitives/Paragraph";
|
|
import { Select, SelectItem } from "~/components/primitives/Select";
|
|
import { TextArea } from "~/components/primitives/TextArea";
|
|
import {
|
|
Table,
|
|
TableBlankRow,
|
|
TableBody,
|
|
TableCell,
|
|
TableHeader,
|
|
TableHeaderCell,
|
|
TableRow,
|
|
} from "~/components/primitives/Table";
|
|
import { dashboardAction, dashboardLoader } from "~/services/routeBuilders/dashboardBuilder";
|
|
import { logger } from "~/services/logger.server";
|
|
import {
|
|
archivePlatformNotification,
|
|
createPlatformNotification,
|
|
deletePlatformNotification,
|
|
getAdminNotificationsList,
|
|
publishNowPlatformNotification,
|
|
updatePlatformNotification,
|
|
} from "~/services/platformNotifications.server";
|
|
import { createSearchParams } from "~/utils/searchParams";
|
|
|
|
const PAGE_SIZE = 20;
|
|
|
|
const WEBAPP_TYPES = ["card", "changelog"] as const;
|
|
const CLI_TYPES = ["info", "warn", "error", "success"] as const;
|
|
|
|
/** Sentinel for the discovery "match behavior" select meaning "none / not configured". */
|
|
const DISCOVERY_MATCH_NONE = "";
|
|
const DISCOVERY_MATCH_LABEL = "— none —";
|
|
|
|
const SearchParams = z.object({
|
|
page: z.coerce.number().optional(),
|
|
hideInactive: z.coerce.boolean().optional(),
|
|
});
|
|
|
|
export const loader = dashboardLoader(
|
|
{ authorization: { requireSuper: true } },
|
|
async ({ user, request }) => {
|
|
const searchParams = createSearchParams(request.url, SearchParams);
|
|
if (!searchParams.success) throw new Error(searchParams.error);
|
|
const { page: rawPage, hideInactive } = searchParams.params.getAll();
|
|
const page = rawPage ?? 1;
|
|
|
|
const data = await getAdminNotificationsList({
|
|
page,
|
|
pageSize: PAGE_SIZE,
|
|
hideInactive: hideInactive ?? false,
|
|
});
|
|
|
|
return typedjson({ ...data, userId: user.id });
|
|
}
|
|
);
|
|
|
|
export const action = dashboardAction(
|
|
{ authorization: { requireSuper: true } },
|
|
async ({ user, request }) => {
|
|
const userId = user.id;
|
|
const formData = await request.formData();
|
|
const _action = formData.get("_action");
|
|
|
|
if (_action === "create" || _action === "create-preview") {
|
|
return handleCreateAction(formData, userId, _action === "create-preview");
|
|
}
|
|
|
|
if (_action === "archive") {
|
|
return handleArchiveAction(formData);
|
|
}
|
|
|
|
if (_action === "delete") {
|
|
return handleDeleteAction(formData);
|
|
}
|
|
|
|
if (_action === "publish-now") {
|
|
return handlePublishNowAction(formData);
|
|
}
|
|
|
|
if (_action === "edit") {
|
|
return handleEditAction(formData);
|
|
}
|
|
|
|
return typedjson({ error: "Unknown action" }, { status: 400 });
|
|
}
|
|
);
|
|
|
|
function parseNotificationFormData(formData: FormData) {
|
|
const surface = formData.get("surface") as string;
|
|
const payloadType = formData.get("payloadType") as string;
|
|
const adminLabel = formData.get("adminLabel") as string;
|
|
const title = formData.get("title") as string;
|
|
const description = formData.get("description") as string;
|
|
const actionUrl = (formData.get("actionUrl") as string) || undefined;
|
|
const image = (formData.get("image") as string) || undefined;
|
|
const dismissOnAction = formData.get("dismissOnAction") === "true";
|
|
const startsAt = formData.get("startsAt") as string;
|
|
const endsAt = formData.get("endsAt") as string;
|
|
const priority = Number(formData.get("priority") || "0");
|
|
const scope = (formData.get("scope") as string) || "GLOBAL";
|
|
const scopeUserId = (formData.get("scopeUserId") as string) || undefined;
|
|
const scopeOrganizationId = (formData.get("scopeOrganizationId") as string) || undefined;
|
|
const scopeProjectId = (formData.get("scopeProjectId") as string) || undefined;
|
|
|
|
const cliMaxShowCount = formData.get("cliMaxShowCount")
|
|
? Number(formData.get("cliMaxShowCount"))
|
|
: undefined;
|
|
const cliMaxDaysAfterFirstSeen = formData.get("cliMaxDaysAfterFirstSeen")
|
|
? Number(formData.get("cliMaxDaysAfterFirstSeen"))
|
|
: undefined;
|
|
const cliShowEvery = formData.get("cliShowEvery")
|
|
? Number(formData.get("cliShowEvery"))
|
|
: undefined;
|
|
|
|
const discoveryFilePatterns = (formData.get("discoveryFilePatterns") as string) || "";
|
|
const discoveryContentPattern = (formData.get("discoveryContentPattern") as string) || undefined;
|
|
const discoveryMatchBehavior =
|
|
(formData.get("discoveryMatchBehavior") as string) || DISCOVERY_MATCH_NONE;
|
|
|
|
const discovery =
|
|
discoveryFilePatterns && discoveryMatchBehavior !== DISCOVERY_MATCH_NONE
|
|
? {
|
|
filePatterns: discoveryFilePatterns
|
|
.split(",")
|
|
.map((s) => s.trim())
|
|
.filter(Boolean),
|
|
...(discoveryContentPattern ? { contentPattern: discoveryContentPattern } : {}),
|
|
matchBehavior: discoveryMatchBehavior as "show-if-found" | "show-if-not-found",
|
|
}
|
|
: undefined;
|
|
|
|
return {
|
|
surface,
|
|
payloadType,
|
|
adminLabel,
|
|
title,
|
|
description,
|
|
actionUrl,
|
|
image,
|
|
dismissOnAction,
|
|
startsAt,
|
|
endsAt,
|
|
priority,
|
|
scope,
|
|
scopeUserId,
|
|
scopeOrganizationId,
|
|
scopeProjectId,
|
|
cliMaxShowCount,
|
|
cliMaxDaysAfterFirstSeen,
|
|
cliShowEvery,
|
|
discovery,
|
|
};
|
|
}
|
|
|
|
function buildPayloadInput(fields: ReturnType<typeof parseNotificationFormData>) {
|
|
return {
|
|
version: "1" as const,
|
|
data: {
|
|
type: fields.payloadType as "info" | "warn" | "error" | "success" | "card" | "changelog",
|
|
title: fields.title,
|
|
description: fields.description,
|
|
...(fields.actionUrl ? { actionUrl: fields.actionUrl } : {}),
|
|
...(fields.image ? { image: fields.image } : {}),
|
|
...(fields.dismissOnAction ? { dismissOnAction: true } : {}),
|
|
...(fields.discovery ? { discovery: fields.discovery } : {}),
|
|
},
|
|
};
|
|
}
|
|
|
|
async function handleCreateAction(formData: FormData, userId: string, isPreview: boolean) {
|
|
const fields = parseNotificationFormData(formData);
|
|
|
|
if (
|
|
!fields.adminLabel ||
|
|
!fields.title ||
|
|
!fields.description ||
|
|
!fields.endsAt ||
|
|
!fields.surface ||
|
|
!fields.payloadType
|
|
) {
|
|
return typedjson({ error: "Missing required fields" }, { status: 400 });
|
|
}
|
|
|
|
const result = await createPlatformNotification({
|
|
title: isPreview ? `[Preview] ${fields.adminLabel}` : fields.adminLabel,
|
|
payload: buildPayloadInput(fields),
|
|
surface: fields.surface as "CLI" | "WEBAPP",
|
|
scope: isPreview ? "USER" : (fields.scope as "USER" | "PROJECT" | "ORGANIZATION" | "GLOBAL"),
|
|
...(isPreview
|
|
? { userId }
|
|
: {
|
|
...(fields.scope === "USER" && fields.scopeUserId ? { userId: fields.scopeUserId } : {}),
|
|
...(fields.scope === "ORGANIZATION" && fields.scopeOrganizationId
|
|
? { organizationId: fields.scopeOrganizationId }
|
|
: {}),
|
|
...(fields.scope === "PROJECT" && fields.scopeProjectId
|
|
? { projectId: fields.scopeProjectId }
|
|
: {}),
|
|
}),
|
|
startsAt: isPreview
|
|
? new Date().toISOString()
|
|
: fields.startsAt
|
|
? new Date(fields.startsAt + "Z").toISOString()
|
|
: new Date().toISOString(),
|
|
endsAt: isPreview
|
|
? new Date(Date.now() + 60 * 60 * 1000).toISOString()
|
|
: new Date(fields.endsAt + "Z").toISOString(),
|
|
priority: fields.priority,
|
|
...(fields.surface === "CLI"
|
|
? isPreview
|
|
? { cliMaxShowCount: 1 }
|
|
: {
|
|
cliMaxShowCount: fields.cliMaxShowCount,
|
|
cliMaxDaysAfterFirstSeen: fields.cliMaxDaysAfterFirstSeen,
|
|
cliShowEvery: fields.cliShowEvery,
|
|
}
|
|
: {}),
|
|
});
|
|
|
|
if (result.isErr()) {
|
|
const err = result.error;
|
|
if (err.type === "validation") {
|
|
return typedjson(
|
|
{ error: err.issues.map((i) => `${i.path.join(".")}: ${i.message}`).join("; ") },
|
|
{ status: 400 }
|
|
);
|
|
}
|
|
logger.error("Failed to create platform notification", { error: err });
|
|
return typedjson({ error: "Something went wrong, please try again." }, { status: 500 });
|
|
}
|
|
|
|
if (isPreview) {
|
|
return typedjson({ success: true, previewId: result.value.id });
|
|
}
|
|
return typedjson({ success: true, id: result.value.id });
|
|
}
|
|
|
|
async function handleArchiveAction(formData: FormData) {
|
|
const notificationId = formData.get("notificationId") as string;
|
|
if (!notificationId) {
|
|
return typedjson({ error: "Missing notificationId" }, { status: 400 });
|
|
}
|
|
|
|
try {
|
|
await archivePlatformNotification(notificationId);
|
|
return typedjson({ success: true });
|
|
} catch (error) {
|
|
logger.error("Failed to archive platform notification", { error, notificationId });
|
|
return typedjson(
|
|
{ error: "Failed to archive notification, please try again." },
|
|
{ status: 500 }
|
|
);
|
|
}
|
|
}
|
|
|
|
async function handleDeleteAction(formData: FormData) {
|
|
const notificationId = formData.get("notificationId") as string;
|
|
if (!notificationId) {
|
|
return typedjson({ error: "Missing notificationId" }, { status: 400 });
|
|
}
|
|
|
|
try {
|
|
await deletePlatformNotification(notificationId);
|
|
return typedjson({ success: true });
|
|
} catch (error) {
|
|
logger.error("Failed to delete platform notification", { error, notificationId });
|
|
return typedjson(
|
|
{ error: "Failed to delete notification, please try again." },
|
|
{ status: 500 }
|
|
);
|
|
}
|
|
}
|
|
|
|
async function handlePublishNowAction(formData: FormData) {
|
|
const notificationId = formData.get("notificationId") as string;
|
|
if (!notificationId) {
|
|
return typedjson({ error: "Missing notificationId" }, { status: 400 });
|
|
}
|
|
|
|
try {
|
|
await publishNowPlatformNotification(notificationId);
|
|
return typedjson({ success: true });
|
|
} catch (error) {
|
|
logger.error("Failed to publish platform notification", { error, notificationId });
|
|
return typedjson(
|
|
{ error: "Failed to publish notification, please try again." },
|
|
{ status: 500 }
|
|
);
|
|
}
|
|
}
|
|
|
|
async function handleEditAction(formData: FormData) {
|
|
const notificationId = formData.get("notificationId") as string;
|
|
const fields = parseNotificationFormData(formData);
|
|
|
|
if (
|
|
!notificationId ||
|
|
!fields.adminLabel ||
|
|
!fields.title ||
|
|
!fields.description ||
|
|
!fields.endsAt ||
|
|
!fields.surface ||
|
|
!fields.payloadType ||
|
|
!fields.startsAt
|
|
) {
|
|
return typedjson({ error: "Missing required fields" }, { status: 400 });
|
|
}
|
|
|
|
const result = await updatePlatformNotification({
|
|
id: notificationId,
|
|
title: fields.adminLabel,
|
|
payload: buildPayloadInput(fields),
|
|
surface: fields.surface as "CLI" | "WEBAPP",
|
|
scope: fields.scope as "USER" | "PROJECT" | "ORGANIZATION" | "GLOBAL",
|
|
...(fields.scope === "USER" && fields.scopeUserId ? { userId: fields.scopeUserId } : {}),
|
|
...(fields.scope === "ORGANIZATION" && fields.scopeOrganizationId
|
|
? { organizationId: fields.scopeOrganizationId }
|
|
: {}),
|
|
...(fields.scope === "PROJECT" && fields.scopeProjectId
|
|
? { projectId: fields.scopeProjectId }
|
|
: {}),
|
|
startsAt: new Date(fields.startsAt + "Z").toISOString(),
|
|
endsAt: new Date(fields.endsAt + "Z").toISOString(),
|
|
priority: fields.priority,
|
|
...(fields.surface === "CLI"
|
|
? {
|
|
cliMaxShowCount: fields.cliMaxShowCount,
|
|
cliMaxDaysAfterFirstSeen: fields.cliMaxDaysAfterFirstSeen,
|
|
cliShowEvery: fields.cliShowEvery,
|
|
}
|
|
: {}),
|
|
});
|
|
|
|
if (result.isErr()) {
|
|
const err = result.error;
|
|
if (err.type === "validation") {
|
|
return typedjson(
|
|
{ error: err.issues.map((i) => `${i.path.join(".")}: ${i.message}`).join("; ") },
|
|
{ status: 400 }
|
|
);
|
|
}
|
|
logger.error("Failed to update platform notification", { error: err });
|
|
return typedjson({ error: "Something went wrong, please try again." }, { status: 500 });
|
|
}
|
|
|
|
return typedjson({ success: true, id: result.value.id });
|
|
}
|
|
|
|
export default function AdminNotificationsRoute() {
|
|
const { notifications, total, page, pageCount } = useTypedLoaderData<typeof loader>();
|
|
const [showCreate, setShowCreate] = useState(false);
|
|
const [detailNotification, setDetailNotification] = useState<
|
|
(typeof notifications)[number] | null
|
|
>(null);
|
|
const [editNotification, setEditNotification] = useState<(typeof notifications)[number] | null>(
|
|
null
|
|
);
|
|
|
|
const [urlSearchParams, setUrlSearchParams] = useSearchParams();
|
|
const hideInactive = urlSearchParams.get("hideInactive") === "true";
|
|
|
|
const toggleHideInactive = () => {
|
|
setUrlSearchParams((prev) => {
|
|
const next = new URLSearchParams(prev);
|
|
if (hideInactive) {
|
|
next.delete("hideInactive");
|
|
} else {
|
|
next.set("hideInactive", "true");
|
|
}
|
|
next.delete("page");
|
|
return next;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<main className="flex h-full min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-end">
|
|
<Button variant="primary/small" onClick={() => setShowCreate(true)}>
|
|
Create notification
|
|
</Button>
|
|
</div>
|
|
|
|
<Dialog
|
|
open={showCreate}
|
|
onOpenChange={(open) => {
|
|
if (!open) setShowCreate(false);
|
|
}}
|
|
>
|
|
<DialogContent className="max-h-[90vh] max-w-3xl overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>Create notification</DialogTitle>
|
|
</DialogHeader>
|
|
<NotificationForm key="create" mode="create" onClose={() => setShowCreate(false)} />
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<Paragraph className="text-text-dimmed">
|
|
{total} notifications (page {page} of {pageCount || 1})
|
|
</Paragraph>
|
|
<label className="flex items-center gap-2 text-xs text-text-dimmed">
|
|
<Checkbox checked={hideInactive} onChange={toggleHideInactive} />
|
|
Hide inactive
|
|
</label>
|
|
</div>
|
|
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHeaderCell>Title</TableHeaderCell>
|
|
<TableHeaderCell>Surface</TableHeaderCell>
|
|
<TableHeaderCell>Scope</TableHeaderCell>
|
|
<TableHeaderCell>Type</TableHeaderCell>
|
|
<TableHeaderCell>Starts (UTC)</TableHeaderCell>
|
|
<TableHeaderCell>Ends (UTC)</TableHeaderCell>
|
|
<TableHeaderCell>Seen</TableHeaderCell>
|
|
<TableHeaderCell>Clicked</TableHeaderCell>
|
|
<TableHeaderCell>Dismissed</TableHeaderCell>
|
|
<TableHeaderCell>Status</TableHeaderCell>
|
|
<TableHeaderCell></TableHeaderCell>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{notifications.length === 0 ? (
|
|
<TableBlankRow colSpan={10}>
|
|
<Paragraph>No notifications found</Paragraph>
|
|
</TableBlankRow>
|
|
) : (
|
|
notifications.map((n) => {
|
|
const status = getNotificationStatus(n);
|
|
const _isActive = status === "active";
|
|
return (
|
|
<TableRow key={n.id} className="group/row">
|
|
<TableCell>
|
|
<button
|
|
type="button"
|
|
onClick={() => setDetailNotification(n)}
|
|
className="text-left text-sm font-medium text-text-bright transition-colors hover:text-indigo-400"
|
|
>
|
|
{n.title}
|
|
</button>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge color={n.surface === "CLI" ? "amber" : "blue"}>{n.surface}</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge color={n.scope === "GLOBAL" ? "green" : "gray"}>{n.scope}</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="text-xs text-text-dimmed">{n.payloadType ?? "—"}</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="text-xs text-text-dimmed">{formatDate(n.startsAt)}</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="text-xs text-text-dimmed">{formatDate(n.endsAt)}</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="font-mono text-xs">{n.stats.seen}</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="font-mono text-xs">{n.stats.clicked}</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="font-mono text-xs">{n.stats.dismissed}</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<StatusBadge status={status} />
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center justify-end gap-1 opacity-0 transition-opacity group-hover/row:opacity-100">
|
|
{status === "pending" && <PublishNowButton notificationId={n.id} />}
|
|
{(status === "pending" ||
|
|
status === "releasing" ||
|
|
status === "active") && (
|
|
<Button variant="tertiary/small" onClick={() => setEditNotification(n)}>
|
|
Edit
|
|
</Button>
|
|
)}
|
|
{status !== "archived" && <ArchiveButton notificationId={n.id} />}
|
|
<DeleteConfirmationButton notificationId={n.id} />
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
|
|
<PaginationControls currentPage={page} totalPages={pageCount} />
|
|
</div>
|
|
|
|
<Dialog
|
|
open={detailNotification !== null}
|
|
onOpenChange={(open) => {
|
|
if (!open) setDetailNotification(null);
|
|
}}
|
|
>
|
|
<DialogContent className="max-w-2xl">
|
|
{detailNotification && (
|
|
<>
|
|
<DialogHeader>
|
|
<DialogTitle>{detailNotification.title}</DialogTitle>
|
|
</DialogHeader>
|
|
<NotificationDetailContent notification={detailNotification} />
|
|
</>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog
|
|
open={editNotification !== null}
|
|
onOpenChange={(open) => {
|
|
if (!open) setEditNotification(null);
|
|
}}
|
|
>
|
|
<DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
|
|
{editNotification && (
|
|
<>
|
|
<DialogHeader>
|
|
<DialogTitle>Edit notification</DialogTitle>
|
|
</DialogHeader>
|
|
<NotificationForm
|
|
key={editNotification.id}
|
|
mode="edit"
|
|
notification={editNotification}
|
|
onClose={() => setEditNotification(null)}
|
|
/>
|
|
</>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
function ArchiveButton({ notificationId }: { notificationId: string }) {
|
|
const fetcher = useFetcher();
|
|
return (
|
|
<fetcher.Form method="post" className="inline">
|
|
<input type="hidden" name="_action" value="archive" />
|
|
<input type="hidden" name="notificationId" value={notificationId} />
|
|
<Button type="submit" variant="danger/small" disabled={fetcher.state !== "idle"}>
|
|
Archive
|
|
</Button>
|
|
</fetcher.Form>
|
|
);
|
|
}
|
|
|
|
function PublishNowButton({ notificationId }: { notificationId: string }) {
|
|
const [open, setOpen] = useState(false);
|
|
const fetcher = useFetcher();
|
|
|
|
return (
|
|
<Alert open={open} onOpenChange={setOpen}>
|
|
<AlertTrigger asChild>
|
|
<Button variant="secondary/small">Publish now</Button>
|
|
</AlertTrigger>
|
|
<AlertContent>
|
|
<AlertHeader>
|
|
<AlertTitle>Publish notification now</AlertTitle>
|
|
<AlertDescription>
|
|
This will make the notification immediately visible to users.
|
|
</AlertDescription>
|
|
</AlertHeader>
|
|
<AlertFooter>
|
|
<AlertCancel asChild>
|
|
<Button variant="secondary/small">Cancel</Button>
|
|
</AlertCancel>
|
|
<fetcher.Form method="post" onSubmit={() => setOpen(false)}>
|
|
<input type="hidden" name="_action" value="publish-now" />
|
|
<input type="hidden" name="notificationId" value={notificationId} />
|
|
<Button type="submit" variant="primary/small">
|
|
Publish
|
|
</Button>
|
|
</fetcher.Form>
|
|
</AlertFooter>
|
|
</AlertContent>
|
|
</Alert>
|
|
);
|
|
}
|
|
|
|
function DeleteConfirmationButton({ notificationId }: { notificationId: string }) {
|
|
const [open, setOpen] = useState(false);
|
|
const fetcher = useFetcher();
|
|
|
|
return (
|
|
<Alert open={open} onOpenChange={setOpen}>
|
|
<AlertTrigger asChild>
|
|
<Button variant="tertiary/small">
|
|
<TrashIcon className="size-3.5 text-text-dimmed" />
|
|
</Button>
|
|
</AlertTrigger>
|
|
<AlertContent>
|
|
<AlertHeader>
|
|
<AlertTitle>Delete notification</AlertTitle>
|
|
<AlertDescription>
|
|
This will permanently delete this notification and all its interaction data. This action
|
|
cannot be undone.
|
|
</AlertDescription>
|
|
</AlertHeader>
|
|
<AlertFooter>
|
|
<AlertCancel asChild>
|
|
<Button variant="secondary/small">Cancel</Button>
|
|
</AlertCancel>
|
|
<fetcher.Form method="post" onSubmit={() => setOpen(false)}>
|
|
<input type="hidden" name="_action" value="delete" />
|
|
<input type="hidden" name="notificationId" value={notificationId} />
|
|
<Button type="submit" variant="danger/small">
|
|
Delete
|
|
</Button>
|
|
</fetcher.Form>
|
|
</AlertFooter>
|
|
</AlertContent>
|
|
</Alert>
|
|
);
|
|
}
|
|
|
|
type NotificationFormDefaults = {
|
|
id?: string;
|
|
title?: string;
|
|
surface?: string;
|
|
scope?: string;
|
|
userId?: string | null;
|
|
organizationId?: string | null;
|
|
projectId?: string | null;
|
|
priority?: number;
|
|
startsAt?: Date;
|
|
endsAt?: Date;
|
|
payloadTitle?: string | null;
|
|
payloadType?: string | null;
|
|
payloadDescription?: string | null;
|
|
payloadActionUrl?: string | null;
|
|
payloadImage?: string | null;
|
|
payloadDismissOnAction?: boolean;
|
|
payloadDiscovery?: {
|
|
filePatterns: string[];
|
|
contentPattern?: string;
|
|
matchBehavior: "show-if-found" | "show-if-not-found";
|
|
} | null;
|
|
cliMaxShowCount?: number | null;
|
|
cliMaxDaysAfterFirstSeen?: number | null;
|
|
cliShowEvery?: number | null;
|
|
};
|
|
|
|
function NotificationForm({
|
|
mode,
|
|
notification: n,
|
|
onClose,
|
|
}: {
|
|
mode: "create" | "edit";
|
|
notification?: NotificationFormDefaults;
|
|
onClose: () => void;
|
|
}) {
|
|
const fetcher = useFetcher<{ success?: boolean; error?: string; previewId?: string }>();
|
|
const [surface, setSurface] = useState<"CLI" | "WEBAPP">(
|
|
(n?.surface as "CLI" | "WEBAPP") ?? "WEBAPP"
|
|
);
|
|
const [payloadType, setPayloadType] = useState<string>(n?.payloadType ?? "card");
|
|
const [scope, setScope] = useState<string>(n?.scope ?? "GLOBAL");
|
|
const [title, setTitle] = useState(n?.payloadTitle ?? "");
|
|
const [description, setDescription] = useState(n?.payloadDescription ?? "");
|
|
const [actionUrl, setActionUrl] = useState(n?.payloadActionUrl ?? "");
|
|
const [image, setImage] = useState(n?.payloadImage ?? "");
|
|
const [discoveryMatchBehavior, setDiscoveryMatchBehavior] = useState<string>(
|
|
n?.payloadDiscovery?.matchBehavior ?? DISCOVERY_MATCH_NONE
|
|
);
|
|
|
|
const typeOptions = surface === "WEBAPP" ? WEBAPP_TYPES : CLI_TYPES;
|
|
|
|
const handleSurfaceChange = (newSurface: "CLI" | "WEBAPP") => {
|
|
setSurface(newSurface);
|
|
const newTypes = newSurface === "WEBAPP" ? WEBAPP_TYPES : CLI_TYPES;
|
|
if (!newTypes.includes(payloadType as any)) {
|
|
setPayloadType(newTypes[0]);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (fetcher.data?.success && !fetcher.data.previewId) {
|
|
onClose();
|
|
}
|
|
}, [fetcher.data, onClose]);
|
|
|
|
const isEdit = mode === "edit";
|
|
|
|
return (
|
|
<fetcher.Form method="post" className="space-y-3">
|
|
{isEdit && (
|
|
<>
|
|
<input type="hidden" name="_action" value="edit" />
|
|
<input type="hidden" name="notificationId" value={n?.id} />
|
|
</>
|
|
)}
|
|
|
|
<input type="hidden" name="surface" value={surface} />
|
|
<input type="hidden" name="payloadType" value={payloadType} />
|
|
<input type="hidden" name="scope" value={scope} />
|
|
|
|
<div>
|
|
<Label variant="small">
|
|
Admin name <span className="text-red-400">*</span>
|
|
</Label>
|
|
<Input
|
|
name="adminLabel"
|
|
variant="medium"
|
|
fullWidth
|
|
defaultValue={n?.title ?? ""}
|
|
placeholder="Internal name for this notification"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<div className="w-28">
|
|
<Label variant="small">Show in</Label>
|
|
<Select<"CLI" | "WEBAPP", "CLI" | "WEBAPP">
|
|
value={surface}
|
|
setValue={(v) => handleSurfaceChange(v as "CLI" | "WEBAPP")}
|
|
variant="tertiary/medium"
|
|
items={["WEBAPP", "CLI"]}
|
|
text={(v) => v}
|
|
className="mt-1 w-full"
|
|
>
|
|
{(items) =>
|
|
items.map((item) => (
|
|
<SelectItem key={item} value={item}>
|
|
{item}
|
|
</SelectItem>
|
|
))
|
|
}
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="w-28">
|
|
<Label variant="small">Display as</Label>
|
|
<Select<string, string>
|
|
value={payloadType}
|
|
setValue={setPayloadType}
|
|
variant="tertiary/medium"
|
|
items={[...typeOptions]}
|
|
text={(v) => v}
|
|
className="mt-1 w-full"
|
|
>
|
|
{(items) =>
|
|
items.map((item) => (
|
|
<SelectItem key={item} value={item}>
|
|
{item}
|
|
</SelectItem>
|
|
))
|
|
}
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="w-20">
|
|
<Label variant="small">Priority</Label>
|
|
<Input
|
|
name="priority"
|
|
variant="medium"
|
|
fullWidth
|
|
defaultValue={String(n?.priority ?? 0)}
|
|
type="number"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
<Label variant="small">Scope</Label>
|
|
<Select<string, string>
|
|
value={scope}
|
|
setValue={setScope}
|
|
variant="tertiary/medium"
|
|
items={["GLOBAL", "USER", "ORGANIZATION", "PROJECT"]}
|
|
text={(v) => v}
|
|
className="mt-1 w-full"
|
|
>
|
|
{(items) =>
|
|
items.map((item) => (
|
|
<SelectItem key={item} value={item}>
|
|
{item}
|
|
</SelectItem>
|
|
))
|
|
}
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{scope === "USER" && (
|
|
<div>
|
|
<Label variant="small">User ID</Label>
|
|
<Input
|
|
name="scopeUserId"
|
|
variant="medium"
|
|
fullWidth
|
|
defaultValue={n?.userId ?? ""}
|
|
placeholder="User ID"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{scope === "ORGANIZATION" && (
|
|
<div>
|
|
<Label variant="small">Organization ID</Label>
|
|
<Input
|
|
name="scopeOrganizationId"
|
|
variant="medium"
|
|
fullWidth
|
|
defaultValue={n?.organizationId ?? ""}
|
|
placeholder="Organization ID"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{scope === "PROJECT" && (
|
|
<div>
|
|
<Label variant="small">Project ID</Label>
|
|
<Input
|
|
name="scopeProjectId"
|
|
variant="medium"
|
|
fullWidth
|
|
defaultValue={n?.projectId ?? ""}
|
|
placeholder="Project ID"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* CLI live preview */}
|
|
{surface === "CLI" && (title || description) && (
|
|
<div>
|
|
<Label variant="small">CLI preview</Label>
|
|
<div className="mt-1 rounded border border-grid-dimmed bg-background-deep p-3 font-mono text-xs leading-relaxed">
|
|
{title && (
|
|
<p className="font-bold text-text-bright">
|
|
<CliColorMarkup text={title} fallbackClass="text-text-bright" />
|
|
</p>
|
|
)}
|
|
{description && (
|
|
<p className="text-text-dimmed">
|
|
<CliColorMarkup text={description} fallbackClass="text-text-dimmed" />
|
|
</p>
|
|
)}
|
|
{actionUrl && <p className="text-text-dimmed underline">{actionUrl}</p>}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<hr className="-mx-4 border-grid-bright" />
|
|
|
|
{surface === "WEBAPP" ? (
|
|
<div className="flex gap-3">
|
|
<div className="min-w-0 flex-1 space-y-3">
|
|
<div>
|
|
<Label variant="small">
|
|
Title <span className="text-red-400">*</span>
|
|
</Label>
|
|
<TextArea
|
|
name="title"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
rows={2}
|
|
placeholder="Notification title"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label variant="small">
|
|
Description (markdown) <span className="text-red-400">*</span>
|
|
</Label>
|
|
<TextArea
|
|
name="description"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
rows={6}
|
|
placeholder="Supports **bold**, *italic*, `code`, [links](url)..."
|
|
className="mt-1 font-mono"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-56 shrink-0">
|
|
<Label variant="small">Preview</Label>
|
|
<div className="mt-1">
|
|
<NotificationCard
|
|
title={title || "Notification title"}
|
|
description={description || "Description preview will appear here..."}
|
|
actionUrl={actionUrl || undefined}
|
|
image={image || undefined}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div>
|
|
<Label variant="small">
|
|
Title <span className="text-red-400">*</span>
|
|
</Label>
|
|
<TextArea
|
|
name="title"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
rows={2}
|
|
placeholder="Notification title"
|
|
className="mt-1 font-mono"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label variant="small">
|
|
Description <span className="text-red-400">*</span>
|
|
</Label>
|
|
<TextArea
|
|
name="description"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
rows={6}
|
|
placeholder="Plain text description..."
|
|
className="mt-1 font-mono"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<div>
|
|
<Label variant="small">Action URL</Label>
|
|
<Input
|
|
name="actionUrl"
|
|
variant="medium"
|
|
fullWidth
|
|
placeholder="https://..."
|
|
value={actionUrl}
|
|
onChange={(e) => setActionUrl(e.target.value)}
|
|
className="mt-1"
|
|
/>
|
|
{surface === "WEBAPP" && (
|
|
<CheckboxWithLabel
|
|
name="dismissOnAction"
|
|
value="true"
|
|
defaultChecked={n?.payloadDismissOnAction ?? false}
|
|
variant="simple/small"
|
|
label="Dismiss on action click"
|
|
className="mt-2"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{surface === "WEBAPP" && (
|
|
<div>
|
|
<Label variant="small">Image URL</Label>
|
|
<Input
|
|
name="image"
|
|
variant="medium"
|
|
fullWidth
|
|
placeholder="https://example.com/image.png"
|
|
value={image}
|
|
onChange={(e) => setImage(e.target.value)}
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<Label variant="small">
|
|
Starts at (UTC) {isEdit && <span className="text-red-400">*</span>}
|
|
</Label>
|
|
<input
|
|
name="startsAt"
|
|
type="datetime-local"
|
|
defaultValue={
|
|
n?.startsAt ? toDatetimeLocalUTC(new Date(n.startsAt)) : defaultStartsAt()
|
|
}
|
|
className="mt-1 block h-8 w-full rounded border border-background-bright bg-background-hover px-2 text-sm text-text-bright transition hover:border-border-bright hover:bg-secondary"
|
|
required={isEdit}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label variant="small">
|
|
Ends at (UTC) <span className="text-red-400">*</span>
|
|
</Label>
|
|
<input
|
|
name="endsAt"
|
|
type="datetime-local"
|
|
defaultValue={n?.endsAt ? toDatetimeLocalUTC(new Date(n.endsAt)) : defaultEndsAt()}
|
|
className="mt-1 block h-8 w-full rounded border border-background-bright bg-background-hover px-2 text-sm text-text-bright transition hover:border-border-bright hover:bg-secondary"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{surface === "CLI" && (
|
|
<>
|
|
<input type="hidden" name="discoveryMatchBehavior" value={discoveryMatchBehavior} />
|
|
|
|
<div className="grid grid-cols-3 gap-3 rounded border border-grid-dimmed bg-background-deep p-3">
|
|
<div>
|
|
<Label variant="small">Max show count</Label>
|
|
<Input
|
|
name="cliMaxShowCount"
|
|
variant="medium"
|
|
fullWidth
|
|
type="number"
|
|
defaultValue={n?.cliMaxShowCount != null ? String(n.cliMaxShowCount) : ""}
|
|
placeholder="e.g. 5"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label variant="small">Max days after first seen</Label>
|
|
<Input
|
|
name="cliMaxDaysAfterFirstSeen"
|
|
variant="medium"
|
|
fullWidth
|
|
type="number"
|
|
defaultValue={
|
|
n?.cliMaxDaysAfterFirstSeen != null ? String(n.cliMaxDaysAfterFirstSeen) : ""
|
|
}
|
|
placeholder="e.g. 7"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label variant="small">Show every (nth)</Label>
|
|
<Input
|
|
name="cliShowEvery"
|
|
variant="medium"
|
|
fullWidth
|
|
type="number"
|
|
defaultValue={n?.cliShowEvery != null ? String(n.cliShowEvery) : ""}
|
|
placeholder="e.g. 3"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3 rounded border border-grid-dimmed bg-background-deep p-3">
|
|
<Paragraph variant="small" className="text-text-dimmed">
|
|
Discovery (optional) — only show notification if file pattern matches
|
|
</Paragraph>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div>
|
|
<Label variant="small">File patterns</Label>
|
|
<Input
|
|
name="discoveryFilePatterns"
|
|
variant="medium"
|
|
fullWidth
|
|
defaultValue={n?.payloadDiscovery?.filePatterns.join(", ") ?? ""}
|
|
placeholder="trigger.config.ts, trigger.config.js"
|
|
className="mt-1"
|
|
/>
|
|
<Hint>Comma-separated</Hint>
|
|
</div>
|
|
<div>
|
|
<Label variant="small">Content pattern</Label>
|
|
<Input
|
|
name="discoveryContentPattern"
|
|
variant="medium"
|
|
fullWidth
|
|
defaultValue={n?.payloadDiscovery?.contentPattern ?? ""}
|
|
placeholder="e.g. syncVercelEnvVars"
|
|
className="mt-1"
|
|
/>
|
|
<Hint>Regex (optional)</Hint>
|
|
</div>
|
|
<div>
|
|
<Label variant="small">Match behavior</Label>
|
|
<Select<string, string>
|
|
value={discoveryMatchBehavior}
|
|
setValue={setDiscoveryMatchBehavior}
|
|
variant="tertiary/medium"
|
|
items={[DISCOVERY_MATCH_NONE, "show-if-found", "show-if-not-found"]}
|
|
placeholder={DISCOVERY_MATCH_LABEL}
|
|
text={(v) => (v === DISCOVERY_MATCH_NONE ? DISCOVERY_MATCH_LABEL : v)}
|
|
className="mt-1 w-full"
|
|
>
|
|
{(items) =>
|
|
items.map((item) => (
|
|
<SelectItem key={item === DISCOVERY_MATCH_NONE ? "none" : item} value={item}>
|
|
{item === DISCOVERY_MATCH_NONE ? DISCOVERY_MATCH_LABEL : item}
|
|
</SelectItem>
|
|
))
|
|
}
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<DialogFooter className="items-center">
|
|
<div className="flex items-center gap-3">
|
|
<Button type="button" variant="tertiary/medium" onClick={onClose}>
|
|
Cancel
|
|
</Button>
|
|
{fetcher.data?.error && (
|
|
<span className="text-xs text-red-400">{fetcher.data.error}</span>
|
|
)}
|
|
{!isEdit && fetcher.data?.success && !fetcher.data.previewId && (
|
|
<span className="text-xs text-green-400">Created successfully</span>
|
|
)}
|
|
{!isEdit && fetcher.data?.previewId && (
|
|
<span className="text-xs text-green-400">
|
|
Preview sent (ID: {fetcher.data.previewId})
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{isEdit ? (
|
|
<Button type="submit" variant="primary/medium" disabled={fetcher.state !== "idle"}>
|
|
{fetcher.state !== "idle" ? "Saving..." : "Save changes"}
|
|
</Button>
|
|
) : (
|
|
<>
|
|
<Button
|
|
type="submit"
|
|
name="_action"
|
|
value="create-preview"
|
|
variant="tertiary/medium"
|
|
disabled={fetcher.state !== "idle"}
|
|
>
|
|
Send preview to me
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
name="_action"
|
|
value="create"
|
|
variant="primary/medium"
|
|
disabled={fetcher.state !== "idle"}
|
|
>
|
|
{fetcher.state !== "idle" ? "Creating..." : "Create"}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</DialogFooter>
|
|
</fetcher.Form>
|
|
);
|
|
}
|
|
|
|
function NotificationDetailContent({
|
|
notification: n,
|
|
}: {
|
|
notification: {
|
|
id: string;
|
|
friendlyId: string;
|
|
surface: string;
|
|
scope: string;
|
|
priority: number;
|
|
startsAt: Date;
|
|
endsAt: Date;
|
|
archivedAt: Date | null;
|
|
createdAt: Date;
|
|
payloadTitle: string | null;
|
|
payloadType: string | null;
|
|
payloadDescription: string | null;
|
|
payloadActionUrl: string | null | undefined;
|
|
payloadImage: string | null | undefined;
|
|
cliMaxShowCount: number | null;
|
|
cliMaxDaysAfterFirstSeen: number | null;
|
|
cliShowEvery: number | null;
|
|
stats: { seen: number; clicked: number; dismissed: number };
|
|
};
|
|
}) {
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Preview */}
|
|
{n.payloadTitle && n.payloadDescription && (
|
|
<div>
|
|
<p className="mb-1 text-xs font-medium text-text-dimmed">Preview</p>
|
|
{n.surface === "WEBAPP" ? (
|
|
<NotificationCard
|
|
title={n.payloadTitle}
|
|
description={n.payloadDescription}
|
|
actionUrl={n.payloadActionUrl ?? undefined}
|
|
image={n.payloadImage ?? undefined}
|
|
/>
|
|
) : (
|
|
<div className="rounded border border-grid-dimmed bg-background-deep p-3 font-mono text-xs leading-relaxed">
|
|
<p className="font-bold text-text-bright">
|
|
<CliColorMarkup text={n.payloadTitle} fallbackClass="text-text-bright" />
|
|
</p>
|
|
<p className="text-text-dimmed">
|
|
<CliColorMarkup text={n.payloadDescription} fallbackClass="text-text-dimmed" />
|
|
</p>
|
|
{n.payloadActionUrl && (
|
|
<p className="text-text-dimmed underline">{n.payloadActionUrl}</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Details grid */}
|
|
<div className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
|
|
<DetailRow label="ID" value={n.friendlyId} />
|
|
<DetailRow label="Surface" value={n.surface} />
|
|
<DetailRow label="Scope" value={n.scope} />
|
|
<DetailRow label="Type" value={n.payloadType ?? "—"} />
|
|
<DetailRow label="Priority" value={String(n.priority)} />
|
|
<DetailRow label="Created" value={formatDate(n.createdAt)} />
|
|
<DetailRow label="Starts" value={formatDate(n.startsAt)} />
|
|
<DetailRow label="Ends" value={formatDate(n.endsAt)} />
|
|
{n.archivedAt && <DetailRow label="Archived" value={formatDate(n.archivedAt)} />}
|
|
{n.payloadActionUrl && <DetailRow label="Action URL" value={n.payloadActionUrl} />}
|
|
</div>
|
|
|
|
{/* CLI settings */}
|
|
{n.surface === "CLI" &&
|
|
(n.cliMaxShowCount || n.cliMaxDaysAfterFirstSeen || n.cliShowEvery) && (
|
|
<div>
|
|
<p className="mb-1 text-xs font-medium text-text-dimmed">CLI Settings</p>
|
|
<div className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
|
|
{n.cliMaxShowCount != null && (
|
|
<DetailRow label="Max show count" value={String(n.cliMaxShowCount)} />
|
|
)}
|
|
{n.cliMaxDaysAfterFirstSeen != null && (
|
|
<DetailRow
|
|
label="Max days after first seen"
|
|
value={String(n.cliMaxDaysAfterFirstSeen)}
|
|
/>
|
|
)}
|
|
{n.cliShowEvery != null && (
|
|
<DetailRow label="Show every N-th" value={String(n.cliShowEvery)} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Stats */}
|
|
<div>
|
|
<p className="mb-1 text-xs font-medium text-text-dimmed">Stats</p>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<StatCard label="Seen" value={n.stats.seen} />
|
|
<StatCard label="Clicked" value={n.stats.clicked} />
|
|
<StatCard label="Dismissed" value={n.stats.dismissed} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DetailRow({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<>
|
|
<span className="text-text-dimmed">{label}</span>
|
|
<span className="break-all text-text-bright">{value}</span>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function StatCard({ label, value }: { label: string; value: number }) {
|
|
return (
|
|
<div className="rounded border border-grid-dimmed bg-background-deep p-2 text-center">
|
|
<p className="font-mono text-lg font-medium text-text-bright">{value}</p>
|
|
<p className="text-xs text-text-dimmed">{label}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const CLI_COLOR_MAP: Record<string, string> = {
|
|
red: "text-red-500",
|
|
green: "text-green-500",
|
|
yellow: "text-yellow-500",
|
|
blue: "text-blue-500",
|
|
magenta: "text-fuchsia-500",
|
|
cyan: "text-cyan-500",
|
|
white: "text-white",
|
|
gray: "text-gray-400",
|
|
redBright: "text-red-400",
|
|
greenBright: "text-green-400",
|
|
yellowBright: "text-yellow-400",
|
|
blueBright: "text-blue-400",
|
|
magentaBright: "text-fuchsia-400",
|
|
cyanBright: "text-cyan-400",
|
|
whiteBright: "text-white",
|
|
bold: "font-bold",
|
|
};
|
|
|
|
function CliColorMarkup({ text, fallbackClass }: { text: string; fallbackClass?: string }) {
|
|
const parts: React.ReactNode[] = [];
|
|
let pos = 0;
|
|
let key = 0;
|
|
|
|
while (pos < text.length) {
|
|
const braceIdx = text.indexOf("{", pos);
|
|
if (braceIdx === -1) {
|
|
parts.push(text.slice(pos));
|
|
break;
|
|
}
|
|
|
|
const closeIdx = text.indexOf("}", braceIdx);
|
|
if (closeIdx === -1) {
|
|
parts.push(text.slice(pos));
|
|
break;
|
|
}
|
|
|
|
const tagName = text.slice(braceIdx + 1, closeIdx);
|
|
if (CLI_COLOR_MAP[tagName]) {
|
|
// Found opening tag — look for matching close tag
|
|
const closeTag = `{/${tagName}}`;
|
|
const endIdx = text.indexOf(closeTag, closeIdx + 1);
|
|
if (endIdx !== -1) {
|
|
// Push text before the tag
|
|
if (braceIdx > pos) {
|
|
parts.push(
|
|
<span key={key++} className={fallbackClass}>
|
|
{text.slice(pos, braceIdx)}
|
|
</span>
|
|
);
|
|
}
|
|
// Push styled content
|
|
parts.push(
|
|
<span key={key++} className={CLI_COLOR_MAP[tagName]}>
|
|
{text.slice(closeIdx + 1, endIdx)}
|
|
</span>
|
|
);
|
|
pos = endIdx + closeTag.length;
|
|
continue;
|
|
}
|
|
}
|
|
|
|
// Not a recognized tag — treat as literal
|
|
parts.push(text.slice(pos, closeIdx + 1));
|
|
pos = closeIdx + 1;
|
|
}
|
|
|
|
return <>{parts}</>;
|
|
}
|
|
|
|
function Badge({
|
|
children,
|
|
color,
|
|
}: {
|
|
children: React.ReactNode;
|
|
color: "amber" | "blue" | "green" | "gray";
|
|
}) {
|
|
const colors = {
|
|
amber: "bg-amber-500/20 text-amber-400",
|
|
blue: "bg-blue-500/20 text-blue-400",
|
|
green: "bg-green-500/20 text-green-400",
|
|
gray: "bg-background-raised text-text-dimmed",
|
|
};
|
|
|
|
return (
|
|
<span
|
|
className={`inline-flex rounded-sm px-1.5 py-0.5 text-[11px] font-medium ${colors[color]}`}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function formatDate(date: string | Date): string {
|
|
const d = typeof date === "string" ? new Date(date) : date;
|
|
return d.toLocaleString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
hour: "numeric",
|
|
minute: "2-digit",
|
|
timeZone: "UTC",
|
|
});
|
|
}
|
|
|
|
function toDatetimeLocalUTC(date: Date): string {
|
|
const pad = (n: number) => String(n).padStart(2, "0");
|
|
return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}T${pad(
|
|
date.getUTCHours()
|
|
)}:${pad(date.getUTCMinutes())}`;
|
|
}
|
|
|
|
function defaultStartsAt(): string {
|
|
return toDatetimeLocalUTC(new Date(Date.now() + 24 * 60 * 60 * 1000));
|
|
}
|
|
|
|
function defaultEndsAt(): string {
|
|
return toDatetimeLocalUTC(new Date(Date.now() + 30 * 24 * 60 * 60 * 1000));
|
|
}
|
|
|
|
type NotificationStatus = "active" | "pending" | "releasing" | "expired" | "archived";
|
|
|
|
const FIVE_MINUTES_MS = 5 * 60 * 1000;
|
|
|
|
function getNotificationStatus(n: {
|
|
archivedAt: string | Date | null;
|
|
startsAt: string | Date;
|
|
endsAt: string | Date;
|
|
}): NotificationStatus {
|
|
if (n.archivedAt) return "archived";
|
|
const now = new Date();
|
|
const starts = typeof n.startsAt === "string" ? new Date(n.startsAt) : n.startsAt;
|
|
const ends = typeof n.endsAt === "string" ? new Date(n.endsAt) : n.endsAt;
|
|
if (now < starts) {
|
|
return starts.getTime() - now.getTime() <= FIVE_MINUTES_MS ? "releasing" : "pending";
|
|
}
|
|
if (now >= ends) return "expired";
|
|
return "active";
|
|
}
|
|
|
|
function StatusBadge({ status }: { status: NotificationStatus }) {
|
|
const styles: Record<NotificationStatus, string> = {
|
|
active: "bg-green-500/20 text-green-400",
|
|
pending: "bg-blue-500/20 text-blue-400",
|
|
releasing: "bg-amber-500/20 text-amber-400",
|
|
expired: "bg-background-raised text-text-dimmed",
|
|
archived: "bg-red-500/20 text-red-400",
|
|
};
|
|
|
|
return (
|
|
<span
|
|
className={`inline-flex rounded-sm px-1.5 py-0.5 text-[11px] font-medium ${styles[status]}`}
|
|
>
|
|
{status}
|
|
</span>
|
|
);
|
|
}
|