addressing PR comments

ui-v2/src/components/automations/automation-details.tsx

@@ -0,0 +1,56 @@
+import { type Automation } from "@/api/automations";
+import { ActionDetails } from "@/components/automations/action-details";
+import { Typography } from "@/components/ui/typography";
+
+type AutomationDetailsProps = {
+	data: Automation;
+};
+
+export const AutomationDetails = ({ data }: AutomationDetailsProps) => (
+	<div className="flex flex-col gap-4">
+		<AutomationDescription data={data} />
+		<AutomationTrigger data={data} />
+		<AutomationActions data={data} />
+	</div>
+);
+
+const AutomationDescription = ({ data }: AutomationDetailsProps) => {
+	return (
+		<div className="flex flex-col gap-1">
+			<Typography className="text-muted-foreground" variant="bodySmall">
+				Description
+			</Typography>
+			<Typography className="text-muted-foreground">
+				{data.description || "None"}
+			</Typography>
+		</div>
+	);
+};
+
+const AutomationTrigger = ({ data }: AutomationDetailsProps) => {
+	const { trigger } = data;
+	return (
+		<div className="flex flex-col gap-1">
+			<Typography>Trigger</Typography>
+			<Typography variant="bodySmall">
+				TODO: {JSON.stringify(trigger)}
+			</Typography>
+		</div>
+	);
+};
+
+const AutomationActions = ({ data }: AutomationDetailsProps) => {
+	const { actions } = data;
+	return (
+		<div className="flex flex-col gap-1">
+			<Typography>{`Action${actions.length > 1 ? "s" : ""}`}</Typography>
+			<ul className="flex flex-col gap-2">
+				{actions.map((action, i) => (
+					<li key={i}>
+						<ActionDetails action={action} />
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+};

ui-v2/src/components/automations/automation-page.tsx

@@ -0,0 +1,65 @@
+import { type Automation, buildGetAutomationQuery } from "@/api/automations";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { AutomationDetails } from "./automation-details";
+import { AutomationEnableToggle } from "./automation-enable-toggle";
+import { AutomationsActionsMenu } from "./automations-actions-menu";
+
+import { useDeleteAutomationConfirmationDialog } from "./use-delete-automation-confirmation-dialog";
+
+type AutomationsPageProps = {
+	id: string;
+};
+
+export const AutomationPage = ({ id }: AutomationsPageProps) => {
+	const [dialogState, confirmDelete] = useDeleteAutomationConfirmationDialog();
+	const { data } = useSuspenseQuery(buildGetAutomationQuery(id));
+
+	const handleDelete = () => confirmDelete(data, { shouldNavigate: true });
+
+	return (
+		<>
+			<div className="flex flex-col gap-6">
+				<div className="flex items-center justify-between">
+					<PageNavHeader data={data} />
+					<div className="flex items-center gap-2">
+						<AutomationEnableToggle data={data} />
+						<AutomationsActionsMenu id={data.id} onDelete={handleDelete} />
+					</div>
+				</div>
+				<AutomationDetails data={data} />
+			</div>
+			<DeleteConfirmationDialog {...dialogState} />
+		</>
+	);
+};
+
+type NavHeaderProps = {
+	data: Automation;
+};
+
+const PageNavHeader = ({ data }: NavHeaderProps) => {
+	return (
+		<Breadcrumb>
+			<BreadcrumbList>
+				<BreadcrumbItem>
+					<BreadcrumbLink to="/automations" className="text-xl font-semibold">
+						Automations
+					</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+				<BreadcrumbItem className="text-xl font-semibold">
+					<BreadcrumbPage>{data.name}</BreadcrumbPage>
+				</BreadcrumbItem>
+			</BreadcrumbList>
+		</Breadcrumb>
+	);
+};