Sync with cloud (#491)

implements a "Sync with cloud" functionality that includes various UI improvements, code refactoring, and component extractions. The changes focus on enhancing the user interface, improving code organization, and adding new features for remote access and activity tracking.

- Refactors inline components into reusable shared components
- Adds new activity tracking for group operations
- Updates remote access configuration and UI components
- Enhances styling and layout for better user experience

.github/workflows/build_and_push.yml

@@ -2,6 +2,7 @@ name: build and push
 on:
   push:
     branches:
+      - "feature/**"
       - main
     tags:
       - "**"
@@ -27,6 +28,33 @@ jobs:
 
       - run: echo '{}' > .local-config.json
 
+      - name: Download IronRDP release TS files
+        uses: robinraju/release-downloader@v1.7
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          repository: netbirdio/IronRDP
+          latest: true
+          fileName: "*.ts"
+          out-file-path: 'public/ironrdp-pkg'
+
+      - name: Download IronRDP release JS files
+        uses: robinraju/release-downloader@v1.7
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          repository: netbirdio/IronRDP
+          latest: true
+          fileName: "*.js"
+          out-file-path: 'public/ironrdp-pkg'
+
+      - name: Download IronRDP release WASM file
+        uses: robinraju/release-downloader@v1.7
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          repository: netbirdio/IronRDP
+          latest: true
+          fileName: "ironrdp_web_bg.wasm"
+          out-file-path: 'public/ironrdp-pkg'
+
       - name: Build
         run: npm run build
       -
@@ -43,7 +71,6 @@ jobs:
           images: ${{ env.IMAGE_NAME }}
       -
         name: Login to DockerHub
-        if: github.event_name != 'pull_request'
         uses: docker/login-action@v2
         with:
           username: ${{ secrets.NB_DOCKER_USER }}
@@ -54,7 +81,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,4 +12,5 @@ jobs:
         uses: codespell-project/actions-codespell@v2
         with:
           only_warn: 1
-          skip: package-lock.json,*.svg
+          skip: package-lock.json,*.svg
+          ignore_words_list: mappin, allTime

.gitignore

@@ -41,3 +41,8 @@ next-env.d.ts
 .configs/.staging-config.json
 .configs/.temp-config.json
 .configs
+
+/public/ironrdp-pkg/
+/public/netbird.wasm
+.idea
+src/.local-config*

CONTRIBUTOR_LICENSE_AGREEMENT.md

@@ -0,0 +1,64 @@
+##  Contributor License Agreement
+
+This Contributor License Agreement (referred to as the "Agreement") is entered into by the individual 
+submitting this Agreement and NetBird GmbH, c/o Max-Beer-Straße 2-4 Münzstraße 12 10178 Berlin, Germany, 
+referred to as "NetBird" (collectively, the "Parties"). The Agreement outlines the terms and conditions 
+under which NetBird may utilize software contributions provided by the Contributor for inclusion in 
+its software development projects. By submitting this Agreement, the Contributor confirms their acceptance 
+of the terms and conditions outlined below. The Contributor further represents that they are authorized to 
+complete this process as described herein.
+
+
+## 1 Preamble
+In order to clarify the IP Rights situation with regard to Contributions from any person or entity, NetBird 
+must have a contributor license agreement on file to be signed by each Contributor, containing the license 
+terms below. This license serves as protection for both the Contributor as well as NetBird and its software users; 
+it does not change Contributor’s rights to use his/her own Contributions for any other purpose.
+
+## 2 Definitions
+2.1 “IP Rights” shall mean all industrial and intellectual property rights, whether registered or not registered, whether created by Contributor or acquired by Contributor from third parties, and similar rights, including (but not limited to) semiconductor property rights, design rights, copyrights (including in the form of database rights and rights to software), all neighbouring rights (Leistungsschutzrechte), trademarks, service marks, titles, internet domain names, trade names and other labelling rights, rights deriving from corresponding applications and registrations of such rights as well as any licenses (Nutzungsrechte) under and entitlements to any such intellectual and industrial property rights.
+
+2.2 "Contribution" shall mean any original work of authorship, including any modifications or additions to an existing work, that is or previously has been intentionally Submitted by Contributor to NetBird for inclusion in, or documentation of any Work. 
+
+2.3 "Contributor" shall mean the copyright owner or legal entity authorized by the copyright owner that is concluding this Agreement with NetBird. For legal entities, the entity making a Contribution and all other entities that control, are controlled by, or are under common control with that entity are considered to be a single Contributor. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+
+2.4 "Submitted" shall mean any form of electronic, verbal, or written communication sent to NetBird or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, NetBird for the purpose of discussing and improving the Work, but excluding communication that is marked or otherwise designated in writing by Contributor as "Not a Contribution".
+
+2.5 "Work" means any of the products owned or managed by NetBird, in particular, but not exclusively, software.
+
+## 3 Licenses 
+3.1 Subject to the terms and conditions of this agreement, Contributor hereby grants to NetBird and to recipients of software distributed by NetBird a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable license to reproduce by any means and in any form, in whole or in part, permanently or temporarily, the Contributions (including loading, displaying, executing, transmitting or storing works for the purpose of executing and processing data or transferring them to video, audio and other data carriers), including the right to distribute, display and present such Contributions and make them available to the public (e.g. via the internet) and to transmit and display such Contributions by any means. The license also includes the right to modify, translate, adapt, edit and otherwise alter the Contributions and to use these results in the same manner as the original Contributions and derivative works. Except for licenses in patents acc. to Sec. 3, such license refers to any IP Rights in the Contributions and derivative works. The Contributor acknowledges that NetBird is not required to credit them by name for their Contribution and agrees to waive any moral rights associated with their Contribution in relation to NetBird or its sublicensees.
+
+3.2 Subject to the terms and conditions of this agreement, Contributor hereby grants to NetBird and to recipients of software distributed by NetBird a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license in the Contributions to make, have made, use, sell, offer to sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by the Contributor which are necessarily infringed by Contributor‘s Contribution(s) alone or by combination of Contributor’s Contribution(s) with the Work to which such Contribution(s) was Submitted. 
+
+3.3 NetBird hereby accepts such licenses. 
+
+## 4 Contributor’s Representations
+4.1 Contributor represents that Contributor is legally entitled to grant the above license. If Contributor’s employer has IP Rights to Contributor’s Contributions, Contributor represent that he/she has received permission to make Contributions on behalf of such employer, that such employer has waived such IP Rights to the Contributions of Contributor to NetBird, or that such employer has executed a separate contributor license agreement with NetBird.
+
+4.2 Contributor represents that any Contribution is his/her original creation. 
+
+4.3 Contributor represents to his/her best knowledge that any Contribution does not violate any third party IP Rights.
+
+4.4 Contributor represents that any Contribution submission includes complete details of any third-party license or other restriction (including, but not limited to, related patents and trademarks) of which Contributor is personally aware and which are associated with any part of the Contribution.
+
+4.5 The Contributor represents that their Contribution does not include any work distributed under a copyleft license.
+
+## 5 Information obligation
+Contributor agrees to notify NetBird of any facts or circumstances of which Contributor become aware that would make these representations inaccurate in any respect.
+
+## 6 Submission of Third-Party works
+Should Contributor wish to submit work that is not Contributor’s original creation, Contributor may submit it to NetBird separately from any Contribution, identifying the complete details of its source and of any license or other restriction (including, but not limited to, related patents, trademarks, and license agreements) of which Contributor are personally aware, and conspicuously marking the work as "Submitted on behalf of a third-party: [named here]".
+
+## 7 No Consideration
+Unless compensation is mandatory under statutory law, no compensation for any license under this agreement shall be payable. 
+
+## 8 Final Provisions
+8.1 Laws. This Agreement is governed by the laws of the Federal Republic of Germany. 
+
+8.2 Venue. Place of jurisdiction shall, to the extent legally permissible, be Berlin, Germany. 
+
+8.3 Severability. If any provision in this agreement is unlawful, invalid or ineffective, it shall not affect the enforceability or effectiveness of the remainder of this agreement. The parties agree to replace any unlawful, invalid or ineffective provision with a provision that comes as close as possible to the commercial intent and purpose of the original provision. This section also applies accordingly to any gaps in the contract. 
+
+8.4 Variations. Any variations, amendments or supplements to this Agreement must be in writing. This also applies to any variation of this Section 8.4.
+

config.json

@@ -12,5 +12,6 @@
   "tokenSource": "$NETBIRD_TOKEN_SOURCE",
   "dragQueryParams": "$NETBIRD_DRAG_QUERY_PARAMS",
   "hotjarTrackID": "$NETBIRD_HOTJAR_TRACK_ID",
-  "googleAnalyticsID": "$NETBIRD_GOOGLE_ANALYTICS_ID"
+  "googleAnalyticsID": "$NETBIRD_GOOGLE_ANALYTICS_ID",
+  "googleTagManagerID": "$NETBIRD_GOOGLE_TAG_MANAGER_ID"
 }

docker/default.conf

@@ -1,16 +1,23 @@
-# simple server configuration to replace nginx's default
 server {
 	listen 80 default_server;
 	listen [::]:80 default_server;
 
     root /usr/share/nginx/html;
+    location = /netbird.wasm {
+        root /usr/share/nginx/html;
+        default_type application/wasm;
+    }
 
     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;
    }
 }

docker/init_react_envs.sh

@@ -58,13 +58,14 @@ export NETBIRD_MGMT_API_ENDPOINT=$(echo $NETBIRD_MGMT_API_ENDPOINT | sed -E 's/(
 export NETBIRD_MGMT_GRPC_API_ENDPOINT=${NETBIRD_MGMT_GRPC_API_ENDPOINT}
 export NETBIRD_HOTJAR_TRACK_ID=${NETBIRD_HOTJAR_TRACK_ID}
 export NETBIRD_GOOGLE_ANALYTICS_ID=${NETBIRD_GOOGLE_ANALYTICS_ID}
+export NETBIRD_GOOGLE_TAG_MANAGER_ID=${NETBIRD_GOOGLE_TAG_MANAGER_ID}
 export NETBIRD_TOKEN_SOURCE=${NETBIRD_TOKEN_SOURCE:-accessToken}
 export NETBIRD_DRAG_QUERY_PARAMS=${NETBIRD_DRAG_QUERY_PARAMS:-false}
 
 echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"
 
 # replace ENVs in the config
-ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$NETBIRD_GOOGLE_ANALYTICS_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE \$\$NETBIRD_DRAG_QUERY_PARAMS"
+ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$NETBIRD_GOOGLE_ANALYTICS_ID \$\$NETBIRD_GOOGLE_TAG_MANAGER_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE \$\$NETBIRD_DRAG_QUERY_PARAMS"
 
 OIDC_TRUSTED_DOMAINS="/usr/share/nginx/html/OidcTrustedDomains.js"
 envsubst "$ENV_STR" < "$OIDC_TRUSTED_DOMAINS".tmpl > "$OIDC_TRUSTED_DOMAINS"

docker/nginx.conf

@@ -101,6 +101,7 @@ http {
     application/rss+xml
     application/vnd.geo+json
     application/vnd.ms-fontobject
+    application/wasm
     application/x-font-ttf
     application/x-web-app-manifest+json
     application/xhtml+xml

next.config.js

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

package.json

@@ -13,17 +13,19 @@
     "cypress:open": "cypress open"
   },
   "dependencies": {
-    "@axa-fr/react-oidc": "^5.14.0",
+    "@axa-fr/react-oidc": "^7.22.18",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.1.4",
     "@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.0.5",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@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",
@@ -32,32 +34,39 @@
     "@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",
     "@types/react-dom": "^18",
+    "@types/react-window": "^1.8.8",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
     "autoprefixer": "^10",
+    "chart.js": "^4.4.8",
+    "chroma-js": "^3.1.2",
     "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",
-    "eslint-config-next": "13.5.5",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "flowbite": "^1.8.1",
     "flowbite-react": "^0.6.4",
     "framer-motion": "^10.16.4",
     "ip-cidr": "^3.1.0",
+    "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.287.0",
-    "next": "13.5.5",
+    "lucide-react": "^0.481.0",
+    "next": "^14.2.28",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
-    "react": "^18",
+    "react": "^18.3.1",
     "react-day-picker": "^8.9.1",
-    "react-dom": "^18",
+    "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",
     "react-hot-toast": "^2.4.1",
     "react-hotjar": "^6.2.0",
@@ -65,13 +74,19 @@
     "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",
+    "timescape": "^0.7.1",
     "typescript": "^5"
   },
   "devDependencies": {
-    "cypress": "^13.3.3",
+    "@faker-js/faker": "^9.5.1",
+    "@types/chroma-js": "^3.1.1",
+    "@types/js-cookie": "^3.0.6",
+    "eslint-config-next": "^14.2.28",
+    "cypress": "^13.13.0",
     "postcss": "^8",
     "prettier": "3.0.3",
     "tailwindcss": "^3"

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

@@ -0,0 +1,10 @@
+"use client";
+
+import FullScreenLoading from "@components/ui/FullScreenLoading";
+import { useRedirect } from "@hooks/useRedirect";
+import React from "react";
+
+export default function Redirect() {
+  useRedirect("/events/audit");
+  return <FullScreenLoading height={"auto"} />;
+}

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

@@ -5,11 +5,13 @@ 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";
 import AccessControlIcon from "@/assets/icons/AccessControlIcon";
 import GroupsProvider from "@/contexts/GroupsProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
 import PoliciesProvider from "@/contexts/PoliciesProvider";
 import { Policy } from "@/interfaces/Policy";
 import PageContainer from "@/layouts/PageContainer";
@@ -18,8 +20,13 @@ const AccessControlTable = lazy(
   () => import("@/modules/access-control/table/AccessControlTable"),
 );
 export default function AccessControlPage() {
+  const { permission } = usePermissions();
+
   const { data: policies, isLoading } = useFetchApi<Policy[]>("/policies");
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <GroupsProvider>
@@ -31,12 +38,7 @@ export default function AccessControlPage() {
               icon={<AccessControlIcon size={14} />}
             />
           </Breadcrumbs>
-
-          <h1>
-            {policies && policies.length > 1
-              ? `${policies.length} Access Control Policies`
-              : "Access Control Policies"}
-          </h1>
+          <h1 ref={headingRef}>Access Control Policies</h1>
           <Paragraph>
             Create rules to manage access in your network and define what peers
             can connect.
@@ -54,10 +56,17 @@ export default function AccessControlPage() {
           </Paragraph>
         </div>
 
-        <RestrictedAccess page={"Access Control"}>
+        <RestrictedAccess
+          page={"Access Control"}
+          hasAccess={permission.policies.read}
+        >
           <PoliciesProvider>
             <Suspense fallback={<SkeletonTable />}>
-              <AccessControlTable isLoading={isLoading} policies={policies} />
+              <AccessControlTable
+                isLoading={isLoading}
+                policies={policies}
+                headingTarget={portalTarget}
+              />
             </Suspense>
           </PoliciesProvider>
         </RestrictedAccess>

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

@@ -5,10 +5,12 @@ 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";
 import DNSIcon from "@/assets/icons/DNSIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
 import { NameserverGroup } from "@/interfaces/Nameserver";
 import PageContainer from "@/layouts/PageContainer";
 
@@ -17,9 +19,14 @@ const NameserverGroupTable = lazy(
 );
 
 export default function NameServers() {
+  const { permission } = usePermissions();
+
   const { data: nameserverGroups, isLoading } =
     useFetchApi<NameserverGroup[]>("/dns/nameservers");
 
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
+
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -36,11 +43,7 @@ export default function NameServers() {
             icon={<ServerIcon size={13} />}
           />
         </Breadcrumbs>
-        <h1>
-          {nameserverGroups && nameserverGroups.length > 1
-            ? `${nameserverGroups.length} Nameservers`
-            : "Nameservers"}
-        </h1>
+        <h1 ref={headingRef}>Nameservers</h1>
         <Paragraph>
           Add nameservers for domain name resolution in your NetBird network.
         </Paragraph>
@@ -57,11 +60,15 @@ export default function NameServers() {
         </Paragraph>
       </div>
 
-      <RestrictedAccess page={"Nameservers"}>
+      <RestrictedAccess
+        page={"Nameservers"}
+        hasAccess={permission.nameservers.read}
+      >
         <Suspense fallback={<SkeletonTable />}>
           <NameserverGroupTable
             nameserverGroups={nameserverGroups}
             isLoading={isLoading}
+            headingTarget={portalTarget}
           />
         </Suspense>
       </RestrictedAccess>

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

@@ -14,17 +14,27 @@ 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 { usePermissions } from "@/contexts/PermissionsProvider";
 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 { permission } = usePermissions();
+
   const { data: settings, isLoading } =
     useFetchApi<NameserverSettings>("/dns/settings");
 
+  const initialDNSGroups = useGroupIdsToGroups(
+    settings?.disabled_management_groups,
+  );
+
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
@@ -54,11 +64,17 @@ export default function NameServerSettings() {
           </InlineLink>
           in our documentation.
         </Paragraph>
-        <RestrictedAccess page={"DNS Settings"}>
-          {!isLoading && (
-            <SettingDisabledManagementGroups
-              initial={settings?.disabled_management_groups}
-            />
+        <RestrictedAccess page={"DNS Settings"} hasAccess={permission.dns.read}>
+          {!isLoading && initialDNSGroups !== undefined ? (
+            <SettingDisabledManagementGroups initialGroups={initialDNSGroups} />
+          ) : (
+            <div>
+              <Skeleton
+                width={"100%"}
+                className={"mt-8 max-w-xl"}
+                height={240}
+              />
+            </div>
           )}
         </RestrictedAccess>
       </div>
@@ -67,16 +83,17 @@ export default function NameServerSettings() {
 }
 
 const SettingDisabledManagementGroups = ({
-  initial,
+  initialGroups,
 }: {
-  initial: string[] | undefined;
+  initialGroups: Group[];
 }) => {
   const settingRequest = useApiCall<NameserverSettings>("/dns/settings");
   const { mutate } = useSWRConfig();
+  const { permission } = usePermissions();
 
   const [selectedGroups, setSelectedGroups, { save: saveGroups }] =
     useGroupHelper({
-      initial: initial || [],
+      initial: initialGroups,
     });
 
   const { hasChanges, updateRef: updateChangesRef } = useHasChanges([
@@ -108,8 +125,10 @@ const SettingDisabledManagementGroups = ({
           Peers in these groups will require manual domain name resolution
         </HelpText>
         <PeerGroupSelector
+          dataCy={"dns-groups-selector"}
           onChange={setSelectedGroups}
           values={selectedGroups}
+          disabled={!permission.dns.update}
         />
       </div>
       <div
@@ -121,7 +140,8 @@ const SettingDisabledManagementGroups = ({
           variant={"primary"}
           size={"sm"}
           onClick={saveSettings}
-          disabled={!hasChanges}
+          disabled={!hasChanges || !permission.dns.update}
+          data-cy={"save-changes"}
         >
           Save Changes
         </Button>

src/app/(dashboard)/events/audit/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: `Audit Events - Activity - ${globalMetaTitle}`,
+};
+export default BlankLayout;

src/app/(dashboard)/events/audit/page.tsx

@@ -4,54 +4,60 @@ 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 { isLocalDev, isNetBirdHosted } from "@utils/netbird";
-import { ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon, LogsIcon } from "lucide-react";
 import React from "react";
 import ActivityIcon from "@/assets/icons/ActivityIcon";
+import { usePermissions } from "@/contexts/PermissionsProvider";
 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");
+  const { permission } = usePermissions();
+
+  const { data: events, isLoading } =
+    useFetchApi<ActivityEvent[]>("/events/audit");
+
+  const { ref: headingRef, portalTarget } =
+    usePortalElement<HTMLHeadingElement>();
 
   return (
     <PageContainer>
       <div className={"p-default py-6"}>
         <Breadcrumbs>
           <Breadcrumbs.Item
-            href={"/activity"}
             label={"Activity"}
+            disabled={true}
             icon={<ActivityIcon size={13} />}
           />
+          <Breadcrumbs.Item
+            href={"/events/audit"}
+            label={"Audit Events"}
+            icon={<LogsIcon size={18} />}
+          />
         </Breadcrumbs>
-        <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>
+        <h1 ref={headingRef}>Audit Events</h1>
+        <Paragraph>Here you can see all the audit activity events.</Paragraph>
         <Paragraph>
           Learn more about{" "}
           <InlineLink
-            href={
-              "https://docs.netbird.io/how-to/monitor-system-and-network-activity"
-            }
+            href={"https://docs.netbird.io/how-to/audit-events-logging"}
             target={"_blank"}
           >
-            Activity Events
+            Audit Events
             <ExternalLinkIcon size={12} />
           </InlineLink>
           in our documentation.
         </Paragraph>
       </div>
-      <RestrictedAccess page={"Activity"}>
-        {(isLocalDev() || isNetBirdHosted()) && <EventStreamingCard />}
-        <ActivityTable events={events} isLoading={isLoading} />
+      <RestrictedAccess page={"Activity"} hasAccess={permission.events.read}>
+        <ActivityTable
+          events={events}
+          isLoading={isLoading}
+          headingTarget={portalTarget}
+        />
       </RestrictedAccess>
     </PageContainer>
   );