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) => {
-
{""}
+
{""}
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 ( +
+ Flow + + + {data?.name} + +
+ ); +};