Add "New dashboard" Banner (#315)

* Add new dashboard Banner.tsx

* display on localdev and add todo note

---------

Co-authored-by: Maycon Santos <mlsmaycon@gmail.com>

.github/workflows/build_and_push.yml

@@ -5,20 +5,21 @@ on:
       - main
     tags:
       - "**"
+  pull_request:
 
 jobs:
   build_n_push:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: setup-node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: '16'
           cache: 'npm'
 
-      - name: Install dependecies
+      - name: Install dependencies
         run: npm install
 
       - name: Build 
@@ -26,26 +27,26 @@ jobs:
         run: CI=false npm run build
       - 
         name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
+        uses: docker/setup-qemu-action@v2
       - 
         name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
       -
         name: Docker meta
         id: meta
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v4
         with:
           images: wiretrustee/dashboard
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKER_USER }}
           password: ${{ secrets.DOCKER_TOKEN }}
       -
         name: Docker build and push
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v3
         with:
           context: .
           file: docker/Dockerfile

.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

.github/workflows/e2e-tests.yml

@@ -0,0 +1,42 @@
+name: run e2e tests
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  e2e_tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: setup-node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: install playwright
+        run: npx playwright install
+
+      - name: install playwright deps
+        run: npx playwright install-deps
+
+      - name: create test environment
+        run: bash ./e2e-tests/create-test-env.sh
+
+      - name: run e2e tests
+        run: npx playwright test --workers 2
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: |
+            playwright-report/
+            test-results/
+          retention-days: 3

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+/node_modules.bkp
 /.pnp
 .pnp.js
 
@@ -25,4 +26,18 @@ yarn-error.log*
 src/auth_config.json
 .idea
 .eslintcache
-src/.local-config.json
+src/.local-config*.json
+/public/OidcServiceWorker.js
+/public/OidcTrustedDomains.js
+/e2e-tests/node_modules/
+/e2e-tests/playwright-report/
+/e2e-tests/test-results/
+/test-results/
+/playwright-report/
+.env
+Caddyfile
+docker-compose.yml
+machinekey/
+management.json
+turnserver.conf
+zitadel.env

README.md

@@ -36,24 +36,43 @@ Disclaimer. We believe that proper user management system is not a trivial task
 use Auth0 service that covers all our needs (user management, social login, JTW for the management API).
 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):
+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):
 
-   ```AUTH0_DOMAIN``` ```AUTH0_CLIENT_ID``` ```AUTH0_AUDIENCE```
+   `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 ```WIRETRUSTEE_MGMT_API_ENDPOINT``` is required. Most likely it will be ```http://localhost:33071``` if you are hosting Management API on the same server.
+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.
 5. Run docker container without SSL (Let's Encrypt):
 
-   ```docker run -d --name wiretrustee-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  WIRETRUSTEE_MGMT_API_ENDPOINT=<SET YOUR MANAGEMETN API URL> wiretrustee/dashboard:main```
+   ```shell
+   docker run -d --name wiretrustee-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
+   ```
 6. Run docker container with SSL (Let's Encrypt):
 
-   ```docker run -d --name wiretrustee-dashboard --rm -p 80:80 -p 443:443 -e NGINX_SSL_PORT=443 -e LETSENCRYPT_DOMAIN=<YOUR PUBLIC DOMAIN> -e LETSENCRYPT_EMAIL=<YOUR EMAIL>  -e AUTH0_DOMAIN=<SET YOUR AUTH DOMAIN> -e AUTH0_CLIENT_ID=<SET YOUR CLEITN ID> -e AUTH0_AUDIENCE=<SET YOUR AUDIENCE> -e  WIRETRUSTEE_MGMT_API_ENDPOINT=<SET YOUR MANAGEMETN API URL> wiretrustee/dashboard:main```
+   ```shell
+   docker run -d --name wiretrustee-dashboard \
+     --rm -p 80:80 -p 443:443 \
+     -e NGINX_SSL_PORT=443 \
+     -e LETSENCRYPT_DOMAIN=<YOUR PUBLIC DOMAIN> \
+     -e LETSENCRYPT_EMAIL=<YOUR EMAIL> \
+     -e AUTH0_DOMAIN=<SET YOUR AUTH DOMAIN> \
+     -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
+   ```
 
 ## 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
+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`
+4. run `npm run start dev`

docker/README.md

@@ -1,15 +1,15 @@
 # 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.
+Wiretrustee Dashboard is a the Wiretrustee Management server UI. It allow 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 \

docker/init_react_envs.sh

@@ -1,19 +1,43 @@
 #!/bin/bash
 set -e
 
-if [[ -z "${AUTH0_DOMAIN}" ]]; then
-    echo "AUTH0_DOMAIN environment variable must be set"
-    exit 1
+if [[ -z "${AUTH_AUTHORITY}" ]]; then
+    if [[ -z "${AUTH0_DOMAIN}" ]]; then
+        echo "AUTH_AUTHORITY or AUTH0_DOMAIN environment variable must be set"
+        exit 1
+    fi
 fi
 
-if [[ -z "${AUTH0_CLIENT_ID}" ]]; then
-    echo "AUTH0_CLIENT_ID environment variable must be set"
-    exit 1
+if [[ -z "${AUTH_CLIENT_ID}" ]]; then
+    if [[ -z "${AUTH0_CLIENT_ID}" ]]; then
+        echo "AUTH_CLIENT_ID or AUTH0_CLIENT_ID environment variable must be set"
+        exit 1
+    fi
 fi
 
-if [[ -z "${AUTH0_AUDIENCE}" ]]; then
-    echo "AUTH0_AUDIENCE environment variable must be set"
-    exit 1
+if [[ -z "${AUTH_AUDIENCE}" ]]; then
+    if [[ -z "${AUTH0_AUDIENCE}" ]]; then
+        echo "AUTH_AUDIENCE or AUTH0_AUDIENCE environment variable must be set"
+        exit 1
+    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"
+        exit 1
+    fi
+fi
+
+if [[ -z "${USE_AUTH0}" ]]; then
+    if [[ -z "${AUTH0_DOMAIN}" ]]; then
+        echo "USE_AUTH0 environment variable must be set"
+        exit 1
+    fi
 fi
 
 if [[ -z "${NETBIRD_MGMT_API_ENDPOINT}" ]]; then
@@ -21,23 +45,29 @@ if [[ -z "${NETBIRD_MGMT_API_ENDPOINT}" ]]; then
     exit 1
 fi
 
-AUTH0_DOMAIN=${AUTH0_DOMAIN}
-AUTH0_CLIENT_ID=${AUTH0_CLIENT_ID}
-AUTH0_AUDIENCE=${AUTH0_AUDIENCE}
-NETBIRD_MGMT_API_ENDPOINT=${NETBIRD_MGMT_API_ENDPOINT}
-NETBIRD_MGMT_GRPC_API_ENDPOINT=${NETBIRD_MGMT_GRPC_API_ENDPOINT}
+export AUTH_AUTHORITY=${AUTH_AUTHORITY:-https://$AUTH0_DOMAIN}
+export AUTH_CLIENT_ID=${AUTH_CLIENT_ID:-$AUTH0_CLIENT_ID}
+export AUTH_CLIENT_SECRET=${AUTH_CLIENT_SECRET}
+export AUTH_AUDIENCE=${AUTH_AUDIENCE:-$AUTH0_AUDIENCE}
+export AUTH_REDIRECT_URI=${AUTH_REDIRECT_URI}
+export AUTH_SILENT_REDIRECT_URI=${AUTH_SILENT_REDIRECT_URI}
+export USE_AUTH0=${USE_AUTH0:-true}
+export AUTH_SUPPORTED_SCOPES=${AUTH_SUPPORTED_SCOPES:-openid profile email api offline_access email_verified}
+
+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_TOKEN_SOURCE=${NETBIRD_TOKEN_SOURCE:-accessToken}
+export NETBIRD_DRAG_QUERY_PARAMS=${NETBIRD_DRAG_QUERY_PARAMS:-false}
 
-REPO="https://github.com/netbirdio/netbird/"
-# this command will fetch the latest release e.g. v0.6.3
-export NETBIRD_LATEST_VERSION=$(basename $(curl -fs -o/dev/null -w %{redirect_url} ${REPO}releases/latest))
 echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"
 
 # replace ENVs in the config
-ENV_STR="\$\$AUTH0_DOMAIN \$\$AUTH0_CLIENT_ID \$\$AUTH0_AUDIENCE \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_LATEST_VERSION"
+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 \$\$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"
-rm "$MAIN_JS".copy
-
-
-
+envsubst "$ENV_STR" < "$OIDC_TRUSTED_DOMAINS".tmpl > "$OIDC_TRUSTED_DOMAINS"
+rm "$MAIN_JS".copy

e2e-tests/clean-test-env.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+docker-compose down --volumes
+rm -f docker-compose.yml Caddyfile zitadel.env dashboard.env machinekey/zitadel-admin-sa.token turnserver.conf management.json

e2e-tests/pages/access-control-page.ts

@@ -0,0 +1,56 @@
+import { Page, test, expect } from "@playwright/test";
+
+export class AccessControlPage {
+    private readonly accessControlUrl = 'http://localhost:3000/acls'
+    private readonly defaulAccessControl = this.page.getByRole('cell', { name: 'Default' })
+    private readonly deleteButton = this.page.getByRole('button', { name: 'Delete' })
+    private readonly deleteModal = this.page.getByTestId('confirm-delete-modal-title')
+    private readonly confirmButton = this.page.getByRole('button', { name: 'OK' })
+    private readonly addRulesButton = this.page.getByTestId('add-rule-empty-state-button')
+
+    constructor(private readonly page: Page) {}
+
+      async openAccessControlPage() {
+        await test.step('Open Access Control page', async () => {
+            await this.page.goto(this.accessControlUrl);
+        })
+      }
+  
+    async assertDefaultAccessCotrolIsCreated() {
+      await test.step('Assert that default control access is created', async () => {
+          await expect(this.defaulAccessControl).toBeVisible();
+      })
+    }
+
+    async pressDeleteButton() {
+      await test.step('Press delete button', async () => {
+          await this.deleteButton.click();
+      })
+    }
+
+    async assertDeleteModalIsVisibile() {
+      await test.step('Assert access control deletion modal is visible', async () => {
+          await expect(this.deleteModal).toBeVisible();
+      })
+    }
+
+    async pressConfirmButton() {
+      await test.step('Press confirm button on access control deletion modal', async () => {
+        await this.confirmButton.click();
+      })
+    }
+
+    async assertDefaultAccessCotrolIsDeleted() {
+      await test.step('Assert default access control should be deleted', async () => {
+          await expect(this.defaulAccessControl).not.toBeVisible();
+      })
+    }
+
+    async assertAddRuleButtonIsVisile() {
+      await test.step('Assert Add Rules button is visible', async () => {
+          await expect(this.addRulesButton).toBeVisible();
+      })
+    }
+  }
+
+export default AccessControlPage;

e2e-tests/pages/login-page.ts

@@ -0,0 +1,34 @@
+import { Page, test, expect} from "@playwright/test";
+
+export class LoginPage {
+    private readonly localUrl = 'http://localhost:3000/'
+    private readonly usernameField = this.page.getByPlaceholder('username@domain')
+    private readonly nextButton = this.page.getByRole('button', { name: 'next' })
+    private readonly passwordField = this.page.getByLabel('Password')
+    private readonly skipButton = this.page.getByRole('button', { name: 'skip' });
+    private readonly netBirdLogo = this.page.getByRole('link', { name: 'logo' })
+
+    constructor(private readonly page: Page) {}
+
+      async doLogin() {
+        await test.step('Login to local enviroment', async () => {
+          await this.page.goto(this.localUrl);
+          await this.usernameField.fill('admin@localhost');
+          await this.pressNextButton();
+          await this.passwordField.fill('testMe123@');
+          await this.pressNextButton();
+          if (await this.skipButton.isVisible({ timeout: 300 })) {
+              await this.skipButton.click();
+          }
+          await expect(this.netBirdLogo).toBeVisible();
+        })
+      }
+
+      async pressNextButton() {
+        await test.step('Press next button', async () => {
+          await this.nextButton.click();
+        })
+      }
+    }
+
+export default LoginPage;

e2e-tests/pages/modals/add-peer-modal.ts

@@ -0,0 +1,125 @@
+import { Page, test, expect } from "@playwright/test";
+
+export class AddPeerModal {
+    private readonly addPeerModal = this.page.getByTestId('add-peer-modal').locator('div').nth(2)
+    private readonly linuxTab = this.page.getByTestId('add-peer-modal-linux-tab')
+    private readonly windowsTab = this.page.getByTestId('add-peer-modal-windows-tab')
+    private readonly macTab = this.page.getByTestId('add-peer-modal-mac-tab')
+    private readonly androidTab = this.page.getByTestId('add-peer-modal-android-tab')
+    private readonly iosTab = this.page.getByTestId('add-peer-modal-ios-tab')
+    private readonly dockerTab = this.page.getByTestId('add-peer-modal-docker-tab')
+    private readonly linuxTabText = this.page.locator('pre').filter({ hasText: 'curl -fsSL https://pkgs.netbird.io/install.sh | sh' })
+    private readonly windowsDownloadButton = this.page.getByTestId('download-windows-button')
+    private readonly intelDownloadButton = this.page.getByTestId('download-intel-button')
+    private readonly m1M2DownloadButton = this.page.getByTestId('download-m1-m2-button')
+    private readonly androidDownloadButton = this.page.getByTestId('download-android-button')
+    private readonly dockerDownloadButton = this.page.getByTestId('download-docker-button')
+    private readonly closeButton = this.page.getByLabel('Close', { exact: true })
+
+    constructor(private readonly page: Page) {}
+
+    async assertPeerModalIsVisible() {
+        await test.step('Assert that add peer modal is visible', async () => {
+            await expect(this.addPeerModal).toBeVisible();
+        })
+      }
+
+      async assertPeerModalIsNotVisible() {
+        await test.step('Assert that add peer modal is not visible', async () => {
+            await expect(this.addPeerModal).not.toBeVisible();
+        })
+      }
+
+      async openLinuxTab() {
+        await test.step('Open Linux tab on add peer modal', async () => {
+            await this.linuxTab.click();
+            
+        })
+      }
+
+      async openWindowsTab() {
+        await test.step('Open Windows tab on add peer modal', async () => {
+            await this.windowsTab.click();
+            
+        })
+      }
+
+      async openMacTab() {
+        await test.step('Open MacOS tab on add peer modal', async () => {
+            await this.macTab.click();
+            
+        })
+      }
+
+      async openAndroidTab() {
+        await test.step('Open Android tab on add peer modal', async () => {
+            await this.androidTab.click();
+            
+        })
+      }
+
+      async openIOSTab() {
+        await test.step('Open iOS tab on add peer modal', async () => {
+            await this.iosTab.click();
+
+        })
+      }
+
+      async openDockerTab() {
+        await test.step('Open Docker tab on add peer modal', async () => {
+            await this.dockerTab.click();
+            
+        })
+      }
+
+      async assertLinuxTabHasCorrectText() {
+        await test.step('Assert Linux tab has correct installation text', async () => {
+            await expect(this.linuxTabText).toBeVisible();
+        })
+      }
+
+      async assertWindowsDownloadButtonHasCorrectLink() {
+        await test.step('Assert Windows download button has a correct link', async () => {
+            await expect(this.windowsDownloadButton).toHaveAttribute('href', 'https://pkgs.netbird.io/windows/x64');
+        })
+      }
+
+      async assertIntelDownloadButtonHasCorrectLink() {
+        await test.step('Assert Intel download button has a correct link', async () => {
+            await expect(this.intelDownloadButton).toHaveAttribute('href', 'https://pkgs.netbird.io/macos/amd64');
+        })
+      }
+
+      async assertM1M2DownloadButtonHasCorrectLink() {
+        await test.step('Assert M1 & M2 download button has a correct link', async () => {
+            await expect(this.m1M2DownloadButton).toHaveAttribute('href', 'https://pkgs.netbird.io/macos/arm64');
+        })
+      }
+
+      async assertAndroidDownloadButtonHasCorrectLink() {
+        await test.step('Assert Android download button has a correct link', async () => {
+            await expect(this.androidDownloadButton).toHaveAttribute('href', 'https://play.google.com/store/apps/details?id=io.netbird.client');
+        })
+      }
+
+      async assertiOSDownloadButtonHasCorrectLink() {
+        await test.step('Assert iOS download button has a correct link', async () => {
+            await expect(this.androidDownloadButton).toHaveAttribute('href', 'https://apps.apple.com/app/netbird-p2p-vpn/id6469329339');
+        })
+      }
+
+      async assertDockerDownloadButtonHasCorrectLink() {
+        await test.step('Assert Docker download button has a correct link', async () => {
+            await expect(this.dockerDownloadButton).toHaveAttribute('href', 'https://docs.docker.com/engine/install/');
+        })
+      }
+
+      async closeAddPeerModal() {
+        await test.step('Close Add peer modal', async () => {
+          await this.closeButton.click();
+        })
+      }
+      
+    }
+
+export default AddPeerModal;

e2e-tests/pages/peers-page.ts

@@ -0,0 +1,15 @@
+import { Page, test } from "@playwright/test";
+
+export class PeersPage {
+    private readonly addNewPeerButton = this.page.getByTestId('add-new-peer-button')
+
+    constructor(private readonly page: Page) {}
+
+      async clickOnAddNewPeerButton() {
+        await test.step('Click on Add new peer Button to open Add peer modal', async () => {
+            await this.addNewPeerButton.click();
+        })
+      }
+    }
+
+export default PeersPage;

e2e-tests/pages/top-menu.ts

@@ -0,0 +1,15 @@
+import { Page, test} from "@playwright/test";
+
+export class TopMenu {
+    private readonly accessControlButton = this.page.getByTestId('access-control-page')
+
+    constructor(private readonly page: Page) {}
+
+      async clickOnAccessControlOnTopMenu() {
+        await test.step('Click on Access Control page on a top menu', async () => {
+          await this.accessControlButton.click();  
+        })
+      }
+    }
+
+export default TopMenu;

e2e-tests/tests/access-control.test.ts

@@ -0,0 +1,22 @@
+import { test } from '@playwright/test'
+import {LoginPage} from '../pages/login-page'
+import {AccessControlPage} from '../pages/access-control-page'
+
+let loginPage: LoginPage
+let accessControlPage: AccessControlPage
+
+test.beforeEach(async ({ page }) => {
+  loginPage = new LoginPage(page);
+  await loginPage.doLogin();
+});
+
+ test('Confirm that new user has Default access', async ({ page }) => {
+  accessControlPage = new AccessControlPage(page);
+  await accessControlPage.openAccessControlPage();
+  await accessControlPage.assertDefaultAccessCotrolIsCreated();
+  await accessControlPage.pressDeleteButton();
+  await accessControlPage.assertDeleteModalIsVisibile();
+  await accessControlPage.pressConfirmButton();
+  await accessControlPage.assertDefaultAccessCotrolIsDeleted();
+  await accessControlPage.assertAddRuleButtonIsVisile();
+ });

e2e-tests/tests/peers.test.ts

@@ -0,0 +1,54 @@
+import { test } from '@playwright/test'
+import {AddPeerModal} from '../pages/modals/add-peer-modal'
+import {PeersPage} from '../pages/peers-page'
+import {LoginPage} from '../pages/login-page'
+
+let addPeerModal: AddPeerModal
+let peersPage: PeersPage
+let loginPage: LoginPage
+
+test.beforeEach(async ({ page }) => {
+  addPeerModal = new AddPeerModal(page);
+  loginPage = new LoginPage(page);
+  await loginPage.doLogin();
+  await addPeerModal.assertPeerModalIsVisible();
+});
+
+test('Test Linux tab on a first access add peer modal / @bc', async function () {
+    await addPeerModal.openLinuxTab();
+    await addPeerModal.assertLinuxTabHasCorrectText();
+  });
+
+test('Test Windows tab on a first access add peer modal / @bc', async () => {
+  await addPeerModal.openWindowsTab();
+  await addPeerModal.assertWindowsDownloadButtonHasCorrectLink();
+});
+
+test('Test MacOS tab on a first access add peer modal / @bc', async () => {
+  await addPeerModal.openMacTab();
+  await addPeerModal.assertIntelDownloadButtonHasCorrectLink();
+  await addPeerModal.assertM1M2DownloadButtonHasCorrectLink();
+});
+
+test('Test iOS tab on a first access add peer modal', async () => {
+  await addPeerModal.openIOSTab();
+  await addPeerModal.assertiOSDownloadButtonHasCorrectLink();
+});
+
+test('Test Android tab on a first access add peer modal', async () => {
+  await addPeerModal.openAndroidTab();
+  await addPeerModal.assertAndroidDownloadButtonHasCorrectLink();
+});
+
+ test('Test Docker tab on a first access add peer modal', async () => {
+  await addPeerModal.openDockerTab();
+  await addPeerModal.assertDockerDownloadButtonHasCorrectLink();
+ });
+
+ test('Close and open Add peer modal', async ({ page }) => {
+  peersPage = new PeersPage(page);
+  await addPeerModal.closeAddPeerModal();
+  await addPeerModal.assertPeerModalIsNotVisible();
+  await peersPage.clickOnAddNewPeerButton();
+  await addPeerModal.assertPeerModalIsVisible();
+ });

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
-    "@auth0/auth0-react": "^1.6.0",
+    "@ant-design/icons": "^4.8.0",
+    "@axa-fr/react-oidc": "^5.14.0",
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.4",
     "@testing-library/jest-dom": "^5.11.4",
@@ -18,32 +18,43 @@
     "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.25",
-    "antd": "^4.20.6",
+    "antd": "^5.3.1",
     "autoprefixer": "^10.4.4",
     "axios": "^0.27.2",
+    "cidr-regex": "^3.1.1",
+    "copyfiles": "^2.4.1",
     "heroicons": "^1.0.6",
     "highlight.js": "^11.2.0",
     "history": "^5.0.1",
     "lodash": "^4.17.21",
+    "moment": "^2.29.4",
     "postcss": "^8.4.12",
     "prop-types": "^15.7.2",
-    "react": "^18.1.0",
+    "punycode": "^2.1.1",
+    "rc-overflow": "^1.2.8",
+    "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.1.0",
-    "react-highlight": "^0.14.0",
+    "react-hotjar": "^5.1.0",
     "react-redux": "^8.0.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.3",
     "react-scripts": "^5.0.1",
+    "react-select": "^5.7.3",
+    "react-syntax-highlighter": "^15.5.0",
     "react-table": "^7.7.0",
     "redux": "^4.2.0",
     "redux-devtools-extension": "^2.13.9",
     "redux-saga": "^1.1.3",
     "styled-components": "^5.3.5",
     "tailwindcss": "^3.0.23",
+    "ts-md5": "^1.3.1",
     "typesafe-actions": "^5.1.0",
     "typescript": "^4.6.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "copy": "copyfiles -f ./node_modules/@axa-fr/react-oidc/dist/OidcServiceWorker.js ./public",
+    "copytrusted": "copyfiles -f ./public/local/OidcTrustedDomains.js ./public",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -68,6 +79,7 @@
     ]
   },
   "devDependencies": {
-    "@types/react-highlight": "^0.12.5"
+    "@types/react-syntax-highlighter": "^15.5.3",
+    "@playwright/test": "^1.36.2"
   }
 }

playwright.config.ts

@@ -0,0 +1,80 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './e2e-tests/tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { channel: 'chrome', },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: {  browserName: 'firefox', },
+    // },
+    //
+    // {
+    //   name: 'webkit',
+    //   use: { browserName: 'webkit', },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run start',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 180 * 1000,
+  },
+});

public/OidcTrustedDomains.js.tmpl

@@ -0,0 +1,6 @@
+
+// Add here trusted domains, access tokens will be send to 
+const trustedDomains = {
+    default:["$NETBIRD_MGMT_API_ENDPOINT"],
+    auth0:[]
+};