Add InputRole as a drop down selector

packages/lib/src/config/definitions.ts

@@ -157,6 +157,7 @@ export class ControllerConfig extends classes.Config<ControllerConfigFields> {
 		"controller.default_role_id": {
 			title: "Default role",
 			description: "ID of role assigned by default to new users.",
+			inputComponent: "role",
 			type: "number",
 			optional: true,
 			initialValue: 1,

packages/web_ui/src/bootstrap.tsx

@@ -7,6 +7,7 @@ import * as lib from "@clusterio/lib";
 
 import App from "./components/App";
 import BaseWebPlugin, { InputComponent } from "./BaseWebPlugin";
+import InputRole from "./components/InputRole";
 import InputModPack from "./components/InputModPack";
 import { Control, ControlConnector } from "./util/websocket";
 
@@ -109,6 +110,7 @@ async function loadPlugins(pluginInfos: lib.PluginWebpackEnvInfo[], control: Con
 function inputComponentsFromPlugins(plugins: Map<string, BaseWebPlugin>) {
 	const inputComponents: Record<string, InputComponent> = {
 		"mod_pack": InputModPack,
+		"role": InputRole,
 	};
 	for (let [pluginName, plugin] of plugins) {
 		for (const [name, Component] of Object.entries(plugin.inputComponents)) {

packages/web_ui/src/components/InputRole.tsx

@@ -0,0 +1,30 @@
+import React, { useContext, useEffect, useState } from "react";
+import { Select } from "antd";
+
+import * as lib from "@clusterio/lib";
+
+import ControlContext from "./ControlContext";
+import { notifyErrorHandler } from "../util/notify";
+import { InputComponentProps } from "../BaseWebPlugin";
+
+export default function InputRole(props: InputComponentProps) {
+	let control = useContext(ControlContext);
+	let [roles, setRoles] = useState<lib.Role[]>([]);
+
+	useEffect(() => {
+		control.send(new lib.RoleListRequest()).then(newRoles => {
+			setRoles(newRoles);
+		}).catch(notifyErrorHandler("Error fetching role list"));
+	}, []);
+
+	return <Select
+		style={{ minWidth: 175 }}
+		onChange={(value) => props.onChange(value ?? null)}
+		value={props.value}
+		options={[...roles.values()].map(role => ({
+			label: role.name,
+			value: role.id,
+		}))}
+		allowClear={props.fieldDefinition.optional}
+	/>;
+}