Merge pull request #4386 from nocodb/fix/copy-record-url

fix(nc-gui): encode copy record url

packages/nc-gui/components/smartsheet/expanded-form/Header.vue

@@ -45,9 +45,11 @@ const { copy } = useClipboard()
 
 const copyRecordUrl = () => {
   copy(
-    `${dashboardUrl?.value}#/${route.params.projectType}/${route.params.projectId}/${route.params.type}/${meta.value?.title}${
-      props.view ? `/${props.view.title}` : ''
-    }?rowId=${primaryKey.value}`,
+    encodeURI(
+      `${dashboardUrl?.value}#/${route.params.projectType}/${route.params.projectId}/${route.params.type}/${meta.value?.title}${
+        props.view ? `/${props.view.title}` : ''
+      }?rowId=${primaryKey.value}`,
+    ),
   )
   message.success('Copied to clipboard')
 }

tests/playwright/pages/Base.ts

@@ -78,4 +78,8 @@ export default abstract class BasePage {
     });
     return data as any;
   }
+
+  async getClipboardText() {
+    return await this.rootPage.evaluate(() => navigator.clipboard.readText());
+  }
 }

tests/playwright/pages/Dashboard/ExpandedForm/index.ts

@@ -20,6 +20,12 @@ export class ExpandedFormPage extends BasePage {
     return this.dashboard.get().locator(`.nc-drawer-expanded-form`);
   }
 
+  async getShareRowUrl() {
+    await this.copyUrlButton.click();
+    await this.verifyToast({ message: 'Copied to clipboard' });
+    return await this.getClipboardText();
+  }
+
   async gotoUsingUrlAndRowId({ rowId }: { rowId: string }) {
     const url = await this.dashboard.rootPage.url();
     const expandedFormUrl = '/' + url.split('/').slice(3).join('/').split('?')[0] + `?rowId=${rowId}`;
@@ -80,6 +86,7 @@ export class ExpandedFormPage extends BasePage {
 
   async close() {
     await this.rootPage.keyboard.press('Escape');
+    await this.get().waitFor({ state: 'hidden' });
   }
 
   async cancel() {

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

@@ -80,7 +80,7 @@ export class GridPage extends BasePage {
         uiAction: clickOnColumnHeaderToSave,
         requestUrlPathToMatch: 'api/v1/db/data/noco',
         httpMethodsToMatch: ['POST'],
-        responseJsonMatcher: resJson => resJson?.[columnHeader] === value,
+        responseJsonMatcher: resJson => resJson?.[columnHeader] === rowValue,
       });
     } else {
       await this.rootPage.waitForTimeout(300);

tests/playwright/playwright.config.ts

@@ -48,6 +48,10 @@ const config: PlaywrightTestConfig = {
       name: 'chromium',
       use: {
         ...devices['Desktop Chrome'],
+        contextOptions: {
+          // chromium-specific permissions
+          permissions: ['clipboard-read', 'clipboard-write'],
+        },
       },
     },
 

tests/playwright/tests/expandedFormUrl.spec.ts

@@ -13,7 +13,40 @@ test.describe('Expanded form URL', () => {
     dashboard = new DashboardPage(page, context.project);
   });
 
-  async function viewTest(viewType: string) {
+  async function viewTestTestTable(viewType: string) {
+    await dashboard.treeView.createTable({
+      title: 'Test Table',
+    });
+    await dashboard.grid.addNewRow({ index: 0 });
+
+    let viewObj: GridPage | GalleryPage = dashboard.grid;
+    if (viewType === 'grid') {
+      viewObj = dashboard.grid;
+    } else if (viewType === 'gallery') {
+      viewObj = dashboard.gallery;
+    }
+
+    if (viewType === 'grid') {
+      await dashboard.viewSidebar.createGridView({ title: 'Test Expand' });
+    } else if (viewType === 'gallery') {
+      await dashboard.viewSidebar.createGalleryView({
+        title: 'Test Expand',
+      });
+    }
+
+    // expand row & verify URL
+    await viewObj.openExpandedRow({ index: 0 });
+    const url = await dashboard.expandedForm.getShareRowUrl();
+    await dashboard.expandedForm.close();
+    await dashboard.rootPage.goto(url);
+
+    await dashboard.expandedForm.verify({
+      header: 'Test Table: Row 0',
+      url,
+    });
+  }
+
+  async function viewTestSakila(viewType: string) {
     // close 'Team & Auth' tab
     await dashboard.closeTab({ title: 'Team & Auth' });
     await dashboard.treeView.openTable({ title: 'Country' });
@@ -90,10 +123,12 @@ test.describe('Expanded form URL', () => {
   }
 
   test('Grid', async () => {
-    await viewTest('grid');
+    await viewTestSakila('grid');
+    await viewTestTestTable('grid');
   });
 
   test('Gallery', async () => {
-    await viewTest('gallery');
+    await viewTestSakila('gallery');
+    await viewTestTestTable('gallery');
   });
 });