Merge pull request #701 from Cooldude2606/feature/enum-config-input

packages/web_ui/src/components/AssignInstanceModal.tsx

@@ -77,13 +77,14 @@ export default function AssignInstanceModal(props: AssignInstanceModalProps) {
 			</Paragraph>
 			<Form form={form} initialValues={{ host: props.hostId ?? "null" }}>
 				<Form.Item name="host" label="Host">
-					<Select>
+					<Select showSearch optionFilterProp="name">
 						<Select.Option value={"null"}>
 							<Typography.Text italic>Unassigned</Typography.Text>
 						</Select.Option>
 						{[...hosts.values()].sort((a, b) => strcmp(a.name, b.name)).map((host) => <Select.Option
 							key={host["id"]}
 							value={host["id"]}
+							name={host["name"]}
 							disabled={!host["connected"]}
 						>
 							{host["name"]}
@@ -95,4 +96,3 @@ export default function AssignInstanceModal(props: AssignInstanceModalProps) {
 		</Modal>
 	</>;
 }
-

packages/web_ui/src/components/BaseConfigTree.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import {
-	Button, Card, Checkbox, Form, FormInstance, Input, InputNumber, Space, Spin, Tooltip, Tree, Typography,
+	Button, Card, Checkbox, Form, FormInstance, Input, InputNumber, Select, Space, Spin, Tooltip, Tree, Typography,
 } from "antd";
 import ReloadOutlined from "@ant-design/icons/ReloadOutlined";
 
@@ -46,6 +46,15 @@ function renderInput(inputComponents: Record<string, InputComponent>, def: lib.F
 		if (def.credential) {
 			return <Input.Password autoComplete={def.autoComplete ?? "new-password"} disabled={readonly} />;
 		}
+		if (def.enum) {
+			return <Select
+				showSearch
+				style={{ minWidth: 175 }}
+				options={def.enum.map(value => ({ label: value, value: value }))}
+				allowClear={def.optional}
+				disabled={readonly}
+			/>;
+		}
 		return <Input autoComplete={def.autoComplete} disabled={readonly} />;
 	}
 	if (def.type === "number") {

packages/web_ui/src/components/InputModPack.tsx

@@ -7,6 +7,8 @@ import { InputComponentProps } from "../BaseWebPlugin";
 export default function InputModPack(props: InputComponentProps) {
 	const [modPacks] = useModPacks();
 	return <Select
+		showSearch
+		optionFilterProp="label"
 		style={{ minWidth: 175 }}
 		onChange={(value) => props.onChange(value ?? null)}
 		value={props.value}

packages/web_ui/src/components/InputRole.tsx

@@ -18,6 +18,8 @@ export default function InputRole(props: InputComponentProps) {
 	}, []);
 
 	return <Select
+		showSearch
+		optionFilterProp="label"
 		style={{ minWidth: 175 }}
 		onChange={(value) => props.onChange(value ?? null)}
 		value={props.value}

packages/web_ui/src/components/ModPackViewPage.tsx

@@ -201,8 +201,10 @@ function SearchModsTable(props: SearchModsTableProps) {
 						key: "version",
 						align: "right",
 						render: (_, result) => <Select
+							showSearch
 							size="small"
 							variant="borderless"
+							optionFilterProp="label"
 							value={modResultSelectedVersion.get(result.name) || 0}
 							onChange={index => {
 								const newVersions = new Map(modResultSelectedVersion);

packages/web_ui/src/components/SavesList.tsx

@@ -151,9 +151,7 @@ function TransferModal(props: ModalProps) {
 					<Select
 						autoFocus
 						showSearch
-						filterOption={(input, option) => (
-							(option?.title!.toLowerCase().indexOf(input.toLowerCase()) ?? -1) >= 0
-						)}
+						optionFilterProp="title"
 					>
 						{[...instances.values()].filter(
 							instance => instance["id"] !== props.instanceId

packages/web_ui/src/components/UserViewPage.tsx

@@ -88,14 +88,12 @@ export default function UserViewPage() {
 			onChange={() => setRolesDirty(true)}
 			loading={!roles}
 			mode="multiple"
-			filterOption={(inputValue:string, option: any): boolean => {
-				let role = roles.get(option.value);
-				return role?.name.toLowerCase().includes(inputValue.toLowerCase()) ?? false;
-			}}
+			optionFilterProp="name"
 		>
 			{[...roles.values()].map(r => <Select.Option
 				key={r.id}
 				value={r.id}
+				name={r.name}
 			>{r.name}</Select.Option>)}
 		</Select>
 	</Form.Item>;