chore(cypress): improvements

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"
   >

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"

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"
   >

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"
   >

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

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>

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}` }}

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 -->

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>

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>
 
@@ -298,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"
         />
 

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">
+  <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>
 

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"
   >

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>

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') }}

packages/nc-gui/components/general/HelpAndSupport.vue

@@ -27,7 +27,7 @@ const openSwaggerLink = () => {
   <a-drawer
     v-bind="$attrs"
     v-model:visible="showDrawer"
-    class="h-full relative"
+    class="h-full relative nc-drawer-help-and-support"
     placement="right"
     size="small"
     :closable="false"

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>

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>

packages/nc-gui/components/general/language/index.vue

@@ -1,5 +1,9 @@
 <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>

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">

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>

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

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>

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-edit-column"
+    >
       <div />
       <template #overlay>
         <SmartsheetColumnEditOrAddProvider

packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue

@@ -156,6 +156,7 @@ 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)"
               >
@@ -203,6 +204,7 @@ defineExpose({
               class="h-full"
               hide-details
               :disabled="filter.readOnly"
+              dropdown-class-name="nc-dropdown-filter-logical-op"
               @click.stop
               @change="filterUpdateCondition(filter, i)"
             >
@@ -230,6 +232,7 @@ defineExpose({
               variant="solo"
               :disabled="filter.readOnly"
               hide-details
+              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="">

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">

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-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" />

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-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">

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>

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>

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">

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" />