Show the template value while a link is staged

Part of #200

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

packages/web_ui/src/components/BaseConfigTree.tsx

@@ -74,6 +74,7 @@ export type ConfigInheritance = {
 	canInherit: (config: lib.Config<any>, field: string) => boolean;
 	isInherited: (config: lib.Config<any>, field: string, prop?: string) => boolean;
 	inherit: (field: string, prop?: string) => Promise<void>;
+	templateValue: (field: string, prop?: string) => unknown;
 	notice?: (config: lib.Config<any>) => React.ReactNode;
 };
 
@@ -331,12 +332,18 @@ function computeTreeData(
 		if (!linking.has(key)) {
 			return button(
 				"Not linked to the template. Click to link it again when applied.", <DisconnectOutlined />, "Link",
-				() => { setLinking(new Map([...linking, [key, [fieldName, prop]]])); revert(); },
+				() => {
+					setLinking(new Map([...linking, [key, [fieldName, prop]]]));
+					revert();
+					// Show the value the field takes after apply
+					const value = inheritance.templateValue(fieldName, prop);
+					form.setFieldValue(key, prop === undefined ? value : JSON.stringify(value));
+				},
 			);
 		}
 		return button(
 			"Linked to the template when applied. Click to keep this value instead.", <LinkOutlined />, "Unlink",
-			() => setLinking(new Map([...linking].filter(([k]) => k !== key))),
+			() => { setLinking(new Map([...linking].filter(([k]) => k !== key))); revert(); },
 		);
 	}
 	function isReadonly(canWrite: boolean, key: string, fieldName: string, prop?: string) {

packages/web_ui/src/components/InstanceConfigTree.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useRef } from "react";
 import { Alert } from "antd";
 
 import * as lib from "@clusterio/lib";
@@ -29,9 +29,15 @@ function TemplateNotice(props: { templateId: number }) {
 
 export default function InstanceConfigTree(props: InstanceConfigTreeProps) {
 	let control = useContext(ControlContext);
+	const templateConfig = useRef<lib.ConfigSchema>({});
 
 	async function retrieveConfig() {
-		return await control.send(new lib.InstanceConfigGetRequest(props.id));
+		const config = await control.send(new lib.InstanceConfigGetRequest(props.id));
+		const templateId = config["instance.template_id"];
+		templateConfig.current = typeof templateId === "number"
+			? await control.send(new lib.InstanceConfigGetRequest(templateId))
+			: {};
+		return config;
 	}
 
 	async function setConfig(fields: Record<string, string | Record<string, string>>) {
@@ -47,6 +53,10 @@ export default function InstanceConfigTree(props: InstanceConfigTreeProps) {
 		inherit: async (field, prop) => {
 			await control.send(new lib.InstanceConfigInheritFieldRequest(props.id, field, prop));
 		},
+		templateValue: (field, prop) => {
+			const value = templateConfig.current[field] as any;
+			return prop === undefined ? value : value?.[prop];
+		},
 		notice: (config) => {
 			const templateId = (config as lib.InstanceConfig).get("instance.template_id");
 			return templateId !== null ? <TemplateNotice templateId={templateId} /> : null;