Fix access control to show the correct modal (#326)

* Rename Access Control "Rule" to Access Control "Policy"

* Show the correct modal for Access Control

Author: heisbrot

src/app/(dashboard)/access-control/page.tsx

@@ -33,8 +33,8 @@ export default function AccessControlPage() {
           </Breadcrumbs>
           <h1>
             {policies && policies.length > 1
-              ? `${policies.length} Access Control Rules`
-              : "Access Control Rules"}
+              ? `${policies.length} Access Control Policies`
+              : "Access Control Policies"}
           </h1>
           <Paragraph>
             Create rules to manage access in your network and define what peers

src/contexts/PoliciesProvider.tsx

@@ -28,10 +28,10 @@ export default function PoliciesProvider({ children }: Props) {
     message?: string,
   ) => {
     notify({
-      title: "Access Control Rule " + policy.name,
+      title: "Access Control Policy " + policy.name,
       description: message
         ? message
-        : "The access control rule was successfully updated",
+        : "The access control policy was successfully updated",
       promise: request
         .put(
           {

src/modules/access-control/AccessControlModal.tsx

@@ -112,9 +112,9 @@ export function AccessControlModalContent({
   const firstRule = policy?.rules ? policy.rules[0] : undefined;
 
   const [tab, setTab] = useState(() => {
-    if (!cell) return "rule";
+    if (!cell) return "policy";
     if (cell == "name") return "general";
-    return "rule";
+    return "policy";
   });
 
   const [enabled, setEnabled] = useState<boolean>(policy?.enabled ?? true);
@@ -210,13 +210,13 @@ export function AccessControlModalContent({
           mutate("/policies");
           onSuccess && onSuccess(policy);
         },
-        "The rule was successfully saved",
+        "The policy was successfully saved",
       );
     } else {
       notify({
-        title: "Create Access Control Rule",
-        description: "Rule was created successfully.",
-        loadingMessage: "Creating your setup key...",
+        title: "Create Access Control Policy",
+        description: "Policy was created successfully.",
+        loadingMessage: "Creating your policy...",
         promise: policyRequest.post(policyObj).then((policy) => {
           mutate("/policies");
           onSuccess && onSuccess(policy);
@@ -239,18 +239,20 @@ export function AccessControlModalContent({
         icon={<AccessControlIcon className={"fill-netbird"} />}
         title={
           policy
-            ? "Update Access Control Rule"
-            : "Create New Access Control Rule"
+            ? "Update Access Control Policy"
+            : "Create New Access Control Policy"
+        }
+        description={
+          "Use this policy to restrict access to groups of resources."
         }
-        description={"Use this rule to restrict access to groups of resources."}
         color={"netbird"}
       />
 
       <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)}>
         <TabsList justify={"start"} className={"px-8"}>
-          <TabsTrigger value={"rule"}>
+          <TabsTrigger value={"policy"}>
             <ArrowRightLeft size={16} />
-            Rule
+            Policy
           </TabsTrigger>
           <TabsTrigger value={"general"}>
             <Text
@@ -263,7 +265,7 @@ export function AccessControlModalContent({
           </TabsTrigger>
         </TabsList>
 
-        <TabsContent value={"rule"} className={"pb-8"}>
+        <TabsContent value={"policy"} className={"pb-8"}>
           <div className={"px-8 flex-col flex gap-6"}>
             <div className={"flex justify-between items-center"}>
               <div>
@@ -357,10 +359,10 @@ export function AccessControlModalContent({
               label={
                 <>
                   <Power size={15} />
-                  Enable Rule
+                  Enable Policy
                 </>
               }
-              helpText={"Use this switch to enable or disable the rule."}
+              helpText={"Use this switch to enable or disable the policy."}
             />
           </div>
         </TabsContent>
@@ -369,7 +371,7 @@ export function AccessControlModalContent({
             <div>
               <Label>Name of the Rule</Label>
               <HelpText>
-                Set an easily identifiable name for your rule.
+                Set an easily identifiable name for your policy.
               </HelpText>
               <Input
                 autoFocus={true}
@@ -382,7 +384,7 @@ export function AccessControlModalContent({
             <div>
               <Label>Description (optional)</Label>
               <HelpText>
-                Write a short description to add more context to this rule.
+                Write a short description to add more context to this policy.
               </HelpText>
               <Textarea
                 value={description}
@@ -427,7 +429,7 @@ export function AccessControlModalContent({
             ) : (
               <>
                 <PlusCircle size={16} />
-                Add Rule
+                Add Policy
               </>
             )}
           </Button>

src/modules/access-control/table/AccessControlActionCell.tsx

@@ -18,20 +18,20 @@ export default function AccessControlActionCell({ policy }: Props) {
 
   const deleteRule = async () => {
     notify({
-      title: "Access Control Rule " + policy.name,
-      description: "The rule was successfully removed.",
+      title: "Access Control Policy " + policy.name,
+      description: "The policy was successfully removed.",
       promise: policyRequest.del("", `/${policy.id}`).then(() => {
         mutate("/policies");
       }),
-      loadingMessage: "Deleting the rule...",
+      loadingMessage: "Deleting the policy...",
     });
   };
 
   const openConfirm = async () => {
     const choice = await confirm({
       title: `Delete '${policy.name}'?`,
       description:
-        "Are you sure you want to delete this access control rule? This action cannot be undone.",
+        "Are you sure you want to delete this access control policy? This action cannot be undone.",
       confirmText: "Delete",
       cancelText: "Cancel",
       type: "danger",

src/modules/access-control/table/AccessControlTable.tsx

@@ -26,7 +26,6 @@ import AccessControlNameCell from "@/modules/access-control/table/AccessControlN
 import AccessControlPortsCell from "@/modules/access-control/table/AccessControlPortsCell";
 import AccessControlProtocolCell from "@/modules/access-control/table/AccessControlProtocolCell";
 import AccessControlSourcesCell from "@/modules/access-control/table/AccessControlSourcesCell";
-import RouteModal from "@/modules/routes/RouteModal";
 
 type Props = {
   policies?: Policy[];
@@ -206,17 +205,17 @@ export default function AccessControlTable({ policies, isLoading }: Props) {
                 size={"large"}
               />
             }
-            title={"Create New Rule"}
+            title={"Create New Policy"}
             description={
-              "It looks like you don't have any rules yet. Rules can allow connections by specific protocol and ports."
+              "It looks like you don't have any policies yet. Policies can allow connections by specific protocol and ports."
             }
             button={
-              <RouteModal>
+              <AccessControlModal>
                 <Button variant={"primary"} className={""}>
                   <PlusCircle size={16} />
-                  Add Rule
+                  Add Policy
                 </Button>
-              </RouteModal>
+              </AccessControlModal>
             }
             learnMore={
               <>
@@ -238,7 +237,7 @@ export default function AccessControlTable({ policies, isLoading }: Props) {
               <AccessControlModal>
                 <Button variant={"primary"} className={"ml-auto"}>
                   <PlusCircle size={16} />
-                  Add Rule
+                  Add Policy
                 </Button>
               </AccessControlModal>
             )}