[UI v2] feat: Adds Deployment configuration tab

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

@@ -0,0 +1,26 @@
+import { Deployment } from "@/api/deployments";
+import { JsonInput } from "../ui/json-input";
+import { Typography } from "../ui/typography";
+
+type DeploymentConfigurationProps = {
+	deployment: Deployment;
+};
+
+export const DeploymentConfiguration = ({
+	deployment,
+}: DeploymentConfigurationProps) => {
+	const jobVariablesDisplay = JSON.stringify(
+		deployment.job_variables ?? {},
+		null,
+		2,
+	);
+	const pullStepsDisplay = JSON.stringify(deployment.pull_steps ?? [], null, 2);
+	return (
+		<div className="flex flex-col gap-4">
+			<Typography variant="h4">Job Variables</Typography>
+			<JsonInput copy disabled hideLineNumbers value={jobVariablesDisplay} />
+			<Typography variant="h4">Pull Steps </Typography>
+			<JsonInput copy disabled hideLineNumbers value={pullStepsDisplay} />
+		</div>
+	);
+};

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

@@ -4,6 +4,7 @@ import type { DeploymentDetailsTabOptions } from "@/routes/deployments/deploymen
 import { Link, getRouteApi } from "@tanstack/react-router";
 import { type JSX } from "react";
 
+import { DeploymentConfiguration } from "./deployment-configuration";
 import { DeploymentDescription } from "./deployment-description";
 
 const routeApi = getRouteApi("/deployments/deployment/$id");
@@ -71,7 +72,7 @@ export const DeploymentDetailsTabs = ({
 			),
 			ViewComponent: () => (
 				<TabsContent value="Configuration">
-					<div className="border border-red-400">{"<ConfigurationView />"}</div>
+					<DeploymentConfiguration deployment={deployment} />
 				</TabsContent>
 			),
 		},

ui-v2/src/components/ui/icons/constants.ts

@@ -15,6 +15,7 @@ import {
 	CircleArrowOutUpRight,
 	CircleCheck,
 	Clock,
+	Copy,
 	Cpu,
 	EllipsisVertical,
 	ExternalLink,
@@ -54,6 +55,7 @@ export const ICONS = {
 	CircleArrowOutUpRight,
 	CircleCheck,
 	Clock,
+	Copy,
 	Cpu,
 	EllipsisVertical,
 	ExternalLink,

ui-v2/src/components/ui/json-input.tsx

@@ -1,12 +1,15 @@
 import React, { useRef, useEffect } from "react";
 
+import { useToast } from "@/hooks/use-toast";
 import { cn } from "@/lib/utils";
 import { json } from "@codemirror/lang-json";
 import {
 	type BasicSetupOptions,
 	EditorView,
 	useCodeMirror,
 } from "@uiw/react-codemirror";
+import { Button } from "./button";
+import { Icon } from "./icons";
 
 const extensions = [json(), EditorView.lineWrapping];
 
@@ -17,6 +20,7 @@ type JsonInputProps = React.ComponentProps<"div"> & {
 	disabled?: boolean;
 	className?: string;
 	hideLineNumbers?: boolean;
+	copy?: boolean;
 };
 
 export const JsonInput = React.forwardRef<HTMLDivElement, JsonInputProps>(
@@ -25,13 +29,15 @@ export const JsonInput = React.forwardRef<HTMLDivElement, JsonInputProps>(
 			className,
 			value,
 			onChange,
+			copy = false,
 			onBlur,
 			disabled,
 			hideLineNumbers = false,
 			...props
 		},
 		forwardedRef,
 	) => {
+		const { toast } = useToast();
 		const editor = useRef<HTMLDivElement | null>(null);
 		// Setting `basicSetup` messes up the tab order. We only change the basic setup
 		// if the input is disabled, so we leave it undefined to maintain the tab order.
@@ -61,10 +67,15 @@ export const JsonInput = React.forwardRef<HTMLDivElement, JsonInputProps>(
 			}
 		}, [setContainer]);
 
+		const handleCopy = (_value: string) => {
+			toast({ title: "Copied to clipboard" });
+			void navigator.clipboard.writeText(_value);
+		};
+
 		return (
 			<div
 				className={cn(
-					"rounded-md border shadow-sm overflow-hidden focus-within:outline-none focus-within:ring-1 focus-within:ring-ring",
+					"rounded-md border shadow-sm overflow-hidden focus-within:outline-none focus-within:ring-1 focus-within:ring-ring relative",
 					className,
 				)}
 				ref={(node) => {
@@ -76,7 +87,19 @@ export const JsonInput = React.forwardRef<HTMLDivElement, JsonInputProps>(
 					}
 				}}
 				{...props}
-			/>
+			>
+				{copy && value && (
+					<Button
+						onClick={() => handleCopy(value)}
+						variant="ghost"
+						size="icon"
+						className="absolute top-0 right-0 z-10"
+						aria-label="copy"
+					>
+						<Icon id="Copy" className="h-2 w-2" />
+					</Button>
+				)}
+			</div>
 		);
 	},
 );