From 4901d76ebe125d58f3254334b6c0354f4c45e4eb Mon Sep 17 00:00:00 2001
From: Cooldude2606 <25043174+Cooldude2606@users.noreply.github.com>
Date: Thu, 22 Jan 2026 00:37:06 +0000
Subject: [PATCH] Refactor version inputs

---
 packages/lib/src/config/definitions.ts        |  1 +
 packages/web_ui/src/bootstrap.tsx             |  2 +
 .../src/components/InputPartialVersion.tsx    | 47 +++++++++++++++++
 .../src/components/InputTargetVersion.tsx     | 50 +++++++++++++++++++
 .../web_ui/src/components/ModPackViewPage.tsx |  9 ++--
 packages/web_ui/src/components/ModsPage.tsx   |  6 ++-
 6 files changed, 111 insertions(+), 4 deletions(-)
 create mode 100644 packages/web_ui/src/components/InputPartialVersion.tsx
 create mode 100644 packages/web_ui/src/components/InputTargetVersion.tsx

diff --git a/packages/lib/src/config/definitions.ts b/packages/lib/src/config/definitions.ts
index b948a04c..18d30609 100644
--- a/packages/lib/src/config/definitions.ts
+++ b/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:
diff --git a/packages/web_ui/src/bootstrap.tsx b/packages/web_ui/src/bootstrap.tsx
index 36c018f4..ce025ee6 100644
--- a/packages/web_ui/src/bootstrap.tsx
+++ b/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)) {
diff --git a/packages/web_ui/src/components/InputPartialVersion.tsx b/packages/web_ui/src/components/InputPartialVersion.tsx
new file mode 100644
index 00000000..ac38da0e
--- /dev/null
+++ b/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"
+	/>;
+}
diff --git a/packages/web_ui/src/components/InputTargetVersion.tsx b/packages/web_ui/src/components/InputTargetVersion.tsx
new file mode 100644
index 00000000..76a523e6
--- /dev/null
+++ b/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"
+	/>;
+}
diff --git a/packages/web_ui/src/components/ModPackViewPage.tsx b/packages/web_ui/src/components/ModPackViewPage.tsx
index 4a185a1c..e7e84bc8 100644
--- a/packages/web_ui/src/components/ModPackViewPage.tsx
+++ b/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>
diff --git a/packages/web_ui/src/components/ModsPage.tsx b/packages/web_ui/src/components/ModsPage.tsx
index 7ab5d5d9..0c526b9d 100644
--- a/packages/web_ui/src/components/ModsPage.tsx
+++ b/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>