[UI v2] feat: Starts automation details page

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

@@ -0,0 +1,109 @@
+import { Automation, buildGetAutomationQuery } from "@/api/automations";
+import { AutomationEnableToggle } from "@/components/automations/automation-enable-toggle";
+import { AutomationsActionsMenu } from "@/components/automations/automations-actions-menu";
+import { useDeleteAutomationConfirmationDialog } from "@/components/automations/use-delete-automation-confirmation-dialog";
+import { Card } from "@/components/ui/card";
+import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
+import { Typography } from "@/components/ui/typography";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { NavHeader } from "./nav-header";
+
+type AutomationPageProps = {
+	id: string;
+};
+
+export const AutomationPage = ({ id }: AutomationPageProps) => {
+	const { data } = useSuspenseQuery(buildGetAutomationQuery(id));
+	const [dialogState, confirmDelete] = useDeleteAutomationConfirmationDialog();
+
+	const handleDelete = () => confirmDelete(data, { shouldNavigate: true });
+
+	return (
+		<>
+			<div className="flex flex-col gap-4">
+				<AutomationPageHeader data={data} onDelete={handleDelete} />
+				<div className="flex flex-col gap-4">
+					<AutomationDescription data={data} />
+					<AutomationTrigger data={data} />
+					<AutomationActions data={data} />
+				</div>
+			</div>
+			<DeleteConfirmationDialog {...dialogState} />
+		</>
+	);
+};
+
+type AutomationPageHeaderProps = {
+	data: Automation;
+	onDelete: () => void;
+};
+
+const AutomationPageHeader = ({
+	data,
+	onDelete,
+}: AutomationPageHeaderProps) => {
+	return (
+		<div className="flex items-center justify-between">
+			<NavHeader name={data.name} />
+			<div className="flex items-center gap-2">
+				<AutomationEnableToggle data={data} />
+				<AutomationsActionsMenu id={data.id} onDelete={onDelete} />
+			</div>
+		</div>
+	);
+};
+
+type AutomationDescriptionProps = {
+	data: Automation;
+};
+
+const AutomationDescription = ({ data }: AutomationDescriptionProps) => {
+	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>
+	);
+};
+
+type AutomationTriggerProps = {
+	data: Automation;
+};
+
+const AutomationTrigger = ({ data }: AutomationTriggerProps) => {
+	const { trigger } = data;
+	return (
+		<div className="flex flex-col gap-1">
+			<Typography>Trigger</Typography>
+			<Typography variant="bodySmall">
+				TODO: {JSON.stringify(trigger)}
+			</Typography>
+		</div>
+	);
+};
+
+type AutomationActionsProps = {
+	data: Automation;
+};
+
+const AutomationActions = ({ data }: AutomationActionsProps) => {
+	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}>
+						<Card className="p-4 border-r-8">
+							<div>TODO: {JSON.stringify(action)}</div>
+						</Card>
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+};

ui-v2/src/components/automations/automation-page/index.ts

@@ -0,0 +1 @@
+export { AutomationPage } from "./automation-page";

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

@@ -0,0 +1,32 @@
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+type NavHeaderProps = {
+	name: string;
+};
+
+export const NavHeader = ({ name }: NavHeaderProps) => {
+	return (
+		<div className="flex items-center gap-2">
+			<Breadcrumb>
+				<BreadcrumbList>
+					<BreadcrumbItem>
+						<BreadcrumbLink to="/automations" className="text-xl font-semibold">
+							Automations
+						</BreadcrumbLink>
+					</BreadcrumbItem>
+					<BreadcrumbSeparator />
+					<BreadcrumbItem className="text-xl font-semibold">
+						<BreadcrumbPage>{name}</BreadcrumbPage>
+					</BreadcrumbItem>
+				</BreadcrumbList>
+			</Breadcrumb>
+		</div>
+	);
+};

ui-v2/src/components/automations/use-delete-automation-confirmation-dialog.ts

@@ -0,0 +1,45 @@
+import { Automation, useDeleteAutomation } from "@/api/automations";
+import { useDeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
+import { useToast } from "@/hooks/use-toast";
+import { getRouteApi } from "@tanstack/react-router";
+
+const routeApi = getRouteApi("/concurrency-limits/");
+
+export const useDeleteAutomationConfirmationDialog = () => {
+	const navigate = routeApi.useNavigate();
+	const { toast } = useToast();
+	const [dialogState, confirmDelete] = useDeleteConfirmationDialog();
+
+	const { deleteAutomation } = useDeleteAutomation();
+
+	const handleConfirmDelete = (
+		automation: Automation,
+		{
+			shouldNavigate = false,
+		}: {
+			/** Should navigate back to /automations */
+			shouldNavigate?: boolean;
+		},
+	) =>
+		confirmDelete({
+			title: "Delete Automation",
+			description: `Are you sure you want to delete ${automation.name}?`,
+			onConfirm: () => {
+				deleteAutomation(automation.id, {
+					onSuccess: () => {
+						toast({ title: "Automation deleted" });
+						if (shouldNavigate) {
+							void navigate({ to: "/automations" });
+						}
+					},
+					onError: (error) => {
+						const message =
+							error.message || "Unknown error while deleting automation.";
+						console.error(message);
+					},
+				});
+			},
+		});
+
+	return [dialogState, handleConfirmDelete] as const;
+};

ui-v2/src/routeTree.gen.ts

@@ -601,7 +601,7 @@ export const routeTree = rootRoute
       "filePath": "runs/index.tsx"
     },
     "/automations/automation/$id": {
-      "filePath": "automations/automation.$id.ts",
+      "filePath": "automations/automation.$id.tsx",
       "children": [
         "/automations/automation/$id/edit"
       ]

ui-v2/src/routes/automations/automation.$id.ts → ui-v2/src/routes/automations/automation.$id.tsx

@@ -1,6 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 
 import { buildGetAutomationQuery } from "@/api/automations";
+import { AutomationPage } from "@/components/automations/automation-page";
 
 export const Route = createFileRoute("/automations/automation/$id")({
 	component: RouteComponent,
@@ -10,5 +11,6 @@ export const Route = createFileRoute("/automations/automation/$id")({
 });
 
 function RouteComponent() {
-	return "🚧🚧 Pardon our dust! 🚧🚧";
+	const { id } = Route.useParams();
+	return <AutomationPage id={id} />;
 }