From e561942cf7f6147d9217e197c671277433d3d785 Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Wed, 3 Jan 2024 00:12:16 +0100
Subject: [PATCH] Use new TabWidget for VM route

---
 virtweb_frontend/src/widgets/TabsWidget.tsx   |  4 +--
 .../src/widgets/net/NetworkDetails.tsx        |  2 +-
 .../src/widgets/vms/VMDetails.tsx             | 30 ++++++++++---------
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/virtweb_frontend/src/widgets/TabsWidget.tsx b/virtweb_frontend/src/widgets/TabsWidget.tsx
index 6ef0563..5411eaa 100644
--- a/virtweb_frontend/src/widgets/TabsWidget.tsx
+++ b/virtweb_frontend/src/widgets/TabsWidget.tsx
@@ -10,14 +10,14 @@ export interface TabWidgetOption<E> {
 export function TabsWidget<E>(p: {
   currTab: E;
   options: TabWidgetOption<E>[];
-  onValueChange: (v: E) => void;
+  onTabChange: (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);
+    p.onTabChange(activeOptions[index].value);
   };
 
   return (
diff --git a/virtweb_frontend/src/widgets/net/NetworkDetails.tsx b/virtweb_frontend/src/widgets/net/NetworkDetails.tsx
index b7ede54..2476164 100644
--- a/virtweb_frontend/src/widgets/net/NetworkDetails.tsx
+++ b/virtweb_frontend/src/widgets/net/NetworkDetails.tsx
@@ -55,7 +55,7 @@ function NetworkDetailsInner(p: DetailsInnerProps): React.ReactElement {
     <>
       <TabsWidget
         currTab={currTab}
-        onValueChange={setCurrTab}
+        onTabChange={setCurrTab}
         options={[
           { label: "General", value: NetTab.General, visible: true },
           {
diff --git a/virtweb_frontend/src/widgets/vms/VMDetails.tsx b/virtweb_frontend/src/widgets/vms/VMDetails.tsx
index 7f05c72..2851786 100644
--- a/virtweb_frontend/src/widgets/vms/VMDetails.tsx
+++ b/virtweb_frontend/src/widgets/vms/VMDetails.tsx
@@ -20,6 +20,7 @@ import { useNavigate } from "react-router-dom";
 import { useAlert } from "../../hooks/providers/AlertDialogProvider";
 import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
+import { TabsWidget } from "../TabsWidget";
 
 interface DetailsProps {
   vm: VMInfo;
@@ -82,20 +83,21 @@ function VMDetailsInner(p: DetailsInnerProps): React.ReactElement {
 
   return (
     <>
-      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-        <Tabs value={currTab} onChange={(_ev, newVal) => setCurrTab(newVal)}>
-          <Tab label="General" tabIndex={VMTab.General} />
-          <Tab label="Storage" tabIndex={VMTab.Storage} />
-          <Tab label="Network" tabIndex={VMTab.Network} />
-          {!p.editable && (
-            <Tab
-              label="Danger zone"
-              style={{ color: "red" }}
-              tabIndex={VMTab.Danger}
-            />
-          )}
-        </Tabs>
-      </Box>
+      <TabsWidget
+        currTab={currTab}
+        onTabChange={setCurrTab}
+        options={[
+          { label: "General", value: VMTab.General, visible: true },
+          { label: "Storage", value: VMTab.Storage, visible: true },
+          { label: "Network", value: VMTab.Network, visible: true },
+          {
+            label: "Danger zone",
+            value: VMTab.Danger,
+            visible: !p.editable,
+            color: "red",
+          },
+        ]}
+      />
 
       {currTab === VMTab.General && <VMDetailsTabGeneral {...p} />}
       {currTab === VMTab.Storage && <VMDetailsTabStorage {...p} />}