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

@@ -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>}

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}>