From e9aad64463e909d15f7c783be233b487f984fe0b Mon Sep 17 00:00:00 2001
From: Devin Villarosa <devinvillarosa92.business@gmail.com>
Date: Wed, 5 Feb 2025 14:31:16 -0800
Subject: [PATCH] [UI v2] feat: Scaffolds UX components for deployment details
 page

---
 .../deployments/deployment-details-header.tsx | 32 ++++++
 .../deployments/deployment-details-page.tsx   | 41 ++++++++
 .../deployments/deployment-details-tabs.tsx   | 97 +++++++++++++++++++
 .../src/routes/deployments/deployment.$id.tsx |  5 +-
 4 files changed, 174 insertions(+), 1 deletion(-)
 create mode 100644 ui-v2/src/components/deployments/deployment-details-header.tsx
 create mode 100644 ui-v2/src/components/deployments/deployment-details-page.tsx
 create mode 100644 ui-v2/src/components/deployments/deployment-details-tabs.tsx

diff --git a/ui-v2/src/components/deployments/deployment-details-header.tsx b/ui-v2/src/components/deployments/deployment-details-header.tsx
new file mode 100644
index 000000000000..0195feb40660
--- /dev/null
+++ b/ui-v2/src/components/deployments/deployment-details-header.tsx
@@ -0,0 +1,32 @@
+import { Deployment } from "@/api/deployments";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "../ui/breadcrumb";
+
+type DeploymentDetailsHeaderProps = {
+	deployment: Deployment;
+};
+export const DeploymentDetailsHeader = ({
+	deployment,
+}: DeploymentDetailsHeaderProps) => {
+	return (
+		<Breadcrumb>
+			<BreadcrumbList>
+				<BreadcrumbItem>
+					<BreadcrumbLink to="/deployments" className="text-xl font-semibold">
+						Deployments
+					</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+				<BreadcrumbItem className="text-xl font-semibold">
+					<BreadcrumbPage>{deployment.name}</BreadcrumbPage>
+				</BreadcrumbItem>
+			</BreadcrumbList>
+		</Breadcrumb>
+	);
+};
diff --git a/ui-v2/src/components/deployments/deployment-details-page.tsx b/ui-v2/src/components/deployments/deployment-details-page.tsx
new file mode 100644
index 000000000000..3280fadea802
--- /dev/null
+++ b/ui-v2/src/components/deployments/deployment-details-page.tsx
@@ -0,0 +1,41 @@
+import { buildDeploymentDetailsQuery } from "@/api/deployments";
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+import { DeploymentDetailsHeader } from "./deployment-details-header";
+import { DeploymentDetailsTabs } from "./deployment-details-tabs";
+
+type DeploymentDetailsPageProps = {
+	id: string;
+};
+
+export const DeploymentDetailsPage = ({ id }: DeploymentDetailsPageProps) => {
+	const { data } = useSuspenseQuery(buildDeploymentDetailsQuery(id));
+
+	return (
+		<div className="flex flex-col gap-4">
+			<div className="flex align-middle justify-between">
+				<div className="flex flex-col gap-2">
+					<DeploymentDetailsHeader deployment={data} />
+					<div className="border border-red-400">{"<FlowLink />"}</div>
+				</div>
+				<div className="flex align-middle gap-2">
+					<div className="border border-red-400">{"<RunButton />"}</div>
+					<div className="border border-red-400">{"<Actions />"}</div>
+				</div>
+			</div>
+			<div className="grid gap-4" style={{ gridTemplateColumns: "3fr 1fr" }}>
+				<div className="flex flex-col gap-5">
+					<DeploymentDetailsTabs />
+				</div>
+				<div className="flex flex-col gap-3">
+					<div className="border border-red-400">{"<SchedulesSection />"}</div>
+					<div className="border border-red-400">{"<TriggerSection />"}</div>
+					<hr />
+					<div className="border border-red-400">{"<StatusSection />"}</div>
+					<hr />
+					<div className="border border-red-400">{"<IDsSection />"}</div>
+				</div>
+			</div>
+		</div>
+	);
+};
diff --git a/ui-v2/src/components/deployments/deployment-details-tabs.tsx b/ui-v2/src/components/deployments/deployment-details-tabs.tsx
new file mode 100644
index 000000000000..735b44424b4a
--- /dev/null
+++ b/ui-v2/src/components/deployments/deployment-details-tabs.tsx
@@ -0,0 +1,97 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { DeploymentDetailsTabOptions } from "@/routes/deployments/deployment.$id";
+import { Link, getRouteApi } from "@tanstack/react-router";
+import { type JSX } from "react";
+
+const routeApi = getRouteApi("/deployments/deployment/$id");
+
+type TabOption = {
+	value: DeploymentDetailsTabOptions;
+	LinkComponent: () => JSX.Element;
+	ViewComponent: () => JSX.Element;
+};
+
+const TAB_OPTIONS = [
+	{
+		value: "Runs",
+		LinkComponent: () => (
+			<Link to="." search={{ tab: "Runs" }}>
+				<TabsTrigger value="Runs">Runs</TabsTrigger>
+			</Link>
+		),
+		ViewComponent: () => (
+			<TabsContent value="Runs">
+				<div className="border border-red-400">{"<RunsView />"}</div>
+			</TabsContent>
+		),
+	},
+	{
+		value: "Upcoming",
+		LinkComponent: () => (
+			<Link to="." search={{ tab: "Upcoming" }}>
+				<TabsTrigger value="Upcoming">Upcoming</TabsTrigger>
+			</Link>
+		),
+		ViewComponent: () => (
+			<TabsContent value="Upcoming">
+				<div className="border border-red-400">{"<UpcomingView />"}</div>
+			</TabsContent>
+		),
+	},
+	{
+		value: "Upcoming",
+		LinkComponent: () => (
+			<Link to="." search={{ tab: "Parameters" }}>
+				<TabsTrigger value="Parameters">Parameters</TabsTrigger>
+			</Link>
+		),
+		ViewComponent: () => (
+			<TabsContent value="Parameters">
+				<div className="border border-red-400">{"<ParametersView />"}</div>
+			</TabsContent>
+		),
+	},
+	{
+		value: "Configuration",
+		LinkComponent: () => (
+			<Link to="." search={{ tab: "Configuration" }}>
+				<TabsTrigger value="Configuration">Configuration</TabsTrigger>
+			</Link>
+		),
+		ViewComponent: () => (
+			<TabsContent value="Configuration">
+				<div className="border border-red-400">{"<ConfigurationView />"}</div>
+			</TabsContent>
+		),
+	},
+	{
+		value: "Description",
+		LinkComponent: () => (
+			<Link to="." search={{ tab: "Description" }}>
+				<TabsTrigger value="Description">Description</TabsTrigger>
+			</Link>
+		),
+		ViewComponent: () => (
+			<TabsContent value="Description">
+				<div className="border border-red-400">{"<DescriptionView />"}</div>
+			</TabsContent>
+		),
+	},
+] as const satisfies Array<TabOption>;
+
+export const DeploymentDetailsTabs = (): JSX.Element => {
+	const { tab } = routeApi.useSearch();
+
+	return (
+		<Tabs defaultValue={TAB_OPTIONS[0].value} value={tab}>
+			<TabsList>
+				{TAB_OPTIONS.map(({ value, LinkComponent }) => (
+					<LinkComponent key={value} />
+				))}
+			</TabsList>
+			{TAB_OPTIONS.map(({ value, ViewComponent }) => (
+				<ViewComponent key={value} />
+			))}
+		</Tabs>
+	);
+};
diff --git a/ui-v2/src/routes/deployments/deployment.$id.tsx b/ui-v2/src/routes/deployments/deployment.$id.tsx
index 73b6f3a34b0f..b2571e9d127a 100644
--- a/ui-v2/src/routes/deployments/deployment.$id.tsx
+++ b/ui-v2/src/routes/deployments/deployment.$id.tsx
@@ -3,6 +3,8 @@ import { createFileRoute } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
+import { DeploymentDetailsPage } from "@/components/deployments/deployment-details-page";
+
 /**
  * Schema for validating URL search parameters for the Deployment Details page
  * @property {"Runs" | "Upcoming" | "Parameters" | "Configuration" | "Description"} tab used designate which tab view to display
@@ -24,5 +26,6 @@ export const Route = createFileRoute("/deployments/deployment/$id")({
 });
 
 function RouteComponent() {
-	return "🚧🚧 Pardon our dust! 🚧🚧";
+	const { id } = Route.useParams();
+	return <DeploymentDetailsPage id={id} />;
 }