Update BaseConfigTree when props.id changes

packages/web_ui/src/components/BaseConfigTree.jsx

@@ -16,8 +16,13 @@ export default function BaseConfigTree(props) {
 		let newConfig = new props.ConfigClass("control");
 		await newConfig.load(serializedConfig);
 		setConfig(newConfig);
+		return newConfig;
 	}
-	useEffect(() => { updateConfig(); }, [props.id]);
+	useEffect(() => {
+		updateConfig().then(config => {
+			form.setFieldsValue(getInitialValues(config, props));
+		});
+	}, [props.id]);
 
 	function renderInput(def) {
 		if (def.type === "boolean") {
@@ -250,3 +255,28 @@ export default function BaseConfigTree(props) {
 		</Card>
 	</>;
 }
+
+function getInitialValues(config, props) {
+	let initialValues = {};
+	for (let [name, GroupClass] of props.ConfigClass.groups) {
+		let group = config.group(name);
+		for (let def of GroupClass.definitions.values()) {
+			if (!group.canAccess(def.name)) {
+				continue;
+			}
+
+			let value = group.get(def.name);
+			let fieldName = `${group.name}.${def.name}`;
+
+			if (def.type === "object") {
+				for (let prop of Object.keys(value)) {
+					let propPath = `${group.name}.${def.name}.${prop}`;
+					initialValues[propPath] = JSON.stringify(value[prop]);
+				}
+			} else {
+				initialValues[fieldName] = value;
+			}
+		}
+	}
+	return initialValues;
+}