test: share base

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

packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue

@@ -136,7 +136,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col w-full">
+  <div class="flex flex-col w-full" data-pw="nc-share-base-sub-modal">
     <div class="flex flex-row items-center space-x-0.5 pl-2 h-[0.8rem]">
       <MdiOpenInNew />
 

scripts/playwright/pages/Dashboard/Settings/Teams.ts

@@ -24,6 +24,10 @@ export class TeamsPage extends BasePage {
       .locator(`[pw-data="nc-settings-subtab-Users Management"]`);
   }
 
+  getSharedBaseSubModal() {
+    return this.rootPage.locator(`[data-pw="nc-share-base-sub-modal"]`);
+  }
+
   async invite({ email, role }: { email: string; role: string }) {
     await this.inviteTeamBtn.click();
     await this.inviteTeamModal
@@ -41,7 +45,7 @@ export class TeamsPage extends BasePage {
   async closeInvite() {
     // two btn-icon-only in invite modal: close & copy url
     await this.inviteTeamModal
-      .locator(`button.ant-btn-icon-only`)
+      .locator(`button.ant-btn-icon-only:visible`)
       .first()
       .click();
   }
@@ -51,4 +55,66 @@ export class TeamsPage extends BasePage {
       .locator(`button:has-text("Invite More")`)
       .click();
   }
+
+  async toggleSharedBase({ toggle }: { toggle: boolean }) {
+    const toggleBtn = await this.getSharedBaseSubModal().locator(
+      `.nc-disable-shared-base`
+    );
+    const toggleBtnText = await toggleBtn.first().innerText();
+
+    const disabledBase = toggleBtnText.includes("Disable");
+
+    if (disabledBase) {
+      if (toggle) {
+        // if share base was disabled && request was to enable
+        await toggleBtn.click();
+        const modal = await this.rootPage.locator(
+          `.nc-dropdown-shared-base-toggle`
+        );
+        await modal.locator(`.ant-dropdown-menu-title-content`).click();
+      }
+    } else {
+      if (!toggle) {
+        // if share base was enabled && request was to disable
+        await toggleBtn.click();
+        const modal = await this.rootPage.locator(
+          `.nc-dropdown-shared-base-toggle`
+        );
+        await modal.locator(`.ant-dropdown-menu-title-content`).click();
+      }
+    }
+  }
+
+  async getSharedBaseUrl() {
+    const url = await this.getSharedBaseSubModal()
+      .locator(`.nc-url:visible`)
+      .innerText();
+    return url;
+  }
+
+  async sharedBaseActions({ action }: { action: string }) {
+    let actionMenu = ["reload", "copy url", "open tab", "copy embed code"];
+    let index = actionMenu.indexOf(action);
+
+    await this.getSharedBaseSubModal()
+      .locator(`button.ant-btn-icon-only`)
+      .nth(index)
+      .click();
+  }
+
+  async sharedBaseRole({ role }: { role: string }) {
+    // editor | viewer
+    // await this.getSharedBaseSubModal()
+    //   .locator(`.nc-shared-base-role`)
+    //   .waitFor();
+    await this.getSharedBaseSubModal()
+      .locator(`.nc-shared-base-role:visible`)
+      .click();
+    const userRoleModal = await this.rootPage.locator(
+      `.nc-dropdown-share-base-role:visible`
+    );
+    await userRoleModal
+      .locator(`.ant-select-item-option-content:has-text("${role}"):visible`)
+      .click();
+  }
 }

scripts/playwright/pages/Dashboard/TreeView.ts

@@ -6,12 +6,14 @@ export class TreeViewPage extends BasePage {
   readonly dashboard: DashboardPage;
   readonly project: any;
   readonly quickImportButton: Locator;
+  readonly inviteTeamButton: Locator;
 
   constructor(dashboard: DashboardPage, project: any) {
     super(dashboard.rootPage);
     this.dashboard = dashboard;
     this.project = project;
     this.quickImportButton = dashboard.get().locator(".nc-import-menu");
+    this.inviteTeamButton = dashboard.get().locator(".nc-share-base");
   }
 
   get() {
@@ -24,7 +26,13 @@ export class TreeViewPage extends BasePage {
 
   // assumption: first view rendered is always GRID
   //
-  async openTable({ title }: { title: string }) {
+  async openTable({
+    title,
+    mode = "standard",
+  }: {
+    title: string;
+    mode?: string;
+  }) {
     if ((await this.get().locator(".active.nc-project-tree-tbl").count()) > 0) {
       if (
         (await this.get()
@@ -42,7 +50,7 @@ export class TreeViewPage extends BasePage {
       requestUrlPathToMatch: `/api/v1/db/meta/tables/`,
       responseJsonMatcher: (json) => json.title === title,
     });
-    await this.dashboard.waitForTabRender({ title });
+    await this.dashboard.waitForTabRender({ title, mode });
   }
 
   async createTable({ title }: { title: string }) {

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

@@ -139,7 +139,7 @@ export class ToolbarPage extends BasePage {
     await this.get().locator(`.nc-kanban-add-edit-stack-menu-btn`).click();
   }
 
-  async validateViewsMenu(param: { role: string }) {
+  async validateViewsMenu(param: { role: string; mode?: string }) {
     let menuItems = {
       creator: [
         "Download",
@@ -154,6 +154,15 @@ export class ToolbarPage extends BasePage {
       viewer: ["Download as CSV", "Download as XLSX"],
     };
 
+    if (param.mode === "shareBase") {
+      menuItems = {
+        creator: [],
+        editor: ["Download", "Upload", "ERD View"],
+        commenter: [],
+        viewer: ["Download as CSV", "Download as XLSX"],
+      };
+    }
+
     let vMenu = await this.rootPage.locator(
       ".nc-dropdown-actions-menu:visible"
     );
@@ -163,10 +172,11 @@ export class ToolbarPage extends BasePage {
     }
   }
 
-  async validateRoleAccess(param: { role: string }) {
+  async validateRoleAccess(param: { role: string; mode?: string }) {
     await this.clickActions();
     await this.validateViewsMenu({
       role: param.role,
+      mode: param.mode,
     });
 
     let menuItems = {

scripts/playwright/pages/Dashboard/index.ts

@@ -85,7 +85,13 @@ export class DashboardPage extends BasePage {
     await this.rootPage.locator('[data-cy="nc-noco-brand-icon"]').click();
   }
 
-  async waitForTabRender({ title }: { title: string }) {
+  async waitForTabRender({
+    title,
+    mode = "standard",
+  }: {
+    title: string;
+    mode?: string;
+  }) {
     await this.get().locator('[pw-data="grid-id-column"]').waitFor();
 
     await this.tabBar
@@ -107,9 +113,11 @@ export class DashboardPage extends BasePage {
       .locator('[pw-data="grid-load-spinner"]')
       .waitFor({ state: "hidden" });
 
-    await expect(this.rootPage).toHaveURL(
-      `/#/nc/${this.project.id}/table/${title}`
-    );
+    if (mode === "standard") {
+      await expect(this.rootPage).toHaveURL(
+        `/#/nc/${this.project.id}/table/${title}`
+      );
+    }
   }
 
   // Project page language menu
@@ -215,7 +223,7 @@ export class DashboardPage extends BasePage {
     await this.rootPage
       .locator('div.nc-project-menu-item:has-text("Sign Out"):visible')
       .click();
-    await this.rootPage.locator('[data-cy="nc-form-signin"]').waitFor();
+    await this.rootPage.locator('[data-cy="nc-form-signin"]:visible').waitFor();
   }
 
   async signUp({ email, password }: { email: string; password: string }) {
@@ -269,7 +277,7 @@ export class DashboardPage extends BasePage {
     ).toBe(0);
   }
 
-  async validateProjectMenu(param: { role: string }) {
+  async validateProjectMenu(param: { role: string; mode?: string }) {
     await this.rootPage.locator('[pw-data="nc-project-menu"]').click();
     let pMenu = this.rootPage.locator(`.nc-dropdown-project-menu:visible`);
 
@@ -301,6 +309,15 @@ export class DashboardPage extends BasePage {
       viewer: ["Copy Project Info", "Copy Auth Token", "Language", "Account"],
     };
 
+    if (param?.mode === "shareBase") {
+      menuItems = {
+        creator: [],
+        commenter: [],
+        editor: ["Language"],
+        viewer: ["Language"],
+      };
+    }
+
     // common items
 
     for (let item of menuItems[param.role]) {

scripts/playwright/pages/LoginPage/index.ts

@@ -3,13 +3,12 @@ import { expect, Page } from "@playwright/test";
 import BasePage from "../Base";
 
 export class LoginPage extends BasePage {
-
   constructor(rootPage: Page) {
     super(rootPage);
   }
 
   goto() {
-    return this.rootPage.goto('/#/signin');
+    return this.rootPage.goto("/#/signin");
   }
 
   get() {
@@ -17,17 +16,25 @@ export class LoginPage extends BasePage {
   }
 
   async fillEmail(email: string) {
+    await this.get().locator(`[pw-data="nc-form-signin__email"]`).waitFor();
     await this.get().locator(`[pw-data="nc-form-signin__email"]`).fill(email);
   }
 
   async fillPassword(password: string) {
-    await this.get().locator(`[pw-data="nc-form-signin__password"]`).fill(password);
+    await this.get()
+      .locator(`[pw-data="nc-form-signin__password"]`)
+      .fill(password);
   }
 
   async submit() {
     await this.get().locator(`[pw-data="nc-form-signin__submit"]`).click();
-
-    await expect(this.rootPage).toHaveURL('http://localhost:3000/#/');
+    await expect(this.rootPage).toHaveURL("http://localhost:3000/#/");
   }
 
+  async signIn({ email, password }: { email: string; password: string }) {
+    await this.goto();
+    await this.fillEmail(email);
+    await this.fillPassword(password);
+    await this.submit();
+  }
 }

scripts/playwright/tests/baseShare.spec.ts

@@ -0,0 +1,92 @@
+import { test } from "@playwright/test";
+import { DashboardPage } from "../pages/Dashboard";
+import setup from "../setup";
+import { ToolbarPage } from "../pages/Dashboard/common/Toolbar";
+import { LoginPage } from "../pages/LoginPage";
+
+test.describe("Shared base", () => {
+  let dashboard: DashboardPage;
+  let toolbar: ToolbarPage;
+  let context: any;
+  let loginPage: LoginPage;
+
+  async function roleTest(role: string) {
+    console.log("project menu");
+    await dashboard.validateProjectMenu({
+      role: role.toLowerCase(),
+      mode: "shareBase",
+    });
+
+    await dashboard.treeView.openTable({ title: "Country", mode: "shareBase" });
+
+    console.log("shareBase: view sidebar");
+    await dashboard.viewSidebar.validateRoleAccess({
+      role: role.toLowerCase(),
+    });
+
+    console.log("shareBase: toolbar");
+    await toolbar.validateRoleAccess({
+      role: role.toLowerCase(),
+      mode: "shareBase",
+    });
+
+    console.log("shareBase: tree view");
+    await dashboard.treeView.validateRoleAccess({
+      role: role.toLowerCase(),
+    });
+
+    console.log("shareBase: grid");
+    await dashboard.grid.validateRoleAccess({
+      role: role.toLowerCase(),
+    });
+
+    await dashboard.grid.openExpandedRow({ index: 0 });
+    console.log("shareBase: expanded row");
+    await dashboard.expandedForm.validateRoleAccess({
+      role: role.toLowerCase(),
+    });
+  }
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+    toolbar = dashboard.grid.toolbar;
+    loginPage = new LoginPage(page);
+  });
+
+  test("#1", async () => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: "Team & Auth" });
+
+    await dashboard.treeView.inviteTeamButton.click();
+    await dashboard.settings.teams.toggleSharedBase({ toggle: true });
+    await dashboard.settings.teams.sharedBaseRole({ role: "editor" });
+    let url = await dashboard.settings.teams.getSharedBaseUrl();
+    await dashboard.settings.teams.closeInvite();
+
+    // access shared base link
+    await dashboard.signOut();
+    await dashboard.rootPage.goto(url);
+
+    await roleTest("editor");
+
+    await loginPage.signIn({
+      email: "user@nocodb.com",
+      password: "Password123.",
+    });
+    await dashboard.openProject({ title: "externalREST0" });
+    await dashboard.closeTab({ title: "Team & Auth" });
+
+    await dashboard.treeView.inviteTeamButton.click();
+    await dashboard.settings.teams.toggleSharedBase({ toggle: true });
+    await dashboard.settings.teams.sharedBaseRole({ role: "viewer" });
+    url = await dashboard.settings.teams.getSharedBaseUrl();
+    await dashboard.settings.teams.closeInvite();
+
+    // access shared base link
+    await dashboard.signOut();
+    await dashboard.rootPage.goto(url);
+
+    await roleTest("viewer");
+  });
+});