test(refactor): class name correction

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

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

@@ -82,7 +82,7 @@ const filterAutoSaveLoc = computed({
         ref="filterComp"
         class="nc-table-toolbar-menu shadow-lg"
         :auto-save="filterAutoSave"
-        pw-data="grid-filter-menu"
+        pw-data="nc-filter-menu"
         @update:filters-length="filtersLength = $event"
       >
         <div v-if="!isPublic" class="flex items-end mt-2 min-h-[30px]" @click.stop>

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

@@ -139,7 +139,7 @@ const getIcon = (c: ColumnType) =>
     <template #overlay>
       <div
         class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
-        pw-data="grid-fields-menu"
+        pw-data="nc-fields-menu"
         @click.stop
       >
         <a-card
@@ -167,7 +167,7 @@ const getIcon = (c: ColumnType) =>
                 v-show="filteredFieldList.includes(field)"
                 :key="field.id"
                 class="px-2 py-1 flex items-center"
-                :pw-data="`grid-fields-menu-${field.title}`"
+                :pw-data="`nc-fields-menu-${field.title}`"
                 @click.stop
               >
                 <a-checkbox

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

@@ -55,7 +55,7 @@ watch(
     <template #overlay>
       <div
         class="bg-gray-50 p-6 shadow-lg menu-filter-dropdown min-w-[400px] max-h-[max(80vh,500px)] overflow-auto !border"
-        pw-data="grid-sorts-menu"
+        pw-data="nc-sorts-menu"
       >
         <div v-if="sorts?.length" class="sort-grid mb-2" @click.stop>
           <template v-for="(sort, i) in sorts || []" :key="i">

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

@@ -36,7 +36,7 @@ export class GalleryPage extends BasePage {
     await this.rootPage.locator(`.nc-fields-menu-btn`).click();
     await this.rootPage.waitForTimeout(1000);
     await this.rootPage
-      .locator(`[pw-data="grid-fields-menu-${title}"]`)
+      .locator(`[pw-data="nc-fields-menu-${title}"]`)
       .locator('input[type="checkbox"]')
       .click();
     await this.rootPage.waitForTimeout(1000);

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 "../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);
+    this.toolbar = dashboardPage.toolbar;
   }
 
   get() {
@@ -263,7 +263,7 @@ export class GridPage extends BasePage {
     expect(
       await this.cell
         .get({ index: 0, columnHeader: "City List" })
-        .locator(".nc-action-icon >> nth=0")
+        .locator(".nc-action-icon.nc-arrow-expand")
     ).toBeVisible();
   }
 }

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

@@ -1,5 +1,5 @@
-import BasePage from "../../../Base";
+import BasePage from "../../Base";
-import { ToolbarPage } from ".";
+import { ToolbarPage } from "./index";
 
 export class ToolbarFieldsPage extends BasePage {
   readonly toolbar: ToolbarPage;
@@ -10,20 +10,23 @@ export class ToolbarFieldsPage extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator(`[pw-data="grid-fields-menu"]`);
+    return this.rootPage.locator(`[pw-data="nc-fields-menu"]`);
   }
 
   async toggle({ title }: { title: string }) {
     await this.toolbar.clickFields();
     await this.get()
-      .locator(`[pw-data="grid-fields-menu-${title}"]`)
+      .locator(`[pw-data="nc-fields-menu-${title}"]`)
       .locator('input[type="checkbox"]')
       .click();
     await this.toolbar.clickFields();
   }
 
-  async click({ title}: { title: string }) {
+  async click({ title }: { title: string }) {
-    await this.get().locator(`[pw-data="grid-fields-menu-${title}"]`).locator('input[type="checkbox"]').click();
+    await this.get()
-    await this.toolbar.grid.waitLoading();
+      .locator(`[pw-data="nc-fields-menu-${title}"]`)
+      .locator('input[type="checkbox"]')
+      .click();
+    await this.toolbar.waitLoading();
   }
 }

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

@@ -1,5 +1,5 @@
-import BasePage from "../../../Base";
+import BasePage from "../../Base";
-import { ToolbarPage } from ".";
+import { ToolbarPage } from "./index";
 
 export class ToolbarFilterPage extends BasePage {
   readonly toolbar: ToolbarPage;
@@ -10,7 +10,7 @@ export class ToolbarFilterPage extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator(`[pw-data="grid-filter-menu"]`);
+    return this.rootPage.locator(`[pw-data="nc-filter-menu"]`);
   }
 
   async addNew({
@@ -41,12 +41,12 @@ export class ToolbarFilterPage extends BasePage {
     await this.rootPage.locator(".nc-filter-value-select").last().fill(value);
 
     await this.toolbar.clickFilter();
-    await this.toolbar.grid.waitLoading();
+    await this.toolbar.waitLoading();
   }
 
   click({ title }: { title: string }) {
     return this.get()
-      .locator(`[pw-data="grid-fields-menu-${title}"]`)
+      .locator(`[pw-data="nc-fields-menu-${title}"]`)
       .locator('input[type="checkbox"]')
       .click();
   }

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

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

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

@@ -1,5 +1,5 @@
-import BasePage from "../../../Base";
+import BasePage from "../../Base";
-import { ToolbarPage } from ".";
+import { ToolbarPage } from "./index";
 
 export class ToolbarSortPage extends BasePage {
   readonly toolbar: ToolbarPage;
@@ -10,7 +10,7 @@ export class ToolbarSortPage extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator(`[pw-data="grid-sorts-menu"]`);
+    return this.rootPage.locator(`[pw-data="nc-sorts-menu"]`);
   }
 
   async addSort({
@@ -41,7 +41,7 @@ export class ToolbarSortPage extends BasePage {
 
     // close sort menu
     await this.toolbar.clickSort();
-    await this.toolbar.grid.waitLoading();
+    await this.toolbar.waitLoading();
   }
 
   async resetSort() {
@@ -56,7 +56,7 @@ export class ToolbarSortPage extends BasePage {
 
   click({ title }: { title: string }) {
     return this.get()
-      .locator(`[pw-data="grid-fields-menu-${title}"]`)
+      .locator(`[pw-data="nc-fields-menu-${title}"]`)
       .locator('input[type="checkbox"]')
       .click();
   }

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

@@ -1,6 +1,6 @@
 import { Locator, expect } from "@playwright/test";
-import BasePage from "../../../Base";
+import BasePage from "../../Base";
-import { ToolbarPage } from ".";
+import { ToolbarPage } from "./index";
 
 export class ToolbarViewMenuPage extends BasePage {
   readonly toolbar: ToolbarPage;
@@ -55,7 +55,7 @@ export class ToolbarViewMenuPage extends BasePage {
           break;
       }
     }
-    await this.toolbar.grid.waitLoading();
+    await this.toolbar.waitLoading();
   }
 
   async verifyLockMode() {

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

@@ -1,29 +1,32 @@
 import { expect } from "@playwright/test";
-import BasePage from "../../../Base";
+import BasePage from "../../Base";
-import { GridPage } from "..";
 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";
 
 export class ToolbarPage extends BasePage {
-  readonly grid: GridPage;
+  readonly dashboard: DashboardPage;
   readonly fields: ToolbarFieldsPage;
   readonly sort: ToolbarSortPage;
   readonly filter: ToolbarFilterPage;
   readonly shareView: ToolbarShareViewPage;
   readonly viewsMenu: ToolbarViewMenuPage;
+  readonly grid: GridPage;
 
-  constructor(grid: GridPage) {
+  constructor(dashboard: DashboardPage) {
-    super(grid.rootPage);
+    super(dashboard.rootPage);
-    this.grid = grid;
+    this.dashboard = dashboard;
     this.fields = new ToolbarFieldsPage(this);
     this.sort = new ToolbarSortPage(this);
     this.filter = new ToolbarFilterPage(this);
     this.shareView = new ToolbarShareViewPage(this);
     this.viewsMenu = new ToolbarViewMenuPage(this);
+    this.grid = dashboard.grid;
   }
 
   get() {
@@ -96,4 +99,11 @@ 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,6 +10,7 @@ import { TreeViewPage } from "./TreeView";
 import { SettingsPage } from "./Settings";
 import { ViewSidebarPage } from "./ViewSidebar";
 import { GalleryPage } from "./Gallery";
+import { ToolbarPage } from "./Toolbar";
 
 export class DashboardPage extends BasePage {
   readonly project: any;
@@ -24,6 +25,7 @@ export class DashboardPage extends BasePage {
   readonly linkRecord: LinkRecord;
   readonly settings: SettingsPage;
   readonly viewSidebar: ViewSidebarPage;
+  readonly toolbar: ToolbarPage;
 
   constructor(rootPage: Page, project: any) {
     super(rootPage);
@@ -39,6 +41,7 @@ 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/linkToAnotherRecord.spec.ts

@@ -53,7 +53,7 @@ test.describe("LTAR create & update", () => {
 
     // Expanded form insert
 
-    await dashboard.grid.toolbar.clickAddNewRow();
+    await dashboard.toolbar.clickAddNewRow();
     await dashboard.expandedForm.fillField({
       columnTitle: "Title",
       value: "2a",

scripts/playwright/tests/metaSync.spec.ts

@@ -1,71 +1,111 @@
-import { test } from '@playwright/test';
+import { test } from "@playwright/test";
-import { DashboardPage } from '../pages/Dashboard';
+import { DashboardPage } from "../pages/Dashboard";
-import { SettingsPage } from '../pages/Dashboard/Settings';
+import { SettingsPage } from "../pages/Dashboard/Settings";
-import setup, { NcContext } from '../setup';
+import setup, { NcContext } from "../setup";
-import { isSqlite, mysqlExec, sqliteExec } from '../setup/db';
+import { isSqlite, mysqlExec, sqliteExec } from "../setup/db";
 
 // todo: Enable when view bug is fixed
-test.describe('Meta sync', () => {
+test.describe("Meta sync", () => {
   let dashboard: DashboardPage;
   let settings: SettingsPage;
   let context: NcContext;
   let dbExec;
   let projectPrefix;
 
-  test.beforeEach(async ({page}) => {
+  test.beforeEach(async ({ page }) => {
     context = await setup({ page });
     dashboard = new DashboardPage(page, context.project);
     settings = dashboard.settings;
 
     switch (context.dbType) {
-      case 'sqlite':
+      case "sqlite":
         dbExec = sqliteExec;
         break;
-      case 'mysql':
+      case "mysql":
         dbExec = mysqlExec;
         break;
     }
 
-    projectPrefix = isSqlite(context) ? context.project.prefix: '';
+    projectPrefix = isSqlite(context) ? context.project.prefix : "";
-  })
+  });
 
-  test('Meta sync', async () => {
+  test("Meta sync", async () => {
     test.setTimeout(process.env.CI ? 100000 : 70000);
 
     await dashboard.gotoSettings();
-    await settings.selectTab({title: 'Project Metadata'});
+    await settings.selectTab({ title: "Project Metadata" });
 
-    await dbExec(`CREATE TABLE ${projectPrefix}table1 (id INT NOT NULL, col1 INT NULL, PRIMARY KEY (id))`);
+    await dbExec(
-    await dbExec(`CREATE TABLE ${projectPrefix}table2 (id INT NOT NULL, col1 INT NULL, PRIMARY KEY (id))`);
+      `CREATE TABLE ${projectPrefix}table1 (id INT NOT NULL, col1 INT NULL, PRIMARY KEY (id))`
+    );
+    await dbExec(
+      `CREATE TABLE ${projectPrefix}table2 (id INT NOT NULL, col1 INT NULL, PRIMARY KEY (id))`
+    );
 
     await settings.metaData.clickReload();
-    await settings.metaData.verifyRow({index: 16, model: `${projectPrefix}table1`, state: 'New table'});
+    await settings.metaData.verifyRow({
-    await settings.metaData.verifyRow({index: 17, model: `${projectPrefix}table2`, state: 'New table'});
+      index: 16,
+      model: `${projectPrefix}table1`,
+      state: "New table",
+    });
+    await settings.metaData.verifyRow({
+      index: 17,
+      model: `${projectPrefix}table2`,
+      state: "New table",
+    });
 
     await settings.metaData.sync();
-    await settings.metaData.verifyRow({index: 16, model: 'Table1', state: 'No change identified'});
+    await settings.metaData.verifyRow({
-    await settings.metaData.verifyRow({index: 17, model: 'Table2', state: 'No change identified'});
+      index: 16,
+      model: "Table1",
+      state: "No change identified",
+    });
+    await settings.metaData.verifyRow({
+      index: 17,
+      model: "Table2",
+      state: "No change identified",
+    });
 
-    if(!isSqlite(context)) {
+    if (!isSqlite(context)) {
       // Add relation
-      await dbExec(`ALTER TABLE ${projectPrefix}table1 ADD INDEX fk1_idx (col1 ASC) VISIBLE`);
+      await dbExec(
-      await dbExec(`ALTER TABLE ${projectPrefix}table1 ADD CONSTRAINT fk1 FOREIGN KEY (col1) REFERENCES ${projectPrefix}table2 (id) ON DELETE NO ACTION ON UPDATE NO ACTION`);
+        `ALTER TABLE ${projectPrefix}table1 ADD INDEX fk1_idx (col1 ASC) VISIBLE`
+      );
+      await dbExec(
+        `ALTER TABLE ${projectPrefix}table1 ADD CONSTRAINT fk1 FOREIGN KEY (col1) REFERENCES ${projectPrefix}table2 (id) ON DELETE NO ACTION ON UPDATE NO ACTION`
+      );
       await settings.metaData.clickReload();
-      await settings.metaData.verifyRow({index: 16, model: 'Table1', state: 'New relation added'});
+      await settings.metaData.verifyRow({
+        index: 16,
+        model: "Table1",
+        state: "New relation added",
+      });
 
       //verify after sync
       await settings.metaData.sync();
-      await settings.metaData.verifyRow({index: 16, model: 'Table1', state: 'No change identified'});
+      await settings.metaData.verifyRow({
+        index: 16,
+        model: "Table1",
+        state: "No change identified",
+      });
 
       // Remove relation
       await dbExec(`ALTER TABLE ${projectPrefix}table1 DROP FOREIGN KEY fk1`);
       await dbExec(`ALTER TABLE ${projectPrefix}table1 DROP INDEX fk1_idx`);
       await settings.metaData.clickReload();
-      await settings.metaData.verifyRow({index: 16, model: 'Table1', state: "Relation removed"});
+      await settings.metaData.verifyRow({
+        index: 16,
+        model: "Table1",
+        state: "Relation removed",
+      });
 
       //verify after sync
       await settings.metaData.sync();
-      await settings.metaData.verifyRow({index: 16, model: 'Table1', state: 'No change identified'});
+      await settings.metaData.verifyRow({
+        index: 16,
+        model: "Table1",
+        state: "No change identified",
+      });
     }
 
     // Add column
@@ -75,11 +115,19 @@ test.describe('Meta sync', () => {
         : `ALTER TABLE ${projectPrefix}table1 ADD COLUMN newCol VARCHAR(45) NULL AFTER id`
     );
     await settings.metaData.clickReload();
-    await settings.metaData.verifyRow({index: 16, model: `Table1`, state: 'New column(newCol)'});
+    await settings.metaData.verifyRow({
+      index: 16,
+      model: `Table1`,
+      state: "New column(newCol)",
+    });
 
     //verify after sync
     await settings.metaData.sync();
-    await settings.metaData.verifyRow({index: 16, model: 'Table1', state: 'No change identified'});
+    await settings.metaData.verifyRow({
+      index: 16,
+      model: "Table1",
+      state: "No change identified",
+    });
 
     // Edit column
     await dbExec(
@@ -88,66 +136,115 @@ test.describe('Meta sync', () => {
         : `ALTER TABLE ${projectPrefix}table1 CHANGE COLUMN newCol newColName VARCHAR(45) NULL DEFAULT NULL`
     );
     await settings.metaData.clickReload();
-    await settings.metaData.verifyRow({index: 16, model: `Table1`, state: 'New column(newColName), Column removed(newCol)'});
+    await settings.metaData.verifyRow({
+      index: 16,
+      model: `Table1`,
+      state: "New column(newColName), Column removed(newCol)",
+    });
 
     //verify after sync
     await settings.metaData.sync();
-    await settings.metaData.verifyRow({index: 16, model: 'Table1', state: 'No change identified'});
+    await settings.metaData.verifyRow({
+      index: 16,
+      model: "Table1",
+      state: "No change identified",
+    });
 
     // Delete column
     // todo: Add for sqlite
-    if(!isSqlite(context)) {
+    if (!isSqlite(context)) {
       await dbExec(`ALTER TABLE ${projectPrefix}table1 DROP COLUMN newColName`);
       await settings.metaData.clickReload();
-      await settings.metaData.verifyRow({index: 16, model: `Table1`, state: 'Column removed(newColName)'});
+      await settings.metaData.verifyRow({
+        index: 16,
+        model: `Table1`,
+        state: "Column removed(newColName)",
+      });
 
       //verify after sync
       await settings.metaData.sync();
-      await settings.metaData.verifyRow({index: 16, model: 'Table1', state: 'No change identified'});
+      await settings.metaData.verifyRow({
+        index: 16,
+        model: "Table1",
+        state: "No change identified",
+      });
     }
 
     // Delete table
     await dbExec(`DROP TABLE ${projectPrefix}table1`);
     await dbExec(`DROP TABLE ${projectPrefix}table2`);
     await settings.metaData.clickReload();
-    await settings.metaData.verifyRow({index: 16, model: `${projectPrefix}table1`, state: "Table removed"});
+    await settings.metaData.verifyRow({
-    await settings.metaData.verifyRow({index: 17, model: `${projectPrefix}table2`, state: "Table removed"});
+      index: 16,
+      model: `${projectPrefix}table1`,
+      state: "Table removed",
+    });
+    await settings.metaData.verifyRow({
+      index: 17,
+      model: `${projectPrefix}table2`,
+      state: "Table removed",
+    });
 
     //verify after sync
     await settings.metaData.sync();
 
-    if(isSqlite(context)) {
+    if (isSqlite(context)) {
-      await settings.metaData.verifyRow({index: 16, model: 'CustomerList', state: 'No change identified'});
+      await settings.metaData.verifyRow({
-      await settings.metaData.verifyRow({index: 17, model: 'FilmList', state: 'No change identified'});
+        index: 16,
+        model: "CustomerList",
+        state: "No change identified",
+      });
+      await settings.metaData.verifyRow({
+        index: 17,
+        model: "FilmList",
+        state: "No change identified",
+      });
     } else {
-      await settings.metaData.verifyRow({index: 16, model: 'ActorInfo', state: 'No change identified'});
+      await settings.metaData.verifyRow({
-      await settings.metaData.verifyRow({index: 17, model: 'CustomerList', state: 'No change identified'});
+        index: 16,
+        model: "ActorInfo",
+        state: "No change identified",
+      });
+      await settings.metaData.verifyRow({
+        index: 17,
+        model: "CustomerList",
+        state: "No change identified",
+      });
     }
-
   });
 
-  test('Hide, filter, sort', async() => {
+  test("Hide, filter, sort", async () => {
-    await dbExec(`CREATE TABLE ${projectPrefix}table1 (id INT NOT NULL, col1 INT NULL, col2 INT NULL, col3 INT NULL, col4 INT NULL, PRIMARY KEY (id))`);
+    await dbExec(
-    await dbExec(`INSERT INTO ${projectPrefix}table1 (id, col1, col2, col3, col4) VALUES (1,1,1,1,1), (2,2,2,2,2), (3,3,3,3,3), (4,4,4,4,4), (5,5,5,5,5), (6,6,6,6,6), (7,7,7,7,7), (8,8,8,8,8), (9,9,9,9,9);`);
+      `CREATE TABLE ${projectPrefix}table1 (id INT NOT NULL, col1 INT NULL, col2 INT NULL, col3 INT NULL, col4 INT NULL, PRIMARY KEY (id))`
+    );
+    await dbExec(
+      `INSERT INTO ${projectPrefix}table1 (id, col1, col2, col3, col4) VALUES (1,1,1,1,1), (2,2,2,2,2), (3,3,3,3,3), (4,4,4,4,4), (5,5,5,5,5), (6,6,6,6,6), (7,7,7,7,7), (8,8,8,8,8), (9,9,9,9,9);`
+    );
 
     await dashboard.gotoSettings();
-    await settings.selectTab({title: 'Project Metadata'});
+    await settings.selectTab({ title: "Project Metadata" });
 
     await settings.metaData.clickReload();
     await settings.metaData.sync();
     await settings.close();
 
-    await dashboard.treeView.openTable({title: 'Table1'});
+    await dashboard.treeView.openTable({ title: "Table1" });
 
-    await dashboard.grid.toolbar.clickFields();
+    await dashboard.toolbar.clickFields();
-    await dashboard.grid.toolbar.fields.click({title: 'Col1'});
+    await dashboard.toolbar.fields.click({ title: "Col1" });
-    await dashboard.grid.toolbar.clickFields();
+    await dashboard.toolbar.clickFields();
 
-    await dashboard.grid.toolbar.sort.addSort({columnTitle: 'Col1', isAscending: false});
+    await dashboard.toolbar.sort.addSort({
-
+      columnTitle: "Col1",
-    await dashboard.grid.toolbar.filter.addNew({columnTitle: 'Col1', opType: '>=', value: '5'});
+      isAscending: false,
+    });
 
-    await dashboard.grid.verifyRowCount({count: 5});
+    await dashboard.toolbar.filter.addNew({
-  })
+      columnTitle: "Col1",
+      opType: ">=",
+      value: "5",
+    });
 
+    await dashboard.grid.verifyRowCount({ count: 5 });
+  });
 });

scripts/playwright/tests/toolbarOperations.spec.ts

@@ -1,9 +1,10 @@
 import { test } from "@playwright/test";
 import { DashboardPage } from "../pages/Dashboard";
 import setup from "../setup";
+import { ToolbarPage } from "../pages/Dashboard/Toolbar";
 
-test.describe.only("Toolbar operations (GRID)", () => {
+test.describe("Toolbar operations (GRID)", () => {
-  let dashboard: DashboardPage;
+  let dashboard: DashboardPage, toolbar: ToolbarPage;
   let context: any;
 
   async function validateFirstRow(value: string) {
@@ -17,6 +18,7 @@ test.describe.only("Toolbar operations (GRID)", () => {
   test.beforeEach(async ({ page }) => {
     context = await setup({ page });
     dashboard = new DashboardPage(page, context.project);
+    toolbar = dashboard.toolbar;
   });
 
   test("Hide, Sort, Filter", async () => {
@@ -24,7 +26,6 @@ test.describe.only("Toolbar operations (GRID)", () => {
     await dashboard.closeTab({ title: "Team & Auth" });
 
     await dashboard.treeView.openTable({ title: "Country" });
-    const toolbar = dashboard.grid.toolbar;
 
     await dashboard.grid.column.verify({
       title: "LastUpdate",

scripts/playwright/tests/viewGridLocked.spec.ts

@@ -16,23 +16,23 @@ test.describe("Grid view locked", () => {
     await dashboard.closeTab({ title: "Team & Auth" });
     await dashboard.treeView.openTable({ title: "Country" });
 
-    await dashboard.grid.toolbar.viewsMenu.verifyCollaborativeMode();
+    await dashboard.toolbar.viewsMenu.verifyCollaborativeMode();
 
     // enable view lock
-    await dashboard.grid.toolbar.viewsMenu.click({
+    await dashboard.toolbar.viewsMenu.click({
       menu: "Collaborative View",
       subMenu: "Locked View",
     });
 
     // verify view lock
-    await dashboard.grid.toolbar.viewsMenu.verifyLockMode();
+    await dashboard.toolbar.viewsMenu.verifyLockMode();
 
     // enable collaborative view
-    await dashboard.grid.toolbar.viewsMenu.click({
+    await dashboard.toolbar.viewsMenu.click({
       menu: "Locked View",
       subMenu: "Collaborative View",
     });
 
-    await dashboard.grid.toolbar.viewsMenu.verifyCollaborativeMode();
+    await dashboard.toolbar.viewsMenu.verifyCollaborativeMode();
   });
 });

scripts/playwright/tests/viewGridShare.spec.ts

@@ -31,14 +31,14 @@ test.describe("Shared view", () => {
     await dashboard.treeView.openTable({ title: "Address" });
 
     // hide column
-    await dashboard.grid.toolbar.fields.toggle({ title: "Address2" });
+    await dashboard.toolbar.fields.toggle({ title: "Address2" });
     // sort
-    await dashboard.grid.toolbar.sort.addSort({
+    await dashboard.toolbar.sort.addSort({
       columnTitle: "District",
       isAscending: false,
     });
     // filter
-    await dashboard.grid.toolbar.filter.addNew({
+    await dashboard.toolbar.filter.addNew({
       columnTitle: "Address",
       value: "Ab",
       opType: "is like",
@@ -47,8 +47,8 @@ test.describe("Shared view", () => {
     mainPageLink = page.url();
 
     // share with password disabled, download enabled
-    await dashboard.grid.toolbar.clickShareView();
+    await dashboard.toolbar.clickShareView();
-    sharedLink = await dashboard.grid.toolbar.shareView.getShareLink();
+    sharedLink = await dashboard.toolbar.shareView.getShareLink();
 
     /**
      * 2. Access shared view: verify
@@ -182,13 +182,13 @@ test.describe("Shared view", () => {
     await dashboard.treeView.openTable({ title: "Country" });
 
     // enable password & verify share link
-    await dashboard.grid.toolbar.clickShareView();
+    await dashboard.toolbar.clickShareView();
-    await dashboard.grid.toolbar.shareView.enablePassword("p@ssword");
+    await dashboard.toolbar.shareView.enablePassword("p@ssword");
     // disable download
-    await dashboard.grid.toolbar.shareView.toggleDownload();
+    await dashboard.toolbar.shareView.toggleDownload();
 
-    sharedLink = await dashboard.grid.toolbar.shareView.getShareLink();
+    sharedLink = await dashboard.toolbar.shareView.getShareLink();
-    await dashboard.grid.toolbar.shareView.close();
+    await dashboard.toolbar.shareView.close();
 
     // add new column, record after share view creation
     await dashboard.grid.column.create({