From 20b98b0fe006655221236b9b96e5dc626309b0c9 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:39:52 +0000
Subject: [PATCH 01/13] test: add multifield editor test setup

---
 .../components/smartsheet/details/Fields.vue  |  30 ++-
 .../pages/Dashboard/Details/FieldsPage.ts     | 244 ++++++++++++++++++
 .../pages/Dashboard/Details/index.ts          |   4 +
 3 files changed, 274 insertions(+), 4 deletions(-)
 create mode 100644 tests/playwright/pages/Dashboard/Details/FieldsPage.ts

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 7f32a19197..b5d76b478e 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -805,7 +805,7 @@ watch(
 </script>
 
 <template>
-  <div class="w-full p-4">
+  <div class="nc-fields-wrapper w-full p-4">
     <div class="max-w-250 h-full w-full mx-auto">
       <div v-if="isViewColumnsLoading" class="flex flex-row justify-between mt-2">
         <a-skeleton-input class="!h-8 !w-68 !rounded !overflow-hidden" active size="small" />
@@ -817,7 +817,12 @@ watch(
       </div>
       <template v-else>
         <div class="flex w-full justify-between py-2">
-          <a-input v-model:value="searchQuery" class="!h-8 !px-1 !rounded-lg !w-72" placeholder="Search field">
+          <a-input
+            data-testid="nc-field-search-input"
+            v-model:value="searchQuery"
+            class="!h-8 !px-1 !rounded-lg !w-72"
+            placeholder="Search field"
+          >
             <template #prefix>
               <GeneralIcon icon="search" class="mx-1 h-3.5 w-3.5 text-gray-500 group-hover:text-black" />
             </template>
@@ -833,7 +838,14 @@ watch(
           <div class="flex gap-2">
             <NcTooltip :disabled="isLocked">
               <template #title> {{ `${renderAltOrOptlKey()} + C` }} </template>
-              <NcButton type="secondary" size="small" class="mr-1" :disabled="loading || isLocked" @click="addField()">
+              <NcButton
+                data-testid="nc-field-add-new"
+                type="secondary"
+                size="small"
+                class="mr-1"
+                :disabled="loading || isLocked"
+                @click="addField()"
+              >
                 <div class="flex items-center gap-2">
                   <GeneralIcon icon="plus" class="w-3" />
                   New Field
@@ -841,6 +853,7 @@ watch(
               </NcButton>
             </NcTooltip>
             <NcButton
+              data-testid="nc-field-reset"
               type="secondary"
               size="small"
               :disabled="(!loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1) || isLocked"
@@ -852,6 +865,7 @@ watch(
               <template #title> {{ `${renderCmdOrCtrlKey()} + S` }} </template>
 
               <NcButton
+                data-testid="nc-field-save-changes"
                 type="primary"
                 size="small"
                 :loading="loading"
@@ -868,13 +882,20 @@ watch(
         </div>
         <div class="flex flex-row rounded-lg border-1 overflow-clip border-gray-200">
           <div ref="fieldsListWrapperDomRef" class="nc-scrollbar-md !overflow-auto flex-1 flex-grow-1 nc-fields-height">
-            <Draggable :model-value="fields" :disabled="isLocked" item-key="id" @change="onMove($event)">
+            <Draggable
+              :model-value="fields"
+              :disabled="isLocked"
+              item-key="id"
+              @change="onMove($event)"
+              data-testid="nc-field-list-wrapper"
+            >
               <template #item="{ element: field }">
                 <div
                   v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv"
                   class="flex px-2 hover:bg-gray-100 first:rounded-t-lg border-b-1 last:rounded-b-none border-gray-200 pl-5 group"
                   :class="` ${compareCols(field, activeField) ? 'selected' : ''}`"
                   @click="changeField(field, $event)"
+                  :data-testid="`nc-field-item-${field.title}`"
                 >
                   <div class="flex items-center flex-1 py-2.5 gap-1 w-2/6">
                     <component
@@ -983,6 +1004,7 @@ watch(
                           '!hover:(text-brand-700 bg-brand-100) !group-hover:(text-brand-500)': compareCols(field, activeField),
                           '!hover:(text-gray-700 bg-gray-200) !group-hover:(text-gray-500)': !compareCols(field, activeField),
                         }"
+                        data-testid="nc-table-explorer-dropdown-button"
                       >
                         <GeneralIcon icon="threeDotVertical" class="no-action text-inherit" />
                       </NcButton>
diff --git a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
new file mode 100644
index 0000000000..04a52629b4
--- /dev/null
+++ b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
@@ -0,0 +1,244 @@
+// Fields
+
+import BasePage from '../../Base';
+import { expect, Locator } from '@playwright/test';
+import { DetailsPage } from './index';
+
+export class FieldsPage extends BasePage {
+  readonly detailsPage: DetailsPage;
+
+  readonly searchFieldInput: Locator;
+  readonly addNewFieldButton: Locator;
+  readonly resetFieldChangesButton: Locator;
+  readonly saveChangesButton: Locator;
+  readonly addOrEditColumn: Locator;
+  readonly fieldListWrapper: Locator;
+
+  constructor(details: DetailsPage) {
+    super(details.rootPage);
+    this.detailsPage = details;
+    this.searchFieldInput = this.get().getByTestId('nc-field-search-input');
+    this.addNewFieldButton = this.get().getByTestId('nc-field-add-new');
+    this.resetFieldChangesButton = this.get().getByTestId('nc-field-reset');
+    this.saveChangesButton = this.get().getByTestId('nc-field-save-changes');
+    this.addOrEditColumn = this.get().getByTestId('add-or-edit-column');
+    this.fieldListWrapper = this.get().getByTestId('nc-field-list-wrapper');
+  }
+
+  get() {
+    return this.detailsPage.get().locator('.nc-fields-wrapper');
+  }
+
+  async clickNewField() {
+    await this.addNewFieldButton.click();
+    await this.addOrEditColumn.waitFor({ state: 'visible' });
+  }
+
+  async create({
+    title,
+    type = 'SingleLineText',
+    formula = '',
+    qrCodeValueColumnTitle = '',
+    barcodeValueColumnTitle = '',
+    barcodeFormat = '',
+    childTable = '',
+    childColumn = '',
+    relationType = '',
+    rollupType = '',
+    format = '',
+    dateFormat = '',
+    timeFormat = '',
+    insertAboveColumnTitle,
+    insertBelowColumnTitle,
+  }: {
+    title: string;
+    type?: string;
+    formula?: string;
+    qrCodeValueColumnTitle?: string;
+    barcodeValueColumnTitle?: string;
+    barcodeFormat?: string;
+    childTable?: string;
+    childColumn?: string;
+    relationType?: string;
+    rollupType?: string;
+    format?: string;
+    dateFormat?: string;
+    timeFormat?: string;
+    insertAboveColumnTitle?: string;
+    insertBelowColumnTitle?: string;
+  }) {
+    if (insertAboveColumnTitle) {
+      await this.grid.get().locator(`th[data-title="${insertBeforeColumnTitle}"] .nc-ui-dt-dropdown`).click();
+
+      if (isDisplayValue) {
+        await expect(this.rootPage.locator('li[role="menuitem"]:has-text("Insert Before")')).toHaveCount(0);
+        return;
+      }
+
+      await this.rootPage.locator('li[role="menuitem"]:has-text("Insert Before"):visible').click();
+    } else if (insertBelowColumnTitle) {
+      await this.grid.get().locator(`th[data-title="${insertAfterColumnTitle}"] .nc-ui-dt-dropdown`).click();
+      await this.rootPage.locator('li[role="menuitem"]:has-text("Insert After"):visible').click();
+    } else {
+      await this.clickNewField();
+    }
+
+    await this.addOrEditColumn.waitFor({ state: 'visible' });
+
+    await this.fillTitle({ title });
+
+    await this.selectType({ type });
+    await this.rootPage.waitForTimeout(500);
+
+    switch (type) {
+      case 'SingleSelect':
+      case 'MultiSelect':
+        break;
+      case 'Duration':
+        if (format) {
+          await this.get().locator('.ant-select-single').nth(1).click();
+          await this.rootPage
+            .locator(`.ant-select-item`, {
+              hasText: format,
+            })
+            .click();
+        }
+        break;
+      case 'Date':
+        await this.get().locator('.nc-date-select').click();
+        await this.rootPage.locator('.nc-date-select').pressSequentially(dateFormat);
+        await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
+        break;
+      case 'DateTime':
+        // Date Format
+        await this.get().locator('.nc-date-select').click();
+        await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
+        // Time Format
+        await this.get().locator('.nc-time-select').click();
+        await this.rootPage.locator('.ant-select-item').locator(`text="${timeFormat}"`).click();
+        break;
+      case 'Formula':
+        await this.get().locator('.nc-formula-input').fill(formula);
+        break;
+      case 'QrCode':
+        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.rootPage
+          .locator(`.ant-select-item`)
+          .locator(`[data-testid="nc-qr-${qrCodeValueColumnTitle}"]`)
+          .click();
+        break;
+      case 'Barcode':
+        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.rootPage
+          .locator(`.ant-select-item`, {
+            hasText: new RegExp(`^${barcodeValueColumnTitle}$`),
+          })
+          .click();
+        break;
+      case 'Lookup':
+        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.rootPage
+          .locator(`.ant-select-item`, {
+            hasText: childTable,
+          })
+          .click();
+        await this.get().locator('.ant-select-single').nth(2).click();
+        await this.rootPage
+          .locator(`.ant-select-item`, {
+            hasText: childColumn,
+          })
+          .last()
+          .click();
+        break;
+      case 'Rollup':
+        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.rootPage
+          .locator(`.ant-select-item`, {
+            hasText: childTable,
+          })
+          .click();
+        await this.get().locator('.ant-select-single').nth(2).click();
+        await this.rootPage
+          .locator(`.nc-dropdown-relation-column >> .ant-select-item`, {
+            hasText: childColumn,
+          })
+          .click();
+        await this.get().locator('.ant-select-single').nth(3).click();
+        await this.rootPage
+          .locator(`.nc-dropdown-rollup-function >> .ant-select-item`, {
+            hasText: rollupType,
+          })
+          .nth(0)
+          .click();
+        break;
+      case 'Links':
+        await this.get()
+          .locator('.nc-ltar-relation-type >> .ant-radio')
+          .nth(relationType === 'Has Many' ? 0 : 1)
+          .click();
+        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.rootPage.locator(`.nc-ltar-child-table >> input[type="search"]`).fill(childTable);
+        await this.rootPage
+          .locator(`.nc-dropdown-ltar-child-table >> .ant-select-item`, {
+            hasText: childTable,
+          })
+          .nth(0)
+          .click();
+        break;
+      case 'User':
+        break;
+      default:
+        break;
+    }
+
+    await this.saveChanges();
+
+    const headersText = [];
+    const locator = this.grid.get().locator(`th`);
+    const count = await locator.count();
+    for (let i = 0; i < count; i++) {
+      const header = locator.nth(i);
+      const text = await getTextExcludeIconText(header);
+      headersText.push(text);
+    }
+
+    // verify column inserted after the target column
+    if (insertAboveColumnTitle) {
+      expect(headersText[headersText.findIndex(title => title.startsWith(insertAboveColumnTitle)) + 1]).toBe(title);
+    }
+
+    // verify column inserted before the target column
+    if (insertBelowColumnTitle) {
+      expect(headersText[headersText.findIndex(title => title.startsWith(insertAboveColumnTitle)) - 1]).toBe(title);
+    }
+  }
+
+  async fillTitle({ title }: { title: string }) {
+    const fieldTitleInput = this.get().locator('.nc-fields-input');
+    await fieldTitleInput.click();
+    await fieldTitleInput.fill(title);
+  }
+
+  async selectType({ type }: { type: string }) {
+    await this.get().locator('.ant-select-selector > .ant-select-selection-item').click();
+
+    await this.get().locator('.ant-select-selection-search-input[aria-expanded="true"]').waitFor();
+    await this.get().locator('.ant-select-selection-search-input[aria-expanded="true"]').fill(type);
+
+    // Select column type
+    await this.rootPage.locator('.rc-virtual-list-holder-inner > div').locator(`text="${type}"`).click();
+  }
+
+  async saveChanges() {
+    await this.waitForResponse({
+      uiAction: async () => await this.saveChangesButton.click(),
+      requestUrlPathToMatch: 'api/v1/db/meta/tables/',
+      httpMethodsToMatch: ['POST'],
+      responseJsonMatcher: json => json['failedOps']?.length === 0,
+    });
+  }
+
+  async getField({ title }: { title: string }) {
+    return this.fieldListWrapper.locator('> div').locator(`text=${title}`);
+  }
+}
diff --git a/tests/playwright/pages/Dashboard/Details/index.ts b/tests/playwright/pages/Dashboard/Details/index.ts
index 205442f483..4b9cddde66 100644
--- a/tests/playwright/pages/Dashboard/Details/index.ts
+++ b/tests/playwright/pages/Dashboard/Details/index.ts
@@ -53,4 +53,8 @@ export class DetailsPage extends BasePage {
   async clickRelationsTab() {
     await this.tab_relations.click();
   }
+
+  async clickFieldsTab() {
+    await this.tab_fields.click();
+  }
 }

From af5329f9a97d5963a754e232c51e561199237f78 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:39:52 +0000
Subject: [PATCH 02/13] test: added small changes

---
 packages/nc-gui/components/smartsheet/details/Fields.vue | 5 +++--
 tests/playwright/pages/Dashboard/Details/FieldsPage.ts   | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index b5d76b478e..ad62f2c65b 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -916,6 +916,7 @@ watch(
                           toggleVisibility(event.target.checked, viewFieldsMap[field.id])
                         }
                       "
+                      data-testid="nc-field-checkbox"
                     />
                     <NcCheckbox v-else :disabled="true" class="opacity-0" :checked="true" />
                     <SmartsheetHeaderVirtualCellIcon
@@ -940,13 +941,13 @@ watch(
                       show-on-truncate-only
                     >
                       <template #title> {{ fieldState(field)?.title || field.title }} </template>
-                      <span>
+                      <span data-testid="nc-field-title">
                         {{ fieldState(field)?.title || field.title }}
                       </span>
                     </NcTooltip>
                   </div>
                   <div class="flex items-center justify-end gap-1">
-                    <div class="flex items-center">
+                    <div class="nc-field-status-wrapper flex items-center">
                       <NcBadge v-if="fieldStatus(field) === 'delete'" color="red" :border="false" class="bg-red-50 text-red-700">
                         Deleted field
                       </NcBadge>
diff --git a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
index 04a52629b4..e00cd8188c 100644
--- a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
+++ b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
@@ -239,6 +239,6 @@ export class FieldsPage extends BasePage {
   }
 
   async getField({ title }: { title: string }) {
-    return this.fieldListWrapper.locator('> div').locator(`text=${title}`);
+    return this.fieldListWrapper.getByTestId('nc-field-title').locator(`text=${title}`);
   }
 }

From 698482dbdd4f8d5e5490cbaefb90b068c8803867 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:39:52 +0000
Subject: [PATCH 03/13] test: added multifield editor fieldPage class

---
 .../components/smartsheet/details/Fields.vue  | 56 ++++++++---
 .../pages/Dashboard/Details/FieldsPage.ts     | 94 +++++++++++--------
 2 files changed, 101 insertions(+), 49 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index ad62f2c65b..2da889f028 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -916,7 +916,7 @@ watch(
                           toggleVisibility(event.target.checked, viewFieldsMap[field.id])
                         }
                       "
-                      data-testid="nc-field-checkbox"
+                      data-testid="nc-field-visibility-checkbox"
                     />
                     <NcCheckbox v-else :disabled="true" class="opacity-0" :checked="true" />
                     <SmartsheetHeaderVirtualCellIcon
@@ -948,7 +948,13 @@ watch(
                   </div>
                   <div class="flex items-center justify-end gap-1">
                     <div class="nc-field-status-wrapper flex items-center">
-                      <NcBadge v-if="fieldStatus(field) === 'delete'" color="red" :border="false" class="bg-red-50 text-red-700">
+                      <NcBadge
+                        v-if="fieldStatus(field) === 'delete'"
+                        color="red"
+                        :border="false"
+                        class="bg-red-50 text-red-700"
+                        data-testid="nc-field-status-deleted-field"
+                      >
                         Deleted field
                       </NcBadge>
                       <NcBadge
@@ -956,6 +962,7 @@ watch(
                         color="orange"
                         :border="false"
                         class="bg-green-50 text-green-700"
+                        data-testid="nc-field-status-new-field"
                       >
                         New field
                       </NcBadge>
@@ -965,6 +972,7 @@ watch(
                         color="orange"
                         :border="false"
                         class="bg-orange-50 text-orange-700"
+                        data-testid="nc-field-status-updated-field"
                       >
                         Updated field
                       </NcBadge>
@@ -973,6 +981,7 @@ watch(
                         color="yellow"
                         :border="false"
                         class="ml-1 bg-yellow-50 text-yellow-700"
+                        data-testid="nc-field-status-incomplete-configuration"
                       >
                         Incomplete configuration
                       </NcBadge>
@@ -984,6 +993,7 @@ watch(
                       class="no-action mr-2"
                       :disabled="loading"
                       @click="recoverField(field)"
+                      data-testid="nc-field-restore-changes"
                     >
                       <div class="flex items-center text-xs gap-1">
                         <GeneralIcon icon="reload" />
@@ -993,7 +1003,7 @@ watch(
                     <NcDropdown
                       v-else
                       :trigger="['click']"
-                      overlay-class-name="nc-dropdown-table-explorer"
+                      overlay-class-name="nc-field-item-action-dropdown nc-dropdown-table-explorer"
                       @update:visible="onFieldOptionUpdate"
                       @click.stop
                     >
@@ -1005,7 +1015,7 @@ watch(
                           '!hover:(text-brand-700 bg-brand-100) !group-hover:(text-brand-500)': compareCols(field, activeField),
                           '!hover:(text-gray-700 bg-gray-200) !group-hover:(text-gray-500)': !compareCols(field, activeField),
                         }"
-                        data-testid="nc-table-explorer-dropdown-button"
+                        data-testid="nc-field-item-action-button"
                       >
                         <GeneralIcon icon="threeDotVertical" class="no-action text-inherit" />
                       </NcButton>
@@ -1019,6 +1029,7 @@ watch(
                               <div
                                 class="flex flex-row px-3 py-2 w-46 justify-between items-center group hover:bg-gray-100 cursor-pointer"
                                 @click="onClickCopyFieldUrl(field)"
+                                data-testid="nc-field-item-action-copy-id"
                               >
                                 <div class="flex flex-row items-baseline gap-x-1 font-bold text-xs">
                                   <div class="text-gray-600">{{ $t('labels.idColon') }}</div>
@@ -1036,19 +1047,37 @@ watch(
                           </template>
 
                           <template v-if="!isLocked">
-                            <NcMenuItem key="table-explorer-duplicate" @click="duplicateField(field)">
+                            <NcMenuItem
+                              key="table-explorer-duplicate"
+                              @click="duplicateField(field)"
+                              data-testid="nc-field-item-action-duplicate"
+                            >
                               <Icon class="iconify text-gray-800" icon="lucide:copy" /><span>Duplicate</span>
                             </NcMenuItem>
-                            <NcMenuItem v-if="!field.pv" key="table-explorer-insert-above" @click="addField(field, true)">
+                            <NcMenuItem
+                              v-if="!field.pv"
+                              key="table-explorer-insert-above"
+                              @click="addField(field, true)"
+                              data-testid="nc-field-item-action-insert-above"
+                            >
                               <Icon class="iconify text-gray-800" icon="lucide:arrow-up" /><span>Insert above</span>
                             </NcMenuItem>
-                            <NcMenuItem key="table-explorer-insert-below" @click="addField(field)">
+                            <NcMenuItem
+                              key="table-explorer-insert-below"
+                              @click="addField(field)"
+                              data-testid="nc-field-item-action-insert-below"
+                            >
                               <Icon class="iconify text-gray-800" icon="lucide:arrow-down" /><span>Insert below</span>
                             </NcMenuItem>
 
                             <a-menu-divider class="my-1.5" />
 
-                            <NcMenuItem key="table-explorer-delete" class="!hover:bg-red-50" @click="onFieldDelete(field)">
+                            <NcMenuItem
+                              key="table-explorer-delete"
+                              class="!hover:bg-red-50"
+                              @click="onFieldDelete(field)"
+                              data-testid="nc-field-item-action-delete"
+                            >
                               <div class="text-red-500">
                                 <GeneralIcon icon="delete" class="group-hover:text-accent -ml-0.25 -mt-0.75 mr-0.5" />
                                 Delete
@@ -1086,7 +1115,7 @@ watch(
                         'opacity-0 !cursor-default': isLocked,
                       }"
                     />
-                    <NcCheckbox :disabled="true" :checked="true" />
+                    <NcCheckbox :disabled="true" :checked="true" data-testid="nc-field-visibility-checkbox" />
                     <SmartsheetHeaderCellIcon
                       v-if="displayColumn"
                       :column-meta="fieldState(displayColumn) || displayColumn"
@@ -1102,7 +1131,7 @@ watch(
                       show-on-truncate-only
                     >
                       <template #title> {{ fieldState(displayColumn)?.title || displayColumn.title }} </template>
-                      <span>
+                      <span data-testid="nc-field-title">
                         {{ fieldState(displayColumn)?.title || displayColumn.title }}
                       </span>
                     </NcTooltip>
@@ -1114,6 +1143,7 @@ watch(
                         color="red"
                         :border="false"
                         class="bg-red-50 text-red-700"
+                        data-testid="nc-field-status-deleted-field"
                       >
                         Deleted field
                       </NcBadge>
@@ -1123,6 +1153,7 @@ watch(
                         color="orange"
                         :border="false"
                         class="bg-orange-50 text-orange-700"
+                        data-testid="nc-field-status-updated-field"
                       >
                         Updated field
                       </NcBadge>
@@ -1134,6 +1165,7 @@ watch(
                       class="no-action mr-2"
                       :disabled="loading"
                       @click="recoverField(displayColumn)"
+                      data-testid="nc-field-restore-changes"
                     >
                       <div class="flex items-center text-xs gap-1">
                         <GeneralIcon icon="reload" />
@@ -1143,7 +1175,7 @@ watch(
                     <NcDropdown
                       v-else
                       :trigger="['click']"
-                      overlay-class-name="nc-dropdown-table-explorer-display-column"
+                      overlay-class-name="nc-field-item-action-dropdown-display-column nc-dropdown-table-explorer-display-column"
                       @update:visible="onFieldOptionUpdate"
                       @click.stop
                     >
@@ -1161,6 +1193,7 @@ watch(
                             activeField,
                           ),
                         }"
+                        data-testid="nc-field-item-action-button"
                       >
                         <GeneralIcon icon="threeDotVertical" class="no-action text-inherit" />
                       </NcButton>
@@ -1173,6 +1206,7 @@ watch(
                             <div
                               class="flex flex-row px-3 py-2 w-46 justify-between items-center group hover:bg-gray-100 cursor-pointer"
                               @click="onClickCopyFieldUrl(displayColumn)"
+                              data-testid="nc-field-item-action-copy-id"
                             >
                               <div class="flex flex-row items-baseline gap-x-1 font-bold text-xs">
                                 <div class="text-gray-600">{{ $t('labels.idColon') }}</div>
diff --git a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
index e00cd8188c..0047a4a5e5 100644
--- a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
+++ b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
@@ -31,7 +31,6 @@ export class FieldsPage extends BasePage {
 
   async clickNewField() {
     await this.addNewFieldButton.click();
-    await this.addOrEditColumn.waitFor({ state: 'visible' });
   }
 
   async create({
@@ -68,17 +67,9 @@ export class FieldsPage extends BasePage {
     insertBelowColumnTitle?: string;
   }) {
     if (insertAboveColumnTitle) {
-      await this.grid.get().locator(`th[data-title="${insertBeforeColumnTitle}"] .nc-ui-dt-dropdown`).click();
-
-      if (isDisplayValue) {
-        await expect(this.rootPage.locator('li[role="menuitem"]:has-text("Insert Before")')).toHaveCount(0);
-        return;
-      }
-
-      await this.rootPage.locator('li[role="menuitem"]:has-text("Insert Before"):visible').click();
+      await this.selectFieldAction({ title: insertAboveColumnTitle, action: 'insert-above' });
     } else if (insertBelowColumnTitle) {
-      await this.grid.get().locator(`th[data-title="${insertAfterColumnTitle}"] .nc-ui-dt-dropdown`).click();
-      await this.rootPage.locator('li[role="menuitem"]:has-text("Insert After"):visible').click();
+      await this.selectFieldAction({ title: insertBelowColumnTitle, action: 'insert-below' });
     } else {
       await this.clickNewField();
     }
@@ -96,7 +87,7 @@ export class FieldsPage extends BasePage {
         break;
       case 'Duration':
         if (format) {
-          await this.get().locator('.ant-select-single').nth(1).click();
+          await this.addOrEditColumn.locator('.ant-select-single').nth(1).click();
           await this.rootPage
             .locator(`.ant-select-item`, {
               hasText: format,
@@ -105,30 +96,30 @@ export class FieldsPage extends BasePage {
         }
         break;
       case 'Date':
-        await this.get().locator('.nc-date-select').click();
+        await this.addOrEditColumn.locator('.nc-date-select').click();
         await this.rootPage.locator('.nc-date-select').pressSequentially(dateFormat);
         await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
         break;
       case 'DateTime':
         // Date Format
-        await this.get().locator('.nc-date-select').click();
+        await this.addOrEditColumn.locator('.nc-date-select').click();
         await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
         // Time Format
-        await this.get().locator('.nc-time-select').click();
+        await this.addOrEditColumn.locator('.nc-time-select').click();
         await this.rootPage.locator('.ant-select-item').locator(`text="${timeFormat}"`).click();
         break;
       case 'Formula':
-        await this.get().locator('.nc-formula-input').fill(formula);
+        await this.addOrEditColumn.locator('.nc-formula-input').fill(formula);
         break;
       case 'QrCode':
-        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(1).click();
         await this.rootPage
           .locator(`.ant-select-item`)
           .locator(`[data-testid="nc-qr-${qrCodeValueColumnTitle}"]`)
           .click();
         break;
       case 'Barcode':
-        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(1).click();
         await this.rootPage
           .locator(`.ant-select-item`, {
             hasText: new RegExp(`^${barcodeValueColumnTitle}$`),
@@ -136,13 +127,13 @@ export class FieldsPage extends BasePage {
           .click();
         break;
       case 'Lookup':
-        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(1).click();
         await this.rootPage
           .locator(`.ant-select-item`, {
             hasText: childTable,
           })
           .click();
-        await this.get().locator('.ant-select-single').nth(2).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(2).click();
         await this.rootPage
           .locator(`.ant-select-item`, {
             hasText: childColumn,
@@ -151,19 +142,19 @@ export class FieldsPage extends BasePage {
           .click();
         break;
       case 'Rollup':
-        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(1).click();
         await this.rootPage
           .locator(`.ant-select-item`, {
             hasText: childTable,
           })
           .click();
-        await this.get().locator('.ant-select-single').nth(2).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(2).click();
         await this.rootPage
           .locator(`.nc-dropdown-relation-column >> .ant-select-item`, {
             hasText: childColumn,
           })
           .click();
-        await this.get().locator('.ant-select-single').nth(3).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(3).click();
         await this.rootPage
           .locator(`.nc-dropdown-rollup-function >> .ant-select-item`, {
             hasText: rollupType,
@@ -172,11 +163,11 @@ export class FieldsPage extends BasePage {
           .click();
         break;
       case 'Links':
-        await this.get()
+        await this.addOrEditColumn
           .locator('.nc-ltar-relation-type >> .ant-radio')
           .nth(relationType === 'Has Many' ? 0 : 1)
           .click();
-        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(1).click();
         await this.rootPage.locator(`.nc-ltar-child-table >> input[type="search"]`).fill(childTable);
         await this.rootPage
           .locator(`.nc-dropdown-ltar-child-table >> .ant-select-item`, {
@@ -193,37 +184,36 @@ export class FieldsPage extends BasePage {
 
     await this.saveChanges();
 
-    const headersText = [];
-    const locator = this.grid.get().locator(`th`);
+    const fieldsText = [];
+    const locator = this.fieldListWrapper.locator('>div');
     const count = await locator.count();
     for (let i = 0; i < count; i++) {
-      const header = locator.nth(i);
-      const text = await getTextExcludeIconText(header);
-      headersText.push(text);
+      const text = await locator.nth(i).getByTestId('nc-field-title').textContent();
+      fieldsText.push(text);
     }
 
-    // verify column inserted after the target column
+    // verify field inserted above the target field
     if (insertAboveColumnTitle) {
-      expect(headersText[headersText.findIndex(title => title.startsWith(insertAboveColumnTitle)) + 1]).toBe(title);
+      expect(fieldsText[fieldsText.findIndex(title => title.startsWith(insertAboveColumnTitle)) - 1]).toBe(title);
     }
 
-    // verify column inserted before the target column
+    // verify field inserted below the target field
     if (insertBelowColumnTitle) {
-      expect(headersText[headersText.findIndex(title => title.startsWith(insertAboveColumnTitle)) - 1]).toBe(title);
+      expect(fieldsText[fieldsText.findIndex(title => title.startsWith(insertAboveColumnTitle)) + 1]).toBe(title);
     }
   }
 
   async fillTitle({ title }: { title: string }) {
-    const fieldTitleInput = this.get().locator('.nc-fields-input');
+    const fieldTitleInput = this.addOrEditColumn.locator('.nc-fields-input');
     await fieldTitleInput.click();
     await fieldTitleInput.fill(title);
   }
 
   async selectType({ type }: { type: string }) {
-    await this.get().locator('.ant-select-selector > .ant-select-selection-item').click();
+    await this.addOrEditColumn.locator('.ant-select-selector > .ant-select-selection-item').click();
 
-    await this.get().locator('.ant-select-selection-search-input[aria-expanded="true"]').waitFor();
-    await this.get().locator('.ant-select-selection-search-input[aria-expanded="true"]').fill(type);
+    await this.addOrEditColumn.locator('.ant-select-selection-search-input[aria-expanded="true"]').waitFor();
+    await this.addOrEditColumn.locator('.ant-select-selection-search-input[aria-expanded="true"]').fill(type);
 
     // Select column type
     await this.rootPage.locator('.rc-virtual-list-holder-inner > div').locator(`text="${type}"`).click();
@@ -241,4 +231,32 @@ export class FieldsPage extends BasePage {
   async getField({ title }: { title: string }) {
     return this.fieldListWrapper.getByTestId('nc-field-title').locator(`text=${title}`);
   }
+
+  async getFieldVisibilityCheckbox({ title }: { title: string }) {
+    return (await this.getField({ title })).getByTestId('nc-field-visibility-checkbox');
+  }
+
+  async selectFieldAction({
+    title,
+    action,
+    isDisplayValueField = false,
+  }: {
+    title: string;
+    action: 'copy-id' | 'duplicate' | 'insert-above' | 'insert-below' | 'delete';
+    isDisplayValueField?: boolean;
+  }) {
+    const field = await this.getField({ title });
+
+    await field.hover();
+    await field.getByTestId('nc-field-item-action-button').waitFor({ state: 'visible' });
+    await field.getByTestId('nc-field-item-action-button').click();
+
+    const fieldActionDropdown = isDisplayValueField
+      ? this.rootPage.locator('.nc-field-item-action-dropdown-display-column')
+      : this.rootPage.locator('.nc-field-item-action-dropdown');
+
+    await fieldActionDropdown.waitFor({ state: 'visible' });
+    await fieldActionDropdown.getByTestId(`nc-field-item-action-${action}`).click();
+    await fieldActionDropdown.waitFor({ state: 'hidden' });
+  }
 }

From 20c7711a61181eaf00aa8c6375951a861559b209 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:39:52 +0000
Subject: [PATCH 04/13] test: added create and update field test cases

---
 .../components/smartsheet/details/Fields.vue  |  4 +-
 .../pages/Dashboard/Details/FieldsPage.ts     | 62 ++++++++++++-------
 .../pages/Dashboard/Details/index.ts          |  3 +
 .../db/features/multiFieldEditor.spec.ts      | 49 +++++++++++++++
 4 files changed, 95 insertions(+), 23 deletions(-)
 create mode 100644 tests/playwright/tests/db/features/multiFieldEditor.spec.ts

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 2da889f028..a7143ed4ab 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -832,6 +832,7 @@ watch(
                 icon="close"
                 class="mx-1 h-3.5 w-3.5 text-gray-500 group-hover:text-black"
                 @click="searchQuery = ''"
+                data-testid="nc-field-clear-search"
               />
             </template>
           </a-input>
@@ -895,7 +896,7 @@ watch(
                   class="flex px-2 hover:bg-gray-100 first:rounded-t-lg border-b-1 last:rounded-b-none border-gray-200 pl-5 group"
                   :class="` ${compareCols(field, activeField) ? 'selected' : ''}`"
                   @click="changeField(field, $event)"
-                  :data-testid="`nc-field-item-${field.title}`"
+                  :data-testid="`nc-field-item-${fieldState(field)?.title || field.title}`"
                 >
                   <div class="flex items-center flex-1 py-2.5 gap-1 w-2/6">
                     <component
@@ -1106,6 +1107,7 @@ watch(
                   class="flex px-2 bg-white hover:bg-gray-100 border-b-1 border-gray-200 first:rounded-tl-lg last:border-b-1 pl-5 group"
                   :class="` ${compareCols(displayColumn, activeField) ? 'selected' : ''}`"
                   @click="changeField(displayColumn, $event)"
+                  :data-testid="`nc-field-item-${fieldState(displayColumn)?.title || displayColumn.title}`"
                 >
                   <div class="flex items-center flex-1 py-2.5 gap-1 w-2/6">
                     <component
diff --git a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
index 0047a4a5e5..4b29a47054 100644
--- a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
+++ b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
@@ -11,6 +11,7 @@ export class FieldsPage extends BasePage {
   readonly addNewFieldButton: Locator;
   readonly resetFieldChangesButton: Locator;
   readonly saveChangesButton: Locator;
+
   readonly addOrEditColumn: Locator;
   readonly fieldListWrapper: Locator;
 
@@ -29,13 +30,24 @@ export class FieldsPage extends BasePage {
     return this.detailsPage.get().locator('.nc-fields-wrapper');
   }
 
+  async fillSearch({ title }: { title: string }) {
+    const searchInput = this.get().getByTestId('nc-field-search-input');
+    await searchInput.click();
+    await searchInput.fill(title);
+  }
+
+  async clearSearch() {
+    await this.get().getByTestId('nc-field-clear-search').click();
+  }
+
   async clickNewField() {
     await this.addNewFieldButton.click();
   }
 
-  async create({
+  async createOrUpdate({
     title,
     type = 'SingleLineText',
+    isUpdateMode = false,
     formula = '',
     qrCodeValueColumnTitle = '',
     barcodeValueColumnTitle = '',
@@ -52,6 +64,7 @@ export class FieldsPage extends BasePage {
   }: {
     title: string;
     type?: string;
+    isUpdateMode?: boolean;
     formula?: string;
     qrCodeValueColumnTitle?: string;
     barcodeValueColumnTitle?: string;
@@ -66,14 +79,15 @@ export class FieldsPage extends BasePage {
     insertAboveColumnTitle?: string;
     insertBelowColumnTitle?: string;
   }) {
-    if (insertAboveColumnTitle) {
-      await this.selectFieldAction({ title: insertAboveColumnTitle, action: 'insert-above' });
-    } else if (insertBelowColumnTitle) {
-      await this.selectFieldAction({ title: insertBelowColumnTitle, action: 'insert-below' });
-    } else {
-      await this.clickNewField();
+    if (!isUpdateMode) {
+      if (insertAboveColumnTitle) {
+        await this.selectFieldAction({ title: insertAboveColumnTitle, action: 'insert-above' });
+      } else if (insertBelowColumnTitle) {
+        await this.selectFieldAction({ title: insertBelowColumnTitle, action: 'insert-below' });
+      } else {
+        await this.clickNewField();
+      }
     }
-
     await this.addOrEditColumn.waitFor({ state: 'visible' });
 
     await this.fillTitle({ title });
@@ -188,18 +202,20 @@ export class FieldsPage extends BasePage {
     const locator = this.fieldListWrapper.locator('>div');
     const count = await locator.count();
     for (let i = 0; i < count; i++) {
+      await locator.nth(i).scrollIntoViewIfNeeded();
       const text = await locator.nth(i).getByTestId('nc-field-title').textContent();
       fieldsText.push(text);
     }
 
-    // verify field inserted above the target field
     if (insertAboveColumnTitle) {
+      // verify field inserted above the target field
       expect(fieldsText[fieldsText.findIndex(title => title.startsWith(insertAboveColumnTitle)) - 1]).toBe(title);
-    }
-
-    // verify field inserted below the target field
-    if (insertBelowColumnTitle) {
-      expect(fieldsText[fieldsText.findIndex(title => title.startsWith(insertAboveColumnTitle)) + 1]).toBe(title);
+    } else if (insertBelowColumnTitle) {
+      // verify field inserted below the target field
+      expect(fieldsText[fieldsText.findIndex(title => title.startsWith(insertBelowColumnTitle)) + 1]).toBe(title);
+    } else {
+      // verify field inserted at the end
+      expect(fieldsText[fieldsText.length - 1]).toBe(title);
     }
   }
 
@@ -222,18 +238,19 @@ export class FieldsPage extends BasePage {
   async saveChanges() {
     await this.waitForResponse({
       uiAction: async () => await this.saveChangesButton.click(),
-      requestUrlPathToMatch: 'api/v1/db/meta/tables/',
-      httpMethodsToMatch: ['POST'],
-      responseJsonMatcher: json => json['failedOps']?.length === 0,
+      requestUrlPathToMatch: 'api/v1/db/meta/views/',
+      httpMethodsToMatch: ['GET'],
+      responseJsonMatcher: json => json['list'],
     });
+    await this.rootPage.waitForTimeout(200);
   }
 
-  async getField({ title }: { title: string }) {
-    return this.fieldListWrapper.getByTestId('nc-field-title').locator(`text=${title}`);
+  getField({ title }: { title: string }) {
+    return this.fieldListWrapper.getByTestId(`nc-field-item-${title}`);
   }
 
   async getFieldVisibilityCheckbox({ title }: { title: string }) {
-    return (await this.getField({ title })).getByTestId('nc-field-visibility-checkbox');
+    return this.getField({ title }).getByTestId('nc-field-visibility-checkbox');
   }
 
   async selectFieldAction({
@@ -245,10 +262,11 @@ export class FieldsPage extends BasePage {
     action: 'copy-id' | 'duplicate' | 'insert-above' | 'insert-below' | 'delete';
     isDisplayValueField?: boolean;
   }) {
-    const field = await this.getField({ title });
+    const field = this.getField({ title });
+    await field.scrollIntoViewIfNeeded();
 
     await field.hover();
-    await field.getByTestId('nc-field-item-action-button').waitFor({ state: 'visible' });
+    // await field.getByTestId('nc-field-item-action-button').waitFor({ state: 'visible' });
     await field.getByTestId('nc-field-item-action-button').click();
 
     const fieldActionDropdown = isDisplayValueField
diff --git a/tests/playwright/pages/Dashboard/Details/index.ts b/tests/playwright/pages/Dashboard/Details/index.ts
index 4b9cddde66..2ca6027d9c 100644
--- a/tests/playwright/pages/Dashboard/Details/index.ts
+++ b/tests/playwright/pages/Dashboard/Details/index.ts
@@ -4,12 +4,14 @@ import { TopbarPage } from '../common/Topbar';
 import { Locator } from '@playwright/test';
 import { WebhookPage } from './WebhookPage';
 import { ErdPage } from './ErdPage';
+import { FieldsPage } from './FieldsPage';
 
 export class DetailsPage extends BasePage {
   readonly dashboard: DashboardPage;
   readonly topbar: TopbarPage;
   readonly webhook: WebhookPage;
   readonly relations: ErdPage;
+  readonly fields: FieldsPage;
 
   readonly tab_webhooks: Locator;
   readonly tab_apiSnippet: Locator;
@@ -24,6 +26,7 @@ export class DetailsPage extends BasePage {
     this.topbar = dashboard.grid.topbar;
     this.webhook = new WebhookPage(this);
     this.relations = new ErdPage(this);
+    this.fields = new FieldsPage(this);
 
     this.tab_webhooks = this.get().locator(`[data-testid="nc-webhooks-tab"]`);
     this.tab_apiSnippet = this.get().locator(`[data-testid="nc-apis-tab"]`);
diff --git a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
new file mode 100644
index 0000000000..c88c80b0a9
--- /dev/null
+++ b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
@@ -0,0 +1,49 @@
+import { test } from '@playwright/test';
+import { DashboardPage } from '../../../pages/Dashboard';
+import { GridPage } from '../../../pages/Dashboard/Grid';
+import setup, { unsetup } from '../../../setup';
+import { FieldsPage } from '../../../pages/Dashboard/Details/FieldsPage';
+
+test.describe('Multi Field Editor', () => {
+  let dashboard: DashboardPage, grid: GridPage, fields: FieldsPage;
+  let context: any;
+  const defaultFieldName = 'Multi Field Editor';
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page, isEmptyProject: true });
+    dashboard = new DashboardPage(page, context.base);
+    grid = dashboard.grid;
+    fields = dashboard.details.fields;
+
+    await dashboard.treeView.createTable({ title: 'Multifield', baseTitle: context.base.title });
+    await dashboard.grid.topbar.openDetailedTab();
+    await dashboard.details.clickFieldsTab();
+
+    // Add New Field
+    await fields.createOrUpdate({ title: defaultFieldName });
+  });
+
+  test.afterEach(async () => {
+    await unsetup(context);
+  });
+
+  const openMultiFieldOfATable = async (tableName: string) => {
+    await dashboard.treeView.openTable({ title: tableName });
+    await dashboard.grid.topbar.openDetailedTab();
+    await dashboard.details.clickRelationsTab();
+  };
+
+  test('Add New field and update', async () => {
+    // Add New Field
+    await fields.createOrUpdate({ title: 'Name' });
+
+    // Update Field title
+    await fields.getField({ title: 'Name' }).click();
+    await fields.createOrUpdate({ title: 'Updated Name', isUpdateMode: true });
+  });
+
+  test('Field action menu: CopyId, Duplicate, InsertAbove, InsertBelow', async () => {
+    await fields.createOrUpdate({ title: 'Above Inserted Field', insertAboveColumnTitle: defaultFieldName });
+    await fields.createOrUpdate({ title: 'Below Inserted Field', insertBelowColumnTitle: defaultFieldName });
+  });
+});

From 21413c85c409bef6909742b599dc5b040a8a4bda Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:39:53 +0000
Subject: [PATCH 05/13] test(multi-field): added single field operations

---
 .../components/smartsheet/details/Fields.vue  |  2 +-
 .../pages/Dashboard/Details/FieldsPage.ts     | 45 +++++++++++---
 .../db/features/multiFieldEditor.spec.ts      | 60 ++++++++++++++++---
 3 files changed, 91 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index a7143ed4ab..87182660f8 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -1034,7 +1034,7 @@ watch(
                               >
                                 <div class="flex flex-row items-baseline gap-x-1 font-bold text-xs">
                                   <div class="text-gray-600">{{ $t('labels.idColon') }}</div>
-                                  <div class="flex flex-row text-gray-600 text-xs">
+                                  <div class="flex flex-row text-gray-600 text-xs" data-testid="nc-field-item-id">
                                     {{ field.id }}
                                   </div>
                                 </div>
diff --git a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
index 4b29a47054..c9aac907c4 100644
--- a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
+++ b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
@@ -198,14 +198,7 @@ export class FieldsPage extends BasePage {
 
     await this.saveChanges();
 
-    const fieldsText = [];
-    const locator = this.fieldListWrapper.locator('>div');
-    const count = await locator.count();
-    for (let i = 0; i < count; i++) {
-      await locator.nth(i).scrollIntoViewIfNeeded();
-      const text = await locator.nth(i).getByTestId('nc-field-title').textContent();
-      fieldsText.push(text);
-    }
+    const fieldsText = await this.getAllFieldText();
 
     if (insertAboveColumnTitle) {
       // verify field inserted above the target field
@@ -275,6 +268,42 @@ export class FieldsPage extends BasePage {
 
     await fieldActionDropdown.waitFor({ state: 'visible' });
     await fieldActionDropdown.getByTestId(`nc-field-item-action-${action}`).click();
+
+    if (action === 'copy-id') {
+      await field.getByTestId('nc-field-item-action-button').click();
+    }
+
+    await fieldActionDropdown.waitFor({ state: 'hidden' });
+  }
+
+  async getAllFieldText() {
+    const fieldsText = [];
+    const locator = this.fieldListWrapper.locator('>div');
+    const count = await locator.count();
+    for (let i = 0; i < count; i++) {
+      await locator.nth(i).scrollIntoViewIfNeeded();
+      const text = await locator.nth(i).getByTestId('nc-field-title').textContent();
+      fieldsText.push(text);
+    }
+    return fieldsText;
+  }
+
+  async getFieldId({ title, isDisplayValueField = false }: { title: string; isDisplayValueField?: boolean }) {
+    const field = this.getField({ title });
+    await field.scrollIntoViewIfNeeded();
+
+    await field.hover();
+    await field.getByTestId('nc-field-item-action-button').waitFor({ state: 'visible' });
+    await field.getByTestId('nc-field-item-action-button').click();
+
+    const fieldActionDropdown = isDisplayValueField
+      ? this.rootPage.locator('.nc-field-item-action-dropdown-display-column')
+      : this.rootPage.locator('.nc-field-item-action-dropdown');
+
+    await fieldActionDropdown.waitFor({ state: 'visible' });
+    const fieldId = await fieldActionDropdown.getByTestId('nc-field-item-id').textContent();
+    await field.getByTestId('nc-field-item-action-button').click();
     await fieldActionDropdown.waitFor({ state: 'hidden' });
+    return fieldId;
   }
 }
diff --git a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
index c88c80b0a9..5469ee9c49 100644
--- a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
+++ b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
@@ -1,8 +1,9 @@
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import { DashboardPage } from '../../../pages/Dashboard';
 import { GridPage } from '../../../pages/Dashboard/Grid';
 import setup, { unsetup } from '../../../setup';
 import { FieldsPage } from '../../../pages/Dashboard/Details/FieldsPage';
+import { getTextExcludeIconText } from '../../utils/general';
 
 test.describe('Multi Field Editor', () => {
   let dashboard: DashboardPage, grid: GridPage, fields: FieldsPage;
@@ -16,8 +17,7 @@ test.describe('Multi Field Editor', () => {
     fields = dashboard.details.fields;
 
     await dashboard.treeView.createTable({ title: 'Multifield', baseTitle: context.base.title });
-    await dashboard.grid.topbar.openDetailedTab();
-    await dashboard.details.clickFieldsTab();
+    await openMultiFieldOfATable();
 
     // Add New Field
     await fields.createOrUpdate({ title: defaultFieldName });
@@ -27,10 +27,27 @@ test.describe('Multi Field Editor', () => {
     await unsetup(context);
   });
 
-  const openMultiFieldOfATable = async (tableName: string) => {
-    await dashboard.treeView.openTable({ title: tableName });
+  async function openMultiFieldOfATable() {
     await dashboard.grid.topbar.openDetailedTab();
-    await dashboard.details.clickRelationsTab();
+    await dashboard.details.clickFieldsTab();
+  }
+
+  const verifyGridColumnHeaders = async ({ fields = [] }: { fields: string[] }) => {
+    await dashboard.grid.topbar.openDataTab();
+
+    const locator = dashboard.grid.get().locator(`th`);
+    const count = await locator.count();
+
+    // exclude first checkbox and last add new column
+    expect(count - 2).toBe(fields.length);
+
+    for (let i = 1; i < count - 1; i++) {
+      const header = locator.nth(i);
+      const text = await getTextExcludeIconText(header);
+      expect(text).toBe(fields[i - 1]);
+    }
+
+    await openMultiFieldOfATable();
   };
 
   test('Add New field and update', async () => {
@@ -42,8 +59,37 @@ test.describe('Multi Field Editor', () => {
     await fields.createOrUpdate({ title: 'Updated Name', isUpdateMode: true });
   });
 
-  test('Field action menu: CopyId, Duplicate, InsertAbove, InsertBelow', async () => {
+  test.only('Field operations: CopyId, Duplicate, InsertAbove, InsertBelow, Hide', async () => {
+    // copy-id and verify
+    const fieldId = await fields.getFieldId({ title: defaultFieldName });
+    await fields.selectFieldAction({ title: defaultFieldName, action: 'copy-id' });
+    expect(fieldId).toBe(await dashboard.getClipboardText());
+
+    // duplicate and verify
+    await fields.selectFieldAction({ title: defaultFieldName, action: 'duplicate' });
+    await fields.saveChanges();
+
+    let fieldsText = await fields.getAllFieldText();
+    expect(fieldsText[fieldsText.findIndex(field => field === defaultFieldName) + 1]).toBe(`${defaultFieldName}_copy`);
+
+    // insert and verify
     await fields.createOrUpdate({ title: 'Above Inserted Field', insertAboveColumnTitle: defaultFieldName });
     await fields.createOrUpdate({ title: 'Below Inserted Field', insertBelowColumnTitle: defaultFieldName });
+
+    // delete and verify
+    await fields.selectFieldAction({ title: `${defaultFieldName}_copy`, action: 'delete' });
+    await fields.saveChanges();
+
+    fieldsText = await fields.getAllFieldText();
+    expect(fieldsText.findIndex(field => field === `${defaultFieldName}_copy`)).toBe(-1);
+
+    // verify grid column header
+    await verifyGridColumnHeaders({ fields: fieldsText });
+
+    // Hide field and verify grid column header
+    await (await fields.getFieldVisibilityCheckbox({ title: defaultFieldName })).click();
+    await fields.saveChanges();
+
+    await verifyGridColumnHeaders({ fields: fieldsText.filter(field => field !== defaultFieldName) });
   });
 });

From 630aeba4622e327cf46c6e57cbaec20dacc19cc1 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:39:53 +0000
Subject: [PATCH 06/13] test(multi-field): search field test cases

---
 .../pages/Dashboard/Details/FieldsPage.ts     | 26 ++++----
 .../db/features/multiFieldEditor.spec.ts      | 63 ++++++++++++++++---
 2 files changed, 70 insertions(+), 19 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
index c9aac907c4..23f0c6fb81 100644
--- a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
+++ b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
@@ -48,6 +48,7 @@ export class FieldsPage extends BasePage {
     title,
     type = 'SingleLineText',
     isUpdateMode = false,
+    saveChanges = true,
     formula = '',
     qrCodeValueColumnTitle = '',
     barcodeValueColumnTitle = '',
@@ -65,6 +66,7 @@ export class FieldsPage extends BasePage {
     title: string;
     type?: string;
     isUpdateMode?: boolean;
+    saveChanges?: boolean;
     formula?: string;
     qrCodeValueColumnTitle?: string;
     barcodeValueColumnTitle?: string;
@@ -196,19 +198,21 @@ export class FieldsPage extends BasePage {
         break;
     }
 
-    await this.saveChanges();
+    if (saveChanges) {
+      await this.saveChanges();
 
-    const fieldsText = await this.getAllFieldText();
+      const fieldsText = await this.getAllFieldText();
 
-    if (insertAboveColumnTitle) {
-      // verify field inserted above the target field
-      expect(fieldsText[fieldsText.findIndex(title => title.startsWith(insertAboveColumnTitle)) - 1]).toBe(title);
-    } else if (insertBelowColumnTitle) {
-      // verify field inserted below the target field
-      expect(fieldsText[fieldsText.findIndex(title => title.startsWith(insertBelowColumnTitle)) + 1]).toBe(title);
-    } else {
-      // verify field inserted at the end
-      expect(fieldsText[fieldsText.length - 1]).toBe(title);
+      if (insertAboveColumnTitle) {
+        // verify field inserted above the target field
+        expect(fieldsText[fieldsText.findIndex(title => title.startsWith(insertAboveColumnTitle)) - 1]).toBe(title);
+      } else if (insertBelowColumnTitle) {
+        // verify field inserted below the target field
+        expect(fieldsText[fieldsText.findIndex(title => title.startsWith(insertBelowColumnTitle)) + 1]).toBe(title);
+      } else {
+        // verify field inserted at the end
+        expect(fieldsText[fieldsText.length - 1]).toBe(title);
+      }
     }
   }
 
diff --git a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
index 5469ee9c49..ef9b653025 100644
--- a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
+++ b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
@@ -1,26 +1,21 @@
 import { expect, test } from '@playwright/test';
 import { DashboardPage } from '../../../pages/Dashboard';
-import { GridPage } from '../../../pages/Dashboard/Grid';
 import setup, { unsetup } from '../../../setup';
 import { FieldsPage } from '../../../pages/Dashboard/Details/FieldsPage';
 import { getTextExcludeIconText } from '../../utils/general';
 
 test.describe('Multi Field Editor', () => {
-  let dashboard: DashboardPage, grid: GridPage, fields: FieldsPage;
+  let dashboard: DashboardPage, fields: FieldsPage;
   let context: any;
   const defaultFieldName = 'Multi Field Editor';
 
   test.beforeEach(async ({ page }) => {
     context = await setup({ page, isEmptyProject: true });
     dashboard = new DashboardPage(page, context.base);
-    grid = dashboard.grid;
     fields = dashboard.details.fields;
 
     await dashboard.treeView.createTable({ title: 'Multifield', baseTitle: context.base.title });
     await openMultiFieldOfATable();
-
-    // Add New Field
-    await fields.createOrUpdate({ title: defaultFieldName });
   });
 
   test.afterEach(async () => {
@@ -50,16 +45,47 @@ test.describe('Multi Field Editor', () => {
     await openMultiFieldOfATable();
   };
 
-  test('Add New field and update', async () => {
+  const searchAndVerifyFields = async ({
+    searchQuery,
+    expectedFields,
+  }: {
+    searchQuery: string;
+    expectedFields: string[];
+  }) => {
+    await fields.searchFieldInput.fill(searchQuery);
+
+    const allFields = await fields.getAllFieldText();
+
+    for (let i = 0; i < allFields.length; i++) {
+      expect(allFields[i]).toBe(expectedFields[i]);
+    }
+  };
+
+  test('Add New field, update and reset ', async () => {
     // Add New Field
     await fields.createOrUpdate({ title: 'Name' });
 
     // Update Field title
     await fields.getField({ title: 'Name' }).click();
     await fields.createOrUpdate({ title: 'Updated Name', isUpdateMode: true });
+
+    // verify grid column header
+    const fieldsText = await fields.getAllFieldText();
+    await verifyGridColumnHeaders({ fields: fieldsText });
+
+    // add new fields then reset changes and verify
+    await fields.createOrUpdate({ title: 'field to reset', saveChanges: false });
+    await fields.createOrUpdate({ title: 'Random', saveChanges: false });
+    await fields.resetFieldChangesButton.click();
+
+    // verify with old fields
+    await verifyGridColumnHeaders({ fields: fieldsText });
   });
 
-  test.only('Field operations: CopyId, Duplicate, InsertAbove, InsertBelow, Hide', async () => {
+  test('Field operations: CopyId, Duplicate, InsertAbove, InsertBelow, Hide', async () => {
+    // Add New Field
+    await fields.createOrUpdate({ title: defaultFieldName });
+
     // copy-id and verify
     const fieldId = await fields.getFieldId({ title: defaultFieldName });
     await fields.selectFieldAction({ title: defaultFieldName, action: 'copy-id' });
@@ -92,4 +118,25 @@ test.describe('Multi Field Editor', () => {
 
     await verifyGridColumnHeaders({ fields: fieldsText.filter(field => field !== defaultFieldName) });
   });
+
+  test('Search field and verify', async () => {
+    const fieldList = ['Single Line Text', 'Long text', 'Rich text', 'Number', 'Percentage'];
+
+    for (const field of fieldList) {
+      await fields.createOrUpdate({ title: field, saveChanges: false });
+    }
+    await fields.saveChanges();
+
+    let searchQuery = 'text';
+    await searchAndVerifyFields({
+      searchQuery,
+      expectedFields: fieldList.filter(field => field.toLowerCase().includes(searchQuery.toLowerCase())),
+    });
+
+    searchQuery = 'Rich text';
+    await searchAndVerifyFields({
+      searchQuery,
+      expectedFields: fieldList.filter(field => field.toLowerCase().includes(searchQuery.toLowerCase())),
+    });
+  });
 });

From 75533b7ced61e74ca7a913623c92363b164c0204 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:39:53 +0000
Subject: [PATCH 07/13] test(multi-field): field reorder test cases

---
 .../pages/Dashboard/Details/FieldsPage.ts     |  5 +-
 .../db/features/multiFieldEditor.spec.ts      | 66 +++++++++++++++----
 2 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
index 23f0c6fb81..cd73fd82b5 100644
--- a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
+++ b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
@@ -3,6 +3,7 @@
 import BasePage from '../../Base';
 import { expect, Locator } from '@playwright/test';
 import { DetailsPage } from './index';
+import { UITypes } from 'nocodb-sdk';
 
 export class FieldsPage extends BasePage {
   readonly detailsPage: DetailsPage;
@@ -46,7 +47,7 @@ export class FieldsPage extends BasePage {
 
   async createOrUpdate({
     title,
-    type = 'SingleLineText',
+    type = UITypes.SingleLineText,
     isUpdateMode = false,
     saveChanges = true,
     formula = '',
@@ -64,7 +65,7 @@ export class FieldsPage extends BasePage {
     insertBelowColumnTitle,
   }: {
     title: string;
-    type?: string;
+    type?: UITypes;
     isUpdateMode?: boolean;
     saveChanges?: boolean;
     formula?: string;
diff --git a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
index ef9b653025..a868a1d207 100644
--- a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
+++ b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
@@ -3,6 +3,7 @@ import { DashboardPage } from '../../../pages/Dashboard';
 import setup, { unsetup } from '../../../setup';
 import { FieldsPage } from '../../../pages/Dashboard/Details/FieldsPage';
 import { getTextExcludeIconText } from '../../utils/general';
+import { UITypes } from 'nocodb-sdk';
 
 test.describe('Multi Field Editor', () => {
   let dashboard: DashboardPage, fields: FieldsPage;
@@ -45,20 +46,11 @@ test.describe('Multi Field Editor', () => {
     await openMultiFieldOfATable();
   };
 
-  const searchAndVerifyFields = async ({
-    searchQuery,
-    expectedFields,
-  }: {
-    searchQuery: string;
-    expectedFields: string[];
-  }) => {
+  const searchAndVerifyFields = async ({ searchQuery, fieldList }: { searchQuery: string; fieldList: string[] }) => {
     await fields.searchFieldInput.fill(searchQuery);
 
     const allFields = await fields.getAllFieldText();
-
-    for (let i = 0; i < allFields.length; i++) {
-      expect(allFields[i]).toBe(expectedFields[i]);
-    }
+    expect(allFields).toEqual(fieldList.filter(field => field.toLowerCase().includes(searchQuery.toLowerCase())));
   };
 
   test('Add New field, update and reset ', async () => {
@@ -130,13 +122,61 @@ test.describe('Multi Field Editor', () => {
     let searchQuery = 'text';
     await searchAndVerifyFields({
       searchQuery,
-      expectedFields: fieldList.filter(field => field.toLowerCase().includes(searchQuery.toLowerCase())),
+      fieldList,
     });
 
     searchQuery = 'Rich text';
     await searchAndVerifyFields({
       searchQuery,
-      expectedFields: fieldList.filter(field => field.toLowerCase().includes(searchQuery.toLowerCase())),
+      fieldList,
     });
   });
+
+  test('Field Reorder and verify', async () => {
+    // default order: ['Title', 'Single Line Text', 'Long Text', 'Number', 'Percent','Links']
+    const fieldList = [
+      {
+        title: 'Single Line Text',
+        type: UITypes.SingleLineText,
+      },
+      {
+        title: 'Long Text',
+        type: UITypes.LongText,
+      },
+      {
+        title: 'Number',
+        type: UITypes.Number,
+      },
+      {
+        title: 'Percent',
+        type: UITypes.Percent,
+      },
+      {
+        title: 'Links',
+        type: UITypes.Links,
+        relationType: 'Has Many',
+        childTable: 'Multifield',
+      },
+    ];
+
+    for (const field of fieldList) {
+      await fields.createOrUpdate({ ...field, saveChanges: false });
+    }
+    await fields.saveChanges();
+    // updated order : ['Title', 'Long Text','Single Line Text', 'Number', 'Percent','Links']
+    await fields.getField({ title: fieldList[0].title }).dragTo(fields.getField({ title: fieldList[1].title }));
+    await expect(fields.getField({ title: fieldList[0].title })).toContainText('Updated field');
+
+    // updated order : ['Title', 'Long Text','Single Line Text', 'Number','Links', 'Percent']
+    await fields.getField({ title: fieldList[4].title }).dragTo(fields.getField({ title: fieldList[3].title }));
+    await expect(fields.getField({ title: fieldList[4].title })).toContainText('Updated field');
+
+    await fields.saveChanges();
+    const fieldsText = await fields.getAllFieldText();
+    const expectedFieldText = ['Title', 'Long Text', 'Single Line Text', 'Number', 'Links', 'Percent'];
+
+    expect(fieldsText).toEqual(expectedFieldText);
+
+    await verifyGridColumnHeaders({ fields: expectedFieldText });
+  });
 });

From 2ff1d05869034a48631c6c5b60c3f2da08afd6d2 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:39:53 +0000
Subject: [PATCH 08/13] test(multi-field): field status check and delete using
 keyboard

---
 .../db/features/multiFieldEditor.spec.ts      | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
index a868a1d207..56c26d0ec6 100644
--- a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
+++ b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
@@ -55,14 +55,19 @@ test.describe('Multi Field Editor', () => {
 
   test('Add New field, update and reset ', async () => {
     // Add New Field
-    await fields.createOrUpdate({ title: 'Name' });
+    await fields.createOrUpdate({ title: 'Name', saveChanges: false });
+    await expect(fields.getField({ title: 'Name' })).toContainText('New field');
+    await fields.saveChanges();
 
     // Update Field title
     await fields.getField({ title: 'Name' }).click();
-    await fields.createOrUpdate({ title: 'Updated Name', isUpdateMode: true });
+    await fields.createOrUpdate({ title: 'Updated Name', saveChanges: false, isUpdateMode: true });
+    await expect(fields.getField({ title: 'Updated Name' })).toContainText('Updated field');
+    await fields.saveChanges();
 
     // verify grid column header
     const fieldsText = await fields.getAllFieldText();
+    expect(fieldsText).toEqual(['Title', 'Updated Name']);
     await verifyGridColumnHeaders({ fields: fieldsText });
 
     // add new fields then reset changes and verify
@@ -74,7 +79,7 @@ test.describe('Multi Field Editor', () => {
     await verifyGridColumnHeaders({ fields: fieldsText });
   });
 
-  test('Field operations: CopyId, Duplicate, InsertAbove, InsertBelow, Hide', async () => {
+  test('Field operations: CopyId, Duplicate, InsertAbove, InsertBelow, Delete, Hide', async () => {
     // Add New Field
     await fields.createOrUpdate({ title: defaultFieldName });
 
@@ -95,11 +100,21 @@ test.describe('Multi Field Editor', () => {
     await fields.createOrUpdate({ title: 'Below Inserted Field', insertBelowColumnTitle: defaultFieldName });
 
     // delete and verify
+    // By field action menu
     await fields.selectFieldAction({ title: `${defaultFieldName}_copy`, action: 'delete' });
+    await expect(fields.getField({ title: `${defaultFieldName}_copy` })).toContainText('Deleted field');
+
+    // By keyboard delete button
+    await fields.getField({ title: 'Above Inserted Field' }).click();
+    await dashboard.rootPage.keyboard.press((await dashboard.isMacOs()) ? 'Meta+Delete' : 'Delete');
+    await expect(fields.getField({ title: 'Above Inserted Field' })).toContainText('Deleted field');
+
     await fields.saveChanges();
 
     fieldsText = await fields.getAllFieldText();
-    expect(fieldsText.findIndex(field => field === `${defaultFieldName}_copy`)).toBe(-1);
+    expect(
+      fieldsText.every(field => !['Above Inserted Field', `${defaultFieldName}_copy`].includes(field))
+    ).toBeTruthy();
 
     // verify grid column header
     await verifyGridColumnHeaders({ fields: fieldsText });

From 536f2c4aa2bed5da98f3582088160ae98ff54e18 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:39:53 +0000
Subject: [PATCH 09/13] test(multi-field): field restore test cases

---
 .../pages/Dashboard/Details/FieldsPage.ts     |  4 ++++
 .../db/features/multiFieldEditor.spec.ts      | 20 ++++++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
index cd73fd82b5..17f6c1b1b9 100644
--- a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
+++ b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
@@ -45,6 +45,10 @@ export class FieldsPage extends BasePage {
     await this.addNewFieldButton.click();
   }
 
+  async clickRestoreField({ title }: { title: string }) {
+    await this.getField({ title }).getByTestId('nc-field-restore-changes').click();
+  }
+
   async createOrUpdate({
     title,
     type = UITypes.SingleLineText,
diff --git a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
index 56c26d0ec6..08c3b312e4 100644
--- a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
+++ b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
@@ -50,10 +50,12 @@ test.describe('Multi Field Editor', () => {
     await fields.searchFieldInput.fill(searchQuery);
 
     const allFields = await fields.getAllFieldText();
-    expect(allFields).toEqual(fieldList.filter(field => field.toLowerCase().includes(searchQuery.toLowerCase())));
+    expect(allFields).toEqual(
+      searchQuery ? fieldList.filter(field => field.toLowerCase().includes(searchQuery.toLowerCase())) : fieldList
+    );
   };
 
-  test('Add New field, update and reset ', async () => {
+  test('Add New field, update & Restore, reset ', async () => {
     // Add New Field
     await fields.createOrUpdate({ title: 'Name', saveChanges: false });
     await expect(fields.getField({ title: 'Name' })).toContainText('New field');
@@ -65,6 +67,11 @@ test.describe('Multi Field Editor', () => {
     await expect(fields.getField({ title: 'Updated Name' })).toContainText('Updated field');
     await fields.saveChanges();
 
+    // Update and restore field changes
+    await fields.getField({ title: 'Updated Name' }).click();
+    await fields.createOrUpdate({ title: 'Updated Name to restore', saveChanges: false, isUpdateMode: true });
+    await fields.clickRestoreField({ title: 'Updated Name to restore' });
+
     // verify grid column header
     const fieldsText = await fields.getAllFieldText();
     expect(fieldsText).toEqual(['Title', 'Updated Name']);
@@ -143,7 +150,14 @@ test.describe('Multi Field Editor', () => {
     searchQuery = 'Rich text';
     await searchAndVerifyFields({
       searchQuery,
-      fieldList,
+      fieldList: ['Title', ...fieldList],
+    });
+
+    // clear search and verify
+    await fields.clearSearch();
+    await searchAndVerifyFields({
+      searchQuery: '',
+      fieldList: ['Title', ...fieldList],
     });
   });
 

From 85bbd8b2726ddaa6966f9206c7c4a1c945f1a2ac Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:39:53 +0000
Subject: [PATCH 10/13] test(multi-field): check status of all fields

---
 .../pages/Dashboard/Details/FieldsPage.ts     |   4 +-
 .../db/features/multiFieldEditor.spec.ts      | 132 ++++++++++++++++++
 2 files changed, 134 insertions(+), 2 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
index 17f6c1b1b9..7bb3163f33 100644
--- a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
+++ b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
@@ -63,8 +63,8 @@ export class FieldsPage extends BasePage {
     relationType = '',
     rollupType = '',
     format = '',
-    dateFormat = '',
-    timeFormat = '',
+    dateFormat = 'YYYY-MM-DD',
+    timeFormat = 'HH:mm',
     insertAboveColumnTitle,
     insertBelowColumnTitle,
   }: {
diff --git a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
index 08c3b312e4..1aeea31f5b 100644
--- a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
+++ b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
@@ -5,6 +5,118 @@ import { FieldsPage } from '../../../pages/Dashboard/Details/FieldsPage';
 import { getTextExcludeIconText } from '../../utils/general';
 import { UITypes } from 'nocodb-sdk';
 
+const allFieldList = [
+  {
+    title: 'Single Line Text',
+    type: UITypes.SingleLineText,
+  },
+  {
+    title: 'Long Text',
+    type: UITypes.LongText,
+  },
+  {
+    title: 'Number',
+    type: UITypes.Number,
+  },
+  {
+    title: 'Decimal',
+    type: UITypes.Decimal,
+  },
+  {
+    title: 'Attachment',
+    type: UITypes.Attachment,
+  },
+  {
+    title: 'Checkbox',
+    type: UITypes.Checkbox,
+  },
+  {
+    title: 'MultiSelect',
+    type: UITypes.MultiSelect,
+  },
+  {
+    title: 'SingleSelect',
+    type: UITypes.SingleSelect,
+  },
+  {
+    title: 'Date',
+    type: UITypes.Date,
+  },
+  {
+    title: 'DateTime',
+    type: UITypes.DateTime,
+  },
+  {
+    title: 'Year',
+    type: UITypes.Year,
+  },
+  {
+    title: 'Time',
+    type: UITypes.Time,
+  },
+  {
+    title: 'PhoneNumber',
+    type: UITypes.PhoneNumber,
+  },
+  {
+    title: 'Email',
+    type: UITypes.Email,
+  },
+  {
+    title: 'URL',
+    type: UITypes.URL,
+  },
+  {
+    title: 'Currency',
+    type: UITypes.Currency,
+  },
+  {
+    title: 'Percent',
+    type: UITypes.Percent,
+  },
+  {
+    title: 'Duration',
+    type: UITypes.Duration,
+  },
+  {
+    title: 'Rating',
+    type: UITypes.Rating,
+  },
+  {
+    title: 'Formula',
+    type: UITypes.Formula,
+    formula: 'LEN({Title})',
+  },
+  {
+    title: 'QrCode',
+    type: UITypes.QrCode,
+    qrCodeValueColumnTitle: 'Title',
+  },
+  {
+    title: 'Barcode',
+    type: UITypes.Barcode,
+    barcodeValueColumnTitle: 'Title',
+  },
+  {
+    title: 'Geometry',
+    type: UITypes.Geometry,
+  },
+  {
+    title: 'JSON',
+    type: UITypes.JSON,
+  },
+  {
+    title: 'User',
+    type: UITypes.User,
+  },
+  {
+    title: 'Links',
+    type: UITypes.Links,
+    relationType: 'Has Many',
+    childTable: 'Multifield',
+  },
+];
+
 test.describe('Multi Field Editor', () => {
   let dashboard: DashboardPage, fields: FieldsPage;
   let context: any;
@@ -86,6 +198,26 @@ test.describe('Multi Field Editor', () => {
     await verifyGridColumnHeaders({ fields: fieldsText });
   });
 
+  test('Add all fields and check status on clicking each field', async () => {
+    // Add all fields, verify status and save
+    for (const field of allFieldList) {
+      await fields.createOrUpdate({ ...field, saveChanges: false });
+      await expect(fields.getField({ title: field.title })).toContainText('New field');
+      await fields.saveChanges();
+    }
+    let fieldsText = await fields.getAllFieldText();
+
+    // verify all newly added field and its order
+    expect(fieldsText).toEqual(['Title', ...allFieldList.map(field => field.title)]);
+
+    // click on each field and check status
+    fieldsText = await fields.getAllFieldText();
+    for (const title of fieldsText) {
+      await fields.getField({ title }).click();
+      await expect(fields.getField({ title })).not.toContainText(['New field', 'Updated field']);
+    }
+  });
+
   test('Field operations: CopyId, Duplicate, InsertAbove, InsertBelow, Delete, Hide', async () => {
     // Add New Field
     await fields.createOrUpdate({ title: defaultFieldName });

From 29f781710d1ddb70dc53d88f344a106a7653c854 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:39:53 +0000
Subject: [PATCH 11/13] test(mulfi-field): keyboard shortcuts test cases

---
 .../db/features/multiFieldEditor.spec.ts      | 63 +++++++++++++++----
 1 file changed, 50 insertions(+), 13 deletions(-)

diff --git a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
index 1aeea31f5b..c239712699 100644
--- a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
+++ b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
@@ -117,7 +117,7 @@ const allFieldList = [
   },
 ];
 
-test.describe('Multi Field Editor', () => {
+test.describe.only('Multi Field Editor', () => {
   let dashboard: DashboardPage, fields: FieldsPage;
   let context: any;
   const defaultFieldName = 'Multi Field Editor';
@@ -140,6 +140,12 @@ test.describe('Multi Field Editor', () => {
     await dashboard.details.clickFieldsTab();
   }
 
+  async function toggleShowSystemFieldsFromDataTab() {
+    await dashboard.grid.topbar.openDataTab();
+    await dashboard.grid.toolbar.fields.toggleShowSystemFields();
+    await openMultiFieldOfATable();
+  }
+
   const verifyGridColumnHeaders = async ({ fields = [] }: { fields: string[] }) => {
     await dashboard.grid.topbar.openDataTab();
 
@@ -167,7 +173,13 @@ test.describe('Multi Field Editor', () => {
     );
   };
 
-  test('Add New field, update & Restore, reset ', async () => {
+  test('Verify system fields are not listed, Add New field, update & Restore, reset', async () => {
+    //Verify system fields are not listed
+    await toggleShowSystemFieldsFromDataTab();
+    let fieldsText = await fields.getAllFieldText();
+    expect(fieldsText.length).toBe(1);
+    await toggleShowSystemFieldsFromDataTab();
+
     // Add New Field
     await fields.createOrUpdate({ title: 'Name', saveChanges: false });
     await expect(fields.getField({ title: 'Name' })).toContainText('New field');
@@ -185,7 +197,7 @@ test.describe('Multi Field Editor', () => {
     await fields.clickRestoreField({ title: 'Updated Name to restore' });
 
     // verify grid column header
-    const fieldsText = await fields.getAllFieldText();
+    fieldsText = await fields.getAllFieldText();
     expect(fieldsText).toEqual(['Title', 'Updated Name']);
     await verifyGridColumnHeaders({ fields: fieldsText });
 
@@ -198,7 +210,8 @@ test.describe('Multi Field Editor', () => {
     await verifyGridColumnHeaders({ fields: fieldsText });
   });
 
-  test('Add all fields and check status on clicking each field', async () => {
+  // Todo: remove `skip`, if `optimized dependencies changed. reloading` issue is fixed
+  test.skip('Add all fields and check status on clicking each field', async () => {
     // Add all fields, verify status and save
     for (const field of allFieldList) {
       await fields.createOrUpdate({ ...field, saveChanges: false });
@@ -239,21 +252,13 @@ test.describe('Multi Field Editor', () => {
     await fields.createOrUpdate({ title: 'Below Inserted Field', insertBelowColumnTitle: defaultFieldName });
 
     // delete and verify
-    // By field action menu
     await fields.selectFieldAction({ title: `${defaultFieldName}_copy`, action: 'delete' });
     await expect(fields.getField({ title: `${defaultFieldName}_copy` })).toContainText('Deleted field');
 
-    // By keyboard delete button
-    await fields.getField({ title: 'Above Inserted Field' }).click();
-    await dashboard.rootPage.keyboard.press((await dashboard.isMacOs()) ? 'Meta+Delete' : 'Delete');
-    await expect(fields.getField({ title: 'Above Inserted Field' })).toContainText('Deleted field');
-
     await fields.saveChanges();
 
     fieldsText = await fields.getAllFieldText();
-    expect(
-      fieldsText.every(field => !['Above Inserted Field', `${defaultFieldName}_copy`].includes(field))
-    ).toBeTruthy();
+    expect(!fieldsText.includes(`${defaultFieldName}_copy`)).toBeTruthy();
 
     // verify grid column header
     await verifyGridColumnHeaders({ fields: fieldsText });
@@ -340,4 +345,36 @@ test.describe('Multi Field Editor', () => {
 
     await verifyGridColumnHeaders({ fields: expectedFieldText });
   });
+
+  test('Keyboard shortcuts: add new field, save and delete', async () => {
+    // add new field
+    await dashboard.rootPage.keyboard.press('Alt+C');
+
+    // verify field is added and has `New field` status
+    let fieldsText = await fields.getAllFieldText();
+    await expect(fields.getField({ title: fieldsText[fieldsText.length - 1] })).toContainText('New field');
+
+    // update title
+    await fields.createOrUpdate({ title: defaultFieldName, isUpdateMode: true });
+
+    // save the changes
+    await dashboard.rootPage.keyboard.press((await dashboard.isMacOs()) ? 'Meta+S' : 'Control+S');
+    await dashboard.rootPage.waitForTimeout(500);
+
+    // verify result
+    fieldsText = await fields.getAllFieldText();
+    expect(fieldsText).toEqual(['Title', defaultFieldName]);
+
+    // delete field
+    await fields.getField({ title: defaultFieldName }).click();
+    await dashboard.rootPage.keyboard.press((await dashboard.isMacOs()) ? 'Meta+Delete' : 'Delete');
+    await expect(fields.getField({ title: defaultFieldName })).toContainText('Deleted field');
+
+    // save the changes
+    await dashboard.rootPage.keyboard.press((await dashboard.isMacOs()) ? 'Meta+S' : 'Control+S');
+    await dashboard.rootPage.waitForTimeout(500);
+
+    fieldsText = await fields.getAllFieldText();
+    expect(fieldsText).toEqual(['Title']);
+  });
 });

From 09161be3e0a9cdcbc1a4e7d34d25729c619056a4 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:39:53 +0000
Subject: [PATCH 12/13] fix: remove only from test describe

---
 tests/playwright/tests/db/features/multiFieldEditor.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
index c239712699..583bd875f1 100644
--- a/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
+++ b/tests/playwright/tests/db/features/multiFieldEditor.spec.ts
@@ -117,7 +117,7 @@ const allFieldList = [
   },
 ];
 
-test.describe.only('Multi Field Editor', () => {
+test.describe('Multi Field Editor', () => {
   let dashboard: DashboardPage, fields: FieldsPage;
   let context: any;
   const defaultFieldName = 'Multi Field Editor';

From 5499d85755ead6a97a068a18400e5482ecd4692e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:39:54 +0000
Subject: [PATCH 13/13] fix(nc-gui): use i18n translation in multified editor

---
 .../components/smartsheet/details/Fields.vue  | 57 ++++++++++---------
 packages/nc-gui/lang/en.json                  | 30 ++++++++--
 2 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 87182660f8..12a05b2a98 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -33,6 +33,7 @@ interface moveOp {
   index: number
   order: number
 }
+const { t } = useI18n()
 
 const { $api } = useNuxtApp()
 
@@ -228,7 +229,7 @@ const duplicateField = async (field: TableExplorerColumn) => {
     case UITypes.Lookup:
     case UITypes.Rollup:
     case UITypes.Formula:
-      return message.info('Not available at the moment')
+      return message.info(t('msg.info.notAvailableAtTheMoment'))
     case UITypes.SingleSelect:
     case UITypes.MultiSelect:
       fieldPayload = {
@@ -270,7 +271,7 @@ const onFieldUpdate = (state: TableExplorerColumn) => {
   const col = fields.value.find((col) => compareCols(col, state))
   if (!col) return
 
-  const diffs = diff(col, state)
+  const diffs = diff(col, state) as Partial<TableExplorerColumn>
 
   // hack to prevent update status `Updated Field` when clicking on field first time
   let isUpdated = true
@@ -389,13 +390,13 @@ const onMove = (_event: { moved: { newIndex: number; oldIndex: number } }) => {
   if (op?.op === 'update') {
     const diffs = diff(op.column, field)
     if (!(Object.keys(diffs).length === 1 && 'column_order' in diffs)) {
-      message.warning('You cannot move field that is being edited. Either save or discard changes first')
+      message.warning(t('msg.warning.multiField.moveEditedField'))
       return
     }
   }
 
   if (op?.op === 'delete') {
-    message.warning('You cannot move field that is deleted. Either save or discard changes first')
+    message.warning(t('msg.warning.multiField.moveDeletedField'))
     return
   }
 
@@ -563,7 +564,7 @@ const isColumnsValid = computed(() => fields.value.every((f) => isColumnValid(f)
 
 const saveChanges = async () => {
   if (!isColumnsValid.value) {
-    message.error('Please complete the configuration of all fields before saving')
+    message.error(t('msg.error.multiFieldSaveValidation'))
     return
   } else if (!loading.value && ops.value.length < 1 && moveOps.value.length < 1 && visibilityOps.value.length < 1) {
     return
@@ -640,7 +641,7 @@ const saveChanges = async () => {
 
     visibilityOps.value = []
   } catch (e) {
-    message.error('Something went wrong')
+    message.error(t('msg.error.somethingWentWrong'))
   } finally {
     loading.value = false
   }
@@ -648,7 +649,7 @@ const saveChanges = async () => {
 
 const toggleVisibility = async (checked: boolean, field: Field) => {
   if (field.fk_column_id && fieldStatuses.value[field.fk_column_id]) {
-    message.warning('You cannot change visibility of a field that is being edited. Please save or discard changes first.')
+    message.warning(t('msg.warning.multiField.fieldVisibility'))
     return
   }
   if (visibilityOps.value.find((op) => op.column.fk_column_id === field.fk_column_id)) {
@@ -742,7 +743,7 @@ onKeyDown('Backspace', () => {
 onKeyDown('ArrowRight', () => {
   if (document.activeElement?.tagName === 'TEXTAREA') return
   if (activeField.value) {
-    const input = document.querySelector('.nc-fields-input')
+    const input = document.querySelector('.nc-fields-input') as HTMLInputElement
     if (input) {
       input.focus()
     }
@@ -821,7 +822,7 @@ watch(
             data-testid="nc-field-search-input"
             v-model:value="searchQuery"
             class="!h-8 !px-1 !rounded-lg !w-72"
-            placeholder="Search field"
+            :placeholder="$t('placeholder.searchFields')"
           >
             <template #prefix>
               <GeneralIcon icon="search" class="mx-1 h-3.5 w-3.5 text-gray-500 group-hover:text-black" />
@@ -849,7 +850,7 @@ watch(
               >
                 <div class="flex items-center gap-2">
                   <GeneralIcon icon="plus" class="w-3" />
-                  New Field
+                  {{ $t('labels.multiField.newField') }}
                 </div>
               </NcButton>
             </NcTooltip>
@@ -860,7 +861,7 @@ watch(
               :disabled="(!loading && ops.length < 1 && moveOps.length < 1 && visibilityOps.length < 1) || isLocked"
               @click="clearChanges()"
             >
-              Reset
+              {{ $t('general.reset') }}
             </NcButton>
             <NcTooltip :disabled="isLocked">
               <template #title> {{ `${renderCmdOrCtrlKey()} + S` }} </template>
@@ -876,7 +877,7 @@ watch(
                 "
                 @click="saveChanges()"
               >
-                Save changes
+                {{ $t('labels.multiField.saveChanges') }}
               </NcButton>
             </NcTooltip>
           </div>
@@ -956,7 +957,7 @@ watch(
                         class="bg-red-50 text-red-700"
                         data-testid="nc-field-status-deleted-field"
                       >
-                        Deleted field
+                        {{ $t('labels.multiField.deletedField') }}
                       </NcBadge>
                       <NcBadge
                         v-else-if="fieldStatus(field) === 'add'"
@@ -965,7 +966,7 @@ watch(
                         class="bg-green-50 text-green-700"
                         data-testid="nc-field-status-new-field"
                       >
-                        New field
+                        {{ $t('labels.multiField.newField') }}
                       </NcBadge>
 
                       <NcBadge
@@ -975,7 +976,7 @@ watch(
                         class="bg-orange-50 text-orange-700"
                         data-testid="nc-field-status-updated-field"
                       >
-                        Updated field
+                        {{ $t('labels.multiField.updatedField') }}
                       </NcBadge>
                       <NcBadge
                         v-if="!isColumnValid(field)"
@@ -984,7 +985,7 @@ watch(
                         class="ml-1 bg-yellow-50 text-yellow-700"
                         data-testid="nc-field-status-incomplete-configuration"
                       >
-                        Incomplete configuration
+                        {{ $t('labels.multiField.incompleteConfiguration') }}
                       </NcBadge>
                     </div>
                     <NcButton
@@ -998,7 +999,7 @@ watch(
                     >
                       <div class="flex items-center text-xs gap-1">
                         <GeneralIcon icon="reload" />
-                        Restore
+                        {{ $t('general.restore') }}
                       </div>
                     </NcButton>
                     <NcDropdown
@@ -1053,7 +1054,7 @@ watch(
                               @click="duplicateField(field)"
                               data-testid="nc-field-item-action-duplicate"
                             >
-                              <Icon class="iconify text-gray-800" icon="lucide:copy" /><span>Duplicate</span>
+                              <Icon class="iconify text-gray-800" icon="lucide:copy" /><span>{{ $t('general.duplicate') }}</span>
                             </NcMenuItem>
                             <NcMenuItem
                               v-if="!field.pv"
@@ -1061,14 +1062,18 @@ watch(
                               @click="addField(field, true)"
                               data-testid="nc-field-item-action-insert-above"
                             >
-                              <Icon class="iconify text-gray-800" icon="lucide:arrow-up" /><span>Insert above</span>
+                              <Icon class="iconify text-gray-800" icon="lucide:arrow-up" /><span>{{
+                                $t('general.insertAbove')
+                              }}</span>
                             </NcMenuItem>
                             <NcMenuItem
                               key="table-explorer-insert-below"
                               @click="addField(field)"
                               data-testid="nc-field-item-action-insert-below"
                             >
-                              <Icon class="iconify text-gray-800" icon="lucide:arrow-down" /><span>Insert below</span>
+                              <Icon class="iconify text-gray-800" icon="lucide:arrow-down" /><span>{{
+                                $t('general.insertBelow')
+                              }}</span>
                             </NcMenuItem>
 
                             <a-menu-divider class="my-1.5" />
@@ -1081,7 +1086,7 @@ watch(
                             >
                               <div class="text-red-500">
                                 <GeneralIcon icon="delete" class="group-hover:text-accent -ml-0.25 -mt-0.75 mr-0.5" />
-                                Delete
+                                {{ $t('general.delete') }}
                               </div>
                             </NcMenuItem>
                           </template>
@@ -1147,7 +1152,7 @@ watch(
                         class="bg-red-50 text-red-700"
                         data-testid="nc-field-status-deleted-field"
                       >
-                        Deleted field
+                        {{ $t('labels.multiField.deletedField') }}
                       </NcBadge>
 
                       <NcBadge
@@ -1157,7 +1162,7 @@ watch(
                         class="bg-orange-50 text-orange-700"
                         data-testid="nc-field-status-updated-field"
                       >
-                        Updated field
+                        {{ $t('labels.multiField.updatedField') }}
                       </NcBadge>
                     </div>
                     <NcButton
@@ -1171,7 +1176,7 @@ watch(
                     >
                       <div class="flex items-center text-xs gap-1">
                         <GeneralIcon icon="reload" />
-                        Restore
+                        {{ $t('general.restore') }}
                       </div>
                     </NcButton>
                     <NcDropdown
@@ -1252,9 +1257,9 @@ watch(
               />
               <div v-else class="w-[25rem] flex flex-col justify-center p-4 items-center">
                 <img src="~assets/img/fieldPlaceholder.svg" class="!w-[18rem]" />
-                <div class="text-2xl text-gray-600 font-bold text-center pt-6">Select a field</div>
+                <div class="text-2xl text-gray-600 font-bold text-center pt-6">{{ $t('labels.multiField.selectField') }}</div>
                 <div class="text-center text-sm px-2 text-gray-500 pt-6">
-                  Make changes to field properties by selecting a field from the list
+                  {{ $t('labels.multiField.selectFieldLabel') }}
                 </div>
               </div>
             </div>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 9b8cc2bf60..b001e929a2 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -157,6 +157,8 @@
     "groupingField": "Grouping Field",
     "insertAfter": "Insert After",
     "insertBefore": "Insert Before",
+    "insertAbove": "Insert above",
+    "insertBelow": "Insert below",
     "hideField": "Hide Field",
     "sortAsc": "Sort Ascending",
     "sortDesc": "Sort Descending",
@@ -189,7 +191,8 @@
     "shift": "Shift",
     "enter": "Enter",
     "seconds": "Seconds",
-    "paste": "Paste"
+    "paste": "Paste",
+    "restore": "Restore"
   },
   "objects": {
     "workspace": "Workspace",
@@ -642,7 +645,16 @@
     "changeWsName": "Change Workspace Name",
     "pressEnter": "Press Enter",
     "newFormLoaded": "New form will be loaded after",
-    "webhook": "Webhook"
+    "webhook": "Webhook",
+    "multiField": {
+      "newField": "New field",
+      "saveChanges": "Save changes",
+      "updatedField": "Updated field",
+      "deletedField": "Deleted field",
+      "incompleteConfiguration": "Incomplete configuration",
+      "selectField": "Select a field",
+      "selectFieldLabel": "Make changes to field properties by selecting a field from the list"
+    }
   },
   "activity": {
     "openInANewTab": "Open in a new tab",
@@ -1048,7 +1060,12 @@
         "barcodeFieldsCannotBeDirectlyChanged": "Warning: Barcode fields cannot be directly changed."
       },
       "duplicateProject": "Are you sure you want to duplicate the base?",
-      "duplicateTable": "Are you sure you want to duplicate the table?"
+      "duplicateTable": "Are you sure you want to duplicate the table?",
+      "multiField": {
+        "fieldVisibility": "You cannot change visibility of a field that is being edited. Please save or discard changes first.",
+        "moveEditedField": "You cannot move field that is being edited. Either save or discard changes first",
+        "moveDeletedField": "You cannot move field that is deleted. Either save or discard changes first"
+      }
     },
     "info": {
       "disabledAsViewLocked": "Disabled as View is locked",
@@ -1211,7 +1228,8 @@
       "goToNext": "Go to next",
       "thankYou": "Thank you!",
       "submittedFormData": "You have successfully submitted the form data.",
-      "editingSystemKeyNotSupported": "Editing system key not supported"
+      "editingSystemKeyNotSupported": "Editing system key not supported",
+      "notAvailableAtTheMoment": "Not available at the moment"
     },
     "error": {
       "nameRequired": "Name Required",
@@ -1289,7 +1307,9 @@
       "fieldRequired": "{value} cannot be empty.",
       "projectNotAccessible": "Base not accessible",
       "copyToClipboardError": "Failed to copy to clipboard",
-      "pasteFromClipboardError": "Failed to paste from clipboard"
+      "pasteFromClipboardError": "Failed to paste from clipboard",
+      "multiFieldSaveValidation": "Please complete the configuration of all fields before saving",
+      "somethingWentWrong": "Something went wrong"
     },
     "toast": {
       "exportMetadata": "Base metadata exported successfully",