Limit UI view for the "user" role (#259)

* Add windows/macos instructions for self-hosted

* Add android instructions for self-hosted

.github/workflows/build_and_push.yml

@@ -19,7 +19,7 @@ jobs:
           node-version: '16'
           cache: 'npm'
 
-      - name: Install dependecies
+      - name: Install dependencies
         run: npm install
 
       - name: Build 

.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

@@ -26,6 +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

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"
@@ -43,6 +47,7 @@ fi
 
 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}
@@ -53,11 +58,12 @@ 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_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_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 \$\$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"

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/modals/add-peer-modal.ts

@@ -0,0 +1,111 @@
+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 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 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 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, expect } 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,33 @@
+import { test, expect } from '@playwright/test';
+import {AddPeerModal} from '../pages/modals/add-peer-modal'
+import {TopMenu} from '../pages/top-menu';
+
+const URL = 'https://app.netbird.io/'
+const localUrl = 'http://localhost:3000/'
+let addPeerModal: AddPeerModal;
+let topMenu: TopMenu;
+
+test.beforeEach(async ({ page }) => {
+  addPeerModal = new AddPeerModal(page);
+  await page.goto(localUrl);
+  await page.getByPlaceholder('username@domain').fill('admin@localhost');
+  await page.getByRole('button', { name: 'next' }).click();
+  await page.getByLabel('Password').fill('testMe123@');
+  await page.getByRole('button', { name: 'next' }).click();
+  const skipButton = page.getByRole('button', { name: 'skip' });
+  if (await skipButton.isVisible({ timeout: 300 })) {
+      await skipButton.click();
+  }
+  await addPeerModal.assertPeerModalIsVisible();
+});
+
+ test('Confirm that new user has Default access', async ({ page }) => {
+  topMenu = new TopMenu(page);
+  await addPeerModal.closeAddPeerModal();
+  await addPeerModal.assertPeerModalIsNotVisible();
+  await topMenu.clickOnAccessControlOnTopMenu();
+  await expect(page.getByRole('cell', { name: 'Default' })).toBeVisible();
+  await page.getByRole('button', { name: 'Delete' }).click();
+  await expect(page.getByTestId('confirm-delete-modal-title')).toBeVisible();
+  await page.getByRole('button', { name: 'Cancel' }).click();
+ });

e2e-tests/tests/peers.test.ts

@@ -0,0 +1,56 @@
+import { test } from '@playwright/test';
+import {AddPeerModal} from '../pages/modals/add-peer-modal'
+import {PeersPage} from '../pages/peers-page'
+
+const URL = 'https://app.netbird.io/'
+const localUrl = 'http://localhost:3000/'
+let addPeerModal: AddPeerModal;
+let peersPage: PeersPage;
+
+test.beforeEach(async ({ page }) => {
+  addPeerModal = new AddPeerModal(page);
+  await page.goto(localUrl);
+  await page.getByPlaceholder('username@domain').fill('admin@localhost');
+  await page.getByRole('button', { name: 'next' }).click();
+  await page.getByLabel('Password').fill('testMe123@');
+  await page.getByRole('button', { name: 'next' }).click();
+  const skipButton = page.getByRole('button', { name: 'skip' });
+  if (await skipButton.isVisible({ timeout: 300 })) {
+      await skipButton.click();
+  }
+  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 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

@@ -39,6 +39,7 @@
     "react-redux": "^8.0.2",
     "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",
@@ -78,6 +79,7 @@
     ]
   },
   "devDependencies": {
-    "@types/react-syntax-highlighter": "^15.5.3"
+    "@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,
+  },
+});

src/.local-config.json.bac

@@ -0,0 +1,11 @@
+{
+  "auth0Auth": "true",
+  "authAuthority": "https://netbird-localdev.eu.auth0.com",
+  "authClientId": "kBRMAOqIZ7hvpVCaypQLCJvTzkYYIXVt",
+  "authScopesSupported": "openid profile email api offline_access email_verified",
+  "authAudience": "http://localhost:3000/",
+
+  "apiOrigin": "http://0.0.0.0",
+  "grpcApiOrigin": "http://0.0.0.0:80",
+  "latestVersion": "v0.6.3"
+}

src/App.tsx

@@ -70,16 +70,7 @@ function App() {
 
     return (
         <>
-        <ConfigProvider
-            theme={{
-                token: {
-                    borderRadius: 4,
-                    colorPrimary: "#1890ff",
-                    fontFamily: "Arial"
-                },
-                components: {Badge: {fontSizeSM: 20}},
-            }}
-        >
+
             <Provider store={store}>
                 {!show && <SecureLoading padding="3em" width={50} height={50}/>}
                 {show &&
@@ -124,8 +115,6 @@ function App() {
                     </Layout>
                 }
             </Provider>
-
-        </ConfigProvider>
         </>
     )
 }

src/assets/direct_bi.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="29.435" height="7.636" viewBox="0 0 29.435 7.636">
-  <path id="direct_bi" d="M3.64,8.158-.178,4.34,3.64.522,4.3,1.17l-2.7,2.7h25.89l-2.7-2.7.656-.648L29.257,4.34,27.213,6.384,25.439,8.158,24.783,7.5l2.7-2.693H1.595L4.3,7.5Z" transform="translate(0.178 -0.522)" fill="#1e429f"/>
+<svg width="39" height="6" viewBox="0 0 39 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.451731 2.66267C0.315048 2.79935 0.315048 3.02096 0.451731 3.15764L2.67912 5.38503C2.8158 5.52171 3.03741 5.52171 3.17409 5.38503C3.31078 5.24835 3.31078 5.02674 3.17409 4.89006L1.19419 2.91016L3.17409 0.930257C3.31078 0.793574 3.31078 0.571966 3.17409 0.435282C3.03741 0.298599 2.8158 0.298599 2.67912 0.435282L0.451731 2.66267ZM38.3807 3.15764C38.5174 3.02096 38.5174 2.79935 38.3807 2.66267L36.1533 0.435282C36.0166 0.298599 35.795 0.298599 35.6583 0.435282C35.5216 0.571966 35.5216 0.793574 35.6583 0.930257L37.6382 2.91016L35.6583 4.89006C35.5216 5.02674 35.5216 5.24835 35.6583 5.38503C35.795 5.52171 36.0166 5.52171 36.1533 5.38503L38.3807 3.15764ZM0.699219 3.26016H38.1332V2.56016H0.699219V3.26016Z" fill="#03543F"/>
 </svg>

src/assets/direct_out.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="29.497" height="7.636" viewBox="0 0 29.497 7.636">
-  <path id="direct_out" d="M26.589,8l-.656-.656,2.7-2.693H.91V3.713H28.635l-2.7-2.7.656-.648,3.818,3.818Z" transform="translate(-0.91 -0.364)" fill="#03543f"/>
+<svg width="39" height="6" viewBox="0 0 39 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.3807 3.15764C38.5174 3.02096 38.5174 2.79935 38.3807 2.66267L36.1533 0.435282C36.0166 0.298599 35.795 0.298599 35.6583 0.435282C35.5216 0.571966 35.5216 0.793574 35.6583 0.930257L37.6382 2.91016L35.6583 4.89006C35.5216 5.02674 35.5216 5.24835 35.6583 5.38503C35.795 5.52171 36.0166 5.52171 36.1533 5.38503L38.3807 3.15764ZM0.699219 3.26016H38.1332V2.56016H0.699219V3.26016Z" fill="#1E429F"/>
 </svg>

src/assets/forward_default.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.3846 3.68889C38.5213 3.55221 38.5213 3.3306 38.3846 3.19392L36.1572 0.966532C36.0205 0.829849 35.7989 0.829849 35.6622 0.966532C35.5255 1.10322 35.5255 1.32482 35.6622 1.46151L37.6421 3.44141L35.6622 5.42131C35.5255 5.55799 35.5255 5.7796 35.6622 5.91628C35.7989 6.05296 36.0205 6.05296 36.1572 5.91628L38.3846 3.68889ZM0.703125 3.79141H38.1371V3.09141H0.703125V3.79141Z" fill="#D9D9D9"/>
+</svg>

src/assets/in_bound.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.615425 3.3111C0.478741 3.44779 0.478741 3.66939 0.615425 3.80608L2.84281 6.03346C2.97949 6.17015 3.2011 6.17015 3.33778 6.03346C3.47447 5.89678 3.47447 5.67517 3.33778 5.53849L1.35789 3.55859L3.33778 1.57869C3.47447 1.44201 3.47447 1.2204 3.33778 1.08372C3.2011 0.947033 2.97949 0.947033 2.84281 1.08372L0.615425 3.3111ZM38.2969 3.20859L0.862911 3.20859L0.862911 3.90859L38.2969 3.90859L38.2969 3.20859Z" fill="#2B4DA5"/>
+</svg>