From a1c9bc5f9bebbd69ce38e4f0096fdb9204c56d3d Mon Sep 17 00:00:00 2001 From: Hornwitser Date: Thu, 27 Jul 2023 13:42:35 +0200 Subject: [PATCH] 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. --- .../src/components/AssignInstanceModal.jsx | 16 ++++------ .../web_ui/src/components/CreateSaveModal.jsx | 10 +++---- packages/web_ui/src/components/HostsPage.jsx | 12 ++++---- .../src/components/InstanceViewPage.jsx | 12 ++++---- .../web_ui/src/components/InstancesPage.jsx | 10 +++---- .../src/components/LoadScenarioModal.jsx | 10 +++---- .../web_ui/src/components/ModPackViewPage.jsx | 12 ++++---- packages/web_ui/src/components/ModsPage.jsx | 20 ++++++------- packages/web_ui/src/components/RolesPage.jsx | 10 +++---- packages/web_ui/src/components/SavesList.jsx | 30 +++++++++---------- packages/web_ui/src/components/SiteLayout.jsx | 14 ++++----- packages/web_ui/src/components/UsersPage.jsx | 10 +++---- 12 files changed, 81 insertions(+), 85 deletions(-) diff --git a/packages/web_ui/src/components/AssignInstanceModal.jsx b/packages/web_ui/src/components/AssignInstanceModal.jsx index f64edfbc..05049f41 100644 --- a/packages/web_ui/src/components/AssignInstanceModal.jsx +++ b/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 <> - { 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} diff --git a/packages/web_ui/src/components/HostsPage.jsx b/packages/web_ui/src/components/HostsPage.jsx index afb8c2dd..e58d582a 100644 --- a/packages/web_ui/src/components/HostsPage.jsx +++ b/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 <> { - setVisible(false); + setOpen(false); setToken(null); form.resetFields(); }} diff --git a/packages/web_ui/src/components/InstanceViewPage.jsx b/packages/web_ui/src/components/InstanceViewPage.jsx index 74a74335..1c5330df 100644 --- a/packages/web_ui/src/components/InstanceViewPage.jsx +++ b/packages/web_ui/src/components/InstanceViewPage.jsx @@ -126,9 +126,9 @@ export default function InstanceViewPage(props) { label: "Delete", }); } - let instanceButtonsMenu = { + let instanceButtonsMenuProps = { + items: instanceButtonMenuItems, + onClick: ({ key }) => { if (key === "export") { setExportingData(true); control.sendTo( @@ -167,8 +167,8 @@ export default function InstanceViewPage(props) { }, }); } - }} - />; + }, + }; let instanceButtons = { 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", - ) && + ) && } ; diff --git a/packages/web_ui/src/components/InstancesPage.jsx b/packages/web_ui/src/components/InstancesPage.jsx index b943c04e..1a33e9d7 100644 --- a/packages/web_ui/src/components/InstancesPage.jsx +++ b/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) { { createInstance().catch(notifyErrorHandler("Error creating instance")); }} - onCancel={() => { setVisible(false); }} + onCancel={() => { setOpen(false); }} destroyOnClose >
diff --git a/packages/web_ui/src/components/LoadScenarioModal.jsx b/packages/web_ui/src/components/LoadScenarioModal.jsx index cc290281..e4fba49d 100644 --- a/packages/web_ui/src/components/LoadScenarioModal.jsx +++ b/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} diff --git a/packages/web_ui/src/components/ModPackViewPage.jsx b/packages/web_ui/src/components/ModPackViewPage.jsx index 3a8a4b26..29a56351 100644 --- a/packages/web_ui/src/components/ModPackViewPage.jsx +++ b/packages/web_ui/src/components/ModPackViewPage.jsx @@ -485,7 +485,7 @@ function CopyButton(props) { }, []); let denied = clipboard.readPermissionState === "denied"; - return + return + - + { 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 <> - + { setVisible(false); }} + onCancel={() => { setOpen(false); }} onOk={() => { (async () => { let values; diff --git a/packages/web_ui/src/components/RolesPage.jsx b/packages/web_ui/src/components/RolesPage.jsx index 62eca08e..e78658bc 100644 --- a/packages/web_ui/src/components/RolesPage.jsx +++ b/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 <> { createRole().catch(notifyErrorHandler("Error creating role")); }} - onCancel={() => { setVisible(false); }} + onCancel={() => { setOpen(false); }} destroyOnClose > diff --git a/packages/web_ui/src/components/SavesList.jsx b/packages/web_ui/src/components/SavesList.jsx index 04b908d1..50a72ed0 100644 --- a/packages/web_ui/src/components/SavesList.jsx +++ b/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 <> - + form.submit()} - onCancel={() => setVisible(false)} + onCancel={() => setOpen(false)} > { - 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 <> - + form.submit()} - onCancel={() => setVisible(false)} + onCancel={() => setOpen(false)} > { - 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 <> - + form.submit()} - onCancel={() => setVisible(false)} + onCancel={() => setOpen(false)} destroyOnClose > { - setVisible(false); + setOpen(false); let hide = message.loading("Transferring save...", 0); control.send(new libData.InstanceTransferSaveRequest( props.instanceId, diff --git a/packages/web_ui/src/components/SiteLayout.jsx b/packages/web_ui/src/components/SiteLayout.jsx index 2d83b3d5..70cc2a35 100644 --- a/packages/web_ui/src/components/SiteLayout.jsx +++ b/packages/web_ui/src/components/SiteLayout.jsx @@ -26,20 +26,20 @@ export default function SiteLayout(props) { return null; } - let accountMenu = { + 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} > diff --git a/packages/web_ui/src/components/UsersPage.jsx b/packages/web_ui/src/components/UsersPage.jsx index 1d0d82ad..6475e2c5 100644 --- a/packages/web_ui/src/components/UsersPage.jsx +++ b/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 <> { createUser().catch(notifyErrorHandler("Error creating user")); }} - onCancel={() => { setVisible(false); }} + onCancel={() => { setOpen(false); }} destroyOnClose >