From 449344f8a8dbb525455d850c67e8b712674759b2 Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Mon, 13 Jan 2025 14:56:05 +0100
Subject: [PATCH] Add resource group modal and adjust tables

---
 src/modules/networks/NetworkProvider.tsx      |  36 ++++++
 .../networks/resources/ResourceActionCell.tsx |   2 +-
 .../networks/resources/ResourceGroupCell.tsx  |   4 +-
 .../networks/resources/ResourceGroupModal.tsx | 121 ++++++++++++++++++
 .../networks/resources/ResourcesTable.tsx     | 100 +++++++--------
 .../routing-peers/NetworkRoutingPeerName.tsx  |  12 +-
 .../NetworkRoutingPeersTable.tsx              |  31 ++++-
 .../routing-peers/RoutingPeersActionCell.tsx  |   2 +-
 8 files changed, 240 insertions(+), 68 deletions(-)
 create mode 100644 src/modules/networks/resources/ResourceGroupModal.tsx

diff --git a/src/modules/networks/NetworkProvider.tsx b/src/modules/networks/NetworkProvider.tsx
index 3c529808..171f5a33 100644
--- a/src/modules/networks/NetworkProvider.tsx
+++ b/src/modules/networks/NetworkProvider.tsx
@@ -10,6 +10,7 @@ import { Network, NetworkResource, NetworkRouter } from "@/interfaces/Network";
 import { AccessControlModalContent } from "@/modules/access-control/AccessControlModal";
 import NetworkModal from "@/modules/networks/NetworkModal";
 import NetworkResourceModal from "@/modules/networks/resources/NetworkResourceModal";
+import { ResourceGroupModal } from "@/modules/networks/resources/ResourceGroupModal";
 import NetworkRoutingPeerModal from "@/modules/networks/routing-peers/NetworkRoutingPeerModal";
 
 type Props = {
@@ -23,6 +24,10 @@ const NetworksContext = React.createContext(
     openEditNetworkModal: (network: Network) => void;
     openCreateNetworkModal: () => void;
     openResourceModal: (network: Network, resource?: NetworkResource) => void;
+    openResourceGroupModal: (
+      network: Network,
+      resource?: NetworkResource,
+    ) => void;
     openPolicyModal: (network?: Network, resource?: NetworkResource) => void;
     deleteNetwork: (network: Network) => void;
     deleteResource: (network: Network, resource: NetworkResource) => void;
@@ -49,6 +54,7 @@ export const NetworkProvider = ({ children, network }: Props) => {
   const [routingPeerModal, setRoutingPeerModal] = useState(false);
   const [networkModal, setNetworkModal] = useState(false);
   const [resourceModal, setResourceModal] = useState(false);
+  const [resourceGroupModal, setResourceGroupModal] = useState(false);
   const [policyModal, setPolicyModal] = useState(false);
 
   const openAddRoutingPeerModal = (
@@ -76,6 +82,15 @@ export const NetworkProvider = ({ children, network }: Props) => {
     setResourceModal(true);
   };
 
+  const openResourceGroupModal = (
+    network: Network,
+    resource?: NetworkResource,
+  ) => {
+    setCurrentNetwork(network);
+    resource && setCurrentResource(resource);
+    setResourceGroupModal(true);
+  };
+
   const openPolicyModal = (network?: Network, resource?: NetworkResource) => {
     setPolicyDefaultSettings({
       destinationGroups: resource?.groups,
@@ -217,6 +232,7 @@ export const NetworkProvider = ({ children, network }: Props) => {
         openEditNetworkModal,
         openCreateNetworkModal,
         openResourceModal,
+        openResourceGroupModal,
         openPolicyModal,
         deleteNetwork,
         deleteResource,
@@ -294,6 +310,26 @@ export const NetworkProvider = ({ children, network }: Props) => {
               setRoutingPeerModal(state);
             }}
           />
+
+          <ResourceGroupModal
+            network={currentNetwork}
+            resource={currentResource}
+            open={resourceGroupModal}
+            onOpenChange={(state) => {
+              setCurrentResource(undefined);
+              setResourceGroupModal(state);
+            }}
+            onUpdated={() => {
+              setResourceGroupModal(false);
+              setCurrentResource(undefined);
+              mutate("/groups");
+              if (network) {
+                mutate(`/networks/${network.id}/resources`);
+                mutate(`/networks/${network.id}`);
+              }
+            }}
+          />
+
           <NetworkResourceModal
             network={currentNetwork}
             resource={currentResource}
diff --git a/src/modules/networks/resources/ResourceActionCell.tsx b/src/modules/networks/resources/ResourceActionCell.tsx
index 86bad3ce..aa1f93cf 100644
--- a/src/modules/networks/resources/ResourceActionCell.tsx
+++ b/src/modules/networks/resources/ResourceActionCell.tsx
@@ -17,7 +17,7 @@ export const ResourceActionCell = ({ resource }: Props) => {
   const { deleteResource, network, openResourceModal } = useNetworksContext();
 
   return (
-    <div className={"flex justify-end pr-4"}>
+    <div className={"flex justify-end"}>
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger
           asChild={true}
diff --git a/src/modules/networks/resources/ResourceGroupCell.tsx b/src/modules/networks/resources/ResourceGroupCell.tsx
index efcdf2b5..752cbc24 100644
--- a/src/modules/networks/resources/ResourceGroupCell.tsx
+++ b/src/modules/networks/resources/ResourceGroupCell.tsx
@@ -8,14 +8,14 @@ type Props = {
   resource?: NetworkResource;
 };
 export const ResourceGroupCell = ({ resource }: Props) => {
-  const { network, openResourceModal } = useNetworksContext();
+  const { network, openResourceGroupModal } = useNetworksContext();
 
   return (
     <button
       className={"flex cursor-pointer"}
       onClick={() => {
         if (!network) return;
-        openResourceModal(network, resource);
+        openResourceGroupModal(network, resource);
       }}
     >
       <MultipleGroups groups={resource?.groups as Group[]} />
diff --git a/src/modules/networks/resources/ResourceGroupModal.tsx b/src/modules/networks/resources/ResourceGroupModal.tsx
new file mode 100644
index 00000000..2c44b3b8
--- /dev/null
+++ b/src/modules/networks/resources/ResourceGroupModal.tsx
@@ -0,0 +1,121 @@
+import Button from "@components/Button";
+import {
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalFooter,
+} from "@components/modal/Modal";
+import ModalHeader from "@components/modal/ModalHeader";
+import { notify } from "@components/Notification";
+import { PeerGroupSelector } from "@components/PeerGroupSelector";
+import Separator from "@components/Separator";
+import { useApiCall } from "@utils/api";
+import { FolderGit2 } from "lucide-react";
+import * as React from "react";
+import { useMemo } from "react";
+import { Network, NetworkResource } from "@/interfaces/Network";
+import useGroupHelper from "@/modules/groups/useGroupHelper";
+
+type ResourceGroupModalProps = {
+  resource?: NetworkResource;
+  network?: Network;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onUpdated?: (r: NetworkResource) => void;
+};
+export const ResourceGroupModal = ({
+  resource,
+  network,
+  open,
+  onOpenChange,
+  onUpdated,
+}: ResourceGroupModalProps) => {
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      {network && resource && (
+        <ResourceGroupModalContent
+          network={network}
+          resource={resource}
+          onUpdated={onUpdated}
+          key={open ? "1" : "0"}
+        />
+      )}
+    </Modal>
+  );
+};
+
+type ModalProps = {
+  onUpdated?: (r: NetworkResource) => void;
+  network?: Network;
+  resource?: NetworkResource;
+};
+
+const ResourceGroupModalContent = ({
+  resource,
+  network,
+  onUpdated,
+}: ModalProps) => {
+  const update = useApiCall<NetworkResource>(
+    `/networks/${network?.id}/resources/${resource?.id}`,
+  ).put;
+
+  const [groups, setGroups, { save: saveGroups }] = useGroupHelper({
+    initial: resource?.groups || [],
+  });
+
+  const updateResource = async () => {
+    const savedGroups = await saveGroups();
+    notify({
+      title: "Update Resource",
+      description: `'${resource?.name}' groups updated`,
+      loadingMessage: "Updating resource groups...",
+      promise: update({
+        ...resource,
+        groups: savedGroups.map((g) => g.id),
+      }).then((r) => {
+        onUpdated?.(r);
+      }),
+    });
+  };
+
+  const canSave = useMemo(() => {
+    return groups.length > 0;
+  }, [groups]);
+
+  return (
+    <ModalContent maxWidthClass={"max-w-xl"}>
+      <ModalHeader
+        icon={<FolderGit2 size={18} />}
+        title={"Assigned Groups"}
+        description={
+          "Add this resource to groups and use them as destinations when creating policies"
+        }
+        color={"blue"}
+      />
+
+      <Separator />
+
+      <div className={"px-8 py-6 flex flex-col gap-8"}>
+        <div>
+          <PeerGroupSelector onChange={setGroups} values={groups} />
+        </div>
+      </div>
+
+      <ModalFooter className={"items-center"}>
+        <div className={"flex gap-3 w-full justify-end"}>
+          <ModalClose asChild={true}>
+            <Button variant={"secondary"}>Cancel</Button>
+          </ModalClose>
+
+          <Button
+            variant={"primary"}
+            onClick={updateResource}
+            disabled={!canSave}
+          >
+            Save Groups
+          </Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+};
diff --git a/src/modules/networks/resources/ResourcesTable.tsx b/src/modules/networks/resources/ResourcesTable.tsx
index 547a6187..478845ad 100644
--- a/src/modules/networks/resources/ResourcesTable.tsx
+++ b/src/modules/networks/resources/ResourcesTable.tsx
@@ -91,62 +91,56 @@ export default function ResourcesTable({
   resources,
   isLoading,
   headingTarget,
-}: Props) {
+}: Readonly<Props>) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const { openResourceModal, network } = useNetworksContext();
 
   return (
-    <>
-      <DataTable
-        wrapperComponent={Card}
-        wrapperProps={{ className: "mt-6 w-full" }}
-        headingTarget={headingTarget}
-        sorting={sorting}
-        setSorting={setSorting}
-        minimal={true}
-        showSearchAndFilters={true}
-        inset={false}
-        tableClassName={"mt-0"}
-        text={"Resources"}
-        columns={NetworkResourceColumns}
-        keepStateInLocalStorage={false}
-        data={resources}
-        searchPlaceholder={"Search by name, address or group..."}
-        isLoading={isLoading}
-        getStartedCard={
-          <NoResults
-            className={"py-4"}
-            title={"This network has no resources"}
-            description={
-              "Add resources to this network to control what peers can access. Resources can be anything from a single IP, a subnet, or a domain."
-            }
-            icon={<Layers3Icon size={20} />}
-          />
-        }
-        columnVisibility={{}}
-        paginationPaddingClassName={"px-0 pt-8"}
-        rightSide={() => (
-          <>
-            <Button
-              variant={"primary"}
-              className={"ml-auto"}
-              onClick={() => network && openResourceModal(network)}
-            >
-              <IconCirclePlus size={16} />
-              Add Resource
-            </Button>
-          </>
-        )}
-      >
-        {(table) => (
-          <>
-            <DataTableRowsPerPage
-              table={table}
-              disabled={!resources || resources?.length == 0}
-            />
-          </>
-        )}
-      </DataTable>
-    </>
+    <DataTable
+      wrapperComponent={Card}
+      wrapperProps={{ className: "mt-6 pb-2 w-full" }}
+      headingTarget={headingTarget}
+      sorting={sorting}
+      setSorting={setSorting}
+      minimal={true}
+      showSearchAndFilters={true}
+      inset={false}
+      tableClassName={"mt-0"}
+      text={"Resources"}
+      columns={NetworkResourceColumns}
+      keepStateInLocalStorage={false}
+      data={resources}
+      searchPlaceholder={"Search by name, address or group..."}
+      isLoading={isLoading}
+      getStartedCard={
+        <NoResults
+          className={"py-4"}
+          title={"This network has no resources"}
+          description={
+            "Add resources to this network to control what peers can access. Resources can be anything from a single IP, a subnet, or a domain."
+          }
+          icon={<Layers3Icon size={20} />}
+        />
+      }
+      columnVisibility={{}}
+      paginationPaddingClassName={"px-0 pt-8"}
+      rightSide={() => (
+        <Button
+          variant={"primary"}
+          className={"ml-auto"}
+          onClick={() => network && openResourceModal(network)}
+        >
+          <IconCirclePlus size={16} />
+          Add Resource
+        </Button>
+      )}
+    >
+      {(table) => (
+        <DataTableRowsPerPage
+          table={table}
+          disabled={!resources || resources?.length == 0}
+        />
+      )}
+    </DataTable>
   );
 }
diff --git a/src/modules/networks/routing-peers/NetworkRoutingPeerName.tsx b/src/modules/networks/routing-peers/NetworkRoutingPeerName.tsx
index 03511e2c..092f5064 100644
--- a/src/modules/networks/routing-peers/NetworkRoutingPeerName.tsx
+++ b/src/modules/networks/routing-peers/NetworkRoutingPeerName.tsx
@@ -44,13 +44,11 @@ export const NetworkRoutingPeerName = ({ router }: Props) => {
 
   if (routingPeerGroup) {
     return (
-      <>
-        <div className={"flex items-center gap-2 max-w-[295px] min-w-[295px]"}>
-          <GroupBadge group={routingPeerGroup} />
-          <ArrowRightIcon size={14} className={"shrink-0"} />
-          <PeerBadge> {routingPeerGroup.peers_count} Peer(s)</PeerBadge>
-        </div>
-      </>
+      <div className={"flex items-center gap-2 max-w-[295px] min-w-[295px]"}>
+        <GroupBadge group={routingPeerGroup} />
+        <ArrowRightIcon size={14} className={"shrink-0"} />
+        <PeerBadge> {routingPeerGroup.peers_count} Peer(s)</PeerBadge>
+      </div>
     );
   }
 };
diff --git a/src/modules/networks/routing-peers/NetworkRoutingPeersTable.tsx b/src/modules/networks/routing-peers/NetworkRoutingPeersTable.tsx
index 5c138b76..9e801ad9 100644
--- a/src/modules/networks/routing-peers/NetworkRoutingPeersTable.tsx
+++ b/src/modules/networks/routing-peers/NetworkRoutingPeersTable.tsx
@@ -1,12 +1,16 @@
+import Button from "@components/Button";
 import Card from "@components/Card";
 import { DataTable } from "@components/table/DataTable";
 import DataTableHeader from "@components/table/DataTableHeader";
+import { DataTableRowsPerPage } from "@components/table/DataTableRowsPerPage";
 import NoResults from "@components/ui/NoResults";
+import { IconCirclePlus } from "@tabler/icons-react";
 import { ColumnDef, SortingState } from "@tanstack/react-table";
 import * as React from "react";
 import { useState } from "react";
 import PeerIcon from "@/assets/icons/PeerIcon";
 import { NetworkRouter } from "@/interfaces/Network";
+import { useNetworksContext } from "@/modules/networks/NetworkProvider";
 import { NetworkRoutingPeerName } from "@/modules/networks/routing-peers/NetworkRoutingPeerName";
 import { RoutingPeersActionCell } from "@/modules/networks/routing-peers/RoutingPeersActionCell";
 import { RoutingPeersEnabledCell } from "@/modules/networks/routing-peers/RoutingPeersEnabledCell";
@@ -70,6 +74,8 @@ export default function NetworkRoutingPeersTable({
   isLoading,
   headingTarget,
 }: Readonly<Props>) {
+  const { openAddRoutingPeerModal, network } = useNetworksContext();
+
   const [sorting, setSorting] = useState<SortingState>([
     {
       id: "metric",
@@ -80,7 +86,7 @@ export default function NetworkRoutingPeersTable({
   return (
     <DataTable
       wrapperComponent={Card}
-      wrapperProps={{ className: "mt-6 w-full" }}
+      wrapperProps={{ className: "mt-6 pb-2 w-full" }}
       headingTarget={headingTarget}
       sorting={sorting}
       setSorting={setSorting}
@@ -88,11 +94,11 @@ export default function NetworkRoutingPeersTable({
       showSearchAndFilters={false}
       inset={false}
       tableClassName={"mt-0"}
-      text={"Peers"}
+      text={"Routing Peers"}
       columns={NetworkRouterColumns}
       keepStateInLocalStorage={false}
       data={routers}
-      searchPlaceholder={"Search by name, IP, owner or group..."}
+      searchPlaceholder={"Search by name..."}
       isLoading={isLoading}
       getStartedCard={
         <NoResults
@@ -106,6 +112,23 @@ export default function NetworkRoutingPeersTable({
       }
       columnVisibility={{}}
       paginationPaddingClassName={"px-0 pt-8"}
-    />
+      rightSide={() => (
+        <Button
+          variant={"primary"}
+          className={"ml-auto"}
+          onClick={() => network && openAddRoutingPeerModal(network)}
+        >
+          <IconCirclePlus size={16} />
+          Add Routing Peer
+        </Button>
+      )}
+    >
+      {(table) => (
+        <DataTableRowsPerPage
+          table={table}
+          disabled={!routers || routers?.length == 0}
+        />
+      )}
+    </DataTable>
   );
 }
diff --git a/src/modules/networks/routing-peers/RoutingPeersActionCell.tsx b/src/modules/networks/routing-peers/RoutingPeersActionCell.tsx
index cb53fea7..3c64415c 100644
--- a/src/modules/networks/routing-peers/RoutingPeersActionCell.tsx
+++ b/src/modules/networks/routing-peers/RoutingPeersActionCell.tsx
@@ -18,7 +18,7 @@ export const RoutingPeersActionCell = ({ router }: Props) => {
     useNetworksContext();
 
   return (
-    <div className={"flex justify-end pr-4"}>
+    <div className={"flex justify-end"}>
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger
           asChild={true}