Add groups support (#146)

Reviewed-on: #146

remote_frontend/src/App.tsx

@@ -5,6 +5,8 @@ import {
   typographyStyles,
 } from "@fluentui/react-components";
 import {
+  AppsListDetailFilled,
+  AppsListDetailRegular,
   DesktopFilled,
   DesktopRegular,
   InfoFilled,
@@ -18,6 +20,7 @@ import { AsyncWidget } from "./widgets/AsyncWidget";
 import { MainMenu } from "./widgets/MainMenu";
 import { SystemInfoWidget } from "./widgets/SystemInfoWidget";
 import { VirtualMachinesWidget } from "./widgets/VirtualMachinesWidget";
+import { GroupsWidget } from "./widgets/GroupsWidget";
 
 const useStyles = makeStyles({
   title: typographyStyles.title2,
@@ -27,6 +30,8 @@ const InfoIcon = bundleIcon(InfoFilled, InfoRegular);
 
 const DesktopIcon = bundleIcon(DesktopFilled, DesktopRegular);
 
+const AppListIcon = bundleIcon(AppsListDetailFilled, AppsListDetailRegular);
+
 export function App() {
   return (
     <AsyncWidget
@@ -48,12 +53,17 @@ function AppInner(): React.ReactElement {
 
 function AuthenticatedApp(): React.ReactElement {
   const styles = useStyles();
-  const [tab, setTab] = React.useState<"vm" | "info">("vm");
+  const [tab, setTab] = React.useState<"group" | "vm" | "info">("group");
 
   const [rights, setRights] = React.useState<Rights | undefined>();
 
   const load = async () => {
-    setRights(await ServerApi.GetRights());
+    const rights = await ServerApi.GetRights();
+    setRights(rights);
+
+    if (rights!.groups.length > 0) setTab("group");
+    else if (rights!.vms.length > 0) setTab("vm");
+    else setTab("info");
   };
 
   return (
@@ -82,25 +92,27 @@ function AuthenticatedApp(): React.ReactElement {
                 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>
+                {rights!.groups.length > 0 && (
+                  <Tab value="group" icon={<AppListIcon />}>
+                    Groups
+                  </Tab>
+                )}
+                {rights!.vms.length > 0 && (
+                  <Tab value="vm" icon={<DesktopIcon />}>
+                    Virtual machines
+                  </Tab>
+                )}
+                {rights!.sys_info && (
+                  <Tab value="info" icon={<InfoIcon />}>
+                    System info
+                  </Tab>
+                )}
               </TabList>
               <div>
                 <MainMenu />
               </div>
             </div>
+            {tab === "group" && <GroupsWidget rights={rights!} />}
             {tab === "vm" && <VirtualMachinesWidget rights={rights!} />}
             {tab === "info" && <SystemInfoWidget />}
           </div>