[UI v2] feat: Consolidates components for automation(s) routes

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { createFakeAutomation } from "@/mocks";
+import { reactQueryDecorator, routerDecorator } from "@/storybook/utils";
+import { AutomationDetails } from "./automation-details";
+
+const meta: Meta<typeof AutomationDetails> = {
+	title: "Components/Automations/AutomationDetails",
+	decorators: [routerDecorator, reactQueryDecorator],
+	component: AutomationDetails,
+	args: { data: createFakeAutomation() },
+};
+export default meta;
+
+export const Page: StoryObj = {
+	args: { displayType: "page" },
+};
+
+export const Item: StoryObj = {
+	args: { displayType: "item" },
+};

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

@@ -1,27 +1,49 @@
-import { Automation, buildGetAutomationQuery } from "@/api/automations";
+import { type Automation } from "@/api/automations";
 import { ActionDetails } from "@/components/automations/action-details";
 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";
+import { type DisplayType, NavHeader } from "./nav-header";
 
-type AutomationPageProps = {
-	id: string;
+type AutomationDetailsProps = {
+	data: Automation;
+	displayType: DisplayType;
 };
 
-export const AutomationPage = ({ id }: AutomationPageProps) => {
-	const { data } = useSuspenseQuery(buildGetAutomationQuery(id));
+export const AutomationDetails = ({
+	data,
+	displayType,
+}: AutomationDetailsProps) => {
+	if (displayType === "item") {
+		return (
+			<Card className="p-4 pt-5">
+				<AutomationDetailsContent data={data} displayType={displayType} />
+			</Card>
+		);
+	}
+	return <AutomationDetailsContent data={data} displayType={displayType} />;
+};
+
+const AutomationDetailsContent = ({
+	data,
+	displayType,
+}: AutomationDetailsProps) => {
 	const [dialogState, confirmDelete] = useDeleteAutomationConfirmationDialog();
 
-	const handleDelete = () => confirmDelete(data, { shouldNavigate: true });
+	const handleDelete = () =>
+		confirmDelete(data, { shouldNavigate: displayType === "page" });
 
 	return (
 		<>
 			<div className="flex flex-col gap-4">
-				<AutomationPageHeader data={data} onDelete={handleDelete} />
+				<AutomationDetailsHeader
+					displayType={displayType}
+					data={data}
+					onDelete={handleDelete}
+				/>
 				<div className="flex flex-col gap-4">
 					<AutomationDescription data={data} />
 					<AutomationTrigger data={data} />
@@ -33,18 +55,20 @@ export const AutomationPage = ({ id }: AutomationPageProps) => {
 	);
 };
 
-type AutomationPageHeaderProps = {
+type AutomationDetailsHeaderProps = {
 	data: Automation;
+	displayType: DisplayType;
 	onDelete: () => void;
 };
 
-const AutomationPageHeader = ({
+const AutomationDetailsHeader = ({
 	data,
 	onDelete,
-}: AutomationPageHeaderProps) => {
+	displayType,
+}: AutomationDetailsHeaderProps) => {
 	return (
 		<div className="flex items-center justify-between">
-			<NavHeader name={data.name} />
+			<NavHeader displayType={displayType} data={data} />
 			<div className="flex items-center gap-2">
 				<AutomationEnableToggle data={data} />
 				<AutomationsActionsMenu id={data.id} onDelete={onDelete} />

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

@@ -0,0 +1,2 @@
+export { AutomationDetails } from "./automation-details";
+export type { DisplayType } from "./nav-header";

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

@@ -0,0 +1,57 @@
+import type { Automation } from "@/api/automations";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+export type DisplayType = "page" | "item";
+
+type NavHeaderProps = {
+	data: Automation;
+	displayType: DisplayType;
+};
+
+export const NavHeader = ({ displayType, data }: NavHeaderProps) => {
+	if (displayType === "page") {
+		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>{data.name}</BreadcrumbPage>
+						</BreadcrumbItem>
+					</BreadcrumbList>
+				</Breadcrumb>
+			</div>
+		);
+	}
+
+	return (
+		<Breadcrumb>
+			<BreadcrumbList>
+				<BreadcrumbItem className="text-xl">
+					<BreadcrumbLink
+						to="/automations/automation/$id"
+						params={{ id: data.id }}
+						className="text-lg"
+					>
+						{data.name}
+					</BreadcrumbLink>
+				</BreadcrumbItem>
+			</BreadcrumbList>
+		</Breadcrumb>
+	);
+};

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

@@ -1,5 +1,6 @@
 import { buildListAutomationsQuery } from "@/api/automations";
 import { useSuspenseQuery } from "@tanstack/react-query";
+import { AutomationDetails } from "./automation-details";
 import { AutomationsEmptyState } from "./automations-empty-state";
 import { AutomationsHeader } from "./automations-header";
 
@@ -12,7 +13,16 @@ export const AutomationsPage = () => {
 			{data.length === 0 ? (
 				<AutomationsEmptyState />
 			) : (
-				<div>TODO: AUTOMATIONS_LIST</div>
+				<ul className="flex flex-col gap-2">
+					{data.map((automation) => (
+						<li
+							key={automation.id}
+							aria-label={`automation item ${automation.name}`}
+						>
+							<AutomationDetails data={automation} displayType="item" />
+						</li>
+					))}
+				</ul>
 			)}
 		</div>
 	);

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

@@ -1,7 +1,8 @@
 import { createFileRoute } from "@tanstack/react-router";
 
 import { buildGetAutomationQuery } from "@/api/automations";
-import { AutomationPage } from "@/components/automations/automation-page";
+import { AutomationDetails } from "@/components/automations/automation-details";
+import { useSuspenseQuery } from "@tanstack/react-query";
 
 export const Route = createFileRoute("/automations/automation/$id")({
 	component: RouteComponent,
@@ -12,5 +13,8 @@ export const Route = createFileRoute("/automations/automation/$id")({
 
 function RouteComponent() {
 	const { id } = Route.useParams();
-	return <AutomationPage id={id} />;
+
+	const { data } = useSuspenseQuery(buildGetAutomationQuery(id));
+
+	return <AutomationDetails data={data} displayType="page" />;
 }