Browse Source

Merge pull request #3699 from nocodb/fix/cy-stability-dropdown

test: cy-stability for dropdown
pull/3701/head
Raju Udava 2 years ago committed by GitHub
parent
commit
03d72b6d5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 8
      packages/nc-gui/components/api-client/Headers.vue
  2. 1
      packages/nc-gui/components/cell/MultiSelect.vue
  3. 1
      packages/nc-gui/components/cell/SingleSelect.vue
  4. 2
      packages/nc-gui/components/smartsheet-column/AdvancedOptions.vue
  5. 2
      packages/nc-gui/components/smartsheet-column/CheckboxOptions.vue
  6. 2
      packages/nc-gui/components/smartsheet-column/CurrencyOptions.vue
  7. 2
      packages/nc-gui/components/smartsheet-column/DateOptions.vue
  8. 2
      packages/nc-gui/components/smartsheet-column/DurationOptions.vue
  9. 8
      packages/nc-gui/components/smartsheet-column/EditOrAdd.vue
  10. 17
      packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue
  11. 13
      packages/nc-gui/components/smartsheet-column/LookupOptions.vue
  12. 2
      packages/nc-gui/components/smartsheet-column/PercentOptions.vue
  13. 4
      packages/nc-gui/components/smartsheet-column/RatingOptions.vue
  14. 19
      packages/nc-gui/components/smartsheet-column/RollupOptions.vue
  15. 1
      packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
  16. 8
      packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue
  17. 2
      packages/nc-gui/components/smartsheet-toolbar/SearchData.vue
  18. 2
      packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue
  19. 7
      packages/nc-gui/components/smartsheet/ApiSnippet.vue
  20. 7
      packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
  21. 2
      packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
  22. 9
      packages/nc-gui/components/template/Editor.vue
  23. 8
      packages/nc-gui/components/webhook/ChannelMultiSelect.vue
  24. 9
      packages/nc-gui/components/webhook/Editor.vue
  25. 19
      packages/nc-gui/pages/index/index/create-external.vue
  26. 2
      scripts/cypress/integration/common/1b_table_column_operations.js
  27. 2
      scripts/cypress/integration/common/3b_formula_column.js
  28. 6
      scripts/cypress/integration/common/3c_lookup_column.js
  29. 8
      scripts/cypress/integration/common/3d_rollup_column.js
  30. 6
      scripts/cypress/integration/common/3e_duration_column.js
  31. 4
      scripts/cypress/integration/common/3f_link_to_another_record.js
  32. 4
      scripts/cypress/integration/common/6g_base_share.js
  33. 4
      scripts/cypress/integration/common/8a_webhook.js
  34. 4
      scripts/cypress/support/page_objects/mainPage.js
  35. 2
      scripts/cypress/support/page_objects/navigation.js

8
packages/nc-gui/components/api-client/Headers.vue

@ -87,7 +87,13 @@ const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
</td> </td>
<td class="px-2 w-min-[400px]"> <td class="px-2 w-min-[400px]">
<a-form-item> <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"> <a-select-option v-for="(header, i) in headerList" :key="i" :value="header">
{{ header }} {{ header }}
</a-select-option> </a-select-option>

1
packages/nc-gui/components/cell/MultiSelect.vue

@ -134,6 +134,7 @@ watch(isOpen, (n, _o) => {
:show-search="false" :show-search="false"
:open="isOpen" :open="isOpen"
:disabled="readOnly" :disabled="readOnly"
dropdown-class-name="nc-dropdown-multi-select-cell"
@keydown="handleKeys" @keydown="handleKeys"
@click="isOpen = !isOpen" @click="isOpen = !isOpen"
> >

1
packages/nc-gui/components/cell/SingleSelect.vue

@ -73,6 +73,7 @@ watch(isOpen, (n, _o) => {
:open="isOpen" :open="isOpen"
:disabled="readOnly" :disabled="readOnly"
:show-arrow="!readOnly && (active || vModel === null)" :show-arrow="!readOnly && (active || vModel === null)"
dropdown-class-name="nc-dropdown-single-select-cell"
@select="isOpen = false" @select="isOpen = false"
@keydown="handleKeys" @keydown="handleKeys"
@click="isOpen = !isOpen" @click="isOpen = !isOpen"

2
packages/nc-gui/components/smartsheet-column/AdvancedOptions.vue

@ -82,7 +82,7 @@ onBeforeMount(() => {
</a-form-item> </a-form-item>
</div> </div>
<a-form-item :label="$t('labels.databaseType')" v-bind="validateInfos.dt"> <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"> <a-select-option v-for="type in dataTypes" :key="type" :value="type">
{{ type }} {{ type }}
</a-select-option> </a-select-option>

2
packages/nc-gui/components/smartsheet-column/CheckboxOptions.vue

@ -78,7 +78,7 @@ watch(
<a-row> <a-row>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="Icon"> <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"> <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
<div class="flex items-center"> <div class="flex items-center">
<component <component

2
packages/nc-gui/components/smartsheet-column/CurrencyOptions.vue

@ -83,6 +83,7 @@ vModel.value.meta = {
show-search show-search
:filter-option="filterOption" :filter-option="filterOption"
:disabled="isMoney && isPg" :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"> <a-select-option v-for="(currencyLocale, i) of currencyLocaleList" :key="i" :value="currencyLocale.value">
{{ currencyLocale.text }} {{ currencyLocale.text }}
@ -98,6 +99,7 @@ vModel.value.meta = {
show-search show-search
:filter-option="filterOption" :filter-option="filterOption"
:disabled="isMoney && isPg" :disabled="isMoney && isPg"
dropdown-class-name="nc-dropdown-currency-cell-code"
> >
<a-select-option v-for="(currencyCode, i) of currencyList" :key="i" :value="currencyCode"> <a-select-option v-for="(currencyCode, i) of currencyList" :key="i" :value="currencyCode">
{{ currencyCode }} {{ currencyCode }}

2
packages/nc-gui/components/smartsheet-column/DateOptions.vue

@ -17,7 +17,7 @@ if (!vModel.value.meta?.date_format) {
<template> <template>
<a-form-item label="Date Format"> <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"> <a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<div class="text-xs"> <div class="text-xs">

2
packages/nc-gui/components/smartsheet-column/DurationOptions.vue

@ -30,7 +30,7 @@ vModel.value.meta = {
</a-col> </a-col>
<a-col :span="24"> <a-col :span="24">
<a-form-item label="Duration Format"> <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"> <a-select-option v-for="(duration, i) of durationOptionList" :key="i" :value="duration.id">
{{ duration.title }} {{ duration.title }}
</a-select-option> </a-select-option>

8
packages/nc-gui/components/smartsheet-column/EditOrAdd.vue

@ -111,7 +111,13 @@ onMounted(() => {
v-if="!(isEdit && !!onlyNameUpdateOnEditColumns.find((col) => col === formState.uidt))" v-if="!(isEdit && !!onlyNameUpdateOnEditColumns.find((col) => col === formState.uidt))"
:label="$t('labels.columnType')" :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"> <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"> <div class="flex gap-1 items-center">
<component :is="opt.icon" class="text-grey" /> <component :is="opt.icon" class="text-grey" />

17
packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue

@ -66,6 +66,7 @@ const refTables = $computed(() => {
v-model:value="vModel.childId" v-model:value="vModel.childId"
show-search show-search
:filter-option="(value, option) => option.key.toLowerCase().includes(value.toLowerCase())" :filter-option="(value, option) => option.key.toLowerCase().includes(value.toLowerCase())"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onDataTypeChange" @change="onDataTypeChange"
> >
<a-select-option v-for="table in refTables" :key="table.title" :value="table.id"> <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 v-if="advancedOptions" class="flex flex-col p-6 gap-4 border-2 mt-2">
<div class="flex flex-row space-x-2"> <div class="flex flex-row space-x-2">
<a-form-item class="flex w-1/2" :label="$t('labels.onUpdate')"> <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"> <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
{{ option }} {{ option }}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item class="flex w-1/2" :label="$t('labels.onDelete')"> <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"> <a-select-option v-for="(option, index) in onUpdateDeleteOptions" :key="index" :value="option">
{{ option }} {{ option }}
</a-select-option> </a-select-option>

13
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="p-6 w-full flex flex-col border-2 mb-2 mt-4">
<div class="w-full flex flex-row space-x-2"> <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-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"> <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="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> <div class="font-semibold text-xs">{{ table.column.title }}</div>
@ -74,7 +78,12 @@ const columns = $computed(() => {
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_lookup_column_id"> <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"> <a-select-option v-for="(column, index) of columns" :key="index" :value="column.id">
{{ column.title }} {{ column.title }}
</a-select-option> </a-select-option>

2
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-col mt-2 gap-2">
<div class="flex flex-row space-x-2"> <div class="flex flex-row space-x-2">
<a-form-item class="flex w-1/2" label="Precision"> <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"> <a-select-option v-for="(precision, i) of precisions" :key="i" :value="precision.id">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<div class="text-xs"> <div class="text-xs">

4
packages/nc-gui/components/smartsheet-column/RatingOptions.vue

@ -72,7 +72,7 @@ watch(
<a-row :gutter="8"> <a-row :gutter="8">
<a-col :span="12"> <a-col :span="12">
<a-form-item label="Icon"> <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"> <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
<div class="flex items-center"> <div class="flex items-center">
<component <component
@ -95,7 +95,7 @@ watch(
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="Max"> <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"> <a-select-option v-for="(v, i) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="i" :value="v">
{{ v }} {{ v }}
</a-select-option> </a-select-option>

19
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="p-6 w-full flex flex-col border-2 mb-2 mt-4">
<div class="w-full flex flex-row space-x-2"> <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-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"> <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="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> <div class="font-semibold text-xs">{{ table.column.title }}</div>
@ -87,7 +91,12 @@ const columns = $computed(() => {
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_rollup_column_id"> <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"> <a-select-option v-for="(column, index) of columns" :key="index" :value="column.id">
{{ column.title }} {{ column.title }}
</a-select-option> </a-select-option>
@ -95,7 +104,11 @@ const columns = $computed(() => {
</a-form-item> </a-form-item>
</div> </div>
<a-form-item label="Aggregate function" v-bind="validateInfos.rollup_function"> <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"> <a-select-option v-for="(func, index) of aggrFunctionsList" :key="index" :value="func.value">
{{ func.text }} {{ func.text }}
</a-select-option> </a-select-option>

1
packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue

@ -57,6 +57,7 @@ const filterOption = (input: string, option: any) => {
show-search show-search
:placeholder="$t('placeholder.selectField')" :placeholder="$t('placeholder.selectField')"
:filter-option="filterOption" :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"> <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"> <div class="flex gap-2 items-center items-center h-full">

8
packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue

@ -135,7 +135,13 @@ const getIcon = (c: ColumnType) =>
@click.stop @click.stop
> >
<a-card v-if="activeView.type === ViewTypes.GALLERY" size="small" title="Cover image"> <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> </a-card>
<div class="p-1" @click.stop> <div class="p-1" @click.stop>
<a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" /> <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />

2
packages/nc-gui/components/smartsheet-toolbar/SearchData.vue

@ -41,7 +41,7 @@ function onPressEnter() {
size="small" size="small"
:dropdown-match-select-width="false" :dropdown-match-select-width="false"
:options="columns" :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" class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
/> />
</div> </div>

2
packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue

@ -71,7 +71,7 @@ watch(
v-model:value="sort.direction" v-model:value="sort.direction"
class="shrink grow-0 nc-sort-dir-select !text-xs" class="shrink grow-0 nc-sort-dir-select !text-xs"
:label="$t('labels.operation')" :label="$t('labels.operation')"
dropdown-class-name="sort-dir-dropdown" dropdown-class-name="sort-dir-dropdown nc-dropdown-sort-dir"
@click.stop @click.stop
@select="saveOrUpdate(sort, i)" @select="saveOrUpdate(sort, i)"
> >

7
packages/nc-gui/components/smartsheet/ApiSnippet.vue

@ -171,7 +171,12 @@ watch($$(activeLang), (newLang) => {
hide-minimap hide-minimap
/> />
<div v-if="activeLang.clients" class="flex flex-row w-full justify-end space-x-3 mt-4 uppercase"> <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"> <a-select-option v-for="(client, i) in activeLang?.clients" :key="i" class="!w-full uppercase" :value="client">
{{ client }} {{ client }}
</a-select-option> </a-select-option>

7
packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue

@ -210,7 +210,12 @@ onMounted(() => {
</template> </template>
</a-dropdown> </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> <template #suffixIcon>
<div class="flex flex-row"> <div class="flex flex-row">
<IcRoundKeyboardArrowDown class="text-black -mt-0.5 h-[1rem]" /> <IcRoundKeyboardArrowDown class="text-black -mt-0.5 h-[1rem]" />

2
packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue

@ -221,7 +221,7 @@ const clickInviteMore = () => {
<div class="flex flex-col w-1/4"> <div class="flex flex-col w-1/4">
<a-form-item name="role" :rules="[{ required: true, message: 'Role required' }]"> <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> <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"> <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 class="flex flex-row h-full justify-start items-center">
<div <div

9
packages/nc-gui/components/template/Editor.vue

@ -579,7 +579,13 @@ function handleEditableTnChange(idx: number) {
</template> </template>
<template v-else-if="column.key === 'destination_column'"> <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"> <a-select-option v-for="(col, i) of columns" :key="i" :value="col.title">
<div class="flex items-center"> <div class="flex items-center">
<component :is="getUIDTIcon(col.uidt)" /> <component :is="getUIDTIcon(col.uidt)" />
@ -687,6 +693,7 @@ function handleEditableTnChange(idx: number) {
show-search show-search
:options="uiTypeOptions" :options="uiTypeOptions"
:filter-option="filterOption" :filter-option="filterOption"
dropdown-class-name="nc-dropdown-template-uidt"
/> />
</a-form-item> </a-form-item>
</template> </template>

8
packages/nc-gui/components/webhook/ChannelMultiSelect.vue

@ -58,7 +58,13 @@ onMounted(() => {
</script> </script>
<template> <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"> <a-select-option v-for="channel of availableChannelWithIdxList" :key="channel.idx" :value="channel.idx">
{{ channel.channel }} {{ channel.channel }}
</a-select-option> </a-select-option>

9
packages/nc-gui/components/webhook/Editor.vue

@ -453,6 +453,7 @@ onMounted(async () => {
size="large" size="large"
:placeholder="$t('general.event')" :placeholder="$t('general.event')"
class="nc-text-field-hook-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(' ')"> <a-select-option v-for="(event, i) in eventList" :key="i" :value="event.value.join(' ')">
{{ event.text.join(' ') }} {{ event.text.join(' ') }}
@ -467,6 +468,7 @@ onMounted(async () => {
size="large" size="large"
class="nc-select-hook-notification-type" class="nc-select-hook-notification-type"
:placeholder="$t('general.notification')" :placeholder="$t('general.notification')"
dropdown-class-name="nc-dropdown-webhook-notification"
@change="onNotTypeChange(true)" @change="onNotTypeChange(true)"
> >
<a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type"> <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-row v-if="hook.notification.type === 'URL'" class="mb-5" type="flex" :gutter="[16, 0]">
<a-col :span="6"> <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-option v-for="(method, i) in methodList" :key="i" :value="method.title">{{ method.title }}</a-select-option>
</a-select> </a-select>
</a-col> </a-col>

19
packages/nc-gui/pages/index/index/create-external.vue

@ -359,7 +359,12 @@ onMounted(() => {
</a-form-item> </a-form-item>
<a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']"> <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" <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
>{{ client.text }} >{{ client.text }}
</a-select-option> </a-select-option>
@ -433,7 +438,7 @@ onMounted(() => {
</div> </div>
</template> </template>
<a-form-item label="SSL mode"> <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-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
@ -505,13 +510,19 @@ onMounted(() => {
<a-divider /> <a-divider />
<a-form-item :label="$t('labels.inflection.tableName')"> <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-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :label="$t('labels.inflection.columnName')"> <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-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>

2
scripts/cypress/integration/common/1b_table_column_operations.js

@ -70,7 +70,7 @@ export const genTest = (apiType, dbType) => {
// change column type and verify // change column type and verify
cy.get(".nc-column-type-input").last().click(); 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.get(".ant-btn-primary:visible").contains("Save").click();
cy.toastWait("Column updated"); cy.toastWait("Column updated");

2
scripts/cypress/integration/common/3b_formula_column.js

@ -58,7 +58,7 @@ export const genTest = (apiType, dbType) => {
.clear() .clear()
.type(columnName); .type(columnName);
cy.get(".nc-column-type-input").last().click().type("Formula"); 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('textarea.nc-formula-input').click().type(formula, { parseSpecialCharSequences: false });
cy.get(".ant-btn-primary").contains("Save").should('exist').click(); cy.get(".ant-btn-primary").contains("Save").should('exist').click();

6
scripts/cypress/integration/common/3c_lookup_column.js

@ -53,14 +53,14 @@ export const genTest = (apiType, dbType) => {
.clear() .clear()
.type(childCol); .type(childCol);
cy.get(".nc-column-type-input").last().click().type("Lookup"); 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 // Configure Child table & column names
fetchParentFromLabel("Child table"); 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"); 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.get(".ant-btn-primary").contains("Save").should('exist').click();
cy.toastWait(`Column created`); cy.toastWait(`Column created`);

8
scripts/cypress/integration/common/3d_rollup_column.js

@ -59,17 +59,17 @@ export const genTest = (apiType, dbType) => {
.clear() .clear()
.type(columnName); .type(columnName);
cy.get(".nc-column-type-input").last().click().type("RollUp"); 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 // Configure Child table & column names
fetchParentFromLabel("Child table"); 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"); 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"); 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.get(".ant-btn-primary").contains("Save").should('exist').click();
cy.toastWait(`Column created`); cy.toastWait(`Column created`);

6
scripts/cypress/integration/common/3e_duration_column.js

@ -49,11 +49,11 @@ export const genTest = (apiType, dbType) => {
.clear() .clear()
.type(columnName); .type(columnName);
cy.get(".nc-column-type-input").last().click().type("Duration"); 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 // Configure Duration format
fetchParentFromLabel("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.get(".ant-btn-primary").contains("Save").should('exist').click();
cy.toastWait(`Column created`); cy.toastWait(`Column created`);
@ -85,7 +85,7 @@ export const genTest = (apiType, dbType) => {
.type(newName); .type(newName);
// Configure Duration format // Configure Duration format
fetchParentFromLabel("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(); cy.get(".ant-btn-primary:visible").contains("Save").click();

4
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() cy.get(".nc-column-type-input").last()
.click() .click()
.type("Link"); .type("Link");
cy.getActiveSelection() cy.getActiveSelection('.nc-dropdown-column-type')
.find('.ant-select-item-option') .find('.ant-select-item-option')
.contains("LinkToAnotherRecord").click(); .contains("LinkToAnotherRecord").click();
@ -56,7 +56,7 @@ export const genTest = (apiType, dbType) => {
.last() .last()
.click() .click()
.type(foreignTable); .type(foreignTable);
cy.getActiveSelection() cy.getActiveSelection('.nc-dropdown-ltar-child-table')
.find('.ant-select-item-option') .find('.ant-select-item-option')
.contains(foreignTable) .contains(foreignTable)
.click(); .click();

4
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.getActiveModal().find(".nc-shared-base-role").click();
cy.getActiveSelection() cy.getActiveSelection('.nc-dropdown-share-base-role')
.find('.ant-select-item') .find('.ant-select-item')
.eq(1) .eq(1)
.click(); .click();
@ -134,7 +134,7 @@ style="background: transparent; "></iframe>
cy.getActiveModal().find(".nc-shared-base-role").click(); cy.getActiveModal().find(".nc-shared-base-role").click();
cy.getActiveSelection() cy.getActiveSelection('.nc-dropdown-share-base-role')
.find('.ant-select-item') .find('.ant-select-item')
.eq(0) .eq(0)
.click(); .click();

4
scripts/cypress/integration/common/8a_webhook.js

@ -36,7 +36,7 @@ function createWebhook(hook, test) {
.type('{downarrow}') .type('{downarrow}')
.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") cy.get("input.nc-input-hook-header-value")
.should("exist") .should("exist")
@ -78,7 +78,7 @@ function configureWebhook(hook, test) {
if (hook?.event) { if (hook?.event) {
cy.get(".nc-text-field-hook-event").should("exist").click(); cy.get(".nc-text-field-hook-event").should("exist").click();
cy.getActiveSelection() cy.getActiveSelection('.nc-dropdown-webhook-event')
.find(`.ant-select-item`) .find(`.ant-select-item`)
.contains(hook.event) .contains(hook.event)
.should("exist") .should("exist")

4
scripts/cypress/support/page_objects/mainPage.js

@ -119,7 +119,7 @@ export class _mainPage {
// opt-in requested role & submit // opt-in requested role & submit
// cy.getActiveSelection().contains(roleType).click({force: true}); // 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.getActiveModal(".nc-modal-invite-user-and-share-base").find("button.ant-btn-primary").click();
cy.toastWait("Successfully updated the user details"); cy.toastWait("Successfully updated the user details");
@ -204,7 +204,7 @@ export class _mainPage {
// change column type and verify // change column type and verify
cy.get(".nc-column-type-input").last().click(); 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.get(".ant-btn-primary:visible").contains("Save").click();
cy.toastWait(`Column created`); cy.toastWait(`Column created`);

2
scripts/cypress/support/page_objects/navigation.js

@ -187,7 +187,7 @@ export class _projectsPage {
if (cred.databaseType === 1) { if (cred.databaseType === 1) {
cy.get('.nc-extdb-db-type').should('exist').click(); 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 !== "") { if (cred.databaseName !== "") {

Loading…
Cancel
Save