From 4221b96431cfaeb22f07988de373e33dcc1d495f Mon Sep 17 00:00:00 2001
From: Daniel <danielv@danielv.no>
Date: Sun, 10 Aug 2025 23:17:14 +0200
Subject: [PATCH] Fix rendered more hooks error when refreshing hosts page
 (#789)

* Fix rendered more hooks error when refreshing hosts page

* Fix conditional render on controllerPage

Doesn't cause any issues that I know off right now, but changes to antd internal code could change that so it feels better to be sure.
---
 packages/web_ui/src/components/ControllerPage.tsx | 3 ++-
 packages/web_ui/src/components/HostViewPage.tsx   | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/web_ui/src/components/ControllerPage.tsx b/packages/web_ui/src/components/ControllerPage.tsx
index 9e241bb5..5284a5e6 100644
--- a/packages/web_ui/src/components/ControllerPage.tsx
+++ b/packages/web_ui/src/components/ControllerPage.tsx
@@ -81,6 +81,7 @@ export default function ControllerPage() {
 	const [systems] = useSystems();
 	const system = systems.get("controller");
 	const [maxLevel, setMaxLevel] = useState<keyof typeof lib.levels>("info");
+	const canShowNpm = hasNpmButtonPermission(true);
 
 	return <PageLayout nav={[{ name: "Controller" }]}>
 		<PageHeader
@@ -88,7 +89,7 @@ export default function ControllerPage() {
 			extra={<Space>
 				<ControllerControlButton canRestart={system?.canRestart} restartRequired={system?.restartRequired}/>
 				{
-					hasNpmButtonPermission(true)
+					canShowNpm
 					&& <NpmButton target="controller" canRestart={system?.canRestart}/>
 				}
 			</Space>}
diff --git a/packages/web_ui/src/components/HostViewPage.tsx b/packages/web_ui/src/components/HostViewPage.tsx
index 93374cfa..d05115fb 100644
--- a/packages/web_ui/src/components/HostViewPage.tsx
+++ b/packages/web_ui/src/components/HostViewPage.tsx
@@ -90,6 +90,7 @@ export default function HostViewPage() {
 	const system = systems.get(hostId);
 	const [host, synced] = useHost(hostId);
 	const [maxLevel, setMaxLevel] = useState<keyof typeof lib.levels>("info");
+	const canShowNpm = hasNpmButtonPermission(false);
 	const hostInstances = new Map([...instances].filter(([_id, instance]) => instance.assignedHost === hostId));
 
 	let nav = [{ name: "Hosts", path: "/hosts" }, { name: host?.name ?? String(hostId) }];
@@ -124,10 +125,9 @@ export default function HostViewPage() {
 				</Button>
 			</Popconfirm>
 		}
-		{
-			hasNpmButtonPermission(false)
-			&& <NpmButton target={{ hostId }} canRestart={system?.canRestart} disabled={!host["connected"]}/>
-		}
+		{canShowNpm && (
+			<NpmButton target={{ hostId }} canRestart={system?.canRestart} disabled={!host["connected"]}/>
+		)}
 	</Space>;
 
 	return <PageLayout nav={nav}>