Centralize rights management

remote_frontend/src/App.tsx

@@ -12,7 +12,7 @@ import {
   bundleIcon,
 } from "@fluentui/react-icons";
 import React from "react";
-import { ServerApi } from "./api/ServerApi";
+import { Rights, ServerApi } from "./api/ServerApi";
 import { AuthRouteWidget } from "./routes/AuthRouteWidget";
 import { AsyncWidget } from "./widgets/AsyncWidget";
 import { MainMenu } from "./widgets/MainMenu";
@@ -40,45 +40,72 @@ export function App() {
 }
 
 function AppInner(): React.ReactElement {
-  const styles = useStyles();
-  const [tab, setTab] = React.useState<"vm" | "info">("vm");
-
   if (!ServerApi.Config.authenticated && !ServerApi.Config.disable_auth)
     return <AuthRouteWidget />;
 
+  return <AuthenticatedApp />;
+}
+
+function AuthenticatedApp(): React.ReactElement {
+  const styles = useStyles();
+  const [tab, setTab] = React.useState<"vm" | "info">("vm");
+
+  const [rights, setRights] = React.useState<Rights | undefined>();
+
+  const load = async () => {
+    setRights(await ServerApi.GetRights());
+  };
+
   return (
-    <div
-      style={{
-        width: "95%",
-        maxWidth: "1000px",
-        margin: "50px auto",
+    <AsyncWidget
+      loadKey={1}
+      load={load}
+      errMsg="Failed to retrieve application rights!"
+      build={() => {
+        return (
+          <div
+            style={{
+              width: "95%",
+              maxWidth: "1000px",
+              margin: "50px auto",
+            }}
+          >
+            <span className={styles.title}>VirtWebRemote</span>
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                marginTop: "30px",
+              }}
+            >
+              <TabList
+                selectedValue={tab}
+                onTabSelect={(_, d) => setTab(d.value as any)}
+              >
+                <Tab
+                  value="vm"
+                  icon={<DesktopIcon />}
+                  disabled={rights!.vms.length === 0}
+                >
+                  Virtual machines
+                </Tab>
+                <Tab
+                  value="info"
+                  icon={<InfoIcon />}
+                  disabled={!rights!.sys_info}
+                >
+                  System info
+                </Tab>
+              </TabList>
+              <div>
+                <MainMenu />
+              </div>
+            </div>
+            {tab === "vm" && <VirtualMachinesWidget rights={rights!} />}
+            {tab === "info" && <SystemInfoWidget />}
+          </div>
+        );
       }}
-    >
-      <span className={styles.title}>VirtWebRemote</span>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          marginTop: "30px",
-        }}
-      >
-        <TabList
-          selectedValue={tab}
-          onTabSelect={(_, d) => setTab(d.value as any)}
-        >
-          <Tab value="vm" icon={<DesktopIcon />}>
-            Virtual machines
-          </Tab>
-          <Tab value="info" icon={<InfoIcon />}>
-            System info
-          </Tab>
-        </TabList>
-        <div>
-          <MainMenu />
-        </div>
-      </div>
-      {tab === "vm" && <VirtualMachinesWidget />}
-      {tab === "info" && <SystemInfoWidget />}
-    </div>
+    />
   );
 }