Create base network filter details page

virtweb_frontend/src/widgets/nwfilter/NWFilterDetails.tsx

@@ -1,5 +1,17 @@
-import { ReactElement } from "react";
-import { NWFilter } from "../../api/NWFilterApi";
+import { Button } from "@mui/material";
+import React, { ReactElement } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  NWFilter,
+  NWFilterApi,
+  NWFilterIsBuiltin,
+} from "../../api/NWFilterApi";
+import { useAlert } from "../../hooks/providers/AlertDialogProvider";
+import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
+import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
+import { AsyncWidget } from "../AsyncWidget";
+import { TabsWidget } from "../TabsWidget";
+import { XMLAsyncWidget } from "../XMLWidget";
 
 interface DetailsProps {
   nwfilter: NWFilter;
@@ -8,5 +20,127 @@ interface DetailsProps {
 }
 
 export function NWFilterDetails(p: DetailsProps): ReactElement {
-  return <>todo</>;
+  const [nwFiltersList, setNwFiltersList] = React.useState<NWFilter[] | any>();
+
+  const load = async () => {
+    setNwFiltersList(await NWFilterApi.GetList());
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={p.nwfilter.uuid}
+      load={load}
+      errMsg="Failed to load the list of network filters!"
+      build={() => (
+        <NetworkFilterDetailsInner nwFiltersList={nwFiltersList} {...p} />
+      )}
+    />
+  );
+}
+
+type InnerDetailsProps = DetailsProps & { nwFiltersList: NWFilter[] };
+
+enum NetFilterTab {
+  General = 0,
+  Rules,
+  XML,
+  Danger,
+}
+
+export function NetworkFilterDetailsInner(
+  p: InnerDetailsProps
+): React.ReactElement {
+  const [currTab, setCurrTab] = React.useState(NetFilterTab.General);
+
+  return (
+    <>
+      <TabsWidget
+        currTab={currTab}
+        onTabChange={setCurrTab}
+        options={[
+          { label: "General", value: NetFilterTab.General, visible: true },
+          {
+            label: "Rules",
+            value: NetFilterTab.Rules,
+            visible: p.editable || p.nwfilter.rules.length > 0,
+          },
+
+          {
+            label: "XML",
+            value: NetFilterTab.XML,
+            visible: !p.editable,
+          },
+          {
+            label: "Danger zone",
+            value: NetFilterTab.Danger,
+            color: "red",
+            visible: !p.editable && !NWFilterIsBuiltin(p.nwfilter),
+          },
+        ]}
+      />
+
+      {currTab === NetFilterTab.General && (
+        <NetworkFilterDetailsTabGeneral {...p} />
+      )}
+      {currTab === NetFilterTab.Rules && (
+        <NetworkFilterDetailsTabRules {...p} />
+      )}
+      {currTab === NetFilterTab.XML && <NetworkFilterDetailsTabXML {...p} />}
+      {currTab === NetFilterTab.Danger && (
+        <NetworkFilterDetailsTabDanger {...p} />
+      )}
+    </>
+  );
+}
+
+function NetworkFilterDetailsTabGeneral(
+  p: InnerDetailsProps
+): React.ReactElement {
+  return <></>;
+}
+
+function NetworkFilterDetailsTabXML(p: InnerDetailsProps): React.ReactElement {
+  return (
+    <XMLAsyncWidget
+      errMsg="Failed to load network filter XML definition!"
+      identifier={p.nwfilter.uuid!}
+      load={() => NWFilterApi.GetSingleXML(p.nwfilter.uuid!)}
+    />
+  );
+}
+
+function NetworkFilterDetailsTabDanger(
+  p: InnerDetailsProps
+): React.ReactElement {
+  const confirm = useConfirm();
+  const snackbar = useSnackbar();
+  const alert = useAlert();
+  const navigate = useNavigate();
+
+  const requestDelete = async () => {
+    try {
+      if (
+        !(await confirm(
+          "Do you really want to delete this network filter?",
+          `Delete network filter ${p.nwfilter.name}`,
+          "Delete"
+        ))
+      )
+        return;
+
+      await NWFilterApi.Delete(p.nwfilter);
+
+      navigate("/nwfilter");
+      snackbar("The network filter was successfully deleted!");
+    } catch (e) {
+      console.error(e);
+      alert(`Failed to delete the network filter!\n${e}`);
+    }
+  };
+
+  return (
+    <Button color="error" onClick={requestDelete}>
+      Delete this network filter
+    </Button>
+  );
 }