test: active modal - class name mapping

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>

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/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/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-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/pages/[projectType]/form/[viewId]/index.vue

@@ -136,6 +136,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
         centered
         :footer="null"
         :mask-closable="false"
+        wrap-class-name="nc-modal-shared-form-password-dlg"
         @close="passwordDlg = false"
       >
         <div class="w-full flex flex-col">

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

@@ -556,6 +556,7 @@ onMounted(() => {
       width="600px"
       :ok-text="$t('general.ok')"
       :cancel-text="$t('general.cancel')"
+      wrap-class-name="nc-modal-connection-url"
       @ok="handleImportURL"
     >
       <a-input v-model:value="importURL" />

scripts/cypress/integration/common/1d_pg_table_view_drag_drop_reorder.js

@@ -87,7 +87,7 @@ export const genTest = (apiType, dbType) => {
             cy.snipActiveModal(`Modal_createView_${viewType}`);
 
             // Pop up window, click Submit (accepting default name for view)
-            cy.getActiveModal().find("button:contains(Submit)").click();
+            cy.getActiveModal(".nc-modal-view-create").find("button:contains(Submit)").click();
 
             cy.toastWait("View created successfully");
         }

scripts/cypress/integration/common/1d_table_view_drag_drop_reorder.js

@@ -90,7 +90,7 @@ export const genTest = (apiType, dbType) => {
             cy.snipActiveModal(`Modal_createView_${viewType}`);
 
             // Pop up window, click Submit (accepting default name for view)
-            cy.getActiveModal().find("button:contains(Submit)").click();
+            cy.getActiveModal(".nc-modal-view-create").find("button:contains(Submit)").click();
 
             cy.toastWait("View created successfully");
         }

scripts/cypress/integration/common/2a_table_with_belongs_to_colulmn.js

@@ -59,26 +59,26 @@ export const genTest = (apiType, dbType) => {
         });
 
         it("Expand Link record, validate", () => {
-            cy.getActiveModal()
+            cy.getActiveModal(".nc-modal-link-record")
                 .find("button:contains(Link to 'City')")
                 .click()
                 .then(() => {
 
                     // Link record form validation
-                    cy.getActiveModal().contains("Link record").should("exist");
+                    cy.getActiveModal(".nc-modal-link-record").contains("Link record").should("exist");
-                    cy.getActiveModal()
+                    cy.getActiveModal(".nc-modal-link-record")
                         .find(".nc-reload")
                         .should("exist");
-                    cy.getActiveModal()
+                    cy.getActiveModal(".nc-modal-link-record")
                         .find('button:contains("Add new record")')
                         .should("exist");
-                    cy.getActiveModal()
+                    cy.getActiveModal(".nc-modal-link-record")
                         .find(".ant-card")
                         .eq(0)
                         .contains("A Corua (La Corua)")
                         .should("exist");
 
-                    cy.getActiveModal()
+                    cy.getActiveModal(".nc-modal-link-record")
                         .find("button.ant-modal-close")
                         .click();
                         // .then(() => {

scripts/cypress/integration/common/2b_table_with_m2m_column.js

@@ -70,19 +70,19 @@ export const genTest = (apiType, dbType) => {
                 .click()
                 .then(() => {
                     // Link record form validation
-                    cy.getActiveModal().contains("Link record").should("exist");
+                    cy.getActiveModal(".nc-modal-link-record").contains("Link record").should("exist");
-                    cy.getActiveModal()
+                    cy.getActiveModal(".nc-modal-link-record")
                         .find(".nc-reload")
                         .should("exist");
-                    cy.getActiveModal()
+                    cy.getActiveModal(".nc-modal-link-record")
                         .find('button:contains("Add new record")')
                         .should("exist");
-                    cy.getActiveModal()
+                    cy.getActiveModal(".nc-modal-link-record")
                         .find(".ant-card")
                         .eq(0)
                         .contains("ACE GOLDFINGER")
                         .should("exist");
-                    cy.getActiveModal().find("button.ant-modal-close").click();
+                    cy.getActiveModal(".nc-modal-link-record").find("button.ant-modal-close").click();
                 });
         });
 

scripts/cypress/integration/common/4a_table_view_grid_gallery_form.js

@@ -45,7 +45,7 @@ export const genTest = (apiType, dbType) => {
                 cy.get(`.nc-create-${viewType}-view`).click();
 
                 // Pop up window, click Submit (accepting default name for view)
-                cy.getActiveModal().find(".ant-btn-primary").click();
+                cy.getActiveModal(".nc-modal-view-create").find(".ant-btn-primary").click();
                 cy.toastWait("View created successfully");
 
                 // kludge: right navbar closes abruptly. force it open again
@@ -83,7 +83,7 @@ export const genTest = (apiType, dbType) => {
                 // click on delete icon (becomes visible on hovering mouse)
                 cy.get(".nc-view-delete-icon").click({ force: true });
                 cy.wait(300)
-                cy.getActiveModal().find('.ant-btn-dangerous').click();
+                cy.getActiveModal(".nc-modal-view-delete").find('.ant-btn-dangerous').click();
                 cy.toastWait("View deleted successfully");
 
                 // kludge: right navbar closes abruptly. force it open again

scripts/cypress/integration/common/4b_table_view_share.js

@@ -7,21 +7,21 @@ let linkText = "";
 
 const generateLinkWithPwd = () => {
     mainPage.shareView().click();
-    cy.getActiveModal().find(".ant-modal-title").contains("This view is shared via a private link").should("be.visible");
+    cy.getActiveModal(".nc-modal-share-view").find(".ant-modal-title").contains("This view is shared via a private link").should("be.visible");
 
     // enable checkbox & feed pwd, save
-    cy.getActiveModal().find('.ant-collapse').should('exist').click()
+    cy.getActiveModal(".nc-modal-share-view").find('.ant-collapse').should('exist').click();
-      cy.getActiveModal().find('.ant-checkbox-input').should('exist').first().then(($el) => {
+    cy.getActiveModal(".nc-modal-share-view").find('.ant-checkbox-input').should('exist').first().then(($el) => {
       if (!$el.prop("checked")) {
           cy.wrap($el).click({ force: true });
-            cy.getActiveModal().find('input[type="password"]').clear().type("1");
+          cy.getActiveModal(".nc-modal-share-view").find('input[type="password"]').clear().type("1");
-            cy.getActiveModal().find('button:contains("Save password")').click();
+          cy.getActiveModal(".nc-modal-share-view").find('button:contains("Save password")').click();
           cy.toastWait("Successfully updated");
       }
     });
     
     // copy link text, visit URL
-    cy.getActiveModal()
+    cy.getActiveModal(".nc-modal-share-view")
         .find(".nc-share-link-box")
         .then(($obj) => {
             linkText = $obj.text().trim();
@@ -62,25 +62,25 @@ export const genTest = (apiType, dbType) => {
                 baseUrl: null,
             });
 
-            cy.getActiveModal().should("exist");
+            cy.getActiveModal(".nc-modal-shared-view-password-dlg").should("exist");
 
             // feed password
-            cy.getActiveModal().find('input[type="password"]').clear().type("a");
+            cy.getActiveModal(".nc-modal-shared-view-password-dlg").find('input[type="password"]').clear().type("a");
-            cy.getActiveModal().find('button:contains("Unlock")').click();
+            cy.getActiveModal(".nc-modal-shared-view-password-dlg").find('button:contains("Unlock")').click();
 
             // if pwd is incorrect, active modal requesting to feed in password again will persist
-            cy.getActiveModal().find('button:contains("Unlock")').should('exist');
+            cy.getActiveModal(".nc-modal-shared-view-password-dlg").find('button:contains("Unlock")').should('exist');
         });
 
         // fallover test- use previously opened view & continue verification instead of opening again
         it("Share view with correct password", () => {
 
             // feed password
-            cy.getActiveModal()
+            cy.getActiveModal(".nc-modal-shared-view-password-dlg")
                 .find('input[type="password"]')
                 .clear()
                 .type("1");
-            cy.getActiveModal().find('button:contains("Unlock")').click();
+            cy.getActiveModal(".nc-modal-shared-view-password-dlg").find('button:contains("Unlock")').click();
 
             // if pwd is incorrect, active modal requesting to feed in password again will persist
             // cy.getActiveModal().find('button:contains("Unlock")').should('not.exist');

scripts/cypress/integration/common/4c_form_view_detailed.js

@@ -100,7 +100,7 @@ export const genTest = (apiType, dbType) => {
                 cy.get(`.nc-create-${viewType}-view`).click();
 
                 // Pop up window, click Submit (accepting default name for view)
-                cy.getActiveModal().find("button:contains(Submit)").click();
+                cy.getActiveModal(".nc-modal-view-create").find("button:contains(Submit)").click();
 
                 cy.toastWait("View created successfully");
 
@@ -420,7 +420,7 @@ export const genTest = (apiType, dbType) => {
                 // click on delete icon (becomes visible on hovering mouse)
                 cy.get(".nc-view-delete-icon").click({ force: true });
                 cy.wait(1000)
-                cy.getActiveModal().find('.ant-btn-dangerous').click();
+                cy.getActiveModal(".nc-modal-view-delete").find('.ant-btn-dangerous').click();
                 cy.toastWait("View deleted successfully");
 
                 // confirm if the number of veiw entries is reduced by 1

scripts/cypress/integration/common/4e_form_view_share.js

@@ -53,7 +53,7 @@ export const genTest = (apiType, dbType) => {
               cy.get(`.nc-create-${viewType}-view`).click();
 
               // Pop up window, click Submit (accepting default name for view)
-              cy.getActiveModal().find("button:contains(Submit)").click();
+              cy.getActiveModal(".nc-modal-view-create").find("button:contains(Submit)").click();
 
               cy.toastWait("View created successfully");
 
@@ -108,7 +108,7 @@ export const genTest = (apiType, dbType) => {
                 mainPage.shareView().click();
 
                 // copy link text, visit URL
-                cy.getActiveModal()
+                cy.getActiveModal(".nc-modal-share-view")
                     .should('exist')
                     .find(".share-link-box")
                     .contains("/nc/form/", { timeout: 10000 })
@@ -210,7 +210,7 @@ export const genTest = (apiType, dbType) => {
                 // click on delete icon (becomes visible on hovering mouse)
                 cy.get(".nc-view-delete-icon").click({ force: true });
                 cy.wait(1000);
-                cy.getActiveModal().find('.ant-btn-dangerous').should('exist').click();
+                cy.getActiveModal(".nc-modal-view-delete").find('.ant-btn-dangerous').should('exist').click();
                 cy.toastWait("View deleted successfully");
 
                 // confirm if the number of veiw entries is reduced by 1

scripts/cypress/integration/common/4f_grid_view_share.js

@@ -21,13 +21,13 @@ export const genTest = (apiType, dbType) => {
         cy.wait(1000);
 
         // wait, as URL initially will be /undefined
-        cy.getActiveModal()
+        cy.getActiveModal(".nc-modal-share-view")
             .find(".share-link-box")
             .contains("/nc/view/", { timeout: 10000 })
             .should("exist");
 
         // copy link text, visit URL
-        cy.getActiveModal()
+        cy.getActiveModal(".nc-modal-share-view")
             .find(".share-link-box")
             .contains("/nc/view/", { timeout: 10000 })
             .then(($obj) => {
@@ -82,7 +82,7 @@ export const genTest = (apiType, dbType) => {
 
                 // create a normal public view
                 cy.get(`.nc-create-${viewType}-view`).click();
-                cy.getActiveModal().find("button:contains(Submit)").click();
+                cy.getActiveModal(".nc-modal-view-create").find("button:contains(Submit)").click();
                 cy.toastWait("View created successfully");
 
                 // store base URL- to re-visit and delete form view later
@@ -373,7 +373,7 @@ export const genTest = (apiType, dbType) => {
                 cy.get(".nc-view-item").its("length").should("eq", 2);
 
                 cy.get(".nc-view-delete-icon").eq(0).click({ force: true });
-                cy.getActiveModal().find(".ant-btn-dangerous").click();
+                cy.getActiveModal(".nc-modal-view-delete").find(".ant-btn-dangerous").click();
                 cy.toastWait("View deleted successfully");
 
                 // confirm if the number of veiw entries is reduced by 1

scripts/cypress/integration/common/4f_pg_grid_view_share.js

@@ -25,13 +25,13 @@ export const genTest = (apiType, dbType) => {
         cy.wait(5000);
         
         // wait, as URL initially will be /undefined
-        cy.getActiveModal()
+        cy.getActiveModal(".nc-modal-share-view")
             .find(".share-link-box")
             .contains("/nc/view/", { timeout: 10000 })
             .should("exist");
 
         // copy link text, visit URL
-        cy.getActiveModal()
+        cy.getActiveModal(".nc-modal-share-view")
             .find(".share-link-box")
             .contains("/nc/view/", { timeout: 10000 })
             .then(($obj) => {
@@ -75,7 +75,7 @@ export const genTest = (apiType, dbType) => {
             it(`Create ${viewType.toUpperCase()} view`, () => {
                 // create a normal public view
                 cy.get(`.nc-create-${viewType}-view`).click();
-                cy.getActiveModal().find("button:contains(Submit)").click();
+                cy.getActiveModal(".nc-modal-view-create").find("button:contains(Submit)").click();
                 cy.toastWait("View created successfully");
 
                 // store base URL- to re-visit and delete form view later

scripts/cypress/integration/common/6f_attachments.js

@@ -68,7 +68,7 @@ export const genTest = (apiType, dbType) => {
 
             // create form-view
             cy.get(`.nc-create-form-view`).click();
-            cy.getActiveModal().find("button:contains(Submit)").click();
+            cy.getActiveModal(".nc-modal-view-create").find("button:contains(Submit)").click();
 
             cy.toastWait("View created successfully");
 
@@ -77,7 +77,7 @@ export const genTest = (apiType, dbType) => {
             cy.wait(5000);
 
             // copy link text, visit URL
-            cy.getActiveModal()
+            cy.getActiveModal(".nc-modal-share-view")
                 .find(".share-link-box")
                 .contains("/nc/form/", { timeout: 10000 })
                 .should('exist')

scripts/cypress/integration/common/6g_base_share.js

@@ -90,7 +90,7 @@ export const genTest = (apiType, dbType) => {
               .click();
 
             // Copy URL
-            cy.getActiveModal()
+            cy.getActiveModal(".nc-modal-invite-user-and-shared-base")
                 .find(".nc-url")
                 .then(($obj) => {
                     cy.log($obj[0]);

scripts/cypress/integration/common/7b_import_from_airtable.js

@@ -32,9 +32,9 @@ export const genTest = (apiType, dbType) => {
       cy.get('.nc-import-menu').should('exist').click()
       cy.getActiveMenu(".nc-dropdown-import-menu").find('.ant-dropdown-menu-item').contains('Airtable').click()
 
-      cy.getActiveModal().find(".nc-input-api-key").should('exist').clear().type(apiKey)
+      cy.getActiveModal(".nc-modal-airtable-import").find(".nc-input-api-key").should('exist').clear().type(apiKey)
-      cy.getActiveModal().find(".nc-input-shared-base").should('exist').clear().type(sharedBase)
+      cy.getActiveModal(".nc-modal-airtable-import").find(".nc-input-shared-base").should('exist').clear().type(sharedBase)
-      cy.getActiveModal().find(".nc-btn-airtable-import").should('exist').click()
+      cy.getActiveModal(".nc-modal-airtable-import").find(".nc-btn-airtable-import").should('exist').click()
 
       // it will take a while for import to finish
       // cy.getActiveModal().find(".nc-btn-go-dashboard", {timeout: 180000}).should('exist').click()

scripts/cypress/support/commands.js

@@ -363,10 +363,10 @@ Cypress.Commands.add('renameTable', (oldName, newName) => {
     .click({ force: true });
 
   // feed new name
-  cy.getActiveModal().find('input').clear().type(newName);
+  cy.getActiveModal(".nc-modal-table-rename").find('input').clear().type(newName);
 
   // submit
-  cy.getActiveModal().find('button').contains('Submit').click();
+  cy.getActiveModal(".nc-modal-table-rename").find('button').contains('Submit').click();
 
   cy.toastWait('Table renamed successfully');
 

scripts/cypress/support/page_objects/mainPage.js

@@ -120,12 +120,12 @@ export class _mainPage {
         // opt-in requested role & submit
         // cy.getActiveSelection().contains(roleType).click({force: true});
         cy.getActiveSelection().find('.nc-role-option').eq(roleIndex).should('exist').click()
-        cy.getActiveModal().find("button.ant-btn-primary").click();
+        cy.getActiveModal(".invite-user-and-shared-base").find("button.ant-btn-primary").click();
 
         cy.toastWait("Successfully updated the user details");
 
         // get URL, invoke
-        cy.getActiveModal()
+        cy.getActiveModal(".nc-modal-invite-user-and-shared-base")
             .find(".ant-alert-message")
             .then(($obj) => {
                 linkText = $obj.text().trim();