feat(testing): Moved toolbar to commons folder

scripts/playwright/pages/Dashboard/Form/index.ts

@@ -2,10 +2,11 @@
 import { Locator, expect } from "@playwright/test";
 import { DashboardPage } from "..";
 import BasePage from "../../Base";
+import { ToolbarPage } from "../common/Toolbar";
 
 export class FormPage extends BasePage {
   readonly dashboard: DashboardPage;
-  readonly dashboardPage: DashboardPage;
+  readonly toolbar: ToolbarPage;
 
   readonly addAllButton: Locator;
   readonly removeAllButton: Locator;
@@ -19,35 +20,37 @@ export class FormPage extends BasePage {
   readonly formSubHeading: Locator;
   readonly afterSubmitMsg: Locator;
 
-  constructor(dashboardPage: DashboardPage) {
+  constructor(dashboard: DashboardPage) {
-    super(dashboardPage.rootPage);
+    super(dashboard.rootPage);
-    this.dashboard = dashboardPage;
+    this.dashboard = dashboard;
-    this.addAllButton = dashboardPage
+    this.toolbar = new ToolbarPage(this);
+    
+    this.addAllButton = dashboard
       .get()
       .locator('[data-pw="nc-form-add-all"]');
-    this.removeAllButton = dashboardPage
+    this.removeAllButton = dashboard
       .get()
       .locator('[data-pw="nc-form-remove-all"]');
-    this.submitButton = dashboardPage
+    this.submitButton = dashboard
       .get()
       .locator('[data-pw="nc-form-submit"]');
 
-    this.showAnotherFormRadioButton = dashboardPage
+    this.showAnotherFormRadioButton = dashboard
       .get()
       .locator('[data-pw="nc-form-checkbox-submit-another-form"]');
-    this.showAnotherFormAfter5SecRadioButton = dashboardPage
+    this.showAnotherFormAfter5SecRadioButton = dashboard
       .get()
       .locator('[data-pw="nc-form-checkbox-show-blank-form"]');
-    this.emailMeRadioButton = dashboardPage
+    this.emailMeRadioButton = dashboard
       .get()
       .locator('[data-pw="nc-form-checkbox-send-email"]');
-    this.formHeading = dashboardPage
+    this.formHeading = dashboard
       .get()
       .locator('[data-pw="nc-form-heading"]');
-    this.formSubHeading = dashboardPage
+    this.formSubHeading = dashboard
       .get()
       .locator('[data-pw="nc-form-sub-heading"]');
-    this.afterSubmitMsg = dashboardPage
+    this.afterSubmitMsg = dashboard
       .get()
       .locator('[data-pw="nc-form-after-submit-msg"]');
   }
@@ -246,6 +249,10 @@ export class FormPage extends BasePage {
     );
   }
 
+  async waitLoading() {
+    await this.rootPage.waitForTimeout(1000);
+  }
+
   verifyAfterSubmitMenuState(param: {
     showBlankForm?: boolean;
     submitAnotherForm?: boolean;

scripts/playwright/pages/Dashboard/Gallery/index.ts

@@ -2,14 +2,16 @@
 import { Locator, expect } from "@playwright/test";
 import { DashboardPage } from "..";
 import BasePage from "../../Base";
+import { ToolbarPage } from "../common/Toolbar";
 
 export class GalleryPage extends BasePage {
   readonly dashboard: DashboardPage;
-  readonly dashboardPage: DashboardPage;
+  readonly toolbar: ToolbarPage;
 
-  constructor(dashboardPage: DashboardPage) {
+  constructor(dashboard: DashboardPage) {
-    super(dashboardPage.rootPage);
+    super(dashboard.rootPage);
-    this.dashboard = dashboardPage;
+    this.dashboard = dashboard;
+    this.toolbar = new ToolbarPage(this);
   }
 
   get() {
@@ -42,4 +44,8 @@ export class GalleryPage extends BasePage {
     await this.rootPage.waitForTimeout(1000);
     await this.rootPage.locator(`.nc-fields-menu-btn`).click();
   }
+
+  async waitLoading() {
+    await this.rootPage.waitForTimeout(1000);
+  }
 }

scripts/playwright/pages/Dashboard/Grid/Column/index.ts

@@ -212,11 +212,11 @@ export class ColumnPageObject extends BasePage {
     await this.rootPage.waitForTimeout(200);
   }
 
-  async verify({ title, isVisible }: { title: string; isVisible?: boolean }) {
+  async verify({ title, isVisible = true }: { title: string; isVisible?: boolean }) {
-    if (false === isVisible) {
+    if (!isVisible) {
       return expect(
-        await this.rootPage.locator(`th[data-title="${title}"]`).count()
+        await this.rootPage.locator(`th[data-title="${title}"]`)
-      ).toBe(0);
+      ).not.toBeVisible();
     }
     await expect(
       this.rootPage.locator(`th[data-title="${title}"]`)

scripts/playwright/pages/Dashboard/Grid/index.ts

@@ -4,7 +4,7 @@ import { DashboardPage } from "..";
 import BasePage from "../../Base";
 import { CellPageObject } from "./Cell";
 import { ColumnPageObject } from "./Column";
-import { ToolbarPage } from "../Toolbar";
+import { ToolbarPage } from "../common/Toolbar";
 
 export class GridPage extends BasePage {
   readonly dashboard: DashboardPage;
@@ -20,7 +20,7 @@ export class GridPage extends BasePage {
     this.addNewTableButton = dashboardPage.get().locator(".nc-add-new-table");
     this.column = new ColumnPageObject(this);
     this.cell = new CellPageObject(this);
-    this.toolbar = new ToolbarPage(this.dashboard);
+    this.toolbar = new ToolbarPage(this);
   }
 
   get() {

scripts/playwright/pages/Dashboard/TreeView.ts

@@ -77,6 +77,7 @@ export class TreeViewPage extends BasePage {
   }
 
   async deleteTable({ title }: { title: string }) {
+    const tabCount = await this.rootPage.locator('.nc-container').count()
     await this.get()
       .locator(`.nc-project-tree-tbl-${title}`)
       .click({ button: "right" });
@@ -90,6 +91,9 @@ export class TreeViewPage extends BasePage {
       requestHttpMethod: "DELETE",
       requestUrlPathToMatch: `/api/v1/db/meta/tables/`,
     });
+    await expect.poll(async () => await this.rootPage.locator('.nc-container').count() === tabCount - 1).toBe(true);
+
+    (await this.rootPage.locator('.nc-container').last().elementHandle())?.waitForElementState('stable');
   }
 
   async renameTable({ title, newTitle }: { title: string; newTitle: string }) {

scripts/playwright/pages/Dashboard/common/Toolbar/Actions/Erd.ts

@@ -1,5 +1,5 @@
 import { ToolbarActionsPage } from ".";
-import { ErdBasePage } from "../../commonBase/Erd";
+import { ErdBasePage } from "../../../commonBase/Erd";
 
 export class ToolbarActionsErdPage extends ErdBasePage {
   readonly toolbarActions: ToolbarActionsPage;

scripts/playwright/pages/Dashboard/common/Toolbar/Actions/index.ts

@@ -1,4 +1,4 @@
-import BasePage from "../../../Base";
+import BasePage from "../../../../Base";
 import { ToolbarPage } from "..";
 import { ToolbarActionsErdPage } from "./Erd";
 

scripts/playwright/pages/Dashboard/common/Toolbar/Fields.ts

@@ -1,4 +1,4 @@
-import BasePage from "../../Base";
+import BasePage from "../../../Base";
 import { ToolbarPage } from "./index";
 
 export class ToolbarFieldsPage extends BasePage {
@@ -27,6 +27,6 @@ export class ToolbarFieldsPage extends BasePage {
       .locator(`[pw-data="nc-fields-menu-${title}"]`)
       .locator('input[type="checkbox"]')
       .click();
-    await this.toolbar.waitLoading();
+    await this.toolbar.parent.waitLoading();
   }
 }

scripts/playwright/pages/Dashboard/common/Toolbar/Filter.ts

@@ -1,4 +1,4 @@
-import BasePage from "../../Base";
+import BasePage from "../../../Base";
 import { ToolbarPage } from "./index";
 
 export class ToolbarFilterPage extends BasePage {
@@ -40,8 +40,12 @@ export class ToolbarFilterPage extends BasePage {
 
     await this.rootPage.locator(".nc-filter-value-select").last().fill(value);
 
+    await this.waitForResponse({
+      requestHttpMethod: "POST",
+      requestUrlPathToMatch: "/filters",
+    })
+
     await this.toolbar.clickFilter();
-    await this.toolbar.waitLoading();
   }
 
   click({ title }: { title: string }) {
@@ -54,6 +58,11 @@ export class ToolbarFilterPage extends BasePage {
   async resetFilter() {
     await this.toolbar.clickFilter();
     await this.get().locator(".nc-filter-item-remove-btn").click();
+    await this.waitForResponse({
+      requestHttpMethod: "DELETE",
+      requestUrlPathToMatch: "/api/v1/db/meta/filters/",
+    })
+   
     await this.toolbar.clickFilter();
   }
 }

scripts/playwright/pages/Dashboard/common/Toolbar/ShareView.ts

@@ -1,4 +1,4 @@
-import BasePage from "../../Base";
+import BasePage from "../../../Base";
 import { ToolbarPage } from "./index";
 
 export class ToolbarShareViewPage extends BasePage {

scripts/playwright/pages/Dashboard/common/Toolbar/Sort.ts

@@ -1,4 +1,4 @@
-import BasePage from "../../Base";
+import BasePage from "../../../Base";
 import { ToolbarPage } from "./index";
 
 export class ToolbarSortPage extends BasePage {
@@ -41,7 +41,7 @@ export class ToolbarSortPage extends BasePage {
 
     // close sort menu
     await this.toolbar.clickSort();
-    await this.toolbar.waitLoading();
+    await this.toolbar.parent.waitLoading();
   }
 
   async resetSort() {

scripts/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts

@@ -1,5 +1,6 @@
 import { Locator, expect } from "@playwright/test";
-import BasePage from "../../Base";
+import BasePage from "../../../Base";
+import { GridPage } from "../../Grid";
 import { ToolbarPage } from "./index";
 
 export class ToolbarViewMenuPage extends BasePage {
@@ -55,7 +56,7 @@ export class ToolbarViewMenuPage extends BasePage {
           break;
       }
     }
-    await this.toolbar.waitLoading();
+    await this.toolbar.parent.waitLoading();
   }
 
   async verifyLockMode() {
@@ -74,7 +75,7 @@ export class ToolbarViewMenuPage extends BasePage {
         .locator(`.nc-add-new-row-btn.nc-toolbar-btn > .nc-icon.disabled`)
     ).toBeVisible();
 
-    await this.toolbar.grid.verifyEditDisabled({ columnHeader: "Country" });
+    await (this.toolbar.parent as GridPage).verifyEditDisabled({ columnHeader: "Country" });
   }
 
   async verifyCollaborativeMode() {
@@ -93,6 +94,6 @@ export class ToolbarViewMenuPage extends BasePage {
         .locator(`.nc-add-new-row-btn.nc-toolbar-btn > .nc-icon`)
     ).toBeVisible();
 
-    await this.toolbar.grid.verifyEditEnabled({ columnHeader: "Country" });
+    await (this.toolbar.parent as GridPage).verifyEditEnabled({ columnHeader: "Country" });
   }
 }

scripts/playwright/pages/Dashboard/common/Toolbar/index.ts

@@ -1,17 +1,18 @@
 import { expect } from "@playwright/test";
-import BasePage from "../../Base";
+import BasePage from "../../../Base";
 import { ToolbarFieldsPage } from "./Fields";
 import { ToolbarSortPage } from "./Sort";
 import { ToolbarFilterPage } from "./Filter";
 import { ToolbarShareViewPage } from "./ShareView";
 import { ToolbarViewMenuPage } from "./ViewMenu";
 import * as fs from "fs";
-import { DashboardPage } from "..";
+import { GridPage } from "../../Grid";
-import { GridPage } from "../Grid";
 import { ToolbarActionsPage } from "./Actions";
+import { GalleryPage } from "../../Gallery";
+import { FormPage } from "../../Form";
 
 export class ToolbarPage extends BasePage {
-  readonly dashboard: DashboardPage;
+  readonly parent: GridPage | GalleryPage | FormPage;
   readonly fields: ToolbarFieldsPage;
   readonly sort: ToolbarSortPage;
   readonly filter: ToolbarFilterPage;
@@ -19,9 +20,9 @@ export class ToolbarPage extends BasePage {
   readonly viewsMenu: ToolbarViewMenuPage;
   readonly actions: ToolbarActionsPage;
 
-  constructor(dashboard: DashboardPage) {
+  constructor(parent: GridPage | GalleryPage | FormPage) {
-    super(dashboard.rootPage);
+    super(parent.rootPage);
-    this.dashboard = dashboard;
+    this.parent = parent;
     this.fields = new ToolbarFieldsPage(this);
     this.sort = new ToolbarSortPage(this);
     this.filter = new ToolbarFilterPage(this);
@@ -110,11 +111,4 @@ export class ToolbarPage extends BasePage {
       .locator(`.nc-toolbar-btn.nc-actions-menu-btn`)
       .waitFor({ state: "hidden" });
   }
-
-  async waitLoading() {
-    await this.dashboard
-      .get()
-      .locator('[pw-data="grid-load-spinner"]')
-      .waitFor({ state: "hidden" });
-  }
 }

scripts/playwright/pages/Dashboard/index.ts

@@ -10,7 +10,7 @@ import { TreeViewPage } from "./TreeView";
 import { SettingsPage } from "./Settings";
 import { ViewSidebarPage } from "./ViewSidebar";
 import { GalleryPage } from "./Gallery";
-import { ToolbarPage } from "./Toolbar";
+import { ToolbarPage } from "./common/Toolbar";
 
 export class DashboardPage extends BasePage {
   readonly project: any;
@@ -25,7 +25,6 @@ export class DashboardPage extends BasePage {
   readonly linkRecord: LinkRecord;
   readonly settings: SettingsPage;
   readonly viewSidebar: ViewSidebarPage;
-  readonly toolbar: ToolbarPage;
 
   constructor(rootPage: Page, project: any) {
     super(rootPage);
@@ -41,7 +40,6 @@ export class DashboardPage extends BasePage {
     this.linkRecord = new LinkRecord(this);
     this.settings = new SettingsPage(this);
     this.viewSidebar = new ViewSidebarPage(this);
-    this.toolbar = new ToolbarPage(this);
   }
 
   get() {

scripts/playwright/tests/metaSync.spec.ts

@@ -33,7 +33,7 @@ test.describe("Meta sync", () => {
     test.setTimeout(process.env.CI ? 100000 : 70000);
 
     await dashboard.gotoSettings();
-    await settings.selectTab({tab: SettingTab['Project Metadata']});
+    await settings.selectTab({tab: SettingTab.ProjectMetadata});
 
     await dbExec(
       `CREATE TABLE ${projectPrefix}table1 (id INT NOT NULL, col1 INT NULL, PRIMARY KEY (id))`
@@ -230,16 +230,16 @@ test.describe("Meta sync", () => {
 
     await dashboard.treeView.openTable({ title: "Table1" });
 
-    await dashboard.toolbar.clickFields();
+    await dashboard.grid.toolbar.clickFields();
-    await dashboard.toolbar.fields.click({ title: "Col1" });
+    await dashboard.grid.toolbar.fields.click({ title: "Col1" });
-    await dashboard.toolbar.clickFields();
+    await dashboard.grid.toolbar.clickFields();
 
-    await dashboard.toolbar.sort.addSort({
+    await dashboard.grid.toolbar.sort.addSort({
       columnTitle: "Col1",
       isAscending: false,
     });
 
-    await dashboard.toolbar.filter.addNew({
+    await dashboard.grid.toolbar.filter.addNew({
       columnTitle: "Col1",
       opType: ">=",
       value: "5",

scripts/playwright/tests/tableColumnOperation.spec.ts

@@ -26,7 +26,7 @@ test.describe("Table Column Operations", () => {
     await grid.column.verify({ title: "column_name_b" });
 
     await grid.column.delete({ title: "column_name_b" });
-    await grid.column.verify({ title: "column_name_b", isVisible: true });
+    await grid.column.verify({ title: "column_name_b", isVisible: false });
 
     await grid.addNewRow({ index: 0, value: `Row 0` });
     await grid.verifyRow({ index: 0 });

scripts/playwright/tests/toolbarOperations.spec.ts

@@ -1,7 +1,8 @@
 import { test } from "@playwright/test";
 import { DashboardPage } from "../pages/Dashboard";
+import { ToolbarPage } from "../pages/Dashboard/common/Toolbar";
 import setup from "../setup";
-import { ToolbarPage } from "../pages/Dashboard/Toolbar";
+
 
 test.describe("Toolbar operations (GRID)", () => {
   let dashboard: DashboardPage, toolbar: ToolbarPage;
@@ -18,7 +19,7 @@ test.describe("Toolbar operations (GRID)", () => {
   test.beforeEach(async ({ page }) => {
     context = await setup({ page });
     dashboard = new DashboardPage(page, context.project);
-    toolbar = dashboard.toolbar;
+    toolbar = dashboard.grid.toolbar;
   });
 
   test("Hide, Sort, Filter", async () => {