chore(cypress): improve date picker selection by filtering by classname

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/cell/DatePicker.vue

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

scripts/cypress/support/commands.js

@@ -283,7 +283,7 @@ Cypress.Commands.add('printLocalStorage', () => {
 });
 
 Cypress.Commands.add('getActiveModal', (wrapperSelector) => {
-  if(wrapperSelector){
+  if (wrapperSelector) {
     return cy.get(`${wrapperSelector} .ant-modal-content:visible`).last();
   }
   return cy.get('.ant-modal-content:visible').last();
@@ -301,20 +301,23 @@ Cypress.Commands.add('getActivePopUp', () => {
 });
 
 Cypress.Commands.add('getActiveSelection', (selector) => {
-  if(selector) {
+  if (selector) {
     return cy.get(`${selector}.ant-select-dropdown:visible`).last();
   }
   return cy.get('.ant-select-dropdown:visible').last();
 });
 
 Cypress.Commands.add('getActiveDrawer', (selector) => {
-  if(selector) {
+  if (selector) {
     return cy.get(`${selector} .ant-drawer-content:visible`).last();
   }
   return cy.get('.ant-drawer-content:visible').last();
 });
 
-Cypress.Commands.add('getActivePicker', () => {
+Cypress.Commands.add('getActivePicker', (dropdownSelector) => {
+  if (dropdownSelector) {
+    return cy.get(`${dropdownSelector}.ant-drawer-content:visible`).last();
+  }
   return cy.get('.ant-picker-dropdown :visible').last();
 });