Show defaults for mod settings added while the page is open (#1172)

The mod pack view gave the settings form its values through the Form's
initialValues, which rc-field-form only applies when the form is
created. Settings added by a data export while the page was open were
shown empty, and color settings black, until the page was reloaded.
Each setting field now gets its saved value as its own initialValue,
which is applied when the field is created and when the form is reset.

packages/web_ui/src/components/ModPackViewPage.tsx

@@ -907,6 +907,8 @@ type SettingsTableFieldProps = {
 	allowedValues: any;
 	locale: Map<string, any>;
 	changed: boolean;
+	/** Saved value of the setting, used when the field is created and when the form is reset */
+	initialValue: lib.ModSetting["value"] | undefined;
 };
 const SettingsTableField = memo((props: SettingsTableFieldProps) => {
 	const name = props.name;
@@ -932,6 +934,7 @@ const SettingsTableField = memo((props: SettingsTableFieldProps) => {
 
 	return <Form.Item
 		name={[props.scope, name]}
+		initialValue={props.initialValue}
 		label={props.locale.get(`mod-setting-name.${name}`) || name}
 		tooltip={props.locale.get(`mod-setting-description.${name}`)}
 		labelCol={{ span: 8 }}
@@ -954,6 +957,8 @@ const SettingsTableField = memo((props: SettingsTableFieldProps) => {
 
 type SettingsTableProps = {
 	modPack: lib.ModPack;
+	/** Mod pack without unsaved changes, reverting the form goes back to its values */
+	savedModPack: lib.ModPack;
 	prototypes: any;
 	locale: any;
 	changes: ModChange[];
@@ -1014,6 +1019,7 @@ function SettingsTable(props: SettingsTableProps) {
 					allowedValues={prototype.allowed_values}
 					locale={props.locale}
 					changed={hasChange(props.changes, { type: "settings.set", scope, name: prototype.name })}
+					initialValue={props.savedModPack.settings[scope].get(prototype.name)?.value}
 				/>
 			)}
 		</Fragment>);
@@ -1294,13 +1300,12 @@ export default function ModPackViewPage() {
 					syncTimeout.current = setTimeout(syncPack.bind(undefined, allFields), 500);
 				}
 			}}
+			// Mod settings get their value on each field instead, the form only applies initialValues when it is
+			// created, so settings added by an export while the page is open would show up empty.
 			initialValues={{
 				name: modPack.name,
 				description: modPack.description,
 				factorioVersion: modPack.factorioVersion,
-				"startup": Object.fromEntries(pickValue(modPack.settings["startup"])),
-				"runtime-global": Object.fromEntries(pickValue(modPack.settings["runtime-global"])),
-				"runtime-per-user": Object.fromEntries(pickValue(modPack.settings["runtime-per-user"])),
 			}}
 		>
 			<Descriptions size="small" bordered column={{ xs: 1, sm: 2, lg: 3 }}>
@@ -1349,6 +1354,7 @@ export default function ModPackViewPage() {
 			/>
 			<SettingsTable
 				modPack={modifiedModPack}
+				savedModPack={modPack}
 				changes={changes}
 				onChange={pushChange}
 				onRevert={revertChange}