Merge pull request #5977 from nocodb/fix/5968-form-view-single-select-behaviour

fix: form view single/multi select behaviour

packages/nc-gui/components/cell/MultiSelect.vue

@@ -48,11 +48,11 @@ const readOnly = inject(ReadonlyInj)!
 
 const isEditable = inject(EditModeInj, ref(false))
 
-const _active = inject(ActiveCellInj, ref(false))
+const activeCell = inject(ActiveCellInj, ref(false))
 
 // use both ActiveCellInj or EditModeInj to determine the active state
 // since active will be false in case of form view
-const active = computed(() => _active.value || isEditable.value)
+const active = computed(() => activeCell.value || isEditable.value)
 
 const isPublic = inject(IsPublicInj, ref(false))
 
@@ -180,7 +180,7 @@ watch(isOpen, (n, _o) => {
   }
 })
 
-useSelectedCellKeyupListener(active, (e) => {
+useSelectedCellKeyupListener(activeCell, (e) => {
   switch (e.key) {
     case 'Escape':
       isOpen.value = false

packages/nc-gui/components/cell/SingleSelect.vue

@@ -42,11 +42,11 @@ const readOnly = inject(ReadonlyInj)!
 
 const isEditable = inject(EditModeInj, ref(false))
 
-const _active = inject(ActiveCellInj, ref(false))
+const activeCell = inject(ActiveCellInj, ref(false))
 
 // use both ActiveCellInj or EditModeInj to determine the active state
 // since active will be false in case of form view
-const active = computed(() => _active.value || isEditable.value)
+const active = computed(() => activeCell.value || isEditable.value)
 
 const aselect = ref<typeof AntSelect>()
 
@@ -119,7 +119,7 @@ watch(isOpen, (n, _o) => {
   }
 })
 
-useSelectedCellKeyupListener(active, (e) => {
+useSelectedCellKeyupListener(activeCell, (e) => {
   switch (e.key) {
     case 'Escape':
       isOpen.value = false

packages/nc-gui/components/smartsheet/Grid.vue

@@ -82,6 +82,8 @@ const isView = false
 
 let editEnabled = $ref(false)
 
+const { appInfo } = useGlobal()
+
 const { xWhere, isPkAvail, isSqlView, eventBus } = useSmartsheetStoreOrThrow()
 
 const visibleColLength = $computed(() => fields.value?.length)
@@ -1129,7 +1131,7 @@ function addEmptyRow(row?: number) {
             </a-menu-item>
 
             <a-menu-item
-              v-if="!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)"
+              v-if="appInfo.ee && !contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)"
               @click="bulkUpdateDlg = true"
             >
               <div v-e="['a:row:update-bulk']" class="nc-project-menu-item">

tests/playwright/pages/Account/License.ts

@@ -28,6 +28,10 @@ export class AccountLicensePage extends BasePage {
   }
 
   async saveLicenseKey(licenseKey: string) {
+    // Kludge: fix me!
+    // await this.get().waitFor({ state: 'visible' });
+    await this.rootPage.waitForTimeout(1000);
+
     await this.get().fill(licenseKey);
     await this.getSaveButton().click();
     await this.verifyToast({ message: 'License key updated' });

tests/playwright/tests/db/updateBulk.ts

@@ -4,8 +4,15 @@ import { DashboardPage } from '../../pages/Dashboard';
 import { Api } from 'nocodb-sdk';
 import { createDemoTable } from '../../setup/demoTable';
 import { BulkUpdatePage } from '../../pages/Dashboard/BulkUpdate';
+import { AccountLicensePage } from '../../pages/Account/License';
+import { AccountPage } from '../../pages/Account';
 
 let bulkUpdateForm: BulkUpdatePage;
+let dashboard: DashboardPage;
+let context: any;
+let api: Api<any>;
+let table;
+
 async function updateBulkFields(fields) {
   // move all fields to active
   for (let i = 0; i < fields.length; i++) {
@@ -21,16 +28,12 @@ async function updateBulkFields(fields) {
   await bulkUpdateForm.save({ awaitResponse: true });
 }
 
-test.describe('Bulk update', () => {
+async function beforeEachInit({ page, tableType }: { page: any; tableType: string }) {
-  let dashboard: DashboardPage;
-  let context: any;
-  let api: Api<any>;
-  let table;
-
-  test.beforeEach(async ({ page }) => {
   context = await setup({ page, isEmptyProject: true });
   dashboard = new DashboardPage(page, context.project);
   bulkUpdateForm = dashboard.bulkUpdateForm;
+  const accountPage: AccountPage = new AccountPage(page);
+  const accountLicensePage: AccountLicensePage = new AccountLicensePage(accountPage);
 
   api = new Api({
     baseURL: `http://localhost:8080/`,
@@ -39,13 +42,21 @@ test.describe('Bulk update', () => {
     },
   });
 
-    table = await createDemoTable({ context, type: 'textBased', recordCnt: 50 });
+  table = await createDemoTable({ context, type: tableType, recordCnt: 50 });
-    await page.reload();
+
+  await accountLicensePage.goto();
+  await accountLicensePage.saveLicenseKey('1234567890');
+  await dashboard.goto();
 
-    await dashboard.treeView.openTable({ title: 'textBased' });
+  await dashboard.treeView.openTable({ title: tableType });
 
   // Open bulk update form
   await dashboard.grid.updateAll();
+}
+
+test.describe('Bulk update', () => {
+  test.beforeEach(async ({ page }) => {
+    await beforeEachInit({ page, tableType: 'textBased' });
   });
 
   test('General- Click to add & remove', async () => {
@@ -118,30 +129,8 @@ test.describe('Bulk update', () => {
 });
 
 test.describe('Bulk update', () => {
-  let dashboard: DashboardPage;
-  let context: any;
-  let api: Api<any>;
-  let table;
-
   test.beforeEach(async ({ page }) => {
-    context = await setup({ page, isEmptyProject: true });
+    await beforeEachInit({ page, tableType: 'numberBased' });
-    dashboard = new DashboardPage(page, context.project);
-    bulkUpdateForm = dashboard.bulkUpdateForm;
-
-    api = new Api({
-      baseURL: `http://localhost:8080/`,
-      headers: {
-        'xc-auth': context.token,
-      },
-    });
-
-    table = await createDemoTable({ context, type: 'numberBased', recordCnt: 50 });
-    await page.reload();
-
-    await dashboard.treeView.openTable({ title: 'numberBased' });
-
-    // Open bulk update form
-    await dashboard.grid.updateAll();
   });
 
   test('Number based', async () => {
@@ -188,30 +177,8 @@ test.describe('Bulk update', () => {
 });
 
 test.describe('Bulk update', () => {
-  let dashboard: DashboardPage;
-  let context: any;
-  let api: Api<any>;
-  let table;
-
   test.beforeEach(async ({ page }) => {
-    context = await setup({ page, isEmptyProject: true });
+    await beforeEachInit({ page, tableType: 'selectBased' });
-    dashboard = new DashboardPage(page, context.project);
-    bulkUpdateForm = dashboard.bulkUpdateForm;
-
-    api = new Api({
-      baseURL: `http://localhost:8080/`,
-      headers: {
-        'xc-auth': context.token,
-      },
-    });
-
-    table = await createDemoTable({ context, type: 'selectBased', recordCnt: 50 });
-    await page.reload();
-
-    await dashboard.treeView.openTable({ title: 'selectBased' });
-
-    // Open bulk update form
-    await dashboard.grid.updateAll();
   });
 
   test('Select based', async () => {
@@ -251,30 +218,8 @@ test.describe('Bulk update', () => {
 });
 
 test.describe('Bulk update', () => {
-  let dashboard: DashboardPage;
-  let context: any;
-  let api: Api<any>;
-  let table;
-
   test.beforeEach(async ({ page }) => {
-    context = await setup({ page, isEmptyProject: true });
+    await beforeEachInit({ page, tableType: 'miscellaneous' });
-    dashboard = new DashboardPage(page, context.project);
-    bulkUpdateForm = dashboard.bulkUpdateForm;
-
-    api = new Api({
-      baseURL: `http://localhost:8080/`,
-      headers: {
-        'xc-auth': context.token,
-      },
-    });
-
-    table = await createDemoTable({ context, type: 'miscellaneous', recordCnt: 50 });
-    await page.reload();
-
-    await dashboard.treeView.openTable({ title: 'miscellaneous' });
-
-    // Open bulk update form
-    await dashboard.grid.updateAll();
   });
 
   test('Miscellaneous (Checkbox, attachment)', async () => {
@@ -314,30 +259,8 @@ test.describe('Bulk update', () => {
 });
 
 test.describe('Bulk update', () => {
-  let dashboard: DashboardPage;
-  let context: any;
-  let api: Api<any>;
-  let table;
-
   test.beforeEach(async ({ page }) => {
-    context = await setup({ page, isEmptyProject: true });
+    await beforeEachInit({ page, tableType: 'dateTimeBased' });
-    dashboard = new DashboardPage(page, context.project);
-    bulkUpdateForm = dashboard.bulkUpdateForm;
-
-    api = new Api({
-      baseURL: `http://localhost:8080/`,
-      headers: {
-        'xc-auth': context.token,
-      },
-    });
-
-    table = await createDemoTable({ context, type: 'dateTimeBased', recordCnt: 50 });
-    await page.reload();
-
-    await dashboard.treeView.openTable({ title: 'dateTimeBased' });
-
-    // Open bulk update form
-    await dashboard.grid.updateAll();
   });
 
   test('Date Time Based', async () => {