Add "New dashboard" Banner (#315)

* Add new dashboard Banner.tsx

* display on localdev and add todo note

---------

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

.github/workflows/codespell.yml

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

docker/README.md

@@ -1,15 +1,15 @@
 # Wiretrustee Dashboard
-Wiretrustee Dashboard is a the Wiretrustee Managemenet server UI. It allow users to signin, view setup keys and manage peers. This image is **not ready** for production use.
+Wiretrustee Dashboard is a the Wiretrustee Management server UI. It allow users to signin, view setup keys and manage peers. This image is **not ready** for production use.
 ## Tags
 ```latest``` ```vX.X.X``` not available yet.
 
-```main``` builded on every PR being merged to the repository
+```main``` built on every PR being merged to the repository
 ## How to use this image
 HTTP run:
 ```shell
 docker run -d --rm -p 80:80 wiretrustee/dashboard:main
 ```
-Using SSL certificate from Let's Encript®:
+Using SSL certificate from Let's Encrypt®:
 ```shell
 docker run -d --rm -p 80:80 -p 443:443 \
   -e LETSENCRYPT_DOMAIN=app.mydomain.com \

e2e-tests/create-test-env.sh

@@ -387,7 +387,7 @@ check_nb_domain() {
 
   if [ "$DOMAIN" == "netbird.example.com" ]; then
     echo "The NETBIRD_DOMAIN cannot be netbird.example.com" > /dev/stderr
-    retrun 1
+    return 1
   fi
   return 0
 }

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

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

e2e-tests/pages/login-page.ts

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

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

@@ -6,6 +6,7 @@ export class AddPeerModal {
     private readonly windowsTab = this.page.getByTestId('add-peer-modal-windows-tab')
     private readonly macTab = this.page.getByTestId('add-peer-modal-mac-tab')
     private readonly androidTab = this.page.getByTestId('add-peer-modal-android-tab')
+    private readonly iosTab = this.page.getByTestId('add-peer-modal-ios-tab')
     private readonly dockerTab = this.page.getByTestId('add-peer-modal-docker-tab')
     private readonly linuxTabText = this.page.locator('pre').filter({ hasText: 'curl -fsSL https://pkgs.netbird.io/install.sh | sh' })
     private readonly windowsDownloadButton = this.page.getByTestId('download-windows-button')
@@ -57,6 +58,13 @@ export class AddPeerModal {
         })
       }
 
+      async openIOSTab() {
+        await test.step('Open iOS tab on add peer modal', async () => {
+            await this.iosTab.click();
+
+        })
+      }
+
       async openDockerTab() {
         await test.step('Open Docker tab on add peer modal', async () => {
             await this.dockerTab.click();
@@ -94,6 +102,12 @@ export class AddPeerModal {
         })
       }
 
+      async assertiOSDownloadButtonHasCorrectLink() {
+        await test.step('Assert iOS download button has a correct link', async () => {
+            await expect(this.androidDownloadButton).toHaveAttribute('href', 'https://apps.apple.com/app/netbird-p2p-vpn/id6469329339');
+        })
+      }
+
       async assertDockerDownloadButtonHasCorrectLink() {
         await test.step('Assert Docker download button has a correct link', async () => {
             await expect(this.dockerDownloadButton).toHaveAttribute('href', 'https://docs.docker.com/engine/install/');

e2e-tests/pages/peers-page.ts

@@ -1,4 +1,4 @@
-import { Page, test, expect } from "@playwright/test";
+import { Page, test } from "@playwright/test";
 
 export class PeersPage {
     private readonly addNewPeerButton = this.page.getByTestId('add-new-peer-button')

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

@@ -1,33 +1,22 @@
-import { test, expect } from '@playwright/test';
-import {AddPeerModal} from '../pages/modals/add-peer-modal'
-import {TopMenu} from '../pages/top-menu';
+import { test } from '@playwright/test'
+import {LoginPage} from '../pages/login-page'
+import {AccessControlPage} from '../pages/access-control-page'
 
-const URL = 'https://app.netbird.io/'
-const localUrl = 'http://localhost:3000/'
-let addPeerModal: AddPeerModal;
-let topMenu: TopMenu;
+let loginPage: LoginPage
+let accessControlPage: AccessControlPage
 
 test.beforeEach(async ({ page }) => {
-  addPeerModal = new AddPeerModal(page);
-  await page.goto(localUrl);
-  await page.getByPlaceholder('username@domain').fill('admin@localhost');
-  await page.getByRole('button', { name: 'next' }).click();
-  await page.getByLabel('Password').fill('testMe123@');
-  await page.getByRole('button', { name: 'next' }).click();
-  const skipButton = page.getByRole('button', { name: 'skip' });
-  if (await skipButton.isVisible({ timeout: 300 })) {
-      await skipButton.click();
-  }
-  await addPeerModal.assertPeerModalIsVisible();
+  loginPage = new LoginPage(page);
+  await loginPage.doLogin();
 });
 
  test('Confirm that new user has Default access', async ({ page }) => {
-  topMenu = new TopMenu(page);
-  await addPeerModal.closeAddPeerModal();
-  await addPeerModal.assertPeerModalIsNotVisible();
-  await topMenu.clickOnAccessControlOnTopMenu();
-  await expect(page.getByRole('cell', { name: 'Default' })).toBeVisible();
-  await page.getByRole('button', { name: 'Delete' }).click();
-  await expect(page.getByTestId('confirm-delete-modal-title')).toBeVisible();
-  await page.getByRole('button', { name: 'Cancel' }).click();
+  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,48 +1,46 @@
-import { test } from '@playwright/test';
+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'
 
-const URL = 'https://app.netbird.io/'
-const localUrl = 'http://localhost:3000/'
-let addPeerModal: AddPeerModal;
-let peersPage: PeersPage;
+let addPeerModal: AddPeerModal
+let peersPage: PeersPage
+let loginPage: LoginPage
 
 test.beforeEach(async ({ page }) => {
   addPeerModal = new AddPeerModal(page);
-  await page.goto(localUrl);
-  await page.getByPlaceholder('username@domain').fill('admin@localhost');
-  await page.getByRole('button', { name: 'next' }).click();
-  await page.getByLabel('Password').fill('testMe123@');
-  await page.getByRole('button', { name: 'next' }).click();
-  const skipButton = page.getByRole('button', { name: 'skip' });
-  if (await skipButton.isVisible({ timeout: 300 })) {
-      await skipButton.click();
-  }
+  loginPage = new LoginPage(page);
+  await loginPage.doLogin();
   await addPeerModal.assertPeerModalIsVisible();
 });
 
-test('Test Linux tab on a first access add peer modal / @bc', async function ({ }) {
+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 ({ }) => {
+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 ({ }) => {
+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 ({  }) => {
+test('Test iOS tab on a first access add peer modal', async () => {
+  await addPeerModal.openIOSTab();
+  await addPeerModal.assertiOSDownloadButtonHasCorrectLink();
+});
+
+test('Test Android tab on a first access add peer modal', async () => {
   await addPeerModal.openAndroidTab();
   await addPeerModal.assertAndroidDownloadButtonHasCorrectLink();
 });
 
- test('Test Docker tab on a first access add peer modal', async ({  }) => {
+ test('Test Docker tab on a first access add peer modal', async () => {
   await addPeerModal.openDockerTab();
   await addPeerModal.assertDockerDownloadButtonHasCorrectLink();
  });

package-lock.json

@@ -12,8 +12,6 @@
         "@axa-fr/react-oidc": "^5.14.0",
         "@headlessui/react": "^1.5.0",
         "@heroicons/react": "^1.0.4",
-        "@stripe/react-stripe-js": "^2.1.2",
-        "@stripe/stripe-js": "^2.1.0",
         "@testing-library/jest-dom": "^5.11.4",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
@@ -65,9 +63,9 @@
       }
     },
     "node_modules/@adobe/css-tools": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
-      "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g=="
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz",
+      "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg=="
     },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
@@ -3407,24 +3405,6 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
-    "node_modules/@stripe/react-stripe-js": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-2.1.2.tgz",
-      "integrity": "sha512-2JcKRvOdMD698uGrY0cINLHb6XHnY24L+wlWlw2+TbI2aXlQZ9t8Mc+KssFES+EuNgISbrp7fJR3w/13epfiOw==",
-      "dependencies": {
-        "prop-types": "^15.7.2"
-      },
-      "peerDependencies": {
-        "@stripe/stripe-js": "^1.44.1 || ^2.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/@stripe/stripe-js": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-2.1.0.tgz",
-      "integrity": "sha512-AdMHWqIq/s3TLmoyuzdb6l21STKDKNm82cjce1VelyQGinVNjVgSEPH5UDtxENEP7OzgMZH8RTphFMi0fMJGLQ=="
-    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -17193,9 +17173,9 @@
   },
   "dependencies": {
     "@adobe/css-tools": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
-      "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g=="
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz",
+      "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg=="
     },
     "@ampproject/remapping": {
       "version": "2.2.0",
@@ -19497,19 +19477,6 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
-    "@stripe/react-stripe-js": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-2.1.2.tgz",
-      "integrity": "sha512-2JcKRvOdMD698uGrY0cINLHb6XHnY24L+wlWlw2+TbI2aXlQZ9t8Mc+KssFES+EuNgISbrp7fJR3w/13epfiOw==",
-      "requires": {
-        "prop-types": "^15.7.2"
-      }
-    },
-    "@stripe/stripe-js": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-2.1.0.tgz",
-      "integrity": "sha512-AdMHWqIq/s3TLmoyuzdb6l21STKDKNm82cjce1VelyQGinVNjVgSEPH5UDtxENEP7OzgMZH8RTphFMi0fMJGLQ=="
-    },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",

package.json

@@ -7,8 +7,6 @@
     "@axa-fr/react-oidc": "^5.14.0",
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.4",
-    "@stripe/react-stripe-js": "^2.1.2",
-    "@stripe/stripe-js": "^2.1.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -81,7 +79,7 @@
     ]
   },
   "devDependencies": {
-    "@playwright/test": "^1.36.2",
-    "@types/react-syntax-highlighter": "^15.5.3"
+    "@types/react-syntax-highlighter": "^15.5.3",
+    "@playwright/test": "^1.36.2"
   }
 }

playwright.config.ts

@@ -39,15 +39,15 @@ export default defineConfig({
       use: { channel: 'chrome', },
     },
 
-    {
-      name: 'firefox',
-      use: {  browserName: 'firefox', },
-    },
-
-    {
-      name: 'webkit',
-      use: { browserName: 'webkit', },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: {  browserName: 'firefox', },
+    // },
+    //
+    // {
+    //   name: 'webkit',
+    //   use: { browserName: 'webkit', },
+    // },
 
     /* Test against mobile viewports. */
     // {

src/.local-config.json.bac

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

src/App.tsx

@@ -22,6 +22,7 @@ import {SecureLoading} from "./components/Loading";
 import DNS from "./views/DNS";
 import Activity from "./views/Activity";
 import Settings from "./views/Settings";
+import {isLocalDev, isNetBirdHosted} from "./utils/common";
 
 
 const {Header, Content} = Layout;
@@ -75,7 +76,7 @@ function App() {
                 {!show && <SecureLoading padding="3em" width={50} height={50}/>}
                 {show &&
                     <Layout>
-                        <Banner/>
+                        {(isNetBirdHosted() || isLocalDev()) && <Banner/>}
                         <Header className="header" style={{
                             display: "flex",
                             flexDirection: "column",

src/components/AccessControlNew.tsx

@@ -284,7 +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

src/components/Banner.tsx

@@ -15,18 +15,20 @@ const Banner = () => {
 		localStorage.setItem(banner_closed_key,'true');
 	};
 
-	const announcement = "New Release! Manage DNS with NetBird."
+	// todo: when updating this announcement, ensure to
+	// remove the condition on App.tsx that limits the current banner to cloud and local dev
+	const announcement = "Discover the new NetBird Dashboard with a brand new look and feel."
 
 	const announcement_md5 = Md5.hashStr(announcement)
 
 	const linkLearnMore = () => {
 		return (
 			<a
-				href="https://docs.netbird.io/how-to/manage-dns-in-your-network"
+				href="https://preview.netbird.io/peers"
 				className="font-bold underline"
 				target="_blank"
 				rel="noreferrer"
-			><Text strong style={{color: "#ffffff"}}>Learn more&nbsp;<span aria-hidden="true">&rarr;</span></Text></a>
+			><Text strong style={{color: "#ffffff"}}>Try it out now&nbsp;<span aria-hidden="true">&rarr;</span></Text></a>
 		)
 	}
 
@@ -36,7 +38,7 @@ const Banner = () => {
 
 		if((!stored_banner_closed || stored_banner_closed !== 'true') ||
 			(!store_banner_md5 || store_banner_md5 !== announcement_md5)) {
-			//setShow(true);
+			setShow(true);
 			localStorage.setItem(banner_md5_key,announcement_md5);
 			localStorage.setItem(banner_closed_key,'false');
 		}

src/components/NameServerGroupAdd.tsx

@@ -73,6 +73,7 @@ const NameServerGroupAdd = () => {
   const inputNameRef = useRef<any>(null);
   const inputDescriptionRef = useRef<any>(null);
   const [selectCustom, setSelectCustom] = useState(false);
+  const [matchDomains, setMatchDomains] = useState(0);
 
   useEffect(() => {
     if (editName)
@@ -87,7 +88,6 @@ const NameServerGroupAdd = () => {
         cursor: "end",
       });
   }, [editDescription]);
-
   useEffect(() => {
     if (!nsGroup) return;
 
@@ -117,6 +117,7 @@ const NameServerGroupAdd = () => {
         nameservers: [] as NameServer[],
         groups: [],
         enabled: false,
+        search_domains_enabled: false,
       } as NameServerGroup)
     );
     setEditName(false);
@@ -125,6 +126,7 @@ const NameServerGroupAdd = () => {
   };
 
   const onChange = (changedValues: any) => {
+
     if (changedValues.primary !== undefined) {
       setIsPrimary(changedValues.primary);
     }
@@ -156,6 +158,7 @@ const NameServerGroupAdd = () => {
       ],
       groups: [],
       enabled: true,
+      search_domains_enabled: false,
     },
     {
       name: cloudflareChoice,
@@ -176,6 +179,7 @@ const NameServerGroupAdd = () => {
       ],
       groups: [],
       enabled: true,
+      search_domains_enabled: false,
     },
     {
       name: quad9Choice,
@@ -196,6 +200,7 @@ const NameServerGroupAdd = () => {
       ],
       groups: [],
       enabled: true,
+      search_domains_enabled: false,
     },
   ];
 
@@ -203,6 +208,7 @@ const NameServerGroupAdd = () => {
     let nsGroupLocal = {} as NameServerGroup;
     if (value === customChoice) {
       nsGroupLocal = nsGroup;
+      nsGroupLocal.domains = [];
     } else {
       defaultDNSOptions.forEach((nsg) => {
         if (value === nsg.name) {
@@ -262,6 +268,8 @@ const NameServerGroupAdd = () => {
       groups: existingGroups,
       groupsToCreate: newGroups,
       enabled: values.enabled,
+      search_domains_enabled:
+        matchDomains > 0 ? formNSGroup.search_domains_enabled : false,
     } as NameServerGroupToSave;
   };
 
@@ -462,6 +470,7 @@ const NameServerGroupAdd = () => {
           </Col>
         </Space>
       </Row>
+      {setMatchDomains(fields.length)}
       {fields.map((field, index) => {
         return (
           <Row key={index} style={{ marginBottom: "5px" }}>
@@ -522,6 +531,13 @@ const NameServerGroupAdd = () => {
     });
   };
 
+  const handleChangeMarkDomain = (checked: boolean) => {
+    setFormNSGroup({
+      ...formNSGroup,
+      search_domains_enabled: checked,
+    });
+  };
+
   return (
     <>
       {nsGroup && (
@@ -701,6 +717,46 @@ const NameServerGroupAdd = () => {
                 <Col span={24}>
                   <Form.List name="domains">{renderDomains}</Form.List>
                 </Col>
+
+                {matchDomains > 0 && (
+                  <Col span={24}>
+                    <Form.Item name="search_domains_enabled" label="">
+                      <div
+                        style={{
+                          display: "flex",
+                          gap: "15px",
+                        }}
+                      >
+                        <Switch
+                          onChange={handleChangeMarkDomain}
+                          size="small"
+                        />
+                        <div>
+                          <label
+                            style={{
+                              color: "rgba(0, 0, 0, 0.88)",
+                              fontSize: "14px",
+                              fontWeight: "500",
+                            }}
+                          >
+                            Mark match domains as search domains
+                          </label>
+                          <Paragraph
+                            type={"secondary"}
+                            style={{
+                              marginTop: "-2",
+                              fontWeight: "400",
+                              marginBottom: "0",
+                            }}
+                          >
+                            E.g., "peer.example.com" will be accessible with
+                            "peer"
+                          </Paragraph>
+                        </div>
+                      </div>
+                    </Form.Item>
+                  </Col>
+                )}
                 <Col span={24}>
                   <label
                     style={{