fix table jerks

.github/workflows/build_and_push.yml

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

.github/workflows/e2e-tests.yml

@@ -1,42 +0,0 @@
-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

@@ -29,15 +29,3 @@ src/auth_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,10 +22,6 @@ 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"
@@ -58,12 +54,11 @@ 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_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"
+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"
 
 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

@@ -1,3 +0,0 @@
-#!/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

@@ -1,56 +0,0 @@
-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 cotrol 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

@@ -1,34 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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 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-lock.json

@@ -58,7 +58,6 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
-        "@playwright/test": "^1.36.2",
         "@types/react-syntax-highlighter": "^15.5.3"
       }
     },
@@ -205,9 +204,9 @@
       }
     },
     "node_modules/@babel/core/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -238,9 +237,9 @@
       }
     },
     "node_modules/@babel/eslint-parser/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -312,9 +311,9 @@
       }
     },
     "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -371,9 +370,9 @@
       }
     },
     "node_modules/@babel/helper-define-polyfill-provider/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -1707,9 +1706,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-runtime/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -1919,9 +1918,9 @@
       }
     },
     "node_modules/@babel/preset-env/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -3088,25 +3087,6 @@
         "opener": "^1.5.2"
       }
     },
-    "node_modules/@playwright/test": {
-      "version": "1.37.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.0.tgz",
-      "integrity": "sha512-181WBLk4SRUyH1Q96VZl7BP6HcK0b7lbdeKisn3N/vnjitk+9HbdlFz/L5fey05vxaAhldIDnzo8KUoy8S3mmQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*",
-        "playwright-core": "1.37.0"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
-    },
     "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.7.tgz",
@@ -5239,9 +5219,9 @@
       }
     },
     "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -7487,9 +7467,9 @@
       }
     },
     "node_modules/eslint-plugin-jsx-a11y/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -7560,9 +7540,9 @@
       }
     },
     "node_modules/eslint-plugin-react/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -9532,9 +9512,9 @@
       }
     },
     "node_modules/istanbul-lib-instrument/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -10820,9 +10800,9 @@
       }
     },
     "node_modules/make-dir/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -11732,18 +11712,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/playwright-core": {
-      "version": "1.37.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.0.tgz",
-      "integrity": "sha512-1c46jhTH/myQw6sesrcuHVtLoSNfJv8Pfy9t3rs6subY7kARv0HRw5PpyfPYPpPtQvBOmgbE6K+qgYUpj81LAA==",
-      "dev": true,
-      "bin": {
-        "playwright-core": "cli.js"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.4.16",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
@@ -14744,9 +14712,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -15863,9 +15831,9 @@
       }
     },
     "node_modules/tough-cookie": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
-      "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
+      "integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==",
       "dependencies": {
         "psl": "^1.1.33",
         "punycode": "^2.1.1",
@@ -16742,9 +16710,9 @@
       }
     },
     "node_modules/word-wrap": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.4.tgz",
-      "integrity": "sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -17281,9 +17249,9 @@
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -17303,9 +17271,9 @@
           "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw=="
         },
         "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -17360,9 +17328,9 @@
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -17403,9 +17371,9 @@
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -18269,9 +18237,9 @@
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -18426,9 +18394,9 @@
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -19266,17 +19234,6 @@
         "opener": "^1.5.2"
       }
     },
-    "@playwright/test": {
-      "version": "1.37.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.0.tgz",
-      "integrity": "sha512-181WBLk4SRUyH1Q96VZl7BP6HcK0b7lbdeKisn3N/vnjitk+9HbdlFz/L5fey05vxaAhldIDnzo8KUoy8S3mmQ==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*",
-        "fsevents": "2.3.2",
-        "playwright-core": "1.37.0"
-      }
-    },
     "@pmmmwh/react-refresh-webpack-plugin": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.7.tgz",
@@ -20897,9 +20854,9 @@
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -22586,9 +22543,9 @@
           }
         },
         "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -22632,9 +22589,9 @@
           }
         },
         "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -23998,9 +23955,9 @@
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -24985,9 +24942,9 @@
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -25637,12 +25594,6 @@
         }
       }
     },
-    "playwright-core": {
-      "version": "1.37.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.0.tgz",
-      "integrity": "sha512-1c46jhTH/myQw6sesrcuHVtLoSNfJv8Pfy9t3rs6subY7kARv0HRw5PpyfPYPpPtQvBOmgbE6K+qgYUpj81LAA==",
-      "dev": true
-    },
     "postcss": {
       "version": "8.4.16",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
@@ -27615,9 +27566,9 @@
       }
     },
     "semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
       "requires": {
         "lru-cache": "^6.0.0"
       }
@@ -28479,9 +28430,9 @@
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
     },
     "tough-cookie": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
-      "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
+      "integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==",
       "requires": {
         "psl": "^1.1.33",
         "punycode": "^2.1.1",
@@ -29118,9 +29069,9 @@
       }
     },
     "word-wrap": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.4.tgz",
-      "integrity": "sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA=="
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ=="
     },
     "workbox-background-sync": {
       "version": "6.5.4",

package.json

@@ -79,7 +79,6 @@
     ]
   },
   "devDependencies": {
-    "@types/react-syntax-highlighter": "^15.5.3",
-    "@playwright/test": "^1.36.2"
+    "@types/react-syntax-highlighter": "^15.5.3"
   }
 }

playwright.config.ts

@@ -1,80 +0,0 @@
-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/App.tsx

@@ -70,7 +70,16 @@ 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 &&
@@ -115,6 +124,8 @@ function App() {
                     </Layout>
                 }
             </Provider>
+
+        </ConfigProvider>
         </>
     )
 }

src/components/AccessControlEdit.tsx

@@ -50,7 +50,7 @@ interface FormPolicy {
 }
 
 const AccessControlEdit = () => {
-  const { optionRender, blueTagRender, tagGroups, grayTagRender } =
+  const { optionRender, blueTagRender, grayTagRender } =
     useGetGroupTagHelpers();
 
   const { getTokenSilently } = useGetTokenSilently();
@@ -64,7 +64,7 @@ const AccessControlEdit = () => {
     { label: "Drop", value: "drop" },
   ];
   const protocols: SelectProps["options"] = [
-    { label: "ALL", value: "all" },
+    { label: "All", value: "all" },
     { label: "TCP", value: "tcp" },
     { label: "UDP", value: "udp" },
     { label: "ICMP", value: "icmp" },
@@ -81,7 +81,7 @@ const AccessControlEdit = () => {
     biDirectional: false,
     reverseDirectional: false,
   });
-  // const [tagGroups, setTagGroups] = useState([] as string[]);
+  const [tagGroups, setTagGroups] = useState([] as string[]);
   const [formPolicy, setFormPolicy] = useState({} as FormPolicy);
   const [form] = Form.useForm();
   const inputNameRef = useRef<any>(null);
@@ -99,9 +99,9 @@ const AccessControlEdit = () => {
   useEffect(() => {
     if (editDescription) inputDescriptionRef.current!.focus({ cursor: "end" });
   }, [editDescription]);
-  // useEffect(() => {
-  //   setTagGroups(groups?.map((g) => g.name) || []);
-  // }, [groups]);
+  useEffect(() => {
+    setTagGroups(groups?.map((g) => g.name) || []);
+  }, [groups]);
   useEffect(() => {
     if (!policy) return;
     const fPolicy = {
@@ -115,10 +115,10 @@ const AccessControlEdit = () => {
       ports: policy.rules[0].ports,
       action: policy.rules[0].action,
       tagSourceGroups: policy.rules[0].sources
-        ? policy.rules[0].sources?.map((t) => t.id || "")
+        ? policy.rules[0].sources?.map((t) => t.name)
         : [],
       tagDestinationGroups: policy.rules[0].destinations
-        ? policy.rules[0].destinations?.map((t) => t.id || "")
+        ? policy.rules[0].destinations?.map((t) => t.name)
         : [],
     } as FormPolicy;
     setFormPolicy(fPolicy);
@@ -139,21 +139,17 @@ const AccessControlEdit = () => {
   const createPolicyToSave = (): PolicyToSave => {
     const sources =
       groups
-        ?.filter((g) => formPolicy.tagSourceGroups.includes(g.id || ""))
+        ?.filter((g) => formPolicy.tagSourceGroups.includes(g.name))
         .map((g) => g.id || "") || [];
-
     const destinations =
       groups
-        ?.filter((g) => formPolicy.tagDestinationGroups.includes(g.id || ""))
+        ?.filter((g) => formPolicy.tagDestinationGroups.includes(g.name))
         .map((g) => g.id || "") || [];
-
-    const existingGroupsNames: any[] = groups?.map((g) => g.id);
     const sourcesNoId = formPolicy.tagSourceGroups.filter(
-      (s) => !existingGroupsNames.includes(s)
+      (s) => !tagGroups.includes(s)
     );
-
     const destinationsNoId = formPolicy.tagDestinationGroups.filter(
-      (s) => !existingGroupsNames.includes(s)
+      (s) => !tagGroups.includes(s)
     );
     const groupsToSave = uniq([...sourcesNoId, ...destinationsNoId]);
     return {
@@ -461,8 +457,11 @@ const AccessControlEdit = () => {
               },
             ]}
           />
-
-          <Card bordered={true} style={{ marginBottom: "7px" }}>
+          <Card
+            bordered={true}
+            // title={setupKey.name}
+            style={{ marginBottom: "7px" }}
+          >
             <div style={{ maxWidth: "550px" }}>
               <Form
                 layout="vertical"
@@ -509,6 +508,7 @@ const AccessControlEdit = () => {
                               <Form.Item
                                 name="name"
                                 label=""
+                                style={{ margin: "0" }}
                                 rules={[
                                   {
                                     required: true,
@@ -532,7 +532,7 @@ const AccessControlEdit = () => {
                           {!editDescription ? (
                             <div
                               style={{
-                                margin: "0 0 39px",
+                                margin: "12px 0 30px",
                                 lineHeight: "22px",
                                 cursor: "pointer",
                               }}
@@ -551,7 +551,7 @@ const AccessControlEdit = () => {
                             <Form.Item
                               name="description"
                               label="Description"
-                              style={{ marginTop: 10, fontWeight: "500" }}
+                              style={{ marginTop: 24, fontWeight: "500" }}
                             >
                               <Input
                                 placeholder="Add description..."
@@ -568,7 +568,7 @@ const AccessControlEdit = () => {
                       </Row>
                     </Header>
                   </Col>
-                  <Col span={24} style={{ marginBottom: "15px" }}>
+                  <Col span={24}>
                     <Form.Item name="enabled" label="">
                       <div
                         style={{
@@ -579,7 +579,6 @@ const AccessControlEdit = () => {
                         <Switch
                           onChange={handleChangeDisabled}
                           defaultChecked={policy.enabled}
-                          size="small"
                         />
                         <div>
                           <label
@@ -607,7 +606,6 @@ const AccessControlEdit = () => {
                       </div>
                     </Form.Item>
                   </Col>
-
                   <Col span={24}>
                     <Row gutter={15}>
                       <Col span={10}>
@@ -624,16 +622,9 @@ const AccessControlEdit = () => {
                             tagRender={blueTagRender}
                             onChange={handleChangeSource}
                             dropdownRender={dropDownRenderGroups}
-                            optionFilterProp="serchValue"
                           >
-                            {tagGroups.map((m, index) => (
-                              <Option
-                                key={index}
-                                value={m.id}
-                                serchValue={m.name}
-                              >
-                                {optionRender(m.name, m.id)}
-                              </Option>
+                            {tagGroups.map((m) => (
+                              <Option key={m}>{optionRender(m)}</Option>
                             ))}
                           </Select>
                         </Form.Item>
@@ -784,23 +775,16 @@ const AccessControlEdit = () => {
                             tagRender={blueTagRender}
                             onChange={handleChangeDestination}
                             dropdownRender={dropDownRenderGroups}
-                            optionFilterProp="serchValue"
                           >
-                            {tagGroups.map((m, index) => (
-                              <Option
-                                key={index}
-                                value={m.id}
-                                serchValue={m.name}
-                              >
-                                {optionRender(m.name, m.id)}
-                              </Option>
+                            {tagGroups.map((m) => (
+                              <Option key={m}>{optionRender(m)}</Option>
                             ))}
                           </Select>
                         </Form.Item>
                       </Col>
                     </Row>
                   </Col>
-                  <Col span={24} style={{ marginBottom: "15px" }}>
+                  <Col span={24}>
                     <Paragraph
                       type={"secondary"}
                       style={{ marginTop: "-15px", marginBottom: "30px" }}
@@ -809,7 +793,7 @@ const AccessControlEdit = () => {
                       protocol below
                     </Paragraph>
                   </Col>
-                  <Col span={24} style={{ marginBottom: "15px" }}>
+                  <Col span={24}>
                     <Row>
                       <Col span={10}>
                         <Form.Item
@@ -846,14 +830,7 @@ const AccessControlEdit = () => {
                                 maxWidth: "260px",
                                 fontWeight: "500",
                               }}
-                              placeholder={
-                                <div
-                                  color={"rgba(0,0,0,0.25)"}
-                                  className="arimo-font"
-                                >
-                                  Select ports
-                                </div>
-                              }
+                              placeholder={<div color={"rgba(0,0,0,0.25)"} className="arimo-font">Select ports</div>}
                               className="menlo-font"
                               value={formPolicyCopy}
                               disabled={true}
@@ -885,14 +862,7 @@ const AccessControlEdit = () => {
                                 maxWidth: "260px",
                                 fontWeight: "500",
                               }}
-                              placeholder={
-                                <div
-                                  color={"rgba(0,0,0,0.25)"}
-                                  className="arimo-font"
-                                >
-                                  Select ports
-                                </div>
-                              }
+                              placeholder={<div color={"rgba(0,0,0,0.25)"} className="arimo-font">Select ports</div>}
                               tagRender={grayTagRender}
                               onChange={handleChangePorts}
                               className="menlo-font"
@@ -920,7 +890,7 @@ const AccessControlEdit = () => {
                 justifyContent: "start",
                 padding: 0,
                 gap: "10px",
-                marginTop: "12px",
+                marginTop: "30px",
               }}
               key={0}
             >

src/components/AccessControlNew.tsx

@@ -50,12 +50,8 @@ interface FormPolicy {
 }
 
 const AccessControlNew = () => {
-  const {
-    optionRender,
-    blueTagRender,
-    tagGroups,
-    grayTagRender,
-  } = useGetGroupTagHelpers();
+  const { optionRender, grayTagRender, blueTagRender } =
+    useGetGroupTagHelpers();
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
   const setupNewPolicyVisible = useSelector(
@@ -67,7 +63,7 @@ const AccessControlNew = () => {
     { label: "Drop", value: "drop" },
   ];
   const protocols: SelectProps["options"] = [
-    { label: "ALL", value: "all" },
+    { label: "All", value: "all" },
     { label: "TCP", value: "tcp" },
     { label: "UDP", value: "udp" },
     { label: "ICMP", value: "icmp" },
@@ -85,7 +81,7 @@ const AccessControlNew = () => {
     biDirectional: true,
     reverseDirectional: true,
   });
-  // const [tagGroups, setTagGroups] = useState([] as string[]);
+  const [tagGroups, setTagGroups] = useState([] as string[]);
   const [formPolicy, setFormPolicy] = useState({} as FormPolicy);
   const [form] = Form.useForm();
   const inputNameRef = useRef<any>(null);
@@ -97,9 +93,9 @@ const AccessControlNew = () => {
   useEffect(() => {
     if (editDescription) inputDescriptionRef.current!.focus({ cursor: "end" });
   }, [editDescription]);
-  // useEffect(() => {
-  //   setTagGroups(groups?.map((g) => g.name) || []);
-  // }, [groups]);
+  useEffect(() => {
+    setTagGroups(groups?.map((g) => g.name) || []);
+  }, [groups]);
   useEffect(() => {
     if (!policy) return;
     const fPolicy = {
@@ -126,26 +122,19 @@ const AccessControlNew = () => {
   const createPolicyToSave = (): PolicyToSave => {
     const sources =
       groups
-        ?.filter((g) => formPolicy.tagSourceGroups.includes(g.id || ""))
+        ?.filter((g) => formPolicy.tagSourceGroups.includes(g.name))
         .map((g) => g.id || "") || [];
-
     const destinations =
       groups
-        ?.filter((g) => formPolicy.tagDestinationGroups.includes(g.id || ""))
+        ?.filter((g) => formPolicy.tagDestinationGroups.includes(g.name))
         .map((g) => g.id || "") || [];
-
-
-    const existingGroupsNames: any[] = groups?.map((g) => g.id);
     const sourcesNoId = formPolicy.tagSourceGroups.filter(
-      (s) => !existingGroupsNames.includes(s)
+      (s) => !tagGroups.includes(s)
     );
-
     const destinationsNoId = formPolicy.tagDestinationGroups.filter(
-      (s) => !existingGroupsNames.includes(s)
+      (s) => !tagGroups.includes(s)
     );
-
     const groupsToSave = uniq([...sourcesNoId, ...destinationsNoId]);
-
     return {
       id: formPolicy.id,
       name: formPolicy.name,
@@ -467,20 +456,18 @@ const AccessControlNew = () => {
                       textAlign: "start",
                       whiteSpace: "pre-line",
                       fontSize: "18px",
+                      margin: "0px",
                       fontWeight: "500",
                     }}
                   >
-                    Create rule
+                    Create Rule
                   </Paragraph>
                   <Paragraph
                     type={"secondary"}
                     style={{
                       textAlign: "start",
                       whiteSpace: "pre-line",
-                      marginTop: "-20px",
-                      fontSize: "14px",
-                      paddingBottom: "25px",
-                      marginBottom: "4px",
+                      paddingBottom: "15px",
                     }}
                   >
                     Use this rule to restrict access to groups of resources
@@ -573,12 +560,9 @@ const AccessControlNew = () => {
                         tagRender={blueTagRender}
                         onChange={handleChangeSource}
                         dropdownRender={dropDownRenderGroups}
-                        optionFilterProp="serchValue"
                       >
-                        {tagGroups.map((m, index) => (
-                          <Option key={index} value={m.id} serchValue={m.name}>
-                            {optionRender(m.name, m.id)}
-                          </Option>
+                        {tagGroups.map((m) => (
+                          <Option key={m}>{optionRender(m)}</Option>
                         ))}
                       </Select>
                     </Form.Item>
@@ -729,12 +713,9 @@ const AccessControlNew = () => {
                         tagRender={blueTagRender}
                         onChange={handleChangeDestination}
                         dropdownRender={dropDownRenderGroups}
-                        optionFilterProp="serchValue"
                       >
-                        {tagGroups.map((m, index) => (
-                          <Option key={index} value={m.id} serchValue={m.name}>
-                            {optionRender(m.name, m.id)}
-                          </Option>
+                        {tagGroups.map((m) => (
+                          <Option key={m}>{optionRender(m)}</Option>
                         ))}
                       </Select>
                     </Form.Item>
@@ -786,8 +767,6 @@ const AccessControlNew = () => {
                       color: "rgba(0, 0, 0, 0.88)",
                       fontSize: "14px",
                       fontWeight: "500",
-                      padding: "0 0 2px",
-                      display: "inline-block",
                     }}
                   >
                     Ports
@@ -849,16 +828,9 @@ const AccessControlNew = () => {
                       className="menlo-font"
                       placeholder={
                         formPolicy.protocol === "all" ||
-                        formPolicy.protocol === "icmp" ? (
-                          "All"
-                        ) : (
-                          <div
-                            color={"rgba(0,0,0,0.25)"}
-                            className="arimo-font"
-                          >
-                            Select ports
-                          </div>
-                        )
+                        formPolicy.protocol === "icmp"
+                          ? "All"
+                          : (<div color={"rgba(0,0,0,0.25)"} className="arimo-font">Select ports</div>)
                       }
                       tagRender={grayTagRender}
                       onChange={handleChangePorts}
@@ -887,7 +859,6 @@ const AccessControlNew = () => {
                     }}
                   >
                     <Switch
-                      size="small"
                       onChange={handleChangeDisabled}
                       defaultChecked={true}
                     />
@@ -919,7 +890,7 @@ const AccessControlNew = () => {
               </Col>
               <Col
                 span={24}
-                style={{ marginTop: "10px", marginBottom: "24px" }}
+                style={{ marginTop: "20px", marginBottom: "25px" }}
               >
                 <Text type={"secondary"}>
                   Learn more about
@@ -929,7 +900,7 @@ const AccessControlNew = () => {
                     href="https://docs.netbird.io/how-to/manage-network-access"
                   >
                     {" "}
-                    access controls
+                    Access Controls
                   </a>
                 </Text>
               </Col>

src/components/NameServerGroupAdd.tsx

@@ -32,7 +32,6 @@ import {
 } from "../store/nameservers/types";
 import { useGetGroupTagHelpers } from "../utils/groups";
 import { useGetTokenSilently } from "../utils/token";
-import { domainValidator } from "../utils/common";
 
 const { Paragraph, Text } = Typography;
 
@@ -273,6 +272,21 @@ const NameServerGroupAdd = () => {
     setEditDescription(status);
   };
 
+  const domainRegex =
+    /(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/;
+
+  const domainValidator = (_: RuleObject, domain: string) => {
+    if (domainRegex.test(domain)) {
+      return Promise.resolve();
+    }
+    setIsPrimary(false);
+    return Promise.reject(
+      new Error(
+        "Please enter a valid domain, e.g. example.com or intra.example.com"
+      )
+    );
+  };
+
   const nameValidator = (_: RuleObject, value: string) => {
     const found = nsGroupData.find(
       (u) => u.name == value && u.id !== formNSGroup.id
@@ -317,117 +331,121 @@ const NameServerGroupAdd = () => {
     { add, remove }: any,
     { errors }: any
   ) => (
-    <div style={{ width: "100%", maxWidth: "360px" }}>
-      <label
-        style={{
-          color: "rgba(0, 0, 0, 0.88)",
-          fontSize: "14px",
-          fontWeight: "500",
-          marginBottom: "10px",
-          display: "block",
-        }}
-      >
-        Nameservers
-      </label>
+    <Col>
+      <div style={{ width: "100%", maxWidth: "360px" }}>
+        <label
+          style={{
+            color: "rgba(0, 0, 0, 0.88)",
+            fontSize: "14px",
+            fontWeight: "500",
+            marginBottom: "10px",
+            display: "block",
+          }}
+        >
+          Nameservers
+        </label>
 
-      {!!fields.length && (
-        <Row align="middle">
-          <Col span={4} style={{ textAlign: "left" }}>
-            <Typography.Text
-              style={{ color: "#818183", paddingLeft: "5px" }}
-            ></Typography.Text>
-          </Col>
-          <Col span={10} style={{ textAlign: "left" }}>
-            <Typography.Text style={{ color: "#818183", paddingLeft: "5px" }}>
-              Nameserver IP
-            </Typography.Text>
-          </Col>
-          <Col span={4} style={{ textAlign: "left" }}>
-            <Typography.Text style={{ color: "#818183", paddingLeft: "5px" }}>
-              Port
-            </Typography.Text>
-          </Col>
-          <Col span={4} />
-        </Row>
-      )}
-      {fields.map((field, index) => {
-        return (
-          <Row key={index}>
+        {!!fields.length && (
+          <Row align="middle">
             <Col span={4} style={{ textAlign: "left" }}>
-              <Form.Item
-                style={{ margin: "3px" }}
-                name={[field.name, "ns_type"]}
-                rules={[{ required: true, message: "Missing first protocol" }]}
-                initialValue={"udp"}
-              >
-                <Select
-                  disabled
-                  style={{ width: "100%" }}
-                  className="style-like-text"
-                >
-                  <Option value="udp">UDP</Option>
-                </Select>
-              </Form.Item>
+              <Typography.Text
+                style={{ color: "#818183", paddingLeft: "5px" }}
+              ></Typography.Text>
             </Col>
-            <Col span={10} style={{ margin: "1px" }}>
-              <Form.Item
-                style={{ margin: "1px" }}
-                name={[field.name, "ip"]}
-                rules={[{ validator: ipValidator }]}
-              >
-                <Input
-                  placeholder="e.g. X.X.X.X"
-                  style={{ width: "100%" }}
-                  autoComplete="off"
-                />
-              </Form.Item>
+            <Col span={10} style={{ textAlign: "left" }}>
+              <Typography.Text style={{ color: "#818183", paddingLeft: "5px" }}>
+                Nameserver IP
+              </Typography.Text>
             </Col>
-            <Col span={4} style={{ textAlign: "center" }}>
-              <Form.Item
-                style={{ margin: "1px" }}
-                name={[field.name, "port"]}
-                rules={[{ required: true, message: "Missing port" }]}
-                initialValue={53}
-              >
-                <InputNumber placeholder="Port" style={{ width: "100%" }} />
-              </Form.Item>
-            </Col>
-            <Col
-              span={2}
-              style={{
-                textAlign: "center",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <MinusCircleOutlined onClick={() => remove(field.name)} />
+            <Col span={4} style={{ textAlign: "left" }}>
+              <Typography.Text style={{ color: "#818183", paddingLeft: "5px" }}>
+                Port
+              </Typography.Text>
             </Col>
+            <Col span={4} />
           </Row>
-        );
-      })}
+        )}
+        {fields.map((field, index) => {
+          return (
+            <Row key={index}>
+              <Col span={4} style={{ textAlign: "left" }}>
+                <Form.Item
+                  style={{ margin: "3px" }}
+                  name={[field.name, "ns_type"]}
+                  rules={[
+                    { required: true, message: "Missing first protocol" },
+                  ]}
+                  initialValue={"udp"}
+                >
+                  <Select
+                    disabled
+                    style={{ width: "100%" }}
+                    className="style-like-text"
+                  >
+                    <Option value="udp">UDP</Option>
+                  </Select>
+                </Form.Item>
+              </Col>
+              <Col span={10} style={{ margin: "1px" }}>
+                <Form.Item
+                  style={{ margin: "1px" }}
+                  name={[field.name, "ip"]}
+                  rules={[{ validator: ipValidator }]}
+                >
+                  <Input
+                    placeholder="e.g. X.X.X.X"
+                    style={{ width: "100%" }}
+                    autoComplete="off"
+                  />
+                </Form.Item>
+              </Col>
+              <Col span={4} style={{ textAlign: "center" }}>
+                <Form.Item
+                  style={{ margin: "1px" }}
+                  name={[field.name, "port"]}
+                  rules={[{ required: true, message: "Missing port" }]}
+                  initialValue={53}
+                >
+                  <InputNumber placeholder="Port" style={{ width: "100%" }} />
+                </Form.Item>
+              </Col>
+              <Col
+                span={2}
+                style={{
+                  textAlign: "center",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <MinusCircleOutlined onClick={() => remove(field.name)} />
+              </Col>
+            </Row>
+          );
+        })}
 
-      <Row>
-        <Col span={20}>
-          <Form.Item>
-            <Button
-              type="dashed"
-              onClick={() => add()}
-              block
-              style={{
-                maxWidth: "270px",
-                marginTop: "5px",
-              }}
-              disabled={fields.length > 1}
-              icon={<PlusOutlined />}
-            >
-              Add nameserver
-            </Button>
-            <Form.ErrorList errors={errors} />
-          </Form.Item>
-        </Col>
-      </Row>
-    </div>
+        <Row>
+          <Col span={20}>
+            <Form.Item>
+              <Button
+                type="dashed"
+                onClick={() => add()}
+                block
+                style={{
+                  maxWidth: "270px",
+                  marginTop: "5px",
+                }}
+                disabled={fields.length > 1}
+                icon={<PlusOutlined />}
+              >
+                Add Nameserver
+              </Button>
+              <Form.ErrorList errors={errors} />
+            </Form.Item>
+          </Col>
+        </Row>
+      </div>
+    </Col>
   );
 
   // @ts-ignore
@@ -452,9 +470,9 @@ const NameServerGroupAdd = () => {
             <Paragraph
               type={"secondary"}
               style={{
-                marginTop: "-4px",
+                marginTop: "-2",
                 fontWeight: "400",
-                marginBottom: "4px",
+                marginBottom: "0",
               }}
             >
               Add domain if you want to have a specific one
@@ -538,20 +556,18 @@ const NameServerGroupAdd = () => {
                   textAlign: "start",
                   whiteSpace: "pre-line",
                   fontSize: "18px",
+                  margin: "0px",
                   fontWeight: "500",
                 }}
               >
-                Add nameserver
+                Add Nameserver
               </Paragraph>
               <Paragraph
                 type={"secondary"}
                 style={{
                   textAlign: "start",
                   whiteSpace: "pre-line",
-                  marginTop: "-20px",
-                  fontSize: "14px",
-                  paddingBottom: "25px",
-                  marginBottom: "4px",
+                  paddingBottom: "0",
                 }}
               >
                 Use this nameserver to resolve domains in your network
@@ -690,7 +706,7 @@ const NameServerGroupAdd = () => {
                     </Row>
                   </Header>
                 </Col>
-                <Col span={24}>
+                <Col span={24} flex="auto">
                   <Form.List
                     name="nameservers"
                     rules={[{ validator: formListValidator }]}
@@ -698,7 +714,7 @@ const NameServerGroupAdd = () => {
                     {renderNSList}
                   </Form.List>
                 </Col>
-                <Col span={24}>
+                <Col span={24} flex="auto">
                   <Form.List name="domains">{renderDomains}</Form.List>
                 </Col>
                 <Col span={24}>
@@ -714,9 +730,9 @@ const NameServerGroupAdd = () => {
                   <Paragraph
                     type={"secondary"}
                     style={{
-                      marginTop: "-4px",
+                      marginTop: "-2",
                       fontWeight: "400",
-                      marginBottom: "4px",
+                      marginBottom: "0",
                     }}
                   >
                     Advertise this route to peers that belong to the following
@@ -733,12 +749,9 @@ const NameServerGroupAdd = () => {
                       tagRender={blueTagRender}
                       onChange={handleChangeTags}
                       dropdownRender={dropDownRender}
-                      optionFilterProp="serchValue"
                     >
-                      {tagGroups.map((m, index) => (
-                        <Option key={index} value={m.id} serchValue={m.name}>
-                          {optionRender(m.name, m.id)}
-                        </Option>
+                      {tagGroups.map((m) => (
+                        <Option key={m}>{optionRender(m)}</Option>
                       ))}
                     </Select>
                   </Form.Item>
@@ -774,9 +787,8 @@ const NameServerGroupAdd = () => {
                             marginBottom: "0",
                           }}
                         >
-                          {formNSGroup.enabled
-                            ? "Disable this server if you don't want it to apply immediately"
-                            : " Enable this server if you want it to apply immediately"}
+                          Disable this server if you don't want it to apply
+                          immediately
                         </Paragraph>
                       </div>
                     </div>
@@ -784,7 +796,7 @@ const NameServerGroupAdd = () => {
                 </Col>
                 <Col
                   span={24}
-                  style={{ marginTop: "10px", marginBottom: "24px" }}
+                  style={{ marginTop: "10px", marginBottom: "20px" }}
                 >
                   <Text type={"secondary"}>
                     Learn more about
@@ -818,7 +830,7 @@ const NameServerGroupAdd = () => {
                       onClick={handleFormSubmit}
                       disabled={savedNSGroup.loading}
                     >
-                      Create nameserver
+                      Create Nameserver
                     </Button>
                   </Space>
                 </Col>