From b3a815d069fe40ad1b33c7e109e78495d77ae819 Mon Sep 17 00:00:00 2001
From: Devin Villarosa <102188207+devinvillarosa@users.noreply.github.com>
Date: Thu, 6 Feb 2025 14:40:08 -0800
Subject: [PATCH] [UI v2] feat: Adds deployment flow link (#17020)

---
 .../deployments/deployment-details-page.tsx   |  3 ++-
 .../deployments/deployment-flow-link.tsx      | 26 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 ui-v2/src/components/deployments/deployment-flow-link.tsx

diff --git a/ui-v2/src/components/deployments/deployment-details-page.tsx b/ui-v2/src/components/deployments/deployment-details-page.tsx
index 3280fadea802..5968724a02d4 100644
--- a/ui-v2/src/components/deployments/deployment-details-page.tsx
+++ b/ui-v2/src/components/deployments/deployment-details-page.tsx
@@ -3,6 +3,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 
 import { DeploymentDetailsHeader } from "./deployment-details-header";
 import { DeploymentDetailsTabs } from "./deployment-details-tabs";
+import { DeploymentFlowLink } from "./deployment-flow-link";
 
 type DeploymentDetailsPageProps = {
 	id: string;
@@ -16,7 +17,7 @@ export const DeploymentDetailsPage = ({ id }: DeploymentDetailsPageProps) => {
 			<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>
+					<DeploymentFlowLink flowId={data.flow_id} />
 				</div>
 				<div className="flex align-middle gap-2">
 					<div className="border border-red-400">{"<RunButton />"}</div>
diff --git a/ui-v2/src/components/deployments/deployment-flow-link.tsx b/ui-v2/src/components/deployments/deployment-flow-link.tsx
new file mode 100644
index 000000000000..0413feca1ffd
--- /dev/null
+++ b/ui-v2/src/components/deployments/deployment-flow-link.tsx
@@ -0,0 +1,26 @@
+import { buildFLowDetailsQuery } from "@/api/flows";
+import { Icon } from "@/components/ui/icons";
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+
+type DeploymentFlowLinkProps = {
+	flowId: string;
+};
+
+export const DeploymentFlowLink = ({ flowId }: DeploymentFlowLinkProps) => {
+	const { data } = useQuery(buildFLowDetailsQuery(flowId));
+
+	return (
+		<div className="flex items-center gap-1 text-sm">
+			Flow
+			<Link
+				to="/flows/flow/$id"
+				params={{ id: flowId }}
+				className="flex items-center gap-1"
+			>
+				<Icon id="Workflow" className="h-4 w-4" />
+				{data?.name}
+			</Link>
+		</div>
+	);
+};