From 219fc184ee1fc6ed45cc536863f6ca6532a520ee Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Wed, 3 Jan 2024 00:08:57 +0100
Subject: [PATCH] Fix hidden tabs issue

---
 virtweb_frontend/src/widgets/TabsWidget.tsx   | 35 ++++++++++++
 .../src/widgets/net/NetworkDetails.tsx        | 57 ++++++++++---------
 2 files changed, 65 insertions(+), 27 deletions(-)
 create mode 100644 virtweb_frontend/src/widgets/TabsWidget.tsx

diff --git a/virtweb_frontend/src/widgets/TabsWidget.tsx b/virtweb_frontend/src/widgets/TabsWidget.tsx
new file mode 100644
index 0000000..6ef0563
--- /dev/null
+++ b/virtweb_frontend/src/widgets/TabsWidget.tsx
@@ -0,0 +1,35 @@
+import { Box, Tab, Tabs } from "@mui/material";
+
+export interface TabWidgetOption<E> {
+  label: string;
+  value: E;
+  visible: boolean;
+  color?: string;
+}
+
+export function TabsWidget<E>(p: {
+  currTab: E;
+  options: TabWidgetOption<E>[];
+  onValueChange: (v: E) => void;
+}): React.ReactElement {
+  const activeOptions = p.options.filter((v) => v.visible);
+
+  const currTabIndex = activeOptions.findIndex((v) => v.value === p.currTab);
+
+  const updateActiveTab = (index: number) => {
+    p.onValueChange(activeOptions[index].value);
+  };
+
+  return (
+    <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <Tabs
+        value={currTabIndex}
+        onChange={(_ev, newVal) => updateActiveTab(newVal)}
+      >
+        {activeOptions.map((o, index) => (
+          <Tab key={index} label={o.label} style={{ color: o.color }} />
+        ))}
+      </Tabs>
+    </Box>
+  );
+}
diff --git a/virtweb_frontend/src/widgets/net/NetworkDetails.tsx b/virtweb_frontend/src/widgets/net/NetworkDetails.tsx
index 4d002ae..b7ede54 100644
--- a/virtweb_frontend/src/widgets/net/NetworkDetails.tsx
+++ b/virtweb_frontend/src/widgets/net/NetworkDetails.tsx
@@ -14,6 +14,7 @@ import { SelectInput } from "../forms/SelectInput";
 import { TextInput } from "../forms/TextInput";
 import { DHCPHostReservations } from "./DHCPHostReservations";
 import { useNavigate } from "react-router-dom";
+import { TabsWidget } from "../TabsWidget";
 
 interface DetailsProps {
   net: NetworkInfo;
@@ -38,7 +39,7 @@ export function NetworkDetails(p: DetailsProps): React.ReactElement {
   );
 }
 
-enum VMTab {
+enum NetTab {
   General = 0,
   IPv4,
   IPv6,
@@ -48,36 +49,38 @@ enum VMTab {
 type DetailsInnerProps = DetailsProps & { cardsList: string[] };
 
 function NetworkDetailsInner(p: DetailsInnerProps): React.ReactElement {
-  const [currTab, setCurrTab] = React.useState(VMTab.General);
+  const [currTab, setCurrTab] = React.useState(NetTab.General);
 
   return (
     <>
-      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-        <Tabs value={currTab} onChange={(_ev, newVal) => setCurrTab(newVal)}>
-          <Tab label="General" tabIndex={VMTab.General} />
+      <TabsWidget
+        currTab={currTab}
+        onValueChange={setCurrTab}
+        options={[
+          { label: "General", value: NetTab.General, visible: true },
+          {
+            label: "IPv4",
+            value: NetTab.IPv4,
+            visible: p.editable || !!p.net.ip_v4,
+          },
+          {
+            label: "IPv6",
+            value: NetTab.IPv6,
+            visible: p.editable || !!p.net.ip_v6,
+          },
+          {
+            label: "Danger zone",
+            value: NetTab.Danger,
+            color: "red",
+            visible: !p.editable,
+          },
+        ]}
+      />
 
-          {(p.editable || p.net.ip_v4) && (
-            <Tab label="IPv4" tabIndex={VMTab.IPv4} />
-          )}
-
-          {(p.editable || p.net.ip_v6) && (
-            <Tab label="IPv6" tabIndex={VMTab.IPv6} />
-          )}
-
-          {!p.editable && (
-            <Tab
-              label="Danger zone"
-              style={{ color: "red" }}
-              tabIndex={VMTab.Danger}
-            />
-          )}
-        </Tabs>
-      </Box>
-
-      {currTab === VMTab.General && <NetworkDetailsTabGeneral {...p} />}
-      {currTab === VMTab.IPv4 && <NetworkDetailsTabIPv4 {...p} />}
-      {currTab === VMTab.IPv6 && <NetworkDetailsTabIPv6 {...p} />}
-      {currTab === VMTab.Danger && <NetworkDetailsTabDanger {...p} />}
+      {currTab === NetTab.General && <NetworkDetailsTabGeneral {...p} />}
+      {currTab === NetTab.IPv4 && <NetworkDetailsTabIPv4 {...p} />}
+      {currTab === NetTab.IPv6 && <NetworkDetailsTabIPv6 {...p} />}
+      {currTab === NetTab.Danger && <NetworkDetailsTabDanger {...p} />}
     </>
   );
 }