Add support to network routes with peer group (#275)

support to routes with peer group
updated the view logic to support the new type
updated peer view as well
for now, we are supporting a single group, but that can be extended

.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"
@@ -54,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_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE"
+ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$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/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 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

@@ -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,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 } 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,49 @@
+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.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/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/components/AccessControlNew.tsx

@@ -29,7 +29,7 @@ import { uniq } from "lodash";
 import { Header } from "antd/es/layout/layout";
 import { RuleObject } from "antd/lib/form";
 import { useGetTokenSilently } from "../utils/token";
-import {useGetGroupTagHelpers} from "../utils/groups";
+import { useGetGroupTagHelpers } from "../utils/groups";
 
 const { Paragraph } = Typography;
 const { Option } = Select;
@@ -52,9 +52,10 @@ interface FormPolicy {
 const AccessControlNew = () => {
   const {
     optionRender,
-      grayTagRender,
-      blueTagRender
-  } = useGetGroupTagHelpers()
+    blueTagRender,
+    tagGroups,
+    grayTagRender,
+  } = useGetGroupTagHelpers();
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
   const setupNewPolicyVisible = useSelector(
@@ -66,11 +67,13 @@ 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" },
   ];
+  const formPolicyCopy: any = ["ALL"];
+
   const policy = useSelector((state: RootState) => state.policy.policy);
   const savedPolicy = useSelector(
     (state: RootState) => state.policy.savedPolicy
@@ -82,7 +85,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);
@@ -94,9 +97,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 = {
@@ -123,19 +126,26 @@ const AccessControlNew = () => {
   const createPolicyToSave = (): PolicyToSave => {
     const sources =
       groups
-        ?.filter((g) => formPolicy.tagSourceGroups.includes(g.name))
+        ?.filter((g) => formPolicy.tagSourceGroups.includes(g.id || ""))
         .map((g) => g.id || "") || [];
+
     const destinations =
       groups
-        ?.filter((g) => formPolicy.tagDestinationGroups.includes(g.name))
+        ?.filter((g) => formPolicy.tagDestinationGroups.includes(g.id || ""))
         .map((g) => g.id || "") || [];
+
+
+    const existingGroupsNames: any[] = groups?.map((g) => g.id);
     const sourcesNoId = formPolicy.tagSourceGroups.filter(
-      (s) => !tagGroups.includes(s)
+      (s) => !existingGroupsNames.includes(s)
     );
+
     const destinationsNoId = formPolicy.tagDestinationGroups.filter(
-      (s) => !tagGroups.includes(s)
+      (s) => !existingGroupsNames.includes(s)
     );
+
     const groupsToSave = uniq([...sourcesNoId, ...destinationsNoId]);
+
     return {
       id: formPolicy.id,
       name: formPolicy.name,
@@ -274,9 +284,7 @@ const AccessControlNew = () => {
       <Divider style={{ margin: "8px 0" }} />
       <Row style={{ padding: "0 8px 4px" }}>
         <Col flex="auto">
-          <Text type={"secondary"}>
-            Add new ports by pressing "Enter"
-          </Text>
+          <Text type={"secondary"}>Add new groups by pressing "Enter"</Text>
         </Col>
         <Col flex="none">
           <svg
@@ -458,19 +466,22 @@ const AccessControlNew = () => {
                     style={{
                       textAlign: "start",
                       whiteSpace: "pre-line",
-                      fontSize: "22px",
-                      margin: "0px",
+                      fontSize: "18px",
+                      fontWeight: "500",
                     }}
                   >
-                    Create Rule
+                    Create rule
                   </Paragraph>
                   <Paragraph
-                      type={"secondary"}
-                      style={{
-                        textAlign: "start",
-                        whiteSpace: "pre-line",
-                        paddingBottom: "15px",
-                      }}
+                    type={"secondary"}
+                    style={{
+                      textAlign: "start",
+                      whiteSpace: "pre-line",
+                      marginTop: "-20px",
+                      fontSize: "14px",
+                      paddingBottom: "25px",
+                      marginBottom: "4px",
+                    }}
                   >
                     Use this rule to restrict access to groups of resources
                   </Paragraph>
@@ -480,7 +491,7 @@ const AccessControlNew = () => {
                         style={{
                           whiteSpace: "pre-line",
                           margin: 0,
-                          fontWeight: "bold",
+                          fontWeight: "500",
                         }}
                       >
                         Rule name
@@ -531,7 +542,7 @@ const AccessControlNew = () => {
                         <Form.Item
                           name="description"
                           label="Description"
-                          style={{ marginTop: 24, fontWeight: "600" }}
+                          style={{ marginTop: 24, fontWeight: "500" }}
                         >
                           <Input
                             placeholder="Add description..."
@@ -553,7 +564,7 @@ const AccessControlNew = () => {
                       name="tagSourceGroups"
                       label="Source"
                       rules={[{ validator: selectValidator }]}
-                      style={{ fontWeight: "600" }}
+                      style={{ fontWeight: "500" }}
                     >
                       <Select
                         mode="tags"
@@ -562,9 +573,12 @@ const AccessControlNew = () => {
                         tagRender={blueTagRender}
                         onChange={handleChangeSource}
                         dropdownRender={dropDownRenderGroups}
+                        optionFilterProp="serchValue"
                       >
-                        {tagGroups.map((m) => (
-                          <Option key={m}>{optionRender(m)}</Option>
+                        {tagGroups.map((m, index) => (
+                          <Option key={index} value={m.id} serchValue={m.name}>
+                            {optionRender(m.name, m.id)}
+                          </Option>
                         ))}
                       </Select>
                     </Form.Item>
@@ -706,7 +720,7 @@ const AccessControlNew = () => {
                       name="tagDestinationGroups"
                       label="Destination"
                       rules={[{ validator: selectValidator }]}
-                      style={{ fontWeight: "600" }}
+                      style={{ fontWeight: "500" }}
                     >
                       <Select
                         mode="tags"
@@ -715,9 +729,12 @@ const AccessControlNew = () => {
                         tagRender={blueTagRender}
                         onChange={handleChangeDestination}
                         dropdownRender={dropDownRenderGroups}
+                        optionFilterProp="serchValue"
                       >
-                        {tagGroups.map((m) => (
-                          <Option key={m}>{optionRender(m)}</Option>
+                        {tagGroups.map((m, index) => (
+                          <Option key={index} value={m.id} serchValue={m.name}>
+                            {optionRender(m.name, m.id)}
+                          </Option>
                         ))}
                       </Select>
                     </Form.Item>
@@ -726,24 +743,25 @@ const AccessControlNew = () => {
               </Col>
               <Col span={24}>
                 <Paragraph
-                    type={"secondary"}
-                    style={{  marginTop: "-15px", marginBottom: "30px" }}
+                  type={"secondary"}
+                  style={{ marginTop: "-15px", marginBottom: "30px" }}
                 >
-                  To change traffic direction and ports, select TCP or UDP protocol below
+                  To change traffic direction and ports, select TCP or UDP
+                  protocol below
                 </Paragraph>
               </Col>
               <Col span={24}>
                 <Form.Item
                   name="protocol"
                   label="Protocol"
-                  style={{ fontWeight: "600" }}
+                  style={{ fontWeight: "500" }}
                   className="tag-box"
                 >
                   <Paragraph
                     type={"secondary"}
                     style={{
                       marginTop: "-10px",
-                      fontWeight: "500",
+                      fontWeight: "400",
                       marginBottom: "8px",
                     }}
                   >
@@ -767,7 +785,9 @@ const AccessControlNew = () => {
                     style={{
                       color: "rgba(0, 0, 0, 0.88)",
                       fontSize: "14px",
-                      fontWeight: "600",
+                      fontWeight: "500",
+                      padding: "0 0 2px",
+                      display: "inline-block",
                     }}
                   >
                     Ports
@@ -776,57 +796,87 @@ const AccessControlNew = () => {
                     type={"secondary"}
                     style={{
                       marginTop: "-5px",
-                      fontWeight: "500",
+                      fontWeight: "400",
                       marginBottom: "8px",
                     }}
                   >
                     Allow network traffic and access only to specified ports
                   </Paragraph>
                 </div>
-                <Form.Item
-                  name="ports"
-                  label=""
-                  style={{ fontWeight: "600" }}
-                  rules={[
-                    {
-                      message: "Directional traffic requires at least one port",
-                      validator: selectPortProtocolValidator,
-                      required: false,
-                    },
-                    {
-                      message: "Port value must be in 1..65535 range",
-                      validator: selectPortRangeValidator,
-                      required: false,
-                    },
-                  ]}
-                >
-                  <Select
-                    mode="tags"
-                    style={{
-                      width: "100%",
-                      maxWidth: "280px",
-                      fontWeight: "500",
-                    }}
-                    className="menlo-font"
-                    placeholder={ (formPolicy.protocol === "all" || formPolicy.protocol === "icmp") ? "Change protocol to add ports" : "Add ports"}
-                    tagRender={grayTagRender}
-                    onChange={handleChangePorts}
-                    dropdownRender={dropDownRenderPorts}
-                    disabled={
-                      formPolicy.protocol === "all" ||
-                      formPolicy.protocol === "icmp"
-                    }
+
+                {formPolicy.protocol === "all" ||
+                formPolicy.protocol === "icmp" ? (
+                  <Form.Item>
+                    <Select
+                      mode="tags"
+                      style={{
+                        width: "100%",
+                        maxWidth: "260px",
+                        fontWeight: "500",
+                      }}
+                      placeholder={<Text>Select ports</Text>}
+                      className="menlo-font"
+                      value={formPolicyCopy}
+                      disabled={true}
+                    ></Select>
+                  </Form.Item>
+                ) : (
+                  <Form.Item
+                    name="ports"
+                    label=""
+                    style={{ fontWeight: "500" }}
+                    rules={[
+                      {
+                        message:
+                          "Directional traffic requires at least one port",
+                        validator: selectPortProtocolValidator,
+                        required: false,
+                      },
+                      {
+                        message: "Port value must be in 1..65535 range",
+                        validator: selectPortRangeValidator,
+                        required: false,
+                      },
+                    ]}
                   >
-                    {formPolicy &&
-                      formPolicy.ports?.map((m) => (
-                        <Option key={m}>
-                          <Tag style={{ marginRight: 3 }}>
-                            {m}
-                          </Tag>
-                        </Option>
-                      ))}
-                  </Select>
-                </Form.Item>
+                    <Select
+                      mode="tags"
+                      style={{
+                        width: "100%",
+                        maxWidth: "280px",
+                        fontWeight: "500",
+                      }}
+                      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>
+                        )
+                      }
+                      tagRender={grayTagRender}
+                      onChange={handleChangePorts}
+                      dropdownRender={dropDownRenderPorts}
+                      disabled={
+                        formPolicy.protocol === "all" ||
+                        formPolicy.protocol === "icmp"
+                      }
+                    >
+                      {formPolicy &&
+                        formPolicy.ports?.map((m) => (
+                          <Option key={m}>
+                            <Tag style={{ marginRight: 3 }}>{m}</Tag>
+                          </Option>
+                        ))}
+                    </Select>
+                  </Form.Item>
+                )}
               </Col>
               <Col span={24}>
                 <Form.Item name="enabled" label="">
@@ -837,6 +887,7 @@ const AccessControlNew = () => {
                     }}
                   >
                     <Switch
+                      size="small"
                       onChange={handleChangeDisabled}
                       defaultChecked={true}
                     />
@@ -845,7 +896,7 @@ const AccessControlNew = () => {
                         style={{
                           color: "rgba(0, 0, 0, 0.88)",
                           fontSize: "14px",
-                          fontWeight: "bold",
+                          fontWeight: "500",
                         }}
                       >
                         Enabled
@@ -854,7 +905,7 @@ const AccessControlNew = () => {
                         type={"secondary"}
                         style={{
                           marginTop: "-2",
-                          fontWeight: "500",
+                          fontWeight: "400",
                           marginBottom: "0",
                         }}
                       >
@@ -868,7 +919,7 @@ const AccessControlNew = () => {
               </Col>
               <Col
                 span={24}
-                style={{ marginTop: "20px", marginBottom: "25px" }}
+                style={{ marginTop: "10px", marginBottom: "24px" }}
               >
                 <Text type={"secondary"}>
                   Learn more about

src/components/FooterComponent.tsx

@@ -6,7 +6,7 @@ const { Footer } = Layout
 export default () => {
   return (
       <Footer style={{ textAlign: 'center',  bottom: "0"}}>
-          Copyright © 2022 <a href="https://netbird.io">NetBird Authors</a>
+          Copyright © 2023 <a href="https://netbird.io">NetBird Authors</a>
       </Footer>
   );
-};
+};