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

1 year ago · d2e5b740b9
7 changed files with 61 additions and 26 deletions
--- a/.github/workflows/ci-cd.yml
+++ b/.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       
--- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue
+++ b/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]) {
-      return typeof row[attachment.title] === 'string' ? JSON.parse(row[attachment.title]) : row[attachment.title]
+    if (props.attachment && row.value[props.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)"
-            :key="`carousel-${attachmen.title}-${index}`"
+            v-if="isImage(attachmentObj.title, attachmentObj.mimetype ?? attachmentObj.type)"
+            :key="`carousel-${attachmentObj.title}-${index}`"
            class="!h-24 !w-24 object-cover !rounded-l-xl"
-            :srcs="getPossibleAttachmentSrc(attachmen)"
+            :srcs="getPossibleAttachmentSrc(attachmentObj)"
          />
        </template>
      </a-carousel>
--- a/tests/playwright/package.json
+++ b/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:2": "pnpm exec playwright test --workers=2 --shard=2/4",
-    "ci:test:shard:3": "pnpm exec playwright test --workers=2 --shard=3/4",
-    "ci:test:shard:4": "pnpm exec playwright test --workers=2 --shard=4/4",
+    "ci:test:shard:1": "pnpm exec playwright test --shard=1/4",
+    "ci:test:shard:2": "pnpm exec playwright test --shard=2/4",
+    "ci:test:shard:3": "pnpm exec playwright test --shard=3/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",
--- a/tests/playwright/pages/Dashboard/Form/index.ts
+++ b/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();
  }

--- a/tests/playwright/pages/Dashboard/Grid/Row.ts
+++ b/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();
  }
--- a/tests/playwright/playwright.config.ts
+++ b/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: process.env.CI ? 2 : 4,
+  workers: workers,
  /* 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. */
--- a/tests/playwright/tests/db/features/undo-redo.spec.ts
+++ b/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 => {
-        expect(readValue).toBe(height);
-      });
+      await expect(dashboard.grid.rowPage.getRecord(0)).toHaveAttribute('style', `height: ${height};`);
    }

    // close 'Team & Auth' tab