Merge pull request #5697 from nocodb/fix/ltar-shared-form

fix(nc-gui): incorrect shared form logic

packages/nc-gui/composables/useSharedFormViewStore.ts

@@ -101,18 +101,10 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         {} as Record<string, FormColumnType>,
       )
 
-      let order = 1
-
-      columns.value = meta?.value?.columns
-        ?.map((c: Record<string, any>) => ({
-          ...c,
-          fk_column_id: c.id,
-          fk_view_id: viewMeta.id,
-          ...(fieldById[c.id] ? fieldById[c.id] : {}),
-          order: (fieldById[c.id] && fieldById[c.id].order) || order++,
-          id: fieldById[c.id] && fieldById[c.id].id,
-        }))
-        .sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order) as Record<string, any>[]
+      columns.value = viewMeta.model?.columns?.map((c) => ({
+        ...c,
+        description: fieldById[c.id].description,
+      }))
 
       const _sharedViewMeta = (viewMeta as any).meta
       sharedViewMeta.value = isString(_sharedViewMeta) ? JSON.parse(_sharedViewMeta) : _sharedViewMeta

tests/playwright/pages/SharedForm/index.ts

@@ -29,4 +29,39 @@ export class SharedFormPage extends BasePage {
       })
     ).toBeVisible();
   }
+
+  async clickLinkToChildList() {
+    await this.get().locator('button[data-testid="nc-child-list-button-link-to"]').click();
+  }
+
+  async verifyChildList(cardTitle?: string[]) {
+    await this.get().locator('.nc-modal-link-record').waitFor();
+    const linkRecord = await this.get();
+
+    // DOM element validation
+    //    title: Link Record
+    //    button: Add new record
+    //    icon: reload
+    await expect(this.get().locator(`.ant-modal-title`)).toHaveText(`Link record`);
+
+    // add new record option is not available for shared form
+    await expect(await linkRecord.locator(`button:has-text("Add new record")`).isVisible()).toBeFalsy();
+
+    await expect(await linkRecord.locator(`.nc-reload`).isVisible()).toBeTruthy();
+    // placeholder: Filter query
+    await expect(await linkRecord.locator(`[placeholder="Filter query"]`).isVisible()).toBeTruthy();
+
+    {
+      const childList = linkRecord.locator(`.ant-card`);
+      const childCards = await childList.count();
+      await expect(childCards).toEqual(cardTitle.length);
+      for (let i = 0; i < cardTitle.length; i++) {
+        await expect(await childList.nth(i).textContent()).toContain(cardTitle[i]);
+      }
+    }
+  }
+
+  async selectChildList(cardTitle: string) {
+    await this.get().locator(`.ant-card:has-text("${cardTitle}"):visible`).click();
+  }
 }

tests/playwright/tests/db/viewForm.spec.ts

@@ -5,6 +5,8 @@ import { FormPage } from '../../pages/Dashboard/Form';
 import { SharedFormPage } from '../../pages/SharedForm';
 import { AccountPage } from '../../pages/Account';
 import { AccountAppStorePage } from '../../pages/Account/AppStore';
+import { Api, UITypes } from 'nocodb-sdk';
+let api: Api<any>;
 
 // todo: Move most of the ui actions to page object and await on the api response
 test.describe('Form view', () => {
@@ -238,3 +240,127 @@ test.describe('Form view', () => {
     await sharedForm.verifySuccessMessage();
   });
 });
+
+test.describe('Form view with LTAR', () => {
+  let dashboard: DashboardPage;
+  let form: FormPage;
+  let context: any;
+
+  let cityTable: any, countryTable: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page, isEmptyProject: true });
+    dashboard = new DashboardPage(page, context.project);
+    form = dashboard.form;
+
+    api = new Api({
+      baseURL: `http://localhost:8080/`,
+      headers: {
+        'xc-auth': context.token,
+      },
+    });
+
+    const cityColumns = [
+      {
+        column_name: 'Id',
+        title: 'Id',
+        uidt: UITypes.ID,
+      },
+      {
+        column_name: 'City',
+        title: 'City',
+        uidt: UITypes.SingleLineText,
+        pv: true,
+      },
+    ];
+    const countryColumns = [
+      {
+        column_name: 'Id',
+        title: 'Id',
+        uidt: UITypes.ID,
+      },
+      {
+        column_name: 'Country',
+        title: 'Country',
+        uidt: UITypes.SingleLineText,
+        pv: true,
+      },
+    ];
+
+    try {
+      const project = await api.project.read(context.project.id);
+      cityTable = await api.base.tableCreate(context.project.id, project.bases?.[0].id, {
+        table_name: 'City',
+        title: 'City',
+        columns: cityColumns,
+      });
+      countryTable = await api.base.tableCreate(context.project.id, project.bases?.[0].id, {
+        table_name: 'Country',
+        title: 'Country',
+        columns: countryColumns,
+      });
+
+      const cityRowAttributes = [{ City: 'Atlanta' }, { City: 'Pune' }, { City: 'London' }, { City: 'Sydney' }];
+      await api.dbTableRow.bulkCreate('noco', context.project.id, cityTable.id, cityRowAttributes);
+
+      const countryRowAttributes = [{ Country: 'India' }, { Country: 'UK' }, { Country: 'Australia' }];
+      await api.dbTableRow.bulkCreate('noco', context.project.id, countryTable.id, countryRowAttributes);
+
+      // create LTAR Country has-many City
+      await api.dbTableColumn.create(countryTable.id, {
+        column_name: 'CityList',
+        title: 'CityList',
+        uidt: UITypes.LinkToAnotherRecord,
+        parentId: countryTable.id,
+        childId: cityTable.id,
+        type: 'hm',
+      });
+
+      // await api.dbTableRow.nestedAdd('noco', context.project.id, countryTable.id, '1', 'hm', 'CityList', '1');
+    } catch (e) {
+      console.log(e);
+    }
+
+    // reload page after api calls
+    await page.reload();
+  });
+
+  test('Form view with LTAR', async () => {
+    await dashboard.treeView.openTable({ title: 'Country' });
+
+    const url = dashboard.rootPage.url();
+
+    await dashboard.viewSidebar.createFormView({ title: 'NewForm' });
+    await dashboard.form.toolbar.clickShareView();
+    const formLink = await dashboard.form.toolbar.shareView.getShareLink();
+
+    await dashboard.rootPage.goto(formLink);
+
+    const sharedForm = new SharedFormPage(dashboard.rootPage);
+    await sharedForm.cell.fillText({
+      columnHeader: 'Country',
+      text: 'USA',
+    });
+    await sharedForm.clickLinkToChildList();
+    await sharedForm.verifyChildList(['Atlanta', 'Pune', 'London', 'Sydney']);
+    await sharedForm.selectChildList('Atlanta');
+
+    await sharedForm.submit();
+    await sharedForm.verifySuccessMessage();
+
+    await dashboard.rootPage.goto(url);
+    await dashboard.viewSidebar.openView({ title: 'Country' });
+
+    await dashboard.grid.cell.verify({
+      index: 3,
+      columnHeader: 'Country',
+      value: 'USA',
+    });
+    await dashboard.grid.cell.verifyVirtualCell({
+      index: 3,
+      columnHeader: 'CityList',
+      count: 1,
+      value: ['Atlanta'],
+    });
+  });
+});