[UI v2] feat: Adds Triggers section in deployment details page

ui-v2/src/components/deployments/deployment-details-page.tsx

@@ -7,6 +7,7 @@ import { DeploymentDetailsHeader } from "./deployment-details-header";
 import { DeploymentDetailsTabs } from "./deployment-details-tabs";
 import { DeploymentFlowLink } from "./deployment-flow-link";
 import { DeploymentMetadata } from "./deployment-metadata";
+import { DeploymentTriggers } from "./deployment-triggers";
 import { useDeleteDeploymentConfirmationDialog } from "./use-delete-deployment-confirmation-dialog";
 
 type DeploymentDetailsPageProps = {
@@ -42,7 +43,7 @@ export const DeploymentDetailsPage = ({ id }: DeploymentDetailsPageProps) => {
 						<div className="border border-red-400">
 							{"<SchedulesSection />"}
 						</div>
-						<div className="border border-red-400">{"<TriggerSection />"}</div>
+						<DeploymentTriggers deployment={data} />
 						<hr />
 						<DeploymentMetadata deployment={data} />
 					</div>

ui-v2/src/components/deployments/deployment-triggers.tsx

@@ -0,0 +1,71 @@
+import { buildListAutomationsRelatedQuery } from "@/api/automations/automations";
+import { Deployment } from "@/api/deployments";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icons";
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { Skeleton } from "../ui/skeleton";
+
+type DeploymentTriggersProps = {
+	deployment: Deployment;
+};
+
+const RelatedDeployments = ({ deployment }: DeploymentTriggersProps) => {
+	const { data } = useQuery(
+		buildListAutomationsRelatedQuery(`prefect.deployment.${deployment.id}`),
+	);
+
+	if (data) {
+		return (
+			<ul className="flex flex-col gap-1">
+				{data.map((automation) => (
+					<li key={automation.id}>
+						<Link
+							to="/automations/automation/$id"
+							params={{ id: automation.id }}
+							className="flex items-center text-xs"
+						>
+							<Icon id="Bot" className="mr-1 h-4 w-4" />
+							<div>{automation.name}</div>
+						</Link>
+					</li>
+				))}
+			</ul>
+		);
+	}
+
+	return (
+		<ul className="flex flex-col gap-1">
+			{Array.from({ length: 2 }).map((_, i) => (
+				<li key={i}>
+					<Skeleton className="h-4 w-full" />
+				</li>
+			))}
+		</ul>
+	);
+};
+
+export const DeploymentTriggers = ({ deployment }: DeploymentTriggersProps) => {
+	return (
+		<div className="flex flex-col gap-1">
+			<div className="text-sm text-muted-foreground">Triggers</div>
+			<div className="flex flex-col gap-2">
+				<RelatedDeployments deployment={deployment} />
+				<Link
+					to="/automations/create"
+					search={{
+						actions: {
+							type: "run-deployment",
+							deploymentId: deployment.id,
+							parameters: deployment.parameters,
+						},
+					}}
+				>
+					<Button size="sm">
+						<Icon id="Plus" className="mr-2 h-4 w-4" /> Add
+					</Button>
+				</Link>
+			</div>
+		</div>
+	);
+};

ui-v2/src/routes/automations/create.ts

@@ -1,6 +1,20 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { zodValidator } from "@tanstack/zod-adapter";
+import { z } from "zod";
+
+// nb: Revisit search params to determine if we're decoding the parameters correctly. Or if there are stricter typings
+// We'll know stricter types as we write more of the webapp
+
+/**
+ * Schema for validating URL search parameters for the create automation page.
+ * @property actions used designate how to pre-populate the fields
+ */
+const searchParams = z
+	.object({ actions: z.record(z.unknown()).optional() })
+	.optional();
 
 export const Route = createFileRoute("/automations/create")({
+	validateSearch: zodValidator(searchParams),
 	component: RouteComponent,
 });