Migrate deprecated ant design APIs

Rename visible to open and use menu instead of overlay in Dropdown as
both of these have been removed in the next major version of Antd.

packages/web_ui/src/components/AssignInstanceModal.jsx

@@ -11,20 +11,16 @@ const { Paragraph } = Typography;
 
 
 export default function AssignInstanceModal(props) {
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [hostList] = useHostList();
 	let [applying, setApplying] = useState(false);
 	let [form] = Form.useForm();
 	let control = useContext(ControlContext);
 
-	function open() {
-		setVisible(true);
-	}
-
 	function handleAssign() {
 		let hostId = form.getFieldValue("host");
 		if (hostId === undefined) {
-			setVisible(false);
+			setOpen(false);
 			return;
 		}
 
@@ -36,7 +32,7 @@ export default function AssignInstanceModal(props) {
 		control.send(
 			new libData.InstanceAssignRequest(props.id, hostId)
 		).then(() => {
-			setVisible(false);
+			setOpen(false);
 			if (props.onFinish) {
 				props.onFinish();
 			}
@@ -48,17 +44,17 @@ export default function AssignInstanceModal(props) {
 	}
 
 	function handleCancel() {
-		setVisible(false);
+		setOpen(false);
 	}
 
 	return <>
-		<Button {...props.buttonProps} onClick={open}>
+		<Button {...props.buttonProps} onClick={() => setOpen(true)}>
 			{props.buttonContent || "Assign"}
 		</Button>
 		<Modal
 			title="Assign Instance"
 			okText="Assign"
-			visible={visible}
+			open={open}
 			confirmLoading={applying}
 			onOk={handleAssign}
 			onCancel={handleCancel}

packages/web_ui/src/components/CreateSaveModal.jsx

@@ -8,7 +8,7 @@ import { notifyErrorHandler } from "../util/notify";
 
 
 export default function CreateSaveModal(props) {
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [creatingSave, setCreatingSave] = useState(false);
 	let [form] = Form.useForm();
 	let control = useContext(ControlContext);
@@ -56,7 +56,7 @@ export default function CreateSaveModal(props) {
 			new libData.InstanceCreateSaveRequest(name, seed, mapGenSettings, mapSettings),
 		).then(() => {
 			form.resetFields();
-			setVisible(false);
+			setOpen(false);
 		}).catch(
 			notifyErrorHandler("Error creating save")
 		).finally(() => {
@@ -81,7 +81,7 @@ export default function CreateSaveModal(props) {
 	}
 
 	function handleCancel() {
-		setVisible(false);
+		setOpen(false);
 	}
 
 	return <>
@@ -89,7 +89,7 @@ export default function CreateSaveModal(props) {
 			loading={creatingSave}
 			disabled={props.instance.status !== "stopped"}
 			onClick={() => {
-				setVisible(true);
+				setOpen(true);
 			}}
 		>
 			Create save
@@ -98,7 +98,7 @@ export default function CreateSaveModal(props) {
 			title="Create Save"
 			width={560}
 			okText="Create"
-			visible={visible}
+			open={open}
 			confirmLoading={creatingSave}
 			onOk={createSave}
 			onCancel={handleCancel}

packages/web_ui/src/components/HostsPage.jsx

@@ -17,7 +17,7 @@ const strcmp = new Intl.Collator(undefined, { numerice: "true", sensitivity: "ba
 
 function GenerateHostTokenButton(props) {
 	let control = useContext(ControlContext);
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [token, setToken] = useState(null);
 	let [hostId, setHostId] = useState(null);
 	let [form] = Form.useForm();
@@ -53,23 +53,23 @@ function GenerateHostTokenButton(props) {
 
 	// Generate a new random
 	useEffect(() => {
-		if (visible) {
+		if (open) {
 			generateToken().catch(notifyErrorHandler("Error generating token"));
 		}
-	}, [visible]);
+	}, [open]);
 
 	// Only install plugins that aren't filesystem paths. Npm modules have max 1 forward slash in their name.
 	const pluginString = pluginList.map(p => `"${p.requirePath}"`).filter(x => x.split("/") <= 1).join(" ");
 	return <>
 		<Button
-			onClick={() => { setVisible(true); }}
+			onClick={() => { setOpen(true); }}
 		>Generate Token</Button>
 		<Modal
 			title="Generate Host Token"
-			visible={visible}
+			open={open}
 			footer={null}
 			onCancel={() => {
-				setVisible(false);
+				setOpen(false);
 				setToken(null);
 				form.resetFields();
 			}}

packages/web_ui/src/components/InstanceViewPage.jsx

@@ -126,9 +126,9 @@ export default function InstanceViewPage(props) {
 			label: "Delete",
 		});
 	}
-	let instanceButtonsMenu = <Menu
-		items={instanceButtonMenuItems}
-		onClick={({ key }) => {
+	let instanceButtonsMenuProps = {
+		items: instanceButtonMenuItems,
+		onClick: ({ key }) => {
 			if (key === "export") {
 				setExportingData(true);
 				control.sendTo(
@@ -167,8 +167,8 @@ export default function InstanceViewPage(props) {
 					},
 				});
 			}
-		}}
-	/>;
+		},
+	};
 	let instanceButtons = <Space>
 		{
 			account.hasAnyPermission("core.instance.start", "core.instance.stop")
@@ -180,7 +180,7 @@ export default function InstanceViewPage(props) {
 			"core.instance.extract_players",
 			"core.instance.kill",
 			"core.instance.delete",
-		) && <Dropdown placement="bottomRight" trigger={["click"]} overlay={instanceButtonsMenu}>
+		) && <Dropdown placement="bottomRight" trigger={["click"]} menu={instanceButtonsMenuProps}>
 			<Button>More <DownOutlined /></Button>
 		</Dropdown>}
 	</Space>;

packages/web_ui/src/components/InstancesPage.jsx

@@ -15,7 +15,7 @@ import { notifyErrorHandler } from "../util/notify";
 function CreateInstanceButton(props) {
 	let control = useContext(ControlContext);
 	let history = useHistory();
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 
 	async function createInstance() {
@@ -30,7 +30,7 @@ function CreateInstanceButton(props) {
 		instanceConfig.set("instance.name", values.instanceName);
 		let serializedConfig = instanceConfig.serialize("controller");
 		await control.send(new libData.InstanceCreateRequest(serializedConfig));
-		setVisible(false);
+		setOpen(false);
 		history.push(`/instances/${instanceConfig.get("instance.id")}/view`);
 	}
 
@@ -38,15 +38,15 @@ function CreateInstanceButton(props) {
 		<Button
 			type="primary"
 			onClick={() => {
-				setVisible(true);
+				setOpen(true);
 			}}
 		>Create</Button>
 		<Modal
 			title="Create Instance"
 			okText="Create"
-			visible={visible}
+			open={open}
 			onOk={() => { createInstance().catch(notifyErrorHandler("Error creating instance")); }}
-			onCancel={() => { setVisible(false); }}
+			onCancel={() => { setOpen(false); }}
 			destroyOnClose
 		>
 			<Form form={form}>

packages/web_ui/src/components/LoadScenarioModal.jsx

@@ -8,7 +8,7 @@ import { notifyErrorHandler } from "../util/notify";
 
 
 export default function LoadScenarioModal(props) {
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [loadingScenario, setLoadingScenario] = useState(false);
 	let [form] = Form.useForm();
 	let control = useContext(ControlContext);
@@ -55,7 +55,7 @@ export default function LoadScenarioModal(props) {
 			{ instanceId: props.instance.id },
 			new libData.InstanceLoadScenarioRequest(scenario, seed, mapGenSettings, mapSettings),
 		).then(() => {
-			setVisible(false);
+			setOpen(false);
 		}).catch(
 			notifyErrorHandler("Error loading scenario")
 		).finally(() => {
@@ -80,7 +80,7 @@ export default function LoadScenarioModal(props) {
 	}
 
 	function handleCancel() {
-		setVisible(false);
+		setOpen(false);
 	}
 
 	return <>
@@ -88,7 +88,7 @@ export default function LoadScenarioModal(props) {
 			loading={loadingScenario}
 			disabled={props.instance.status !== "stopped"}
 			onClick={() => {
-				setVisible(true);
+				setOpen(true);
 			}}
 		>
 			Load scenario
@@ -97,7 +97,7 @@ export default function LoadScenarioModal(props) {
 			title="Load Scenario"
 			width={560}
 			okText="Load"
-			visible={visible}
+			open={open}
 			confirmLoading={loadingScenario}
 			onOk={loadScenario}
 			onCancel={handleCancel}

packages/web_ui/src/components/ModPackViewPage.jsx

@@ -485,7 +485,7 @@ function CopyButton(props) {
 	}, []);
 
 	let denied = clipboard.readPermissionState === "denied";
-	return <Tooltip title={denied ? clipboard.deniedReason : "Copied!"} visible={denied ? undefined : copiedVisible}>
+	return <Tooltip title={denied ? clipboard.deniedReason : "Copied!"} open={denied ? undefined : copiedVisible}>
 		<Button disabled={denied} onClick={() => {
 			try {
 				clipboard.writeText(props.content);
@@ -503,19 +503,19 @@ function CopyButton(props) {
 }
 
 function ExportButton(props) {
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	function close() {
-		setVisible(false);
+		setOpen(false);
 	}
 
 	let exportString;
-	if (visible) { exportString = props.modPack.toModPackString(); }
+	if (open) { exportString = props.modPack.toModPackString(); }
 
 	return <>
-		<Button icon={<ExportOutlined />} onClick={() => { setVisible(true); }}>Export to string</Button>
+		<Button icon={<ExportOutlined />} onClick={() => { setOpen(true); }}>Export to string</Button>
 		<Modal
 			title="Mod Pack String"
-			visible={visible}
+			open={open}
 			onOk={close}
 			onCancel={close}
 			destroyOnClose

packages/web_ui/src/components/ModsPage.jsx

@@ -25,19 +25,19 @@ const { logger } = libLogging;
 function ImportModPackButton() {
 	let control = useContext(ControlContext);
 	let history = useHistory();
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 	function close() {
-		setVisible(false);
+		setOpen(false);
 	}
 	return <>
-		<Button icon={<ImportOutlined />} onClick={() => { setVisible(true); }}>Import string</Button>
+		<Button icon={<ImportOutlined />} onClick={() => { setOpen(true); }}>Import string</Button>
 		<Modal
 			title="Import Mod Pack String"
-			visible={visible}
+			open={open}
 			okText="Import"
 			cancelText="Cancel"
-			onCancel={() => { setVisible(false); }}
+			onCancel={() => { setOpen(false); }}
 			onOk={() => {
 				(async () => {
 					let values;
@@ -74,19 +74,19 @@ function ImportModPackButton() {
 function CreateModPackButton() {
 	let control = useContext(ControlContext);
 	let history = useHistory();
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 	function close() {
-		setVisible(false);
+		setOpen(false);
 	}
 	return <>
-		<Button type="primary" icon={<PlusOutlined />} onClick={() => { setVisible(true); }}>Create</Button>
+		<Button type="primary" icon={<PlusOutlined />} onClick={() => { setOpen(true); }}>Create</Button>
 		<Modal
 			title="Create Mod Pack"
-			visible={visible}
+			open={open}
 			okText="Create"
 			cancelText="Cancel"
-			onCancel={() => { setVisible(false); }}
+			onCancel={() => { setOpen(false); }}
 			onOk={() => {
 				(async () => {
 					let values;

packages/web_ui/src/components/RolesPage.jsx

@@ -16,7 +16,7 @@ const strcmp = new Intl.Collator(undefined, { numerice: "true", sensitivity: "ba
 function CreateRoleButton() {
 	let control = useContext(ControlContext);
 	let history = useHistory();
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 
 	async function createRole() {
@@ -29,21 +29,21 @@ function CreateRoleButton() {
 		let result = await control.send(
 			new libData.RoleCreateRequest(values.roleName, values.description || "", [])
 		);
-		setVisible(false);
+		setOpen(false);
 		history.push(`/roles/${result.id}/view`);
 	}
 
 	return <>
 		<Button
 			type="primary"
-			onClick={() => { setVisible(true); }}
+			onClick={() => { setOpen(true); }}
 		>Create</Button>
 		<Modal
 			title="Create Role"
 			okText="Create"
-			visible={visible}
+			open={open}
 			onOk={() => { createRole().catch(notifyErrorHandler("Error creating role")); }}
-			onCancel={() => { setVisible(false); }}
+			onCancel={() => { setOpen(false); }}
 			destroyOnClose
 		>
 			<Form form={form}>

packages/web_ui/src/components/SavesList.jsx

@@ -19,17 +19,17 @@ import { notifyErrorHandler } from "../util/notify";
 
 function RenameModal(props) {
 	let control = useContext(ControlContext);
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 
 	return <>
-		<Button disabled={props.disabled} onClick={() => setVisible(true)}>Rename</Button>
+		<Button disabled={props.disabled} onClick={() => setOpen(true)}>Rename</Button>
 		<Modal
 			title="Rename save"
 			okText="Rename"
-			visible={visible}
+			open={open}
 			onOk={() => form.submit()}
-			onCancel={() => setVisible(false)}
+			onCancel={() => setOpen(false)}
 		>
 			<Form
 				form={form}
@@ -39,7 +39,7 @@ function RenameModal(props) {
 					control.send(
 						new libData.InstanceRenameSaveRequest(props.instanceId, props.save.name, values.newName)
 					).then(() => {
-						setVisible(false);
+						setOpen(false);
 						form.resetFields();
 					}).catch(notifyErrorHandler("Error renaming save"));
 				}}
@@ -58,17 +58,17 @@ function RenameModal(props) {
 
 function CopyModal(props) {
 	let control = useContext(ControlContext);
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 
 	return <>
-		<Button disabled={props.disabled} onClick={() => setVisible(true)}>Copy</Button>
+		<Button disabled={props.disabled} onClick={() => setOpen(true)}>Copy</Button>
 		<Modal
 			title="Copy save"
 			okText="Copy"
-			visible={visible}
+			open={open}
 			onOk={() => form.submit()}
-			onCancel={() => setVisible(false)}
+			onCancel={() => setOpen(false)}
 		>
 			<Form
 				form={form}
@@ -78,7 +78,7 @@ function CopyModal(props) {
 					control.send(
 						new libData.InstanceCopySaveRequest(props.instanceId, props.save.name, values.newName)
 					).then(() => {
-						setVisible(false);
+						setOpen(false);
 						form.resetFields();
 					}).catch(notifyErrorHandler("Error copying save"));
 				}}
@@ -98,18 +98,18 @@ function CopyModal(props) {
 function TransferModal(props) {
 	let account = useAccount();
 	let control = useContext(ControlContext);
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 	let [instanceList] = useInstanceList();
 
 	return <>
-		<Button disabled={props.disabled} onClick={() => setVisible(true)}>Transfer</Button>
+		<Button disabled={props.disabled} onClick={() => setOpen(true)}>Transfer</Button>
 		<Modal
 			title="Transfer save"
 			okText="Transfer"
-			visible={visible}
+			open={open}
 			onOk={() => form.submit()}
-			onCancel={() => setVisible(false)}
+			onCancel={() => setOpen(false)}
 			destroyOnClose
 		>
 			<Form
@@ -118,7 +118,7 @@ function TransferModal(props) {
 				wrapperCol={{ span: 18 }}
 				initialValues={{ transferredName: props.save.name, copy: false }}
 				onFinish={values => {
-					setVisible(false);
+					setOpen(false);
 					let hide = message.loading("Transferring save...", 0);
 					control.send(new libData.InstanceTransferSaveRequest(
 						props.instanceId,

packages/web_ui/src/components/SiteLayout.jsx

@@ -26,20 +26,20 @@ export default function SiteLayout(props) {
 		return null;
 	}
 
-	let accountMenu = <Menu
-		onClick={({ key }) => {
+	let accountMenuProps = {
+		onClick: ({ key }) => {
 			if (key === "user") {
 				history.push(`/users/${account.name}/view`);
 			} else if (key === "logOut") {
 				account.logOut();
 			}
-		}}
-		items={[
+		},
+		items: [
 			{ label: account.name, key: "user" },
 			{ type: "divider" },
 			{ label: "Log out", danger: true, key: "logOut" },
-		]}
-	/>;
+		],
+	};
 
 	let combinedPages = [...pages];
 	for (let plugin of plugins.values()) {
@@ -88,7 +88,7 @@ export default function SiteLayout(props) {
 				className="account-dropdown-header"
 				placement="bottomRight"
 				trigger="click"
-				overlay={accountMenu}
+				menu={accountMenuProps}
 			>
 				<UserOutlined/>
 			</Dropdown>

packages/web_ui/src/components/UsersPage.jsx

@@ -18,7 +18,7 @@ const strcmp = new Intl.Collator(undefined, { numerice: "true", sensitivity: "ba
 function CreateUserButton() {
 	let control = useContext(ControlContext);
 	let history = useHistory();
-	let [visible, setVisible] = useState(false);
+	let [open, setOpen] = useState(false);
 	let [form] = Form.useForm();
 
 	async function createUser() {
@@ -29,21 +29,21 @@ function CreateUserButton() {
 		}
 
 		await control.send(new libData.UserCreateRequest(values.userName));
-		setVisible(false);
+		setOpen(false);
 		history.push(`/users/${values.userName}/view`);
 	}
 
 	return <>
 		<Button
 			type="primary"
-			onClick={() => { setVisible(true); }}
+			onClick={() => { setOpen(true); }}
 		>Create</Button>
 		<Modal
 			title="Create User"
 			okText="Create"
-			visible={visible}
+			open={open}
 			onOk={() => { createUser().catch(notifyErrorHandler("Error creating user")); }}
-			onCancel={() => { setVisible(false); }}
+			onCancel={() => { setOpen(false); }}
 			destroyOnClose
 		>
 			<Form form={form}>