[UI v2] feat: Adds deployment flow link (#17020)

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>

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>
+	);
+};