) {
+ return (
+
+ {children}
+
+ );
+}
+
export function ComposerFooter({
children,
className,
diff --git a/apps/dashboard/src/components/content/detail.tsx b/apps/dashboard/src/components/content/detail.tsx
index 81511a8a..374eead3 100644
--- a/apps/dashboard/src/components/content/detail.tsx
+++ b/apps/dashboard/src/components/content/detail.tsx
@@ -3,8 +3,12 @@
import { Textarea } from "@openstatus/ui/components/ui/textarea";
import { cn } from "@openstatus/ui/lib/utils";
import { type VariantProps, cva } from "class-variance-authority";
+import { format } from "date-fns";
import { useState } from "react";
+import { HoverCardTimestamp } from "@/components/common/hover-card-timestamp";
+import { useHydrated } from "@/hooks/use-hydrated";
+
export function DetailHeader({
children,
className,
@@ -213,6 +217,34 @@ export function DetailMetaItem({
);
}
+/** Absolute by default; pass children for a relative or custom label. */
+export function DetailMetaTime({
+ date,
+ children,
+ className,
+ ...props
+}: Omit
, "dateTime"> & { date: Date }) {
+ // local-time text differs between server and browser
+ const hydrated = useHydrated();
+ return (
+
+
+
+ );
+}
+
export function DetailContent({
children,
className,
diff --git a/apps/dashboard/src/components/content/property-list.tsx b/apps/dashboard/src/components/content/property-list.tsx
index 966177f2..7cc2ebdf 100644
--- a/apps/dashboard/src/components/content/property-list.tsx
+++ b/apps/dashboard/src/components/content/property-list.tsx
@@ -1,7 +1,10 @@
+import { ArrowUpRight } from "@openstatus/icons";
import { Input } from "@openstatus/ui/components/ui/input";
import { SelectTrigger } from "@openstatus/ui/components/ui/select";
import { cn } from "@openstatus/ui/lib/utils";
+import { Link } from "@/components/common/link";
+
export function PropertyList({
children,
className,
@@ -72,6 +75,27 @@ export function PropertyValue({
);
}
+// pr-2 lines the arrow up with select chevrons on sibling rows.
+export function PropertyLink({
+ children,
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ {children}
+
+
+ );
+}
+
// Borderless until hovered; -ml-2 keeps the control's text on the value column's edge.
const propertyControlClassName =
"hover:bg-accent dark:hover:bg-accent/50 -ml-2 h-8 w-[calc(100%+0.5rem)] min-w-0 border-transparent bg-transparent px-2 shadow-none dark:bg-transparent";
diff --git a/apps/dashboard/src/components/content/section.tsx b/apps/dashboard/src/components/content/section.tsx
index 96530c59..bbf12c6b 100644
--- a/apps/dashboard/src/components/content/section.tsx
+++ b/apps/dashboard/src/components/content/section.tsx
@@ -79,7 +79,7 @@ export function SectionGroup({
}: React.ComponentProps<"div">) {
return (
{children}
diff --git a/apps/dashboard/src/components/content/timeline.tsx b/apps/dashboard/src/components/content/timeline.tsx
index 31f7130f..2cc0b321 100644
--- a/apps/dashboard/src/components/content/timeline.tsx
+++ b/apps/dashboard/src/components/content/timeline.tsx
@@ -1,8 +1,17 @@
+"use client";
+
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@openstatus/ui/components/ui/tooltip";
import { cn } from "@openstatus/ui/lib/utils";
import { type VariantProps, cva } from "class-variance-authority";
import { formatDistanceToNowStrict } from "date-fns";
import { HoverCardTimestamp } from "@/components/common/hover-card-timestamp";
+import { UserAvatar } from "@/components/common/user-avatar";
+import { useHydrated } from "@/hooks/use-hydrated";
export function Timeline({
children,
@@ -78,6 +87,105 @@ export function TimelineIndicator({
);
}
+// Same size as the indicator so the rail starts below it; children render
+// outside the avatar's overflow clip (see `TimelineAvatarBadge`).
+export function TimelineAvatar({
+ children,
+ className,
+ ...props
+}: React.ComponentProps
& { children?: React.ReactNode }) {
+ return (
+
+
+ {children}
+
+ );
+}
+
+// Event icon pinned to the avatar's corner; the ring lifts it off the photo.
+export function TimelineAvatarBadge({
+ children,
+ className,
+ variant,
+ ...props
+}: React.ComponentProps<"span"> &
+ VariantProps) {
+ return (
+ svg]:size-2.5",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+
+ );
+}
+
+type Actor = {
+ name: string | null;
+ email: string | null;
+ photoUrl?: string | null;
+};
+
+// Name and email on hover; the avatar is the only place the actor is shown.
+export function TimelineActorTooltip({
+ actor,
+ children,
+}: {
+ actor: Actor;
+ children: React.ReactNode;
+}) {
+ if (!actor.name && !actor.email) return children;
+ return (
+
+
+ {children}
+
+
+ {actor.name && actor.name !== actor.email ? (
+ {actor.name}
+ ) : null}
+ {actor.email ? {actor.email}
: null}
+
+
+ );
+}
+
+// Inline actor avatar for rows whose rail shows the event indicator.
+export function TimelineActor({
+ actor,
+ className,
+ ...props
+}: Omit, "name" | "src"> & {
+ actor: Actor;
+}) {
+ return (
+
+
+
+ );
+}
+
// pt-1.5 centers the first text line on the indicator.
export function TimelineContent({
children,
@@ -156,18 +264,24 @@ export function TimelineTime({
className,
...props
}: Omit, "dateTime"> & { date: Date }) {
+ // local-time text differs between server and browser
+ const hydrated = useHydrated();
return (
);
diff --git a/apps/dashboard/src/components/data-table/maintenances/columns.tsx b/apps/dashboard/src/components/data-table/maintenances/columns.tsx
index 2de5d98d..4b9a98e6 100644
--- a/apps/dashboard/src/components/data-table/maintenances/columns.tsx
+++ b/apps/dashboard/src/components/data-table/maintenances/columns.tsx
@@ -4,8 +4,10 @@ import type { RouterOutputs } from "@openstatus/api";
import type { ColumnDef } from "@tanstack/react-table";
import { formatDistanceStrict } from "date-fns";
-import { ProcessMessage } from "@/components/content/process-message";
+import { Link } from "@/components/common/link";
+import { TableCellBadge } from "@/components/data-table/table-cell-badge";
import { TableCellDate } from "@/components/data-table/table-cell-date";
+import { TableCellLink } from "@/components/data-table/table-cell-link";
import { TableCellNumber } from "@/components/data-table/table-cell-number";
import { DataTableColumnHeader } from "@/components/ui/data-table/data-table-column-header";
@@ -17,6 +19,15 @@ export const columns: ColumnDef[] = [
{
accessorKey: "title",
header: "Title",
+ cell: ({ row }) => {
+ const { id, pageId } = row.original;
+ return (
+
+ );
+ },
enableSorting: false,
enableHiding: false,
meta: {
@@ -24,15 +35,26 @@ export const columns: ColumnDef[] = [
},
},
{
- accessorKey: "message",
- header: "Message",
+ id: "pageComponents",
+ accessorFn: (row) => row.pageComponents,
+ header: "Affected",
enableSorting: false,
- enableHiding: false,
cell: ({ row }) => {
- const value = String(row.getValue("message"));
+ const value = row.original.pageComponents;
+ if (value.length === 0) {
+ return -
;
+ }
return (
-
-
+
+ {value.map((c) =>
+ c.monitorId ? (
+
+
+
+ ) : (
+
+ ),
+ )}
);
},
diff --git a/apps/dashboard/src/components/data-table/managed-incidents/columns.tsx b/apps/dashboard/src/components/data-table/managed-incidents/columns.tsx
index b5f4c34e..95e4a6d2 100644
--- a/apps/dashboard/src/components/data-table/managed-incidents/columns.tsx
+++ b/apps/dashboard/src/components/data-table/managed-incidents/columns.tsx
@@ -16,14 +16,6 @@ import {
type ManagedIncident = NonNullable
[number];
export const columns: ColumnDef[] = [
- {
- accessorKey: "severity",
- header: "Severity",
- enableSorting: false,
- cell: ({ row }) => (
-
- ),
- },
{
accessorKey: "title",
header: "Title",
@@ -36,6 +28,14 @@ export const columns: ColumnDef[] = [
),
meta: { cellClassName: "max-w-[260px] truncate" },
},
+ {
+ accessorKey: "severity",
+ header: "Severity",
+ enableSorting: false,
+ cell: ({ row }) => (
+
+ ),
+ },
{
accessorKey: "status",
header: "Status",
diff --git a/apps/dashboard/src/components/data-table/overview-events/columns.tsx b/apps/dashboard/src/components/data-table/overview-events/columns.tsx
index 58279932..f7f5ba14 100644
--- a/apps/dashboard/src/components/data-table/overview-events/columns.tsx
+++ b/apps/dashboard/src/components/data-table/overview-events/columns.tsx
@@ -59,7 +59,7 @@ function getTitle(event: OverviewEvent): { title: string; href: string } {
case "maintenance":
return {
title: event.maintenance.title,
- href: `/status-pages/${event.maintenance.pageId}/maintenances`,
+ href: `/status-pages/${event.maintenance.pageId}/maintenances/${event.maintenance.id}`,
};
}
}
diff --git a/apps/dashboard/src/components/data-table/status-report-updates/data-table-row-actions.tsx b/apps/dashboard/src/components/data-table/status-report-updates/data-table-row-actions.tsx
deleted file mode 100644
index 5d1033b8..00000000
--- a/apps/dashboard/src/components/data-table/status-report-updates/data-table-row-actions.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client";
-
-import type { RouterOutputs } from "@openstatus/api";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useParams } from "next/navigation";
-import { useRef } from "react";
-
-import { QuickActions } from "@/components/dropdowns/quick-actions";
-import { FormSheetStatusReportUpdate } from "@/components/forms/status-report-update/sheet";
-import { getActions, impactsEqual } from "@/data/status-report-updates.client";
-import { useTRPC } from "@/lib/trpc/client";
-
-type StatusReportUpdate =
- RouterOutputs["statusReport"]["list"][number]["updates"][number];
-
-interface DataTableRowActionsProps {
- row: StatusReportUpdate;
- components?: { id: number; name: string }[];
-}
-
-export function DataTableRowActions({
- row,
- components,
-}: DataTableRowActionsProps) {
- const buttonRef = useRef(null);
- const { id } = useParams<{ id: string }>();
- const trpc = useTRPC();
- const queryClient = useQueryClient();
- const updateStatusReportUpdateMutation = useMutation(
- trpc.statusReport.updateStatusReportUpdate.mutationOptions({
- onSuccess: () => {
- queryClient.invalidateQueries({
- queryKey: trpc.statusReport.list.queryKey({
- pageId: Number.parseInt(id),
- }),
- });
- queryClient.invalidateQueries({
- queryKey: trpc.page.list.queryKey(),
- });
- queryClient.invalidateQueries({
- queryKey: trpc.statusReport.list.queryKey({
- period: "7d",
- }),
- });
- },
- }),
- );
- const deleteStatusReportUpdateMutation = useMutation(
- trpc.statusReport.deleteUpdate.mutationOptions({
- onSuccess: () => {
- queryClient.invalidateQueries({
- queryKey: trpc.statusReport.list.queryKey({
- pageId: Number.parseInt(id),
- }),
- });
- queryClient.invalidateQueries({
- queryKey: trpc.statusReport.list.queryKey({
- period: "7d",
- }),
- });
- },
- }),
- );
- const actions = getActions({
- edit: () => buttonRef.current?.click(),
- });
-
- return (
- <>
- {
- await deleteStatusReportUpdateMutation.mutateAsync({
- id: row.id,
- });
- },
- }}
- />
- ({
- pageComponentId: ci.pageComponentId,
- impact: ci.impact,
- })),
- }}
- components={components}
- allowUnsetImpacts
- onSubmit={async (values) => {
- await updateStatusReportUpdateMutation.mutateAsync({
- id: row.id,
- statusReportId: row.statusReportId,
- message: values.message,
- status: values.status,
- // replace-set semantics: only send when actually edited, so
- // untouched (incl. legacy) updates keep their rows
- componentImpacts: impactsEqual(
- values.componentImpacts ?? [],
- row.componentImpacts,
- )
- ? undefined
- : values.componentImpacts,
- date: values.date,
- });
- }}
- >
-
-
-
- );
-}
diff --git a/apps/dashboard/src/components/data-table/status-report-updates/data-table.tsx b/apps/dashboard/src/components/data-table/status-report-updates/data-table.tsx
deleted file mode 100644
index 583b929b..00000000
--- a/apps/dashboard/src/components/data-table/status-report-updates/data-table.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-"use client";
-
-import type { RouterOutputs } from "@openstatus/api";
-import { currentImpactsFromUpdates } from "@openstatus/db/src/schema/page_components/constants";
-import { Add } from "@openstatus/icons";
-import { Button } from "@openstatus/ui/components/ui/button";
-import {
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableHeader,
- TableRow,
-} from "@openstatus/ui/components/ui/table";
-import {
- Tooltip,
- TooltipContent,
- TooltipProvider,
- TooltipTrigger,
-} from "@openstatus/ui/components/ui/tooltip";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useParams } from "next/navigation";
-
-import { ProcessMessage } from "@/components/content/process-message";
-import { TableCellDate } from "@/components/data-table/table-cell-date";
-import { FormSheetStatusReportUpdate } from "@/components/forms/status-report-update/sheet";
-import { icons } from "@/data/icons";
-import {
- colors,
- defaultComponentImpacts,
- getNextStatus,
- toCreateStatusReportUpdateInput,
-} from "@/data/status-report-updates.client";
-import { useTRPC } from "@/lib/trpc/client";
-import { cn } from "@/lib/utils";
-
-import { DataTableRowActions } from "./data-table-row-actions";
-
-type StatusReportUpdates =
- RouterOutputs["statusReport"]["list"][number]["updates"];
-
-export function DataTable({
- updates,
- reportId,
- components = [],
-}: {
- updates: StatusReportUpdates;
- reportId: number;
- components?: { id: number; name: string }[];
-}) {
- const reportHasImpacts = updates.some((u) => u.componentImpacts.length > 0);
- const currentImpacts = currentImpactsFromUpdates(updates);
- const nextStatus = getNextStatus(
- updates[updates.length - 1]?.status ?? "investigating",
- );
- const trpc = useTRPC();
- const { id } = useParams<{ id: string }>();
- const queryClient = useQueryClient();
- const sendStatusReportUpdateMutation = useMutation(
- trpc.subscriberNotification.statusReport.mutationOptions(),
- );
- const createStatusReportUpdateMutation = useMutation(
- trpc.statusReport.createStatusReportUpdate.mutationOptions({
- onSuccess: (update) => {
- if (update?.notifySubscribers) {
- sendStatusReportUpdateMutation.mutate({ id: update.id });
- }
- queryClient.invalidateQueries({
- queryKey: trpc.statusReport.list.queryKey({
- pageId: Number.parseInt(id),
- }),
- });
- queryClient.invalidateQueries({
- queryKey: trpc.page.list.queryKey(),
- });
- queryClient.invalidateQueries({
- queryKey: trpc.statusReport.list.queryKey({
- period: "7d",
- }),
- });
- },
- }),
- );
-
- return (
-
-
-
-
- Status
-
- Message
- Date
-
-
-
- {
- await createStatusReportUpdateMutation.mutateAsync(
- toCreateStatusReportUpdateInput({
- statusReportId: reportId,
- values,
- reportHasImpacts,
- }),
- );
- }}
- >
-
-
-
-
-
- Create Report Update
-
-
-
-
-
-
-
- {updates.map((update) => {
- const Icon = icons.status[update.status];
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- })}
-
-
- );
-}
diff --git a/apps/dashboard/src/components/data-table/status-reports/columns.tsx b/apps/dashboard/src/components/data-table/status-reports/columns.tsx
index c23fe6b6..386c2e0e 100644
--- a/apps/dashboard/src/components/data-table/status-reports/columns.tsx
+++ b/apps/dashboard/src/components/data-table/status-reports/columns.tsx
@@ -5,9 +5,6 @@ import {
type PageComponentImpact,
worstImpact,
} from "@openstatus/db/src/schema/page_components/constants";
-import { ChevronDown, ChevronUp } from "@openstatus/icons";
-import { Button } from "@openstatus/ui/components/ui/button";
-import { cn } from "@openstatus/ui/lib/utils";
import type { ColumnDef } from "@tanstack/react-table";
import Link from "next/link";
@@ -15,12 +12,12 @@ import { TableCellBadge } from "@/components/data-table/table-cell-badge";
import { TableCellDate } from "@/components/data-table/table-cell-date";
import { TableCellLink } from "@/components/data-table/table-cell-link";
import { TableCellNumber } from "@/components/data-table/table-cell-number";
-import { DataTableColumnHeader } from "@/components/ui/data-table/data-table-column-header";
import {
- colors,
- impactConfig,
- untriagedImpact,
-} from "@/data/status-report-updates.client";
+ StatusReportImpactBadge,
+ StatusReportStatusBadge,
+} from "@/components/status-reports/status-report-badge";
+import { DataTableColumnHeader } from "@/components/ui/data-table/data-table-column-header";
+import { reportStartedAt } from "@/data/status-reports.client";
import { DataTableRowActions } from "./data-table-row-actions";
@@ -38,103 +35,45 @@ function worstReportImpact(report: StatusReport) {
}
export const columns: ColumnDef[] = [
- {
- id: "expander",
- header: () => null,
- cell: ({ row }) => {
- return row.getCanExpand() ? (
-
- ) : undefined;
- },
- meta: {
- headerClassName: "w-7",
- },
- },
{
accessorKey: "title",
header: "Title",
+ enableSorting: false,
+ enableHiding: false,
cell: ({ row }) => {
const { id, pageId } = row.original;
-
return (
{
- // avoid expanding the row
- e.stopPropagation();
- }}
value={row.getValue("title")}
/>
);
},
- enableSorting: false,
- enableHiding: false,
- meta: {
- cellClassName: "max-w-[200px] truncate",
- },
- },
- {
- accessorKey: "status",
- header: "Current Status",
- cell: ({ row }) => {
- const value = String(row.getValue("status"));
- return (
-
- {value}
-
- );
- },
- enableSorting: false,
- enableHiding: false,
+ meta: { cellClassName: "max-w-[200px] truncate" },
},
{
id: "impact",
accessorFn: (row) => worstReportImpact(row),
header: "Impact",
- cell: ({ row }) => {
- const impact = row.getValue("impact");
- const config = impact ? impactConfig[impact] : untriagedImpact;
- return (
-
- {config.label}
-
- );
- },
enableSorting: false,
+ cell: ({ row }) => (
+ ("impact")}
+ />
+ ),
+ },
+ {
+ accessorKey: "status",
+ header: "Status",
+ enableSorting: false,
+ enableHiding: false,
+ cell: ({ row }) => ,
},
{
id: "updates",
accessorFn: (row) => row.updates.length,
header: "Updates",
- cell: ({ row }) => {
- const value = row.getValue("updates");
- return ;
- },
+ cell: ({ row }) => ,
},
{
id: "pageComponents",
@@ -162,23 +101,17 @@ export const columns: ColumnDef[] = [
},
{
id: "startedAt",
- accessorFn: (row) =>
- row.updates.sort((a, b) => a.date.getTime() - b.date.getTime())[0]
- ?.date ?? row.createdAt,
+ accessorFn: (row) => reportStartedAt(row),
header: ({ column }) => (
),
cell: ({ row }) => ,
enableHiding: false,
- meta: {
- cellClassName: "w-[170px]",
- },
+ meta: { cellClassName: "whitespace-nowrap" },
},
{
id: "actions",
cell: ({ row }) => ,
- meta: {
- cellClassName: "w-8",
- },
+ meta: { cellClassName: "w-8" },
},
];
diff --git a/apps/dashboard/src/components/data-table/status-reports/data-table-row-actions.tsx b/apps/dashboard/src/components/data-table/status-reports/data-table-row-actions.tsx
index 1a6c9a5e..ebdcff3f 100644
--- a/apps/dashboard/src/components/data-table/status-reports/data-table-row-actions.tsx
+++ b/apps/dashboard/src/components/data-table/status-reports/data-table-row-actions.tsx
@@ -1,14 +1,11 @@
"use client";
import type { RouterOutputs } from "@openstatus/api";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
import type { Row } from "@tanstack/react-table";
-import { useRef } from "react";
import { QuickActions } from "@/components/dropdowns/quick-actions";
-import { FormSheetStatusReportUpdateCreate } from "@/components/forms/status-report-update/sheet-create";
-import { FormSheetStatusReport } from "@/components/forms/status-report/sheet";
-import { toCheckboxTreeItems } from "@/components/ui/checkbox-tree";
+import { getPageUrl } from "@/data/status-pages.client";
import { getActions } from "@/data/status-reports.client";
import { useTRPC } from "@/lib/trpc/client";
@@ -22,96 +19,41 @@ export function DataTableRowActions({ row }: { row: Row }) {
}
export function StatusReportRowActions({ report }: { report: StatusReport }) {
- const buttonCreateRef = useRef(null);
- const buttonUpdateRef = useRef(null);
+ const trpc = useTRPC();
+ const queryClient = useQueryClient();
const actions = getActions({
- "create-update": () => buttonCreateRef.current?.click(),
- edit: () => buttonUpdateRef.current?.click(),
"view-report": () => {
- if (typeof window !== "undefined") {
- window.open(
- `https://${
- report.page.customDomain || `${report.page.slug}.openstatus.dev`
- }/events/report/${report.id}`,
- "_blank",
- );
- }
+ window.open(
+ `${getPageUrl(report.page)}/events/report/${report.id}`,
+ "_blank",
+ );
},
});
- const trpc = useTRPC();
- const queryClient = useQueryClient();
- const { data: page } = useQuery(
- trpc.page.get.queryOptions(
- { id: report.pageId ?? 0 },
- { enabled: report.pageId !== null },
- ),
- );
- // no-input prefix key — matches every statusReport.list query (overview, page detail)
- const invalidateLists = () => {
- queryClient.invalidateQueries({
- queryKey: trpc.statusReport.list.queryKey(),
- });
- queryClient.invalidateQueries({
- queryKey: trpc.page.list.queryKey(),
- });
- };
- const updateStatusReportMutation = useMutation(
- trpc.statusReport.updateStatus.mutationOptions({
- onSuccess: invalidateLists,
- }),
- );
const deleteStatusReportMutation = useMutation(
trpc.statusReport.delete.mutationOptions({
- onSuccess: invalidateLists,
+ // no-input prefix key — matches every statusReport.list query (overview, page detail)
+ onSuccess: () => {
+ queryClient.invalidateQueries({
+ queryKey: trpc.statusReport.list.queryKey(),
+ });
+ queryClient.invalidateQueries({
+ queryKey: trpc.page.list.queryKey(),
+ });
+ },
}),
);
if (!report.pageId) return null;
return (
- <>
- {
- await deleteStatusReportMutation.mutateAsync({
- id: report.id,
- });
- },
- }}
- />
- c.id) ?? [],
- }}
- onSubmit={async (values) => {
- const hasComponents =
- (page?.pageComponents?.length ?? 0) > 0 ||
- (page?.pageComponentGroups?.length ?? 0) > 0;
- await updateStatusReportMutation.mutateAsync({
- id: report.id,
- pageComponents: hasComponents ? values.pageComponents : undefined,
- title: values.title,
- status: values.status,
- });
- }}
- >
-
-
-
-
-
-
+ {
+ await deleteStatusReportMutation.mutateAsync({ id: report.id });
+ },
+ }}
+ />
);
}
diff --git a/apps/dashboard/src/components/forms/incident/form.tsx b/apps/dashboard/src/components/forms/incident/form.tsx
index 30893163..9e01685b 100644
--- a/apps/dashboard/src/components/forms/incident/form.tsx
+++ b/apps/dashboard/src/components/forms/incident/form.tsx
@@ -23,8 +23,6 @@ import {
import { Textarea } from "@openstatus/ui/components/ui/textarea";
import { cn } from "@openstatus/ui/lib/utils";
import { useQuery } from "@tanstack/react-query";
-import { isTRPCClientError } from "@trpc/client";
-import { format } from "date-fns";
import React, { useTransition } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
@@ -37,7 +35,9 @@ import {
} from "@/components/forms/form-card";
import { useFormSheetDirty } from "@/components/forms/form-sheet";
import { personName, severityConfig } from "@/data/managed-incidents.client";
+import { formatDateForInput } from "@/lib/formatter";
import { useTRPC } from "@/lib/trpc/client";
+import { errorMessage } from "@/lib/trpc/error";
const NONE = "none";
@@ -69,10 +69,6 @@ export type DeclareIncidentValues = {
openSlackChannel: boolean;
};
-export function toLocalInput(date: Date): string {
- return format(date, "yyyy-MM-dd'T'HH:mm");
-}
-
export function FormDeclareIncident({
defaultValues,
onSubmit,
@@ -100,7 +96,7 @@ export function FormDeclareIncident({
// user.get is prefetched in the dashboard layout, so it is hydrated
// before the sheet can mount and the default is never NONE for members.
commanderId: user ? String(user.id) : NONE,
- startedAt: toLocalInput(new Date()),
+ startedAt: formatDateForInput(new Date()),
statusReportId: NONE,
openSlackChannel: slack === "ready",
...defaultValues,
@@ -134,8 +130,7 @@ export function FormDeclareIncident({
toast.promise(promise, {
loading: "Declaring...",
success: () => "Incident declared",
- error: (error) =>
- isTRPCClientError(error) ? error.message : "Failed to declare",
+ error: (error) => errorMessage(error, "Failed to declare"),
});
await promise;
} catch (error) {
diff --git a/apps/dashboard/src/components/forms/status-report-update/form-status-report.tsx b/apps/dashboard/src/components/forms/status-report-update/form-status-report.tsx
deleted file mode 100644
index 7b57e3af..00000000
--- a/apps/dashboard/src/components/forms/status-report-update/form-status-report.tsx
+++ /dev/null
@@ -1,459 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import type { StatusReportUpdate } from "@openstatus/db/src/schema";
-import { pageComponentImpact } from "@openstatus/db/src/schema/page_components/constants";
-import { statusReportStatus } from "@openstatus/db/src/schema/status_reports/constants";
-import { Calendar as CalendarIcon, Clock } from "@openstatus/icons";
-import { Button } from "@openstatus/ui/components/ui/button";
-import { Calendar } from "@openstatus/ui/components/ui/calendar";
-import { Checkbox } from "@openstatus/ui/components/ui/checkbox";
-import {
- Form,
- FormControl,
- FormDescription,
- FormField,
- FormItem,
- FormLabel,
- FormMessage,
-} from "@openstatus/ui/components/ui/form";
-import { Input } from "@openstatus/ui/components/ui/input";
-import { Label } from "@openstatus/ui/components/ui/label";
-import {
- Popover,
- PopoverContent,
- PopoverTrigger,
-} from "@openstatus/ui/components/ui/popover";
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "@openstatus/ui/components/ui/select";
-import { TabsContent } from "@openstatus/ui/components/ui/tabs";
-import { TabsList, TabsTrigger } from "@openstatus/ui/components/ui/tabs";
-import { Tabs } from "@openstatus/ui/components/ui/tabs";
-import { Textarea } from "@openstatus/ui/components/ui/textarea";
-import { useIsMobile } from "@openstatus/ui/hooks/use-mobile";
-import { cn } from "@openstatus/ui/lib/utils";
-import { useMutation, useQuery } from "@tanstack/react-query";
-import { isTRPCClientError } from "@trpc/client";
-import { format } from "date-fns";
-import { useParams } from "next/navigation";
-import React, { useTransition } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-import { ProcessMessage } from "@/components/content/process-message";
-import { FormAlertDialog } from "@/components/forms/form-alert-dialog";
-import {
- FormCardContent,
- FormCardSeparator,
-} from "@/components/forms/form-card";
-import {
- FormCard,
- FormCardFooter,
- FormCardHeader,
- FormCardTitle,
-} from "@/components/forms/form-card";
-import { useFormSheetDirty } from "@/components/forms/form-sheet";
-import { ComponentImpactList } from "@/components/forms/status-report/component-impact-field";
-import { colors } from "@/data/status-report-updates.client";
-import { useTRPC } from "@/lib/trpc/client";
-
-const schema = z.object({
- status: z.enum(statusReportStatus),
- message: z.string(),
- date: z.date(),
- componentImpacts: z
- .array(
- z.object({
- pageComponentId: z.number(),
- impact: z.enum(pageComponentImpact),
- }),
- )
- .optional(),
- notifySubscribers: z.boolean().optional(),
-});
-
-export type FormValues = z.infer;
-
-export function FormStatusReportUpdateCard({
- defaultValues,
- onSubmit,
- className,
- index,
- update,
- components,
- ...props
-}: Omit, "onSubmit"> & {
- defaultValues?: FormValues;
- onSubmit: (values: FormValues) => Promise;
- index: number;
- update: StatusReportUpdate;
- /** The report's affected components; renders the per-component impact picker. */
- components?: { id: number; name: string }[];
-}) {
- const { reportId } = useParams<{ id: string; reportId: string }>();
- const trpc = useTRPC();
- const { data: workspace } = useQuery(trpc.workspace.get.queryOptions());
- const mobile = useIsMobile();
- const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
- const form = useForm({
- resolver: zodResolver(schema),
- defaultValues: defaultValues ?? {
- status: "identified",
- message: "",
- date: new Date(),
- componentImpacts: undefined,
- notifySubscribers: !!workspace?.limits["status-subscribers"],
- },
- });
-
- const watchMessage = form.watch("message");
- const [isPending, startTransition] = useTransition();
- const { setIsDirty } = useFormSheetDirty();
-
- const formIsDirty = form.formState.isDirty;
- React.useEffect(() => {
- setIsDirty(formIsDirty);
- }, [formIsDirty, setIsDirty]);
-
- const { data: statusReport, refetch } = useQuery(
- trpc.statusReport.get.queryOptions({ id: Number.parseInt(reportId) }),
- );
-
- function submitAction(values: FormValues) {
- if (isPending) return;
-
- startTransition(async () => {
- try {
- const promise = onSubmit(values);
- toast.promise(promise, {
- loading: "Saving...",
- success: () => "Saved",
- error: (error) => {
- if (isTRPCClientError(error)) {
- return error.message;
- }
- return "Failed to save";
- },
- });
- await promise;
- } catch (error) {
- console.error(error);
- }
- });
- }
-
- const deleteStatusReportUpdateMutation = useMutation(
- trpc.statusReport.deleteUpdate.mutationOptions({
- onSuccess: () => {
- refetch();
- },
- }),
- );
-
- const updates = [...(statusReport?.updates ?? [])].sort(
- (a, b) => b.date.getTime() - a.date.getTime(),
- );
-
- return (
-
-
-
- Status Report Update #{updates.length - index}
-
-
-
-
-
-
- {
- await deleteStatusReportUpdateMutation.mutateAsync({
- id: update.id,
- });
- }}
- >
-
-
-
-
-
- );
-}
diff --git a/apps/dashboard/src/components/forms/status-report/component-impact-field.tsx b/apps/dashboard/src/components/forms/status-report/component-impact-field.tsx
index 451021a3..95f997b8 100644
--- a/apps/dashboard/src/components/forms/status-report/component-impact-field.tsx
+++ b/apps/dashboard/src/components/forms/status-report/component-impact-field.tsx
@@ -11,9 +11,14 @@ import {
SelectTrigger,
SelectValue,
} from "@openstatus/ui/components/ui/select";
-import { cn } from "@openstatus/ui/lib/utils";
-import { impactConfig } from "@/data/status-report-updates.client";
+import {
+ ComponentImpact,
+ ComponentList,
+ ComponentListActions,
+ ComponentListItem,
+ ComponentListName,
+} from "@/components/content/component-list";
export type ComponentImpactValue = {
pageComponentId: number;
@@ -51,45 +56,35 @@ export function ComponentImpactList({
if (components.length === 0) return null;
return (
-
- {components.map((component) => {
- const impact = impactFor(component.id);
- return (
-
- {component.name}
+
+ {components.map((component) => (
+
+ {component.name}
+
-
- );
- })}
-