[UI v2] feat: Adds Server Settings component

PrefectHQ · Jan 30, 2025 · 105081d · 105081d
1 parent e19fbfe
commit 105081d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/ui-v2/src/components/settings/server-settings.tsx b/ui-v2/src/components/settings/server-settings.tsx
@@ -1,3 +1,5 @@
+import { JsonInput } from "@/components/ui/json-input";
+
 type ServerSettingsProps = {
 	settings: Record<string, unknown>;
 };
@@ -6,9 +8,13 @@ export const ServerSettings = ({ settings }: ServerSettingsProps) => {
 	return (
 		<div className="flex flex-col gap-1">
 			<label htmlFor="server-settings">Server Settings</label>
-			<div id="server-settings" className="p-2 bg-slate-100 rounded-sm">
-				TODO: {JSON.stringify(settings)}
-			</div>
+			<JsonInput
+				id="server-settings"
+				className="p-2 rounded-sm"
+				value={JSON.stringify(settings, null, 2)}
+				disabled
+				hideLineNumbers
+			/>
 		</div>
 	);
 };
diff --git a/ui-v2/src/components/ui/json-input.tsx b/ui-v2/src/components/ui/json-input.tsx
@@ -16,11 +16,20 @@ type JsonInputProps = React.ComponentProps<"div"> & {
 	onBlur?: () => void;
 	disabled?: boolean;
 	className?: string;
+	hideLineNumbers?: boolean;
 };
 
 export const JsonInput = React.forwardRef<HTMLDivElement, JsonInputProps>(
 	(
-		{ className, value, onChange, onBlur, disabled, ...props },
+		{
+			className,
+			value,
+			onChange,
+			onBlur,
+			disabled,
+			hideLineNumbers = false,
+			...props
+		},
 		forwardedRef,
 	) => {
 		const editor = useRef<HTMLDivElement | null>(null);
@@ -29,6 +38,7 @@ export const JsonInput = React.forwardRef<HTMLDivElement, JsonInputProps>(
 		let basicSetup: BasicSetupOptions | undefined;
 		if (disabled) {
 			basicSetup = {
+				lineNumbers: !hideLineNumbers,
 				highlightActiveLine: false,
 				foldGutter: false,
 				highlightActiveLineGutter: false,