Refactor version inputs

packages/lib/src/config/definitions.ts

@@ -479,6 +479,7 @@ export class InstanceConfig extends classes.Config<InstanceConfigFields> {
 			restartRequired: true,
 			type: "string",
 			initialValue: "latest",
+			inputComponent: "target_version",
 		},
 		"factorio.executable_path": {
 			description:

packages/web_ui/src/bootstrap.tsx

@@ -9,6 +9,7 @@ import App from "./components/App";
 import BaseWebPlugin, { InputComponent } from "./BaseWebPlugin";
 import InputRole from "./components/InputRole";
 import InputModPack from "./components/InputModPack";
+import InputTargetVersion from "./components/InputTargetVersion";
 import { Control, ControlConnector } from "./util/websocket";
 
 const { ConsoleTransport, WebConsoleFormat, logger } = lib;
@@ -111,6 +112,7 @@ function inputComponentsFromPlugins(plugins: Map<string, BaseWebPlugin>) {
 	const inputComponents: Record<string, InputComponent> = {
 		"mod_pack": InputModPack,
 		"role": InputRole,
+		"target_version": InputTargetVersion,
 	};
 	for (let [pluginName, plugin] of plugins) {
 		for (const [name, Component] of Object.entries(plugin.inputComponents)) {

packages/web_ui/src/components/InputPartialVersion.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { Select } from "antd";
+
+import { InputComponentProps } from "../BaseWebPlugin";
+import * as lib from "@clusterio/lib";
+
+// Hardcoded list for step 1
+const FACTORIO_VERSIONS = [
+	"2.0",
+	"1.1",
+	"1.0",
+	"0.18",
+	"0.17",
+	"0.16",
+	"0.15",
+	"0.14",
+	"0.13",
+] as const;
+
+const defaultFieldDefinition: lib.FieldDefinition = {
+	type: "string",
+	optional: false,
+};
+
+export default function InputPartialVersion(
+	props: Omit<InputComponentProps, "fieldDefinition"> & { fieldDefinition?: lib.FieldDefinition; className?: string }
+) {
+	const fieldDefinition = props.fieldDefinition || defaultFieldDefinition;
+
+	const options = FACTORIO_VERSIONS.map(version => ({
+		label: version,
+		value: version,
+	}));
+
+	return <Select
+		showSearch
+		optionFilterProp="label"
+		style={{ minWidth: 175 }}
+		className={props.className}
+		onChange={(value) => props.onChange(value ?? null)}
+		value={props.value}
+		options={options}
+		allowClear={fieldDefinition.optional}
+		disabled={props.disabled}
+		placeholder="Select Factorio version"
+	/>;
+}

packages/web_ui/src/components/InputTargetVersion.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Select } from "antd";
+
+import { InputComponentProps } from "../BaseWebPlugin";
+import * as lib from "@clusterio/lib";
+
+// Hardcoded list for step 1
+const FACTORIO_VERSIONS = [
+	"2.0",
+	"1.1",
+	"1.0",
+	"0.18",
+	"0.17",
+	"0.16",
+	"0.15",
+	"0.14",
+	"0.13",
+] as const;
+
+const defaultFieldDefinition: lib.FieldDefinition = {
+	type: "string",
+	optional: false,
+};
+
+export default function InputTargetVersion(
+	props: Omit<InputComponentProps, "fieldDefinition"> & { fieldDefinition?: lib.FieldDefinition; className?: string }
+) {
+	const fieldDefinition = props.fieldDefinition || defaultFieldDefinition;
+
+	const options = FACTORIO_VERSIONS.map(version => ({
+		label: version,
+		value: version,
+	}));
+
+	// Add "latest" option for TargetVersion
+	options.unshift({ label: "latest", value: "latest" });
+
+	return <Select
+		showSearch
+		optionFilterProp="label"
+		style={{ minWidth: 175 }}
+		className={props.className}
+		onChange={(value) => props.onChange(value ?? null)}
+		value={props.value}
+		options={options}
+		allowClear={fieldDefinition.optional}
+		disabled={props.disabled}
+		placeholder="Select Factorio version"
+	/>;
+}

packages/web_ui/src/components/ModPackViewPage.tsx

@@ -26,6 +26,7 @@ import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import SectionHeader from "./SectionHeader";
 import ModDetails from "./ModDetails";
+import InputPartialVersion from "./InputPartialVersion";
 
 const { logger } = lib;
 const { Text } = Typography;
@@ -1288,9 +1289,11 @@ export default function ModPackViewPage() {
 							message: "Must be an a.b or a.b.c version number.",
 						}]}
 					>
-						<Input
-							className={hasChange(changes, { type: "factorioVersion" }) ? "changed" : ""}
-						/>
+					<InputPartialVersion
+						value={form.getFieldValue("factorioVersion")}
+						onChange={(value) => form.setFieldValue("factorioVersion", value)}
+						className={hasChange(changes, { type: "factorioVersion" }) ? "changed" : ""}
+					/>
 					</Form.Item>
 				</Descriptions.Item>
 			</Descriptions>

packages/web_ui/src/components/ModsPage.tsx

@@ -21,6 +21,7 @@ import SectionHeader from "./SectionHeader";
 import ModDetails from "./ModDetails";
 import { Dropzone } from "./Dropzone";
 import UploadButton from "./UploadButton";
+import InputPartialVersion from "./InputPartialVersion";
 
 const strcmp = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" }).compare;
 
@@ -128,7 +129,10 @@ function CreateModPackButton() {
 						message: "Must be an a.b or a.b.c version number.",
 					}]}
 				>
-					<Input />
+					<InputPartialVersion
+						value={form.getFieldValue("factorioVersion")}
+						onChange={(value) => form.setFieldValue("factorioVersion", value)}
+					/>
 				</Form.Item>
 			</Form>
 		</Modal>