factorio-clusterio/packages/master/web/pages/users/user.jsx

import React, { Component } from "react";
import { Card, Button, Popover, Select, Transfer } from "antd";
import {
	deleteUser,
	listUsers,
	listRoles,
	setRoles,
} from "../../util/wslink";
import DataTable from "../../components/data-table";
import notify from "../../util/notify";
import DeleteOutlined from "@ant-design/icons/DeleteOutlined";

const { Option } = Select;

export class UserView extends Component {
	constructor(props) {
		super(props);
		this.state = {
			user: {},
		};
		this.messagesEndRef = React.createRef();
	}

	navigate(url) {
		this.props.history.push(url);
	}

	async componentDidMount() {
		await this.getData();
	}

	async getData() {
		let name = this.props.match.params.id;

		let users = await listUsers();
		let roles = await listRoles();

		this.setState({
			user: users.find(x => x.name === name),
			roles,
		});
	}

	async handleChange(targetKeys) {
		this.setState({
			user: {
				...this.state.user,
				roles: targetKeys,
			},
		});
		let response = await setRoles({
			name: this.state.user.name,
			roles: targetKeys,
		});
		console.log("Updated user roles",response);
	};

	render() {
		console.log(this.state);
		let { user, roles } = this.state;
		return <Card>
			<h2>{user.name}</h2>
			<h3>Assign roles</h3>
			<Transfer
				titles={["Available","Assigned"]}
				dataSource={roles}
				showSearch
				filterOption={(inputValue, option) => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1}
				targetKeys={user.roles}
				onChange={this.handleChange.bind(this)}
				render={item => item.name}
			/>
			<Popover
				content={
					<Button
						type="primary"
						danger
						onClick={async () => {
							await deleteUser({ name: user.name });
							notify("Deleted user " + user.name, "success");
							this.navigate("/users");
						}}
					>
						Delete this user from the cluster
					</Button>
				}
				trigger="click"
			>
				<Button danger style={{ float: "right", fontSize: "16px" }}>
					<DeleteOutlined />
				</Button>
			</Popover>
		</Card>;
	}
}