Add initial group for network routes

Author: heisbrot

src/modules/exit-node/AddExitNodeButton.tsx

@@ -4,15 +4,21 @@ import { IconCirclePlus, IconDirectionSign } from "@tabler/icons-react";
 import * as React from "react";
 import { useState } from "react";
 import { usePermissions } from "@/contexts/PermissionsProvider";
+import { Group } from "@/interfaces/Group";
 import { Peer } from "@/interfaces/Peer";
 import { ExitNodeHelpTooltip } from "@/modules/exit-node/ExitNodeHelpTooltip";
 import { RouteModalContent } from "@/modules/routes/RouteModal";
 
 type Props = {
   peer?: Peer;
   firstTime?: boolean;
+  distributionGroups?: Group[];
 };
-export const AddExitNodeButton = ({ peer, firstTime = false }: Props) => {
+export const AddExitNodeButton = ({
+  peer,
+  firstTime = false,
+  distributionGroups,
+}: Props) => {
   const [modal, setModal] = useState(false);
   const { permission } = usePermissions();
 
@@ -42,6 +48,7 @@ export const AddExitNodeButton = ({ peer, firstTime = false }: Props) => {
           <RouteModalContent
             onSuccess={() => setModal(false)}
             peer={peer}
+            distributionGroups={distributionGroups}
             isFirstExitNode={firstTime}
             exitNode={true}
           />

src/modules/groups/details/GroupNetworkRoutesSection.tsx

@@ -4,6 +4,7 @@ import { DataTableRowsPerPage } from "@components/table/DataTableRowsPerPage";
 import { usePortalElement } from "@hooks/usePortalElement";
 import { ColumnDef } from "@tanstack/react-table";
 import React from "react";
+import { useGroupContext } from "@/contexts/GroupProvider";
 import { Route } from "@/interfaces/Route";
 import { GroupDetailsTableContainer } from "@/modules/groups/details/GroupDetailsTableContainer";
 import PeerRouteNameCell from "@/modules/peer/PeerRouteNameCell";
@@ -63,6 +64,7 @@ export const GroupNetworkRoutesTableColumns: ColumnDef<Route>[] = [
 
 export const GroupNetworkRoutesSection = ({ routes }: { routes?: Route[] }) => {
   const groupedRoutes = useGroupedRoutes({ routes });
+  const { group } = useGroupContext();
 
   return (
     <GroupDetailsTableContainer>
@@ -71,6 +73,7 @@ export const GroupNetworkRoutesSection = ({ routes }: { routes?: Route[] }) => {
         isLoading={false}
         groupedRoutes={groupedRoutes}
         routes={routes}
+        distributionGroups={[group]}
       />
     </GroupDetailsTableContainer>
   );

src/modules/route-group/NetworkRoutesTable.tsx

@@ -19,6 +19,7 @@ import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import GroupRouteProvider from "@/contexts/GroupRouteProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
+import { Group } from "@/interfaces/Group";
 import { GroupedRoute, Route } from "@/interfaces/Route";
 import { AddExitNodeButton } from "@/modules/exit-node/AddExitNodeButton";
 import GroupedRouteActionCell from "@/modules/route-group/GroupedRouteActionCell";
@@ -118,6 +119,7 @@ type Props = {
   routes?: Route[];
   headingTarget?: HTMLHeadingElement | null;
   isGroupPage?: boolean;
+  distributionGroups?: Group[];
 };
 
 export default function NetworkRoutesTable({
@@ -126,6 +128,7 @@ export default function NetworkRoutesTable({
   routes,
   headingTarget,
   isGroupPage = false,
+  distributionGroups,
 }: Props) {
   const { permission } = usePermissions();
   const { mutate } = useSWRConfig();
@@ -155,7 +158,11 @@ export default function NetworkRoutesTable({
 
   return (
     <RouteAddRoutingPeerProvider>
-      <RouteModal open={routeModal} setOpen={setRouteModal} />
+      <RouteModal
+        open={routeModal}
+        setOpen={setRouteModal}
+        distributionGroups={distributionGroups}
+      />
       <DataTable
         headingTarget={headingTarget}
         isLoading={isLoading}
@@ -202,7 +209,7 @@ export default function NetworkRoutesTable({
               }
             >
               <div className={"gap-x-4 flex items-center justify-center mt-4"}>
-                <AddExitNodeButton />
+                <AddExitNodeButton distributionGroups={distributionGroups} />
                 <Button
                   variant={"primary"}
                   className={""}
@@ -234,7 +241,7 @@ export default function NetworkRoutesTable({
               }
               button={
                 <div className={"gap-x-4 flex items-center justify-center"}>
-                  <AddExitNodeButton />
+                  <AddExitNodeButton distributionGroups={distributionGroups} />
                   <Button
                     variant={"primary"}
                     className={""}
@@ -267,7 +274,7 @@ export default function NetworkRoutesTable({
           <>
             {routes && routes?.length > 0 && (
               <div className={"gap-x-4 ml-auto flex"}>
-                <AddExitNodeButton />
+                <AddExitNodeButton distributionGroups={distributionGroups} />
                 <Button
                   variant={"primary"}
                   className={""}

src/modules/routes/RouteModal.tsx

@@ -49,6 +49,7 @@ import React, { useEffect, useMemo, useReducer, useRef, useState } from "react";
 import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
 import { useDialog } from "@/contexts/DialogProvider";
 import { useRoutes } from "@/contexts/RoutesProvider";
+import { Group } from "@/interfaces/Group";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import { Peer } from "@/interfaces/Peer";
 import { Policy } from "@/interfaces/Policy";
@@ -61,9 +62,15 @@ type Props = {
   children?: React.ReactNode;
   open?: boolean;
   setOpen?: (open: boolean) => void;
+  distributionGroups?: Group[];
 };
 
-export default function RouteModal({ children, open, setOpen }: Props) {
+export default function RouteModal({
+  children,
+  open,
+  setOpen,
+  distributionGroups,
+}: Props) {
   const { confirm } = useDialog();
   const router = useRouter();
   const [routePolicyModal, setRoutePolicyModal] = useState(false);
@@ -116,6 +123,7 @@ export default function RouteModal({ children, open, setOpen }: Props) {
               await handleCreatePolicyPrompt(r);
               setOpen?.(false);
             }}
+            distributionGroups={distributionGroups}
           />
         )}
       </Modal>
@@ -139,13 +147,15 @@ type ModalProps = {
   peer?: Peer;
   exitNode?: boolean;
   isFirstExitNode?: boolean;
+  distributionGroups?: Group[];
 };
 
 export function RouteModalContent({
   onSuccess,
   peer,
   exitNode,
   isFirstExitNode = false,
+  distributionGroups,
 }: ModalProps) {
   const { createRoute } = useRoutes();
   const [tab, setTab] = useState(
@@ -207,7 +217,7 @@ export function RouteModalContent({
    * Distribution Groups
    */
   const [groups, setGroups, { getGroupsToUpdate }] = useGroupHelper({
-    initial: [],
+    initial: distributionGroups ?? [],
   });
 
   /**
@@ -721,17 +731,19 @@ export function RouteModalContent({
             />
 
             {exitNode && (
-                              <FancyToggleSwitch
-                  value={isForced}
-                  onChange={setIsForced}
-                  label={
-                    <>
-                      <IconDirectionSign size={15} />
-                      Auto Apply Route
-                    </>
-                  }
-                  helpText={"Automatically apply this exit node to your distribution groups. This requires NetBird client v0.55.0 or higher."}
-                />
+              <FancyToggleSwitch
+                value={isForced}
+                onChange={setIsForced}
+                label={
+                  <>
+                    <IconDirectionSign size={15} />
+                    Auto Apply Route
+                  </>
+                }
+                helpText={
+                  "Automatically apply this exit node to your distribution groups. This requires NetBird client v0.55.0 or higher."
+                }
+              />
             )}
 
             {!exitNode && (