fixed the hover behavior, so "rows per page" button behaves the same way as other buttons in the peers overview

.github/workflows/build_and_push.yml

@@ -2,7 +2,6 @@ name: build and push
 on:
   push:
     branches:
-      - "feature/**"
       - main
     tags:
       - "**"

docker/default.conf

@@ -1,3 +1,4 @@
+# simple server configuration to replace nginx's default
 server {
 	listen 80 default_server;
 	listen [::]:80 default_server;
@@ -6,14 +7,10 @@ server {
 
     location / {
       try_files $uri $uri.html $uri/ =404;
-      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
-      expires off;
    }
 
    error_page 404 /404.html;
    location = /404.html {
       internal;
-      add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
-      expires off;
    }
 }

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-lock.json

@@ -27,7 +27,6 @@
         "@tabler/icons-react": "^2.39.0",
         "@tanstack/match-sorter-utils": "^8.8.4",
         "@tanstack/react-table": "^8.10.7",
-        "@types/crypto-js": "^4.2.2",
         "@types/lodash": "^4.14.200",
         "@types/node": "20.10.6",
         "@types/react": "^18",
@@ -36,7 +35,6 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
         "cmdk": "^0.2.0",
-        "crypto-js": "^4.2.0",
         "date-fns": "^2.30.0",
         "dayjs": "^1.11.10",
         "eslint": "^8",
@@ -1663,11 +1661,6 @@
       "resolved": "https://registry.npmjs.org/@types/base64-js/-/base64-js-1.3.2.tgz",
       "integrity": "sha512-Q2Xn2/vQHRGLRXhQ5+BSLwhHkR3JVflxVKywH0Q6fVoAiUE8fFYL2pE5/l2ZiOiBDfA8qUqRnSxln4G/NFz1Sg=="
     },
-    "node_modules/@types/crypto-js": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz",
-      "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ=="
-    },
     "node_modules/@types/jquery": {
       "version": "3.5.29",
       "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.29.tgz",
@@ -2981,11 +2974,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/crypto-js": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
-      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
-    },
     "node_modules/css-mediaquery": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",

package.json

@@ -32,7 +32,6 @@
     "@tabler/icons-react": "^2.39.0",
     "@tanstack/match-sorter-utils": "^8.8.4",
     "@tanstack/react-table": "^8.10.7",
-    "@types/crypto-js": "^4.2.2",
     "@types/lodash": "^4.14.200",
     "@types/node": "20.10.6",
     "@types/react": "^18",
@@ -41,7 +40,6 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
-    "crypto-js": "^4.2.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
     "eslint": "^8",

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

@@ -5,12 +5,14 @@ import InlineLink from "@components/InlineLink";
 import Paragraph from "@components/Paragraph";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import useFetchApi from "@utils/api";
+import { isLocalDev, isNetBirdHosted } from "@utils/netbird";
 import { ExternalLinkIcon } from "lucide-react";
 import React from "react";
 import ActivityIcon from "@/assets/icons/ActivityIcon";
 import { ActivityEvent } from "@/interfaces/ActivityEvent";
 import PageContainer from "@/layouts/PageContainer";
 import ActivityTable from "@/modules/activity/ActivityTable";
+import { EventStreamingCard } from "@/modules/integrations/event-streaming/EventStreamingCard";
 
 export default function Activity() {
   const { data: events, isLoading } = useFetchApi<ActivityEvent[]>("/events");
@@ -48,6 +50,7 @@ export default function Activity() {
         </Paragraph>
       </div>
       <RestrictedAccess page={"Activity"}>
+        {(isLocalDev() || isNetBirdHosted()) && <EventStreamingCard />}
         <ActivityTable events={events} isLoading={isLoading} />
       </RestrictedAccess>
     </PageContainer>

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

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

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

@@ -0,0 +1,39 @@
+"use client";
+
+import { RestrictedAccess } from "@components/ui/RestrictedAccess";
+import { VerticalTabs } from "@components/VerticalTabs";
+import { FileText, FingerprintIcon } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import React, { useState } from "react";
+import PageContainer from "@/layouts/PageContainer";
+import EventStreamingTab from "@/modules/integrations/event-streaming/EventStreamingTab";
+import IdentityProviderTab from "@/modules/integrations/idp-sync/IdentityProviderTab";
+
+export default function Integrations() {
+  const searchParams = useSearchParams();
+  const currentTab = searchParams.get("tab");
+  const [tab, setTab] = useState(currentTab || "event-streaming");
+
+  return (
+    <PageContainer>
+      <VerticalTabs value={tab} onChange={setTab}>
+        <VerticalTabs.List>
+          <VerticalTabs.Trigger value="event-streaming">
+            <FileText size={14} />
+            Event Streaming
+          </VerticalTabs.Trigger>
+          <VerticalTabs.Trigger value="identity-provider">
+            <FingerprintIcon size={14} />
+            Identity Provider
+          </VerticalTabs.Trigger>
+        </VerticalTabs.List>
+        <RestrictedAccess page={"Integrations"}>
+          <div className={"border-l border-nb-gray-930 w-full"}>
+            <EventStreamingTab />
+            <IdentityProviderTab />
+          </div>
+        </RestrictedAccess>
+      </VerticalTabs>
+    </PageContainer>
+  );
+}

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

@@ -23,43 +23,33 @@ 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";
-import { isEmpty, trim } from "lodash";
+import { trim } from "lodash";
 import {
   Cpu,
-  FlagIcon,
   Globe,
   History,
-  LockIcon,
   MapPin,
   MonitorSmartphoneIcon,
-  NetworkIcon,
   PencilIcon,
   TerminalSquare,
 } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { toASCII } from "punycode";
 import React, { useMemo, useState } from "react";
-import Skeleton from "react-loading-skeleton";
 import { useSWRConfig } from "swr";
-import RoundedFlag from "@/assets/countries/RoundedFlag";
 import CircleIcon from "@/assets/icons/CircleIcon";
 import NetBirdIcon from "@/assets/icons/NetBirdIcon";
 import PeerIcon from "@/assets/icons/PeerIcon";
-import { useCountries } from "@/contexts/CountryProvider";
 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 { 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 +57,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>
@@ -132,9 +119,6 @@ function PeerOverview() {
     });
   };
 
-  const { isUser } = useLoggedInUser();
-  const hasExitNodes = useHasExitNodes(peer);
-
   return (
     <PageContainer>
       <RoutesProvider>
@@ -155,35 +139,33 @@ function PeerOverview() {
                   <CircleIcon
                     active={peer.connected}
                     size={12}
-                    className={"mb-[3px] shrink-0"}
+                    className={"mb-[3px]"}
                   />
                   <TextWithTooltip text={name} maxChars={30} />
 
-                  {!isUser && (
-                    <Modal
-                      open={showEditNameModal}
-                      onOpenChange={setShowEditNameModal}
-                    >
-                      <ModalTrigger>
-                        <div
-                          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"
-                          }
-                        >
-                          <PencilIcon size={16} />
-                        </div>
-                      </ModalTrigger>
-                      <EditNameModal
-                        onSuccess={(newName) => {
-                          setName(newName);
-                          setShowEditNameModal(false);
-                        }}
-                        peer={peer}
-                        initialName={name}
-                        key={showEditNameModal ? 1 : 0}
-                      />
-                    </Modal>
-                  )}
+                  <Modal
+                    open={showEditNameModal}
+                    onOpenChange={setShowEditNameModal}
+                  >
+                    <ModalTrigger>
+                      <div
+                        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"
+                        }
+                      >
+                        <PencilIcon size={16} />
+                      </div>
+                    </ModalTrigger>
+                    <EditNameModal
+                      onSuccess={(newName) => {
+                        setName(newName);
+                        setShowEditNameModal(false);
+                      }}
+                      peer={peer}
+                      initialName={name}
+                      key={showEditNameModal ? 1 : 0}
+                    />
+                  </Modal>
                 </h1>
                 <LoginExpiredBadge loginExpired={peer.login_expired} />
               </div>
@@ -205,7 +187,7 @@ function PeerOverview() {
                 variant={"primary"}
                 className={"w-full"}
                 onClick={() => updatePeer()}
-                disabled={!hasChanges || isUser}
+                disabled={!hasChanges}
               >
                 Save Changes
               </Button>
@@ -223,32 +205,18 @@ function PeerOverview() {
                       "flex gap-2 items-center !text-nb-gray-300 text-xs"
                     }
                   >
-                    {!peer.user_id ? (
-                      <>
-                        <>
-                          <IconInfoCircle size={14} />
-                          <span>
-                            Login expiration is disabled for all peers added
-                            with an setup-key.
-                          </span>
-                        </>
-                      </>
-                    ) : (
-                      <>
-                        <LockIcon size={14} />
-                        <span>
-                          {`You don't have the required permissions to update this
-                          setting.`}
-                        </span>
-                      </>
-                    )}
+                    <IconInfoCircle size={14} />
+                    <span>
+                      Login expiration is disabled for all peers added with an
+                      setup-key.
+                    </span>
                   </div>
                 }
                 className={"w-full block"}
-                disabled={!!peer.user_id && !isUser}
+                disabled={!!peer.user_id}
               >
                 <FancyToggleSwitch
-                  disabled={!peer.user_id || isUser}
+                  disabled={!peer.user_id}
                   value={loginExpiration}
                   onChange={setLoginExpiration}
                   label={
@@ -262,74 +230,33 @@ function PeerOverview() {
                   }
                 />
               </FullTooltip>
-              <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>
+              <FancyToggleSwitch
+                value={ssh}
+                onChange={(set) =>
+                  !set
+                    ? setSsh(false)
+                    : openSSHDialog().then((confirm) => setSsh(confirm))
                 }
-                interactive={false}
-                className={"w-full block"}
-                disabled={!isUser}
-              >
-                <FancyToggleSwitch
-                  value={ssh}
-                  disabled={isUser}
-                  onChange={(set) =>
-                    !set
-                      ? setSsh(false)
-                      : openSSHDialog().then((confirm) => setSsh(confirm))
-                  }
-                  label={
-                    <>
-                      <TerminalSquare size={16} />
-                      SSH Access
-                    </>
-                  }
-                  helpText={
-                    "Enable the SSH server on this peer to access the machine via an secure shell."
-                  }
-                />
-              </FullTooltip>
-
+                label={
+                  <>
+                    <TerminalSquare size={16} />
+                    SSH Access
+                  </>
+                }
+                helpText={
+                  "Enable the SSH server on this peer to access the machine via an secure shell."
+                }
+              />
               <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}
-                    peer={peer}
-                  />
-                </FullTooltip>
+                <PeerGroupSelector
+                  onChange={setSelectedGroups}
+                  values={selectedGroups}
+                  peer={peer}
+                />
               </div>
             </div>
           </div>
@@ -337,7 +264,7 @@ function PeerOverview() {
 
         <Separator />
 
-        {isLinux && !isUser ? (
+        {isLinux ? (
           <div className={"px-8 py-6"}>
             <div className={"max-w-6xl"}>
               <div className={"flex justify-between items-center"}>
@@ -349,8 +276,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>
@@ -365,18 +291,10 @@ function PeerOverview() {
 }
 
 function PeerInformationCard({ peer }: { peer: Peer }) {
-  const { isLoading, getRegionByPeer } = useCountries();
-
-  const countryText = useMemo(() => {
-    return getRegionByPeer(peer);
-  }, [getRegionByPeer, peer]);
-
   return (
     <Card>
       <Card.List>
         <Card.ListItem
-          copy
-          copyText={"NetBird IP-Address"}
           label={
             <>
               <MapPin size={16} />
@@ -387,20 +305,6 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
         />
 
         <Card.ListItem
-          copy
-          copyText={"Public IP-Address"}
-          label={
-            <>
-              <NetworkIcon size={16} />
-              Public IP-Address
-            </>
-          }
-          value={peer.connection_ip}
-        />
-
-        <Card.ListItem
-          copy
-          copyText={"Domain name"}
           label={
             <>
               <Globe size={16} />
@@ -409,10 +313,7 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
           }
           value={peer.dns_label}
         />
-
         <Card.ListItem
-          copy
-          copyText={"Hostname"}
           label={
             <>
               <MonitorSmartphoneIcon size={16} />
@@ -421,35 +322,6 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
           }
           value={peer.hostname}
         />
-
-        <Card.ListItem
-          label={
-            <>
-              <FlagIcon size={16} />
-              Region
-            </>
-          }
-          tooltip={false}
-          value={
-            isEmpty(peer.country_code) ? (
-              "Unknown"
-            ) : (
-              <>
-                {isLoading ? (
-                  <Skeleton width={140} />
-                ) : (
-                  <div className={"flex gap-2 items-center"}>
-                    <div className={"border-0 border-nb-gray-800 rounded-full"}>
-                      <RoundedFlag country={peer.country_code} size={12} />
-                    </div>
-                    {countryText}
-                  </div>
-                )}
-              </>
-            )
-          }
-        />
-
         <Card.ListItem
           label={
             <>
@@ -475,7 +347,6 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
                 ")"
           }
         />
-
         <Card.ListItem
           label={
             <>

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

@@ -6,39 +6,17 @@ import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
-import React, { lazy, Suspense, useEffect } from "react";
+import React, { lazy, Suspense } from "react";
 import PeerIcon from "@/assets/icons/PeerIcon";
-import { useGroups } from "@/contexts/GroupsProvider";
-import { useLoggedInUser, useUsers } from "@/contexts/UsersProvider";
+import { useUsers } from "@/contexts/UsersProvider";
 import { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
-import { SetupModalContent } from "@/modules/setup-netbird-modal/SetupModal";
 
 const PeersTable = lazy(() => import("@/modules/peers/PeersTable"));
 
 export default function Peers() {
-  const { permission } = useLoggedInUser();
-
-  return (
-    <PageContainer>
-      {permission?.dashboard_view === "blocked" ? (
-        <PeersBlockedView />
-      ) : (
-        <PeersView />
-      )}
-    </PageContainer>
-  );
-}
-
-function PeersView() {
   const { data: peers, isLoading } = useFetchApi<Peer[]>("/peers");
   const { users } = useUsers();
-  const { refresh } = useGroups();
-
-  useEffect(() => {
-    refresh();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
 
   const peersWithUser = peers?.map((peer) => {
     if (!users) return peer;
@@ -49,7 +27,7 @@ function PeersView() {
   });
 
   return (
-    <>
+    <PageContainer>
       <div className={"p-default py-6"}>
         <Breadcrumbs>
           <Breadcrumbs.Item
@@ -78,37 +56,6 @@ function PeersView() {
       <Suspense fallback={<SkeletonTable />}>
         <PeersTable isLoading={isLoading} peers={peersWithUser} />
       </Suspense>
-    </>
-  );
-}
-
-function PeersBlockedView() {
-  return (
-    <div className={"flex items-center justify-center flex-col"}>
-      <div className={"p-default py-6 max-w-3xl text-center"}>
-        <h1>Add new device to your network</h1>
-        <Paragraph className={"inline"}>
-          To get started, install NetBird and log in using your email account.
-          After that you should be connected. If you have further questions
-          check out our{" "}
-          <InlineLink
-            href={"https://docs.netbird.io/how-to/getting-started#installation"}
-            target={"_blank"}
-          >
-            Installation Guide
-            <ExternalLinkIcon size={12} />
-          </InlineLink>
-        </Paragraph>
-      </div>
-      <div className={"px-3 pt-1 pb-8 max-w-3xl w-full"}>
-        <div
-          className={
-            "rounded-md border border-nb-gray-900/70 grid w-full bg-nb-gray-930/40 stepper-bg-variant"
-          }
-        >
-          <SetupModalContent header={false} footer={false} />
-        </div>
-      </div>
-    </div>
+    </PageContainer>
   );
 }

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

@@ -48,7 +48,7 @@ export default function PostureChecksPage() {
           </Paragraph>
           <Paragraph>
             Learn more about
-            <InlineLink href={"https://docs.netbird.io/how-to/manage-posture-checks"} target={"_blank"}>
+            <InlineLink href={"#"} target={"_blank"}>
               Posture Checks
               <ExternalLinkIcon size={12} />
             </InlineLink>

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

@@ -2,35 +2,20 @@
 
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import { VerticalTabs } from "@components/VerticalTabs";
-import {
-  AlertOctagonIcon,
-  FolderGit2Icon,
-  LockIcon,
-  ShieldIcon,
-} from "lucide-react";
-import { useSearchParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import { AlertOctagonIcon, FolderGit2Icon, ShieldIcon } from "lucide-react";
+import React, { useState } from "react";
 import { useLoggedInUser } from "@/contexts/UsersProvider";
 import PageContainer from "@/layouts/PageContainer";
 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 PermissionsTab from "@/modules/settings/PermissionsTab";
 
 export default function NetBirdSettings() {
-  const queryParams = useSearchParams();
-  const queryTab = queryParams.get("tab");
-  const [tab, setTab] = useState(queryTab || "authentication");
+  const [tab, setTab] = useState("authentication");
   const { isOwner } = useLoggedInUser();
   const account = useAccount();
 
-  useEffect(() => {
-    if (queryTab) {
-      setTab(queryTab);
-    }
-  }, [queryTab]);
-
   return (
     <PageContainer>
       <VerticalTabs value={tab} onChange={setTab}>
@@ -43,10 +28,6 @@ export default function NetBirdSettings() {
             <FolderGit2Icon size={14} />
             Groups
           </VerticalTabs.Trigger>
-          <VerticalTabs.Trigger value="permissions">
-            <LockIcon size={14} />
-            Permissions
-          </VerticalTabs.Trigger>
           <VerticalTabs.Trigger value="danger-zone" disabled={!isOwner}>
             <AlertOctagonIcon size={14} />
             Danger zone
@@ -55,7 +36,6 @@ export default function NetBirdSettings() {
         <RestrictedAccess page={"Settings"}>
           <div className={"border-l border-nb-gray-930 w-full"}>
             {account && <AuthenticationTab account={account} />}
-            {account && <PermissionsTab account={account} />}
             {account && <GroupsTab account={account} />}
             {account && <DangerZoneTab account={account} />}
           </div>

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} />
   ) : (
@@ -60,7 +57,7 @@ function UserOverview({ user }: Props) {
   const router = useRouter();
   const userRequest = useApiCall<User>("/users");
   const { mutate } = useSWRConfig();
-  const { loggedInUser, isOwnerOrAdmin, isUser } = useLoggedInUser();
+  const { loggedInUser, isOwnerOrAdmin } = useLoggedInUser();
   const isLoggedInUser = loggedInUser ? loggedInUser?.id === user.id : false;
 
   const initialGroups = user.auto_groups;
@@ -107,7 +104,6 @@ function UserOverview({ user }: Props) {
           <Breadcrumbs.Item
             href={"/team"}
             label={"Team"}
-            disabled={isUser}
             icon={<TeamIcon size={13} />}
           />
 
@@ -121,7 +117,6 @@ function UserOverview({ user }: Props) {
             <Breadcrumbs.Item
               href={"/team/users"}
               label={"Users"}
-              disabled={isUser}
               icon={<User2 size={16} />}
             />
           )}
@@ -161,30 +156,28 @@ function UserOverview({ user }: Props) {
               </h1>
             </div>
           </div>
-          {!isUser && (
-            <div className={"flex gap-4"}>
-              <Button
-                variant={"default"}
-                className={"w-full"}
-                onClick={() => {
-                  user.is_service_user
-                    ? router.push("/team/service-users")
-                    : router.push("/team/users");
-                }}
-              >
-                Cancel
-              </Button>
+          <div className={"flex gap-4"}>
+            <Button
+              variant={"default"}
+              className={"w-full"}
+              onClick={() => {
+                user.is_service_user
+                  ? router.push("/team/service-users")
+                  : router.push("/team/users");
+              }}
+            >
+              Cancel
+            </Button>
 
-              <Button
-                variant={"primary"}
-                className={"w-full"}
-                disabled={!hasChanges}
-                onClick={save}
-              >
-                Save Changes
-              </Button>
-            </div>
-          )}
+            <Button
+              variant={"primary"}
+              className={"w-full"}
+              disabled={!hasChanges}
+              onClick={save}
+            >
+              Save Changes
+            </Button>
+          </div>
         </div>
 
         <div className={"flex gap-10 w-full mt-8 max-w-6xl"}>
@@ -197,7 +190,6 @@ function UserOverview({ user }: Props) {
                   Groups will be assigned to peers added by this user.
                 </HelpText>
                 <PeerGroupSelector
-                  disabled={isUser}
                   onChange={setSelectedGroups}
                   values={selectedGroups}
                 />

src/app/globals.css

@@ -64,8 +64,4 @@ p {
     display: table;
     position: relative;
     width: 100%;
-}
-
-.stepper-bg-variant .step-circle {
-    @apply !border-[#1d2024];
 }

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>
+  );
+};