From 312120fd0b32882829d2ac957414177fcc7dcca5 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Mon, 19 Sep 2022 13:15:25 +0530
Subject: [PATCH 1/2] test: cy-stability for dropdown

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../nc-gui/components/api-client/Headers.vue  |  8 +++++++-
 .../nc-gui/components/cell/MultiSelect.vue    |  1 +
 .../nc-gui/components/cell/SingleSelect.vue   |  1 +
 .../smartsheet-column/AdvancedOptions.vue     |  2 +-
 .../smartsheet-column/CheckboxOptions.vue     |  2 +-
 .../smartsheet-column/CurrencyOptions.vue     |  2 ++
 .../smartsheet-column/DateOptions.vue         |  2 +-
 .../smartsheet-column/DurationOptions.vue     |  2 +-
 .../smartsheet-column/EditOrAdd.vue           |  8 +++++++-
 .../LinkedToAnotherRecordOptions.vue          | 17 +++++++++++++++--
 .../smartsheet-column/LookupOptions.vue       | 13 +++++++++++--
 .../smartsheet-column/PercentOptions.vue      |  2 +-
 .../smartsheet-column/RatingOptions.vue       |  4 ++--
 .../smartsheet-column/RollupOptions.vue       | 19 ++++++++++++++++---
 .../FieldListAutoCompleteDropdown.vue         |  1 +
 .../smartsheet-toolbar/FieldsMenu.vue         |  8 +++++++-
 .../smartsheet-toolbar/SearchData.vue         |  2 +-
 .../smartsheet-toolbar/SortListMenu.vue       |  2 +-
 .../components/smartsheet/ApiSnippet.vue      |  7 ++++++-
 .../tabs/auth/user-management/ShareBase.vue   |  7 ++++++-
 .../tabs/auth/user-management/UsersModal.vue  |  2 +-
 .../nc-gui/components/template/Editor.vue     |  9 ++++++++-
 .../components/webhook/ChannelMultiSelect.vue |  8 +++++++-
 packages/nc-gui/components/webhook/Editor.vue |  9 ++++++++-
 .../pages/index/index/create-external.vue     | 19 +++++++++++++++----
 .../common/1b_table_column_operations.js      |  2 +-
 .../integration/common/3b_formula_column.js   |  2 +-
 .../integration/common/3c_lookup_column.js    |  6 +++---
 .../integration/common/3d_rollup_column.js    |  8 ++++----
 .../integration/common/3e_duration_column.js  |  6 +++---
 .../common/3f_link_to_another_record.js       |  4 ++--
 .../integration/common/6g_base_share.js       |  4 ++--
 .../cypress/integration/common/8a_webhook.js  |  4 ++--
 .../cypress/support/page_objects/mainPage.js  |  4 ++--
 .../support/page_objects/navigation.js        |  2 +-
 35 files changed, 149 insertions(+), 50 deletions(-)

diff --git a/packages/nc-gui/components/api-client/Headers.vue b/packages/nc-gui/components/api-client/Headers.vue
index 4047eb8652..d6e08efc38 100644
--- a/packages/nc-gui/components/api-client/Headers.vue
+++ b/packages/nc-gui/components/api-client/Headers.vue
@@ -87,7 +87,13 @@ const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
           </td>
           <td class="px-2 w-min-[400px]">
             <a-form-item>
-              <a-select v-model:value="headerRow.name" size="large" placeholder="Key" class="nc-input-hook-header-key">
+              <a-select
+                v-model:value="headerRow.name"
+                size="large"
+                placeholder="Key"
+                class="nc-input-hook-header-key"
+                dropdown-class-name="nc-dropdown-webhook-header"
+              >
                 <a-select-option v-for="(header, i) in headerList" :key="i" :value="header">
                   {{ header }}
                 </a-select-option>
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 004f3e7eb1..77bfd5a3e2 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -134,6 +134,7 @@ watch(isOpen, (n, _o) => {
     :show-search="false"
     :open="isOpen"
     :disabled="readOnly"
+    dropdown-class-name="nc-dropdown-multi-select-cell"
     @keydown="handleKeys"
     @click="isOpen = !isOpen"
   >
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 72078b651e..d3690bc9ba 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -73,6 +73,7 @@ watch(isOpen, (n, _o) => {
     :open="isOpen"
     :disabled="readOnly"
     :show-arrow="!readOnly && (active || vModel === null)"
+    dropdown-class-name="nc-dropdown-single-select-cell"
     @select="isOpen = false"
     @keydown="handleKeys"
     @click="isOpen = !isOpen"
diff --git a/packages/nc-gui/components/smartsheet-column/AdvancedOptions.vue b/packages/nc-gui/components/smartsheet-column/AdvancedOptions.vue
index 97d68eb9ca..f6b6192b93 100644
--- a/packages/nc-gui/components/smartsheet-column/AdvancedOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/AdvancedOptions.vue
@@ -82,7 +82,7 @@ onBeforeMount(() => {
       </a-form-item>
     </div>
     <a-form-item :label="$t('labels.databaseType')" v-bind="validateInfos.dt">
-      <a-select v-model:value="vModel.dt" @change="onDataTypeChange">
+      <a-select v-model:value="vModel.dt" dropdown-class-name="nc-dropdown-db-type" @change="onDataTypeChange">
         <a-select-option v-for="type in dataTypes" :key="type" :value="type">
           {{ type }}
         </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet-column/CheckboxOptions.vue b/packages/nc-gui/components/smartsheet-column/CheckboxOptions.vue
index c4bda123c6..f4a89a3b7e 100644
--- a/packages/nc-gui/components/smartsheet-column/CheckboxOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/CheckboxOptions.vue
@@ -78,7 +78,7 @@ watch(
   <a-row>
     <a-col :span="24">
       <a-form-item label="Icon">
-        <a-select v-model:value="vModel.meta.iconIdx" class="w-52">
+        <a-select v-model:value="vModel.meta.iconIdx" class="w-52" dropdown-class-name="nc-dropdown-checkbox-icon">
           <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
             <div class="flex items-center">
               <component
diff --git a/packages/nc-gui/components/smartsheet-column/CurrencyOptions.vue b/packages/nc-gui/components/smartsheet-column/CurrencyOptions.vue
index d09c227b7d..9227466b49 100644
--- a/packages/nc-gui/components/smartsheet-column/CurrencyOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/CurrencyOptions.vue
@@ -83,6 +83,7 @@ vModel.value.meta = {
           show-search
           :filter-option="filterOption"
           :disabled="isMoney && isPg"
+          dropdown-class-name="nc-dropdown-currency-cell-locale"
         >
           <a-select-option v-for="(currencyLocale, i) of currencyLocaleList" :key="i" :value="currencyLocale.value">
             {{ currencyLocale.text }}
@@ -98,6 +99,7 @@ vModel.value.meta = {
           show-search
           :filter-option="filterOption"
           :disabled="isMoney && isPg"
+          dropdown-class-name="nc-dropdown-currency-cell-code"
         >
           <a-select-option v-for="(currencyCode, i) of currencyList" :key="i" :value="currencyCode">
             {{ currencyCode }}
diff --git a/packages/nc-gui/components/smartsheet-column/DateOptions.vue b/packages/nc-gui/components/smartsheet-column/DateOptions.vue
index 84585a07d9..6e181a4693 100644
--- a/packages/nc-gui/components/smartsheet-column/DateOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/DateOptions.vue
@@ -17,7 +17,7 @@ if (!vModel.value.meta?.date_format) {
 
 <template>
   <a-form-item label="Date Format">
-    <a-select v-model:value="vModel.meta.date_format">
+    <a-select v-model:value="vModel.meta.date_format" dropdown-class-name="nc-dropdown-date-format">
       <a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format">
         <div class="flex flex-row items-center">
           <div class="text-xs">
diff --git a/packages/nc-gui/components/smartsheet-column/DurationOptions.vue b/packages/nc-gui/components/smartsheet-column/DurationOptions.vue
index 770ddccb99..373e0fb75c 100644
--- a/packages/nc-gui/components/smartsheet-column/DurationOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/DurationOptions.vue
@@ -30,7 +30,7 @@ vModel.value.meta = {
     </a-col>
     <a-col :span="24">
       <a-form-item label="Duration Format">
-        <a-select v-model:value="vModel.meta.duration" class="w-52">
+        <a-select v-model:value="vModel.meta.duration" class="w-52" dropdown-class-name="nc-dropdown-duration-option">
           <a-select-option v-for="(duration, i) of durationOptionList" :key="i" :value="duration.id">
             {{ duration.title }}
           </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue
index 8a85b54a49..42aa582b2a 100644
--- a/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet-column/EditOrAdd.vue
@@ -111,7 +111,13 @@ onMounted(() => {
           v-if="!(isEdit && !!onlyNameUpdateOnEditColumns.find((col) => col === formState.uidt))"
           :label="$t('labels.columnType')"
         >
-          <a-select v-model:value="formState.uidt" show-search class="nc-column-type-input" @change="onUidtOrIdTypeChange">
+          <a-select
+            v-model:value="formState.uidt"
+            show-search
+            class="nc-column-type-input"
+            dropdown-class-name="nc-dropdown-column-type"
+            @change="onUidtOrIdTypeChange"
+          >
             <a-select-option v-for="opt of uiTypesOptions" :key="opt.name" :value="opt.name" v-bind="validateInfos.uidt">
               <div class="flex gap-1 items-center">
                 <component :is="opt.icon" class="text-grey" />
diff --git a/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
index 411192378b..288691f1f0 100644
--- a/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
@@ -66,6 +66,7 @@ const refTables = $computed(() => {
           v-model:value="vModel.childId"
           show-search
           :filter-option="(value, option) => option.key.toLowerCase().includes(value.toLowerCase())"
+          dropdown-class-name="nc-dropdown-ltar-child-table"
           @change="onDataTypeChange"
         >
           <a-select-option v-for="table in refTables" :key="table.title" :value="table.id">
@@ -86,14 +87,26 @@ const refTables = $computed(() => {
     <div v-if="advancedOptions" class="flex flex-col p-6 gap-4 border-2 mt-2">
       <div class="flex flex-row space-x-2">
         <a-form-item class="flex w-1/2" :label="$t('labels.onUpdate')">
-          <a-select v-model:value="vModel.onUpdate" :disabled="vModel.virtual" name="onUpdate" @change="onDataTypeChange">
+          <a-select
+            v-model:value="vModel.onUpdate"
+            :disabled="vModel.virtual"
+            name="onUpdate"
+            dropdown-class-name="nc-dropdown-on-update"
+            @change="onDataTypeChange"
+          >
             <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
               {{ option }}
             </a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item class="flex w-1/2" :label="$t('labels.onDelete')">
-          <a-select v-model:value="vModel.onDelete" :disabled="vModel.virtual" name="onDelete" @change="onDataTypeChange">
+          <a-select
+            v-model:value="vModel.onDelete"
+            :disabled="vModel.virtual"
+            name="onDelete"
+            dropdown-class-name="nc-dropdown-on-delete"
+            @change="onDataTypeChange"
+          >
             <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
               {{ option }}
             </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet-column/LookupOptions.vue b/packages/nc-gui/components/smartsheet-column/LookupOptions.vue
index 310375da15..df3e4ff484 100644
--- a/packages/nc-gui/components/smartsheet-column/LookupOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/LookupOptions.vue
@@ -62,7 +62,11 @@ const columns = $computed(() => {
   <div class="p-6 w-full flex flex-col border-2 mb-2 mt-4">
     <div class="w-full flex flex-row space-x-2">
       <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
-        <a-select v-model:value="vModel.fk_relation_column_id" dropdown-class-name="!w-64" @change="onDataTypeChange">
+        <a-select
+          v-model:value="vModel.fk_relation_column_id"
+          dropdown-class-name="!w-64 nc-dropdown-relation-table"
+          @change="onDataTypeChange"
+        >
           <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
             <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
               <div class="font-semibold text-xs">{{ table.column.title }}</div>
@@ -74,7 +78,12 @@ const columns = $computed(() => {
         </a-select>
       </a-form-item>
       <a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_lookup_column_id">
-        <a-select v-model:value="vModel.fk_lookup_column_id" name="fk_lookup_column_id" @change="onDataTypeChange">
+        <a-select
+          v-model:value="vModel.fk_lookup_column_id"
+          name="fk_lookup_column_id"
+          dropdown-class-name="nc-dropdown-relation-column"
+          @change="onDataTypeChange"
+        >
           <a-select-option v-for="(column, index) of columns" :key="index" :value="column.id">
             {{ column.title }}
           </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet-column/PercentOptions.vue b/packages/nc-gui/components/smartsheet-column/PercentOptions.vue
index 9d163c7fe7..bf136ba6bd 100644
--- a/packages/nc-gui/components/smartsheet-column/PercentOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/PercentOptions.vue
@@ -21,7 +21,7 @@ if (!vModel.value.meta?.precision) vModel.value.meta.precision = precisions[0].i
   <div class="flex flex-col mt-2 gap-2">
     <div class="flex flex-row space-x-2">
       <a-form-item class="flex w-1/2" label="Precision">
-        <a-select v-model:value="vModel.meta.precision">
+        <a-select v-model:value="vModel.meta.precision" dropdown-class-name="nc-dropdown-precision">
           <a-select-option v-for="(precision, i) of precisions" :key="i" :value="precision.id">
             <div class="flex flex-row items-center">
               <div class="text-xs">
diff --git a/packages/nc-gui/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui/components/smartsheet-column/RatingOptions.vue
index 992a2511c6..704601a47d 100644
--- a/packages/nc-gui/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/RatingOptions.vue
@@ -72,7 +72,7 @@ watch(
   <a-row :gutter="8">
     <a-col :span="12">
       <a-form-item label="Icon">
-        <a-select v-model:value="vModel.meta.iconIdx" class="w-52">
+        <a-select v-model:value="vModel.meta.iconIdx" class="w-52" dropdown-class-name="nc-dropdown-rating-icon">
           <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
             <div class="flex items-center">
               <component
@@ -95,7 +95,7 @@ watch(
     </a-col>
     <a-col :span="12">
       <a-form-item label="Max">
-        <a-select v-model:value="vModel.meta.max" class="w-52">
+        <a-select v-model:value="vModel.meta.max" class="w-52" dropdown-class-name="nc-dropdown-rating-color">
           <a-select-option v-for="(v, i) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="i" :value="v">
             {{ v }}
           </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet-column/RollupOptions.vue b/packages/nc-gui/components/smartsheet-column/RollupOptions.vue
index 0d4a11ec76..7fa7a643d3 100644
--- a/packages/nc-gui/components/smartsheet-column/RollupOptions.vue
+++ b/packages/nc-gui/components/smartsheet-column/RollupOptions.vue
@@ -75,7 +75,11 @@ const columns = $computed(() => {
   <div class="p-6 w-full flex flex-col border-2 mb-2 mt-4">
     <div class="w-full flex flex-row space-x-2">
       <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
-        <a-select v-model:value="vModel.fk_relation_column_id" dropdown-class-name="!w-64" @change="onDataTypeChange">
+        <a-select
+          v-model:value="vModel.fk_relation_column_id"
+          dropdown-class-name="!w-64 nc-dropdown-relation-table"
+          @change="onDataTypeChange"
+        >
           <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
             <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
               <div class="font-semibold text-xs">{{ table.column.title }}</div>
@@ -87,7 +91,12 @@ const columns = $computed(() => {
         </a-select>
       </a-form-item>
       <a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_rollup_column_id">
-        <a-select v-model:value="vModel.fk_rollup_column_id" name="fk_rollup_column_id" @change="onDataTypeChange">
+        <a-select
+          v-model:value="vModel.fk_rollup_column_id"
+          name="fk_rollup_column_id"
+          dropdown-class-name="nc-dropdown-relation-column"
+          @change="onDataTypeChange"
+        >
           <a-select-option v-for="(column, index) of columns" :key="index" :value="column.id">
             {{ column.title }}
           </a-select-option>
@@ -95,7 +104,11 @@ const columns = $computed(() => {
       </a-form-item>
     </div>
     <a-form-item label="Aggregate function" v-bind="validateInfos.rollup_function">
-      <a-select v-model:value="vModel.rollup_function" @change="onDataTypeChange">
+      <a-select
+        v-model:value="vModel.rollup_function"
+        dropdown-class-name="nc-dropdown-rollup-function"
+        @change="onDataTypeChange"
+      >
         <a-select-option v-for="(func, index) of aggrFunctionsList" :key="index" :value="func.value">
           {{ func.text }}
         </a-select-option>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index e35e9c4cc3..26093e5c08 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -57,6 +57,7 @@ const filterOption = (input: string, option: any) => {
     show-search
     :placeholder="$t('placeholder.selectField')"
     :filter-option="filterOption"
+    dropdown-class-name="nc-dropdown-toolbar-field-list"
   >
     <a-select-option v-for="option in options" :key="option.value" :value="option.value">
       <div class="flex gap-2 items-center items-center h-full">
diff --git a/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
index af6da2fa96..ae04476d9a 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
@@ -135,7 +135,13 @@ const getIcon = (c: ColumnType) =>
         @click.stop
       >
         <a-card v-if="activeView.type === ViewTypes.GALLERY" size="small" title="Cover image">
-          <a-select v-model:value="coverImageColumnId" class="w-full" :options="coverOptions" @click.stop></a-select>
+          <a-select
+            v-model:value="coverImageColumnId"
+            class="w-full"
+            :options="coverOptions"
+            dropdown-class-name="nc-dropdown-cover-image"
+            @click.stop
+          ></a-select>
         </a-card>
         <div class="p-1" @click.stop>
           <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
diff --git a/packages/nc-gui/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet-toolbar/SearchData.vue
index ce4763075e..b27d82bb9d 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/SearchData.vue
@@ -41,7 +41,7 @@ function onPressEnter() {
         size="small"
         :dropdown-match-select-width="false"
         :options="columns"
-        dropdown-class-name="!py-0 !rounded"
+        dropdown-class-name="!py-0 !rounded nc-dropdown-toolbar-search-field-option"
         class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
       />
     </div>
diff --git a/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue
index aefe7baa16..5f4eb2a010 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue
@@ -71,7 +71,7 @@ watch(
               v-model:value="sort.direction"
               class="shrink grow-0 nc-sort-dir-select !text-xs"
               :label="$t('labels.operation')"
-              dropdown-class-name="sort-dir-dropdown"
+              dropdown-class-name="sort-dir-dropdown nc-dropdown-sort-dir"
               @click.stop
               @select="saveOrUpdate(sort, i)"
             >
diff --git a/packages/nc-gui/components/smartsheet/ApiSnippet.vue b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
index 57813ab3fb..195ab4ef44 100644
--- a/packages/nc-gui/components/smartsheet/ApiSnippet.vue
+++ b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
@@ -171,7 +171,12 @@ watch($$(activeLang), (newLang) => {
             hide-minimap
           />
           <div v-if="activeLang.clients" class="flex flex-row w-full justify-end space-x-3 mt-4 uppercase">
-            <a-select v-if="activeLang" v-model:value="selectedClient" style="width: 6rem">
+            <a-select
+              v-if="activeLang"
+              v-model:value="selectedClient"
+              style="width: 6rem"
+              dropdown-class-name="nc-dropdown-snippet-active-lang"
+            >
               <a-select-option v-for="(client, i) in activeLang?.clients" :key="i" class="!w-full uppercase" :value="client">
                 {{ client }}
               </a-select-option>
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 4417ebe2ce..345807b076 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
@@ -210,7 +210,12 @@ onMounted(() => {
         </template>
       </a-dropdown>
 
-      <a-select v-if="base?.uuid" v-model:value="base.role" class="flex nc-shared-base-role">
+      <a-select
+        v-if="base?.uuid"
+        v-model:value="base.role"
+        class="flex nc-shared-base-role"
+        dropdown-class-name="nc-dropdown-share-base-role"
+      >
         <template #suffixIcon>
           <div class="flex flex-row">
             <IcRoundKeyboardArrowDown class="text-black -mt-0.5 h-[1rem]" />
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 ce559cb338..c7845d362d 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -221,7 +221,7 @@ const clickInviteMore = () => {
                 <div class="flex flex-col w-1/4">
                   <a-form-item name="role" :rules="[{ required: true, message: 'Role required' }]">
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
-                    <a-select v-model:value="usersData.role" class="nc-user-roles">
+                    <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role">
                       <a-select-option v-for="(role, index) in projectRoles" :key="index" :value="role" class="nc-role-option">
                         <div class="flex flex-row h-full justify-start items-center">
                           <div
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index fd347ddef1..0a3b81523e 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -579,7 +579,13 @@ function handleEditableTnChange(idx: number) {
               </template>
 
               <template v-else-if="column.key === 'destination_column'">
-                <a-select v-model:value="record.destCn" class="w-52" show-search :filter-option="filterOption">
+                <a-select
+                  v-model:value="record.destCn"
+                  class="w-52"
+                  show-search
+                  :filter-option="filterOption"
+                  dropdown-class-name="nc-dropdown-filter-field"
+                >
                   <a-select-option v-for="(col, i) of columns" :key="i" :value="col.title">
                     <div class="flex items-center">
                       <component :is="getUIDTIcon(col.uidt)" />
@@ -687,6 +693,7 @@ function handleEditableTnChange(idx: number) {
                       show-search
                       :options="uiTypeOptions"
                       :filter-option="filterOption"
+                      dropdown-class-name="nc-dropdown-template-uidt"
                     />
                   </a-form-item>
                 </template>
diff --git a/packages/nc-gui/components/webhook/ChannelMultiSelect.vue b/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
index 1bc2b2c064..ad2f39c92a 100644
--- a/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
+++ b/packages/nc-gui/components/webhook/ChannelMultiSelect.vue
@@ -58,7 +58,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-select v-model:value="localChannelValues" mode="multiple" :placeholder="placeholder" max-tag-count="responsive">
+  <a-select
+    v-model:value="localChannelValues"
+    mode="multiple"
+    :placeholder="placeholder"
+    max-tag-count="responsive"
+    dropdown-class-name="nc-dropdown-webhook-channel"
+  >
     <a-select-option v-for="channel of availableChannelWithIdxList" :key="channel.idx" :value="channel.idx">
       {{ channel.channel }}
     </a-select-option>
diff --git a/packages/nc-gui/components/webhook/Editor.vue b/packages/nc-gui/components/webhook/Editor.vue
index ec7ba57b89..72f277cf9f 100644
--- a/packages/nc-gui/components/webhook/Editor.vue
+++ b/packages/nc-gui/components/webhook/Editor.vue
@@ -453,6 +453,7 @@ onMounted(async () => {
               size="large"
               :placeholder="$t('general.event')"
               class="nc-text-field-hook-event"
+              dropdown-class-name="nc-dropdown-webhook-event"
             >
               <a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value.join(' ')">
                 {{ event.text.join(' ') }}
@@ -467,6 +468,7 @@ onMounted(async () => {
               size="large"
               class="nc-select-hook-notification-type"
               :placeholder="$t('general.notification')"
+              dropdown-class-name="nc-dropdown-webhook-notification"
               @change="onNotTypeChange(true)"
             >
               <a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">
@@ -497,7 +499,12 @@ onMounted(async () => {
 
       <a-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 0]">
         <a-col :span="6">
-          <a-select v-model:value="hook.notification.payload.method" size="large" class="nc-select-hook-url-method">
+          <a-select
+            v-model:value="hook.notification.payload.method"
+            size="large"
+            class="nc-select-hook-url-method"
+            dropdown-class-name="nc-dropdown-hook-notification-url-method"
+          >
             <a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">{{ method.title }}</a-select-option>
           </a-select>
         </a-col>
diff --git a/packages/nc-gui/pages/index/index/create-external.vue b/packages/nc-gui/pages/index/index/create-external.vue
index 104f9f82df..1a34237689 100644
--- a/packages/nc-gui/pages/index/index/create-external.vue
+++ b/packages/nc-gui/pages/index/index/create-external.vue
@@ -359,7 +359,12 @@ onMounted(() => {
       </a-form-item>
 
       <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
-        <a-select v-model:value="formState.dataSource.client" class="nc-extdb-db-type" @change="onClientChange">
+        <a-select
+          v-model:value="formState.dataSource.client"
+          class="nc-extdb-db-type"
+          dropdown-class-name="nc-dropdown-ext-db-type"
+          @change="onClientChange"
+        >
           <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
             >{{ client.text }}
           </a-select-option>
@@ -433,7 +438,7 @@ onMounted(() => {
               </div>
             </template>
             <a-form-item label="SSL mode">
-              <a-select v-model:value="formState.sslUse" @select="onSSLModeChange">
+              <a-select v-model:value="formState.sslUse" dropdown-class-name="nc-dropdown-ssl-mode" @select="onSSLModeChange">
                 <a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option>
               </a-select>
             </a-form-item>
@@ -505,13 +510,19 @@ onMounted(() => {
             <a-divider />
 
             <a-form-item :label="$t('labels.inflection.tableName')">
-              <a-select v-model:value="formState.inflection.inflectionTable">
+              <a-select
+                v-model:value="formState.inflection.inflectionTable"
+                dropdown-class-name="nc-dropdown-inflection-table-name"
+              >
                 <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
               </a-select>
             </a-form-item>
 
             <a-form-item :label="$t('labels.inflection.columnName')">
-              <a-select v-model:value="formState.inflection.inflectionColumn">
+              <a-select
+                v-model:value="formState.inflection.inflectionColumn"
+                dropdown-class-name="nc-dropdown-inflection-column-name"
+              >
                 <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
               </a-select>
             </a-form-item>
diff --git a/scripts/cypress/integration/common/1b_table_column_operations.js b/scripts/cypress/integration/common/1b_table_column_operations.js
index b53436a7aa..a7c0c00494 100644
--- a/scripts/cypress/integration/common/1b_table_column_operations.js
+++ b/scripts/cypress/integration/common/1b_table_column_operations.js
@@ -70,7 +70,7 @@ export const genTest = (apiType, dbType) => {
 
                 // change column type and verify
                 cy.get(".nc-column-type-input").last().click();
-                cy.getActiveSelection().find('.ant-select-item-option').contains("LongText").click();
+                cy.getActiveSelection('.nc-dropdown-column-type').find('.ant-select-item-option').contains("LongText").click();
                 cy.get(".ant-btn-primary:visible").contains("Save").click();
 
                 cy.toastWait("Column updated");
diff --git a/scripts/cypress/integration/common/3b_formula_column.js b/scripts/cypress/integration/common/3b_formula_column.js
index a4ef1ae69f..9d6e0a6171 100644
--- a/scripts/cypress/integration/common/3b_formula_column.js
+++ b/scripts/cypress/integration/common/3b_formula_column.js
@@ -58,7 +58,7 @@ export const genTest = (apiType, dbType) => {
               .clear()
               .type(columnName);
             cy.get(".nc-column-type-input").last().click().type("Formula");
-            cy.getActiveSelection().find('.ant-select-item-option').contains("Formula").click();
+            cy.getActiveSelection('.nc-dropdown-column-type').find('.ant-select-item-option').contains("Formula").click();
             cy.get('textarea.nc-formula-input').click().type(formula, { parseSpecialCharSequences: false });
             cy.get(".ant-btn-primary").contains("Save").should('exist').click();
 
diff --git a/scripts/cypress/integration/common/3c_lookup_column.js b/scripts/cypress/integration/common/3c_lookup_column.js
index 543c5e53ce..fc1bd6ab66 100644
--- a/scripts/cypress/integration/common/3c_lookup_column.js
+++ b/scripts/cypress/integration/common/3c_lookup_column.js
@@ -53,14 +53,14 @@ export const genTest = (apiType, dbType) => {
               .clear()
               .type(childCol);
             cy.get(".nc-column-type-input").last().click().type("Lookup");
-            cy.getActiveSelection().find('.ant-select-item-option').contains("Lookup").click();
+            cy.getActiveSelection('.nc-dropdown-column-type').find('.ant-select-item-option').contains("Lookup").click();
 
             // Configure Child table & column names
             fetchParentFromLabel("Child table");
-            cy.getActiveSelection().find('.ant-select-item-option').contains(childTable).click();
+            cy.getActiveSelection('.nc-dropdown-relation-table').find('.ant-select-item-option').contains(childTable).click();
 
             fetchParentFromLabel("Child column");
-            cy.getActiveSelection().find('.ant-select-item-option').contains(childCol).click();
+            cy.getActiveSelection('nc-dropdown-relation-column').find('.ant-select-item-option').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 d386d585b7..a3867b008d 100644
--- a/scripts/cypress/integration/common/3d_rollup_column.js
+++ b/scripts/cypress/integration/common/3d_rollup_column.js
@@ -59,17 +59,17 @@ export const genTest = (apiType, dbType) => {
               .clear()
               .type(columnName);
             cy.get(".nc-column-type-input").last().click().type("RollUp");
-            cy.getActiveSelection().find('.ant-select-item-option').contains("Rollup").click();
+            cy.getActiveSelection('.nc-dropdown-column-type').find('.ant-select-item-option').contains("Rollup").click();
 
             // Configure Child table & column names
             fetchParentFromLabel("Child table");
-            cy.getActiveSelection().find('.ant-select-item-option').contains(childTable).click();
+            cy.getActiveSelection('.nc-dropdown-relation-table').find('.ant-select-item-option').contains(childTable).click();
 
             fetchParentFromLabel("Child column");
-            cy.getActiveSelection().find('.ant-select-item-option').contains(childCol).click();
+            cy.getActiveSelection('.nc-dropdown-relation-column').find('.ant-select-item-option').contains(childCol).click();
 
             fetchParentFromLabel("Aggregate function");
-            cy.getActiveSelection().find('.ant-select-item-option').contains(aggregateFunc).click();
+            cy.getActiveSelection('.nc-dropdown-rollup-function').find('.ant-select-item-option').contains(aggregateFunc).click();
 
             cy.get(".ant-btn-primary").contains("Save").should('exist').click();
             cy.toastWait(`Column created`);
diff --git a/scripts/cypress/integration/common/3e_duration_column.js b/scripts/cypress/integration/common/3e_duration_column.js
index 4f8ef941b2..7aae994389 100644
--- a/scripts/cypress/integration/common/3e_duration_column.js
+++ b/scripts/cypress/integration/common/3e_duration_column.js
@@ -49,11 +49,11 @@ export const genTest = (apiType, dbType) => {
               .clear()
               .type(columnName);
             cy.get(".nc-column-type-input").last().click().type("Duration");
-            cy.getActiveSelection().find('.ant-select-item-option').contains("Duration").click();
+            cy.getActiveSelection('.nc-dropdown-column-type').find('.ant-select-item-option').contains("Duration").click();
 
             // Configure Duration format
             fetchParentFromLabel("Duration Format");
-            cy.getActiveSelection().find('.ant-select-item-option').contains(durationFormat).click();
+            cy.getActiveSelection('.nc-dropdown-duration-option').find('.ant-select-item-option').contains(durationFormat).click();
 
             cy.get(".ant-btn-primary").contains("Save").should('exist').click();
             cy.toastWait(`Column created`);
@@ -85,7 +85,7 @@ export const genTest = (apiType, dbType) => {
               .type(newName);
             // Configure Duration format
             fetchParentFromLabel("Duration Format");
-            cy.getActiveSelection().find('.ant-select-item-option').contains(newDurationFormat).click();
+            cy.getActiveSelection('.nc-dropdown-duration-option').find('.ant-select-item-option').contains(newDurationFormat).click();
 
             cy.get(".ant-btn-primary:visible").contains("Save").click();
 
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 c19c074b55..dc25b2c8e2 100644
--- a/scripts/cypress/integration/common/3f_link_to_another_record.js
+++ b/scripts/cypress/integration/common/3f_link_to_another_record.js
@@ -40,7 +40,7 @@ export const genTest = (apiType, dbType) => {
       cy.get(".nc-column-type-input").last()
         .click()
         .type("Link");
-      cy.getActiveSelection()
+      cy.getActiveSelection('.nc-dropdown-column-type')
         .find('.ant-select-item-option')
         .contains("LinkToAnotherRecord").click();
 
@@ -56,7 +56,7 @@ export const genTest = (apiType, dbType) => {
         .last()
         .click()
         .type(foreignTable);
-      cy.getActiveSelection()
+      cy.getActiveSelection('.nc-dropdown-ltar-child-table')
         .find('.ant-select-item-option')
         .contains(foreignTable)
         .click();
diff --git a/scripts/cypress/integration/common/6g_base_share.js b/scripts/cypress/integration/common/6g_base_share.js
index 2c481e7db6..2644c940d9 100644
--- a/scripts/cypress/integration/common/6g_base_share.js
+++ b/scripts/cypress/integration/common/6g_base_share.js
@@ -85,7 +85,7 @@ export const genTest = (apiType, dbType) => {
 
             cy.getActiveModal().find(".nc-shared-base-role").click();
 
-            cy.getActiveSelection()
+            cy.getActiveSelection('.nc-dropdown-share-base-role')
               .find('.ant-select-item')
               .eq(1)
               .click();
@@ -134,7 +134,7 @@ style="background: transparent; "></iframe>
 
             cy.getActiveModal().find(".nc-shared-base-role").click();
 
-            cy.getActiveSelection()
+            cy.getActiveSelection('.nc-dropdown-share-base-role')
                 .find('.ant-select-item')
                 .eq(0)
                 .click();
diff --git a/scripts/cypress/integration/common/8a_webhook.js b/scripts/cypress/integration/common/8a_webhook.js
index 224a801e8b..101565d973 100644
--- a/scripts/cypress/integration/common/8a_webhook.js
+++ b/scripts/cypress/integration/common/8a_webhook.js
@@ -36,7 +36,7 @@ function createWebhook(hook, test) {
       .type('{downarrow}')
       .type('{downarrow}')
 
-    cy.getActiveSelection().find('.ant-select-item-option-content').contains('Content-Type').should('exist').click();
+    cy.getActiveSelection('.nc-dropdown-webhook-header').find('.ant-select-item-option-content').contains('Content-Type').should('exist').click();
 
     cy.get("input.nc-input-hook-header-value")
         .should("exist")
@@ -78,7 +78,7 @@ function configureWebhook(hook, test) {
 
     if (hook?.event) {
         cy.get(".nc-text-field-hook-event").should("exist").click();
-        cy.getActiveSelection()
+        cy.getActiveSelection('.nc-dropdown-webhook-event')
             .find(`.ant-select-item`)
             .contains(hook.event)
             .should("exist")
diff --git a/scripts/cypress/support/page_objects/mainPage.js b/scripts/cypress/support/page_objects/mainPage.js
index ce21a90e7a..1771009ab8 100644
--- a/scripts/cypress/support/page_objects/mainPage.js
+++ b/scripts/cypress/support/page_objects/mainPage.js
@@ -119,7 +119,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.getActiveSelection('.nc-dropdown-user-role').find('.nc-role-option').eq(roleIndex).should('exist').click()
         cy.getActiveModal(".nc-modal-invite-user-and-share-base").find("button.ant-btn-primary").click();
 
         cy.toastWait("Successfully updated the user details");
@@ -204,7 +204,7 @@ export class _mainPage {
 
         // change column type and verify
         cy.get(".nc-column-type-input").last().click();
-        cy.getActiveSelection().find('.ant-select-item-option').contains(colType).click();
+        cy.getActiveSelection('.nc-dropdown-column-type').find('.ant-select-item-option').contains(colType).click();
         cy.get(".ant-btn-primary:visible").contains("Save").click();
 
         cy.toastWait(`Column created`);
diff --git a/scripts/cypress/support/page_objects/navigation.js b/scripts/cypress/support/page_objects/navigation.js
index 6f906ecc1c..50c4bcbf51 100644
--- a/scripts/cypress/support/page_objects/navigation.js
+++ b/scripts/cypress/support/page_objects/navigation.js
@@ -187,7 +187,7 @@ export class _projectsPage {
 
             if (cred.databaseType === 1) {
                 cy.get('.nc-extdb-db-type').should('exist').click();
-                cy.getActiveSelection().find('.ant-select-item-option').contains("PostgreSQL").click();
+                cy.getActiveSelection('.nc-dropdown-ext-db-type').find('.ant-select-item-option').contains("PostgreSQL").click();
             }
 
             if (cred.databaseName !== "") {

From cee8713a09b3f1dda148d092415eccfe0892bd56 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Mon, 19 Sep 2022 13:32:08 +0530
Subject: [PATCH 2/2] fix: class name typo

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

diff --git a/scripts/cypress/integration/common/3c_lookup_column.js b/scripts/cypress/integration/common/3c_lookup_column.js
index fc1bd6ab66..2656041826 100644
--- a/scripts/cypress/integration/common/3c_lookup_column.js
+++ b/scripts/cypress/integration/common/3c_lookup_column.js
@@ -60,7 +60,7 @@ export const genTest = (apiType, dbType) => {
             cy.getActiveSelection('.nc-dropdown-relation-table').find('.ant-select-item-option').contains(childTable).click();
 
             fetchParentFromLabel("Child column");
-            cy.getActiveSelection('nc-dropdown-relation-column').find('.ant-select-item-option').contains(childCol).click();
+            cy.getActiveSelection('.nc-dropdown-relation-column').find('.ant-select-item-option').contains(childCol).click();
 
             cy.get(".ant-btn-primary").contains("Save").should('exist').click();
             cy.toastWait(`Column created`);