Push to docker

.github/workflows/build_and_push.yml

@@ -4,6 +4,7 @@ on:
     branches:
       - "feature/**"
       - main
+      - debug
     tags:
       - "**"
   pull_request:
@@ -55,7 +56,7 @@ jobs:
         with:
           context: .
           file: docker/Dockerfile
-          push: ${{ github.event_name != 'pull_request' }}
+          push: true
           platforms: linux/amd64,linux/arm64,linux/arm
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

.github/workflows/codespell.yml

@@ -12,5 +12,4 @@ jobs:
         uses: codespell-project/actions-codespell@v2
         with:
           only_warn: 1
-          skip: package-lock.json,*.svg
-          ignore_words_list: mappin, allTime
+          skip: package-lock.json,*.svg

next.config.js

@@ -5,9 +5,6 @@ const nextConfig = {
     unoptimized: true,
   },
   reactStrictMode: false,
-  env: {
-    APP_ENV: process.env.APP_ENV || "production",
-  },
 };
 
 module.exports = nextConfig;

package.json

@@ -13,7 +13,7 @@
     "cypress:open": "cypress open"
   },
   "dependencies": {
-    "@axa-fr/react-oidc": "^7.22.18",
+    "@axa-fr/react-oidc": "^5.14.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
@@ -22,9 +22,8 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
@@ -38,7 +37,6 @@
     "@types/node": "20.10.6",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@types/react-window": "^1.8.8",
     "autoprefixer": "^10",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
@@ -55,8 +53,8 @@
     "framer-motion": "^10.16.4",
     "ip-cidr": "^3.1.0",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.460.0",
-    "next": "13.5.7",
+    "lucide-react": "^0.287.0",
+    "next": "13.5.5",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
     "react": "^18",
@@ -69,14 +67,13 @@
     "react-jwt": "^1.2.0",
     "react-loading-skeleton": "^3.3.1",
     "react-responsive": "^9.0.2",
-    "react-virtuoso": "^4.9.0",
     "swr": "^2.2.4",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5"
   },
   "devDependencies": {
-    "cypress": "^13.13.0",
+    "cypress": "^13.3.3",
     "postcss": "^8",
     "prettier": "3.0.3",
     "tailwindcss": "^3"

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

@@ -5,7 +5,6 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
-import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
@@ -21,9 +20,6 @@ const AccessControlTable = lazy(
 export default function AccessControlPage() {
   const { data: policies, isLoading } = useFetchApi<Policy[]>("/policies");
 
-  const { ref: headingRef, portalTarget } =
-    usePortalElement<HTMLHeadingElement>();
-
   return (
     <PageContainer>
       <GroupsProvider>
@@ -35,7 +31,12 @@ export default function AccessControlPage() {
               icon={<AccessControlIcon size={14} />}
             />
           </Breadcrumbs>
-          <h1 ref={headingRef}>Access Control Policies</h1>
+
+          <h1>
+            {policies && policies.length > 1
+              ? `${policies.length} Access Control Policies`
+              : "Access Control Policies"}
+          </h1>
           <Paragraph>
             Create rules to manage access in your network and define what peers
             can connect.
@@ -56,11 +57,7 @@ export default function AccessControlPage() {
         <RestrictedAccess page={"Access Control"}>
           <PoliciesProvider>
             <Suspense fallback={<SkeletonTable />}>
-              <AccessControlTable
-                isLoading={isLoading}
-                policies={policies}
-                headingTarget={portalTarget}
-              />
+              <AccessControlTable isLoading={isLoading} policies={policies} />
             </Suspense>
           </PoliciesProvider>
         </RestrictedAccess>

src/app/(dashboard)/activity/page.tsx

@@ -4,7 +4,6 @@ import Breadcrumbs from "@components/Breadcrumbs";
 import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
-import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
 import React from "react";
@@ -16,9 +15,6 @@ import ActivityTable from "@/modules/activity/ActivityTable";
 export default function Activity() {
   const { data: events, isLoading } = useFetchApi<ActivityEvent[]>("/events");
 
-  const { ref: headingRef, portalTarget } =
-    usePortalElement<HTMLHeadingElement>();
-
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -29,7 +25,11 @@ export default function Activity() {
             icon={<ActivityIcon size={13} />}
           />
         </Breadcrumbs>
-        <h1 ref={headingRef}>Activity Events</h1>
+        <h1>
+          {events && events.length > 1
+            ? `${events.length} Activity Events`
+            : "Activity Events"}
+        </h1>
         <Paragraph>
           Here you can see all the account and network activity events.
         </Paragraph>
@@ -48,11 +48,7 @@ export default function Activity() {
         </Paragraph>
       </div>
       <RestrictedAccess page={"Activity"}>
-        <ActivityTable
-          events={events}
-          isLoading={isLoading}
-          headingTarget={portalTarget}
-        />
+        <ActivityTable events={events} isLoading={isLoading} />
       </RestrictedAccess>
     </PageContainer>
   );

src/app/(dashboard)/dns/nameservers/page.tsx

@@ -5,7 +5,6 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
-import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon, ServerIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
@@ -21,9 +20,6 @@ export default function NameServers() {
   const { data: nameserverGroups, isLoading } =
     useFetchApi<NameserverGroup[]>("/dns/nameservers");
 
-  const { ref: headingRef, portalTarget } =
-    usePortalElement<HTMLHeadingElement>();
-
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -40,7 +36,11 @@ export default function NameServers() {
             icon={<ServerIcon size={13} />}
           />
         </Breadcrumbs>
-        <h1 ref={headingRef}>Nameservers</h1>
+        <h1>
+          {nameserverGroups && nameserverGroups.length > 1
+            ? `${nameserverGroups.length} Nameservers`
+            : "Nameservers"}
+        </h1>
         <Paragraph>
           Add nameservers for domain name resolution in your NetBird network.
         </Paragraph>
@@ -62,7 +62,6 @@ export default function NameServers() {
           <NameserverGroupTable
             nameserverGroups={nameserverGroups}
             isLoading={isLoading}
-            headingTarget={portalTarget}
           />
         </Suspense>
       </RestrictedAccess>

src/app/(dashboard)/dns/settings/page.tsx

@@ -14,24 +14,17 @@ import { IconSettings2 } from "@tabler/icons-react";
 import useFetchApi, { useApiCall } from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
 import React from "react";
-import Skeleton from "react-loading-skeleton";
 import { useSWRConfig } from "swr";
 import DNSIcon from "@/assets/icons/DNSIcon";
 import { useHasChanges } from "@/hooks/useHasChanges";
-import { Group } from "@/interfaces/Group";
 import { NameserverSettings } from "@/interfaces/NameserverSettings";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
-import { useGroupIdsToGroups } from "@/modules/groups/useGroupIdsToGroups";
 
 export default function NameServerSettings() {
   const { data: settings, isLoading } =
     useFetchApi<NameserverSettings>("/dns/settings");
 
-  const initialDNSGroups = useGroupIdsToGroups(
-    settings?.disabled_management_groups,
-  );
-
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -62,16 +55,10 @@ export default function NameServerSettings() {
           in our documentation.
         </Paragraph>
         <RestrictedAccess page={"DNS Settings"}>
-          {!isLoading && initialDNSGroups !== undefined ? (
-            <SettingDisabledManagementGroups initialGroups={initialDNSGroups} />
-          ) : (
-            <div>
-              <Skeleton
-                width={"100%"}
-                className={"mt-8 max-w-xl"}
-                height={240}
-              />
-            </div>
+          {!isLoading && (
+            <SettingDisabledManagementGroups
+              initial={settings?.disabled_management_groups}
+            />
           )}
         </RestrictedAccess>
       </div>
@@ -80,16 +67,16 @@ export default function NameServerSettings() {
 }
 
 const SettingDisabledManagementGroups = ({
-  initialGroups,
+  initial,
 }: {
-  initialGroups: Group[];
+  initial: string[] | undefined;
 }) => {
   const settingRequest = useApiCall<NameserverSettings>("/dns/settings");
   const { mutate } = useSWRConfig();
 
   const [selectedGroups, setSelectedGroups, { save: saveGroups }] =
     useGroupHelper({
-      initial: initialGroups,
+      initial: initial || [],
     });
 
   const { hasChanges, updateRef: updateChangesRef } = useHasChanges([
@@ -121,7 +108,6 @@ const SettingDisabledManagementGroups = ({
           Peers in these groups will require manual domain name resolution
         </HelpText>
         <PeerGroupSelector
-          dataCy={"dns-groups-selector"}
           onChange={setSelectedGroups}
           values={selectedGroups}
         />
@@ -136,7 +122,6 @@ const SettingDisabledManagementGroups = ({
           size={"sm"}
           onClick={saveSettings}
           disabled={!hasChanges}
-          data-cy={"save-changes"}
         >
           Save Changes
         </Button>

src/app/(dashboard)/network-routes/page.tsx

@@ -5,7 +5,6 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
-import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
@@ -14,7 +13,6 @@ import PeersProvider from "@/contexts/PeersProvider";
 import RoutesProvider from "@/contexts/RoutesProvider";
 import { Route } from "@/interfaces/Route";
 import PageContainer from "@/layouts/PageContainer";
-import { NetworkRoutesDeprecationInfo } from "@/modules/networks/misc/NetworkRoutesDeprecationInfo";
 import useGroupedRoutes from "@/modules/route-group/useGroupedRoutes";
 
 const NetworkRoutesTable = lazy(
@@ -25,9 +23,6 @@ export default function NetworkRoutes() {
   const { data: routes, isLoading } = useFetchApi<Route[]>("/routes");
   const groupedRoutes = useGroupedRoutes({ routes });
 
-  const { ref: headingRef, portalTarget } =
-    usePortalElement<HTMLHeadingElement>();
-
   return (
     <PageContainer>
       <RoutesProvider>
@@ -40,8 +35,10 @@ export default function NetworkRoutes() {
                 icon={<NetworkRoutesIcon size={13} />}
               />
             </Breadcrumbs>
-            <h1 ref={headingRef}>
-              Network Routes <NetworkRoutesDeprecationInfo size={18} />
+            <h1>
+              {groupedRoutes && groupedRoutes.length > 1
+                ? `${groupedRoutes.length} Network Routes`
+                : "Network Routes"}
             </h1>
             <Paragraph>
               Network routes allow you to access other networks like LANs and
@@ -68,7 +65,6 @@ export default function NetworkRoutes() {
                 isLoading={isLoading}
                 groupedRoutes={groupedRoutes}
                 routes={routes}
-                headingTarget={portalTarget}
               />
             </Suspense>
           </RestrictedAccess>

src/app/(dashboard)/network/layout.tsx

@@ -1,8 +0,0 @@
-import { globalMetaTitle } from "@utils/meta";
-import type { Metadata } from "next";
-import BlankLayout from "@/layouts/BlankLayout";
-
-export const metadata: Metadata = {
-  title: `Network - Networks - ${globalMetaTitle}`,
-};
-export default BlankLayout;

src/app/(dashboard)/network/page.tsx

@@ -1,229 +0,0 @@
-"use client";
-
-import Breadcrumbs from "@components/Breadcrumbs";
-import Card from "@components/Card";
-import FullTooltip from "@components/FullTooltip";
-import InlineLink from "@components/InlineLink";
-import Separator from "@components/Separator";
-import FullScreenLoading from "@components/ui/FullScreenLoading";
-import useRedirect from "@hooks/useRedirect";
-import useFetchApi from "@utils/api";
-import { cn } from "@utils/helpers";
-import {
-  ArrowUpRightIcon,
-  HelpCircle,
-  PencilLineIcon,
-  ServerIcon,
-  ShieldCheckIcon,
-  ShieldXIcon,
-} from "lucide-react";
-import { useSearchParams } from "next/navigation";
-import React, { useMemo, useState } from "react";
-import { useSWRConfig } from "swr";
-import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
-import { useLoggedInUser } from "@/contexts/UsersProvider";
-import { Network } from "@/interfaces/Network";
-import PageContainer from "@/layouts/PageContainer";
-import { NetworkInformationSquare } from "@/modules/networks/misc/NetworkInformationSquare";
-import NetworkModal from "@/modules/networks/NetworkModal";
-import { NetworkProvider } from "@/modules/networks/NetworkProvider";
-import { ResourcesSection } from "@/modules/networks/resources/ResourcesSection";
-import { NetworkRoutingPeersSection } from "@/modules/networks/routing-peers/NetworkRoutingPeersSection";
-
-export default function NetworkDetailPage() {
-  const queryParameter = useSearchParams();
-  const networkId = queryParameter.get("id");
-  const { data: network, isLoading } = useFetchApi<Network>(
-    `/networks/${networkId}`,
-    true,
-  );
-
-  useRedirect("/networks", false, !networkId);
-
-  return network && !isLoading ? (
-    <NetworkOverview network={network} />
-  ) : (
-    <FullScreenLoading />
-  );
-}
-
-function NetworkOverview({ network }: Readonly<{ network: Network }>) {
-  const { isUser } = useLoggedInUser();
-  const [networkModal, setNetworkModal] = useState(false);
-  const { mutate } = useSWRConfig();
-
-  const isActive = !!(
-    network?.routing_peers_count && network.routing_peers_count > 0
-  );
-
-  return (
-    <PageContainer>
-      <NetworkProvider network={network}>
-        <div className={"p-default py-6 mb-4"}>
-          <Breadcrumbs>
-            <Breadcrumbs.Item
-              href={"/networks"}
-              label={"Networks"}
-              disabled={isUser}
-              icon={<NetworkRoutesIcon size={13} />}
-            />
-            <Breadcrumbs.Item
-              href={"/network"}
-              label={network.name}
-              active={true}
-            />
-          </Breadcrumbs>
-
-          <div className={"flex justify-between max-w-6xl"}>
-            <div
-              className={cn(
-                "flex items-center",
-                !network.description && "gap-2",
-              )}
-            >
-              <NetworkInformationSquare
-                name={network.name}
-                active={isActive}
-                size={"lg"}
-                description={network.description}
-              />
-              <button
-                className={
-                  "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
-                }
-                onClick={() => setNetworkModal(true)}
-              >
-                <PencilLineIcon size={18} />
-              </button>
-              <NetworkModal
-                open={networkModal}
-                setOpen={setNetworkModal}
-                onUpdated={() => {
-                  mutate(`/networks/${network.id}`);
-                }}
-                network={network}
-              />
-            </div>
-          </div>
-
-          <div className={"flex gap-10 w-full mt-8 max-w-6xl items-start"}>
-            <NetworkInformationCard network={network} />
-          </div>
-        </div>
-
-        <Separator />
-        <ResourcesSection network={network} />
-        <div className={"h-3"} />
-        <Separator />
-        <NetworkRoutingPeersSection network={network} />
-      </NetworkProvider>
-    </PageContainer>
-  );
-}
-
-function NetworkInformationCard({ network }: Readonly<{ network: Network }>) {
-  const isHighlyAvailable = !!(
-    network?.routing_peers_count && network?.routing_peers_count >= 2
-  );
-
-  const disabledText = useMemo(
-    () => (
-      <>
-        High availability is currently{" "}
-        <span className={"text-yellow-400 font-medium"}>inactive</span> for this
-        network.
-      </>
-    ),
-    [],
-  );
-
-  const enabledText = useMemo(
-    () => (
-      <>
-        High availability is{" "}
-        <span className={"text-green-500 font-medium"}>active</span> for this
-        network.
-      </>
-    ),
-    [],
-  );
-
-  const policyCount = network.policies?.length ?? 0;
-
-  return (
-    <Card>
-      <Card.List>
-        <Card.ListItem
-          tooltip={false}
-          label={
-            <>
-              <ServerIcon size={16} />
-              High Availability
-            </>
-          }
-          value={
-            <FullTooltip
-              interactive={false}
-              content={
-                <div className={"max-w-xs text-xs"}>
-                  {isHighlyAvailable ? enabledText : disabledText}
-                  {isHighlyAvailable ? (
-                    <div className={"inline-flex mt-2"}>
-                      You can add more routing peers to increase the
-                      availability of this network.
-                    </div>
-                  ) : (
-                    <div className={"inline-flex mt-2"}>
-                      Go ahead and add more routing peers or groups with routing
-                      peers to enable high availability for this network.
-                    </div>
-                  )}
-                </div>
-              }
-            >
-              <div
-                className={cn(
-                  "flex gap-2.5 items-center text-nb-gray-300 text-sm cursor-help",
-                )}
-              >
-                <span
-                  className={cn(
-                    "h-2 w-2 rounded-full",
-                    !isHighlyAvailable ? "bg-yellow-400" : "bg-green-500",
-                  )}
-                ></span>
-                {isHighlyAvailable ? "Active" : "Inactive"}
-                <HelpCircle size={12} />
-              </div>
-            </FullTooltip>
-          }
-        />
-        <Card.ListItem
-          tooltip={false}
-          label={
-            policyCount > 0 ? (
-              <>
-                <ShieldCheckIcon size={16} className={"text-green-500"} />
-                {policyCount}{" "}
-                {policyCount === 1 ? "Active Policy" : "Active Policies"}
-              </>
-            ) : (
-              <>
-                <ShieldXIcon size={16} className={"text-red-500"} />
-                No Active Policies
-              </>
-            )
-          }
-          value={
-            policyCount > 0 ? (
-              <InlineLink href={"/access-control"}>
-                Go to Policies
-                <ArrowUpRightIcon size={14} />
-              </InlineLink>
-            ) : null
-          }
-        />
-      </Card.List>
-    </Card>
-  );
-}

src/app/(dashboard)/networks/layout.tsx

@@ -1,8 +0,0 @@
-import { globalMetaTitle } from "@utils/meta";
-import type { Metadata } from "next";
-import BlankLayout from "@/layouts/BlankLayout";
-
-export const metadata: Metadata = {
-  title: `Networks - ${globalMetaTitle}`,
-};
-export default BlankLayout;

src/app/(dashboard)/networks/page.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import Breadcrumbs from "@components/Breadcrumbs";
-import InlineLink from "@components/InlineLink";
-import Paragraph from "@components/Paragraph";
-import SkeletonTable from "@components/skeletons/SkeletonTable";
-import { RestrictedAccess } from "@components/ui/RestrictedAccess";
-import { usePortalElement } from "@hooks/usePortalElement";
-import useFetchApi from "@utils/api";
-import { ExternalLinkIcon } from "lucide-react";
-import React, { Suspense } from "react";
-import NetworkRoutesIcon from "@/assets/icons/NetworkRoutesIcon";
-import { Network } from "@/interfaces/Network";
-import PageContainer from "@/layouts/PageContainer";
-import NetworksTable from "@/modules/networks/table/NetworksTable";
-
-export default function Networks() {
-  const { data: networks, isLoading } = useFetchApi<Network[]>("/networks");
-  const { ref: headingRef, portalTarget } =
-    usePortalElement<HTMLHeadingElement>();
-
-  return (
-    <PageContainer>
-      <div className={"p-default py-6"}>
-        <Breadcrumbs>
-          <Breadcrumbs.Item
-            href={"/networks"}
-            label={"Networks"}
-            icon={<NetworkRoutesIcon size={13} />}
-          />
-        </Breadcrumbs>
-        <h1 ref={headingRef}>Networks</h1>
-        <Paragraph>
-          Networks allow you to access other resources like LANs and VPCs
-          without installing NetBird on every device.
-        </Paragraph>
-        <Paragraph>
-          Learn more about
-          <InlineLink href={"https://docs.netbird.io/how-to/networks-concept"} target={"_blank"}>
-            Networks
-            <ExternalLinkIcon size={12} />
-          </InlineLink>
-          in our documentation.
-        </Paragraph>
-      </div>
-
-      <RestrictedAccess>
-        <Suspense fallback={<SkeletonTable />}>
-          <NetworksTable
-            data={networks}
-            isLoading={isLoading}
-            headingTarget={portalTarget}
-          />
-        </Suspense>
-      </RestrictedAccess>
-    </PageContainer>
-  );
-}

src/app/(dashboard)/peer/page.tsx

@@ -23,8 +23,6 @@ import Separator from "@components/Separator";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
 import LoginExpiredBadge from "@components/ui/LoginExpiredBadge";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
-import { getOperatingSystem } from "@hooks/useOperatingSystem";
-import useRedirect from "@hooks/useRedirect";
 import { IconCloudLock, IconInfoCircle } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
 import dayjs from "dayjs";
@@ -55,22 +53,20 @@ import PeerProvider, { usePeer } from "@/contexts/PeerProvider";
 import RoutesProvider from "@/contexts/RoutesProvider";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { useHasChanges } from "@/hooks/useHasChanges";
+import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import type { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
-import { AccessiblePeersSection } from "@/modules/peer/AccessiblePeersSection";
-import { PeerNetworkRoutesSection } from "@/modules/peer/PeerNetworkRoutesSection";
+import AddRouteDropdownButton from "@/modules/peer/AddRouteDropdownButton";
+import PeerRoutesTable from "@/modules/peer/PeerRoutesTable";
 
 export default function PeerPage() {
   const queryParameter = useSearchParams();
   const peerId = queryParameter.get("id");
-  const { data: peer, isLoading } = useFetchApi<Peer>("/peers/" + peerId, true);
-
-  useRedirect("/peers", false, !peerId);
-
-  return peer && !isLoading ? (
-    <PeerProvider peer={peer} key={peerId}>
+  const { data: peer } = useFetchApi<Peer>("/peers/" + peerId);
+  return peer ? (
+    <PeerProvider peer={peer}>
       <PeerOverview />
     </PeerProvider>
   ) : (
@@ -297,38 +293,64 @@ function PeerOverview() {
                 />
               </FullTooltip>
 
-              {!isUser && (
-                <div>
-                  <Label>Assigned Groups</Label>
-                  <HelpText>
-                    Use groups to control what this peer can access.
-                  </HelpText>
+              <div>
+                <Label>Assigned Groups</Label>
+                <HelpText>
+                  Use groups to control what this peer can access.
+                </HelpText>
+                <FullTooltip
+                  content={
+                    <div
+                      className={
+                        "flex gap-2 items-center !text-nb-gray-300 text-xs"
+                      }
+                    >
+                      <LockIcon size={14} />
+                      <span>
+                        {`You don't have the required permissions to update this
+                          setting.`}
+                      </span>
+                    </div>
+                  }
+                  interactive={false}
+                  className={"w-full block"}
+                  disabled={!isUser}
+                >
                   <PeerGroupSelector
                     disabled={isUser}
                     onChange={setSelectedGroups}
                     values={selectedGroups}
-                    hideAllGroup={true}
                     peer={peer}
                   />
-                </div>
-              )}
+                </FullTooltip>
+              </div>
             </div>
           </div>
         </div>
 
-        {isLinux && !isUser ? (
-          <>
-            <Separator />
-            <PeerNetworkRoutesSection peer={peer} />
-          </>
-        ) : null}
+        <Separator />
 
-        {peer?.id && (
-          <>
-            <Separator />
-            <AccessiblePeersSection peerID={peer.id} />
-          </>
-        )}
+        {isLinux && !isUser ? (
+          <div className={"px-8 py-6"}>
+            <div className={"max-w-6xl"}>
+              <div className={"flex justify-between items-center"}>
+                <div>
+                  <h2>Network Routes</h2>
+                  <Paragraph>
+                    Access other networks without installing NetBird on every
+                    resource.
+                  </Paragraph>
+                </div>
+                <div className={"inline-flex gap-4 justify-end"}>
+                  <div>
+                    <AddRouteDropdownButton />
+                  </div>
+                </div>
+              </div>
+              <PeerRoutesTable peer={peer} />
+            </div>
+          </div>
+        ) : null}
       </RoutesProvider>
     </PageContainer>
   );

src/app/(dashboard)/peers/page.tsx

@@ -4,12 +4,13 @@ import Breadcrumbs from "@components/Breadcrumbs";
 import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
-import { usePortalElement } from "@hooks/usePortalElement";
+import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
-import React, { lazy, Suspense } from "react";
+import React, { lazy, Suspense, useEffect } from "react";
 import PeerIcon from "@/assets/icons/PeerIcon";
-import PeersProvider, { usePeers } from "@/contexts/PeersProvider";
+import { useGroups } from "@/contexts/GroupsProvider";
 import { useLoggedInUser, useUsers } from "@/contexts/UsersProvider";
+import { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
 import { SetupModalContent } from "@/modules/setup-netbird-modal/SetupModal";
 
@@ -20,22 +21,24 @@ export default function Peers() {
 
   return (
     <PageContainer>
-      {permission.dashboard_view === "blocked" ? (
+      {permission?.dashboard_view === "blocked" ? (
         <PeersBlockedView />
       ) : (
-        <PeersProvider>
-          <PeersView />
-        </PeersProvider>
+        <PeersView />
       )}
     </PageContainer>
   );
 }
 
 function PeersView() {
-  const { peers, isLoading } = usePeers();
+  const { data: peers, isLoading } = useFetchApi<Peer[]>("/peers");
   const { users } = useUsers();
-  const { ref: headingRef, portalTarget } =
-    usePortalElement<HTMLHeadingElement>();
+  const { refresh } = useGroups();
+
+  useEffect(() => {
+    refresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const peersWithUser = peers?.map((peer) => {
     if (!users) return peer;
@@ -55,7 +58,7 @@ function PeersView() {
             icon={<PeerIcon size={13} />}
           />
         </Breadcrumbs>
-        <h1 ref={headingRef}>Peers</h1>
+        <h1>{peers && peers.length > 1 ? `${peers.length} Peers` : "Peers"}</h1>
         <Paragraph>
           A list of all machines and devices connected to your private network.
           Use this view to manage peers.
@@ -73,11 +76,7 @@ function PeersView() {
         </Paragraph>
       </div>
       <Suspense fallback={<SkeletonTable />}>
-        <PeersTable
-          isLoading={isLoading}
-          peers={peersWithUser}
-          headingTarget={portalTarget}
-        />
+        <PeersTable isLoading={isLoading} peers={peersWithUser} />
       </Suspense>
     </>
   );

src/app/(dashboard)/posture-checks/page.tsx

@@ -5,7 +5,6 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
-import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon, ShieldCheck } from "lucide-react";
 import React, { lazy, Suspense } from "react";
@@ -22,9 +21,6 @@ export default function PostureChecksPage() {
   const { data: postureChecks, isLoading } =
     useFetchApi<PostureCheck[]>("/posture-checks");
 
-  const { ref: headingRef, portalTarget } =
-    usePortalElement<HTMLHeadingElement>();
-
   return (
     <PageContainer>
       <GroupsProvider>
@@ -42,16 +38,17 @@ export default function PostureChecksPage() {
               icon={<ShieldCheck size={15} />}
             />
           </Breadcrumbs>
-          <h1 ref={headingRef}>Posture Checks</h1>
+          <h1>
+            {postureChecks && postureChecks.length > 1
+              ? `${postureChecks.length} Posture Checks`
+              : "Posture Checks"}
+          </h1>
           <Paragraph>
             Use posture checks to further restrict access in your network.
           </Paragraph>
           <Paragraph>
             Learn more about
-            <InlineLink
-              href={"https://docs.netbird.io/how-to/manage-posture-checks"}
-              target={"_blank"}
-            >
+            <InlineLink href={"https://docs.netbird.io/how-to/manage-posture-checks"} target={"_blank"}>
               Posture Checks
               <ExternalLinkIcon size={12} />
             </InlineLink>
@@ -63,7 +60,6 @@ export default function PostureChecksPage() {
           <PoliciesProvider>
             <Suspense fallback={<SkeletonTable />}>
               <PostureCheckTable
-                headingTarget={portalTarget}
                 isLoading={isLoading}
                 postureChecks={postureChecks}
               />

src/app/(dashboard)/settings/page.tsx

@@ -6,7 +6,6 @@ import {
   AlertOctagonIcon,
   FolderGit2Icon,
   LockIcon,
-  NetworkIcon,
   ShieldIcon,
 } from "lucide-react";
 import { useSearchParams } from "next/navigation";
@@ -17,7 +16,6 @@ import { useAccount } from "@/modules/account/useAccount";
 import AuthenticationTab from "@/modules/settings/AuthenticationTab";
 import DangerZoneTab from "@/modules/settings/DangerZoneTab";
 import GroupsTab from "@/modules/settings/GroupsTab";
-import NetworkSettingsTab from "@/modules/settings/NetworkSettingsTab";
 import PermissionsTab from "@/modules/settings/PermissionsTab";
 
 export default function NetBirdSettings() {
@@ -49,10 +47,6 @@ export default function NetBirdSettings() {
             <LockIcon size={14} />
             Permissions
           </VerticalTabs.Trigger>
-          <VerticalTabs.Trigger value="networks">
-            <NetworkIcon size={14} />
-            Networks
-          </VerticalTabs.Trigger>
           <VerticalTabs.Trigger value="danger-zone" disabled={!isOwner}>
             <AlertOctagonIcon size={14} />
             Danger zone
@@ -63,7 +57,6 @@ export default function NetBirdSettings() {
             {account && <AuthenticationTab account={account} />}
             {account && <PermissionsTab account={account} />}
             {account && <GroupsTab account={account} />}
-            {account && <NetworkSettingsTab account={account} />}
             {account && <DangerZoneTab account={account} />}
           </div>
         </RestrictedAccess>

src/app/(dashboard)/setup-keys/page.tsx

@@ -5,10 +5,9 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
-import { usePortalElement } from "@hooks/usePortalElement";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
-import React, { lazy, Suspense, useMemo } from "react";
+import React, { lazy, Suspense } from "react";
 import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
 import { useGroups } from "@/contexts/GroupsProvider";
 import { Group } from "@/interfaces/Group";
@@ -23,24 +22,16 @@ export default function SetupKeys() {
   const { data: setupKeys, isLoading } = useFetchApi<SetupKey[]>("/setup-keys");
   const { groups } = useGroups();
 
-  const setupKeysWithGroups = useMemo(() => {
-    if (!setupKeys) return [];
-    return setupKeys?.map((setupKey) => {
-      if (!setupKey.auto_groups) return setupKey;
-      if (!groups) return setupKey;
-      return {
-        ...setupKey,
-        groups: setupKey.auto_groups
-          ?.map((group) => {
-            return groups.find((g) => g.id === group) || undefined;
-          })
-          .filter((group) => group !== undefined) as Group[],
-      };
-    });
-  }, [setupKeys, groups]);
-
-  const { ref: headingRef, portalTarget } =
-    usePortalElement<HTMLHeadingElement>();
+  const setupKeysWithGroups = setupKeys?.map((setupKey) => {
+    if (!setupKey.auto_groups) return setupKey;
+    if (!groups) return setupKey;
+    return {
+      ...setupKey,
+      groups: setupKey.auto_groups.map((group) => {
+        return groups.find((g) => g.id === group) || undefined;
+      }) as Group[] | undefined,
+    };
+  });
 
   return (
     <PageContainer>
@@ -52,7 +43,11 @@ export default function SetupKeys() {
             icon={<SetupKeysIcon size={13} />}
           />
         </Breadcrumbs>
-        <h1 ref={headingRef}>Setup Keys</h1>
+        <h1>
+          {setupKeys && setupKeys.length > 1
+            ? `${setupKeys.length} Setup Keys`
+            : "Setup Keys"}
+        </h1>
         <Paragraph>
           Setup keys are pre-authentication keys that allow to register new
           machines in your network.
@@ -74,7 +69,6 @@ export default function SetupKeys() {
       <RestrictedAccess page={"Setup Keys"}>
         <Suspense fallback={<SkeletonTable />}>
           <SetupKeysTable
-            headingTarget={portalTarget}
             setupKeys={setupKeysWithGroups}
             isLoading={isLoading}
           />

src/app/(dashboard)/team/service-users/page.tsx

@@ -5,7 +5,6 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
-import { usePortalElement } from "@hooks/usePortalElement";
 import { IconSettings2 } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
@@ -23,9 +22,6 @@ export default function ServiceUsers() {
     "/users?service_user=true",
   );
 
-  const { ref: headingRef, portalTarget } =
-    usePortalElement<HTMLHeadingElement>();
-
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -42,7 +38,11 @@ export default function ServiceUsers() {
             icon={<IconSettings2 size={17} />}
           />
         </Breadcrumbs>
-        <h1 ref={headingRef}>Service Users</h1>
+        <h1>
+          {users && users.length > 1
+            ? `${users.length} Service Users`
+            : "Service Users"}
+        </h1>
         <Paragraph>
           Use service users to create API tokens and avoid losing automated
           access.
@@ -61,11 +61,7 @@ export default function ServiceUsers() {
       </div>
       <RestrictedAccess page={"Service Users"}>
         <Suspense fallback={<SkeletonTable />}>
-          <ServiceUsersTable
-            users={users}
-            isLoading={isLoading}
-            headingTarget={portalTarget}
-          />
+          <ServiceUsersTable users={users} isLoading={isLoading} />
         </Suspense>
       </RestrictedAccess>
     </PageContainer>