From 0f5bb23d43a8a67f34fca52252d76f00b9d1ed88 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 10 Aug 2022 18:50:50 +0300
Subject: [PATCH 01/13] fix: use column_name instead of title for queries

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nocodb/src/lib/meta/api/columnApis.ts     | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/columnApis.ts b/packages/nocodb/src/lib/meta/api/columnApis.ts
index cc441c0cb4..c76406a04b 100644
--- a/packages/nocodb/src/lib/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/meta/api/columnApis.ts
@@ -748,13 +748,13 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
       // MultiSelect to SingleSelect
       if (column.uidt === UITypes.MultiSelect && colBody.uidt === UITypes.SingleSelect) {
         if (driverType === 'mysql' || driverType === 'mysql2') {
-          await dbDriver.raw(`UPDATE ?? SET ?? = SUBSTRING_INDEX(??, ',', 1) WHERE ?? LIKE '%,%';`, [table.table_name, column.title, column.title, column.title]);
+          await dbDriver.raw(`UPDATE ?? SET ?? = SUBSTRING_INDEX(??, ',', 1) WHERE ?? LIKE '%,%';`, [table.table_name, column.column_name, column.column_name, column.column_name]);
         } else if (driverType === 'pg') {
-          await dbDriver.raw(`UPDATE ?? SET ?? = split_part(??, ',', 1);`, [table.table_name, column.title, column.title]);
+          await dbDriver.raw(`UPDATE ?? SET ?? = split_part(??, ',', 1);`, [table.table_name, column.column_name, column.column_name]);
         } else if (driverType === 'mssql') {
-          await dbDriver.raw(`UPDATE ?? SET ?? = LEFT(cast(?? as varchar(max)), CHARINDEX(',', ??) - 1) WHERE CHARINDEX(',', ??) > 0;`, [table.table_name, column.title, column.title, column.title, column.title]);
+          await dbDriver.raw(`UPDATE ?? SET ?? = LEFT(cast(?? as varchar(max)), CHARINDEX(',', ??) - 1) WHERE CHARINDEX(',', ??) > 0;`, [table.table_name, column.column_name, column.column_name, column.column_name, column.column_name]);
         } else if (driverType === 'sqlite3') {
-          await dbDriver.raw(`UPDATE ?? SET ?? = substr(??, 1, instr(??, ',') - 1) WHERE ?? LIKE '%,%';`, [table.table_name, column.title, column.title, column.title, column.title]);
+          await dbDriver.raw(`UPDATE ?? SET ?? = substr(??, 1, instr(??, ',') - 1) WHERE ?? LIKE '%,%';`, [table.table_name, column.column_name, column.column_name, column.column_name, column.column_name]);
         }
       }
 
@@ -811,19 +811,19 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
         }
         if (column.uidt === UITypes.SingleSelect) { 
           if (driverType === 'mssql') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = NULL WHERE ?? LIKE ?`, [table.table_name, column.title, column.title, option.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = NULL WHERE ?? LIKE ?`, [table.table_name, column.column_name, column.column_name, option.title]);
           } else {
-            await baseModel.bulkUpdateAll({ where: `(${column.title},eq,${option.title})` }, { [column.title]: null });
+            await baseModel.bulkUpdateAll({ where: `(${column.column_name},eq,${option.title})` }, { [column.column_name]: null });
           }
         } else if (column.uidt === UITypes.MultiSelect) {
           if (driverType === 'mysql' || driverType === 'mysql2') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), ',')) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.title, column.title, option.title, option.title, column.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), ',')) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.column_name, column.column_name, option.title, option.title, column.column_name]);
           } else if (driverType === 'pg') {
-            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_remove(string_to_array(??, ','), ?), ',')`, [table.table_name, column.title, column.title, option.title]);
+            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_remove(string_to_array(??, ','), ?), ',')`, [table.table_name, column.column_name, column.column_name, option.title]);
           } else if (driverType === 'mssql') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), ','), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), ',')) - 2)`, [table.table_name, column.title, column.title, option.title, column.title, option.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), ','), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), ',')) - 2)`, [table.table_name, column.column_name, column.column_name, option.title, column.column_name, option.title]);
           } else if (driverType === 'sqlite3') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ','), ',')`, [table.table_name, column.title, column.title, option.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ','), ',')`, [table.table_name, column.column_name, column.column_name, option.title]);
           }
         }
       }
@@ -909,19 +909,19 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
 
         if (column.uidt === UITypes.SingleSelect) { 
           if (driverType === 'mssql') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = ? WHERE ?? LIKE ?`, [table.table_name, column.title, newOp.title, column.title, option.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = ? WHERE ?? LIKE ?`, [table.table_name, column.column_name, newOp.title, column.column_name, option.title]);
           } else {
-            await baseModel.bulkUpdateAll({ where: `(${column.title},eq,${option.title})` }, { [column.title]: newOp.title });
+            await baseModel.bulkUpdateAll({ where: `(${column.column_name},eq,${option.title})` }, { [column.column_name]: newOp.title });
           }
         } else if (column.uidt === UITypes.MultiSelect) {
           if (driverType === 'mysql' || driverType === 'mysql2') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), CONCAT(',', ?, ','))) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.title, column.title, option.title, newOp.title, option.title, column.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), CONCAT(',', ?, ','))) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.column_name, column.column_name, option.title, newOp.title, option.title, column.column_name]);
           } else if (driverType === 'pg') {
-            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_replace(string_to_array(??, ','), ?, ?), ',')`, [table.table_name, column.title, column.title, option.title, newOp.title]);
+            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_replace(string_to_array(??, ','), ?, ?), ',')`, [table.table_name, column.column_name, column.column_name, option.title, newOp.title]);
           } else if (driverType === 'mssql') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ',')), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ','))) - 2)`, [table.table_name, column.title, column.title, option.title, newOp.title, column.title, option.title, newOp.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ',')), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ','))) - 2)`, [table.table_name, column.column_name, column.column_name, option.title, newOp.title, column.column_name, option.title, newOp.title]);
           } else if (driverType === 'sqlite3') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ',' || ? || ','), ',')`, [table.table_name, column.title, column.title, option.title, newOp.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ',' || ? || ','), ',')`, [table.table_name, column.column_name, column.column_name, option.title, newOp.title]);
           }
         }
       }
@@ -930,19 +930,19 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
         let newOp = ch.def_option;
         if (column.uidt === UITypes.SingleSelect) { 
           if (driverType === 'mssql') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = ? WHERE ?? LIKE ?`, [table.table_name, column.title, newOp.title, column.title, ch.temp_title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = ? WHERE ?? LIKE ?`, [table.table_name, column.column_name, newOp.title, column.column_name, ch.temp_title]);
           } else {
-            await baseModel.bulkUpdateAll({ where: `(${column.title},eq,${ch.temp_title})` }, { [column.title]: newOp.title });
+            await baseModel.bulkUpdateAll({ where: `(${column.column_name},eq,${ch.temp_title})` }, { [column.column_name]: newOp.title });
           }
         } else if (column.uidt === UITypes.MultiSelect) {
           if (driverType === 'mysql' || driverType === 'mysql2') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), CONCAT(',', ?, ','))) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.title, column.title, ch.temp_title, newOp.title, ch.temp_title, column.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(BOTH ',' FROM REPLACE(CONCAT(',', ??, ','), CONCAT(',', ?, ','), CONCAT(',', ?, ','))) WHERE FIND_IN_SET(?, ??)`, [table.table_name, column.column_name, column.column_name, ch.temp_title, newOp.title, ch.temp_title, column.column_name]);
           } else if (driverType === 'pg') {
-            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_replace(string_to_array(??, ','), ?, ?), ',')`, [table.table_name, column.title, column.title, ch.temp_title, newOp.title]);
+            await dbDriver.raw(`UPDATE ?? SET ??  = array_to_string(array_replace(string_to_array(??, ','), ?, ?), ',')`, [table.table_name, column.column_name, column.column_name, ch.temp_title, newOp.title]);
           } else if (driverType === 'mssql') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ',')), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ','))) - 2)`, [table.table_name, column.title, column.title, ch.temp_title, newOp.title, column.title, ch.temp_title, newOp.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = substring(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ',')), 2, len(replace(concat(',', ??, ','), concat(',', ?, ','), concat(',', ?, ','))) - 2)`, [table.table_name, column.column_name, column.column_name, ch.temp_title, newOp.title, column.column_name, ch.temp_title, newOp.title]);
           } else if (driverType === 'sqlite3') {
-            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ',' || ? || ','), ',')`, [table.table_name, column.title, column.title, ch.temp_title, newOp.title]);
+            await dbDriver.raw(`UPDATE ?? SET ?? = TRIM(REPLACE(',' || ?? || ',', ',' || ? || ',', ',' || ? || ','), ',')`, [table.table_name, column.column_name, column.column_name, ch.temp_title, newOp.title]);
           }
         }
       }

From ca50f7d3964ff7c0ff61696c3d256272c86d993d Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 12 Aug 2022 11:28:21 +0300
Subject: [PATCH 02/13] fix: add missing default value handler for select types

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nocodb/src/lib/meta/api/columnApis.ts     | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/columnApis.ts b/packages/nocodb/src/lib/meta/api/columnApis.ts
index c76406a04b..82cd920b63 100644
--- a/packages/nocodb/src/lib/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/meta/api/columnApis.ts
@@ -764,16 +764,21 @@ export async function columnUpdate(req: Request, res: Response<TableType>) {
       }
 
       // Handle default values
+      const optionTitles = colBody.colOptions.options.map(el => el.title);
       if (colBody.cdf) {
-        
-        if (driverType === 'mysql' || driverType === 'mysql2') {
-          
-        } else if (driverType === 'pg') {
-          
-        } else if (driverType === 'mssql') {
-          
-        } else if (driverType === 'sqlite3') {
-          
+        if (colBody.uidt === UITypes.SingleSelect) {
+          if (!optionTitles.includes(colBody.cdf)) {
+            NcError.badRequest(`Default value '${colBody.cdf}' is not a select option.`);
+          }
+        } else {
+          for (const cdf of colBody.cdf.split(',')) {
+            if (!optionTitles.includes(cdf)) {
+              NcError.badRequest(`Default value '${cdf}' is not a select option.`);
+            }
+          }
+        }
+        if (driverType === 'pg') {
+          colBody.cdf = `'${colBody.cdf}'`;
         }
       }
       

From fbec61ebbfda9db5dc40797d9760998594a3163f Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 10 Aug 2022 19:02:57 +0300
Subject: [PATCH 03/13] fix(gui-v2): empty select option

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/cell/MultiSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index b8d7f78dc2..512ba97d9d 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -38,7 +38,7 @@ const options = computed(() => {
 })
 
 const vModel = computed({
-  get: () => selectedIds.value.map((el) => options.value.find((op: SelectOptionType) => op.id === el).title),
+  get: () => selectedIds.value.map((el) => options.value.find((op: SelectOptionType) => op.id === el)?.title),
   set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
 })
 

From 139820e0168a661cc89e265251da8c56291f20c2 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 10 Aug 2022 20:21:59 +0300
Subject: [PATCH 04/13] fix(gui-v2): add missing value prop

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/cell/SingleSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 598b1f584e..a40870bdd4 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -76,7 +76,7 @@ watch(isOpen, (n, _o) => {
     @keydown="handleKeys"
     @click="isOpen = !isOpen"
   >
-    <a-select-option v-for="op of options" :key="op.title" @click.stop>
+    <a-select-option v-for="op of options" :key="op.title" :value="op.title" @click.stop>
       <a-tag class="rounded-tag" :color="op.color">
         <span class="text-slate-500">{{ op.title }}</span>
       </a-tag>

From 15b42939a1175f11bbfb0f97443b185a78fb9800 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 11 Aug 2022 20:16:26 +0300
Subject: [PATCH 05/13] feat(gui-v2): hide arrow if selected from single select

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/cell/SingleSelect.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index a40870bdd4..6439b061f0 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -72,6 +72,7 @@ watch(isOpen, (n, _o) => {
     placeholder="Select an option"
     :bordered="false"
     :open="isOpen"
+    :show-arrow="active || vModel === null"
     @select="isOpen = false"
     @keydown="handleKeys"
     @click="isOpen = !isOpen"

From b17dfdaeaa1fc86e4a6c601ca13c4f9d9136fa6a Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 11 Aug 2022 21:04:18 +0300
Subject: [PATCH 06/13] fix(gui-v2): modelValue prop type warning

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/cell/MultiSelect.vue  | 2 +-
 packages/nc-gui-v2/components/cell/SingleSelect.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 512ba97d9d..1941137130 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -6,7 +6,7 @@ import { ActiveCellInj, ColumnInj } from '~/context'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
-  modelValue: string | string[] | undefined
+  modelValue?: string | string[]
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 6439b061f0..0df8af6b1e 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -5,7 +5,7 @@ import { computed, inject } from '#imports'
 import { ActiveCellInj, ColumnInj } from '~/context'
 
 interface Props {
-  modelValue: string | undefined
+  modelValue?: string
 }
 
 const { modelValue } = defineProps<Props>()

From ab1fcde39ae528ecface5143e515436c452dbb24 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 12 Aug 2022 13:37:45 +0300
Subject: [PATCH 07/13] fix(gui-v2): multiselect cell overflow

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/cell/MultiSelect.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 1941137130..d1f93c5a2d 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -130,7 +130,7 @@ watch(isOpen, (n, _o) => {
         :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
         @close="onClose"
       >
-        <span class="text-slate-500">{{ val }}</span>
+        <span class="w-full text-slate-500">{{ val }}</span>
       </a-tag>
     </template>
   </a-select>
@@ -169,6 +169,10 @@ watch(isOpen, (n, _o) => {
 :deep(.ant-tag-close-icon) {
   @apply "text-slate-500";
 }
+
+:deep(.ant-select-selection-overflow-item) {
+  @apply "flex overflow-hidden";
+}
 </style>
 <!--
 /**

From f4dfd88eb9f739f74cd68acfadec8d977b03db36 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 12 Aug 2022 19:27:13 +0300
Subject: [PATCH 08/13] fix(gui-v2): warning on hovering column header menu

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-header/Menu.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index 0868d0879d..47578a1efd 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -18,7 +18,7 @@ const column = inject(ColumnInj)
 
 const meta = inject(MetaInj)
 
-const { $api } = useNuxtApp()
+const { $api, $e } = useNuxtApp()
 
 const { t } = useI18n()
 
@@ -45,6 +45,7 @@ const setAsPrimaryValue = async () => {
     await $api.dbTableColumn.primaryColumnSet(column?.value?.id as string)
     getMeta(meta?.value?.id as string, true)
     message.success('Successfully updated as primary column')
+    $e('a:column:set-primary')
   } catch (e) {
     message.error('Failed to update primary column')
   }
@@ -63,7 +64,7 @@ const setAsPrimaryValue = async () => {
             {{ $t('general.edit') }}
           </div>
         </a-menu-item>
-        <a-menu-item v-if="!virtual" v-t="['a:column:set-primary']" @click="setAsPrimaryValue">
+        <a-menu-item v-if="!virtual" @click="setAsPrimaryValue">
           <div class="nc-column-edit nc-header-menu-item">
             <MdiStarIcon class="text-primary" />
 

From fd05864b08ea7486815551d853cc1276d9da8c93 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 13 Aug 2022 11:24:23 +0530
Subject: [PATCH 09/13] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/cell/attachment/index.vue      |   5 +-
 .../components/dlg/AirtableImport.vue         |   9 +-
 .../smartsheet-toolbar/FieldsMenu.vue         |   5 +-
 .../smartsheet-toolbar/SortListMenu.vue       |   2 +-
 .../nc-gui-v2/components/smartsheet/Form.vue  | 305 +++++++++---------
 .../components/smartsheet/Toolbar.vue         |   2 -
 .../smartsheet/expanded-form/Header.vue       |   2 +-
 .../smartsheet/sidebar/toolbar/index.vue      |   1 -
 .../components/tabs/auth/UserManagement.vue   |   2 +-
 .../components/ListChildItems.vue             |   5 +-
 .../virtual-cell/components/ListItems.vue     |   2 +-
 packages/nc-gui-v2/layouts/base.vue           |   4 +-
 12 files changed, 174 insertions(+), 170 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 10b362d461..0a962539fb 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -131,7 +131,10 @@ onKeyDown('Escape', () => {
         <a-tooltip v-else placement="bottom">
           <template #title> View attachments </template>
 
-          <MdiArrowExpand class="select-none transform group-hover:(text-pink-500 scale-120) text-[10px] text-gray-500" @click.stop="modalVisible = true" />
+          <MdiArrowExpand
+            class="select-none transform group-hover:(text-pink-500 scale-120) text-[10px] text-gray-500"
+            @click.stop="modalVisible = true"
+          />
         </a-tooltip>
       </div>
     </template>
diff --git a/packages/nc-gui-v2/components/dlg/AirtableImport.vue b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
index 078955f9e5..10969f45a1 100644
--- a/packages/nc-gui-v2/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui-v2/components/dlg/AirtableImport.vue
@@ -224,7 +224,13 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" :mask-closable="false" @keydown.esc="dialogShow = false" class="pa-2">
+  <a-modal
+    v-model:visible="dialogShow"
+    width="max(30vw, 600px)"
+    :mask-closable="false"
+    class="pa-2"
+    @keydown.esc="dialogShow = false"
+  >
     <template #footer>
       <div v-if="step === 1">
         <a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
@@ -241,7 +247,6 @@ onBeforeUnmount(() => {
     </template>
     <span class="ml-5 mt-5 prose-xl font-weight-bold" type="secondary" :level="5">QUICK IMPORT - AIRTABLE</span>
     <div class="ml-5 mr-5">
-
       <div v-if="step === 1">
         <div class="mb-4">
           <span class="mr-3 pt-2 text-gray-500 text-xs">Credentials</span>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index a2cbb0e0cd..076303d07a 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -79,7 +79,10 @@ const onMove = (event: { moved: { newIndex: number } }) => {
       </a-button>
     </div>
     <template #overlay>
-      <div class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border" @click.stop>
+      <div
+        class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
+        @click.stop
+      >
         <div class="p-1" @click.stop>
           <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
         </div>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index c0b00bfafa..d26d503b68 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -84,7 +84,7 @@ watch(
             <!--          </v-select> -->
           </template>
         </div>
-        <a-button class="text-capitalize mb-1 mt-4" @click.stop="addSort" type="primary" ghost>
+        <a-button class="text-capitalize mb-1 mt-4" type="primary" ghost @click.stop="addSort">
           <div class="flex gap-1 align-center">
             <MdiAddIcon />
             <!-- Add Sort Option -->
diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index d1ddc293e9..069e66a701 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import Draggable from 'vuedraggable'
-import {RelationTypes, UITypes, getSystemColumns, isVirtualCol} from 'nocodb-sdk'
-import {message} from 'ant-design-vue'
-import type {Permission} from '~/composables/useUIPermission/rolePermissions'
-import {computed, inject, onClickOutside, useDebounceFn} from '#imports'
-import {ActiveViewInj, IsFormInj, MetaInj} from '~/context'
-import {extractSdkResponseErrorMsg} from '~/utils'
+import { RelationTypes, UITypes, getSystemColumns, isVirtualCol } from 'nocodb-sdk'
+import { message } from 'ant-design-vue'
+import type { Permission } from '~/composables/useUIPermission/rolePermissions'
+import { computed, inject, onClickOutside, useDebounceFn } from '#imports'
+import { ActiveViewInj, IsFormInj, MetaInj } from '~/context'
+import { extractSdkResponseErrorMsg } from '~/utils'
 
 provide(IsFormInj, true)
 
@@ -16,9 +16,9 @@ const state = useGlobal()
 
 const formRef = ref()
 
-const {$api, $e} = useNuxtApp()
+const { $api, $e } = useNuxtApp()
 
-const {isUIAllowed} = useUIPermission()
+const { isUIAllowed } = useUIPermission()
 
 const formState = reactive({})
 
@@ -32,9 +32,9 @@ const view = inject(ActiveViewInj)
 
 if (meta) useProvideColumnCreateStore(meta)
 
-const {loadFormView, insertRow, formColumnData, formViewData, updateFormView} = useViewData(meta, view as any)
+const { loadFormView, insertRow, formColumnData, formViewData, updateFormView } = useViewData(meta, view as any)
 
-const {showAll, hideAll, saveOrUpdate} = useViewColumns(view, meta as any, false, async () => {
+const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, false, async () => {
   await loadFormView()
   setFormData()
 })
@@ -90,24 +90,26 @@ function isDbRequired(column: Record<string, any>) {
   }
 
   let isRequired =
-      // confirm column is not virtual
-      (!isVirtualCol(column) &&
-          // column required / not null
-          column.rqd &&
-          // column default value
-          !column.cdf &&
-          // confirm it's not foreign key
-          !columns.value.some(
-              (c: Record<string, any>) =>
-                  c.uidt === UITypes.LinkToAnotherRecord &&
-                  c?.colOptions?.type === RelationTypes.BELONGS_TO &&
-                  column.fk_column_id === c.colOptions.fk_child_column_id,
-          )) ||
-      // primary column
-      (column.pk && !column.ai && !column.cdf)
+    // confirm column is not virtual
+    (!isVirtualCol(column) &&
+      // column required / not null
+      column.rqd &&
+      // column default value
+      !column.cdf &&
+      // confirm it's not foreign key
+      !columns.value.some(
+        (c: Record<string, any>) =>
+          c.uidt === UITypes.LinkToAnotherRecord &&
+          c?.colOptions?.type === RelationTypes.BELONGS_TO &&
+          column.fk_column_id === c.colOptions.fk_child_column_id,
+      )) ||
+    // primary column
+    (column.pk && !column.ai && !column.cdf)
   if (column.uidt === UITypes.LinkToAnotherRecord && column.colOptions.type === RelationTypes.BELONGS_TO) {
-    const col = columns.value.find((c: Record<string, any>) => c.id === column.colOptions.fk_child_column_id) as Record<string,
-        any>
+    const col = columns.value.find((c: Record<string, any>) => c.id === column.colOptions.fk_child_column_id) as Record<
+      string,
+      any
+    >
     if (col.rqd && !col.default) {
       isRequired = true
     }
@@ -117,7 +119,7 @@ function isDbRequired(column: Record<string, any>) {
 }
 
 function onMove(event: any) {
-  const {newIndex, element, oldIndex} = event.added || event.moved || event.removed
+  const { newIndex, element, oldIndex } = event.added || event.moved || event.removed
 
   if (event.added) {
     element.show = true
@@ -149,11 +151,11 @@ function hideColumn(idx: number) {
   }
 
   saveOrUpdate(
-      {
-        ...localColumns.value[idx],
-        show: false,
-      },
-      idx,
+    {
+      ...localColumns.value[idx],
+      show: false,
+    },
+    idx,
   )
   ;(localColumns.value[idx] as any).show = false
 
@@ -178,7 +180,7 @@ async function removeAllColumns() {
     col.show = false
   }
   await hideAll(
-      (localColumns as Record<string, any>)?.value
+    (localColumns as Record<string, any>)?.value
       .filter((f: Record<string, any>) => isDbRequired(f) || !!f.required)
       .map((f: Record<string, any>) => f.fk_column_id),
   )
@@ -209,36 +211,37 @@ function setFormData() {
     let data: Record<string, boolean> = {}
     try {
       data = JSON.parse(formViewData.value.email as string) || {}
-    } catch (e) {
-    }
+    } catch (e) {}
     data[state.user.value?.email as string] = emailMe.value
     formViewData.value.email = JSON.stringify(data)
     checkSMTPStatus()
   }
 
   localColumns.value = col
-  .filter(
+    .filter(
       (f: Record<string, any>) => f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
-  )
-  .sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order)
-  .map((c: Record<string, any>) => ({...c, required: !!(c.required || 0)}))
+    )
+    .sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order)
+    .map((c: Record<string, any>) => ({ ...c, required: !!(c.required || 0) }))
 
   systemFieldsIds.value = getSystemColumns(col).map((c: Record<string, any>) => c.fk_column_id)
 
   hiddenColumns.value = col.filter(
-      (f: Record<string, any>) => !f.show && !systemFieldsIds.value.includes(f.fk_column_id) && f.uidt !== UITypes.Formula,
+    (f: Record<string, any>) => !f.show && !systemFieldsIds.value.includes(f.fk_column_id) && f.uidt !== UITypes.Formula,
   )
 }
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
   let columnObj = _columnObj
   if (
-      columnObj.uidt === UITypes.LinkToAnotherRecord &&
-      columnObj.colOptions &&
-      columnObj.colOptions.type === RelationTypes.BELONGS_TO
+    columnObj.uidt === UITypes.LinkToAnotherRecord &&
+    columnObj.colOptions &&
+    columnObj.colOptions.type === RelationTypes.BELONGS_TO
   ) {
-    columnObj = columns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string,
-        any>
+    columnObj = columns.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
+      string,
+      any
+    >
   }
 
   return required || (columnObj && columnObj.rqd && !columnObj.cdf)
@@ -330,19 +333,19 @@ onMounted(async () => {
         <div class="flex flex-row">
           <div class="cursor-pointer mr-2">
             <span
-                v-if="hiddenColumns.length"
-                class="mr-2"
-                style="border-bottom: 2px solid rgb(218, 218, 218)"
-                @click="addAllColumns"
+              v-if="hiddenColumns.length"
+              class="mr-2"
+              style="border-bottom: 2px solid rgb(218, 218, 218)"
+              @click="addAllColumns"
             >
               <!-- Add all -->
               {{ $t('general.addAll') }}
             </span>
             <span
-                v-if="localColumns.length"
-                class="ml-2"
-                style="border-bottom: 2px solid rgb(218, 218, 218)"
-                @click="removeAllColumns"
+              v-if="localColumns.length"
+              class="ml-2"
+              style="border-bottom: 2px solid rgb(218, 218, 218)"
+              @click="removeAllColumns"
             >
               <!-- Remove all -->
               {{ $t('general.removeAll') }}
@@ -353,30 +356,30 @@ onMounted(async () => {
       <Draggable :list="hiddenColumns" draggable=".item" group="form-inputs" @start="drag = true" @end="drag = false">
         <template #item="{ element }">
           <a-card
-              size="small"
-              class="ma-0 pa-0 cursor-pointer item mb-2"
-              @mousedown="moved = false"
-              @mousemove="moved = false"
-              @mouseup="handleMouseUp(element)"
+            size="small"
+            class="ma-0 pa-0 cursor-pointer item mb-2"
+            @mousedown="moved = false"
+            @mousemove="moved = false"
+            @mouseup="handleMouseUp(element)"
           >
             <div class="flex">
               <div class="flex flex-row flex-1">
                 <SmartsheetHeaderVirtualCell
-                    v-if="isVirtualCol(element)"
-                    :column="{ ...element, title: element.label || element.title }"
-                    :required="isRequired(element, element.required)"
-                    :hide-menu="true"
+                  v-if="isVirtualCol(element)"
+                  :column="{ ...element, title: element.label || element.title }"
+                  :required="isRequired(element, element.required)"
+                  :hide-menu="true"
                 />
                 <SmartsheetHeaderCell
-                    v-else
-                    class="w-full"
-                    :column="{ ...element, title: element.label || element.title }"
-                    :required="isRequired(element, element.required)"
-                    :hide-menu="true"
+                  v-else
+                  class="w-full"
+                  :column="{ ...element, title: element.label || element.title }"
+                  :required="isRequired(element, element.required)"
+                  :hide-menu="true"
                 />
               </div>
               <div class="flex flex-row">
-                <mdi-drag-vertical class="flex flex-1"/>
+                <mdi-drag-vertical class="flex flex-1" />
               </div>
             </div>
           </a-card>
@@ -389,14 +392,13 @@ onMounted(async () => {
           <a-dropdown v-model:visible="showColumnDropdown" :trigger="['click']">
             <a-button type="link" class="w-full caption mt-2" size="large" @click="showColumnDropdown = true">
               <div class="flex items-center prose-sm justify-center text-gray-400">
-                <mdi-plus/>
+                <mdi-plus />
                 <!-- Add new field to this table -->
                 {{ $t('activity.addField') }}
               </div>
             </a-button>
             <template #overlay>
-              <SmartsheetColumnEditOrAdd ref="editOrAddRef" @submit="submitCallback"
-                                         @cancel="showColumnDropdown = false"/>
+              <SmartsheetColumnEditOrAdd ref="editOrAddRef" @submit="submitCallback" @cancel="showColumnDropdown = false" />
             </template>
           </a-dropdown>
         </template>
@@ -410,110 +412,108 @@ onMounted(async () => {
               <!-- Header -->
               <a-form-item class="ma-0 gap-0 pa-0">
                 <a-input
-                    v-model:value="formViewData.heading"
-                    class="w-full text-bold text-h3"
-                    size="large"
-                    hide-details
-                    placeholder="Form Title"
-                    :bordered="false"
-                    @blur="updateView"
-                    @keydown.enter="updateView"
+                  v-model:value="formViewData.heading"
+                  class="w-full text-bold text-h3"
+                  size="large"
+                  hide-details
+                  placeholder="Form Title"
+                  :bordered="false"
+                  @blur="updateView"
+                  @keydown.enter="updateView"
                 />
               </a-form-item>
               <!-- Sub Header -->
               <a-form-item>
                 <a-input
-                    v-model:value="formViewData.subheading"
-                    class="w-full"
-                    size="large"
-                    hide-details
-                    :placeholder="$t('msg.info.formDesc')"
-                    :bordered="false"
-                    @blur="updateView"
-                    @click="updateView"
+                  v-model:value="formViewData.subheading"
+                  class="w-full"
+                  size="large"
+                  hide-details
+                  :placeholder="$t('msg.info.formDesc')"
+                  :bordered="false"
+                  @blur="updateView"
+                  @click="updateView"
                 />
               </a-form-item>
               <Draggable
-                  ref="draggableRef"
-                  :list="localColumns"
-                  item-key="fk_column_id"
-                  draggable=".item"
-                  group="form-inputs"
-                  class="h-100"
-                  @change="onMove($event)"
-                  @start="drag = true"
-                  @end="drag = false"
+                ref="draggableRef"
+                :list="localColumns"
+                item-key="fk_column_id"
+                draggable=".item"
+                group="form-inputs"
+                class="h-100"
+                @change="onMove($event)"
+                @start="drag = true"
+                @end="drag = false"
               >
                 <template #item="{ element, index }">
-                  <div class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3"
-                       @click="activeRow = element.title">
+                  <div class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3" @click="activeRow = element.title">
                     <div class="flex">
                       <div class="flex flex-1">
                         <div class="flex flex-row">
-                          <mdi-drag-vertical class="flex flex-1"/>
+                          <mdi-drag-vertical class="flex flex-1" />
                         </div>
                         <SmartsheetHeaderVirtualCell
-                            v-if="isVirtualCol(element)"
-                            :column="{ ...element, title: element.label || element.title }"
-                            :required="isRequired(element, element.required)"
-                            :hide-menu="true"
+                          v-if="isVirtualCol(element)"
+                          :column="{ ...element, title: element.label || element.title }"
+                          :required="isRequired(element, element.required)"
+                          :hide-menu="true"
                         />
                         <SmartsheetHeaderCell
-                            v-else
-                            :column="{ ...element, title: element.label || element.title }"
-                            :required="isRequired(element, element.required)"
-                            :hide-menu="true"
+                          v-else
+                          :column="{ ...element, title: element.label || element.title }"
+                          :required="isRequired(element, element.required)"
+                          :hide-menu="true"
                         />
                       </div>
                       <div v-if="isUIAllowed('editFormView') && !isRequired(element, element.required)" class="flex">
-                        <mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)"/>
+                        <mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
                       </div>
                     </div>
                     <a-form-item
-                        v-if="isVirtualCol(element)"
-                        class="ma-0 gap-0 pa-0"
-                        :name="element.title"
-                        :rules="[{ required: element.required, message: `${element.title} is required` }]"
+                      v-if="isVirtualCol(element)"
+                      class="ma-0 gap-0 pa-0"
+                      :name="element.title"
+                      :rules="[{ required: element.required, message: `${element.title} is required` }]"
                     >
-                      <SmartsheetVirtualCell v-model="formState[element.title]" class="nc-input" :column="element"/>
+                      <SmartsheetVirtualCell v-model="formState[element.title]" class="nc-input" :column="element" />
                     </a-form-item>
                     <a-form-item
-                        v-else
-                        class="ma-0 gap-0 pa-0"
-                        :name="element.title"
-                        :rules="[{ required: element.required, message: `${element.title} is required` }]"
+                      v-else
+                      class="ma-0 gap-0 pa-0"
+                      :name="element.title"
+                      :rules="[{ required: element.required, message: `${element.title} is required` }]"
                     >
                       <SmartsheetCell
-                          v-model="formState[element.title]"
-                          class="nc-input"
-                          :column="element"
-                          :edit-enabled="true"
+                        v-model="formState[element.title]"
+                        class="nc-input"
+                        :column="element"
+                        :edit-enabled="true"
                       />
                     </a-form-item>
                     <div v-if="activeRow === element.title">
                       <a-form-item class="my-0 w-1/2">
                         <a-input
-                            v-model:value="element.label"
-                            size="small"
-                            class="form-meta-input !bg-[#dbdbdb]"
-                            :placeholder="$t('msg.info.formInput')"
-                            @change="updateColMeta(element)"
+                          v-model:value="element.label"
+                          size="small"
+                          class="form-meta-input !bg-[#dbdbdb]"
+                          :placeholder="$t('msg.info.formInput')"
+                          @change="updateColMeta(element)"
                         >
                         </a-input>
                       </a-form-item>
                       <a-form-item class="mt-2 mb-0 w-1/2">
                         <a-input
-                            size="small"
-                            v-model:value="element.description"
-                            class="form-meta-input !bg-[#dbdbdb] text-sm"
-                            :placeholder="$t('msg.info.formHelpText')"
-                            @change="updateColMeta(element)"
+                          v-model:value="element.description"
+                          size="small"
+                          class="form-meta-input !bg-[#dbdbdb] text-sm"
+                          :placeholder="$t('msg.info.formHelpText')"
+                          @change="updateColMeta(element)"
                         />
                       </a-form-item>
                       <div class="items-center flex">
                         <span class="text-sm text-gray-500 mr-2">{{ $t('general.required') }}</span>
-                        <a-switch size="small" v-model:checked="element.required" class="my-2"
-                                  @change="updateColMeta(element)"/>
+                        <a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
                       </div>
                     </div>
                     <span class="text-gray-500">{{ element.description }}</span>
@@ -521,8 +521,8 @@ onMounted(async () => {
                 </template>
                 <template #footer>
                   <div
-                      v-if="!localColumns.length"
-                      class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
+                    v-if="!localColumns.length"
+                    class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
                   >
                     Drag and drop fields here to add
                   </div>
@@ -535,52 +535,47 @@ onMounted(async () => {
                   {{ $t('general.submit') }}
                 </a-button>
               </div>
-
             </a-card>
-
-
           </a-form>
 
           <div class="mx-10 px-10">
-
             <!-- After form is submitted -->
             <div class="text-gray-500 mt-4 mb-2">
               {{ $t('msg.info.afterFormSubmitted') }}
             </div>
             <!-- Show this message -->
             <label class="text-gray-600 text-bold"> {{ $t('msg.info.showMessage') }}: </label>
-            <a-textarea v-model:value="formViewData.success_msg" rows="3" hide-details @change="updateView"/>
+            <a-textarea v-model:value="formViewData.success_msg" rows="3" hide-details @change="updateView" />
 
             <!-- Other options -->
             <div class="mt-4">
               <div class="my-4">
                 <!-- Show "Submit Another Form" button -->
-                <a-switch size="small"
-                          v-model:checked="formViewData.submit_another_form"
-                          v-t="[`a:form-view:submit-another-form`]"
-                          @change="updateView"
+                <a-switch
+                  v-model:checked="formViewData.submit_another_form"
+                  v-t="[`a:form-view:submit-another-form`]"
+                  size="small"
+                  @change="updateView"
                 />
                 <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
               </div>
 
               <div class="my-4">
                 <!-- Show a blank form after 5 seconds -->
-                <a-switch size="small"
-                          v-model:checked="formViewData.show_blank_form"
-                          v-t="[`a:form-view:show-blank-form`]"
-                          @change="updateView"
+                <a-switch
+                  v-model:checked="formViewData.show_blank_form"
+                  v-t="[`a:form-view:show-blank-form`]"
+                  size="small"
+                  @change="updateView"
                 />
                 <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
               </div>
               <div class="my-4">
-                <a-switch size="small" v-model:checked="emailMe" v-t="[`a:form-view:email-me`]"
-                          @change="onEmailChange"/>
+                <a-switch v-model:checked="emailMe" v-t="[`a:form-view:email-me`]" size="small" @change="onEmailChange" />
                 <!-- Email me at <email> -->
                 <span class="ml-4">
-                {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{
-                    state.user.value?.email
-                  }}</span>
-              </span>
+                  {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email }}</span>
+                </span>
               </div>
             </div>
           </div>
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index db68acbc11..ddeb4d2063 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -17,8 +17,6 @@ const { isGrid, isForm } = useSmartsheetStoreOrThrow()
     <SmartsheetToolbarMoreActions v-if="isGrid" />
     <div class="flex-1" />
     <SmartsheetToolbarSearchData v-if="isGrid" class="shrink mr-2" />
-
-
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
index 6fa27a5008..58380ed439 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -44,7 +44,7 @@ const iconColor = '#1890ff'
       <template v-if="primaryValue">: {{ primaryValue }}</template>
     </h5>
     <div class="flex-grow" />
-    <mdi-reload class="cursor-pointer select-none"  />
+    <mdi-reload class="cursor-pointer select-none" />
     <component :is="drawerToggleIcon" class="cursor-pointer select-none" @click="commentsDrawer = !commentsDrawer" />
     <a-button class="!text" @click="emit('cancel')">
       <!-- Cancel -->
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
index 3b48eeb04c..95dab53ee3 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import AddRow from './AddRow.vue'
-import DeleteTable from './DeleteTable.vue'
 import LockMenu from './LockMenu.vue'
 import Reload from './Reload.vue'
 </script>
diff --git a/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
index 45644696cb..45bd40e11f 100644
--- a/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
@@ -194,7 +194,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
         </a-button>
         <a-button v-if="isUIAllowed('newUser')" size="middle" type="primary" ghost @click="onInvite">
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
-            <MdiAccountPlusOutline class="mr-1"/>
+            <MdiAccountPlusOutline class="mr-1" />
             <div>{{ $t('activity.inviteTeam') }}</div>
           </div>
         </a-button>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index 245fa6f790..976685bb85 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { Modal } from 'ant-design-vue'
+import { Empty, Modal } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
-import { Empty } from 'ant-design-vue'
 import { computed, useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel, watch } from '#imports'
 import { ColumnInj, IsFormInj } from '~/context'
 
@@ -114,7 +113,7 @@ const expandedFormRow = ref()
           show-less-items
         />
       </template>
-      <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE"/>
+      <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
     </div>
 
     <SmartsheetExpandedForm
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 8ac80840be..29ba9e4195 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -116,7 +116,7 @@ const newRowState = computed(() => {
           show-less-items
         />
       </template>
-      <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE"/>
+      <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
 
       <SmartsheetExpandedForm
         v-if="expandedFormDlg"
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index 1511d7ac91..f4529fc432 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -22,7 +22,9 @@ const logout = () => {
       <Transition name="layout">
         <a-layout-header v-if="signedIn" class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg">
           <div
-            v-if="route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'"
+            v-if="
+              route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'
+            "
             class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105"
             @click="navigateTo('/')"
           >

From 429586c107b3b3d9c2fffa8cc8b6001825da204d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 13 Aug 2022 11:28:09 +0530
Subject: [PATCH 10/13] fix(gui-v2): remove unnecessary binding from project
 menu

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/nc/[projectId]/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
index e43b1fd6b3..c91b21a39b 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
@@ -65,7 +65,7 @@ await loadTables()
             <img alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
           </div>
 
-          <a-dropdown v-model:visible="dropdownOpen" :trigger="['click']" placement="bottom">
+          <a-dropdown :trigger="['click']" placement="bottom">
             <div
               :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
               :class="[isOpen ? '' : 'justify-center']"

From ffb9cecf6d391825442d8354881c9fdbddc23958 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Sat, 13 Aug 2022 11:34:27 +0530
Subject: [PATCH 11/13] test: cy markers for project menu

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/layouts/base.vue              |  2 +-
 .../nc-gui-v2/pages/nc/[projectId]/index.vue     | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index f4529fc432..a99c63a5cf 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -25,7 +25,7 @@ const logout = () => {
             v-if="
               route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'
             "
-            class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105"
+            class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
             @click="navigateTo('/')"
           >
             <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
index c91b21a39b..d90987b1d3 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
@@ -69,7 +69,7 @@ await loadTables()
             <div
               :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
               :class="[isOpen ? '' : 'justify-center']"
-              class="group cursor-pointer flex gap-4 items-center"
+              class="group cursor-pointer flex gap-4 items-center nc-project-menu"
             >
               <template v-if="isOpen">
                 <div class="text-xl font-semibold truncate">{{ project.title }}</div>
@@ -102,7 +102,7 @@ await loadTables()
 
                   <a-menu-item key="copy">
                     <div class="nc-project-menu-item group">
-                      <MdiContentCopy class="group-hover:text-pink-500" />
+                      <MdiContentCopy class="group-hover:text-pink-500 nc-copy-project-info" />
                       Copy Project Info
                     </div>
                   </a-menu-item>
@@ -114,7 +114,7 @@ await loadTables()
                       class="nc-project-menu-item group"
                       @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`)"
                     >
-                      <MdiApi class="group-hover:text-pink-500" />
+                      <MdiApi class="group-hover:text-pink-500 nc-swagger-api-docs" />
                       Swagger: Rest APIs
                     </div>
                   </a-menu-item>
@@ -128,7 +128,7 @@ await loadTables()
                       class="nc-project-menu-item group"
                       @click="toggleDialog(true, 'teamAndAuth')"
                     >
-                      <MdiAccountGroup class="group-hover:text-pink-500" />
+                      <MdiAccountGroup class="group-hover:text-pink-500 nc-team-and-auth" />
                       Team & Auth
                     </div>
                   </a-menu-item>
@@ -140,7 +140,7 @@ await loadTables()
                       class="nc-project-menu-item group"
                       @click="toggleDialog(true, 'appStore')"
                     >
-                      <MdiStore class="group-hover:text-pink-500" />
+                      <MdiStore class="group-hover:text-pink-500 nc-app-store" />
                       App Store
                     </div>
                   </a-menu-item>
@@ -152,7 +152,7 @@ await loadTables()
                       class="nc-project-menu-item group"
                       @click="toggleDialog(true, 'metaData')"
                     >
-                      <MdiTableBorder class="group-hover:text-pink-500" />
+                      <MdiTableBorder class="group-hover:text-pink-500 nc-meta-data" />
                       Project Metadata
                     </div>
                   </a-menu-item>
@@ -164,7 +164,7 @@ await loadTables()
                       class="nc-project-menu-item group"
                       @click="toggleDialog(true, 'audit')"
                     >
-                      <MdiNotebookCheckOutline class="group-hover:text-pink-500" />
+                      <MdiNotebookCheckOutline class="group-hover:text-pink-500 nc-audit" />
                       Audit
                     </div>
                   </a-menu-item>
@@ -174,7 +174,7 @@ await loadTables()
                   <a-sub-menu key="preview-as">
                     <template #title>
                       <div class="nc-project-menu-item group">
-                        <MdiContentCopy class="group-hover:text-pink-500" />
+                        <MdiContentCopy class="group-hover:text-pink-500 nc-project-preview" />
                         Preview Project As
 
                         <div class="flex-1" />

From cc4c38fd96d16e8a065bf2e97d63dadb8626dd43 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 13 Aug 2022 11:35:15 +0530
Subject: [PATCH 12/13] fix(gui-v2): component name correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/tabs/Auth.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/tabs/Auth.vue b/packages/nc-gui-v2/components/tabs/Auth.vue
index dbee3ff4b2..7777451325 100644
--- a/packages/nc-gui-v2/components/tabs/Auth.vue
+++ b/packages/nc-gui-v2/components/tabs/Auth.vue
@@ -27,13 +27,13 @@ const selectedTab = $computed(() => tabsInfo[selectedTabKey])
 <template>
   <div>
     <a-tabs v-model:active-key="selectedTabKey" :open-keys="[]" mode="horizontal" class="nc-auth-tabs mx-6">
-      <a-tabs-tab-pane v-for="(tab, key) of tabsInfo" :key="key" class="select-none">
+      <a-tab-pane v-for="(tab, key) of tabsInfo" :key="key" class="select-none">
         <template #tab>
           <span>
             {{ tab.title }}
           </span>
         </template>
-      </a-tabs-tab-pane>
+      </a-tab-pane>
     </a-tabs>
 
     <div class="mx-4 py-6 mt-2">

From 2f658b71ec3faec9f33174b7ceb3b3f94de360ad Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Sat, 13 Aug 2022 12:15:05 +0530
Subject: [PATCH 13/13] test: update column-edit cy marker

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/components/smartsheet-header/Menu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index 47578a1efd..24e3d8b0ee 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -65,7 +65,7 @@ const setAsPrimaryValue = async () => {
           </div>
         </a-menu-item>
         <a-menu-item v-if="!virtual" @click="setAsPrimaryValue">
-          <div class="nc-column-edit nc-header-menu-item">
+          <div class="nc-column-set-primary nc-header-menu-item">
             <MdiStarIcon class="text-primary" />
 
             <!--       todo : tooltip -->