Add continue button for dns modal

src/modules/access-control/AccessControlModal.tsx

@@ -239,12 +239,6 @@ export function AccessControlModalContent({
 
   const portAndDirectionDisabled = protocol == "icmp" || protocol == "all";
 
-  const buttonDisabled = useMemo(() => {
-    if (sourceGroups.length == 0 || destinationGroups.length == 0) return true;
-    if (name.length == 0) return true;
-    if (direction != "bi" && ports.length == 0) return true;
-  }, [sourceGroups, destinationGroups, direction, ports, name]);
-
   const [postureChecks, setPostureChecks] = useState<PostureCheck[]>([]);
   const postureChecksLoaded = useRef(false);
 
@@ -268,6 +262,16 @@ export function AccessControlModalContent({
     }
   }, [initialPostureChecks]);
 
+  const continuePostureChecksDisabled = useMemo(() => {
+    if (sourceGroups.length == 0 || destinationGroups.length == 0) return true;
+    if (direction != "bi" && ports.length == 0) return true;
+  }, [sourceGroups, destinationGroups, direction, ports]);
+
+  const submitDisabled = useMemo(() => {
+    if (name.length == 0) return true;
+    if (continuePostureChecksDisabled) return true;
+  }, [name, continuePostureChecksDisabled]);
+
   return (
     <ModalContent maxWidthClass={"max-w-2xl"}>
       <ModalHeader
@@ -283,14 +287,17 @@ export function AccessControlModalContent({
         color={"netbird"}
       />
 
-      <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)}>
+      <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)} value={tab}>
         <TabsList justify={"start"} className={"px-8"}>
           <TabsTrigger value={"policy"}>
             <ArrowRightLeft size={16} />
             Policy
           </TabsTrigger>
-          <PostureCheckTabTrigger />
-          <TabsTrigger value={"general"}>
+          <PostureCheckTabTrigger disabled={continuePostureChecksDisabled} />
+          <TabsTrigger
+            value={"general"}
+            disabled={continuePostureChecksDisabled}
+          >
             <Text
               size={16}
               className={
@@ -456,24 +463,74 @@ export function AccessControlModalContent({
           </Paragraph>
         </div>
         <div className={"flex gap-3 w-full justify-end"}>
-          <ModalClose asChild={true}>
-            <Button variant={"secondary"}>Cancel</Button>
-          </ModalClose>
+          {!policy ? (
+            <>
+              {tab == "policy" && (
+                <ModalClose asChild={true}>
+                  <Button variant={"secondary"}>Cancel</Button>
+                </ModalClose>
+              )}
 
-          <Button
-            variant={"primary"}
-            disabled={buttonDisabled}
-            onClick={submit}
-          >
-            {policy ? (
-              <>Save Changes</>
-            ) : (
-              <>
-                <PlusCircle size={16} />
-                Add Policy
-              </>
-            )}
-          </Button>
+              {tab == "posture_checks" && (
+                <Button variant={"secondary"} onClick={() => setTab("policy")}>
+                  Back
+                </Button>
+              )}
+
+              {tab == "policy" && (
+                <Button
+                  variant={"primary"}
+                  onClick={() => setTab("posture_checks")}
+                  disabled={continuePostureChecksDisabled}
+                >
+                  Continue
+                </Button>
+              )}
+
+              {tab == "posture_checks" && (
+                <Button
+                  variant={"primary"}
+                  onClick={() => setTab("general")}
+                  disabled={continuePostureChecksDisabled}
+                >
+                  Continue
+                </Button>
+              )}
+
+              {tab == "general" && (
+                <>
+                  <Button
+                    variant={"secondary"}
+                    onClick={() => setTab("posture_checks")}
+                  >
+                    Back
+                  </Button>
+
+                  <Button
+                    variant={"primary"}
+                    disabled={submitDisabled}
+                    onClick={submit}
+                  >
+                    <PlusCircle size={16} />
+                    Add Policy
+                  </Button>
+                </>
+              )}
+            </>
+          ) : (
+            <>
+              <ModalClose asChild={true}>
+                <Button variant={"secondary"}>Cancel</Button>
+              </ModalClose>
+              <Button
+                variant={"primary"}
+                disabled={submitDisabled}
+                onClick={submit}
+              >
+                Save Changes
+              </Button>
+            </>
+          )}
         </div>
       </ModalFooter>
     </ModalContent>

src/modules/dns-nameservers/NameserverModal.tsx

@@ -238,27 +238,22 @@ export function NameserverModalContent({
     return "";
   }, [name]);
 
-  const hasAnyError = useMemo(() => {
-    return (
+  const canContinueToDomains = useMemo(() => {
+    return !(
       hasNSErrors ||
       nsError ||
-      domainError ||
       nameservers.length == 0 ||
-      hasDomainErrors ||
-      groups.length == 0 ||
-      nameLengthError !== "" ||
-      name == ""
+      groups.length == 0
     );
-  }, [
-    nsError,
-    domainError,
-    nameservers,
-    groups,
-    hasNSErrors,
-    hasDomainErrors,
-    nameLengthError,
-    name,
-  ]);
+  }, [hasNSErrors, nsError, nameservers.length, groups.length]);
+
+  const canContinueToGeneral = useMemo(() => {
+    return !(!canContinueToDomains || domainError || hasDomainErrors);
+  }, [canContinueToDomains, domainError, hasDomainErrors]);
+
+  const canSubmit = useMemo(() => {
+    return !(!canContinueToGeneral || nameLengthError !== "" || name == "");
+  }, [canContinueToGeneral, nameLengthError, name]);
 
   return (
     <ModalContent maxWidthClass={"max-w-xl"}>
@@ -269,7 +264,7 @@ export function NameserverModalContent({
         color={"netbird"}
       />
 
-      <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)}>
+      <Tabs defaultValue={tab} onValueChange={(v) => setTab(v)} value={tab}>
         <TabsList justify={"start"} className={"px-8"}>
           <TabsTrigger value={"nameserver"}>
             <ServerIcon
@@ -280,7 +275,7 @@ export function NameserverModalContent({
             />
             Nameserver
           </TabsTrigger>
-          <TabsTrigger value={"domains"}>
+          <TabsTrigger value={"domains"} disabled={!canContinueToDomains}>
             <GlobeIcon
               size={16}
               className={
@@ -289,7 +284,7 @@ export function NameserverModalContent({
             />
             Domains
           </TabsTrigger>
-          <TabsTrigger value={"general"}>
+          <TabsTrigger value={"general"} disabled={!canContinueToGeneral}>
             <Text
               size={16}
               className={
@@ -473,20 +468,77 @@ export function NameserverModalContent({
           </Paragraph>
         </div>
         <div className={"flex gap-3 w-full justify-end"}>
-          <ModalClose asChild={true}>
-            <Button variant={"secondary"}>Cancel</Button>
-          </ModalClose>
+          {!isUpdate ? (
+            <>
+              {tab == "nameserver" && (
+                <ModalClose asChild={true}>
+                  <Button variant={"secondary"}>Cancel</Button>
+                </ModalClose>
+              )}
 
-          <Button variant={"primary"} disabled={hasAnyError} onClick={submit}>
-            {isUpdate ? (
-              <>Save Changes</>
-            ) : (
-              <>
-                <PlusCircle size={16} />
-                Add Nameserver
-              </>
-            )}
-          </Button>
+              {tab == "domains" && (
+                <Button
+                  variant={"secondary"}
+                  onClick={() => setTab("nameserver")}
+                >
+                  Back
+                </Button>
+              )}
+
+              {tab == "nameserver" && (
+                <Button
+                  variant={"primary"}
+                  onClick={() => setTab("domains")}
+                  disabled={!canContinueToDomains}
+                >
+                  Continue
+                </Button>
+              )}
+
+              {tab == "domains" && (
+                <Button
+                  variant={"primary"}
+                  onClick={() => setTab("general")}
+                  disabled={!canContinueToGeneral}
+                >
+                  Continue
+                </Button>
+              )}
+
+              {tab == "general" && (
+                <>
+                  <Button
+                    variant={"secondary"}
+                    onClick={() => setTab("domains")}
+                  >
+                    Back
+                  </Button>
+
+                  <Button
+                    variant={"primary"}
+                    disabled={!canSubmit}
+                    onClick={submit}
+                  >
+                    <PlusCircle size={16} />
+                    Add Nameserver
+                  </Button>
+                </>
+              )}
+            </>
+          ) : (
+            <>
+              <ModalClose asChild={true}>
+                <Button variant={"secondary"}>Cancel</Button>
+              </ModalClose>
+              <Button
+                variant={"primary"}
+                disabled={!canSubmit}
+                onClick={submit}
+              >
+                Save Changes
+              </Button>
+            </>
+          )}
         </div>
       </ModalFooter>
     </ModalContent>

src/modules/posture-checks/modal/PostureCheckModal.tsx

@@ -163,7 +163,10 @@ export default function PostureCheckModal({
                 Checks
               </TabsTrigger>
 
-              <TabsTrigger value={"general"}>
+              <TabsTrigger
+                value={"general"}
+                disabled={!isAtLeastOneCheckEnabled}
+              >
                 <Text
                   size={16}
                   className={
@@ -243,12 +246,23 @@ export default function PostureCheckModal({
             </div>
             <div className={"flex gap-3 w-full justify-end"}>
               <>
-                <Button
-                  variant={"secondary"}
-                  onClick={() => onOpenChange(false)}
-                >
-                  Cancel
-                </Button>
+                {tab == "checks" && (
+                  <Button
+                    variant={"secondary"}
+                    onClick={() => onOpenChange(false)}
+                  >
+                    Cancel
+                  </Button>
+                )}
+
+                {tab == "general" && (
+                  <Button
+                    variant={"secondary"}
+                    onClick={() => setTab("checks")}
+                  >
+                    Back
+                  </Button>
+                )}
 
                 {!postureCheck && tab == "checks" && (
                   <Button

src/modules/posture-checks/ui/PostureCheckTabTrigger.tsx

@@ -2,9 +2,13 @@ import { TabsTrigger } from "@components/Tabs";
 import { ShieldCheck } from "lucide-react";
 import * as React from "react";
 
-export const PostureCheckTabTrigger = () => {
+type Props = {
+  disabled?: boolean;
+};
+
+export const PostureCheckTabTrigger = ({ disabled = false }: Props) => {
   return (
-    <TabsTrigger value={"posture_checks"}>
+    <TabsTrigger value={"posture_checks"} disabled={disabled}>
       <ShieldCheck size={16} />
       Posture Checks
     </TabsTrigger>