From 1e436f6651f571367d648f8025dce95d183fd520 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 13 Sep 2022 11:57:25 +0530
Subject: [PATCH 01/16] chore(cypress): improve menu selection by filtering by
 unique classname

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/ColumnFilter.vue    |  3 +++
 scripts/cypress/support/commands.js                   | 11 +++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
index 62283b0987..7af198935b 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
@@ -158,6 +158,7 @@ defineExpose({
                 placeholder="Group op"
                 @click.stop
                 @change="saveOrUpdate(filter, i)"
+                dropdown-class-name="nc-dropdown-filter-logical-op-group"
               >
                 <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value" class="">
                   {{ op.text }}
@@ -205,6 +206,7 @@ defineExpose({
               :disabled="filter.readOnly"
               @click.stop
               @change="filterUpdateCondition(filter, i)"
+              dropdown-class-name="nc-dropdown-filter-logical-op"
             >
               <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value">
                 {{ op.text }}
@@ -231,6 +233,7 @@ defineExpose({
               :disabled="filter.readOnly"
               hide-details
               @change="filterUpdateCondition(filter, i)"
+              dropdown-class-name="nc-dropdown-filter-comp-op"
             >
               <a-select-option v-for="compOp in comparisonOpList" :key="compOp.value" :value="compOp.value" class="">
                 {{ compOp.text }}
diff --git a/scripts/cypress/support/commands.js b/scripts/cypress/support/commands.js
index 84020b99a1..10a96a7eeb 100644
--- a/scripts/cypress/support/commands.js
+++ b/scripts/cypress/support/commands.js
@@ -286,9 +286,9 @@ Cypress.Commands.add('getActiveModal', () => {
   return cy.get('.ant-modal-content:visible').last();
 });
 
-Cypress.Commands.add('getActiveMenu', (overlayClassName) => {
-  if (overlayClassName) {
-    return cy.get(`${overlayClassName} .ant-dropdown-content:visible`);
+Cypress.Commands.add('getActiveMenu', (overlaySelector) => {
+  if (overlaySelector) {
+    return cy.get(`${overlaySelector} .ant-dropdown-content:visible`);
   }
   return cy.get('.ant-dropdown-content:visible').last();
 });
@@ -297,7 +297,10 @@ Cypress.Commands.add('getActivePopUp', () => {
   return cy.get('.ant-menu-submenu-popup:visible').last();
 });
 
-Cypress.Commands.add('getActiveSelection', () => {
+Cypress.Commands.add('getActiveSelection', (selector) => {
+  if(selector) {
+    return cy.get(`${selector}.ant-select-dropdown:visible`).last();
+  }
   return cy.get('.ant-select-dropdown:visible').last();
 });
 

From 6c8171dd5bebdd2510e6aadccfd3618f2faf83ce Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 13 Sep 2022 12:08:59 +0530
Subject: [PATCH 02/16] chore(cypress): improve drawer selection by filtering
 by unique classname

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/general/HelpAndSupport.vue     | 3 ++-
 .../nc-gui/components/smartsheet/expanded-form/index.vue  | 1 +
 scripts/cypress/integration/common/8a_webhook.js          | 8 ++++----
 scripts/cypress/support/commands.js                       | 5 ++++-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/general/HelpAndSupport.vue b/packages/nc-gui/components/general/HelpAndSupport.vue
index d7219a75a2..b01ba278c5 100644
--- a/packages/nc-gui/components/general/HelpAndSupport.vue
+++ b/packages/nc-gui/components/general/HelpAndSupport.vue
@@ -27,11 +27,12 @@ const openSwaggerLink = () => {
   <a-drawer
     v-bind="$attrs"
     v-model:visible="showDrawer"
-    class="h-full relative"
+    class="h-full relative nc-help-and-support"
     placement="right"
     size="small"
     :closable="false"
     :body-style="{ padding: '12px 24px 0 24px', background: '#fafafa' }"
+
   >
     <div class="flex flex-col w-full h-full p-4 pb-0">
       <!-- Help center -->
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 0f4e69fc0b..39890b9500 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -108,6 +108,7 @@ export default {
     width="min(90vw,1000px)"
     :body-style="{ 'padding': 0, 'display': 'flex', 'flex-direction': 'column' }"
     :closable="false"
+    class="nc-drawer-expanded-form"
   >
     <Header @cancel="onClose" />
     <div class="!bg-gray-100 rounded flex-1">
diff --git a/scripts/cypress/integration/common/8a_webhook.js b/scripts/cypress/integration/common/8a_webhook.js
index 6192d8f8f5..0533cec803 100644
--- a/scripts/cypress/integration/common/8a_webhook.js
+++ b/scripts/cypress/integration/common/8a_webhook.js
@@ -161,12 +161,12 @@ function addNewRow(index, cellValue) {
     cy.get(".nc-add-new-row-btn").click();
     cy.wait(1000);
     cy.get(".nc-expand-col-Title").find(".nc-cell > input").first().type(cellValue);
-    cy.getActiveDrawer()
+    cy.getActiveDrawer('.nc-drawer-expanded-form')
         .find(".ant-btn-primary")
         .click();
 
     cy.toastWait("updated successfully");
-    cy.getActiveDrawer()
+    cy.getActiveDrawer('.nc-drawer-expanded-form')
       .find(".ant-btn")
       .contains("Cancel")
       .click();
@@ -184,14 +184,14 @@ function updateRow(index, cellValue) {
       .clear()
       .type(cellValue);
 
-    cy.getActiveDrawer()
+    cy.getActiveDrawer('.nc-drawer-expanded-form')
       .find("button")
       .contains("Save row")
       .click({ force: true });
 
     // partial toast message
     cy.toastWait("updated successfully");
-    cy.getActiveDrawer()
+    cy.getActiveDrawer('.nc-drawer-expanded-form')
         .find("button")
         .contains("Cancel")
         .click({ force: true });
diff --git a/scripts/cypress/support/commands.js b/scripts/cypress/support/commands.js
index 10a96a7eeb..4696d59c2f 100644
--- a/scripts/cypress/support/commands.js
+++ b/scripts/cypress/support/commands.js
@@ -304,7 +304,10 @@ Cypress.Commands.add('getActiveSelection', (selector) => {
   return cy.get('.ant-select-dropdown:visible').last();
 });
 
-Cypress.Commands.add('getActiveDrawer', () => {
+Cypress.Commands.add('getActiveDrawer', (selector) => {
+  if(selector) {
+    return cy.get(`${selector} .ant-drawer-content:visible`).last();
+  }
   return cy.get('.ant-drawer-content:visible').last();
 });
 

From 043e8d304024cc31517ea31161a05b704103e1c0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 13 Sep 2022 12:22:39 +0530
Subject: [PATCH 03/16] chore(cypress): improve modal selection by filtering by
 unique classname

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/dlg/TableCreate.vue | 2 +-
 scripts/cypress/support/commands.js            | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index 5a340074a2..f2c8ebb64c 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/packages/nc-gui/components/dlg/TableCreate.vue
@@ -80,7 +80,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" centered @keydown.esc="dialogShow = false">
+  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" centered @keydown.esc="dialogShow = false" wrap-class-name="nc-modal-table-create">
     <template #footer>
       <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 
diff --git a/scripts/cypress/support/commands.js b/scripts/cypress/support/commands.js
index 4696d59c2f..94b4d6ad25 100644
--- a/scripts/cypress/support/commands.js
+++ b/scripts/cypress/support/commands.js
@@ -282,7 +282,10 @@ Cypress.Commands.add('printLocalStorage', () => {
   cy.task('log', JSON.stringify(LOCAL_STORAGE_MEMORY, null, 2));
 });
 
-Cypress.Commands.add('getActiveModal', () => {
+Cypress.Commands.add('getActiveModal', (wrapperSelector) => {
+  if(wrapperSelector){
+    return cy.get(`${wrapperSelector} .ant-modal-content:visible`).last();
+  }
   return cy.get('.ant-modal-content:visible').last();
 });
 
@@ -320,12 +323,12 @@ Cypress.Commands.add('createTable', (name) => {
   cy.wait(1000);
   cy.get('.nc-add-new-table').should('exist').click();
   cy.wait(1000);
-  cy.getActiveModal().find(`input[type="text"]:visible`)
+  cy.getActiveModal('.nc-modal-table-create').find(`input[type="text"]:visible`)
     .click()
     .clear()
     .type(name);
   // submit button
-  cy.getActiveModal().find('button.ant-btn-primary:visible').click();
+  cy.getActiveModal('.nc-modal-table-create').find('button.ant-btn-primary:visible').click();
   cy.wait(1000);
   cy.get('.xc-row-table.nc-grid').should('exist');
   // cy.get('.ant-tabs-tab-active > .ant-tabs-tab-btn').contains(name).should("exist");

From 9c721f542686783e688ea3e74a051ddadff59a61 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 13 Sep 2022 13:05:06 +0530
Subject: [PATCH 04/16] chore(CY): add class name for modal & menu

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../components/cell/attachment/Modal.vue      |  8 +++++++-
 .../nc-gui/components/dashboard/TreeView.vue  |  4 ++--
 .../dashboard/settings/AppStore.vue           | 18 +++++++++++++++--
 .../nc-gui/components/dlg/AirtableImport.vue  |  8 +++++++-
 .../nc-gui/components/dlg/QuickImport.vue     |  7 ++++++-
 .../nc-gui/components/dlg/TableCreate.vue     |  8 +++++++-
 packages/nc-gui/components/dlg/ViewCreate.vue |  2 +-
 packages/nc-gui/components/dlg/ViewDelete.vue |  2 +-
 .../components/general/HelpAndSupport.vue     |  3 +--
 .../nc-gui/components/general/MiniSidebar.vue |  4 ++--
 .../nc-gui/components/general/ReleaseInfo.vue |  2 +-
 .../components/general/language/index.vue     |  2 +-
 .../smartsheet-column/SelectOptions.vue       |  6 +++++-
 .../components/smartsheet-header/Cell.vue     |  8 +++++++-
 .../components/smartsheet-header/Menu.vue     |  2 +-
 .../smartsheet-header/VirtualCell.vue         |  8 +++++++-
 .../smartsheet-toolbar/ColumnFilter.vue       |  6 +++---
 .../smartsheet-toolbar/ColumnFilterMenu.vue   |  2 +-
 .../components/smartsheet-toolbar/Export.vue  |  2 +-
 .../smartsheet-toolbar/FieldsMenu.vue         |  2 +-
 .../smartsheet-toolbar/MoreActions.vue        |  8 +++++++-
 .../smartsheet-toolbar/SortListMenu.vue       |  2 +-
 .../smartsheet-toolbar/ViewActions.vue        | 10 ++++++++--
 .../components/smartsheet/ApiSnippet.vue      |  2 +-
 .../nc-gui/components/smartsheet/Form.vue     |  2 +-
 .../nc-gui/components/smartsheet/Grid.vue     | 12 +++++++++--
 .../smartsheet/sidebar/toolbar/DebugMeta.vue  |  2 +-
 .../tabs/auth/ApiTokenManagement.vue          | 20 ++++++++++++++++---
 .../components/tabs/auth/UserManagement.vue   | 11 ++++++++--
 .../tabs/auth/user-management/ShareBase.vue   |  2 +-
 .../tabs/auth/user-management/UsersModal.vue  | 10 +++++++++-
 .../virtual-cell/components/ListItems.vue     |  8 +++++++-
 packages/nc-gui/components/webhook/Drawer.vue |  1 +
 packages/nc-gui/layouts/base.vue              |  2 +-
 .../pages/[projectType]/[projectId]/index.vue |  7 ++++++-
 .../pages/index/index/create-external.vue     |  8 +++++++-
 packages/nc-gui/pages/index/index/index.vue   |  2 +-
 .../nc-gui/pages/projects/index/index.vue     |  2 +-
 .../cypress/support/page_objects/mainPage.js  |  2 +-
 39 files changed, 168 insertions(+), 49 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Modal.vue b/packages/nc-gui/components/cell/attachment/Modal.vue
index 8b754b4bfd..36e4e6c436 100644
--- a/packages/nc-gui/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui/components/cell/attachment/Modal.vue
@@ -58,7 +58,13 @@ function onClick(item: Record<string, any>) {
 </script>
 
 <template>
-  <a-modal v-model:visible="modalVisible" class="nc-attachment-modal" width="80%" :footer="null">
+  <a-modal
+    v-model:visible="modalVisible"
+    class="nc-attachment-modal"
+    width="80%"
+    :footer="null"
+    wrap-class-name="nc-modal-attachment-expand-cell"
+  >
     <template #title>
       <div class="flex gap-4">
         <div
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 7ed63aafe9..b4f93a7778 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -218,7 +218,7 @@ function openTableCreateDialog() {
 
 <template>
   <div class="nc-treeview-container flex flex-col">
-    <a-dropdown :trigger="['contextmenu']">
+    <a-dropdown :trigger="['contextmenu']" overlay-class-name="nc-dropdown-tree-view-context-menu">
       <div class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-col scrollbar-thin-dull" :class="{ 'mb-[20px]': isSharedBase }">
         <div class="py-1 px-3 flex w-full items-center gap-1 cursor-pointer" @contextmenu="setMenuContext('main')">
           <span class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
@@ -238,7 +238,7 @@ function openTableCreateDialog() {
 
             <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{ $t('tooltip.addTable') }}</span>
 
-            <a-dropdown v-if="!isSharedBase" :trigger="['click']" @click.stop>
+            <a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
               <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu" />
 
               <template #overlay>
diff --git a/packages/nc-gui/components/dashboard/settings/AppStore.vue b/packages/nc-gui/components/dashboard/settings/AppStore.vue
index 41fb891a56..cef21e2448 100644
--- a/packages/nc-gui/components/dashboard/settings/AppStore.vue
+++ b/packages/nc-gui/components/dashboard/settings/AppStore.vue
@@ -72,7 +72,14 @@ onMounted(async () => {
 </script>
 
 <template>
-  <a-modal v-model:visible="showPluginInstallModal" :closable="false" centered min-height="300" :footer="null">
+  <a-modal
+    v-model:visible="showPluginInstallModal"
+    :closable="false"
+    centered
+    min-height="300"
+    :footer="null"
+    wrap-class-name="nc-modal-plugin-install"
+  >
     <AppInstall
       v-if="pluginApp && showPluginInstallModal"
       :id="pluginApp.id"
@@ -81,7 +88,14 @@ onMounted(async () => {
     />
   </a-modal>
 
-  <a-modal v-model:visible="showPluginUninstallModal" :closable="false" width="24rem" centered :footer="null">
+  <a-modal
+    v-model:visible="showPluginUninstallModal"
+    :closable="false"
+    width="24rem"
+    centered
+    :footer="null"
+    wrap-class-name="nc-modal-plugin-uninstall"
+  >
     <div class="flex flex-col h-full">
       <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
         {{ `Click on confirm to reset ${pluginApp && pluginApp.title}` }}
diff --git a/packages/nc-gui/components/dlg/AirtableImport.vue b/packages/nc-gui/components/dlg/AirtableImport.vue
index f07ee7e414..1469e46061 100644
--- a/packages/nc-gui/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui/components/dlg/AirtableImport.vue
@@ -231,7 +231,13 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" class="p-2" @keydown.esc="dialogShow = false">
+  <a-modal
+    v-model:visible="dialogShow"
+    width="max(30vw, 600px)"
+    class="p-2"
+    wrap-class-name="nc-modal-airtable-import"
+    @keydown.esc="dialogShow = false"
+  >
     <div class="px-5">
       <!--      Quick Import -->
       <div class="mt-5 prose-xl font-weight-bold">{{ $t('title.quickImport') }} - AIRTABLE</div>
diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index fc66500f8b..09d62b95ca 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -284,7 +284,12 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" :width="modalWidth" @keydown.esc="dialogShow = false">
+  <a-modal
+    v-model:visible="dialogShow"
+    :width="modalWidth"
+    wrap-class-name="nc-modal-quick-import"
+    @keydown.esc="dialogShow = false"
+  >
     <div class="px-5">
       <div class="prose-xl font-weight-bold my-5">{{ importMeta.header }}</div>
 
diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index f2c8ebb64c..20c4161e8e 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/packages/nc-gui/components/dlg/TableCreate.vue
@@ -80,7 +80,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" centered @keydown.esc="dialogShow = false" wrap-class-name="nc-modal-table-create">
+  <a-modal
+    v-model:visible="dialogShow"
+    width="max(30vw, 600px)"
+    centered
+    wrap-class-name="nc-modal-table-create"
+    @keydown.esc="dialogShow = false"
+  >
     <template #footer>
       <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 
diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 6ae0a22858..e9c79307e1 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -140,7 +140,7 @@ async function onSubmit() {
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" class="!top-[35%]" :confirm-loading="loading">
+  <a-modal v-model:visible="vModel" class="!top-[35%]" :confirm-loading="loading" wrap-class-name="nc-modal-view-create">
     <template #title>
       {{ $t('general.create') }} <span class="text-capitalize">{{ typeAlias }}</span> {{ $t('objects.view') }}
     </template>
diff --git a/packages/nc-gui/components/dlg/ViewDelete.vue b/packages/nc-gui/components/dlg/ViewDelete.vue
index 6c3eb147e2..76a2f9c3a5 100644
--- a/packages/nc-gui/components/dlg/ViewDelete.vue
+++ b/packages/nc-gui/components/dlg/ViewDelete.vue
@@ -48,7 +48,7 @@ async function onDelete() {
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" class="!top-[35%]" :confirm-loading="isLoading">
+  <a-modal v-model:visible="vModel" class="!top-[35%]" :confirm-loading="isLoading" wrap-class-name="nc-modal-view-delete">
     <template #title> {{ $t('general.delete') }} {{ $t('objects.view') }} </template>
 
     {{ $t('msg.info.deleteViewConfirmation') }}
diff --git a/packages/nc-gui/components/general/HelpAndSupport.vue b/packages/nc-gui/components/general/HelpAndSupport.vue
index b01ba278c5..c97ad0f013 100644
--- a/packages/nc-gui/components/general/HelpAndSupport.vue
+++ b/packages/nc-gui/components/general/HelpAndSupport.vue
@@ -27,12 +27,11 @@ const openSwaggerLink = () => {
   <a-drawer
     v-bind="$attrs"
     v-model:visible="showDrawer"
-    class="h-full relative nc-help-and-support"
+    class="h-full relative nc-drawer-help-and-support"
     placement="right"
     size="small"
     :closable="false"
     :body-style="{ padding: '12px 24px 0 24px', background: '#fafafa' }"
-
   >
     <div class="flex flex-col w-full h-full p-4 pb-0">
       <!-- Help center -->
diff --git a/packages/nc-gui/components/general/MiniSidebar.vue b/packages/nc-gui/components/general/MiniSidebar.vue
index 8237b9c85f..f41b4a6717 100644
--- a/packages/nc-gui/components/general/MiniSidebar.vue
+++ b/packages/nc-gui/components/general/MiniSidebar.vue
@@ -28,7 +28,7 @@ const logout = () => {
     collapsible
     theme="light"
   >
-    <a-dropdown placement="bottom" :trigger="['click']">
+    <a-dropdown placement="bottom" :trigger="['click']" overlay-class-name="nc-dropdown">
       <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 nc-noco-brand-icon">
         <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
       </div>
@@ -60,7 +60,7 @@ const logout = () => {
     </a-dropdown>
 
     <div id="sidebar" ref="sidebar" class="text-white flex-auto flex flex-col items-center w-full">
-      <a-dropdown :trigger="['contextmenu']" placement="right">
+      <a-dropdown :trigger="['contextmenu']" placement="right" overlay-class-name="nc-dropdown">
         <div :class="[route.name === 'index' ? 'active' : '']" class="nc-mini-sidebar-item" @click="navigateTo('/')">
           <MdiFolder class="cursor-pointer transform hover:scale-105 text-2xl" />
         </div>
diff --git a/packages/nc-gui/components/general/ReleaseInfo.vue b/packages/nc-gui/components/general/ReleaseInfo.vue
index e682ad30ed..a3b0441aaf 100644
--- a/packages/nc-gui/components/general/ReleaseInfo.vue
+++ b/packages/nc-gui/components/general/ReleaseInfo.vue
@@ -40,7 +40,7 @@ onMounted(async () => await fetchReleaseInfo())
 
 <template>
   <div v-if="releaseAlert" class="flex items-center">
-    <a-dropdown :trigger="['click']" placement="bottom">
+    <a-dropdown :trigger="['click']" placement="bottom" overlay-class-name="nc-dropdown-upgrade-menu">
       <a-button class="!bg-primary !border-none">
         <div class="flex gap-1 items-center text-white">
           <span class="text-sm font-weight-medium">{{ $t('activity.upgrade.available') }}</span>
diff --git a/packages/nc-gui/components/general/language/index.vue b/packages/nc-gui/components/general/language/index.vue
index 92a84fdc40..682cc47721 100644
--- a/packages/nc-gui/components/general/language/index.vue
+++ b/packages/nc-gui/components/general/language/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-dropdown class="select-none color-transition cursor-pointer" :trigger="['click']">
+  <a-dropdown class="select-none color-transition cursor-pointer" :trigger="['click']" overlay-class-name="nc-dropdown-menu-translate">
     <div v-bind="$attrs" class="flex items-center justify-center">
       <MaterialSymbolsTranslate class="md:text-xl nc-menu-translate" />
     </div>
diff --git a/packages/nc-gui/components/smartsheet-column/SelectOptions.vue b/packages/nc-gui/components/smartsheet-column/SelectOptions.vue
index 40a52cc1f2..2233c0b81d 100644
--- a/packages/nc-gui/components/smartsheet-column/SelectOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/SelectOptions.vue
@@ -97,7 +97,11 @@ watch(inputs, () => {
       <template #item="{ element, index }">
         <div class="flex py-1 items-center">
           <MdiDragIcon small class="nc-child-draggable-icon handle" />
-          <a-dropdown v-model:visible="colorMenus[index]" :trigger="['click']">
+          <a-dropdown
+            v-model:visible="colorMenus[index]"
+            :trigger="['click']"
+            overlay-class-name="nc-dropdown-select-color-options"
+          >
             <template #overlay>
               <GeneralColorPicker v-model="element.color" :pick-button="true" @update:model-value="colorMenus[index] = false" />
             </template>
diff --git a/packages/nc-gui/components/smartsheet-header/Cell.vue b/packages/nc-gui/components/smartsheet-header/Cell.vue
index 33050a4429..ded690a824 100644
--- a/packages/nc-gui/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet-header/Cell.vue
@@ -28,7 +28,13 @@ const editColumnDropdown = ref(false)
       <SmartsheetHeaderMenu v-if="!isForm && isUIAllowed('edit-column')" @edit="editColumnDropdown = true" />
     </template>
 
-    <a-dropdown v-model:visible="editColumnDropdown" class="h-full" :trigger="['click']" placement="bottomRight">
+    <a-dropdown
+      v-model:visible="editColumnDropdown"
+      class="h-full"
+      :trigger="['click']"
+      placement="bottomRight"
+      overlay-class-name="nc-dropdown-edit-column"
+    >
       <div />
       <template #overlay>
         <SmartsheetColumnEditOrAddProvider
diff --git a/packages/nc-gui/components/smartsheet-header/Menu.vue b/packages/nc-gui/components/smartsheet-header/Menu.vue
index 5522edf2a0..7a89b8ed62 100644
--- a/packages/nc-gui/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet-header/Menu.vue
@@ -61,7 +61,7 @@ const setAsPrimaryValue = async () => {
 </script>
 
 <template>
-  <a-dropdown v-if="!isLocked" placement="bottomRight" :trigger="['click']">
+  <a-dropdown v-if="!isLocked" placement="bottomRight" :trigger="['click']" overlay-class-name="nc-dropdown-column-operations">
     <MdiMenuDown class="h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0" />
 
     <template #overlay>
diff --git a/packages/nc-gui/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
index 8a99ae3861..a71454e7da 100644
--- a/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
@@ -115,7 +115,13 @@ const tooltipMsg = computed(() => {
       <SmartsheetHeaderMenu v-if="!isForm && isUIAllowed('edit-column')" :virtual="true" @edit="editColumnDropdown = true" />
     </template>
 
-    <a-dropdown v-model:visible="editColumnDropdown" class="h-full" :trigger="['click']" placement="bottomRight">
+    <a-dropdown
+      v-model:visible="editColumnDropdown"
+      class="h-full"
+      :trigger="['click']"
+      placement="bottomRight"
+      overlay-class-name="nc-dropdown"
+    >
       <div />
       <template #overlay>
         <SmartsheetColumnEditOrAddProvider
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
index 7af198935b..b417d42871 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue
@@ -156,9 +156,9 @@ defineExpose({
                 :dropdown-match-select-width="false"
                 class="shrink grow-0"
                 placeholder="Group op"
+                dropdown-class-name="nc-dropdown-filter-logical-op-group"
                 @click.stop
                 @change="saveOrUpdate(filter, i)"
-                dropdown-class-name="nc-dropdown-filter-logical-op-group"
               >
                 <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value" class="">
                   {{ op.text }}
@@ -204,9 +204,9 @@ defineExpose({
               class="h-full"
               hide-details
               :disabled="filter.readOnly"
+              dropdown-class-name="nc-dropdown-filter-logical-op"
               @click.stop
               @change="filterUpdateCondition(filter, i)"
-              dropdown-class-name="nc-dropdown-filter-logical-op"
             >
               <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value">
                 {{ op.text }}
@@ -232,8 +232,8 @@ defineExpose({
               variant="solo"
               :disabled="filter.readOnly"
               hide-details
-              @change="filterUpdateCondition(filter, i)"
               dropdown-class-name="nc-dropdown-filter-comp-op"
+              @change="filterUpdateCondition(filter, i)"
             >
               <a-select-option v-for="compOp in comparisonOpList" :key="compOp.value" :value="compOp.value" class="">
                 {{ compOp.text }}
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 36444d2eb6..91e01f3df0 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -51,7 +51,7 @@ const filterAutoSaveLoc = computed({
 </script>
 
 <template>
-  <a-dropdown :trigger="['click']">
+  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu">
     <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
       <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex items-center gap-1">
diff --git a/packages/nc-gui/components/smartsheet-toolbar/Export.vue b/packages/nc-gui/components/smartsheet-toolbar/Export.vue
index c9f30b06e3..8b5cb62242 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/Export.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/Export.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-dropdown :trigger="['click']">
+  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-download-menu">
     <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
       <div class="flex gap-2 items-center">
         <MdiDownload class="group-hover:text-accent text-gray-500" />
diff --git a/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
index 942376818b..fa9a959fb0 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
@@ -116,7 +116,7 @@ const getIcon = (c: ColumnType) =>
 </script>
 
 <template>
-  <a-dropdown :trigger="['click']">
+  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-nc-fields-menu">
     <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
       <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
diff --git a/packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue
index c56cfdb6bd..dbc260bf40 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue
@@ -166,7 +166,13 @@ const exportFile = async (exportType: ExportTypes) => {
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
-    <a-modal v-model:visible="sharedViewListDlg" :title="$t('activity.listSharedView')" width="max(900px,60vw)" :footer="null">
+    <a-modal
+      v-model:visible="sharedViewListDlg"
+      :title="$t('activity.listSharedView')"
+      width="max(900px,60vw)"
+      :footer="null"
+      wrap-class-name="nc-modal-shared-view-list"
+    >
       <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
     </a-modal>
   </div>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue
index fde9e9cd50..0600886f14 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue
@@ -41,7 +41,7 @@ watch(
 </script>
 
 <template>
-  <a-dropdown offset-y class="" :trigger="['click']" overlay-class-name="sort-menu-overlay">
+  <a-dropdown offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-sort-menu">
     <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
       <a-button v-t="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
         ><div class="flex items-center gap-1">
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
index 21a3b30b4b..e8915dabb5 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue
@@ -81,7 +81,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 
 <template>
   <div>
-    <a-dropdown :trigger="['click']">
+    <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
       <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-2 items-center">
           <component
@@ -221,7 +221,13 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
-    <a-modal v-model:visible="sharedViewListDlg" :title="$t('activity.listSharedView')" width="max(900px,60vw)" :footer="null">
+    <a-modal
+      v-model:visible="sharedViewListDlg"
+      :title="$t('activity.listSharedView')"
+      width="max(900px,60vw)"
+      :footer="null"
+      wrap-class-name="nc-modal-shared-view-list"
+    >
       <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
     </a-modal>
     <SmartsheetApiSnippet v-model="showApiSnippetDrawer" />
diff --git a/packages/nc-gui/components/smartsheet/ApiSnippet.vue b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
index e42e55371e..e6278521c1 100644
--- a/packages/nc-gui/components/smartsheet/ApiSnippet.vue
+++ b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
@@ -136,7 +136,7 @@ watch($$(activeLang), (newLang) => {
 <template>
   <a-drawer
     v-model:visible="vModel"
-    class="h-full relative"
+    class="h-full relative nc-drawer-api-snippet"
     style="color: red"
     placement="right"
     size="large"
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 3e7997bb8d..dfe5166e27 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -470,7 +470,7 @@ onMounted(async () => {
             <!-- Drag and drop fields here to hide -->
             {{ $t('msg.info.dragDropHide') }}
           </div>
-          <a-dropdown v-model:visible="showColumnDropdown" :trigger="['click']">
+          <a-dropdown v-model:visible="showColumnDropdown" :trigger="['click']" overlay-class-name="nc-dropdown-form-add-column">
             <a-button type="link" class="w-full caption mt-2" size="large" @click.stop="showColumnDropdown = true">
               <div class="flex items-center prose-sm justify-center text-gray-400">
                 <mdi-plus />
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 8beddeef37..5389221ce0 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -363,7 +363,11 @@ onBeforeUnmount(async () => {
       <a-spin size="large" />
     </div>
     <div v-else class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
-      <a-dropdown v-model:visible="contextMenu" :trigger="isSqlView ? [] : ['contextmenu']">
+      <a-dropdown
+        v-model:visible="contextMenu"
+        :trigger="isSqlView ? [] : ['contextmenu']"
+        overlay-class-name="nc-dropdown-grid-context-menu"
+      >
         <table
           ref="smartTable"
           class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white"
@@ -411,7 +415,11 @@ onBeforeUnmount(async () => {
                 class="cursor-pointer"
                 @click.stop="addColumnDropdown = true"
               >
-                <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
+                <a-dropdown
+                  v-model:visible="addColumnDropdown"
+                  :trigger="['click']"
+                  overlay-class-name="nc-dropdown-grid-add-column"
+                >
                   <div class="h-full w-[60px] flex items-center justify-center">
                     <MdiPlus class="text-sm nc-column-add" />
                   </div>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/toolbar/DebugMeta.vue b/packages/nc-gui/components/smartsheet/sidebar/toolbar/DebugMeta.vue
index 60ef0f660f..25f38ad9d2 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/toolbar/DebugMeta.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/toolbar/DebugMeta.vue
@@ -18,7 +18,7 @@ const localTables = tables.value.filter((t) => metas[t.id as string])
     <mdi-bug-outline class="cursor-pointer" @click="editorOpen = true" />
   </a-tooltip>
 
-  <a-modal v-model:visible="editorOpen" :footer="null" width="80%">
+  <a-modal v-model:visible="editorOpen" :footer="null" width="80%" wrap-class-name="nc-modal-debug-meta">
     <a-tabs v-model:activeKey="tabKey" type="card" closeable="false" class="shadow-sm">
       <a-tab-pane v-for="table in localTables" :key="table.id" :tab="table.title">
         <MonacoEditor v-model="metas[table.id]" class="h-max-[70vh]" :read-only="true" />
diff --git a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
index 282ad42c54..7ca866f904 100644
--- a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
@@ -98,7 +98,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="showNewTokenModal" :closable="false" width="28rem" centered :footer="null">
+  <a-modal
+    v-model:visible="showNewTokenModal"
+    :closable="false"
+    width="28rem"
+    centered
+    :footer="null"
+    wrap-class-name="nc-modal-generate-token"
+  >
     <div class="relative flex flex-col h-full">
       <a-button type="text" class="!absolute top-0 right-0 rounded-md -mt-2 -mr-3" @click="showNewTokenModal = false">
         <template #icon>
@@ -131,7 +138,14 @@ onMounted(() => {
       </a-form>
     </div>
   </a-modal>
-  <a-modal v-model:visible="showDeleteTokenModal" :closable="false" width="28rem" centered :footer="null">
+  <a-modal
+    v-model:visible="showDeleteTokenModal"
+    :closable="false"
+    width="28rem"
+    centered
+    :footer="null"
+    wrap-class-name="nc-modal-delete-token"
+  >
     <div class="flex flex-col h-full">
       <div class="flex flex-row justify-center mt-2 text-center w-full text-base">This action will remove this API Token</div>
       <div class="flex mt-6 justify-center space-x-2">
@@ -195,7 +209,7 @@ onMounted(() => {
               </a-button>
             </a-tooltip>
 
-            <a-dropdown :trigger="['click']" class="flex" placement="bottomRight">
+            <a-dropdown :trigger="['click']" class="flex" placement="bottomRight" overlay-class-name="nc-dropdown-api-token-mgmt">
               <div class="flex flex-row items-center">
                 <a-button type="text" class="!px-0">
                   <div class="flex flex-row items-center h-[1.2rem]">
diff --git a/packages/nc-gui/components/tabs/auth/UserManagement.vue b/packages/nc-gui/components/tabs/auth/UserManagement.vue
index d69f89fd03..e3fac012df 100644
--- a/packages/nc-gui/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/UserManagement.vue
@@ -173,7 +173,14 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
       @closed="showUserModal = false"
       @reload="loadUsers()"
     />
-    <a-modal v-model:visible="showUserDeleteModal" :closable="false" width="28rem" centered :footer="null">
+    <a-modal
+      v-model:visible="showUserDeleteModal"
+      :closable="false"
+      width="28rem"
+      centered
+      :footer="null"
+      wrap-class-name="nc-modal-delete-user"
+    >
       <div class="flex flex-col h-full">
         <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
           This action will remove this user from this project
@@ -282,7 +289,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             </a-button>
           </a-tooltip>
 
-          <a-dropdown :trigger="['click']" class="flex" placement="bottomRight">
+          <a-dropdown :trigger="['click']" class="flex" placement="bottomRight" overlay-class-name="nc-dropdown-user-mgmt">
             <div class="flex flex-row items-center">
               <a-button type="text" class="!px-0">
                 <div class="flex flex-row items-center h-[1.2rem]">
diff --git a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
index 3340b4eba7..dffea22d20 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
@@ -195,7 +195,7 @@ onMounted(() => {
     <!--    Generate publicly shareable readonly base -->
     <div class="flex text-xs text-gray-500 mt-2 justify-start ml-2">{{ $t('msg.info.generatePublicShareableReadonlyBase') }}</div>
     <div class="mt-4 flex flex-row justify-between mx-1">
-      <a-dropdown v-model="showEditBaseDropdown" class="flex">
+      <a-dropdown v-model="showEditBaseDropdown" class="flex" overlay-class-name="nc-dropdown-shared-base-toggle">
         <a-button>
           <div class="flex flex-row items-center space-x-2 nc-disable-shared-base">
             <div v-if="base?.uuid">{{ $t('activity.shareBase.enable') }}</div>
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index 756e503ee7..cecd6e20bb 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -130,7 +130,15 @@ const clickInviteMore = () => {
 </script>
 
 <template>
-  <a-modal :footer="null" centered :visible="show" :closable="false" width="max(50vw, 44rem)" @cancel="emit('closed')">
+  <a-modal
+    :footer="null"
+    centered
+    :visible="show"
+    :closable="false"
+    width="max(50vw, 44rem)"
+    wrap-class-name="nc-modal-invite-user-and-share-base"
+    @cancel="emit('closed')"
+  >
     <div class="flex flex-col">
       <div class="flex flex-row justify-between items-center pb-1.5 mb-2 border-b-1 w-full">
         <a-typography-title class="select-none" :level="4"> {{ $t('activity.share') }}: {{ project.title }} </a-typography-title>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 42fcfd72c7..1e720a484f 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -104,7 +104,13 @@ watch(expandedFormDlg, (nexVal) => {
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" :footer="null" :title="$t('activity.linkRecord')" :body-style="{ padding: 0 }">
+  <a-modal
+    v-model:visible="vModel"
+    :footer="null"
+    :title="$t('activity.linkRecord')"
+    :body-style="{ padding: 0 }"
+    wrap-class-name="nc-modal-link-record"
+  >
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
       <div class="flex mb-4 items-center gap-2 px-12">
         <a-input
diff --git a/packages/nc-gui/components/webhook/Drawer.vue b/packages/nc-gui/components/webhook/Drawer.vue
index 4da878d1e3..64237ce834 100644
--- a/packages/nc-gui/components/webhook/Drawer.vue
+++ b/packages/nc-gui/components/webhook/Drawer.vue
@@ -29,6 +29,7 @@ async function editHook(hook: Record<string, any>) {
     placement="right"
     width="700px"
     :body-style="{ background: 'rgba(67, 81, 232, 0.05)', padding: '0px 0px', overflow: 'hidden' }"
+    class="nc-drawer-webhook"
     @keydown.esc="vModel = false"
   >
     <a-layout class="">
diff --git a/packages/nc-gui/layouts/base.vue b/packages/nc-gui/layouts/base.vue
index fdb6fed99c..e7d7f2d7d6 100644
--- a/packages/nc-gui/layouts/base.vue
+++ b/packages/nc-gui/layouts/base.vue
@@ -69,7 +69,7 @@ hooks.hook('page:finish', () => {
         </a-tooltip>
 
         <template v-if="signedIn && !isSharedBase">
-          <a-dropdown :trigger="['click']">
+          <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-user-accounts-menu">
             <MdiDotsVertical class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts text-white" @click.prevent />
 
             <template #overlay>
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 4abe8b1268..2d5d534226 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -193,7 +193,12 @@ if (type && name) {
             <img alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
           </a>
 
-          <a-dropdown class="h-full min-w-0 flex-1" :trigger="['click']" placement="bottom">
+          <a-dropdown
+            class="h-full min-w-0 flex-1"
+            :trigger="['click']"
+            placement="bottom"
+            overlay-class-name="nc-dropdown-project-menu"
+          >
             <div
               :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
               :class="[isOpen ? '' : 'justify-center']"
diff --git a/packages/nc-gui/pages/index/index/create-external.vue b/packages/nc-gui/pages/index/index/create-external.vue
index e73d5c004b..47238a5db3 100644
--- a/packages/nc-gui/pages/index/index/create-external.vue
+++ b/packages/nc-gui/pages/index/index/create-external.vue
@@ -539,7 +539,13 @@ onMounted(() => {
       </a-form-item>
     </a-form>
 
-    <a-modal v-model:visible="configEditDlg" :title="$t('activity.editConnJson')" width="600px" @ok="handleOk">
+    <a-modal
+      v-model:visible="configEditDlg"
+      :title="$t('activity.editConnJson')"
+      width="600px"
+      wrap-class-name="nc-modal-edit-connection-json"
+      @ok="handleOk"
+    >
       <MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" />
     </a-modal>
 
diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index 3ee94d20bd..daff53eeeb 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -136,7 +136,7 @@ const getProjectPrimary = (project: ProjectType) => {
 
       <div class="flex-1" />
 
-      <a-dropdown v-if="isUIAllowed('projectCreate', true)" :trigger="['click']">
+      <a-dropdown v-if="isUIAllowed('projectCreate', true)" :trigger="['click']" overlay-class-name="nc-dropdown-create-project">
         <button class="nc-new-project-menu">
           <span class="flex items-center w-full">
             {{ $t('title.newProj') }}
diff --git a/packages/nc-gui/pages/projects/index/index.vue b/packages/nc-gui/pages/projects/index/index.vue
index ef02642fcd..a8f531c96e 100644
--- a/packages/nc-gui/pages/projects/index/index.vue
+++ b/packages/nc-gui/pages/projects/index/index.vue
@@ -71,7 +71,7 @@ const formatTitle = (title: string) =>
     <div v-for="(project, i) of projects" :key="project.id" class="group flex flex-col items-center gap-2">
       <div class="thumbnail" :style="{ '--thumbnail-color': getColorByIndex(i) }" @click="openProject(project)">
         {{ formatTitle(project.title) }}
-        <a-dropdown @click.stop>
+        <a-dropdown overlay-class-name="nc-dropdown-project-operations" @click.stop>
           <MdiMenuDown class="menu-icon" />
           <template #overlay>
             <a-menu>
diff --git a/scripts/cypress/support/page_objects/mainPage.js b/scripts/cypress/support/page_objects/mainPage.js
index e012d15e83..a50b725d97 100644
--- a/scripts/cypress/support/page_objects/mainPage.js
+++ b/scripts/cypress/support/page_objects/mainPage.js
@@ -313,7 +313,7 @@ export class _mainPage {
     sortField = (field, criteria) => {
         cy.get(".nc-sort-menu-btn").click();
         cy.wait(500)
-        cy.getActiveMenu('.sort-menu-overlay').contains("Add Sort Option").click();
+        cy.getActiveMenu('.nc-dropdown-sort-menu').contains("Add Sort Option").click();
         cy.wait(500)
         // cy.get(".nc-sort-field-select div").first().click().type(field);
         cy.get(".nc-sort-field-select div").first().click();

From fa8b806a84516b3eddb56ae55d8174dcc63b4961 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 13 Sep 2022 14:07:55 +0530
Subject: [PATCH 05/16] test: CY wait for PG connection to be up

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../common/00_pre_configurations.js           | 149 +++++++++---------
 scripts/cypress/plugins/index.js              |  29 ++++
 2 files changed, 107 insertions(+), 71 deletions(-)

diff --git a/scripts/cypress/integration/common/00_pre_configurations.js b/scripts/cypress/integration/common/00_pre_configurations.js
index 77e7af7e25..6ce437e90f 100644
--- a/scripts/cypress/integration/common/00_pre_configurations.js
+++ b/scripts/cypress/integration/common/00_pre_configurations.js
@@ -168,81 +168,88 @@ export const genTest = (apiType, dbType) => {
             loginPage.signUp(roles.owner.credentials);
         });
 
-        const createProject = (proj) => {
-            it(`Create ${proj.basic.name} project`, () => {
-
-                // click home button
-                cy.get(".nc-noco-brand-icon").click();
-                cy.get(".ant-table-content").then((obj) => {
+        function cy_createProjectBlock(proj) {
+            // click home button
+            cy.get(".nc-noco-brand-icon").click();
+            cy.get(".ant-table-content").then((obj) => {
 
-                    // if project already created, open
-                    // else, create a new one
-                    if (true == obj[0].innerHTML.includes(proj.basic.name)) {
-                        projectsPage.openProject(proj.basic.name);
+                // if project already created, open
+                // else, create a new one
+                if (true == obj[0].innerHTML.includes(proj.basic.name)) {
+                    projectsPage.openProject(proj.basic.name);
+                    let projId;
+                    if (dbType === "xcdb") {
+                        let query = `SELECT prefix from nc_projects_v2 where title = "sampleREST"; `;
+                        cy.task("sqliteExecReturnValue", query).then(
+                          (resolve) => {
+                              cy.log(resolve);
+                              projId = resolve.prefix;
+                              setProjectString(projId);
+                              cy.log(projId);
+                          }
+                        );
+                    }
+                } else {
+                    projectsPage.createProject(proj.basic, proj.config);
+                    cy.wait(5000);
+                    if (dbType === "xcdb") {
+                        // store base URL- to re-visit and delete form view later
                         let projId;
-                        if (dbType === "xcdb") {
-                            let query = `SELECT prefix from nc_projects_v2 where title = "sampleREST"; `;
-                            cy.task("sqliteExecReturnValue", query).then(
-                                (resolve) => {
-                                    cy.log(resolve);
-                                    projId = resolve.prefix;
-                                    setProjectString(projId);
-                                    cy.log(projId);
-                                }
-                            );
-                        }
-                    } else {
-                        projectsPage.createProject(proj.basic, proj.config);
-                        cy.wait(5000);
-                        if (dbType === "xcdb") {
-                            // store base URL- to re-visit and delete form view later
-                            let projId;
-                            cy.url()
-                                .then((url) => {
-                                    // project prefix code can include "_"
-                                    // projId = url.split("_")[1].split("?")[0];
-                                    let startIdx = url.indexOf("_");
-                                    let endIdx = url.indexOf("?");
-                                    projId = url.slice(startIdx + 1, endIdx);
+                        cy.url()
+                            .then((url) => {
+                                // project prefix code can include "_"
+                                // projId = url.split("_")[1].split("?")[0];
+                                let startIdx = url.indexOf("_");
+                                let endIdx = url.indexOf("?");
+                                projId = url.slice(startIdx + 1, endIdx);
 
-                                    let query = `SELECT prefix from nc_projects_v2 where title = "sampleREST"; `;
-                                    cy.task("sqliteExecReturnValue", query)
-                                        .then((resolve) => {
-                                            cy.log(resolve);
-                                            projId = resolve.prefix;
-                                            cy.log(projId);
-                                            setProjectString(projId);
-                                        })
-                                        .then(() => {
-                                            let query =
-                                                prepareSqliteQuery(projId);
-                                            for (
-                                                let i = 0;
-                                                i < query.length;
-                                                i++
-                                            ) {
-                                                cy.task("sqliteExec", query[i]);
-                                                cy.wait(1000);
-                                            }
-                                        });
-                                })
-                                .then(() => {
-                                    cy.log(projId);
-                                    mainPage.openMetaTab();
-                                    mainPage.metaSyncValidate(
-                                        `${projId}actor`,
-                                        `New table, New relation added`
-                                    );
-                                    mainPage.closeMetaTab();
-                                });
-                        }
+                                let query = `SELECT prefix from nc_projects_v2 where title = "sampleREST"; `;
+                                cy.task("sqliteExecReturnValue", query)
+                                    .then((resolve) => {
+                                        cy.log(resolve);
+                                        projId = resolve.prefix;
+                                        cy.log(projId);
+                                        setProjectString(projId);
+                                    })
+                                    .then(() => {
+                                        let query =
+                                          prepareSqliteQuery(projId);
+                                        for (
+                                          let i = 0;
+                                          i < query.length;
+                                          i++
+                                        ) {
+                                            cy.task("sqliteExec", query[i]);
+                                            cy.wait(1000);
+                                        }
+                                    });
+                            })
+                            .then(() => {
+                                cy.log(projId);
+                                mainPage.openMetaTab();
+                                mainPage.metaSyncValidate(
+                                  `${projId}actor`,
+                                  `New table, New relation added`
+                                );
+                                mainPage.closeMetaTab();
+                            });
                     }
-                });
-
-                // hack to disable dark mode
-                cy.fileHook();
-
+                }
+            });
+        }
 
+        const createProject = (proj) => {
+            it(`Create ${proj.basic.name} project`, () => {
+                if(dbType === "postgres") {
+                    // wait for docker compose to start
+                    cy.task(
+                      'pgExecTest',
+                      `SELECT 1+1`, {timeout: 120000}
+                    ).then(() => cy_createProjectBlock(proj));
+                }
+                else {
+                    cy_createProjectBlock(proj);
+                }
             });
         };
 
@@ -251,7 +258,7 @@ export const genTest = (apiType, dbType) => {
         } else if (dbType === "mysql") {
             createProject(staticProjects.externalREST);
         } else if (dbType === "postgres") {
-            createProject(staticProjects.pgExternalREST);
+            createProject(staticProjects.externalREST);
         }
     });
 };
diff --git a/scripts/cypress/plugins/index.js b/scripts/cypress/plugins/index.js
index 84d7ffd618..e57ae8b186 100644
--- a/scripts/cypress/plugins/index.js
+++ b/scripts/cypress/plugins/index.js
@@ -77,6 +77,9 @@ module.exports = (on, config) => {
             _pgExec(query);
             return null;
         },
+        pgExecTest: (query) => {
+            return _pgExecTest(query);
+        }
     });
 
     let server, port, close
@@ -202,6 +205,32 @@ function _pgExec(query) {
     });
 }
 
+
+function _pgExecTest(query, retryCount = 60) {
+    return new Promise((resolve, reject) => {
+        // open pg client connection
+        const client = new Client(pg_credentials);
+
+        client.connect().catch(() => {
+            client.end();
+        });
+
+        // query & terminate
+        client.query(query, (err, res) => {
+            if (err) {
+                if (retryCount--)
+                    return setTimeout(() => _pgExecTest(query, retryCount).then(resolve).catch(reject), 2000);
+                else
+                    reject(err);
+            }
+
+            console.log('==== success ===', res);
+            resolve(true);
+            client.end();
+        });
+    });
+}
+
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd
  *

From 15aa5db661a363f5abf7456e73b694bc460fc022 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 13 Sep 2022 15:11:54 +0530
Subject: [PATCH 06/16] test: PG incorrect project configuration param

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../cypress/integration/common/00_pre_configurations.js   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scripts/cypress/integration/common/00_pre_configurations.js b/scripts/cypress/integration/common/00_pre_configurations.js
index 6ce437e90f..f0a45085df 100644
--- a/scripts/cypress/integration/common/00_pre_configurations.js
+++ b/scripts/cypress/integration/common/00_pre_configurations.js
@@ -168,7 +168,7 @@ export const genTest = (apiType, dbType) => {
             loginPage.signUp(roles.owner.credentials);
         });
 
-        function cy_createProjectBlock(proj) {
+        function cy_createProjectBlock(proj, apiType, dbType) {
             // click home button
             cy.get(".nc-noco-brand-icon").click();
             cy.get(".ant-table-content").then((obj) => {
@@ -245,10 +245,10 @@ export const genTest = (apiType, dbType) => {
                     cy.task(
                       'pgExecTest',
                       `SELECT 1+1`, {timeout: 120000}
-                    ).then(() => cy_createProjectBlock(proj));
+                    ).then(() => cy_createProjectBlock(proj, apiType, dbType));
                 }
                 else {
-                    cy_createProjectBlock(proj);
+                    cy_createProjectBlock(proj, apiType, dbType);
                 }
             });
         };
@@ -258,7 +258,7 @@ export const genTest = (apiType, dbType) => {
         } else if (dbType === "mysql") {
             createProject(staticProjects.externalREST);
         } else if (dbType === "postgres") {
-            createProject(staticProjects.externalREST);
+            createProject(staticProjects.pgExternalREST);
         }
     });
 };

From 5cff69bbd1b36ad7993901e633bf2092dd708b6a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 13 Sep 2022 15:57:18 +0530
Subject: [PATCH 07/16] chore(cypress): improve date picker selection by
 filtering by classname

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/DatePicker.vue     |  2 +-
 packages/nc-gui/components/cell/DateTimePicker.vue |  2 +-
 packages/nc-gui/components/cell/TimePicker.vue     |  2 +-
 packages/nc-gui/components/cell/YearPicker.vue     |  2 +-
 scripts/cypress/support/commands.js                | 11 +++++++----
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 381d643831..16ac154736 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -67,7 +67,7 @@ const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
     :placeholder="placeholder"
     :allow-clear="!readOnly"
     :input-read-only="true"
-    :dropdown-class-name="randomClass"
+    :dropdown-class-name="`${randomClass} nc-picker-date`"
     :open="readOnly ? false : open"
     @click="open = !open"
   >
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index bdc30a158e..6f932de809 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -67,7 +67,7 @@ watch(
     :placeholder="isDateInvalid ? 'Invalid date' : ''"
     :allow-clear="!readOnly"
     :input-read-only="true"
-    :dropdown-class-name="randomClass"
+    :dropdown-class-name="`${randomClass} nc-picker-datetime`"
     :open="readOnly ? false : open"
     :disabled="readOnly"
     @click="open = !open"
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 87a64a06c8..0fd82f3f68 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -79,7 +79,7 @@ watch(
     :allow-clear="!readOnly"
     :input-read-only="true"
     :open="readOnly ? false : open"
-    :popup-class-name="randomClass"
+    :popup-class-name="`${randomClass} nc-picker-time`"
     @click="open = !open"
     @ok="open = !open"
   >
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index b06bfa2db3..b7b435d651 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -66,7 +66,7 @@ const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
     :allow-clear="!readOnly"
     :input-read-only="true"
     :open="readOnly ? false : open"
-    :dropdown-class-name="randomClass"
+    :dropdown-class-name="`${randomClass} nc-picker-year`"
     @click="open = !open"
     @change="open = !open"
   >
diff --git a/scripts/cypress/support/commands.js b/scripts/cypress/support/commands.js
index 94b4d6ad25..a8c2b2516a 100644
--- a/scripts/cypress/support/commands.js
+++ b/scripts/cypress/support/commands.js
@@ -283,7 +283,7 @@ Cypress.Commands.add('printLocalStorage', () => {
 });
 
 Cypress.Commands.add('getActiveModal', (wrapperSelector) => {
-  if(wrapperSelector){
+  if (wrapperSelector) {
     return cy.get(`${wrapperSelector} .ant-modal-content:visible`).last();
   }
   return cy.get('.ant-modal-content:visible').last();
@@ -301,20 +301,23 @@ Cypress.Commands.add('getActivePopUp', () => {
 });
 
 Cypress.Commands.add('getActiveSelection', (selector) => {
-  if(selector) {
+  if (selector) {
     return cy.get(`${selector}.ant-select-dropdown:visible`).last();
   }
   return cy.get('.ant-select-dropdown:visible').last();
 });
 
 Cypress.Commands.add('getActiveDrawer', (selector) => {
-  if(selector) {
+  if (selector) {
     return cy.get(`${selector} .ant-drawer-content:visible`).last();
   }
   return cy.get('.ant-drawer-content:visible').last();
 });
 
-Cypress.Commands.add('getActivePicker', () => {
+Cypress.Commands.add('getActivePicker', (dropdownSelector) => {
+  if (dropdownSelector) {
+    return cy.get(`${dropdownSelector}.ant-drawer-content:visible`).last();
+  }
   return cy.get('.ant-picker-dropdown :visible').last();
 });
 

From ab9a2aa06ca15720191fcf476edc917a858377e1 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 13 Sep 2022 16:44:11 +0530
Subject: [PATCH 08/16] test: active menu access using class name

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../smartsheet-header/VirtualCell.vue         |  2 +-
 .../smartsheet-toolbar/FieldsMenu.vue         |  2 +-
 .../common/1b_table_column_operations.js      |  6 +-
 .../3a_filter_sort_fields_operations.js       |  8 +--
 .../integration/common/3b_formula_column.js   | 15 +----
 .../integration/common/3c_lookup_column.js    |  4 +-
 .../integration/common/3d_rollup_column.js    |  2 +-
 .../integration/common/3e_duration_column.js  |  5 +-
 .../common/3f_link_to_another_record.js       |  4 +-
 .../common/4c_form_view_detailed.js           |  2 +-
 .../common/4d_table_view_grid_locked.js       |  2 +-
 .../integration/common/4f_grid_view_share.js  |  2 +-
 .../common/4f_pg_grid_view_share.js           |  2 +-
 .../integration/common/5b_preview_role.js     |  2 +-
 .../common/6d_language_validation.js          |  4 +-
 .../integration/common/6f_attachments.js      |  2 +-
 .../integration/common/6g_base_share.js       |  2 +-
 .../common/7a_create_project_from_excel.js    |  2 +-
 .../common/7b_import_from_airtable.js         |  2 +-
 .../cypress/integration/common/8a_webhook.js  |  8 +--
 .../integration/common/9a_QuickTest.js        | 12 ++--
 .../integration/spec/roleValidation.spec.js   | 34 +++++-----
 scripts/cypress/support/commands.js           |  8 +--
 .../cypress/support/page_objects/mainPage.js  | 66 +++++++++----------
 24 files changed, 92 insertions(+), 106 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
index a71454e7da..fc16d5e37e 100644
--- a/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet-header/VirtualCell.vue
@@ -120,7 +120,7 @@ const tooltipMsg = computed(() => {
       class="h-full"
       :trigger="['click']"
       placement="bottomRight"
-      overlay-class-name="nc-dropdown"
+      overlay-class-name="nc-dropdown-edit-column"
     >
       <div />
       <template #overlay>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
index fa9a959fb0..26a649086f 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
@@ -116,7 +116,7 @@ const getIcon = (c: ColumnType) =>
 </script>
 
 <template>
-  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-nc-fields-menu">
+  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu">
     <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
       <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
diff --git a/scripts/cypress/integration/common/1b_table_column_operations.js b/scripts/cypress/integration/common/1b_table_column_operations.js
index 57b2e013c5..cc6b8212ca 100644
--- a/scripts/cypress/integration/common/1b_table_column_operations.js
+++ b/scripts/cypress/integration/common/1b_table_column_operations.js
@@ -83,7 +83,7 @@ export const genTest = (apiType, dbType) => {
             cy.get(".nc-column-edit").should("not.be.visible");
 
             // rename column and verify
-            cy.getActiveMenu().find('input.nc-column-name-input', { timeout: 3000 })
+            cy.getActiveMenu(".nc-dropdown-edit-column").find('input.nc-column-name-input', { timeout: 3000 })
                 .should('exist')
                 .clear()
                 .type(updatedColName);
@@ -140,7 +140,7 @@ export const genTest = (apiType, dbType) => {
                 .rightclick({ force: true });
 
             // delete row
-            cy.getActiveMenu()
+            cy.getActiveMenu(".nc-dropdown-grid-context-menu")
                 .find('.ant-dropdown-menu-item:contains("Delete Row")')
                 .first()
                 .click({ force: true });
@@ -161,7 +161,7 @@ export const genTest = (apiType, dbType) => {
 
             // delete selected rows
             mainPage.getCell("Title", 3).rightclick({ force: true });
-            cy.getActiveMenu()
+            cy.getActiveMenu(".nc-dropdown-grid-context-menu")
                 .contains("Delete Selected Rows")
                 .click({ force: true });
 
diff --git a/scripts/cypress/integration/common/3a_filter_sort_fields_operations.js b/scripts/cypress/integration/common/3a_filter_sort_fields_operations.js
index e869574ae2..ce2917da1c 100644
--- a/scripts/cypress/integration/common/3a_filter_sort_fields_operations.js
+++ b/scripts/cypress/integration/common/3a_filter_sort_fields_operations.js
@@ -82,7 +82,7 @@ export const genTest = (apiType, dbType) => {
             it("Delete Row", () => {
                 // delete row added in previous step
                 mainPage.getCell("Country", 10).rightclick();
-                cy.getActiveMenu().contains("Delete Row").click();
+                cy.getActiveMenu(".nc-dropdown-grid-context-menu").contains("Delete Row").click();
 
                 // cy.toastWait('Deleted row successfully')
 
@@ -99,7 +99,7 @@ export const genTest = (apiType, dbType) => {
                 mainPage.getPagination(5).click();
 
                 mainPage.getCell("Country", 9).rightclick({ force: true });
-                cy.getActiveMenu()
+                cy.getActiveMenu(".nc-dropdown-grid-context-menu")
                     .contains("Insert New Row")
                     .click({ force: true });
                 mainPage
@@ -109,7 +109,7 @@ export const genTest = (apiType, dbType) => {
                     .type("Test Country-1{enter}");
 
                 mainPage.getCell("Country", 10).rightclick({ force: true });
-                cy.getActiveMenu()
+                cy.getActiveMenu(".nc-dropdown-grid-context-menu")
                     .contains("Insert New Row")
                     .click({ force: true });
                 mainPage
@@ -142,7 +142,7 @@ export const genTest = (apiType, dbType) => {
                   .eq(11).click({ force: true });
 
                 mainPage.getCell("Country", 10).rightclick({ force: true });
-                cy.getActiveMenu()
+                cy.getActiveMenu(".nc-dropdown-grid-context-menu")
                     .contains("Delete Selected Rows")
                     .click({ force: true });
 
diff --git a/scripts/cypress/integration/common/3b_formula_column.js b/scripts/cypress/integration/common/3b_formula_column.js
index b033775339..7ea197a0af 100644
--- a/scripts/cypress/integration/common/3b_formula_column.js
+++ b/scripts/cypress/integration/common/3b_formula_column.js
@@ -13,17 +13,6 @@ export const genTest = (apiType, dbType) => {
         //
         before(() => {
             // loginPage.loginAndOpenProject(apiType, dbType)
-
-            mainPage.tabReset();
-            // open a table to work on views
-            //
-
-            // // kludge: wait for page load to finish
-            // cy.wait(1000);
-            // // close team & auth tab
-            // cy.get('button.ant-tabs-tab-remove').should('exist').click();
-            // cy.wait(1000);
-
             cy.openTableTab("City", 25);
         });
 
@@ -59,7 +48,7 @@ export const genTest = (apiType, dbType) => {
                 force: true,
             });
 
-            cy.getActiveMenu().find('input.nc-column-name-input', { timeout: 3000 })
+            cy.getActiveMenu(".nc-dropdown-grid-add-column").find('input.nc-column-name-input', { timeout: 3000 })
               .should('exist')
               .clear()
               .type(columnName);
@@ -91,7 +80,7 @@ export const genTest = (apiType, dbType) => {
             cy.get(".nc-column-edit").click();
             cy.get(".nc-column-edit").should("not.be.visible");
 
-            cy.getActiveMenu().find('input.nc-column-name-input', { timeout: 3000 })
+            cy.getActiveMenu(".nc-dropdown-edit-column").find('input.nc-column-name-input', { timeout: 3000 })
               .should('exist')
               .clear()
               .type(newName);
diff --git a/scripts/cypress/integration/common/3c_lookup_column.js b/scripts/cypress/integration/common/3c_lookup_column.js
index f46d7e25a5..a10ea6eca6 100644
--- a/scripts/cypress/integration/common/3c_lookup_column.js
+++ b/scripts/cypress/integration/common/3c_lookup_column.js
@@ -44,7 +44,7 @@ export const genTest = (apiType, dbType) => {
                 force: true,
             });
 
-            cy.getActiveMenu().find('input.nc-column-name-input', { timeout: 3000 })
+            cy.getActiveMenu(".nc-dropdown-grid-add-column").find('input.nc-column-name-input', { timeout: 3000 })
               .should('exist')
               .clear()
               .type(childCol);
@@ -54,11 +54,9 @@ export const genTest = (apiType, dbType) => {
             // Configure Child table & column names
             fetchParentFromLabel("Child table");
             cy.getActiveSelection().find('.ant-select-item-option').contains(childTable).click();
-            // cy.getActiveMenu().contains(childTable).click();
 
             fetchParentFromLabel("Child column");
             cy.getActiveSelection().find('.ant-select-item-option').contains(childCol).click();
-            // cy.getActiveMenu().contains(childCol).click();
 
             cy.get(".ant-btn-primary").contains("Save").should('exist').click();
             cy.toastWait(`Column created`);
diff --git a/scripts/cypress/integration/common/3d_rollup_column.js b/scripts/cypress/integration/common/3d_rollup_column.js
index 39824601f7..92c76a19f3 100644
--- a/scripts/cypress/integration/common/3d_rollup_column.js
+++ b/scripts/cypress/integration/common/3d_rollup_column.js
@@ -50,7 +50,7 @@ export const genTest = (apiType, dbType) => {
                 force: true,
             });
 
-            cy.getActiveMenu().find('input.nc-column-name-input', { timeout: 3000 })
+            cy.getActiveMenu(".nc-dropdown-grid-add-column").find('input.nc-column-name-input', { timeout: 3000 })
               .should('exist')
               .clear()
               .type(columnName);
diff --git a/scripts/cypress/integration/common/3e_duration_column.js b/scripts/cypress/integration/common/3e_duration_column.js
index 37897e915a..4f8ef941b2 100644
--- a/scripts/cypress/integration/common/3e_duration_column.js
+++ b/scripts/cypress/integration/common/3e_duration_column.js
@@ -44,7 +44,7 @@ export const genTest = (apiType, dbType) => {
                 force: true,
             });
 
-            cy.getActiveMenu().find('input.nc-column-name-input', { timeout: 3000 })
+            cy.getActiveMenu(".nc-dropdown-grid-add-column").find('input.nc-column-name-input', { timeout: 3000 })
               .should('exist')
               .clear()
               .type(columnName);
@@ -54,7 +54,6 @@ export const genTest = (apiType, dbType) => {
             // Configure Duration format
             fetchParentFromLabel("Duration Format");
             cy.getActiveSelection().find('.ant-select-item-option').contains(durationFormat).click();
-            // cy.getActiveMenu().contains(durationFormat).click();
 
             cy.get(".ant-btn-primary").contains("Save").should('exist').click();
             cy.toastWait(`Column created`);
@@ -80,7 +79,7 @@ export const genTest = (apiType, dbType) => {
             cy.get(".nc-column-edit").should("not.be.visible");
 
             // rename column and verify
-            cy.getActiveMenu().find('input.nc-column-name-input', { timeout: 3000 })
+            cy.getActiveMenu(".nc-dropdown-column-operations").find('input.nc-column-name-input', { timeout: 3000 })
               .should('exist')
               .clear()
               .type(newName);
diff --git a/scripts/cypress/integration/common/3f_link_to_another_record.js b/scripts/cypress/integration/common/3f_link_to_another_record.js
index 0015743c1d..fb973db21a 100644
--- a/scripts/cypress/integration/common/3f_link_to_another_record.js
+++ b/scripts/cypress/integration/common/3f_link_to_another_record.js
@@ -5,7 +5,7 @@ import { isTestSuiteActive } from "../../support/page_objects/projectConstants";
 export const genTest = (apiType, dbType) => {
   if (!isTestSuiteActive(apiType, dbType)) return;
 
-  describe(`${apiType.toUpperCase()} api - RollUp column`, () => {
+  describe(`${apiType.toUpperCase()} api - Link to another record`, () => {
 
     function fetchParentFromLabel(label) {
       cy.get("label").contains(label).parents(".ant-row").click();
@@ -31,7 +31,7 @@ export const genTest = (apiType, dbType) => {
       cy.get(".nc-grid  tr > th:last .nc-icon").click();
 
       // Column name
-      cy.getActiveMenu().find('input.nc-column-name-input', { timeout: 3000 })
+      cy.getActiveMenu(".nc-dropdown-grid-add-column").find('input.nc-column-name-input', { timeout: 3000 })
         .should('exist')
         .clear()
         .type(columnName);
diff --git a/scripts/cypress/integration/common/4c_form_view_detailed.js b/scripts/cypress/integration/common/4c_form_view_detailed.js
index 3324cbe980..175701beb9 100644
--- a/scripts/cypress/integration/common/4c_form_view_detailed.js
+++ b/scripts/cypress/integration/common/4c_form_view_detailed.js
@@ -437,7 +437,7 @@ export const genTest = (apiType, dbType) => {
                 cy.get(".ant-checkbox").should('exist').eq(13).click({ force: true });
 
                 mainPage.getCell("Country", 10).rightclick({ force: true });
-                cy.getActiveMenu()
+                cy.getActiveMenu(".nc-dropdown-grid-context-menu")
                   .contains("Delete Selected Rows")
                   .click({ force: true });
             });
diff --git a/scripts/cypress/integration/common/4d_table_view_grid_locked.js b/scripts/cypress/integration/common/4d_table_view_grid_locked.js
index bd2ba456b0..4ffee50b57 100644
--- a/scripts/cypress/integration/common/4d_table_view_grid_locked.js
+++ b/scripts/cypress/integration/common/4d_table_view_grid_locked.js
@@ -37,7 +37,7 @@ export const genTest = (apiType, dbType) => {
                 // on menu, collaboration view appears first (at index 0)
                 // followed by Locked view (at index 1)
                 cy.get(".nc-actions-menu-btn").click();
-                cy.getActiveMenu().find('.ant-dropdown-menu-submenu').eq(0).click();
+                cy.getActiveMenu(".nc-dropdown-actions-menu").find('.ant-dropdown-menu-submenu').eq(0).click();
                 cy.wait(1000);
                 cy.get('.nc-locked-menu-item').contains(menuOption).should('exist').click();
 
diff --git a/scripts/cypress/integration/common/4f_grid_view_share.js b/scripts/cypress/integration/common/4f_grid_view_share.js
index 212ca3449c..64a61934f7 100644
--- a/scripts/cypress/integration/common/4f_grid_view_share.js
+++ b/scripts/cypress/integration/common/4f_grid_view_share.js
@@ -424,7 +424,7 @@ export const genTest = (apiType, dbType) => {
             // wait for page rendering to complete
             cy.get(".nc-grid-row").should("have.length", 10);
             mainPage.getCell("Country", 10).rightclick();
-            cy.getActiveMenu()
+            cy.getActiveMenu(".nc-dropdown-grid-context-menu")
                 .find('.ant-dropdown-menu-item:contains("Delete Row")')
                 .first()
                 .click();
diff --git a/scripts/cypress/integration/common/4f_pg_grid_view_share.js b/scripts/cypress/integration/common/4f_pg_grid_view_share.js
index eee3ee09d7..f42f32a14e 100644
--- a/scripts/cypress/integration/common/4f_pg_grid_view_share.js
+++ b/scripts/cypress/integration/common/4f_pg_grid_view_share.js
@@ -404,7 +404,7 @@ export const genTest = (apiType, dbType) => {
                 .find(".mdi-checkbox-blank-outline")
                 .click({ force: true });
             mainPage.getCell("Country", 10).rightclick();
-            cy.getActiveMenu().contains("Delete Selected Row").click();
+            cy.getActiveMenu(".nc-dropdown-grid-context-menu").contains("Delete Selected Row").click();
 
             // delete column
             cy.get(`th:contains('dummy') .mdi-menu-down`)
diff --git a/scripts/cypress/integration/common/5b_preview_role.js b/scripts/cypress/integration/common/5b_preview_role.js
index 71e1143514..c583cc465a 100644
--- a/scripts/cypress/integration/common/5b_preview_role.js
+++ b/scripts/cypress/integration/common/5b_preview_role.js
@@ -35,7 +35,7 @@ export const genTest = (apiType, dbType, roleType) => {
             cy.wait(3000);
 
             settingsPage.openProjectMenu();
-            cy.getActiveMenu().find(`[data-submenu-id="preview-as"]`).should('exist').click()
+            cy.getActiveMenu(".nc-dropdown-project-menu").find(`[data-submenu-id="preview-as"]`).should('exist').click()
             cy.wait(1000)
             cy.get('.ant-dropdown-menu-submenu').eq(4).find(`[data-menu-id="editor"]`).should('exist').click()
 
diff --git a/scripts/cypress/integration/common/6d_language_validation.js b/scripts/cypress/integration/common/6d_language_validation.js
index 45d0862e0a..3ffd65de69 100644
--- a/scripts/cypress/integration/common/6d_language_validation.js
+++ b/scripts/cypress/integration/common/6d_language_validation.js
@@ -24,7 +24,7 @@ export const genTest = (apiType, dbType) => {
 
         after(() => {
             cy.get('.nc-menu-accounts').should('exist').click();
-            cy.getActiveMenu().find('.ant-dropdown-menu-item').eq(1).click();
+            cy.getActiveMenu('.nc-dropdown-user-accounts-menu').find('.ant-dropdown-menu-item').eq(1).click();
 
             cy.wait(5000);
             cy.get('button:contains("SIGN")').should('exist')
@@ -39,7 +39,7 @@ export const genTest = (apiType, dbType) => {
                 // toggle menu as per index
                 cy.get(".nc-menu-translate").should('exist').last().click();
                 cy.wait(500);
-                cy.getActiveMenu().find(".ant-dropdown-menu-item").eq(idx).click();
+                cy.getActiveMenu(".nc-dropdown-menu-translate").find(".ant-dropdown-menu-item").eq(idx).click();
                 cy.wait(200);
 
                 // basic validations
diff --git a/scripts/cypress/integration/common/6f_attachments.js b/scripts/cypress/integration/common/6f_attachments.js
index c019c22e80..b4fbf5ea5f 100644
--- a/scripts/cypress/integration/common/6f_attachments.js
+++ b/scripts/cypress/integration/common/6f_attachments.js
@@ -41,7 +41,7 @@ export const genTest = (apiType, dbType) => {
             //     .click({ force: true });
 
             mainPage.getCell("Country", 10).rightclick();
-            cy.getActiveMenu().contains("Delete Row").click();
+            cy.getActiveMenu(".nc-dropdown-grid-context-menu").contains("Delete Row").click();
 
             cy.closeTableTab("Country");
         });
diff --git a/scripts/cypress/integration/common/6g_base_share.js b/scripts/cypress/integration/common/6g_base_share.js
index 94ba459d0e..56d3170860 100644
--- a/scripts/cypress/integration/common/6g_base_share.js
+++ b/scripts/cypress/integration/common/6g_base_share.js
@@ -77,7 +77,7 @@ export const genTest = (apiType, dbType) => {
             // Click on readonly base text
             cy.getActiveModal().find(".nc-disable-shared-base").click();
 
-            cy.getActiveMenu()
+            cy.getActiveMenu(".nc-dropdown-shared-base-toggle")
                 .find(".ant-dropdown-menu-title-content")
                 .contains("Anyone with the link")
                 .click();
diff --git a/scripts/cypress/integration/common/7a_create_project_from_excel.js b/scripts/cypress/integration/common/7a_create_project_from_excel.js
index 209c1dd2b3..8d5632bf81 100644
--- a/scripts/cypress/integration/common/7a_create_project_from_excel.js
+++ b/scripts/cypress/integration/common/7a_create_project_from_excel.js
@@ -106,7 +106,7 @@ export const genTest = (apiType, dbType) => {
 
             cy.get('.nc-add-new-table').should('exist').trigger('mouseover')
             cy.get('.nc-import-menu').should('exist').click()
-            cy.getActiveMenu().find('.ant-dropdown-menu-item').contains('Microsoft Excel').click()
+            cy.getActiveMenu(".nc-dropdown-import-menu").find('.ant-dropdown-menu-item').contains('Microsoft Excel').click()
 
             cy.get(".nc-input-import").should('exist').find('input').attachFile(filepath);
             cy.toastWait("Uploaded file simple.xlsx successfully");
diff --git a/scripts/cypress/integration/common/7b_import_from_airtable.js b/scripts/cypress/integration/common/7b_import_from_airtable.js
index 22314c8e10..62f61f1680 100644
--- a/scripts/cypress/integration/common/7b_import_from_airtable.js
+++ b/scripts/cypress/integration/common/7b_import_from_airtable.js
@@ -30,7 +30,7 @@ export const genTest = (apiType, dbType) => {
       // trigger import
       cy.get('.nc-add-new-table').should('exist').trigger('mouseover')
       cy.get('.nc-import-menu').should('exist').click()
-      cy.getActiveMenu().find('.ant-dropdown-menu-item').contains('Airtable').click()
+      cy.getActiveMenu(".nc-dropdown-import-menu").find('.ant-dropdown-menu-item').contains('Airtable').click()
 
       cy.getActiveModal().find(".nc-input-api-key").should('exist').clear().type(apiKey)
       cy.getActiveModal().find(".nc-input-shared-base").should('exist').clear().type(sharedBase)
diff --git a/scripts/cypress/integration/common/8a_webhook.js b/scripts/cypress/integration/common/8a_webhook.js
index 0533cec803..8d1cd73bef 100644
--- a/scripts/cypress/integration/common/8a_webhook.js
+++ b/scripts/cypress/integration/common/8a_webhook.js
@@ -7,7 +7,7 @@ let hookPath = "http://localhost:9090/hook";
 
 function createWebhook(hook, test) {
     cy.get('.nc-actions-menu-btn').should('exist').click();
-    cy.getActiveMenu().find('.ant-dropdown-menu-title-content').contains('Webhooks').click()
+    cy.getActiveMenu(".nc-dropdown-webhook").find('.ant-dropdown-menu-title-content').contains('Webhooks').click()
 
     // cy.get(".nc-btn-webhook").should("exist").click();
     cy.get(".nc-btn-create-webhook").should("exist").click();
@@ -51,7 +51,7 @@ function createWebhook(hook, test) {
 
 function deleteWebhook(index) {
     cy.get('.nc-actions-menu-btn').should('exist').click();
-    cy.getActiveMenu().find('.ant-dropdown-menu-title-content').contains('Webhooks').click()
+    cy.getActiveMenu(".nc-dropdown-actions-menu").find('.ant-dropdown-menu-title-content').contains('Webhooks').click()
 
     cy.get(".nc-hook-delete-icon").eq(index).click({ force: true });
     cy.toastWait("Hook deleted successfully");
@@ -60,7 +60,7 @@ function deleteWebhook(index) {
 
 function openWebhook(index) {
     cy.get('.nc-actions-menu-btn').should('exist').click();
-    cy.getActiveMenu().find('.ant-dropdown-menu-title-content').contains('Webhooks').click()
+    cy.getActiveMenu(".nc-dropdown-actions-menu").find('.ant-dropdown-menu-title-content').contains('Webhooks').click()
 
     cy.get(".nc-hook").eq(index).click({ force: true });
 }
@@ -216,7 +216,7 @@ function deleteRow(index) {
       .rightclick();
 
     // delete row
-    cy.getActiveMenu()
+    cy.getActiveMenu(".nc-dropdown-grid-context-menu")
       .find('.ant-dropdown-menu-item:contains("Delete Row")')
       .first()
       .click({ force: true });
diff --git a/scripts/cypress/integration/common/9a_QuickTest.js b/scripts/cypress/integration/common/9a_QuickTest.js
index 41c0ab41f8..0568eaf5af 100644
--- a/scripts/cypress/integration/common/9a_QuickTest.js
+++ b/scripts/cypress/integration/common/9a_QuickTest.js
@@ -40,7 +40,7 @@ let cn = [ "Name", "Notes", "Status", "Tags", "Done", "Date", "Phone",
 
 function openWebhook(index) {
     cy.get('.nc-actions-menu-btn').should('exist').click();
-    cy.getActiveMenu().find('.ant-dropdown-menu-title-content').contains('Webhooks').click()
+    cy.getActiveMenu(".nc-dropdown-actions-menu").find('.ant-dropdown-menu-title-content').contains('Webhooks').click()
 
     cy.get(".nc-hook").eq(index).click();
 }
@@ -348,11 +348,11 @@ export const genTest = (apiType, dbType, testMode) => {
             cy.wait(2000);
             cy.get(".nc-fields-menu-btn").click()
 
-            cy.getActiveMenu().find(`[type="checkbox"]`).eq(0).should('be.checked')
-            cy.getActiveMenu().find(`[type="checkbox"]`).eq(1).should('be.checked')
-            cy.getActiveMenu().find(`[type="checkbox"]`).eq(2).should('not.be.checked')
-            cy.getActiveMenu().find(`[type="checkbox"]`).eq(3).should('be.checked')
-            cy.getActiveMenu().find(`[type="checkbox"]`).eq(4).should('be.checked')
+            cy.getActiveMenu(".nc-dropdown-fields-menu").find(`[type="checkbox"]`).eq(0).should('be.checked')
+            cy.getActiveMenu(".nc-dropdown-fields-menu").find(`[type="checkbox"]`).eq(1).should('be.checked')
+            cy.getActiveMenu(".nc-dropdown-fields-menu").find(`[type="checkbox"]`).eq(2).should('not.be.checked')
+            cy.getActiveMenu(".nc-dropdown-fields-menu").find(`[type="checkbox"]`).eq(3).should('be.checked')
+            cy.getActiveMenu(".nc-dropdown-fields-menu").find(`[type="checkbox"]`).eq(4).should('be.checked')
             cy.get(".nc-fields-menu-btn").click();
 
             cy.get(".nc-sort-menu-btn").click();
diff --git a/scripts/cypress/integration/spec/roleValidation.spec.js b/scripts/cypress/integration/spec/roleValidation.spec.js
index 77ca3a3078..b5285c6499 100644
--- a/scripts/cypress/integration/spec/roleValidation.spec.js
+++ b/scripts/cypress/integration/spec/roleValidation.spec.js
@@ -13,7 +13,7 @@ export function _advSettings(roleType, mode) {
 
         // open modal
         cy.get('.nc-project-menu').should('exist').click()
-        cy.getActiveMenu().find(`[data-menu-id="language"]`).should('exist')
+        cy.getActiveMenu(".nc-dropdown-project-menu").find(`[data-menu-id="language"]`).should('exist')
 
         // click again to close modal
         cy.get('.nc-project-menu').should('exist').click()
@@ -25,11 +25,11 @@ export function _advSettings(roleType, mode) {
 
     // cy.get(".nc-team-settings").should(validationString);
     cy.get('.nc-project-menu').should('exist').click()
-    cy.getActiveMenu().find(`[data-menu-id="preview-as"]`).should(validationString)
-    cy.getActiveMenu().find(`[data-menu-id="teamAndSettings"]:visible`).should(validationString)
+    cy.getActiveMenu(".nc-dropdown-project-menu").find(`[data-menu-id="preview-as"]`).should(validationString)
+    cy.getActiveMenu(".nc-dropdown-project-menu").find(`[data-menu-id="teamAndSettings"]:visible`).should(validationString)
 
     if (true === roles[roleType].validations.advSettings) {
-        cy.getActiveMenu().find(`[data-menu-id="teamAndSettings"]:visible`).should(validationString).click()
+        cy.getActiveMenu(".nc-dropdown-project-menu").find(`[data-menu-id="teamAndSettings"]:visible`).should(validationString).click()
 
         cy.get(`[data-menu-id="teamAndAuth"]`).should('exist')
         cy.get(`[data-menu-id="appStore"]`).should('exist')
@@ -67,8 +67,8 @@ export function _editSchema(roleType, mode) {
     cy.get(".ant-dropdown-content:visible").should(validationString);
 
     if(validationString === "exist"){
-        cy.getActiveMenu().find('[role="menuitem"]').contains("Delete").should("exist");
-        cy.getActiveMenu().find('[role="menuitem"]').contains("Rename").should("exist");
+        cy.getActiveMenu(".nc-dropdown-tree-view-context-menu").find('[role="menuitem"]').contains("Delete").should("exist");
+        cy.getActiveMenu(".nc-dropdown-tree-view-context-menu").find('[role="menuitem"]').contains("Rename").should("exist");
 
         // click on a cell to close table context menu
         mainPage.getCell(columnName, 3).click();
@@ -83,11 +83,11 @@ export function _editSchema(roleType, mode) {
 
     if(validationString === "exist"){
         cy.get('.nc-import-menu').should('exist').click();
-        cy.getActiveMenu().should('exist')
-        cy.getActiveMenu().find('.ant-dropdown-menu-item').contains('Airtable')
-        cy.getActiveMenu().find('.ant-dropdown-menu-item').contains('CSV file')
-        cy.getActiveMenu().find('.ant-dropdown-menu-item').contains('JSON file')
-        cy.getActiveMenu().find('.ant-dropdown-menu-item').contains('Microsoft Excel')
+        cy.getActiveMenu(".nc-dropdown-import-menu").should('exist')
+        cy.getActiveMenu(".nc-dropdown-import-menu").find('.ant-dropdown-menu-item').contains('Airtable')
+        cy.getActiveMenu(".nc-dropdown-import-menu").find('.ant-dropdown-menu-item').contains('CSV file')
+        cy.getActiveMenu(".nc-dropdown-import-menu").find('.ant-dropdown-menu-item').contains('JSON file')
+        cy.getActiveMenu(".nc-dropdown-import-menu").find('.ant-dropdown-menu-item').contains('Microsoft Excel')
     }
 }
 
@@ -114,10 +114,10 @@ export function _editData(roleType, mode) {
     if (validationString === "exist") {
         // right click options will exist (only for 'exist' case)
         //
-        cy.getActiveMenu().contains("Insert New Row").should(validationString);
-        cy.getActiveMenu().contains("Clear cell").should(validationString);
-        cy.getActiveMenu().contains("Delete Row").should(validationString);
-        cy.getActiveMenu().contains("Delete Selected Rows").should(validationString);
+        cy.getActiveMenu(".nc-dropdown-grid-context-menu").contains("Insert New Row").should(validationString);
+        cy.getActiveMenu(".nc-dropdown-grid-context-menu").contains("Clear cell").should(validationString);
+        cy.getActiveMenu(".nc-dropdown-grid-context-menu").contains("Delete Row").should(validationString);
+        cy.getActiveMenu(".nc-dropdown-grid-context-menu").contains("Delete Selected Rows").should(validationString);
 
         // cy.get("body").type("{esc}");
         mainPage.getCell("City", 13).click();
@@ -255,10 +255,10 @@ export function _viewMenu(roleType, mode) {
 
     // actions menu (more), only download csv should be visible for non-previlaged users
     cy.get(".nc-actions-menu-btn").click();
-    cy.getActiveMenu()
+    cy.getActiveMenu(".nc-dropdown-actions-menu")
         .find('.ant-dropdown-menu-submenu:visible')
         .should("have.length", menuWithSubmenuCount);
-    cy.getActiveMenu()
+    cy.getActiveMenu(".nc-dropdown-actions-menu")
         .find('.ant-dropdown-menu-item:visible')
         .should("have.length", menuWithoutSubmenuCount);
     // click again to close menu
diff --git a/scripts/cypress/support/commands.js b/scripts/cypress/support/commands.js
index a8c2b2516a..4774cfd48b 100644
--- a/scripts/cypress/support/commands.js
+++ b/scripts/cypress/support/commands.js
@@ -141,7 +141,7 @@ Cypress.Commands.add('refreshTableTab', () => {
     .first()
     .rightclick({ force: true });
 
-  cy.getActiveMenu()
+  cy.getActiveMenu(".nc-dropdown-tree-view-context-menu")
     .find('[role="menuitem"]')
     .contains('Tables Refresh')
     .should('exist')
@@ -342,7 +342,7 @@ Cypress.Commands.add('createTable', (name) => {
 
 Cypress.Commands.add('deleteTable', (name, dbType) => {
   cy.get(`.nc-project-tree-tbl-${name}`).should('exist').rightclick();
-  cy.getActiveMenu().find('[role="menuitem"]').contains('Delete').click();
+  cy.getActiveMenu(".nc-dropdown-tree-view-context-menu").find('[role="menuitem"]').contains('Delete').click();
   cy.getActiveModal().find('button').contains('Yes').click();
 
   cy.toastWait(`Deleted table successfully`);
@@ -357,7 +357,7 @@ Cypress.Commands.add('renameTable', (oldName, newName) => {
     .rightclick();
 
   // choose rename option from menu
-  cy.getActiveMenu()
+  cy.getActiveMenu(".nc-dropdown-tree-view-context-menu")
     .find('[role="menuitem"]')
     .contains('Rename')
     .click({ force: true });
@@ -495,7 +495,7 @@ Cypress.Commands.add('signOut', () => {
   cy.visit(`/`);
   cy.get('.nc-project-page-title', { timeout: 30000 }).contains('My Projects').should('be.visible');
   cy.get('.nc-menu-accounts', { timeout: 30000 }).should('exist').click();
-  cy.getActiveMenu().find('.ant-dropdown-menu-item').eq(1).click();
+  cy.getActiveMenu(".nc-dropdown-user-accounts-menu").find('.ant-dropdown-menu-item').eq(1).click();
 
   cy.wait(5000);
   cy.get('button:contains("SIGN")').should('exist');
diff --git a/scripts/cypress/support/page_objects/mainPage.js b/scripts/cypress/support/page_objects/mainPage.js
index a50b725d97..8f5396108e 100644
--- a/scripts/cypress/support/page_objects/mainPage.js
+++ b/scripts/cypress/support/page_objects/mainPage.js
@@ -33,7 +33,7 @@ export class _settingsPage {
         // cy.get('.nc-team-settings').should('exist').click()
         // cy.get(`[data-menu-id=${menuId}]`).should('exist').click()
         cy.get('.nc-project-menu').should('exist').click()
-        cy.getActiveMenu().find(`[data-menu-id="teamAndSettings"]`).should('exist').click()
+        cy.getActiveMenu(".nc-dropdown-project-menu").find(`[data-menu-id="teamAndSettings"]`).should('exist').click()
         cy.get(`[data-menu-id=${menuId}]`).should('exist').click()
     }
 
@@ -89,7 +89,7 @@ export class _mainPage {
     navigationDraw(item) {
         // open settings tab
         cy.get('.nc-project-menu').should('exist').click()
-        cy.getActiveMenu().find(`[data-menu-id="teamAndSettings"]`).should('exist').click()
+        cy.getActiveMenu(".nc-dropdown-project-menu").find(`[data-menu-id="teamAndSettings"]`).should('exist').click()
 
         switch (item) {
             case this.AUDIT:
@@ -136,26 +136,26 @@ export class _mainPage {
             });
     };
 
-    addExistingUserToProject = (emailId, role) => {
-        cy.get('.v-list-item:contains("Team & Auth")').click();
-        cy.get(`tr:contains(${emailId})`)
-            .find(".mdi-plus", { timeout: 2000 })
-            .click();
-        cy.get(`tr:contains(${emailId})`)
-            .find(".mdi-pencil-outline", { timeout: 2000 })
-            .click();
-
-        cy.get("label:contains(Select User Role)").click();
-
-        // opt-in requested role & submit
-        //
-        cy.getActiveMenu().contains(role).click();
-        cy.get(".nc-invite-or-save-btn").click();
-        cy.toastWait("Successfully updated the user details");
-
-        this.roleURL[role] =
-            "http://localhost:3000/#/user/authentication/signin";
-    };
+    // addExistingUserToProject = (emailId, role) => {
+    //     cy.get('.v-list-item:contains("Team & Auth")').click();
+    //     cy.get(`tr:contains(${emailId})`)
+    //         .find(".mdi-plus", { timeout: 2000 })
+    //         .click();
+    //     cy.get(`tr:contains(${emailId})`)
+    //         .find(".mdi-pencil-outline", { timeout: 2000 })
+    //         .click();
+    //
+    //     cy.get("label:contains(Select User Role)").click();
+    //
+    //     // opt-in requested role & submit
+    //     //
+    //     cy.getActiveMenu().contains(role).click();
+    //     cy.get(".nc-invite-or-save-btn").click();
+    //     cy.toastWait("Successfully updated the user details");
+    //
+    //     this.roleURL[role] =
+    //         "http://localhost:3000/#/user/authentication/signin";
+    // };
 
     getCell = (columnHeader, cellNumber) => {
         return cy.get(
@@ -183,7 +183,7 @@ export class _mainPage {
             force: true,
         });
 
-        cy.getActiveMenu().find('input.nc-column-name-input', { timeout: 3000 })
+        cy.getActiveMenu(".nc-dropdown-grid-add-column").find('input.nc-column-name-input', { timeout: 3000 })
           .should('exist')
           .clear()
           .type(colName);
@@ -197,7 +197,7 @@ export class _mainPage {
             force: true,
         });
 
-        cy.getActiveMenu().find('input.nc-column-name-input', { timeout: 3000 })
+        cy.getActiveMenu(".nc-dropdown-grid-add-column").find('input.nc-column-name-input', { timeout: 3000 })
           .should('exist')
           .clear()
           .type(colName);
@@ -265,34 +265,34 @@ export class _mainPage {
 
     shareViewList = () => {
         cy.get(".nc-actions-menu-btn").should('exist').click();
-        return cy.getActiveMenu().find('.ant-dropdown-menu-item').contains('Shared View List');
+        return cy.getActiveMenu(".nc-dropdown-actions-menu").find('.ant-dropdown-menu-item').contains('Shared View List');
     };
 
     downloadCsv = () => {
         cy.get(".nc-actions-menu-btn").should('exist').click();
-        return cy.getActiveMenu().find('.ant-dropdown-menu-item').contains('Download as CSV');
+        return cy.getActiveMenu(".nc-dropdown-actions-menu").find('.ant-dropdown-menu-item').contains('Download as CSV');
     };
 
     downloadExcel = () => {
         cy.get(".nc-actions-menu-btn").should('exist').click();
-        return cy.getActiveMenu().find('.ant-dropdown-menu-item').contains('Download as XLSX');
+        return cy.getActiveMenu(".nc-dropdown-actions-menu").find('.ant-dropdown-menu-item').contains('Download as XLSX');
     };
 
     uploadCsv = () => {
         cy.get(".nc-actions-menu-btn").should('exist').click();
-        return cy.getActiveMenu().find('.ant-dropdown-menu-item').contains('Upload CSV');
+        return cy.getActiveMenu(".nc-dropdown-actions-menu").find('.ant-dropdown-menu-item').contains('Upload CSV');
     };
 
     automations = () => {
         cy.get(".nc-actions-menu-btn").should('exist').click();
-        return cy.getActiveMenu().find('.ant-dropdown-menu-item').contains('Webhooks');
+        return cy.getActiveMenu(".nc-dropdown-actions-menu").find('.ant-dropdown-menu-item').contains('Webhooks');
     };
 
     hideField = (field) => {
         cy.get(`th[data-title="${field}"]`).should("be.visible");
         cy.get(".nc-fields-menu-btn").click();
         cy.wait(500)
-        cy.getActiveMenu().find(`.nc-fields-list label:contains(${field}):visible`).click();
+        cy.getActiveMenu(".nc-dropdown-fields-menu").find(`.nc-fields-list label:contains(${field}):visible`).click();
         cy.wait(500)
         cy.get(".nc-fields-menu-btn").click();
         cy.wait(500)
@@ -303,7 +303,7 @@ export class _mainPage {
         cy.get(`th[data-title="${field}"]`).should("not.exist");
         cy.get(".nc-fields-menu-btn").click();
         cy.wait(500)
-        cy.getActiveMenu().find(`.nc-fields-list label:contains(${field}):visible`).click();
+        cy.getActiveMenu(".nc-dropdown-fields-menu").find(`.nc-fields-list label:contains(${field}):visible`).click();
         cy.wait(500)
         cy.get(".nc-fields-menu-btn").click();
         cy.wait(500)
@@ -411,10 +411,10 @@ export class _mainPage {
 
         if(role === 'commenter' || role === 'viewer') {
             cy.get(".nc-actions-menu-btn").click();
-            cy.getActiveMenu().find('.nc-project-menu-item').contains('Download as CSV').click();
+            cy.getActiveMenu(".nc-dropdown-actions-menu").find('.nc-project-menu-item').contains('Download as CSV').click();
         } else {
             cy.get(".nc-actions-menu-btn").click();
-            cy.getActiveMenu().find('.nc-project-menu-item').contains('Download').click();
+            cy.getActiveMenu(".nc-dropdown-actions-menu").find('.nc-project-menu-item').contains('Download').click();
             cy.wait(1000);
             cy.get('.nc-project-menu-item').contains('Download as CSV').should('exist').click();
         }

From 91251e94e0997ab656ea19f5ff5a927d6fef64c8 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 13 Sep 2022 17:47:32 +0530
Subject: [PATCH 09/16] chore (CY): active menu- class name mapping corrections

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui/components/smartsheet-toolbar/Export.vue | 2 +-
 scripts/cypress/integration/common/8a_webhook.js         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet-toolbar/Export.vue b/packages/nc-gui/components/smartsheet-toolbar/Export.vue
index 8b5cb62242..36999c4c66 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/Export.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/Export.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-download-menu">
+  <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
     <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
       <div class="flex gap-2 items-center">
         <MdiDownload class="group-hover:text-accent text-gray-500" />
diff --git a/scripts/cypress/integration/common/8a_webhook.js b/scripts/cypress/integration/common/8a_webhook.js
index 8d1cd73bef..713bf4567f 100644
--- a/scripts/cypress/integration/common/8a_webhook.js
+++ b/scripts/cypress/integration/common/8a_webhook.js
@@ -7,7 +7,7 @@ let hookPath = "http://localhost:9090/hook";
 
 function createWebhook(hook, test) {
     cy.get('.nc-actions-menu-btn').should('exist').click();
-    cy.getActiveMenu(".nc-dropdown-webhook").find('.ant-dropdown-menu-title-content').contains('Webhooks').click()
+    cy.getActiveMenu(".nc-dropdown-actions-menu").find('.ant-dropdown-menu-title-content').contains('Webhooks').click()
 
     // cy.get(".nc-btn-webhook").should("exist").click();
     cy.get(".nc-btn-create-webhook").should("exist").click();

From a39f1c740cbc7f7e6c29196e533609ff3c9d701f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 13 Sep 2022 18:06:08 +0530
Subject: [PATCH 10/16] chore(gui): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/general/language/index.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/general/language/index.vue b/packages/nc-gui/components/general/language/index.vue
index 682cc47721..6b08c99492 100644
--- a/packages/nc-gui/components/general/language/index.vue
+++ b/packages/nc-gui/components/general/language/index.vue
@@ -1,5 +1,9 @@
 <template>
-  <a-dropdown class="select-none color-transition cursor-pointer" :trigger="['click']" overlay-class-name="nc-dropdown-menu-translate">
+  <a-dropdown
+    class="select-none color-transition cursor-pointer"
+    :trigger="['click']"
+    overlay-class-name="nc-dropdown-menu-translate"
+  >
     <div v-bind="$attrs" class="flex items-center justify-center">
       <MaterialSymbolsTranslate class="md:text-xl nc-menu-translate" />
     </div>

From 8963f7c7293bbcd52efed5d4197da927ddc7c241 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 13 Sep 2022 18:44:07 +0530
Subject: [PATCH 11/16] fix: language title corrections for ch

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui/lib/enums.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index 3e5f56b268..ef6ad54540 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -50,8 +50,8 @@ export enum Language {
   tr = 'Türk',
   uk = 'Українська',
   vi = 'Tiếng Việt',
-  zh_Hans = '简体中文',
-  zh_Hant = '繁體中文',
+  'zh-Hans' = '简体中文',
+  'zh-Hant' = '繁體中文',
 }
 
 export enum NavigateDir {

From 8270af97b8b9044051d944a07499b0f09d30d659 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 13 Sep 2022 19:39:41 +0530
Subject: [PATCH 12/16] test: active modal - class name mapping

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../components/dashboard/settings/Modal.vue   |  1 +
 .../nc-gui/components/dlg/TableRename.vue     |  1 +
 .../components/shared-view/AskPassword.vue    |  1 +
 .../smartsheet-toolbar/ShareView.vue          |  1 +
 .../[projectType]/form/[viewId]/index.vue     |  1 +
 .../pages/index/index/create-external.vue     |  1 +
 .../1d_pg_table_view_drag_drop_reorder.js     |  2 +-
 .../common/1d_table_view_drag_drop_reorder.js |  2 +-
 .../2a_table_with_belongs_to_colulmn.js       | 12 +++----
 .../common/2b_table_with_m2m_column.js        | 10 +++---
 .../common/4a_table_view_grid_gallery_form.js |  4 +--
 .../integration/common/4b_table_view_share.js | 32 +++++++++----------
 .../common/4c_form_view_detailed.js           |  4 +--
 .../integration/common/4e_form_view_share.js  |  6 ++--
 .../integration/common/4f_grid_view_share.js  |  8 ++---
 .../common/4f_pg_grid_view_share.js           |  6 ++--
 .../integration/common/6f_attachments.js      |  4 +--
 .../integration/common/6g_base_share.js       |  2 +-
 .../common/7b_import_from_airtable.js         |  6 ++--
 scripts/cypress/support/commands.js           |  4 +--
 .../cypress/support/page_objects/mainPage.js  |  4 +--
 21 files changed, 59 insertions(+), 53 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index cc6788f60e..655a4cf1ba 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -159,6 +159,7 @@ watch(
     :footer="null"
     width="max(90vw, 600px)"
     :closable="false"
+    wrap-class-name="nc-modal-settings"
     @cancel="emits('update:modelValue', false)"
   >
     <!--    Settings -->
diff --git a/packages/nc-gui/components/dlg/TableRename.vue b/packages/nc-gui/components/dlg/TableRename.vue
index 5652ec1293..8398f319b9 100644
--- a/packages/nc-gui/components/dlg/TableRename.vue
+++ b/packages/nc-gui/components/dlg/TableRename.vue
@@ -125,6 +125,7 @@ const renameTable = async () => {
     v-model:visible="dialogShow"
     :title="$t('activity.renameTable')"
     :mask-closable="false"
+    wrap-class-name="nc-modal-table-rename"
     @keydown.esc="dialogShow = false"
     @finish="renameTable"
   >
diff --git a/packages/nc-gui/components/shared-view/AskPassword.vue b/packages/nc-gui/components/shared-view/AskPassword.vue
index 83f0481245..a12e00a433 100644
--- a/packages/nc-gui/components/shared-view/AskPassword.vue
+++ b/packages/nc-gui/components/shared-view/AskPassword.vue
@@ -33,6 +33,7 @@ const onFinish = async () => {
     centered
     :footer="null"
     :mask-closable="false"
+    wrap-class-name="nc-modal-shared-view-password-dlg"
     @close="vModel = false"
   >
     <div class="w-full flex flex-col">
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet-toolbar/ShareView.vue
index a2a555f9b9..8d44e32bdc 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ShareView.vue
@@ -132,6 +132,7 @@ watch(passwordProtected, (value) => {
       :title="$t('msg.info.privateLink')"
       :footer="null"
       width="min(100vw,640px)"
+      wrap-class-name="nc-modal-share-view"
     >
       <div class="share-link-box nc-share-link-box bg-primary-50">
         <div class="flex-1 h-min text-xs">{{ sharedViewUrl }}</div>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 9a84a99208..550698274b 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -136,6 +136,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
         centered
         :footer="null"
         :mask-closable="false"
+        wrap-class-name="nc-modal-shared-form-password-dlg"
         @close="passwordDlg = false"
       >
         <div class="w-full flex flex-col">
diff --git a/packages/nc-gui/pages/index/index/create-external.vue b/packages/nc-gui/pages/index/index/create-external.vue
index 47238a5db3..4d696df589 100644
--- a/packages/nc-gui/pages/index/index/create-external.vue
+++ b/packages/nc-gui/pages/index/index/create-external.vue
@@ -556,6 +556,7 @@ onMounted(() => {
       width="600px"
       :ok-text="$t('general.ok')"
       :cancel-text="$t('general.cancel')"
+      wrap-class-name="nc-modal-connection-url"
       @ok="handleImportURL"
     >
       <a-input v-model:value="importURL" />
diff --git a/scripts/cypress/integration/common/1d_pg_table_view_drag_drop_reorder.js b/scripts/cypress/integration/common/1d_pg_table_view_drag_drop_reorder.js
index d0ffcb4944..f281e9c420 100644
--- a/scripts/cypress/integration/common/1d_pg_table_view_drag_drop_reorder.js
+++ b/scripts/cypress/integration/common/1d_pg_table_view_drag_drop_reorder.js
@@ -87,7 +87,7 @@ export const genTest = (apiType, dbType) => {
             cy.snipActiveModal(`Modal_createView_${viewType}`);
 
             // Pop up window, click Submit (accepting default name for view)
-            cy.getActiveModal().find("button:contains(Submit)").click();
+            cy.getActiveModal(".nc-modal-view-create").find("button:contains(Submit)").click();
 
             cy.toastWait("View created successfully");
         }
diff --git a/scripts/cypress/integration/common/1d_table_view_drag_drop_reorder.js b/scripts/cypress/integration/common/1d_table_view_drag_drop_reorder.js
index 6d29b2f25a..49fdfae329 100644
--- a/scripts/cypress/integration/common/1d_table_view_drag_drop_reorder.js
+++ b/scripts/cypress/integration/common/1d_table_view_drag_drop_reorder.js
@@ -90,7 +90,7 @@ export const genTest = (apiType, dbType) => {
             cy.snipActiveModal(`Modal_createView_${viewType}`);
 
             // Pop up window, click Submit (accepting default name for view)
-            cy.getActiveModal().find("button:contains(Submit)").click();
+            cy.getActiveModal(".nc-modal-view-create").find("button:contains(Submit)").click();
 
             cy.toastWait("View created successfully");
         }
diff --git a/scripts/cypress/integration/common/2a_table_with_belongs_to_colulmn.js b/scripts/cypress/integration/common/2a_table_with_belongs_to_colulmn.js
index 137ab4a2c1..f2bf2146a7 100644
--- a/scripts/cypress/integration/common/2a_table_with_belongs_to_colulmn.js
+++ b/scripts/cypress/integration/common/2a_table_with_belongs_to_colulmn.js
@@ -59,26 +59,26 @@ export const genTest = (apiType, dbType) => {
         });
 
         it("Expand Link record, validate", () => {
-            cy.getActiveModal()
+            cy.getActiveModal(".nc-modal-link-record")
                 .find("button:contains(Link to 'City')")
                 .click()
                 .then(() => {
 
                     // Link record form validation
-                    cy.getActiveModal().contains("Link record").should("exist");
-                    cy.getActiveModal()
+                    cy.getActiveModal(".nc-modal-link-record").contains("Link record").should("exist");
+                    cy.getActiveModal(".nc-modal-link-record")
                         .find(".nc-reload")
                         .should("exist");
-                    cy.getActiveModal()
+                    cy.getActiveModal(".nc-modal-link-record")
                         .find('button:contains("Add new record")')
                         .should("exist");
-                    cy.getActiveModal()
+                    cy.getActiveModal(".nc-modal-link-record")
                         .find(".ant-card")
                         .eq(0)
                         .contains("A Corua (La Corua)")
                         .should("exist");
 
-                    cy.getActiveModal()
+                    cy.getActiveModal(".nc-modal-link-record")
                         .find("button.ant-modal-close")
                         .click();
                         // .then(() => {
diff --git a/scripts/cypress/integration/common/2b_table_with_m2m_column.js b/scripts/cypress/integration/common/2b_table_with_m2m_column.js
index ea3c2ecbeb..8aa1fc8dd3 100644
--- a/scripts/cypress/integration/common/2b_table_with_m2m_column.js
+++ b/scripts/cypress/integration/common/2b_table_with_m2m_column.js
@@ -70,19 +70,19 @@ export const genTest = (apiType, dbType) => {
                 .click()
                 .then(() => {
                     // Link record form validation
-                    cy.getActiveModal().contains("Link record").should("exist");
-                    cy.getActiveModal()
+                    cy.getActiveModal(".nc-modal-link-record").contains("Link record").should("exist");
+                    cy.getActiveModal(".nc-modal-link-record")
                         .find(".nc-reload")
                         .should("exist");
-                    cy.getActiveModal()
+                    cy.getActiveModal(".nc-modal-link-record")
                         .find('button:contains("Add new record")')
                         .should("exist");
-                    cy.getActiveModal()
+                    cy.getActiveModal(".nc-modal-link-record")
                         .find(".ant-card")
                         .eq(0)
                         .contains("ACE GOLDFINGER")
                         .should("exist");
-                    cy.getActiveModal().find("button.ant-modal-close").click();
+                    cy.getActiveModal(".nc-modal-link-record").find("button.ant-modal-close").click();
                 });
         });
 
diff --git a/scripts/cypress/integration/common/4a_table_view_grid_gallery_form.js b/scripts/cypress/integration/common/4a_table_view_grid_gallery_form.js
index fde2c003b4..361dc23423 100644
--- a/scripts/cypress/integration/common/4a_table_view_grid_gallery_form.js
+++ b/scripts/cypress/integration/common/4a_table_view_grid_gallery_form.js
@@ -45,7 +45,7 @@ export const genTest = (apiType, dbType) => {
                 cy.get(`.nc-create-${viewType}-view`).click();
 
                 // Pop up window, click Submit (accepting default name for view)
-                cy.getActiveModal().find(".ant-btn-primary").click();
+                cy.getActiveModal(".nc-modal-view-create").find(".ant-btn-primary").click();
                 cy.toastWait("View created successfully");
 
                 // kludge: right navbar closes abruptly. force it open again
@@ -83,7 +83,7 @@ export const genTest = (apiType, dbType) => {
                 // click on delete icon (becomes visible on hovering mouse)
                 cy.get(".nc-view-delete-icon").click({ force: true });
                 cy.wait(300)
-                cy.getActiveModal().find('.ant-btn-dangerous').click();
+                cy.getActiveModal(".nc-modal-view-delete").find('.ant-btn-dangerous').click();
                 cy.toastWait("View deleted successfully");
 
                 // kludge: right navbar closes abruptly. force it open again
diff --git a/scripts/cypress/integration/common/4b_table_view_share.js b/scripts/cypress/integration/common/4b_table_view_share.js
index 5e406bb350..9d3deb9d85 100644
--- a/scripts/cypress/integration/common/4b_table_view_share.js
+++ b/scripts/cypress/integration/common/4b_table_view_share.js
@@ -7,21 +7,21 @@ let linkText = "";
 
 const generateLinkWithPwd = () => {
     mainPage.shareView().click();
-    cy.getActiveModal().find(".ant-modal-title").contains("This view is shared via a private link").should("be.visible");
+    cy.getActiveModal(".nc-modal-share-view").find(".ant-modal-title").contains("This view is shared via a private link").should("be.visible");
 
     // enable checkbox & feed pwd, save
-    cy.getActiveModal().find('.ant-collapse').should('exist').click()
-      cy.getActiveModal().find('.ant-checkbox-input').should('exist').first().then(($el) => {
-        if (!$el.prop("checked")) {
-            cy.wrap($el).click({ force: true });
-            cy.getActiveModal().find('input[type="password"]').clear().type("1");
-            cy.getActiveModal().find('button:contains("Save password")').click();
-            cy.toastWait("Successfully updated");
-        }
+    cy.getActiveModal(".nc-modal-share-view").find('.ant-collapse').should('exist').click();
+    cy.getActiveModal(".nc-modal-share-view").find('.ant-checkbox-input').should('exist').first().then(($el) => {
+      if (!$el.prop("checked")) {
+          cy.wrap($el).click({ force: true });
+          cy.getActiveModal(".nc-modal-share-view").find('input[type="password"]').clear().type("1");
+          cy.getActiveModal(".nc-modal-share-view").find('button:contains("Save password")').click();
+          cy.toastWait("Successfully updated");
+      }
     });
     
     // copy link text, visit URL
-    cy.getActiveModal()
+    cy.getActiveModal(".nc-modal-share-view")
         .find(".nc-share-link-box")
         .then(($obj) => {
             linkText = $obj.text().trim();
@@ -62,25 +62,25 @@ export const genTest = (apiType, dbType) => {
                 baseUrl: null,
             });
 
-            cy.getActiveModal().should("exist");
+            cy.getActiveModal(".nc-modal-shared-view-password-dlg").should("exist");
 
             // feed password
-            cy.getActiveModal().find('input[type="password"]').clear().type("a");
-            cy.getActiveModal().find('button:contains("Unlock")').click();
+            cy.getActiveModal(".nc-modal-shared-view-password-dlg").find('input[type="password"]').clear().type("a");
+            cy.getActiveModal(".nc-modal-shared-view-password-dlg").find('button:contains("Unlock")').click();
 
             // if pwd is incorrect, active modal requesting to feed in password again will persist
-            cy.getActiveModal().find('button:contains("Unlock")').should('exist');
+            cy.getActiveModal(".nc-modal-shared-view-password-dlg").find('button:contains("Unlock")').should('exist');
         });
 
         // fallover test- use previously opened view & continue verification instead of opening again
         it("Share view with correct password", () => {
 
             // feed password
-            cy.getActiveModal()
+            cy.getActiveModal(".nc-modal-shared-view-password-dlg")
                 .find('input[type="password"]')
                 .clear()
                 .type("1");
-            cy.getActiveModal().find('button:contains("Unlock")').click();
+            cy.getActiveModal(".nc-modal-shared-view-password-dlg").find('button:contains("Unlock")').click();
 
             // if pwd is incorrect, active modal requesting to feed in password again will persist
             // cy.getActiveModal().find('button:contains("Unlock")').should('not.exist');
diff --git a/scripts/cypress/integration/common/4c_form_view_detailed.js b/scripts/cypress/integration/common/4c_form_view_detailed.js
index 175701beb9..d56ccc0655 100644
--- a/scripts/cypress/integration/common/4c_form_view_detailed.js
+++ b/scripts/cypress/integration/common/4c_form_view_detailed.js
@@ -100,7 +100,7 @@ export const genTest = (apiType, dbType) => {
                 cy.get(`.nc-create-${viewType}-view`).click();
 
                 // Pop up window, click Submit (accepting default name for view)
-                cy.getActiveModal().find("button:contains(Submit)").click();
+                cy.getActiveModal(".nc-modal-view-create").find("button:contains(Submit)").click();
 
                 cy.toastWait("View created successfully");
 
@@ -420,7 +420,7 @@ export const genTest = (apiType, dbType) => {
                 // click on delete icon (becomes visible on hovering mouse)
                 cy.get(".nc-view-delete-icon").click({ force: true });
                 cy.wait(1000)
-                cy.getActiveModal().find('.ant-btn-dangerous').click();
+                cy.getActiveModal(".nc-modal-view-delete").find('.ant-btn-dangerous').click();
                 cy.toastWait("View deleted successfully");
 
                 // confirm if the number of veiw entries is reduced by 1
diff --git a/scripts/cypress/integration/common/4e_form_view_share.js b/scripts/cypress/integration/common/4e_form_view_share.js
index 91b53980ac..34695a53e2 100644
--- a/scripts/cypress/integration/common/4e_form_view_share.js
+++ b/scripts/cypress/integration/common/4e_form_view_share.js
@@ -53,7 +53,7 @@ export const genTest = (apiType, dbType) => {
               cy.get(`.nc-create-${viewType}-view`).click();
 
               // Pop up window, click Submit (accepting default name for view)
-              cy.getActiveModal().find("button:contains(Submit)").click();
+              cy.getActiveModal(".nc-modal-view-create").find("button:contains(Submit)").click();
 
               cy.toastWait("View created successfully");
 
@@ -108,7 +108,7 @@ export const genTest = (apiType, dbType) => {
                 mainPage.shareView().click();
 
                 // copy link text, visit URL
-                cy.getActiveModal()
+                cy.getActiveModal(".nc-modal-share-view")
                     .should('exist')
                     .find(".share-link-box")
                     .contains("/nc/form/", { timeout: 10000 })
@@ -210,7 +210,7 @@ export const genTest = (apiType, dbType) => {
                 // click on delete icon (becomes visible on hovering mouse)
                 cy.get(".nc-view-delete-icon").click({ force: true });
                 cy.wait(1000);
-                cy.getActiveModal().find('.ant-btn-dangerous').should('exist').click();
+                cy.getActiveModal(".nc-modal-view-delete").find('.ant-btn-dangerous').should('exist').click();
                 cy.toastWait("View deleted successfully");
 
                 // confirm if the number of veiw entries is reduced by 1
diff --git a/scripts/cypress/integration/common/4f_grid_view_share.js b/scripts/cypress/integration/common/4f_grid_view_share.js
index 64a61934f7..4f1b666d22 100644
--- a/scripts/cypress/integration/common/4f_grid_view_share.js
+++ b/scripts/cypress/integration/common/4f_grid_view_share.js
@@ -21,13 +21,13 @@ export const genTest = (apiType, dbType) => {
         cy.wait(1000);
 
         // wait, as URL initially will be /undefined
-        cy.getActiveModal()
+        cy.getActiveModal(".nc-modal-share-view")
             .find(".share-link-box")
             .contains("/nc/view/", { timeout: 10000 })
             .should("exist");
 
         // copy link text, visit URL
-        cy.getActiveModal()
+        cy.getActiveModal(".nc-modal-share-view")
             .find(".share-link-box")
             .contains("/nc/view/", { timeout: 10000 })
             .then(($obj) => {
@@ -82,7 +82,7 @@ export const genTest = (apiType, dbType) => {
 
                 // create a normal public view
                 cy.get(`.nc-create-${viewType}-view`).click();
-                cy.getActiveModal().find("button:contains(Submit)").click();
+                cy.getActiveModal(".nc-modal-view-create").find("button:contains(Submit)").click();
                 cy.toastWait("View created successfully");
 
                 // store base URL- to re-visit and delete form view later
@@ -373,7 +373,7 @@ export const genTest = (apiType, dbType) => {
                 cy.get(".nc-view-item").its("length").should("eq", 2);
 
                 cy.get(".nc-view-delete-icon").eq(0).click({ force: true });
-                cy.getActiveModal().find(".ant-btn-dangerous").click();
+                cy.getActiveModal(".nc-modal-view-delete").find(".ant-btn-dangerous").click();
                 cy.toastWait("View deleted successfully");
 
                 // confirm if the number of veiw entries is reduced by 1
diff --git a/scripts/cypress/integration/common/4f_pg_grid_view_share.js b/scripts/cypress/integration/common/4f_pg_grid_view_share.js
index f42f32a14e..07c895ade3 100644
--- a/scripts/cypress/integration/common/4f_pg_grid_view_share.js
+++ b/scripts/cypress/integration/common/4f_pg_grid_view_share.js
@@ -25,13 +25,13 @@ export const genTest = (apiType, dbType) => {
         cy.wait(5000);
         
         // wait, as URL initially will be /undefined
-        cy.getActiveModal()
+        cy.getActiveModal(".nc-modal-share-view")
             .find(".share-link-box")
             .contains("/nc/view/", { timeout: 10000 })
             .should("exist");
 
         // copy link text, visit URL
-        cy.getActiveModal()
+        cy.getActiveModal(".nc-modal-share-view")
             .find(".share-link-box")
             .contains("/nc/view/", { timeout: 10000 })
             .then(($obj) => {
@@ -75,7 +75,7 @@ export const genTest = (apiType, dbType) => {
             it(`Create ${viewType.toUpperCase()} view`, () => {
                 // create a normal public view
                 cy.get(`.nc-create-${viewType}-view`).click();
-                cy.getActiveModal().find("button:contains(Submit)").click();
+                cy.getActiveModal(".nc-modal-view-create").find("button:contains(Submit)").click();
                 cy.toastWait("View created successfully");
 
                 // store base URL- to re-visit and delete form view later
diff --git a/scripts/cypress/integration/common/6f_attachments.js b/scripts/cypress/integration/common/6f_attachments.js
index b4fbf5ea5f..25fc8597c4 100644
--- a/scripts/cypress/integration/common/6f_attachments.js
+++ b/scripts/cypress/integration/common/6f_attachments.js
@@ -68,7 +68,7 @@ export const genTest = (apiType, dbType) => {
 
             // create form-view
             cy.get(`.nc-create-form-view`).click();
-            cy.getActiveModal().find("button:contains(Submit)").click();
+            cy.getActiveModal(".nc-modal-view-create").find("button:contains(Submit)").click();
 
             cy.toastWait("View created successfully");
 
@@ -77,7 +77,7 @@ export const genTest = (apiType, dbType) => {
             cy.wait(5000);
 
             // copy link text, visit URL
-            cy.getActiveModal()
+            cy.getActiveModal(".nc-modal-share-view")
                 .find(".share-link-box")
                 .contains("/nc/form/", { timeout: 10000 })
                 .should('exist')
diff --git a/scripts/cypress/integration/common/6g_base_share.js b/scripts/cypress/integration/common/6g_base_share.js
index 56d3170860..d35178d62f 100644
--- a/scripts/cypress/integration/common/6g_base_share.js
+++ b/scripts/cypress/integration/common/6g_base_share.js
@@ -90,7 +90,7 @@ export const genTest = (apiType, dbType) => {
               .click();
 
             // Copy URL
-            cy.getActiveModal()
+            cy.getActiveModal(".nc-modal-invite-user-and-shared-base")
                 .find(".nc-url")
                 .then(($obj) => {
                     cy.log($obj[0]);
diff --git a/scripts/cypress/integration/common/7b_import_from_airtable.js b/scripts/cypress/integration/common/7b_import_from_airtable.js
index 62f61f1680..5cd6d1c88f 100644
--- a/scripts/cypress/integration/common/7b_import_from_airtable.js
+++ b/scripts/cypress/integration/common/7b_import_from_airtable.js
@@ -32,9 +32,9 @@ export const genTest = (apiType, dbType) => {
       cy.get('.nc-import-menu').should('exist').click()
       cy.getActiveMenu(".nc-dropdown-import-menu").find('.ant-dropdown-menu-item').contains('Airtable').click()
 
-      cy.getActiveModal().find(".nc-input-api-key").should('exist').clear().type(apiKey)
-      cy.getActiveModal().find(".nc-input-shared-base").should('exist').clear().type(sharedBase)
-      cy.getActiveModal().find(".nc-btn-airtable-import").should('exist').click()
+      cy.getActiveModal(".nc-modal-airtable-import").find(".nc-input-api-key").should('exist').clear().type(apiKey)
+      cy.getActiveModal(".nc-modal-airtable-import").find(".nc-input-shared-base").should('exist').clear().type(sharedBase)
+      cy.getActiveModal(".nc-modal-airtable-import").find(".nc-btn-airtable-import").should('exist').click()
 
       // it will take a while for import to finish
       // cy.getActiveModal().find(".nc-btn-go-dashboard", {timeout: 180000}).should('exist').click()
diff --git a/scripts/cypress/support/commands.js b/scripts/cypress/support/commands.js
index 4774cfd48b..2057b8b043 100644
--- a/scripts/cypress/support/commands.js
+++ b/scripts/cypress/support/commands.js
@@ -363,10 +363,10 @@ Cypress.Commands.add('renameTable', (oldName, newName) => {
     .click({ force: true });
 
   // feed new name
-  cy.getActiveModal().find('input').clear().type(newName);
+  cy.getActiveModal(".nc-modal-table-rename").find('input').clear().type(newName);
 
   // submit
-  cy.getActiveModal().find('button').contains('Submit').click();
+  cy.getActiveModal(".nc-modal-table-rename").find('button').contains('Submit').click();
 
   cy.toastWait('Table renamed successfully');
 
diff --git a/scripts/cypress/support/page_objects/mainPage.js b/scripts/cypress/support/page_objects/mainPage.js
index 8f5396108e..a9d7cf37e3 100644
--- a/scripts/cypress/support/page_objects/mainPage.js
+++ b/scripts/cypress/support/page_objects/mainPage.js
@@ -120,12 +120,12 @@ export class _mainPage {
         // opt-in requested role & submit
         // cy.getActiveSelection().contains(roleType).click({force: true});
         cy.getActiveSelection().find('.nc-role-option').eq(roleIndex).should('exist').click()
-        cy.getActiveModal().find("button.ant-btn-primary").click();
+        cy.getActiveModal(".invite-user-and-shared-base").find("button.ant-btn-primary").click();
 
         cy.toastWait("Successfully updated the user details");
 
         // get URL, invoke
-        cy.getActiveModal()
+        cy.getActiveModal(".nc-modal-invite-user-and-shared-base")
             .find(".ant-alert-message")
             .then(($obj) => {
                 linkText = $obj.text().trim();

From 5bc43c0ac53787f2db4c18f9ccdb386315550ed0 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 13 Sep 2022 21:33:49 +0530
Subject: [PATCH 13/16] chore(CY): fix modal - class name map

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui/components/dlg/QuickImport.vue       |  1 +
 .../virtual-cell/components/ListChildItems.vue       |  9 ++++++++-
 packages/nc-gui/composables/useTable.ts              |  1 +
 packages/nc-gui/pages/index/index/index.vue          |  1 +
 .../common/2a_table_with_belongs_to_colulmn.js       |  2 +-
 .../integration/common/2b_table_with_m2m_column.js   |  6 +++---
 .../integration/common/3f_link_to_another_record.js  |  4 ++--
 .../integration/common/4f_pg_grid_view_share.js      | 12 ++++++------
 .../integration/common/6e_project_operations.js      |  2 +-
 scripts/cypress/integration/common/9a_QuickTest.js   |  2 +-
 10 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 09d62b95ca..4d98ffbff2 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -303,6 +303,7 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
           :import-only="importOnly"
           :quick-import-type="importType"
           :max-rows-to-parse="importState.parserConfig.maxRowsToParse"
+          class="nc-quick-import-template-editor"
           @import="handleImport"
         />
 
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 3ab8524bf8..f190784b47 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -87,7 +87,14 @@ watch(
 </script>
 
 <template>
-  <component :is="container" v-model:visible="vModel" :footer="null" title="Child list" :body-style="{ padding: 0 }">
+  <component
+    :is="container"
+    v-model:visible="vModel"
+    :footer="null"
+    title="Child list"
+    :body-style="{ padding: 0 }"
+    wrap-class-name="nc-modal-child-list"
+  >
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
       <div class="flex mb-4 items-center gap-2 px-12">
         <div class="flex-1" />
diff --git a/packages/nc-gui/composables/useTable.ts b/packages/nc-gui/composables/useTable.ts
index 3246ae75d9..78278db519 100644
--- a/packages/nc-gui/composables/useTable.ts
+++ b/packages/nc-gui/composables/useTable.ts
@@ -63,6 +63,7 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
     // 'Click Submit to Delete The table'
     Modal.confirm({
       title: `${t('msg.info.deleteTableConfirmation')} : ${table.title}?`,
+      wrapClassName: 'nc-modal-table-delete',
       okText: t('general.yes'),
       okType: 'danger',
       cancelText: t('general.no'),
diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index daff53eeeb..929ab0fd44 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -48,6 +48,7 @@ const deleteProject = (project: ProjectType) => {
 
   Modal.confirm({
     title: `Do you want to delete '${project.title}' project?`,
+    wrapClassName: 'nc-modal-project-delete',
     okText: 'Yes',
     okType: 'danger',
     cancelText: 'No',
diff --git a/scripts/cypress/integration/common/2a_table_with_belongs_to_colulmn.js b/scripts/cypress/integration/common/2a_table_with_belongs_to_colulmn.js
index f2bf2146a7..34ac77c2f3 100644
--- a/scripts/cypress/integration/common/2a_table_with_belongs_to_colulmn.js
+++ b/scripts/cypress/integration/common/2a_table_with_belongs_to_colulmn.js
@@ -59,7 +59,7 @@ export const genTest = (apiType, dbType) => {
         });
 
         it("Expand Link record, validate", () => {
-            cy.getActiveModal(".nc-modal-link-record")
+            cy.getActiveModal(".nc-modal-child-list")
                 .find("button:contains(Link to 'City')")
                 .click()
                 .then(() => {
diff --git a/scripts/cypress/integration/common/2b_table_with_m2m_column.js b/scripts/cypress/integration/common/2b_table_with_m2m_column.js
index 8aa1fc8dd3..7d87f72260 100644
--- a/scripts/cypress/integration/common/2b_table_with_m2m_column.js
+++ b/scripts/cypress/integration/common/2b_table_with_m2m_column.js
@@ -57,7 +57,7 @@ export const genTest = (apiType, dbType) => {
             // cy.getActiveModal()
             //     .find("button:contains(Link to 'Film')")
             //     .should("exist");
-            cy.getActiveModal()
+            cy.getActiveModal(".nc-modal-child-list")
                 .find(".ant-card")
                 .eq(0)
                 .contains("ACADEMY DINOSAUR")
@@ -65,7 +65,7 @@ export const genTest = (apiType, dbType) => {
         });
 
         it('Expand "Link to" record, validate', () => {
-            cy.getActiveModal()
+            cy.getActiveModal(".nc-modal-child-list")
                 .find("button:contains(Link to 'Film')")
                 .click()
                 .then(() => {
@@ -92,7 +92,7 @@ export const genTest = (apiType, dbType) => {
             mainPage.getCell("Film List", 1).should("exist").trigger("mouseover").click();
             cy.get('.nc-action-icon').eq(0).should('exist').click({ force: true });
 
-            cy.getActiveModal()
+            cy.getActiveModal(".nc-modal-child-list")
                 .find(".ant-card")
                 .eq(0)
                 .contains("ACADEMY DINOSAUR", { timeout: 2000 })
diff --git a/scripts/cypress/integration/common/3f_link_to_another_record.js b/scripts/cypress/integration/common/3f_link_to_another_record.js
index fb973db21a..1cef8e0ed7 100644
--- a/scripts/cypress/integration/common/3f_link_to_another_record.js
+++ b/scripts/cypress/integration/common/3f_link_to_another_record.js
@@ -175,14 +175,14 @@ export const genTest = (apiType, dbType) => {
         .should("exist")
         .click({ force: true });
       cy.wait(1000);
-      cy.getActiveModal()
+      cy.getActiveModal(".nc-modal-child-list")
         .find('.ant-card').should('exist')
         .eq(0).click();
 
       // MM
       cy.get(".nc-expand-col-Sheet1.List").find(".ant-btn-primary").click();
       cy.wait(1000);
-      cy.getActiveModal()
+      cy.getActiveModal(".nc-modal-child-list")
         .find('.ant-card').should('exist')
         .eq(0).click();
 
diff --git a/scripts/cypress/integration/common/4f_pg_grid_view_share.js b/scripts/cypress/integration/common/4f_pg_grid_view_share.js
index 07c895ade3..34f8ead400 100644
--- a/scripts/cypress/integration/common/4f_pg_grid_view_share.js
+++ b/scripts/cypress/integration/common/4f_pg_grid_view_share.js
@@ -287,16 +287,16 @@ export const genTest = (apiType, dbType) => {
                     .find("button.mdi-arrow-expand")
                     .click();
 
-                cy.getActiveModal().find("button.mdi-reload").should("exist");
-                cy.getActiveModal()
+                cy.getActiveModal(".nc-modal-child-list").find("button.mdi-reload").should("exist");
+                cy.getActiveModal(".nc-modal-child-list")
                     .find("button")
                     .contains("Link to")
                     .should("not.exist");
-                cy.getActiveModal()
+                cy.getActiveModal(".nc-modal-child-list")
                     .find(".child-card")
                     .contains("2")
                     .should("exist");
-                cy.getActiveModal()
+                cy.getActiveModal(".nc-modal-child-list")
                     .find(".child-card")
                     .find("button")
                     .should("not.exist");
@@ -340,8 +340,8 @@ export const genTest = (apiType, dbType) => {
                     .find("button.mdi-arrow-expand")
                     .click();
 
-                cy.getActiveModal().find("button.mdi-reload").should("exist");
-                cy.getActiveModal()
+                cy.getActiveModal(".nc-modal-child-list").find("button.mdi-reload").should("exist");
+                cy.getActiveModal(".nc-modal-child-list")
                     .find("button")
                     .contains("Link to")
                     .should("not.exist");
diff --git a/scripts/cypress/integration/common/6e_project_operations.js b/scripts/cypress/integration/common/6e_project_operations.js
index 9c859f08ef..3013dd13b7 100644
--- a/scripts/cypress/integration/common/6e_project_operations.js
+++ b/scripts/cypress/integration/common/6e_project_operations.js
@@ -22,7 +22,7 @@ export const genTest = (apiType, dbType) => {
                 .last()
                 .click();
 
-            cy.getActiveModal()
+            cy.getActiveModal(".nc-modal-project-delete")
                 .find(".ant-btn-dangerous")
                 .should("exist")
                 .click();
diff --git a/scripts/cypress/integration/common/9a_QuickTest.js b/scripts/cypress/integration/common/9a_QuickTest.js
index 0568eaf5af..c73492490e 100644
--- a/scripts/cypress/integration/common/9a_QuickTest.js
+++ b/scripts/cypress/integration/common/9a_QuickTest.js
@@ -416,7 +416,7 @@ export const genTest = (apiType, dbType, testMode) => {
                   .last()
                   .click();
 
-                cy.getActiveModal()
+                cy.getActiveModal(".nc-modal-project-delete")
                   .find("button")
                   .contains("Submit")
                   .should("exist")

From e738728cba4e1c3ddd45695ca25b248e4a471845 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 13 Sep 2022 21:46:46 +0530
Subject: [PATCH 14/16] chore(CY): invite user class name fix

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 scripts/cypress/support/page_objects/mainPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/cypress/support/page_objects/mainPage.js b/scripts/cypress/support/page_objects/mainPage.js
index a9d7cf37e3..d50ccedd9b 100644
--- a/scripts/cypress/support/page_objects/mainPage.js
+++ b/scripts/cypress/support/page_objects/mainPage.js
@@ -120,7 +120,7 @@ export class _mainPage {
         // opt-in requested role & submit
         // cy.getActiveSelection().contains(roleType).click({force: true});
         cy.getActiveSelection().find('.nc-role-option').eq(roleIndex).should('exist').click()
-        cy.getActiveModal(".invite-user-and-shared-base").find("button.ant-btn-primary").click();
+        cy.getActiveModal(".nc-modal-invite-user-and-shared-base").find("button.ant-btn-primary").click();
 
         cy.toastWait("Successfully updated the user details");
 

From 50eaf81b0bd4b143deb90ede9d95787d49097c7f Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 13 Sep 2022 21:53:27 +0530
Subject: [PATCH 15/16] chore(CY): modal class name map fix - share base

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 scripts/cypress/integration/common/6g_base_share.js | 2 +-
 scripts/cypress/support/page_objects/mainPage.js    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/cypress/integration/common/6g_base_share.js b/scripts/cypress/integration/common/6g_base_share.js
index d35178d62f..2b9e41da6a 100644
--- a/scripts/cypress/integration/common/6g_base_share.js
+++ b/scripts/cypress/integration/common/6g_base_share.js
@@ -90,7 +90,7 @@ export const genTest = (apiType, dbType) => {
               .click();
 
             // Copy URL
-            cy.getActiveModal(".nc-modal-invite-user-and-shared-base")
+            cy.getActiveModal(".nc-modal-invite-user-and-share-base")
                 .find(".nc-url")
                 .then(($obj) => {
                     cy.log($obj[0]);
diff --git a/scripts/cypress/support/page_objects/mainPage.js b/scripts/cypress/support/page_objects/mainPage.js
index d50ccedd9b..ce21a90e7a 100644
--- a/scripts/cypress/support/page_objects/mainPage.js
+++ b/scripts/cypress/support/page_objects/mainPage.js
@@ -120,12 +120,12 @@ export class _mainPage {
         // opt-in requested role & submit
         // cy.getActiveSelection().contains(roleType).click({force: true});
         cy.getActiveSelection().find('.nc-role-option').eq(roleIndex).should('exist').click()
-        cy.getActiveModal(".nc-modal-invite-user-and-shared-base").find("button.ant-btn-primary").click();
+        cy.getActiveModal(".nc-modal-invite-user-and-share-base").find("button.ant-btn-primary").click();
 
         cy.toastWait("Successfully updated the user details");
 
         // get URL, invoke
-        cy.getActiveModal(".nc-modal-invite-user-and-shared-base")
+        cy.getActiveModal(".nc-modal-invite-user-and-share-base")
             .find(".ant-alert-message")
             .then(($obj) => {
                 linkText = $obj.text().trim();

From aff7a1cec4befb4e512a3643dd8f4f08769a2a81 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 13 Sep 2022 22:23:29 +0530
Subject: [PATCH 16/16] chore(CY): LTAR class name fix

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../common/3f_link_to_another_record.js          | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/scripts/cypress/integration/common/3f_link_to_another_record.js b/scripts/cypress/integration/common/3f_link_to_another_record.js
index 1cef8e0ed7..4434c5288f 100644
--- a/scripts/cypress/integration/common/3f_link_to_another_record.js
+++ b/scripts/cypress/integration/common/3f_link_to_another_record.js
@@ -175,14 +175,14 @@ export const genTest = (apiType, dbType) => {
         .should("exist")
         .click({ force: true });
       cy.wait(1000);
-      cy.getActiveModal(".nc-modal-child-list")
+      cy.getActiveModal(".nc-modal-link-record")
         .find('.ant-card').should('exist')
         .eq(0).click();
 
       // MM
       cy.get(".nc-expand-col-Sheet1.List").find(".ant-btn-primary").click();
       cy.wait(1000);
-      cy.getActiveModal(".nc-modal-child-list")
+      cy.getActiveModal(".nc-modal-link-record")
         .find('.ant-card').should('exist')
         .eq(0).click();
 
@@ -218,7 +218,7 @@ export const genTest = (apiType, dbType) => {
       mainPage.getCell("Sheet1", 2)
         .find(".nc-action-icon")
         .click({ force: true });
-      cy.getActiveModal()
+      cy.getActiveModal(".nc-modal-link-record")
         .find('.ant-card')
         .should('exist')
         .eq(1)
@@ -230,7 +230,7 @@ export const genTest = (apiType, dbType) => {
         .find(".nc-action-icon")
         .last()
         .click({ force: true });
-      cy.getActiveModal()
+      cy.getActiveModal(".nc-modal-link-record")
         .find('.ant-card')
         .should('exist')
         .eq(1)
@@ -242,7 +242,7 @@ export const genTest = (apiType, dbType) => {
         .find(".nc-action-icon")
         .last()
         .click({ force: true });
-      cy.getActiveModal()
+      cy.getActiveModal(".nc-modal-link-record")
         .find('.ant-card')
         .should('exist')
         .eq(1)
@@ -261,7 +261,7 @@ export const genTest = (apiType, dbType) => {
         .should("exist")
         .click({ force: true });
       cy.wait(1000);
-      cy.getActiveModal()
+      cy.getActiveModal(".nc-modal-link-record")
         .find('.ant-card').should('exist')
         .eq(2).click();
 
@@ -269,7 +269,7 @@ export const genTest = (apiType, dbType) => {
       cy.get(".nc-expand-col-Sheet1.List")
         .find(".ant-btn-primary").click();
       cy.wait(1000);
-      cy.getActiveModal()
+      cy.getActiveModal(".nc-modal-link-record")
         .find('.ant-card').should('exist')
         .eq(2).click();
       cy.wait(1000);
@@ -278,7 +278,7 @@ export const genTest = (apiType, dbType) => {
       cy.get(".nc-expand-col-Link2-1hm")
         .find(".ant-btn-primary").click();
       cy.wait(1000);
-      cy.getActiveModal()
+      cy.getActiveModal(".nc-modal-link-record")
         .find('.ant-card').should('exist')
         .eq(2).click();
       cy.wait(1000);