Merge pull request #821 from Cooldude2606/feature/version-selector

Add drop down version selector based on Wube version archive

packages/web_ui/src/components/InputPartialVersion.tsx

@@ -0,0 +1,68 @@
+import React, { useContext, useEffect, useState } from "react";
+import { TreeSelect } from "antd";
+
+import * as lib from "@clusterio/lib";
+import { InputComponentProps } from "../BaseWebPlugin";
+import { useAccount } from "../model/account";
+import ControlContext from "./ControlContext";
+
+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 [versions, setVersions] = useState<readonly lib.PartialVersion[]>(lib.ApiVersions);
+	const control = useContext(ControlContext);
+	const account = useAccount();
+
+	useEffect(() => {
+		(async () => {
+			if (account.hasPermission("core.external.get_factorio_versions")) {
+				const res = await control.factorioVersions.get(5 * 60 * 1000);
+				setVersions(res.map(v => v.version));
+			}
+		})();
+	}, [control]);
+
+	// Split the versions into groups based on major minor
+	const groups = new Map<lib.PartialVersion, lib.PartialVersion[]>();
+
+	for (const version of versions) {
+		const [major, minor] = version.split(".");
+		const key = `${major}.${minor}` as lib.PartialVersion;
+
+		if (!groups.has(key)) {
+			groups.set(key, []);
+		}
+		groups.get(key)!.push(version);
+	}
+
+	// Construct the tree to be disabled
+	const tree = [...groups.entries()].map(([majorMinor, patchVersions]) => (
+		{
+			title: majorMinor,
+			value: majorMinor,
+			key: majorMinor,
+			children: patchVersions.map((v) => ({
+				title: v,
+				value: v,
+				key: v,
+			})),
+		}
+	));
+
+	return <TreeSelect
+		showSearch
+		style={{ minWidth: 175 }}
+		onChange={(value) => props.onChange(value ?? null)}
+		value={props.value}
+		treeData={tree}
+		allowClear={fieldDefinition.optional}
+		className={props.className}
+		disabled={props.disabled}
+	/>;
+}

packages/web_ui/src/components/InputTargetVersion.tsx

@@ -0,0 +1,71 @@
+import React, { useContext, useEffect, useState } from "react";
+import { TreeSelect } from "antd";
+
+import * as lib from "@clusterio/lib";
+import { InputComponentProps } from "../BaseWebPlugin";
+import { useAccount } from "../model/account";
+import ControlContext from "./ControlContext";
+
+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 [versions, setVersions] = useState<readonly lib.TargetVersion[]>(lib.ApiVersions);
+	const control = useContext(ControlContext);
+	const account = useAccount();
+
+	useEffect(() => {
+		(async () => {
+			if (account.hasPermission("core.external.get_factorio_versions")) {
+				const res = await control.factorioVersions.get(5 * 60 * 1000);
+				setVersions(res.map(v => v.version));
+			}
+		})();
+	}, [control]);
+
+	// Split the versions into groups based on major minor
+	const groups = new Map<lib.TargetVersion, lib.TargetVersion[]>();
+
+	for (const version of versions) {
+		const [major, minor] = version.split(".");
+		const key = `${major}.${minor}` as lib.PartialVersion;
+
+		if (!groups.has(key)) {
+			groups.set(key, []);
+		}
+		groups.get(key)!.push(version);
+	}
+
+	// Construct the tree to be disabled
+	const tree = [...groups.entries()].map(([majorMinor, patchVersions]) => (
+		{
+			title: majorMinor,
+			value: majorMinor,
+			key: majorMinor,
+			children: patchVersions.map((v) => ({
+				title: v,
+				value: v,
+				key: v,
+			})),
+		}
+	));
+
+	// Add "latest" option for TargetVersion
+	tree.unshift({ title: "latest", value: "latest", key: "latest", children: [] });
+
+	return <TreeSelect
+		showSearch
+		style={{ minWidth: 175 }}
+		onChange={(value) => props.onChange(value ?? null)}
+		value={props.value}
+		treeData={tree}
+		allowClear={fieldDefinition.optional}
+		className={props.className}
+		disabled={props.disabled}
+	/>;
+}

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,7 +1289,9 @@ export default function ModPackViewPage() {
 							message: "Must be an a.b or a.b.c version number.",
 						}]}
 					>
-						<Input
+						<InputPartialVersion
+							value={form.getFieldValue("factorioVersion")}
+							onChange={(value: any) => form.setFieldValue("factorioVersion", value)}
 							className={hasChange(changes, { type: "factorioVersion" }) ? "changed" : ""}
 						/>
 					</Form.Item>

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>