[UI v2] feat: Adds deployment metadata (#17028)

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

@@ -4,6 +4,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";
+import { DeploymentMetadata } from "./deployment-metadata";
 
 type DeploymentDetailsPageProps = {
 	id: string;
@@ -32,9 +33,7 @@ export const DeploymentDetailsPage = ({ id }: DeploymentDetailsPageProps) => {
 					<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>
+					<DeploymentMetadata deployment={data} />
 				</div>
 			</div>
 		</div>

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

@@ -39,7 +39,7 @@ const TAB_OPTIONS = [
 		),
 	},
 	{
-		value: "Upcoming",
+		value: "Parameters",
 		LinkComponent: () => (
 			<Link to="." search={{ tab: "Parameters" }}>
 				<TabsTrigger value="Parameters">Parameters</TabsTrigger>

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

@@ -0,0 +1,152 @@
+import { Deployment } from "@/api/deployments";
+import { cn } from "@/lib/utils";
+
+import { StatusBadge } from "@/components/ui/status-badge";
+import { TagBadgeGroup } from "@/components/ui/tag-badge-group";
+
+type DeploymentMetadataProps = {
+	deployment: Deployment;
+};
+
+const None = () => <dd className="text-muted-foreground text-sm">None</dd>;
+const FieldLabel = ({ children }: { children: React.ReactNode }) => (
+	<dt className="text-sm text-muted-foreground">{children}</dt>
+);
+
+const FieldValue = ({
+	className,
+	children,
+}: { className?: string; children: React.ReactNode }) => (
+	<dd className={cn("text-sm", className)}>{children}</dd>
+);
+export const DeploymentMetadata = ({ deployment }: DeploymentMetadataProps) => {
+	const TOP_FIELDS = [
+		{
+			field: "Status",
+			ComponentValue: () =>
+				deployment.status ? (
+					<dd>
+						<StatusBadge status={deployment.status} />
+					</dd>
+				) : (
+					<None />
+				),
+		},
+		{
+			field: "Created",
+			ComponentValue: () =>
+				deployment.created ? (
+					<FieldValue className="font-mono">{deployment.created}</FieldValue>
+				) : (
+					<None />
+				),
+		},
+		{
+			field: "Updated",
+			ComponentValue: () =>
+				deployment.updated ? (
+					<FieldValue className="font-mono">{deployment.updated}</FieldValue>
+				) : (
+					<None />
+				),
+		},
+		{
+			field: "Entrypoint",
+			ComponentValue: () =>
+				deployment.entrypoint ? (
+					<FieldValue>{deployment.entrypoint}</FieldValue>
+				) : (
+					<None />
+				),
+		},
+		{
+			field: "Path",
+			ComponentValue: () =>
+				deployment.path ? <FieldValue>{deployment.path}</FieldValue> : <None />,
+		},
+		{
+			field: "Concurrency Limit",
+			ComponentValue: () =>
+				deployment.global_concurrency_limit ? (
+					<FieldValue>{deployment.global_concurrency_limit.limit}</FieldValue>
+				) : (
+					<None />
+				),
+		},
+	] as const;
+
+	const BOTTOM_FIELDS = [
+		{
+			field: "Flow ID",
+			ComponentValue: () => <FieldValue>{deployment.flow_id}</FieldValue>,
+		},
+		{
+			field: "Deployment ID",
+			ComponentValue: () => <FieldValue>{deployment.id}</FieldValue>,
+		},
+		{
+			field: "Deployment Version",
+			ComponentValue: () =>
+				deployment.version ? (
+					<FieldValue>{deployment.version}</FieldValue>
+				) : (
+					<None />
+				),
+		},
+		{
+			field: "Storage Document ID",
+			ComponentValue: () =>
+				deployment.storage_document_id ? (
+					<FieldValue>{deployment.storage_document_id}</FieldValue>
+				) : (
+					<None />
+				),
+		},
+		{
+			field: "Infrastructure Document ID",
+			ComponentValue: () =>
+				deployment.infrastructure_document_id ? (
+					<FieldValue>{deployment.infrastructure_document_id}</FieldValue>
+				) : (
+					<None />
+				),
+		},
+		{
+			field: "Tags",
+			ComponentValue: () =>
+				deployment.tags ? (
+					<dd aria-label={deployment.tags.toString()}>
+						<TagBadgeGroup tags={deployment.tags} maxTagsDisplayed={4} />
+					</dd>
+				) : (
+					<None />
+				),
+		},
+	];
+
+	return (
+		<div>
+			<ul className="flex flex-col gap-3">
+				{TOP_FIELDS.map(({ field, ComponentValue }) => (
+					<li key={field}>
+						<dl>
+							<FieldLabel>{field}</FieldLabel>
+							<ComponentValue />
+						</dl>
+					</li>
+				))}
+			</ul>
+			<hr className="my-3" />
+			<ul className="flex flex-col gap-3">
+				{BOTTOM_FIELDS.map(({ field, ComponentValue }) => (
+					<li key={field}>
+						<dl>
+							<FieldLabel>{field}</FieldLabel>
+							<ComponentValue />
+						</dl>
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+};