Fix an issue of creating duplicate groups in the access control and network routes modal when group does not exist (#328)

* Rename Access Control "Rule" to Access Control "Policy"

* Show the correct modal for Access Control

.eslintrc.json

@@ -0,0 +1,13 @@
+{
+  "extends": ["next/core-web-vitals","prettier"],
+  "plugins": ["simple-import-sort"],
+  "rules": {
+    "simple-import-sort/imports": [
+      "warn",
+      {
+        "groups": [["^\\u0000", "^@?\\w", "^[^.]", "^\\."]]
+      }
+    ],
+    "simple-import-sort/exports": "warn"
+  }
+}

.github/workflows/build_and_push.yml

@@ -7,6 +7,9 @@ on:
       - "**"
   pull_request:
 
+env:
+  IMAGE_NAME: netbirdio/dashboard
+
 jobs:
   build_n_push:
     runs-on: ubuntu-latest
@@ -16,15 +19,16 @@ jobs:
       - name: setup-node
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
           cache: 'npm'
 
-      - name: Install dependecies
+      - name: Install dependencies
         run: npm install
 
+      - run: echo '{}' > .local-config.json
+
       - name: Build 
-        # skiping fail on warning for now
-        run: CI=false npm run build
+        run: npm run build
       - 
         name: Set up QEMU
         uses: docker/setup-qemu-action@v2
@@ -36,14 +40,14 @@ jobs:
         id: meta
         uses: docker/metadata-action@v4
         with:
-          images: wiretrustee/dashboard
+          images: ${{ env.IMAGE_NAME }}
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
         uses: docker/login-action@v2
         with:
-          username: ${{ secrets.DOCKER_USER }}
-          password: ${{ secrets.DOCKER_TOKEN }}
+          username: ${{ secrets.NB_DOCKER_USER }}
+          password: ${{ secrets.NB_DOCKER_TOKEN }}
       -
         name: Docker build and push
         uses: docker/build-push-action@v3
@@ -53,4 +57,4 @@ jobs:
           push: ${{ github.event_name != 'pull_request' }}
           platforms: linux/amd64,linux/arm64,linux/arm
           tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/codespell.yml

@@ -0,0 +1,15 @@
+name: Codespell
+on: [pull_request]
+
+jobs:
+  check:
+    name: Check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: codespell
+        uses: codespell-project/actions-codespell@v2
+        with:
+          only_warn: 1
+          skip: package-lock.json,*.svg

.gitignore

@@ -2,30 +2,42 @@
 
 # dependencies
 /node_modules
-/node_modules.bkp
 /.pnp
 .pnp.js
 
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
+/out
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-src/auth_config.json
-.idea
-.eslintcache
-src/.local-config*.json
-/public/OidcServiceWorker.js
-/public/OidcTrustedDomains.js
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# config
+.local-config.json
+.configs/.local-config.zitadel.json
+.configs/.staging-config.json
+.configs/.temp-config.json
+.configs

AUTHORS

@@ -1,2 +1,3 @@
 Mikhail Bragin (https://github.com/braginini)
 Maycon Santos (https://github.com/mlsmaycon)
+Wiretrustee UG (haftungsbeschränkt)

LICENSE

@@ -1,6 +1,6 @@
 BSD 3-Clause License
 
-Copyright (c) 2021 Wiretrustee AUTHORS
+Copyright (c) 2024 Wiretrustee UG (haftungsbeschränkt) & AUTHORS
 
 Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 

README.md

@@ -1,4 +1,4 @@
-# NetBird dashboard
+# NetBird Dashboard
 
 This project is the UI for NetBird's Management service.
 
@@ -17,15 +17,15 @@ The dashboard makes it possible to:
 - define access controls
 
 ## Some Screenshots
-<img src="./media/auth.png" alt="auth"/>
-<img src="./media/peers.png" alt="peers"/>
-<img src="./media/add-peer.png" alt="add-peer"/>
+<img src="./src/assets/screenshots/peers.png" alt="peers"/>
+<img src="./src/assets/screenshots/add-peer.png" alt="add-peer"/>
 
 
 ## Technologies Used
 
+- NextJS
 - ReactJS
-- AntD UI framework
+- Tailwind CSS
 - Auth0
 - Nginx
 - Docker
@@ -38,28 +38,28 @@ Auth0 so far is the only 3rd party dependency that can't be really self-hosted.
 
 1. Install [Docker](https://docs.docker.com/get-docker/)
 2. Register [Auth0](https://auth0.com/) account
-3. Running Wiretrustee UI Dashboard requires the following Auth0 environmental variables to be set (see docker command below):
+3. Running NetBird UI Dashboard requires the following Auth0 environmental variables to be set (see docker command below):
 
    `AUTH0_DOMAIN` `AUTH0_CLIENT_ID` `AUTH0_AUDIENCE`
 
    To obtain these, please use [Auth0 React SDK Guide](https://auth0.com/docs/quickstart/spa/react/01-login#configure-auth0) up until "Configure Allowed Web Origins"
 
-4. Wiretrustee UI Dashboard uses Wiretrustee Management Service HTTP API, so setting `NETBIRD_MGMT_API_ENDPOINT` is required. Most likely it will be `http://localhost:33071` if you are hosting Management API on the same server.
+4. NetBird UI Dashboard uses NetBirds Management Service HTTP API, so setting `NETBIRD_MGMT_API_ENDPOINT` is required. Most likely it will be `http://localhost:33071` if you are hosting Management API on the same server.
 5. Run docker container without SSL (Let's Encrypt):
 
    ```shell
-   docker run -d --name wiretrustee-dashboard \
+   docker run -d --name netbird-dashboard \
      --rm -p 80:80 -p 443:443 \
      -e AUTH0_DOMAIN=<SET YOUR AUTH DOMAIN> \
      -e AUTH0_CLIENT_ID=<SET YOUR CLIENT ID> \
      -e AUTH0_AUDIENCE=<SET YOUR AUDIENCE> \
      -e NETBIRD_MGMT_API_ENDPOINT=<SET YOUR MANAGEMETN API URL> \
-     wiretrustee/dashboard:main
+     netbirdio/dashboard:main
    ```
 6. Run docker container with SSL (Let's Encrypt):
 
    ```shell
-   docker run -d --name wiretrustee-dashboard \
+   docker run -d --name netbird-dashboard \
      --rm -p 80:80 -p 443:443 \
      -e NGINX_SSL_PORT=443 \
      -e LETSENCRYPT_DOMAIN=<YOUR PUBLIC DOMAIN> \
@@ -68,11 +68,26 @@ Auth0 so far is the only 3rd party dependency that can't be really self-hosted.
      -e AUTH0_CLIENT_ID=<SET YOUR CLEITN ID> \
      -e AUTH0_AUDIENCE=<SET YOUR AUDIENCE> \
      -e NETBIRD_MGMT_API_ENDPOINT=<SET YOUR MANAGEMETN API URL> \
-     wiretrustee/dashboard:main
+     netbirdio/dashboard:main
    ```
 
 ## How to run local development
-1. Install node 16
-2. create and update the `src/.local-config.json` file. This file should contain values to be replaced from `src/config.json`
-3. run `npm install`
-4. run `npm run start dev`
+
+1. Install [Node](https://nodejs.org/)
+2. Create and update the `.local-config.json` file. This file should contain values to be replaced from `config.json`
+3. Run `npm install` to install dependencies
+4. Run `npm run dev` to start the development server
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing by modifying the code inside `src/..`  
+The page auto-updates as you edit the file.
+
+## How to migrate from old dashboard (v1) 
+
+The new dashboard comes with a new docker image `netbirdio/dashboard:main`.  
+To migrate from the old dashboard (v1) `wiretrustee/dashboard:main` to the new one, please follow the steps below.
+
+1. Stop the dashboard container `docker compose down dashboard`
+2. Replace the docker image name in your `docker-compose.yml` with `netbirdio/dashboard:main`
+3. Recreate the dashboard container `docker compose up -d --force-recreate dashboard`

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/utils/helpers"
+  }
+}

config.json

@@ -5,11 +5,12 @@
   "authClientSecret": "$AUTH_CLIENT_SECRET",
   "authScopesSupported": "$AUTH_SUPPORTED_SCOPES",
   "authAudience": "$AUTH_AUDIENCE",
-
   "apiOrigin": "$NETBIRD_MGMT_API_ENDPOINT",
   "grpcApiOrigin": "$NETBIRD_MGMT_GRPC_API_ENDPOINT",
-  "hotjarTrackID": "$NETBIRD_HOTJAR_TRACK_ID",
   "redirectURI": "$AUTH_REDIRECT_URI",
   "silentRedirectURI": "$AUTH_SILENT_REDIRECT_URI",
-  "tokenSource": "$NETBIRD_TOKEN_SOURCE"
+  "tokenSource": "$NETBIRD_TOKEN_SOURCE",
+  "dragQueryParams": "$NETBIRD_DRAG_QUERY_PARAMS",
+  "hotjarTrackID": "$NETBIRD_HOTJAR_TRACK_ID",
+  "googleAnalyticsID": "$NETBIRD_GOOGLE_ANALYTICS_ID"
 }

cypress.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:3000",
+  },
+  component: {
+    devServer: {
+      framework: "next",
+      bundler: "webpack",
+    },
+  },
+  viewportWidth: 1920,
+  viewportHeight: 1080,
+});

cypress/e2e/test.cy.ts

@@ -0,0 +1,13 @@
+describe("Click all tabs in peer modal", () => {
+  it("passes", () => {
+    cy.visit("/install");
+    cy.get("div").contains("Linux").click();
+    cy.get("[data-cy=copy-to-clipboard]").click();
+    cy.get("div").contains("Windows").click();
+    cy.get("[data-cy=copy-to-clipboard]").click();
+    cy.get("div").contains("Android").click();
+    cy.get("[data-cy=copy-to-clipboard]").click();
+    cy.get("div").contains("Docker").click();
+    cy.get("[data-cy=copy-to-clipboard]").click();
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "baseUrl": "http://localhost:3000",
+    "types": ["cypress", "node"],
+  },
+  "include": ["**/*.ts"]
+}

docker/Dockerfile

@@ -21,4 +21,4 @@ RUN chmod +x /usr/local/init_react_envs.sh
 # configure supervisor
 COPY docker/supervisord.conf /etc/supervisord.conf
 # copy build files
-COPY build/ /usr/share/nginx/html/
+COPY out/ /usr/share/nginx/html/

docker/README.md

@@ -1,20 +1,20 @@
-# Wiretrustee Dashboard
-Wiretrustee Dashboard is a the Wiretrustee Managemenet server UI. It allow users to signin, view setup keys and manage peers. This image is **not ready** for production use.
+# NetBird Dashboard
+NetBird Dashboard is NetBirds Management server UI. It allows users to signin, view setup keys and manage peers. This image is **not ready** for production use.
 ## Tags
 ```latest``` ```vX.X.X``` not available yet.
 
-```main``` builded on every PR being merged to the repository
+```main``` built on every PR being merged to the repository
 ## How to use this image
 HTTP run:
 ```shell
 docker run -d --rm -p 80:80 wiretrustee/dashboard:main
 ```
-Using SSL certificate from Let's Encript®:
+Using SSL certificate from Let's Encrypt®:
 ```shell
 docker run -d --rm -p 80:80 -p 443:443 \
   -e LETSENCRYPT_DOMAIN=app.mydomain.com \
   -e LETSENCRYPT_EMAIL=hello@mydomain.com \
-  wiretrustee/dashboard:main
+  netbirdio/dashboard:main
 ```
 > For SSL generation, you need to run this image in a server with proper public IP and a domain name pointing to it.
 ## Environment variables

docker/default.conf

@@ -6,11 +6,11 @@ server {
     root /usr/share/nginx/html;
 
     location / {
-        try_files $uri /index.html;
-    }
-	# You may need this to prevent return 404 recursion.
-	location = /404.html {
-		internal;
-	}
+      try_files $uri $uri.html $uri/ =404;
+   }
 
+   error_page 404 /404.html;
+   location = /404.html {
+      internal;
+   }
 }

docker/init_react_envs.sh

@@ -22,6 +22,10 @@ if [[ -z "${AUTH_AUDIENCE}" ]]; then
     fi
 fi
 
+if [[ "${AUTH_AUDIENCE}" == "none" ]]; then
+    unset AUTH_AUDIENCE
+fi
+
 if [[ -z "${AUTH_SUPPORTED_SCOPES}" ]]; then
     if [[ -z "${AUTH0_DOMAIN}" ]]; then
         echo "AUTH_SUPPORTED_SCOPES environment variable must be set"
@@ -53,16 +57,19 @@ export AUTH_SUPPORTED_SCOPES=${AUTH_SUPPORTED_SCOPES:-openid profile email api o
 export NETBIRD_MGMT_API_ENDPOINT=$(echo $NETBIRD_MGMT_API_ENDPOINT | sed -E 's/(:80|:443)$//')
 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_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 \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE"
+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"
 
-MAIN_JS=$(find /usr/share/nginx/html/static/js/main.*js)
 OIDC_TRUSTED_DOMAINS="/usr/share/nginx/html/OidcTrustedDomains.js"
-cp "$MAIN_JS" "$MAIN_JS".copy
-envsubst "$ENV_STR" < "$MAIN_JS".copy > "$MAIN_JS"
 envsubst "$ENV_STR" < "$OIDC_TRUSTED_DOMAINS".tmpl > "$OIDC_TRUSTED_DOMAINS"
-rm "$MAIN_JS".copy
+for f in $(grep -R -l AUTH_SUPPORTED_SCOPES /usr/share/nginx/html); do
+    cp "$f" "$f".copy
+    envsubst "$ENV_STR" < "$f".copy > "$f"
+    rm "$f".copy
+done