Merge branch 'feat/kanban-view' of https://github.com/nocodb/nocodb into feat/kanban-view

packages/nc-gui/components/smartsheet-column/SelectOptions.vue

@@ -95,7 +95,7 @@ watch(inputs, () => {
   <div class="w-full">
     <Draggable :list="options" item-key="id" handle=".nc-child-draggable-icon">
       <template #item="{ element, index }">
-        <div class="flex py-1 items-center">
+        <div class="flex py-1 items-center nc-select-option">
           <MdiDragIcon small class="nc-child-draggable-icon handle" />
           <a-dropdown
             v-model:visible="colorMenus[index]"

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -360,7 +360,7 @@ onMounted(() => {
     :meta="meta"
     @cancel="removeRowFromUncategorizedStack"
   />
-  <a-modal v-model:visible="deleteStackVModel" class="!top-[35%]" wrap-class-name="nc-modal-view-create">
+  <a-modal v-model:visible="deleteStackVModel" class="!top-[35%]" wrap-class-name="nc-modal-kanban-delete-stack">
     <template #title>
       <!-- TODO: i18n -->
       Delete stack?

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

@@ -47,7 +47,10 @@ function verifyKanbanStackFooterCount(count) {
   cy.get(".nc-kanban-stack").each(($el, index) => {
     cy.wrap($el)
       .find(".nc-kanban-data-count")
-      .should("contain", `${count[index]} records`);
+      .should(
+        "contain",
+        `${count[index]} record${count[index] > 1 ? "s" : ""}`
+      );
   });
 }
 
@@ -99,14 +102,32 @@ export const genTest = (apiType, dbType) => {
 
   describe(`${apiType.toUpperCase()} api - Kanban`, () => {
     before(() => {
-      if (localDebug) {
-        // for standalone tests
-        cy.restoreLocalStorage();
-        loginPage.loginAndOpenProject(apiType, dbType);
-
-        cy.openTableTab("Film", 25);
-        cy.openTableView("kanban", "Kanban-1");
-      }
+      // if (localDebug) {
+      //   // for standalone tests
+      //   cy.restoreLocalStorage();
+      //   loginPage.loginAndOpenProject(apiType, dbType);
+      //
+      //   cy.openTableTab("Film", 25);
+      //   cy.openTableView("kanban", "Kanban-1");
+      //
+      //   cy.saveLocalStorageToFile("kanban");
+      // }
+      // cy.restoreLocalStorageFromFile("kanban");
+      // cy.wait(1000);
+      // cy.visit(
+      //   "http://localhost:3000/#/nc/p_42i93khqhge32z/table/Film/Kanban-1",
+      //   { baseUrl: null }
+      // );
+      // verifyKanbanStackCount(7);
+      // verifyKanbanStackOrder([
+      //   "uncategorized",
+      //   "G",
+      //   "PG",
+      //   "PG-13",
+      //   "R",
+      //   "NC-17",
+      //   "Test",
+      // ]);
     });
 
     beforeEach(() => {
@@ -307,6 +328,155 @@ export const genTest = (apiType, dbType) => {
       cy.viewDelete(1);
     });
 
+    it("Add stack", () => {
+      cy.get(".nc-kanban-add-edit-stack-menu-btn").should("exist").click();
+      cy.getActiveMenu(".nc-dropdown-kanban-add-edit-stack-menu").should(
+        "be.visible"
+      );
+      cy.getActiveMenu(".nc-dropdown-kanban-add-edit-stack-menu")
+        .find(".ant-btn-dashed")
+        .click();
+      cy.getActiveMenu(".nc-dropdown-kanban-add-edit-stack-menu")
+        .find(".nc-select-option")
+        .last()
+        .click()
+        .type("Test{enter}");
+      verifyKanbanStackCount(7);
+      verifyKanbanStackOrder([
+        "uncategorized",
+        "G",
+        "PG",
+        "PG-13",
+        "R",
+        "NC-17",
+        "Test",
+      ]);
+    });
+
+    it("Collapse stack", () => {
+      cy.get(".nc-kanban-stack-head").last().scrollIntoView();
+      cy.get(".nc-kanban-stack-head").last().click();
+      cy.getActiveMenu(".nc-dropdown-kanban-stack-context-menu").should(
+        "be.visible"
+      );
+
+      // collapse stack
+      cy.getActiveMenu(".nc-dropdown-kanban-stack-context-menu")
+        .find(".ant-dropdown-menu-item")
+        .contains("Collapse Stack")
+        .click();
+      cy.get(".nc-kanban-collapsed-stack")
+        .should("exist")
+        .should("have.length", 1);
+
+      // expand back
+      cy.get(".nc-kanban-collapsed-stack").click();
+      cy.get(".nc-kanban-collapsed-stack")
+        .should("not.exist")
+        .should("have.length", 0);
+    });
+
+    it("Add record to stack", () => {
+      mainPage.hideAllColumns();
+      mainPage.toggleShowSystemFields();
+      mainPage.unhideField("LanguageId", "kanban");
+      mainPage.unhideField("Title", "kanban");
+
+      cy.get(".nc-kanban-stack-head").last().scrollIntoView();
+      cy.get(".nc-kanban-stack-head").last().click();
+      cy.getActiveMenu(".nc-dropdown-kanban-stack-context-menu").should(
+        "be.visible"
+      );
+
+      // add record
+      cy.getActiveMenu(".nc-dropdown-kanban-stack-context-menu")
+        .find(".ant-dropdown-menu-item")
+        .contains("Add new record")
+        .click();
+
+      cy.getActiveDrawer(".nc-drawer-expanded-form").should("be.visible");
+      cy.get(".nc-expand-col-Title")
+        .find(".nc-cell > input")
+        .should("exist")
+        .first()
+        .clear()
+        .type("New record");
+      cy.get(".nc-expand-col-LanguageId")
+        .find(".nc-cell > input")
+        .should("exist")
+        .first()
+        .clear()
+        .type("1");
+
+      cy.getActiveDrawer(".nc-drawer-expanded-form")
+        .find("button")
+        .contains("Save row")
+        .click();
+      cy.toastWait("updated successfully");
+      cy.get("body").type("{esc}");
+
+      // verify if the new record is in the stack
+      verifyKanbanStackCount(7);
+      verifyKanbanStackOrder([
+        "uncategorized",
+        "G",
+        "PG",
+        "PG-13",
+        "R",
+        "NC-17",
+        "Test",
+      ]);
+      verifyKanbanStackFooterCount([
+        "0",
+        "178",
+        "194",
+        "223",
+        "195",
+        "210",
+        "1",
+      ]);
+
+      mainPage.toggleShowSystemFields();
+    });
+
+    it("Expand record", () => {
+      // mainPage.toggleShowSystemFields();
+      // mainPage.showAllColumns();
+
+      cy.get(".nc-kanban-stack").eq(1).find(".nc-kanban-item").eq(0).click();
+      cy.get(".nc-expand-col-Title")
+        .find(".nc-cell > input")
+        .then(($el) => {
+          expect($el[0].value).to.have.string("ACE GOLDFINGER");
+        });
+      cy.get("body").type("{esc}");
+    });
+
+    it("Stack context menu- delete stack", () => {
+      cy.get(".nc-kanban-stack-head").last().scrollIntoView();
+      cy.get(".nc-kanban-stack-head").last().click();
+      cy.getActiveMenu(".nc-dropdown-kanban-stack-context-menu").should(
+        "be.visible"
+      );
+      cy.getActiveMenu(".nc-dropdown-kanban-stack-context-menu")
+        .find(".ant-dropdown-menu-item")
+        .contains("Delete Stack")
+        .click();
+      cy.getActiveModal(".nc-modal-kanban-delete-stack").should("be.visible");
+      cy.getActiveModal(".nc-modal-kanban-delete-stack")
+        .find(".ant-btn-primary")
+        .click();
+      verifyKanbanStackCount(6);
+      verifyKanbanStackOrder([
+        "uncategorized",
+        "G",
+        "PG",
+        "PG-13",
+        "R",
+        "NC-17",
+      ]);
+    });
+
     it("Delete Kanban view", () => {
       cy.viewDelete(0);
       cy.closeTableTab("Film");

scripts/cypress/support/commands.js

@@ -24,141 +24,125 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
-import 'cypress-file-upload';
-import { isXcdb, isPostgres } from './page_objects/projectConstants';
+import "cypress-file-upload";
+import { isXcdb, isPostgres } from "./page_objects/projectConstants";
 
-require('@4tw/cypress-drag-drop');
+require("@4tw/cypress-drag-drop");
 
 // for waiting until page load
-Cypress.Commands.add('waitForSpinners', () => {
-  cy.visit('http://localhost:3000/signup', {
+Cypress.Commands.add("waitForSpinners", () => {
+  cy.visit("http://localhost:3000/signup", {
     retryOnNetworkFailure: true,
     timeout: 1200000,
     headers: {
-      'Accept-Encoding': 'gzip, deflate',
+      "Accept-Encoding": "gzip, deflate",
     },
   });
-  cy.get('.nc-form-signup').should('exist');
+  cy.get(".nc-form-signup").should("exist");
 });
 
-Cypress.Commands.add('signinOrSignup', (_args) => {
+Cypress.Commands.add("signinOrSignup", (_args) => {
   const args = Object.assign(
-    { username: 'user@nocodb.com', password: 'Password123.' },
+    { username: "user@nocodb.com", password: "Password123." },
     _args
   );
 
   cy.wait(1000);
 
   // signin/signup
-  cy.get('body').then(($body) => {
+  cy.get("body").then(($body) => {
     // cy.wait(1000)
     cy.url().then((url) => {
-      if (!url.includes('/projects')) {
+      if (!url.includes("/projects")) {
         // handle initial load
-        if ($body.find('.welcome-page').length > 0) {
+        if ($body.find(".welcome-page").length > 0) {
           cy.wait(8000);
-          cy.get('body').trigger('mousemove');
-          cy.snip('LetsBegin');
-          cy.contains('Let\'s Begin').click();
-          cy.get('input[type="text"]', { timeout: 12000 }).type(
-            args.username
-          );
+          cy.get("body").trigger("mousemove");
+          cy.snip("LetsBegin");
+          cy.contains("Let's Begin").click();
+          cy.get('input[type="text"]', { timeout: 12000 }).type(args.username);
           cy.get('input[type="password"]').type(args.password);
-          cy.snip('SignUp');
+          cy.snip("SignUp");
           cy.get('button:contains("SIGN UP")').click();
 
           // handle signin
         } else {
-          cy.get('input[type="text"]', { timeout: 12000 }).type(
-            args.username
-          );
+          cy.get('input[type="text"]', { timeout: 12000 }).type(args.username);
           cy.get('input[type="password"]').type(args.password);
-          cy.snip('SignIn');
+          cy.snip("SignIn");
           cy.get('button:contains("SIGN IN")').click();
         }
-      } else if (url.includes('/signin')) {
-        cy.get('input[type="text"]', { timeout: 12000 }).type(
-          args.username
-        );
+      } else if (url.includes("/signin")) {
+        cy.get('input[type="text"]', { timeout: 12000 }).type(args.username);
         cy.get('input[type="password"]').type(args.password);
-        cy.snip('SignIn');
+        cy.snip("SignIn");
         cy.get('button:contains("SIGN IN")').click();
       }
     });
   });
 
   // indicates page-load complete
-  cy.get('.nc-noco-brand-icon', { timeout: 12000 }).should('exist');
+  cy.get(".nc-noco-brand-icon", { timeout: 12000 }).should("exist");
 });
 
 // for opening/creating a rest project
-Cypress.Commands.add('openOrCreateRestProject', (_args) => {
+Cypress.Commands.add("openOrCreateRestProject", (_args) => {
   const args = Object.assign({ new: false }, _args);
 
   // signin/signup
   cy.signinOrSignup();
-  cy.get('.nc-new-project-menu').should('exist');
-  cy.snip('ProjectPage');
-  cy.get('body').then(($body) => {
+  cy.get(".nc-new-project-menu").should("exist");
+  cy.snip("ProjectPage");
+  cy.get("body").then(($body) => {
     const filter = args.meta
-      ? '.nc-meta-project-row'
-      : ':not(.nc-meta-project-row)';
+      ? ".nc-meta-project-row"
+      : ":not(.nc-meta-project-row)";
     // if project exist open
-    if (
-      $body.find('.nc-rest-project-row').filter(filter).length &&
-      !args.new
-    ) {
-      cy.get('.nc-rest-project-row').filter(filter).first().click();
+    if ($body.find(".nc-rest-project-row").filter(filter).length && !args.new) {
+      cy.get(".nc-rest-project-row").filter(filter).first().click();
     } else {
-      cy.contains('New Project')
-        .trigger('onmouseover')
-        .trigger('mouseenter');
+      cy.contains("New Project").trigger("onmouseover").trigger("mouseenter");
       if (args.meta) {
-        cy.get('.nc-create-xc-db-project').click();
-        cy.url({ timeout: 6000 }).should('contain', '#/project/xcdb');
-        cy.get('.nc-metadb-project-name').type(
-          'test_proj' + Date.now()
-        );
-        cy.contains('button', 'Create', { timeout: 3000 }).click();
+        cy.get(".nc-create-xc-db-project").click();
+        cy.url({ timeout: 6000 }).should("contain", "#/project/xcdb");
+        cy.get(".nc-metadb-project-name").type("test_proj" + Date.now());
+        cy.contains("button", "Create", { timeout: 3000 }).click();
       } else {
-        cy.get('.nc-create-external-db-project').click();
-        cy.url({ timeout: 6000 }).should('contain', '#/project');
-        cy.get('.database-field input').click().clear().type('sakila');
-        cy.contains('Test Database Connection').click();
-        cy.contains('Ok & Save Project', { timeout: 3000 }).click();
+        cy.get(".nc-create-external-db-project").click();
+        cy.url({ timeout: 6000 }).should("contain", "#/project");
+        cy.get(".database-field input").click().clear().type("sakila");
+        cy.contains("Test Database Connection").click();
+        cy.contains("Ok & Save Project", { timeout: 3000 }).click();
       }
     }
   });
-  cy.url({ timeout: 20000 }).should('contain', '#/nc/');
+  cy.url({ timeout: 20000 }).should("contain", "#/nc/");
 });
 
-Cypress.Commands.add('refreshTableTab', () => {
-  cy.task('log', `[refreshTableTab]`);
+Cypress.Commands.add("refreshTableTab", () => {
+  cy.task("log", `[refreshTableTab]`);
 
-  cy.get('.nc-project-tree')
-    .find('.v-list-item__title:contains(Tables)', { timeout: 10000 })
-    .should('exist')
+  cy.get(".nc-project-tree")
+    .find(".v-list-item__title:contains(Tables)", { timeout: 10000 })
+    .should("exist")
     .first()
     .rightclick({ force: true });
 
   cy.getActiveMenu(".nc-dropdown-tree-view-context-menu")
     .find('[role="menuitem"]')
-    .contains('Tables Refresh')
-    .should('exist')
+    .contains("Tables Refresh")
+    .should("exist")
     .click({ force: true });
 
-  cy.toastWait('Tables refreshed');
+  cy.toastWait("Tables refreshed");
 });
 
 // tn: table name
 // rc: row count. validate row count if rc!=0
-Cypress.Commands.add('openTableTab', (tn, rc) => {
-  cy.task('log', `[openTableTab] ${tn} ${rc}`);
+Cypress.Commands.add("openTableTab", (tn, rc) => {
+  cy.task("log", `[openTableTab] ${tn} ${rc}`);
 
-  cy.get(`.nc-project-tree-tbl-${tn}`)
-    .should('exist')
-    .first()
-    .click();
+  cy.get(`.nc-project-tree-tbl-${tn}`).should("exist").first().click();
 
   // kludge to make new tab active
   // cy.get('.ant-tabs-tab-btn')
@@ -167,74 +151,70 @@ Cypress.Commands.add('openTableTab', (tn, rc) => {
   //   .click();
   cy.wait(3000);
 
-  cy.get('.xc-row-table.nc-grid').should('exist');
+  cy.get(".xc-row-table.nc-grid").should("exist");
 
   // wait for page rendering to complete
   if (rc != 0) {
-    cy.get('.nc-grid-row').should('have.length', rc);
+    cy.get(".nc-grid-row").should("have.length", rc);
   }
 });
 
-Cypress.Commands.add('closeTableTab', (tn) => {
-  cy.task('log', `[closeTableTab] ${tn}`);
-  cy.get('.ant-tabs-tab-btn')
+Cypress.Commands.add("closeTableTab", (tn) => {
+  cy.task("log", `[closeTableTab] ${tn}`);
+  cy.get(".ant-tabs-tab-btn")
     .contains(tn)
-    .should('exist')
+    .should("exist")
     .parent()
     .parent()
     .parent()
-    .find('button')
+    .find("button")
     .click();
 
   // subsequent tab open commands will fail if tab is not closed completely
   cy.wait(1000);
 });
 
-Cypress.Commands.add('openOrCreateGqlProject', (_args) => {
+Cypress.Commands.add("openOrCreateGqlProject", (_args) => {
   const args = Object.assign({ new: false, meta: false }, _args);
 
   cy.signinOrSignup();
 
-  cy.get('.nc-new-project-menu').should('exist');
-  cy.get('body').then(($body) => {
+  cy.get(".nc-new-project-menu").should("exist");
+  cy.get("body").then(($body) => {
     const filter = args.meta
-      ? '.nc-meta-project-row'
-      : ':not(.nc-meta-project-row)';
+      ? ".nc-meta-project-row"
+      : ":not(.nc-meta-project-row)";
     // if project exist open
     if (
-      $body.find('.nc-graphql-project-row').filter(filter).length &&
+      $body.find(".nc-graphql-project-row").filter(filter).length &&
       !args.new
     ) {
-      cy.get('.nc-graphql-project-row').filter(filter).first().click();
+      cy.get(".nc-graphql-project-row").filter(filter).first().click();
     } else {
-      cy.contains('New Project')
-        .trigger('onmouseover')
-        .trigger('mouseenter');
+      cy.contains("New Project").trigger("onmouseover").trigger("mouseenter");
       if (args.meta) {
-        cy.get('.nc-create-xc-db-project').click();
-        cy.url({ timeout: 6000 }).should('contain', '#/project/xcdb');
-        cy.contains('GRAPHQL APIs').closest('label').click();
-        cy.get('.nc-metadb-project-name').type(
-          'test_proj' + Date.now()
-        );
-        cy.contains('button', 'Create', { timeout: 3000 }).click();
+        cy.get(".nc-create-xc-db-project").click();
+        cy.url({ timeout: 6000 }).should("contain", "#/project/xcdb");
+        cy.contains("GRAPHQL APIs").closest("label").click();
+        cy.get(".nc-metadb-project-name").type("test_proj" + Date.now());
+        cy.contains("button", "Create", { timeout: 3000 }).click();
       } else {
-        cy.get('.nc-create-external-db-project').click();
-        cy.url({ timeout: 6000 }).should('contain', '#/project');
-        cy.contains('GRAPHQL APIs').closest('label').click();
-        cy.get('.database-field input').click().clear().type('sakila');
-        cy.contains('Test Database Connection').click();
-        cy.contains('Ok & Save Project').should('exist').click();
+        cy.get(".nc-create-external-db-project").click();
+        cy.url({ timeout: 6000 }).should("contain", "#/project");
+        cy.contains("GRAPHQL APIs").closest("label").click();
+        cy.get(".database-field input").click().clear().type("sakila");
+        cy.contains("Test Database Connection").click();
+        cy.contains("Ok & Save Project").should("exist").click();
       }
     }
   });
-  cy.url({ timeout: 20000 }).should('contain', '#/nc/');
+  cy.url({ timeout: 20000 }).should("contain", "#/nc/");
 });
 
 let LOCAL_STORAGE_MEMORY = {};
 let LOCAL_STORAGE_MEMORY_v2 = {};
 
-Cypress.Commands.add('saveLocalStorage', (name) => {
+Cypress.Commands.add("saveLocalStorage", (name) => {
   LOCAL_STORAGE_MEMORY = {};
   Object.keys(localStorage).forEach((key) => {
     LOCAL_STORAGE_MEMORY[key] = localStorage[key];
@@ -242,7 +222,7 @@ Cypress.Commands.add('saveLocalStorage', (name) => {
   cy.printLocalStorage();
 });
 
-Cypress.Commands.add('restoreLocalStorage', (name) => {
+Cypress.Commands.add("restoreLocalStorage", (name) => {
   Object.keys(LOCAL_STORAGE_MEMORY).forEach((key) => {
     localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
   });
@@ -250,106 +230,139 @@ Cypress.Commands.add('restoreLocalStorage', (name) => {
   cy.printLocalStorage();
 });
 
-Cypress.Commands.add('deleteLocalStorage', () => {
+Cypress.Commands.add("deleteLocalStorage", () => {
   Object.keys(LOCAL_STORAGE_MEMORY).forEach((key) => {
     localStorage.removeItem(key);
   });
 });
 
-Cypress.Commands.add('printLocalStorage', () => {
-  cy.task('log', `[printLocalStorage]`);
-  cy.task('log', JSON.stringify(localStorage, null, 2));
-  cy.task('log', JSON.stringify(LOCAL_STORAGE_MEMORY, null, 2));
+// saveLocalStorageToFile
+Cypress.Commands.add("saveLocalStorageToFile", (name) => {
+  LOCAL_STORAGE_MEMORY_v2 = {};
+  Object.keys(localStorage).forEach((key) => {
+    LOCAL_STORAGE_MEMORY_v2[key] = localStorage[key];
+  });
+  cy.writeFile(
+    `scripts/cypress/fixtures/${name}.json`,
+    LOCAL_STORAGE_MEMORY_v2
+  );
 });
 
-Cypress.Commands.add('getActiveModal', (wrapperSelector) => {
+// restoreLocalStorageFromFile
+Cypress.Commands.add("restoreLocalStorageFromFile", (name) => {
+  cy.readFile(`scripts/cypress/fixtures/${name}.json`).then((data) => {
+    Object.keys(data).forEach((key) => {
+      localStorage.setItem(key, data[key]);
+    });
+  });
+
+  cy.saveLocalStorage();
+});
+
+Cypress.Commands.add("printLocalStorage", () => {
+  cy.task("log", `[printLocalStorage]`);
+  cy.task("log", JSON.stringify(localStorage, null, 2));
+  cy.task("log", JSON.stringify(LOCAL_STORAGE_MEMORY, null, 2));
+});
+
+Cypress.Commands.add("getActiveModal", (wrapperSelector) => {
   if (wrapperSelector) {
     return cy.get(`${wrapperSelector} .ant-modal-content:visible`).last();
   }
-  return cy.get('.ant-modal-content:visible').last();
+  return cy.get(".ant-modal-content:visible").last();
 });
 
-Cypress.Commands.add('getActiveMenu', (overlaySelector) => {
+Cypress.Commands.add("getActiveMenu", (overlaySelector) => {
   if (overlaySelector) {
     return cy.get(`${overlaySelector} .ant-dropdown-content:visible`);
   }
-  return cy.get('.ant-dropdown-content:visible').last();
+  return cy.get(".ant-dropdown-content:visible").last();
 });
 
-Cypress.Commands.add('getActivePopUp', () => {
-  return cy.get('.ant-menu-submenu-popup:visible').last();
+Cypress.Commands.add("getActivePopUp", () => {
+  return cy.get(".ant-menu-submenu-popup:visible").last();
 });
 
-Cypress.Commands.add('getActiveSelection', (selector) => {
+Cypress.Commands.add("getActiveSelection", (selector) => {
   if (selector) {
     return cy.get(`${selector}.ant-select-dropdown:visible`).last();
   }
-  return cy.get('.ant-select-dropdown:visible').last();
+  return cy.get(".ant-select-dropdown:visible").last();
 });
 
-Cypress.Commands.add('getActiveDrawer', (selector) => {
+Cypress.Commands.add("getActiveDrawer", (selector) => {
   if (selector) {
     return cy.get(`${selector} .ant-drawer-content:visible`).last();
   }
-  return cy.get('.ant-drawer-content:visible').last();
+  return cy.get(".ant-drawer-content:visible").last();
 });
 
-Cypress.Commands.add('getActivePicker', (dropdownSelector) => {
+Cypress.Commands.add("getActivePicker", (dropdownSelector) => {
   if (dropdownSelector) {
     return cy.get(`${dropdownSelector}.ant-drawer-content:visible`).last();
   }
-  return cy.get('.ant-picker-dropdown :visible').last();
+  return cy.get(".ant-picker-dropdown :visible").last();
 });
 
-Cypress.Commands.add('createTable', (name) => {
-  cy.task('log', `[createTableTab] ${name}`);
+Cypress.Commands.add("createTable", (name) => {
+  cy.task("log", `[createTableTab] ${name}`);
   cy.wait(1000);
-  cy.get('.nc-add-new-table').should('exist').click();
+  cy.get(".nc-add-new-table").should("exist").click();
   cy.wait(1000);
-  cy.getActiveModal('.nc-modal-table-create').find(`input[type="text"]:visible`)
+  cy.getActiveModal(".nc-modal-table-create")
+    .find(`input[type="text"]:visible`)
     .click()
     .clear()
     .type(name);
   // submit button
-  cy.getActiveModal('.nc-modal-table-create').find('button.ant-btn-primary:visible').click();
+  cy.getActiveModal(".nc-modal-table-create")
+    .find("button.ant-btn-primary:visible")
+    .click();
   cy.wait(1000);
-  cy.get('.xc-row-table.nc-grid').should('exist');
+  cy.get(".xc-row-table.nc-grid").should("exist");
   // cy.get('.ant-tabs-tab-active > .ant-tabs-tab-btn').contains(name).should("exist");
-  cy.url().should('contain', `table/${name}`);
-  cy.get(`.nc-project-tree-tbl-${name}`).should('exist');
+  cy.url().should("contain", `table/${name}`);
+  cy.get(`.nc-project-tree-tbl-${name}`).should("exist");
   cy.wait(1000);
 });
 
-Cypress.Commands.add('deleteTable', (name, dbType) => {
-  cy.get(`.nc-project-tree-tbl-${name}`).should('exist').rightclick();
-  cy.getActiveMenu(".nc-dropdown-tree-view-context-menu").find('[role="menuitem"]').contains('Delete').click();
-  cy.getActiveModal().find('button').contains('Yes').click();
+Cypress.Commands.add("deleteTable", (name, dbType) => {
+  cy.get(`.nc-project-tree-tbl-${name}`).should("exist").rightclick();
+  cy.getActiveMenu(".nc-dropdown-tree-view-context-menu")
+    .find('[role="menuitem"]')
+    .contains("Delete")
+    .click();
+  cy.getActiveModal().find("button").contains("Yes").click();
 
   cy.toastWait(`Deleted table successfully`);
 });
 
-Cypress.Commands.add('renameTable', (oldName, newName) => {
-
+Cypress.Commands.add("renameTable", (oldName, newName) => {
   // right click on project table name
   cy.get(`.nc-project-tree-tbl-${oldName}`)
-    .should('exist')
+    .should("exist")
     .first()
     .rightclick();
 
   // choose rename option from menu
   cy.getActiveMenu(".nc-dropdown-tree-view-context-menu")
     .find('[role="menuitem"]')
-    .contains('Rename')
+    .contains("Rename")
     .click({ force: true });
 
   // feed new name
-  cy.getActiveModal(".nc-modal-table-rename").find('input').clear().type(newName);
+  cy.getActiveModal(".nc-modal-table-rename")
+    .find("input")
+    .clear()
+    .type(newName);
 
   // submit
-  cy.getActiveModal(".nc-modal-table-rename").find('button').contains('Submit').click();
-
-  cy.toastWait('Table renamed successfully');
+  cy.getActiveModal(".nc-modal-table-rename")
+    .find("button")
+    .contains("Submit")
+    .click();
 
+  cy.toastWait("Table renamed successfully");
 });
 
 // Cypress.Commands.add('createColumn', (table, columnName) => {
@@ -373,42 +386,47 @@ Cypress.Commands.add('renameTable', (oldName, newName) => {
 //   cy.get('th:contains(new_column)').should('exist');
 // });
 
-Cypress.Commands.add('toastWait', (msg) => {
-  cy.get('.ant-message-notice-content:visible', { timeout: 60000 }).contains(msg).should('exist');
-  cy.get('.ant-message-notice-content:visible', { timeout: 12000 }).should('not.exist');
+Cypress.Commands.add("toastWait", (msg) => {
+  cy.get(".ant-message-notice-content:visible", { timeout: 60000 })
+    .contains(msg)
+    .should("exist");
+  cy.get(".ant-message-notice-content:visible", { timeout: 12000 }).should(
+    "not.exist"
+  );
 });
 
 // vn: view name
 // rc: expected row count. validate row count if rc!=0
-Cypress.Commands.add('openViewsTab', (vn, rc) => {
-  cy.task('log', `[openViewsTab] ${vn} ${rc}`);
+Cypress.Commands.add("openViewsTab", (vn, rc) => {
+  cy.task("log", `[openViewsTab] ${vn} ${rc}`);
 
-  cy.get(`.nc-project-tree-tbl-${vn}`, { timeout: 10000 }).should('exist')
+  cy.get(`.nc-project-tree-tbl-${vn}`, { timeout: 10000 })
+    .should("exist")
     .first()
     .click({ force: true });
 
   // kludge to make new tab active
-  cy.get('.ant-tabs-tab-btn')
+  cy.get(".ant-tabs-tab-btn")
     .contains(vn)
-    .should('exist')
+    .should("exist")
     .click({ force: true });
 
   // wait for page rendering to complete
   if (rc != 0) {
-    cy.get('.xc-row-table.nc-grid').should('exist');
-    cy.get('.nc-grid-row').should('have.length', rc);
+    cy.get(".xc-row-table.nc-grid").should("exist");
+    cy.get(".nc-grid-row").should("have.length", rc);
   }
 });
 
-Cypress.Commands.add('closeViewsTab', (vn) => {
-  cy.task('log', `[closeViewsTab] ${vn}`);
-  cy.get('.ant-tabs-tab-btn')
+Cypress.Commands.add("closeViewsTab", (vn) => {
+  cy.task("log", `[closeViewsTab] ${vn}`);
+  cy.get(".ant-tabs-tab-btn")
     .contains(vn)
-    .should('exist')
+    .should("exist")
     .parent()
     .parent()
     .parent()
-    .find('button')
+    .find("button")
     .click();
 });
 
@@ -418,9 +436,9 @@ Cypress.Commands.add('closeViewsTab', (vn) => {
 let screenShotDb = [];
 
 // snip entire screen
-Cypress.Commands.add('snip', (filename) => {
+Cypress.Commands.add("snip", (filename) => {
   if (
-    true === Cypress.env('screenshot') &&
+    true === Cypress.env("screenshot") &&
     false === screenShotDb.includes(filename)
   ) {
     let storeName = `${screenShotDb.length}_${filename}`;
@@ -431,9 +449,9 @@ Cypress.Commands.add('snip', (filename) => {
 });
 
 // snip current modal
-Cypress.Commands.add('snipActiveModal', (filename) => {
+Cypress.Commands.add("snipActiveModal", (filename) => {
   if (
-    true === Cypress.env('screenshot') &&
+    true === Cypress.env("screenshot") &&
     false === screenShotDb.includes(filename)
   ) {
     let storeName = `${screenShotDb.length}_${filename}`;
@@ -448,9 +466,9 @@ Cypress.Commands.add('snipActiveModal', (filename) => {
 });
 
 // snip current menu
-Cypress.Commands.add('snipActiveMenu', (filename) => {
+Cypress.Commands.add("snipActiveMenu", (filename) => {
   if (
-    true === Cypress.env('screenshot') &&
+    true === Cypress.env("screenshot") &&
     false === screenShotDb.includes(filename)
   ) {
     let storeName = `${screenShotDb.length}_${filename}`;
@@ -465,23 +483,26 @@ Cypress.Commands.add('snipActiveMenu', (filename) => {
 });
 
 // pre-test file hook
-Cypress.Commands.add('fileHook', () => {
-  window.localStorage.setItem('vueuse-color-scheme', 'light');
+Cypress.Commands.add("fileHook", () => {
+  window.localStorage.setItem("vueuse-color-scheme", "light");
 });
 
-Cypress.Commands.add('signOut', () => {
+Cypress.Commands.add("signOut", () => {
   // sign out
   cy.visit(`/`);
-  cy.get('.nc-project-page-title', { timeout: 30000 }).contains('My Projects').should('be.visible');
-  cy.get('.nc-menu-accounts', { timeout: 30000 }).should('exist').click();
-  cy.getActiveMenu(".nc-dropdown-user-accounts-menu").find('.ant-dropdown-menu-item').eq(1).click();
+  cy.get(".nc-project-page-title", { timeout: 30000 })
+    .contains("My Projects")
+    .should("be.visible");
+  cy.get(".nc-menu-accounts", { timeout: 30000 }).should("exist").click();
+  cy.getActiveMenu(".nc-dropdown-user-accounts-menu")
+    .find(".ant-dropdown-menu-item")
+    .eq(1)
+    .click();
 
   cy.wait(5000);
-  cy.get('button:contains("SIGN")').should('exist');
+  cy.get('button:contains("SIGN")').should("exist");
 });
 
-
-
 // View basic routines
 //
 function capitalizeFirstLetter(string) {
@@ -492,85 +513,67 @@ function capitalizeFirstLetter(string) {
 //  : viewType: grid, gallery, kanban, form
 //  : creates view with default name
 //
-Cypress.Commands.add('viewCreate', (viewType) => {
-
+Cypress.Commands.add("viewCreate", (viewType) => {
   // click on 'Grid/Gallery/Form/Kanban' button on Views bar
   cy.get(`.nc-create-${viewType}-view`).click();
 
   // Pop up window, click Submit (accepting default name for view)
-  cy.getActiveModal(".nc-modal-view-create")
-    .find(".ant-btn-primary").click();
+  cy.getActiveModal(".nc-modal-view-create").find(".ant-btn-primary").click();
   cy.toastWait("View created successfully");
 
   // validate if view was created && contains default name 'Country1'
   cy.get(`.nc-${viewType}-view-item`)
     .contains(`${capitalizeFirstLetter(viewType)}-1`)
     .should("exist");
-})
+});
 
 // viewDelete
 //  : delete view by index (0-based, exclude default view)
 //
-Cypress.Commands.add('viewDelete', (viewIndex) => {
+Cypress.Commands.add("viewDelete", (viewIndex) => {
   // click on delete icon (becomes visible on hovering mouse)
-  cy.get(".nc-view-delete-icon")
-    .eq(viewIndex)
-    .click({ force: true });
-  cy.wait(300)
+  cy.get(".nc-view-delete-icon").eq(viewIndex).click({ force: true });
+  cy.wait(300);
 
   // click on 'Delete' button on confirmation modal
-  cy.getActiveModal(".nc-modal-view-delete")
-    .find('.ant-btn-dangerous')
-    .click();
+  cy.getActiveModal(".nc-modal-view-delete").find(".ant-btn-dangerous").click();
   cy.toastWait("View deleted successfully");
-})
+});
 
 // viewDuplicate
 //  : duplicate view by index (0-based, *include* default view)
 //
-Cypress.Commands.add('viewCopy', (viewIndex) => {
+Cypress.Commands.add("viewCopy", (viewIndex) => {
   // click on delete icon (becomes visible on hovering mouse)
-  cy.get(".nc-view-copy-icon")
-    .eq(viewIndex)
-    .click({ force: true });
-  cy.wait(300)
+  cy.get(".nc-view-copy-icon").eq(viewIndex).click({ force: true });
+  cy.wait(300);
 
   // click on 'Delete' button on confirmation modal
-  cy.getActiveModal(".nc-modal-view-create")
-    .find('.ant-btn-primary')
-    .click();
+  cy.getActiveModal(".nc-modal-view-create").find(".ant-btn-primary").click();
   cy.toastWait("View created successfully");
-})
+});
 
 // viewRename
 //  : rename view by index (0-based, exclude default view)
 //
-Cypress.Commands.add('viewRename', (viewType, viewIndex, newName) => {
+Cypress.Commands.add("viewRename", (viewType, viewIndex, newName) => {
   // click on edit-icon (becomes visible on hovering mouse)
   cy.get(`.nc-${viewType}-view-item`).eq(viewIndex).dblclick();
 
   // feed new name
-  cy.get(`.nc-${viewType}-view-item input`)
-    .clear()
-    .type(`${newName}{enter}`);
+  cy.get(`.nc-${viewType}-view-item input`).clear().type(`${newName}{enter}`);
   cy.toastWait("View renamed successfully");
 
   // validate
-  cy.get(`.nc-${viewType}-view-item`)
-    .contains(`${newName}`)
-    .should("exist");
-})
+  cy.get(`.nc-${viewType}-view-item`).contains(`${newName}`).should("exist");
+});
 
 // openTableView
 //  : open view by type & name
 //
-Cypress.Commands.add('openTableView', (viewType, viewName) => {
-  cy.get(`.nc-${viewType}-view-item`)
-    .contains(`${viewName}`)
-    .click();
-})
-
-
+Cypress.Commands.add("openTableView", (viewType, viewName) => {
+  cy.get(`.nc-${viewType}-view-item`).contains(`${viewName}`).click();
+});
 
 // Drag n Drop
 // refer: https://stackoverflow.com/a/55409853