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          
+          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,7 +53,7 @@
     "framer-motion": "^10.16.4",
     "ip-cidr": "^3.1.0",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.383.0",
+    "lucide-react": "^0.287.0",
     "next": "13.5.5",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
@@ -69,7 +67,6 @@
     "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",

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

@@ -23,7 +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 useRedirect from "@hooks/useRedirect";
 import { IconCloudLock, IconInfoCircle } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
 import dayjs from "dayjs";
@@ -58,8 +57,6 @@ import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 import type { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
-import { AddExitNodeButton } from "@/modules/exit-node/AddExitNodeButton";
-import { useHasExitNodes } from "@/modules/exit-node/useHasExitNodes";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 import AddRouteDropdownButton from "@/modules/peer/AddRouteDropdownButton";
 import PeerRoutesTable from "@/modules/peer/PeerRoutesTable";
@@ -67,11 +64,8 @@ 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 ? (
+  const { data: peer } = useFetchApi<Peer>("/peers/" + peerId);
+  return peer ? (
     <PeerProvider peer={peer}>
       <PeerOverview />
     </PeerProvider>
@@ -133,7 +127,6 @@ function PeerOverview() {
   };
 
   const { isUser } = useLoggedInUser();
-  const hasExitNodes = useHasExitNodes(peer);
 
   return (
     <PageContainer>
@@ -327,7 +320,6 @@ function PeerOverview() {
                     disabled={isUser}
                     onChange={setSelectedGroups}
                     values={selectedGroups}
-                    hideAllGroup={true}
                     peer={peer}
                   />
                 </FullTooltip>
@@ -350,8 +342,7 @@ function PeerOverview() {
                   </Paragraph>
                 </div>
                 <div className={"inline-flex gap-4 justify-end"}>
-                  <div className={"gap-4 flex"}>
-                    <AddExitNodeButton peer={peer} firstTime={!hasExitNodes} />
+                  <div>
                     <AddRouteDropdownButton />
                   </div>
                 </div>

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)/setup-keys/page.tsx

@@ -7,7 +7,7 @@ import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 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";
@@ -22,21 +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 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>

src/app/(dashboard)/team/user/page.tsx

@@ -10,7 +10,6 @@ import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import Separator from "@components/Separator";
 import FullScreenLoading from "@components/ui/FullScreenLoading";
-import useRedirect from "@hooks/useRedirect";
 import { IconCirclePlus, IconSettings2 } from "@tabler/icons-react";
 import useFetchApi, { useApiCall } from "@utils/api";
 import { generateColorFromString } from "@utils/helpers";
@@ -43,8 +42,6 @@ export default function UserPage() {
     return users?.find((u) => u.id === userId);
   }, [users, userId]);
 
-  useRedirect("/team/users", false, !userId);
-
   return !isLoading && user ? (
     <UserOverview user={user} />
   ) : (
@@ -187,7 +184,7 @@ function UserOverview({ user }: Props) {
           )}
         </div>
 
-        <div className={"flex gap-10 w-full mt-8 max-w-6xl items-start"}>
+        <div className={"flex gap-10 w-full mt-8 max-w-6xl"}>
           <UserInformationCard user={user} />
           <div className={"flex flex-col gap-8 w-1/2 "}>
             {!user.is_service_user && (
@@ -200,7 +197,6 @@ function UserOverview({ user }: Props) {
                   disabled={isUser}
                   onChange={setSelectedGroups}
                   values={selectedGroups}
-                  hideAllGroup={true}
                 />
               </div>
             )}
@@ -215,8 +211,6 @@ function UserOverview({ user }: Props) {
                 <UserRoleSelector
                   value={role}
                   onChange={setRole}
-                  hideOwner={user.is_service_user}
-                  currentUser={user}
                   disabled={
                     isLoggedInUser ||
                     !isOwnerOrAdmin ||
@@ -304,18 +298,15 @@ function UserInformationCard({ user }: { user: User }) {
 
         {!isServiceUser && (
           <>
-            {!user.is_current && user.role != Role.Owner && (
-              <Card.ListItem
-                label={
-                  <>
-                    <Ban size={16} />
-                    Block User
-                  </>
-                }
-                value={<UserBlockCell user={user} isUserPage={true} />}
-              />
-            )}
-
+            <Card.ListItem
+              label={
+                <>
+                  <Ban size={16} />
+                  Block User
+                </>
+              }
+              value={<UserBlockCell user={user} isUserPage={true} />}
+            />
             <Card.ListItem
               label={
                 <>

src/app/globals.css

@@ -68,9 +68,4 @@ p {
 
 .stepper-bg-variant .step-circle {
     @apply !border-[#1d2024];
-}
-
-.webkit-scroll{
-    -webkit-overflow-scrolling: touch;
-    -webkit-transform: translate3d(0, 0, 0);
 }

src/app/not-found.tsx

@@ -1,40 +1,14 @@
 "use client";
 
 import FullScreenLoading from "@components/ui/FullScreenLoading";
-import { useLocalStorage } from "@hooks/useLocalStorage";
-import { useRedirect } from "@hooks/useRedirect";
-import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
-type Props = {
-  url: string;
-  queryParams?: string;
-};
 export default function NotFound() {
-  const [mounted, setMounted] = useState(false);
-  const [tempQueryParams, setTempQueryParams] = useLocalStorage(
-    "netbird-query-params",
-    "",
-  );
-  const [queryParams, setQueryParams] = useState("");
-
+  const router = useRouter();
   useEffect(() => {
-    setQueryParams(tempQueryParams);
-    setTempQueryParams("");
-    setMounted(true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    router.push("/peers");
+  });
 
-  return mounted ? (
-    <Redirect
-      url={window?.location?.pathname || "/"}
-      queryParams={queryParams}
-    />
-  ) : (
-    <FullScreenLoading />
-  );
-}
-
-const Redirect = ({ url, queryParams }: Props) => {
-  useRedirect("/peers" + (queryParams && `?${queryParams}`));
   return <FullScreenLoading />;
-};
+}

src/app/page.tsx

@@ -1,41 +1,9 @@
 "use client";
 
 import FullScreenLoading from "@components/ui/FullScreenLoading";
-import { useLocalStorage } from "@hooks/useLocalStorage";
 import { useRedirect } from "@hooks/useRedirect";
-import { useEffect, useState } from "react";
-
-type Props = {
-  url: string;
-  queryParams?: string;
-};
 
 export default function Home() {
-  const [mounted, setMounted] = useState(false);
-  const [tempQueryParams, setTempQueryParams] = useLocalStorage(
-    "netbird-query-params",
-    "",
-  );
-  const [queryParams, setQueryParams] = useState("");
-
-  useEffect(() => {
-    setQueryParams(tempQueryParams);
-    setTempQueryParams("");
-    setMounted(true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return mounted ? (
-    <Redirect
-      url={window?.location?.pathname || "/"}
-      queryParams={queryParams}
-    />
-  ) : (
-    <FullScreenLoading />
-  );
-}
-
-const Redirect = ({ url, queryParams }: Props) => {
-  useRedirect(url == "/" ? "/peers" : url + (queryParams && `?${queryParams}`));
+  useRedirect("/peers");
   return <FullScreenLoading />;
-};
+}

src/assets/countries/CountryDERounded.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image";
+import * as React from "react";
+import deIcon from "@/assets/countries/de.svg";
+
+export const CountryDERounded = () => {
+  return (
+    <div
+      className={
+        "w-5 h-5 overflow-hidden rounded-full relative shadow-2xl border border-nb-gray-600 flex items-center justify-center"
+      }
+    >
+      <Image
+        src={deIcon}
+        alt={"de"}
+        fill={true}
+        className={"object-cover object-center"}
+      />
+    </div>
+  );
+};

src/assets/countries/CountryEURounded.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image";
+import * as React from "react";
+import euIcon from "@/assets/countries/eu.svg";
+
+export const CountryEURounded = () => {
+  return (
+    <div
+      className={
+        "w-5 h-5 overflow-hidden rounded-full relative shadow-2xl border border-nb-gray-600 flex items-center justify-center"
+      }
+    >
+      <Image
+        src={euIcon}
+        alt={"eu"}
+        fill={true}
+        className={"object-cover object-center shrink-0"}
+      />
+    </div>
+  );
+};

src/assets/countries/CountryJPRounded.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image";
+import * as React from "react";
+import jpIcon from "@/assets/countries/jp.svg";
+
+export const CountryJPRounded = () => {
+  return (
+    <div
+      className={
+        "w-5 h-5 overflow-hidden rounded-full relative shadow-2xl border border-nb-gray-600 flex items-center justify-center"
+      }
+    >
+      <Image
+        src={jpIcon}
+        alt={"eu"}
+        fill={true}
+        className={"object-cover object-center"}
+      />
+    </div>
+  );
+};

src/assets/countries/CountryUSRounded.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image";
+import * as React from "react";
+import usIcon from "@/assets/countries/us.svg";
+
+export const CountryUSRounded = () => {
+  return (
+    <div
+      className={
+        "w-5 h-5 overflow-hidden rounded-full relative shadow-2xl border border-nb-gray-600 flex items-center justify-center"
+      }
+    >
+      <Image
+        src={usIcon}
+        alt={"us"}
+        fill={true}
+        className={"object-cover object-center"}
+      />
+    </div>
+  );
+};

src/assets/countries/de.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="600" viewBox="0 0 5 3">
+	<desc>Flag of Germany</desc>
+	<rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/>
+	<rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/>
+	<rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/>
+</svg>

src/assets/countries/eu.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 810 540"><defs><g id="d"><g id="b"><path id="a" d="M0 0v1h.5z" transform="rotate(18 3.157 -.5)"/><use xlink:href="#a" transform="scale(-1 1)"/></g><g id="c"><use xlink:href="#b" transform="rotate(72)"/><use xlink:href="#b" transform="rotate(144)"/></g><use xlink:href="#c" transform="scale(-1 1)"/></g></defs><path fill="#039" d="M0 0h810v540H0z"/><g fill="#fc0" transform="matrix(30 0 0 30 405 270)"><use xlink:href="#d" y="-6"/><use xlink:href="#d" y="6"/><g id="e"><use xlink:href="#d" x="-6"/><use xlink:href="#d" transform="rotate(-144 -2.344 -2.11)"/><use xlink:href="#d" transform="rotate(144 -2.11 -2.344)"/><use xlink:href="#d" transform="rotate(72 -4.663 -2.076)"/><use xlink:href="#d" transform="rotate(72 -5.076 .534)"/></g><use xlink:href="#e" transform="scale(-1 1)"/></g></svg>

src/assets/countries/jp.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600">
+<rect fill="#fff" height="600" width="900"/>
+<circle fill="#bc002d" cx="450" cy="300" r="180"/>
+</svg>

src/assets/countries/us.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7410 3900"><path fill="#b22234" d="M0 0h7410v3900H0z"/><path d="M0 450h7410m0 600H0m0 600h7410m0 600H0m0 600h7410m0 600H0" stroke="#fff" stroke-width="300"/><path fill="#3c3b6e" d="M0 0h2964v2100H0z"/><g fill="#fff"><g id="d"><g id="c"><g id="e"><g id="b"><path id="a" d="M247 90l70.534 217.082-184.66-134.164h228.253L176.466 307.082z"/><use xlink:href="#a" y="420"/><use xlink:href="#a" y="840"/><use xlink:href="#a" y="1260"/></g><use xlink:href="#a" y="1680"/></g><use xlink:href="#b" x="247" y="210"/></g><use xlink:href="#c" x="494"/></g><use xlink:href="#d" x="988"/><use xlink:href="#c" x="1976"/><use xlink:href="#e" x="2470"/></g></svg>