Merge branch 'fix/frm' of https://github.com/nocodb/nocodb into fix/frm

.github/workflows/ci-cd.yml

@@ -130,7 +130,7 @@ jobs:
       uses: ./.github/workflows/playwright-test-workflow.yml
       with:
         db: mysql
-        shard: 4        
+        shard: 4       
     playwright-sqlite-1:
       needs: pre-build-for-playwright
       if: ${{ github.event_name == 'push' || contains(github.event.pull_request.labels.*.name, 'trigger-CI') || !github.event.pull_request.draft }}
@@ -151,14 +151,14 @@ jobs:
       uses: ./.github/workflows/playwright-test-workflow.yml
       with:
         db: sqlite
-        shard: 3 
+        shard: 3
     playwright-sqlite-4:
       needs: pre-build-for-playwright
       if: ${{ github.event_name == 'push' || contains(github.event.pull_request.labels.*.name, 'trigger-CI') || !github.event.pull_request.draft }}
       uses: ./.github/workflows/playwright-test-workflow.yml
       with:
         db: sqlite
-        shard: 4                
+        shard: 4           
     playwright-pg-shard-1:
       needs: pre-build-for-playwright
       if: ${{ github.event_name == 'push' || contains(github.event.pull_request.labels.*.name, 'trigger-CI') || !github.event.pull_request.draft }}
@@ -179,11 +179,11 @@ jobs:
       uses: ./.github/workflows/playwright-test-workflow.yml
       with:
         db: pg
-        shard: 3   
+        shard: 3
     playwright-pg-shard-4:
       needs: pre-build-for-playwright
       if: ${{ github.event_name == 'push' || contains(github.event.pull_request.labels.*.name, 'trigger-CI') || !github.event.pull_request.draft }}
       uses: ./.github/workflows/playwright-test-workflow.yml
       with:
         db: pg
-        shard: 4           
+        shard: 4       

packages/nc-gui/components/virtual-cell/components/ListItem.vue

@@ -1,10 +1,23 @@
 <script lang="ts" setup>
 import { isVirtualCol } from 'nocodb-sdk'
-import { IsFormInj, isImage, useAttachment } from '#imports'
+import {
+  type ComputedRef,
+  IsExpandedFormOpenInj,
+  IsFormInj,
+  IsPublicInj,
+  RowHeightInj,
+  computed,
+  inject,
+  isImage,
+  provide,
+  ref,
+  useAttachment,
+  useVModel,
+} from '#imports'
 import MaximizeIcon from '~icons/nc-icons/maximize'
 import LinkIcon from '~icons/nc-icons/link'
 
-const { row, fields, relatedTableDisplayValueProp, isLoading, isLinked, attachment } = defineProps<{
+const props = defineProps<{
   row: any
   fields: any[]
   attachment: any
@@ -12,13 +25,16 @@ const { row, fields, relatedTableDisplayValueProp, isLoading, isLinked, attachme
   isLoading: boolean
   isLinked: boolean
 }>()
+
 defineEmits(['expand'])
 
 provide(IsExpandedFormOpenInj, ref(true))
 
+provide(RowHeightInj, ref(1 as const))
+
 const isForm = inject(IsFormInj, ref(false))
 
-provide(RowHeightInj, ref(1 as const))
+const row = useVModel(props, 'row')
 
 const isPublic = inject(IsPublicInj, ref(false))
 
@@ -31,10 +47,12 @@ interface Attachment {
   mimetype: string
 }
 
-const attachments: Attachment[] = computed(() => {
+const attachments: ComputedRef<Attachment[]> = computed(() => {
   try {
-    if (attachment && row[attachment.title]) {
+    if (props.attachment && row.value[props.attachment.title]) {
-      return typeof row[attachment.title] === 'string' ? JSON.parse(row[attachment.title]) : row[attachment.title]
+      return typeof row.value[props.attachment.title] === 'string'
+        ? JSON.parse(row.value[props.attachment.title])
+        : row.value[props.attachment.title]
     }
     return []
   } catch (e) {
@@ -57,12 +75,12 @@ const attachments: Attachment[] = computed(() => {
     <div class="flex flex-row items-center justify-start w-full">
       <a-carousel v-if="attachment && attachments && attachments.length" autoplay class="!w-24 !h-24">
         <template #customPaging> </template>
-        <template v-for="(attachmen, index) in attachments">
+        <template v-for="(attachmentObj, index) in attachments">
           <LazyCellAttachmentImage
-            v-if="isImage(attachmen.title, attachmen.mimetype ?? attachmen.type)"
+            v-if="isImage(attachmentObj.title, attachmentObj.mimetype ?? attachmentObj.type)"
-            :key="`carousel-${attachmen.title}-${index}`"
+            :key="`carousel-${attachmentObj.title}-${index}`"
             class="!h-24 !w-24 object-cover !rounded-l-xl"
-            :srcs="getPossibleAttachmentSrc(attachmen)"
+            :srcs="getPossibleAttachmentSrc(attachmentObj)"
           />
         </template>
       </a-carousel>

tests/playwright/package.json

@@ -30,10 +30,10 @@
     "test:debug:watch": "pnpm dlx nodemon -e ts -w ./ -x \"pnpm run test:debug\"",
     "test:debug:quick:sqlite": "./startPlayWrightServer.sh; PW_QUICK_TEST=1 PW_TEST_REUSE_CONTEXT=1 PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:31000/ PWDEBUG=console pnpm exec playwright test -c playwright.config.ts --headed --project=chromium --retries 0 --timeout 5 --workers 1 --max-failures=1",
     "ci:test": "pnpm exec playwright test --workers=2",
-    "ci:test:shard:1": "pnpm exec playwright test --workers=2 --shard=1/4",
+    "ci:test:shard:1": "pnpm exec playwright test --shard=1/4",
-    "ci:test:shard:2": "pnpm exec playwright test --workers=2 --shard=2/4",
+    "ci:test:shard:2": "pnpm exec playwright test --shard=2/4",
-    "ci:test:shard:3": "pnpm exec playwright test --workers=2 --shard=3/4",
+    "ci:test:shard:3": "pnpm exec playwright test --shard=3/4",
-    "ci:test:shard:4": "pnpm exec playwright test --workers=2 --shard=4/4",
+    "ci:test:shard:4": "pnpm exec playwright test --shard=4/4",
     "ci:test:flaky:repeat": "pnpm exec playwright test --workers=4 --grep @flaky --repeat-each=3",
     "ci:test:mysql": "E2E_DB_TYPE=mysql pnpm exec playwright test --workers=2",
     "ci:test:pg": "E2E_DB_TYPE=pg pnpm exec playwright test --workers=2",

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

@@ -105,6 +105,9 @@ export class FormPage extends BasePage {
   }
 
   async reorderFields({ sourceField, destinationField }: { sourceField: string; destinationField: string }) {
+    // TODO: Otherwise form input boxes are not visible sometimes
+    await this.rootPage.waitForTimeout(650);
+
     await expect(this.get().locator(`.nc-form-drag-${sourceField}`)).toBeVisible();
     await expect(this.get().locator(`.nc-form-drag-${destinationField}`)).toBeVisible();
     const src = this.get().locator(`.nc-form-drag-${sourceField.replace(' ', '')}`);
@@ -113,6 +116,9 @@ export class FormPage extends BasePage {
   }
 
   async removeField({ field, mode }: { mode: string; field: string }) {
+    // TODO: Otherwise form input boxes are not visible sometimes
+    await this.rootPage.waitForTimeout(650);
+
     if (mode === 'dragDrop') {
       const src = this.get().locator(`.nc-form-drag-${field.replace(' ', '')}`);
       const dst = this.get().locator(`[data-testid="nc-drag-n-drop-to-hide"]`);
@@ -124,6 +130,9 @@ export class FormPage extends BasePage {
   }
 
   async addField({ field, mode }: { mode: string; field: string }) {
+    // TODO: Otherwise form input boxes are not visible sometimes
+    await this.rootPage.waitForTimeout(650);
+
     if (mode === 'dragDrop') {
       const src = this.get().locator(`[data-testid="nc-form-hidden-column-${field}"] > div.ant-card-body`);
       const dst = this.get().locator(`[data-testid="nc-form-input-Country"]`);
@@ -138,6 +147,9 @@ export class FormPage extends BasePage {
   }
 
   async removeAllFields() {
+    // TODO: Otherwise form input boxes are not visible sometimes
+    await this.rootPage.waitForTimeout(1000);
+
     await this.removeAllButton.click();
   }
 

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

@@ -13,13 +13,13 @@ export class RowPageObject extends BasePage {
     return this.rootPage.locator('tr.nc-grid-row');
   }
 
-  async getRecord(index: number) {
+  getRecord(index: number) {
     return this.get().nth(index);
   }
 
   // style="height: 3rem;"
   async getRecordHeight(index: number) {
-    const record = await this.getRecord(index);
+    const record = this.getRecord(index);
     const style = await record.getAttribute('style');
     return style.split(':')[1].split(';')[0].trim();
   }

tests/playwright/playwright.config.ts

@@ -10,6 +10,14 @@ require('dotenv').config();
  * See https://playwright.dev/docs/test-configuration.
  */
 
+let workers = 4;
+
+if (process.env.CI) {
+  if (process.env.E2E_DB_TYPE === 'sqlite') workers = 1;
+  if (process.env.E2E_DB_TYPE === 'mysql') workers = 3;
+  if (process.env.E2E_DB_TYPE === 'pg') workers = 3;
+}
+
 export default defineConfig({
   testDir: process.env.PW_QUICK_TEST ? './quickTests' : './tests',
   /* Maximum time one test can run for. */
@@ -29,8 +37,7 @@ export default defineConfig({
   /* Retry on CI only */
   retries: process.env.CI ? 3 : 0,
   /* Opt out of parallel tests on CI. */
-  // workers: process.env.CI ? 2 : 4,
+  workers: workers,
-  workers: process.env.CI ? 2 : 4,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

tests/playwright/tests/db/features/undo-redo.spec.ts

@@ -294,9 +294,7 @@ test.describe('Undo Redo', () => {
 
   test('Row height', async ({ page }) => {
     async function verifyRowHeight({ height }: { height: string }) {
-      await dashboard.grid.rowPage.getRecordHeight(0).then(readValue => {
+      await expect(dashboard.grid.rowPage.getRecord(0)).toHaveAttribute('style', `height: ${height};`);
-        expect(readValue).toBe(height);
-      });
     }
 
     // close 'Team & Auth' tab