Fix hidden tabs issue

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} />}
     </>
   );
 }