fix typo in route update modal (#397)

* update regex to allow one char domains in DNS routing modal

* update regex

package.json

@@ -53,7 +53,7 @@
     "framer-motion": "^10.16.4",
     "ip-cidr": "^3.1.0",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.287.0",
+    "lucide-react": "^0.383.0",
     "next": "13.5.5",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",

src/components/Input.tsx

@@ -13,6 +13,7 @@ export interface InputProps
   icon?: React.ReactNode;
   error?: string;
   errorTooltip?: boolean;
+  errorTooltipPosition?: "top" | "top-right";
 }
 
 const inputVariants = cva("", {
@@ -49,6 +50,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       maxWidthClass = "",
       error,
       errorTooltip = false,
+      errorTooltipPosition = "top",
       ...props
     },
     ref,
@@ -105,9 +107,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           </div>
           {error && errorTooltip && (
             <div
-              className={
-                "absolute right-0 top-2 h-[0px] w-full flex items-center pr-3 justify-center"
-              }
+              className={cn(
+                errorTooltipPosition == "top" &&
+                  "absolute right-0 top-2 h-[0px] w-full flex items-center pr-3 justify-center",
+                errorTooltipPosition == "top-right" &&
+                  "absolute -right-6 top-2 h-[0px] w-full flex items-center pr-3 justify-end",
+              )}
             >
               <FullTooltip
                 content={
@@ -120,7 +125,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                   </div>
                 }
                 interactive={false}
-                align={"center"}
+                align={errorTooltipPosition == "top" ? "center" : "end"}
                 side={"top"}
                 keepOpen={true}
               >

src/components/NetworkRouteSelector.tsx

@@ -1,4 +1,5 @@
 import { CommandItem } from "@components/Command";
+import FullTooltip from "@components/FullTooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
 import { IconArrowBack } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
@@ -62,8 +63,13 @@ export function NetworkRouteSelector({
     const isSearching = search.length > 0;
     const found =
       dropdownOptions.filter((item) => {
+        const hasDomains = item?.domains ? item.domains.length > 0 : false;
+        const domains =
+          hasDomains && item?.domains ? item?.domains.join(" ") : "";
         return (
-          item.network_id.includes(search) || item.network.includes(search)
+          item.network_id.includes(search) ||
+          item.network?.includes(search) ||
+          domains.includes(search)
         );
       }).length > 0;
     return isSearching && !found;
@@ -117,6 +123,7 @@ export function NetworkRouteSelector({
                 >
                   {value.network}
                 </div>
+                <DomainList domains={value?.domains} />
               </div>
             ) : (
               <span>Select an existing network...</span>
@@ -208,7 +215,11 @@ export function NetworkRouteSelector({
                     return (
                       <CommandItem
                         key={option.network + option.network_id}
-                        value={option.network + option.network_id}
+                        value={
+                          option.network +
+                          option.network_id +
+                          option?.domains?.join(", ")
+                        }
                         onSelect={() => {
                           togglePeer(option);
                           setOpen(false);
@@ -226,6 +237,7 @@ export function NetworkRouteSelector({
                         >
                           {option.network}
                         </div>
+                        <DomainList domains={option?.domains} />
                       </CommandItem>
                     );
                   })}
@@ -238,3 +250,19 @@ export function NetworkRouteSelector({
     </Popover>
   );
 }
+
+function DomainList({ domains }: { domains?: string[] }) {
+  const firstDomain = domains ? domains[0] : "";
+  return (
+    domains &&
+    domains.length > 0 && (
+      <FullTooltip
+        content={<div className={"text-xs max-w-sm"}>{domains.join(", ")}</div>}
+      >
+        <div className={"text-xs text-nb-gray-300"}>
+          {firstDomain} {domains.length > 1 && "+" + (domains.length - 1)}
+        </div>
+      </FullTooltip>
+    )
+  );
+}

src/components/modal/ModalHeader.tsx

@@ -10,6 +10,7 @@ interface Props extends IconVariant {
   className?: string;
   margin?: string;
   truncate?: boolean;
+  children?: React.ReactNode;
 }
 export default function ModalHeader({
   icon,
@@ -19,6 +20,7 @@ export default function ModalHeader({
   className = "pb-6 px-8",
   margin = "mt-0",
   truncate = false,
+  children,
 }: Props) {
   return (
     <div className={cn(className, "min-w-0")}>
@@ -26,11 +28,15 @@ export default function ModalHeader({
         {icon && <SquareIcon color={color} icon={icon} />}
         <div className={"min-w-0"}>
           <h2 className={"text-lg my-0 leading-[1.5]"}>{title}</h2>
-          <Paragraph
-            className={cn("text-sm", margin, truncate && "!block truncate")}
-          >
-            {description}
-          </Paragraph>
+          {children ? (
+            <>{children}</>
+          ) : (
+            <Paragraph
+              className={cn("text-sm", margin, truncate && "!block truncate")}
+            >
+              {description}
+            </Paragraph>
+          )}
         </div>
       </div>
     </div>

src/components/ui/DomainListBadge.tsx

@@ -0,0 +1,70 @@
+import Badge from "@components/Badge";
+import FullTooltip from "@components/FullTooltip";
+import { GlobeIcon } from "lucide-react";
+import * as React from "react";
+
+type Props = {
+  domains: string[];
+};
+export const DomainListBadge = ({ domains }: Props) => {
+  const firstDomain = domains.length > 0 ? domains[0] : undefined;
+
+  return (
+    <DomainsTooltip domains={domains}>
+      <div className={"inline-flex items-center gap-2"}>
+        {firstDomain && (
+          <Badge variant={"gray"}>
+            <GlobeIcon size={10} />
+            {firstDomain}
+          </Badge>
+        )}
+        {domains && domains.length > 1 && (
+          <Badge variant={"gray"}>+ {domains.length - 1}</Badge>
+        )}
+      </div>
+    </DomainsTooltip>
+  );
+};
+
+export const DomainsTooltip = ({
+  domains,
+  children,
+  className,
+}: {
+  domains: string[];
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <FullTooltip
+      interactive={false}
+      className={className}
+      content={
+        <div className={"flex flex-col gap-2 items-start"}>
+          {domains.map((domain) => {
+            return (
+              domain && (
+                <div
+                  key={domain}
+                  className={"flex gap-2 items-center justify-between w-full"}
+                >
+                  <div
+                    className={
+                      "flex gap-2 items-center text-nb-gray-300 text-xs"
+                    }
+                  >
+                    <GlobeIcon size={11} />
+                    {domain}
+                  </div>
+                </div>
+              )
+            );
+          })}
+        </div>
+      }
+      disabled={domains.length <= 1}
+    >
+      {children}
+    </FullTooltip>
+  );
+};

src/components/ui/InputDomain.tsx

@@ -0,0 +1,88 @@
+import Button from "@components/Button";
+import { Input } from "@components/Input";
+import { validator } from "@utils/helpers";
+import { uniqueId } from "lodash";
+import { GlobeIcon, MinusCircleIcon } from "lucide-react";
+import * as React from "react";
+import { useEffect, useMemo, useState } from "react";
+import { Domain } from "@/interfaces/Domain";
+
+type Props = {
+  value: Domain;
+  onChange: (d: Domain) => void;
+  onRemove: () => void;
+  onError?: (error: boolean) => void;
+  error?: string;
+};
+enum ActionType {
+  ADD = "ADD",
+  REMOVE = "REMOVE",
+  UPDATE = "UPDATE",
+}
+
+export const domainReducer = (state: Domain[], action: any): Domain[] => {
+  switch (action.type) {
+    case ActionType.ADD:
+      return [...state, { name: "", id: uniqueId("domain") }];
+    case ActionType.REMOVE:
+      return state.filter((_, i) => i !== action.index);
+    case ActionType.UPDATE:
+      return state.map((n, i) => (i === action.index ? action.d : n));
+    default:
+      return state;
+  }
+};
+
+export default function InputDomain({
+  value,
+  onChange,
+  onRemove,
+  onError,
+}: Readonly<Props>) {
+  const [name, setName] = useState(value?.name || "");
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value);
+    onChange({ ...value, name: e.target.value });
+  };
+
+  const domainError = useMemo(() => {
+    if (name == "") {
+      return "";
+    }
+    const valid = validator.isValidDomain(name);
+    if (!valid) {
+      return "Please enter a valid domain, e.g. example.com or intra.example.com";
+    }
+  }, [name]);
+
+  useEffect(() => {
+    const hasError = domainError !== "" && domainError !== undefined;
+    onError?.(hasError);
+    return () => onError?.(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [domainError]);
+
+  return (
+    <div className={"flex gap-2 w-full"}>
+      <div className={"w-full"}>
+        <Input
+          customPrefix={<GlobeIcon size={15} />}
+          placeholder={"e.g., example.com"}
+          maxWidthClass={"w-full"}
+          value={name}
+          error={domainError}
+          onChange={handleNameChange}
+        />
+      </div>
+
+      <Button
+        className={"h-[42px]"}
+        variant={"default-outline"}
+        onClick={onRemove}
+      >
+        <MinusCircleIcon size={15} />
+      </Button>
+    </div>
+  );
+}

src/contexts/RoutesProvider.tsx

@@ -34,6 +34,8 @@ export default function RoutesProvider({ children }: Props) {
     onSuccess?: (route: Route) => void,
     message?: string,
   ) => {
+    const hasDomains = route.domains ? route.domains.length > 0 : false;
+
     notify({
       title: "Network " + route.network_id + "-" + route.network,
       description: message
@@ -48,7 +50,9 @@ export default function RoutesProvider({ children }: Props) {
             peer: toUpdate.peer ?? (route.peer || undefined),
             peer_groups:
               toUpdate.peer_groups ?? (route.peer_groups || undefined),
-            network: route.network,
+            network: !hasDomains ? route.network : undefined,
+            domains: hasDomains ? route.domains : undefined,
+            keep_route: route.keep_route,
             metric: toUpdate.metric ?? route.metric ?? 9999,
             masquerade: toUpdate.masquerade ?? route.masquerade ?? true,
             groups: toUpdate.groups ?? route.groups ?? [],
@@ -80,7 +84,9 @@ export default function RoutesProvider({ children }: Props) {
           enabled: route.enabled,
           peer: route.peer || undefined,
           peer_groups: route.peer_groups || undefined,
-          network: route.network,
+          network: route?.network || undefined,
+          domains: route?.domains || undefined,
+          keep_route: route?.keep_route || false,
           metric: route.metric || 9999,
           masquerade: route.masquerade,
           groups: route.groups || [],

src/hooks/useOperatingSystem.ts

@@ -19,6 +19,8 @@ export const getOperatingSystem = (os: string) => {
   if (os.toLowerCase().includes("android"))
     return OperatingSystem.ANDROID as const;
   if (os.toLowerCase().includes("ios")) return OperatingSystem.IOS as const;
+  if (os.toLowerCase().includes("ipad")) return OperatingSystem.IOS as const;
+  if (os.toLowerCase().includes("iphone")) return OperatingSystem.IOS as const;
   if (os.toLowerCase().includes("windows"))
     return OperatingSystem.WINDOWS as const;
   return OperatingSystem.LINUX as const;

src/interfaces/Domain.ts

@@ -0,0 +1,4 @@
+export interface Domain {
+  id?: string;
+  name: string;
+}

src/interfaces/Nameserver.ts

@@ -17,11 +17,6 @@ export interface Nameserver {
   id?: string;
 }
 
-export interface Domain {
-  id?: string;
-  name: string;
-}
-
 export const NameserverPresets: Record<string, NameserverGroup> = {
   Default: {
     name: "",

src/interfaces/Route.ts

@@ -3,26 +3,34 @@ export interface Route {
   description: string;
   enabled: boolean;
   peer?: string;
-  network: string;
+  network?: string;
+  domains?: string[];
   network_id: string;
   network_type?: string;
   metric?: number;
   masquerade: boolean;
   groups: string[];
+  keep_route?: boolean;
+  // Frontend only
   peer_groups?: string[];
   routesGroups?: string[];
   groupedRoutes?: GroupedRoute[];
   group_names?: string[];
+  domain_search?: string;
 }
 
 export interface GroupedRoute {
   id: string;
   enabled: boolean;
-  network: string;
+  network?: string;
+  domains?: string[];
+  keep_route?: boolean;
   network_id: string;
   high_availability_count: number;
   is_using_route_groups: boolean;
   routes?: Route[];
   group_names?: string[];
   description?: string;
+  description_search?: string;
+  domain_search?: string;
 }

src/modules/activity/ActivityDescription.tsx

@@ -118,29 +118,38 @@ export default function ActivityDescription({ event }: Props) {
    * Route
    */
 
-  if (event.activity_code == "route.delete")
+  if (event.activity_code == "route.delete") {
+    let hasDomains = m?.domains && m?.domains.length > 0;
     return (
       <div className={"inline"}>
-        Route <Value>{m.name}</Value> with the <Value>{m.network_range}</Value>{" "}
-        range was deleted
+        Route <Value>{m.name}</Value> with the {hasDomains ? "domain(s)" : ""}{" "}
+        <Value>{hasDomains ? m?.domains : m.network_range}</Value>{" "}
+        {hasDomains ? "" : "range"} was deleted
       </div>
     );
+  }
 
-  if (event.activity_code == "route.update")
+  if (event.activity_code == "route.update") {
+    let hasDomains = m?.domains && m?.domains.length > 0;
     return (
       <div className={"inline"}>
-        Route <Value>{m.name}</Value> with the <Value>{m.network_range}</Value>{" "}
-        range was updated
+        Route <Value>{m.name}</Value> with the {hasDomains ? "domain(s)" : ""}{" "}
+        <Value>{hasDomains ? m?.domains : m.network_range}</Value>{" "}
+        {hasDomains ? "" : "range"} was updated
       </div>
     );
+  }
 
-  if (event.activity_code == "route.add")
+  if (event.activity_code == "route.add") {
+    let hasDomains = m?.domains && m?.domains.length > 0;
     return (
       <div className={"inline"}>
-        Route <Value>{m.name}</Value> with the <Value>{m.network_range}</Value>{" "}
-        range was created
+        Route <Value>{m.name}</Value> with the {hasDomains ? "domain(s)" : ""}{" "}
+        <Value>{hasDomains ? m?.domains : m.network_range}</Value>{" "}
+        {hasDomains ? "" : "range"} was created
       </div>
     );
+  }
 
   /**
    * User

src/modules/dns-nameservers/NameserverModal.tsx

@@ -17,8 +17,9 @@ import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/Tabs";
 import { Textarea } from "@components/Textarea";
+import InputDomain, { domainReducer } from "@components/ui/InputDomain";
 import { useApiCall } from "@utils/api";
-import { cn, validator } from "@utils/helpers";
+import { cn } from "@utils/helpers";
 import cidr from "ip-cidr";
 import { uniqueId } from "lodash";
 import {
@@ -35,7 +36,7 @@ import {
 import React, { useEffect, useMemo, useReducer, useState } from "react";
 import { useSWRConfig } from "swr";
 import DNSIcon from "@/assets/icons/DNSIcon";
-import { Domain, Nameserver, NameserverGroup } from "@/interfaces/Nameserver";
+import { Nameserver, NameserverGroup } from "@/interfaces/Nameserver";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 
 type Props = {
@@ -97,19 +98,6 @@ enum ActionType {
   UPDATE = "UPDATE",
 }
 
-export const domainReducer = (state: Domain[], action: any) => {
-  switch (action.type) {
-    case ActionType.ADD:
-      return [...state, { name: "", id: uniqueId("ns") }];
-    case ActionType.REMOVE:
-      return state.filter((_, i) => i !== action.index);
-    case ActionType.UPDATE:
-      return state.map((n, i) => (i === action.index ? action.d : n));
-    default:
-      return state;
-  }
-};
-
 export function NameserverModalContent({
   onSuccess,
   preset,
@@ -199,7 +187,7 @@ export function NameserverModalContent({
   // Domains
   const [domains, setDomains] = useReducer(domainReducer, [], () => {
     if (preset?.domains?.length) {
-      return preset.domains.map((d) => ({ name: d, id: uniqueId("ns") }));
+      return preset.domains.map((d) => ({ name: d, id: uniqueId("domain") }));
     }
     return [];
   });
@@ -370,7 +358,7 @@ export function NameserverModalContent({
                     <div className={"flex flex-col gap-2 w-full"}>
                       {domains.map((domain, i) => {
                         return (
-                          <DomainInput
+                          <InputDomain
                             key={domain.id}
                             value={domain}
                             onChange={(d) =>
@@ -619,63 +607,3 @@ function NameserverInput({
     </div>
   );
 }
-
-function DomainInput({
-  value,
-  onChange,
-  onRemove,
-  onError,
-}: {
-  value: Domain;
-  onChange: (d: Domain) => void;
-  onRemove: () => void;
-  onError?: (error: boolean) => void;
-  error?: string;
-}) {
-  const [name, setName] = useState(value.name);
-
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setName(e.target.value);
-    onChange({ ...value, name: e.target.value });
-  };
-
-  const domainError = useMemo(() => {
-    if (name == "") {
-      return "";
-    }
-    const valid = validator.isValidDomain(name);
-    if (!valid) {
-      onError && onError(true);
-      return "Please enter a valid domain, e.g. example.com or intra.example.com";
-    }
-    onError && onError(false);
-  }, [name, onError]);
-
-  useEffect(() => {
-    return () => onError && onError(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <div className={"flex gap-2 w-full"}>
-      <div className={"w-full"}>
-        <Input
-          customPrefix={<GlobeIcon size={15} />}
-          placeholder={"e.g., example.com"}
-          maxWidthClass={"w-full"}
-          value={name}
-          error={domainError}
-          onChange={handleNameChange}
-        />
-      </div>
-
-      <Button
-        className={"h-[42px]"}
-        variant={"default-outline"}
-        onClick={onRemove}
-      >
-        <MinusCircleIcon size={15} />
-      </Button>
-    </div>
-  );
-}

src/modules/exit-node/AddExitNodeButton.tsx

@@ -26,7 +26,7 @@ export const AddExitNodeButton = ({ peer, firstTime = false }: Props) => {
           ) : (
             <>
               <IconDirectionSign size={16} className={"text-yellow-400"} />
-              Setup Exit Node
+              Set Up Exit Node
             </>
           )}
         </Button>

src/modules/exit-node/ExitNodeDropdownButton.tsx

@@ -37,7 +37,7 @@ export const ExitNodeDropdownButton = ({ peer }: Props) => {
                 className={"shrink-0 text-yellow-400"}
               />
               <div className={"flex justify-between items-center w-full"}>
-                Setup Exit Node
+                Set Up Exit Node
               </div>
             </>
           )}

src/modules/peer/PeerRoutesTable.tsx

@@ -12,8 +12,8 @@ import { Route } from "@/interfaces/Route";
 import PeerRouteActionCell from "@/modules/peer/PeerRouteActionCell";
 import PeerRouteActiveCell from "@/modules/peer/PeerRouteActiveCell";
 import PeerRouteNameCell from "@/modules/peer/PeerRouteNameCell";
-import PeerRouteNetworkCell from "@/modules/peer/PeerRouteNetworkCell";
 import usePeerRoutes from "@/modules/peer/usePeerRoutes";
+import GroupedRouteNetworkRangeCell from "@/modules/route-group/GroupedRouteNetworkRangeCell";
 import RouteDistributionGroupsCell from "@/modules/routes/RouteDistributionGroupsCell";
 
 type Props = {
@@ -32,9 +32,14 @@ export const RouteTableColumns: ColumnDef<Route>[] = [
   {
     accessorKey: "network",
     header: ({ column }) => {
-      return <DataTableHeader column={column}>Network Range</DataTableHeader>;
+      return <DataTableHeader column={column}>Network</DataTableHeader>;
     },
-    cell: ({ row }) => <PeerRouteNetworkCell route={row.original} />,
+    cell: ({ row }) => (
+      <GroupedRouteNetworkRangeCell
+        domains={row.original?.domains}
+        network={row.original?.network}
+      />
+    ),
   },
   {
     id: "groups",

src/modules/route-group/GroupedRouteNetworkRangeCell.tsx

@@ -1,15 +1,23 @@
+import { DomainListBadge } from "@components/ui/DomainListBadge";
 import { IconDirectionSign } from "@tabler/icons-react";
 import { InfoIcon } from "lucide-react";
 import * as React from "react";
 import { ExitNodeHelpTooltip } from "@/modules/exit-node/ExitNodeHelpTooltip";
 
 type Props = {
-  network: string;
+  network?: string;
+  domains?: string[];
 };
-export default function GroupedRouteNetworkRangeCell({ network }: Props) {
+export default function GroupedRouteNetworkRangeCell({
+  network,
+  domains,
+}: Props) {
   const isExitNode = network === "0.0.0.0/0";
+  const hasDomains = domains ? domains.length > 0 : false;
 
-  return isExitNode ? (
+  return hasDomains && domains ? (
+    <DomainListBadge domains={domains} />
+  ) : isExitNode ? (
     <ExitNodeHelpTooltip>
       <div className={"flex gap-2 items-center dark:text-nb-gray-300 group"}>
         <IconDirectionSign size={16} className={"text-yellow-400"} />

src/modules/route-group/NetworkRoutesTable.tsx

@@ -39,6 +39,14 @@ export const GroupedRouteTableColumns: ColumnDef<GroupedRoute>[] = [
     accessorKey: "description",
     sortingFn: "text",
   },
+  {
+    accessorKey: "description_search",
+    sortingFn: "text",
+  },
+  {
+    accessorKey: "domain_search",
+    sortingFn: "text",
+  },
   {
     id: "enabled",
     accessorKey: "enabled",
@@ -50,13 +58,22 @@ export const GroupedRouteTableColumns: ColumnDef<GroupedRoute>[] = [
       return row.group_names?.map((name) => name).join(", ");
     },
   },
+  {
+    id: "domains",
+    accessorFn: (row) => {
+      return row.domains?.map((name) => name).join(", ");
+    },
+  },
   {
     accessorKey: "network",
     header: ({ column }) => {
-      return <DataTableHeader column={column}>Network Range</DataTableHeader>;
+      return <DataTableHeader column={column}>Network</DataTableHeader>;
     },
     cell: ({ row }) => (
-      <GroupedRouteNetworkRangeCell network={row.original.network} />
+      <GroupedRouteNetworkRangeCell
+        network={row.original.network}
+        domains={row.original?.domains}
+      />
     ),
   },
   {
@@ -132,7 +149,10 @@ export default function NetworkRoutesTable({
       columnVisibility={{
         enabled: false,
         description: false,
+        description_search: false,
         group_names: false,
+        domains: false,
+        domain_search: false,
       }}
       renderExpandedRow={(row) => {
         const data = cloneDeep(row);

src/modules/route-group/useGroupedRoutes.tsx

@@ -53,15 +53,26 @@ export default function useGroupedRoutes({ routes }: Props) {
       });
 
       const allGroupNames = [...peerGroupNames, ...distributionGroupNames];
+      const hasDomains = routes[0].domains
+        ? routes[0].domains.length > 0
+        : false;
+
+      const childDescriptions =
+        routes?.map((r) => r?.description).join(", ") || "";
+      const domainString = routes?.map((r) => r.domains?.join(", ")).join(", ");
 
       results.push({
         id,
         enabled: routes.find((r) => r.enabled) != undefined,
-        network: routes[0].network,
+        network: !hasDomains ? routes[0].network : undefined,
+        domains: hasDomains ? routes[0].domains || undefined : undefined,
+        domain_search: domainString,
+        keep_route: routes[0].keep_route || false,
         network_id: routes[0].network_id,
         high_availability_count: allPeers,
         is_using_route_groups: !!groupPeerRoute,
         description: groupPeerRoute ? groupPeerRoute?.description : undefined,
+        description_search: childDescriptions,
         routes: routes,
         group_names: allGroupNames,
       });

src/modules/routes/RouteAddRoutingPeerModal.tsx

@@ -89,6 +89,13 @@ function Content({ onSuccess, groupedRoute, peer }: ModalProps) {
       .map((g) => g.id)
       .filter((id) => id !== undefined) as string[];
 
+    let useRange = false;
+    if (routeNetwork?.domains) {
+      useRange = routeNetwork.domains.length <= 0;
+    } else {
+      useRange = true;
+    }
+
     createRoute(
       {
         network_id: routeNetwork.network_id,
@@ -96,7 +103,9 @@ function Content({ onSuccess, groupedRoute, peer }: ModalProps) {
         enabled: true,
         peer: routingPeer?.id || undefined,
         peer_groups: undefined,
-        network: routeNetwork.network,
+        network: useRange ? routeNetwork.network : undefined,
+        domains: useRange ? undefined : routeNetwork.domains,
+        keep_route: routeNetwork.keep_route || false,
         metric: 9999,
         masquerade: true,
         groups: groupIds,
@@ -139,7 +148,7 @@ function Content({ onSuccess, groupedRoute, peer }: ModalProps) {
         <div>
           <Label>Routing Peer</Label>
           <HelpText>
-            Assign a single peer as a routing peer for the Network CIDR.
+            Assign a single peer as a routing peer for the network route.
           </HelpText>
           <PeerSelector
             onChange={setRoutingPeer}