Add hidden and readonly config property

CHANGELOG.md

@@ -36,6 +36,7 @@ Many thanks to the following for contributing to this release:
 - Monorepos are now supported for external plugins [#654](https://github.com/clusterio/clusterio/pull/654).
 - Changed default role selection to be a dropdown menu rather than id [#664](https://github.com/clusterio/clusterio/pull/664).
 - Added credential option to config entries to allow writing sensitive data that can't be read back remotely.
+- Allow hidden and readonly graphical representations of config values. [#665](https://github.com/clusterio/clusterio/pull/665).
 
 ### Changes
 

packages/lib/src/config/classes.ts

@@ -122,6 +122,15 @@ export interface FieldDefinition {
 	 * from the locations specified.
 	 */
 	credential?: ConfigLocation[];
+	/**
+	 * True if graphical interfaces should prevent the user modifying the value
+	 * This is client side and does not provide any validation logic
+	 */
+	readonly?: boolean;
+	/**
+	 * True if graphical interfaces should hide the config value
+	 */
+	hidden?: boolean;
 }
 
 export type ConfigDefs<Fields> = {

packages/lib/src/config/definitions.ts

@@ -223,6 +223,7 @@ export class HostConfig extends classes.Config<HostConfigFields> {
 			description: "ID of the host",
 			type: "number",
 			initialValue: () => Math.random() * 2**31 | 0,
+			hidden: true,
 		},
 		"host.factorio_directory": {
 			description: "Path to directory to look for factorio installs",
@@ -345,10 +346,12 @@ export class InstanceConfig extends classes.Config<InstanceConfigFields> {
 			description: "ID of the instance",
 			type: "number",
 			initialValue: () => Math.random() * 2**31 | 0,
+			hidden: true,
 		},
 		"instance.assigned_host": {
 			type: "number",
 			optional: true,
+			hidden: true,
 		},
 		"instance.auto_start": {
 			description: "Automatically start this instance when the host hosting it is started up",

packages/web_ui/src/components/BaseConfigTree.tsx

@@ -40,16 +40,16 @@ function renderInput(inputComponents: Record<string, InputComponent>, def: lib.F
 		return <CustomInput fieldDefinition={def} />;
 	}
 	if (def.type === "boolean") {
-		return <Checkbox/>;
+		return <Checkbox disabled={def.readonly} />;
 	}
 	if (def.type === "string") {
 		if (def.credential) {
-			return <Input.Password autoComplete={def.autoComplete} />;
+			return <Input.Password autoComplete={def.autoComplete} disabled={def.readonly} />;
 		}
-		return <Input autoComplete={def.autoComplete} />;
+		return <Input autoComplete={def.autoComplete} disabled={def.readonly} />;
 	}
 	if (def.type === "number") {
-		return <InputNumber autoComplete={def.autoComplete} />;
+		return <InputNumber autoComplete={def.autoComplete} disabled={def.readonly} />;
 	}
 
 	return `Unknown type ${def.type}`;
@@ -269,6 +269,9 @@ function computeTreeData(
 			if (!canWrite && !canRead) {
 				continue;
 			}
+			if (def.hidden === true) {
+				continue;
+			}
 
 			let fieldName = `${groupName}.${field}`;
 			let value = config.get(fieldName) as any;