Update ACL port state to show correct value

netbirdio · Aug 13, 2024 · f30b8a4 · f30b8a4
1 parent 7822c22
commit f30b8a4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/src/modules/access-control/AccessControlModal.tsx b/src/modules/access-control/AccessControlModal.tsx
@@ -272,6 +272,16 @@ export function AccessControlModalContent({
     if (continuePostureChecksDisabled) return true;
   }, [name, continuePostureChecksDisabled]);
 
+  const handleProtocolChange = (p: Protocol) => {
+    setProtocol(p);
+    if (p == "icmp") {
+      setPorts([]);
+    }
+    if (p == "all") {
+      setPorts([]);
+    }
+  };
+
   return (
     <ModalContent maxWidthClass={"max-w-2xl"}>
       <ModalHeader
@@ -322,7 +332,7 @@ export function AccessControlModalContent({
               </div>
               <Select
                 value={protocol}
-                onValueChange={(v) => setProtocol(v as Protocol)}
+                onValueChange={(v) => handleProtocolChange(v as Protocol)}
               >
                 <SelectTrigger className="w-[140px]">
                   <div className={"flex items-center gap-3"}>

diff --git a/src/modules/access-control/table/AccessControlPortsCell.tsx b/src/modules/access-control/table/AccessControlPortsCell.tsx
@@ -5,7 +5,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@components/Tooltip";
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import { Policy } from "@/interfaces/Policy";
 
 type Props = {
@@ -19,15 +19,15 @@ export default function AccessControlPortsCell({ policy }: Props) {
 
   const hasPorts = firstRule?.ports && firstRule?.ports.length > 0;
 
-  const [firstTwoPorts] = useState(() => {
+  const firstTwoPorts = useMemo(() => {
     if (!hasPorts) return [];
     return firstRule?.ports.slice(0, 2) ?? [];
-  });
+  }, [hasPorts, firstRule]);
 
-  const [otherPorts] = useState(() => {
+  const otherPorts = useMemo(() => {
     if (!hasPorts) return [];
     return firstRule?.ports.slice(2) ?? [];
-  });
+  }, [hasPorts, firstRule]);
 
   return (
     <div className={"flex-1"}>