From f0be54b0bc61495ef0ba2319b4810b12cea46c17 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:57:58 +0000
Subject: [PATCH 01/14] fix(nc-gui): allow only specific column types for
 display value

---
 .../components/smartsheet/header/Menu.vue     |  7 ++--
 packages/nocodb-sdk/src/lib/UITypes.ts        | 32 +++++++++++++++++++
 .../nocodb-sdk/src/lib/helperFunctions.ts     | 18 +++++++++++
 packages/nocodb-sdk/src/lib/index.ts          |  1 +
 4 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index 7643370472..bb97f621c7 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { type ColumnReqType, type ColumnType, partialUpdateAllowedTypes, readonlyMetaAllowedTypes } from 'nocodb-sdk'
-import { PlanLimitTypes, RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
+import { PlanLimitTypes, RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn, isSupportedDisplayValueColumn } from 'nocodb-sdk'
 import { SmartsheetStoreEvents, isColumnInvalid } from '#imports'
 
 const props = defineProps<{ virtual?: boolean; isOpen: boolean; isHiddenCol?: boolean }>()
@@ -578,10 +578,7 @@ const onDeleteColumn = () => {
             {{ isHiddenCol ? $t('general.showField') : $t('general.hideField') }}
           </div>
         </NcMenuItem>
-        <NcMenuItem
-          v-if="(!virtual || column?.uidt === UITypes.Formula) && !column?.pv && !isHiddenCol"
-          @click="setAsDisplayValue"
-        >
+        <NcMenuItem v-if="column && isSupportedDisplayValueColumn(column) && !column?.pv && !isHiddenCol" @click="setAsDisplayValue">
           <div class="nc-column-set-primary nc-header-menu-item item">
             <GeneralLoader v-if="isLoading === 'setDisplay'" size="regular" />
             <GeneralIcon v-else icon="star" class="text-gray-500 !w-4.25 !h-4.25" />
diff --git a/packages/nocodb-sdk/src/lib/UITypes.ts b/packages/nocodb-sdk/src/lib/UITypes.ts
index 813d9687f4..c150be6469 100644
--- a/packages/nocodb-sdk/src/lib/UITypes.ts
+++ b/packages/nocodb-sdk/src/lib/UITypes.ts
@@ -2,6 +2,7 @@ import { ColumnReqType, ColumnType, TableType } from './Api';
 import { FormulaDataTypes } from './formulaHelpers';
 import { LongTextAiMetaProp, RelationTypes } from '~/lib/globals';
 import { parseHelper } from './helperFunctions';
+import { ncParseProp } from './helperFunctions';
 
 enum UITypes {
   ID = 'ID',
@@ -331,3 +332,34 @@ export const getUITypesForFormulaDataType = (
       return [];
   }
 };
+
+export const isSupportedDisplayValueColumn = (column: ColumnType) => {
+  switch (column.uidt) {
+    case UITypes.SingleLineText:
+    case UITypes.Date:
+    case UITypes.DateTime:
+    case UITypes.Time:
+    case UITypes.Year:
+    case UITypes.PhoneNumber:
+    case UITypes.Email:
+    case UITypes.URL:
+    case UITypes.Number:
+    case UITypes.Currency:
+    case UITypes.Percent:
+    case UITypes.Duration:
+    case UITypes.Formula: {
+      return true;
+    }
+    case UITypes.LongText: {
+      if (ncParseProp(column.meta)?.richMode) {
+        return false;
+      }
+      //Todo: prevent AI Prompt field once it get merged in develop
+      return true;
+    }
+
+    default: {
+      return false;
+    }
+  }
+};
diff --git a/packages/nocodb-sdk/src/lib/helperFunctions.ts b/packages/nocodb-sdk/src/lib/helperFunctions.ts
index cb70719c21..e5a7e3c55c 100644
--- a/packages/nocodb-sdk/src/lib/helperFunctions.ts
+++ b/packages/nocodb-sdk/src/lib/helperFunctions.ts
@@ -228,6 +228,24 @@ export const integrationCategoryNeedDefault = (category: IntegrationsType) => {
   return [IntegrationsType.Ai].includes(category);
 };
 
+export function ncParseProp(v: any): any {
+  if (!v) return {};
+  try {
+    return typeof v === 'string' ? JSON.parse(v) ?? {} : v;
+  } catch {
+    return {};
+  }
+}
+
+export function ncStringifyProp(v: any): string {
+  if (!v) return '{}';
+  try {
+    return typeof v === 'string' ? v : JSON.stringify(v) ?? '{}';
+  } catch {
+    return '{}';
+  }
+}
+
 export function parseHelper(v: any): any {
   try {
     return typeof v === 'string' ? JSON.parse(v) : v;
diff --git a/packages/nocodb-sdk/src/lib/index.ts b/packages/nocodb-sdk/src/lib/index.ts
index 9f66861cd7..9993308c97 100644
--- a/packages/nocodb-sdk/src/lib/index.ts
+++ b/packages/nocodb-sdk/src/lib/index.ts
@@ -24,6 +24,7 @@ export {
   getUITypesForFormulaDataType,
   readonlyMetaAllowedTypes,
   partialUpdateAllowedTypes,
+  isSupportedDisplayValueColumn,
 } from '~/lib/UITypes';
 export { default as CustomAPI, FileType } from '~/lib/CustomAPI';
 export { default as TemplateGenerator } from '~/lib/TemplateGenerator';

From 0f9890d33b7dd2ed47c51282925b83445e5d6752 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:57:58 +0000
Subject: [PATCH 02/14] fix(nc-gui): update change display value modal

---
 packages/nc-gui/components/nc/List/index.vue  | 21 ++++--
 .../smartsheet/header/UpdateDisplayValue.vue  | 74 ++++++++-----------
 2 files changed, 46 insertions(+), 49 deletions(-)

diff --git a/packages/nc-gui/components/nc/List/index.vue b/packages/nc-gui/components/nc/List/index.vue
index 311780889d..e56fa597d5 100644
--- a/packages/nc-gui/components/nc/List/index.vue
+++ b/packages/nc-gui/components/nc/List/index.vue
@@ -381,18 +381,27 @@ watch(
                 @click="handleSelectOption(option, idx)"
               >
                 <slot name="listItem" :option="option" :is-selected="() => compareVModel(option[optionValueKey])" :index="idx">
+                  <slot name="listItemExtraLeft" :option="option" :is-selected="() => compareVModel(option[optionValueKey])">
+                  </slot>
+
                   <NcTooltip class="truncate flex-1" show-on-truncate-only>
                     <template #title>
                       {{ option[optionLabelKey] }}
                     </template>
                     {{ option[optionLabelKey] }}
                   </NcTooltip>
-                  <GeneralIcon
-                    v-if="showSelectedOption && compareVModel(option[optionValueKey])"
-                    id="nc-selected-item-icon"
-                    icon="check"
-                    class="flex-none text-primary w-4 h-4"
-                  />
+
+                  <slot name="listItemExtraRight" :option="option" :is-selected="() => compareVModel(option[optionValueKey])">
+                  </slot>
+
+                  <slot name="listItemSelectedIcon" :option="option" :is-selected="() => compareVModel(option[optionValueKey])">
+                    <GeneralIcon
+                      v-if="showSelectedOption && compareVModel(option[optionValueKey])"
+                      id="nc-selected-item-icon"
+                      icon="check"
+                      class="flex-none text-primary w-4 h-4"
+                    />
+                  </slot>
                 </slot>
               </div>
             </div>
diff --git a/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue b/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
index 4438feb543..18ee1b62ed 100644
--- a/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
+++ b/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type ColumnType, isVirtualCol } from 'nocodb-sdk'
+import { type ColumnType, isSupportedDisplayValueColumn, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 
 interface Props {
   column: ColumnType
@@ -18,13 +18,11 @@ const { fields } = useViewColumnsOrThrow()
 
 const meta = inject(MetaInj, ref())
 
-const searchField = ref('')
-
 const column = toRef(props, 'column')
 
 const value = useVModel(props, 'value')
 
-const selectedField = ref()
+const selectedFieldId = ref()
 
 const isLoading = ref(false)
 
@@ -32,15 +30,22 @@ const filteredColumns = computed(() => {
   const columns = meta.value?.columnsById ?? {}
 
   return (fields.value ?? [])
-    .filter((f) => !isVirtualCol(columns[f.fk_column_id]))
-    .filter((c) => c.title.toLowerCase().includes(searchField.value.toLowerCase()))
+    .map((f) => {
+      return {
+        title: f.title,
+        id: f.fk_column_id,
+        column: columns[f.fk_column_id],
+      }
+    })
+    .filter((f) => f.column && !isSystemColumn(f.column) && isSupportedDisplayValueColumn(f.column))
 })
 
 const changeDisplayField = async () => {
+  if (!selectedFieldId.value) return
   isLoading.value = true
 
   try {
-    await $api.dbTableColumn.primaryColumnSet(selectedField?.value?.fk_column_id as string)
+    await $api.dbTableColumn.primaryColumnSet(selectedFieldId.value)
 
     await getMeta(meta?.value?.id as string, true)
 
@@ -53,14 +58,13 @@ const changeDisplayField = async () => {
   }
 }
 
-const getIcon = (c: ColumnType) =>
+const cellIcon = (c: ColumnType) =>
   h(isVirtualCol(c) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), {
     columnMeta: c,
   })
 
 onMounted(() => {
-  searchField.value = ''
-  selectedField.value = fields.value?.find((f) => f.fk_column_id === column.value.id)
+  selectedFieldId.value = fields.value?.find((f) => f.fk_column_id === column.value.id)?.fk_column_id
 })
 </script>
 
@@ -79,39 +83,23 @@ onMounted(() => {
         </div>
       </div>
 
-      <div class="flex w-full gap-2 justify-between items-center">
-        <a-input v-model:value="searchField" class="w-full h-8 flex-1" size="small" :placeholder="$t('placeholder.searchFields')">
-          <template #prefix>
-            <component :is="iconMap.search" class="w-4 text-gray-500 h-4" />
-          </template>
-        </a-input>
-      </div>
-
-      <div class="border-1 rounded-md h-[250px] nc-scrollbar-md border-gray-200">
-        <div
-          v-for="col in filteredColumns"
-          :key="col.fk_column_id"
-          :class="{
-            'bg-gray-100': selectedField === col,
-          }"
-          :data-testid="`nc-display-field-update-menu-${col.title}`"
-          class="px-3 py-1 flex flex-row items-center rounded-md hover:bg-gray-100"
-          @click.stop="selectedField = col"
+      <div class="border-1 rounded-lg border-nc-border-gray-medium h-[250px]">
+        <NcList
+          v-model:value="selectedFieldId"
+          v-model:open="value"
+          :list="filteredColumns"
+          search-input-placeholder="Search"
+          option-label-key="title"
+          option-value-key="id"
+          :close-on-select="false"
+          class="!w-auto"
+          show-search-always
+          container-class-name="!max-h-[200px]"
         >
-          <div class="flex flex-row items-center w-full cursor-pointer truncate ml-1 py-[5px] pr-2">
-            <component :is="getIcon(meta.columnsById[col.fk_column_id])" class="!w-3.5 !h-3.5 !text-gray-500" />
-            <NcTooltip class="flex-1 pl-1 pr-2 truncate" show-on-truncate-only>
-              <template #title>
-                {{ col.title }}
-              </template>
-              <template #default>{{ col.title }}</template>
-            </NcTooltip>
-          </div>
-
-          <div class="flex-1" />
-
-          <component :is="iconMap.check" v-if="selectedField === col" class="!w-4 !h-4 !text-brand-500" />
-        </div>
+          <template #listItemExtraLeft="{ option }">
+            <component :is="cellIcon(option.column)" class="!mx-0 opacity-70" />
+          </template>
+        </NcList>
       </div>
 
       <div class="flex w-full gap-2 justify-end">
@@ -120,7 +108,7 @@ onMounted(() => {
         </NcButton>
 
         <NcButton
-          :disabled="!selectedField || selectedField.fk_column_id === column.id"
+          :disabled="!selectedFieldId || selectedFieldId === column.id"
           :loading="isLoading"
           size="small"
           @click="changeDisplayField"

From eb7bed9d82eb0cec330f4ec3645ea435568d3c7f Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:57:59 +0000
Subject: [PATCH 03/14] fix(nc-gui): add disable option state in ncList
 component

---
 packages/nc-gui/components/nc/List/index.vue | 26 +++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/nc/List/index.vue b/packages/nc-gui/components/nc/List/index.vue
index e56fa597d5..64f6cc6f0e 100644
--- a/packages/nc-gui/components/nc/List/index.vue
+++ b/packages/nc-gui/components/nc/List/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useVirtualList } from '@vueuse/core'
+import type { TooltipPlacement } from 'ant-design-vue/lib/tooltip'
 
 export type MultiSelectRawValueType = Array<string | number>
 
@@ -8,6 +9,8 @@ export type RawValueType = string | number | MultiSelectRawValueType
 export interface NcListItemType {
   value?: RawValueType
   label?: string
+  disabled?: boolean
+  ncItemTooltip?: string
   [key: string]: any
 }
 
@@ -61,6 +64,8 @@ export interface NcListProps {
   containerClassName?: string
 
   itemClassName?: string
+
+  itemTooltipPlacement?: TooltipPlacement
 }
 
 interface Emits {
@@ -82,6 +87,7 @@ const props = withDefaults(defineProps<NcListProps>(), {
   minItemsForSearch: 4,
   containerClassName: '',
   itemClassName: '',
+  itemTooltipPlacement: 'right',
 })
 
 const emits = defineEmits<Emits>()
@@ -190,7 +196,7 @@ const handleResetHoverEffect = (clearActiveOption = false, newActiveIndex?: numb
  * It updates the model value, emits a change event, and optionally closes the dropdown.
  */
 const handleSelectOption = (option: NcListItemType, index?: number) => {
-  if (!option?.[optionValueKey]) return
+  if (!option?.[optionValueKey] || option?.disabled) return
 
   if (index !== undefined) {
     activeOptionIndex.value = index
@@ -228,6 +234,9 @@ const handleAutoScrollOption = (useDelay = false) => {
   }, 150)
 }
 
+// Todo: skip arrowUp/.arrowDown on disabled options
+// const getNextEnabledOptionIndex = (currentIndex: number, increment = true) => {}
+
 const onArrowDown = () => {
   keyDown.value = true
   handleResetHoverEffect()
@@ -364,22 +373,27 @@ watch(
             :class="containerClassName"
           >
             <div v-bind="wrapperProps">
-              <div
+              <NcTooltip
                 v-for="{ data: option, index: idx } in virtualList"
                 :key="idx"
-                class="flex items-center gap-2 w-full py-2 px-2 hover:bg-gray-100 cursor-pointer rounded-md"
+                class="flex items-center gap-2 w-full py-2 px-2 rounded-md"
                 :class="[
                   `nc-list-option-${idx}`,
                   {
                     'nc-list-option-selected': compareVModel(option[optionValueKey]),
-                    'bg-gray-100 ': showHoverEffectOnSelectedOption && compareVModel(option[optionValueKey]),
-                    'bg-gray-100 nc-list-option-active': activeOptionIndex === idx,
+                    'bg-gray-100 ': !option?.disabled && showHoverEffectOnSelectedOption && compareVModel(option[optionValueKey]),
+                    'bg-gray-100 nc-list-option-active': !option?.disabled && activeOptionIndex === idx,
+                    'opacity-60 cursor-not-allowed': option?.disabled,
+                    'hover:bg-gray-100 cursor-pointer': !option?.disabled,
                   },
                   `${itemClassName}`,
                 ]"
+                :placement="itemTooltipPlacement"
+                :disabled="!option?.ncItemTooltip"
                 @mouseover="handleResetHoverEffect(true, idx)"
                 @click="handleSelectOption(option, idx)"
               >
+                <template #title>{{ option.ncItemTooltip }} </template>
                 <slot name="listItem" :option="option" :is-selected="() => compareVModel(option[optionValueKey])" :index="idx">
                   <slot name="listItemExtraLeft" :option="option" :is-selected="() => compareVModel(option[optionValueKey])">
                   </slot>
@@ -403,7 +417,7 @@ watch(
                     />
                   </slot>
                 </slot>
-              </div>
+              </NcTooltip>
             </div>
           </div>
         </div>

From fee6a914f85146552493657b77911d8df02bff88 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:57:59 +0000
Subject: [PATCH 04/14] fix(nc-gui): give proper tooltip why other fields are
 not used as display value

---
 .../smartsheet/header/UpdateDisplayValue.vue          | 11 ++++++++---
 packages/nocodb-sdk/src/lib/UITypes.ts                |  2 ++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue b/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
index 18ee1b62ed..dadcdb799b 100644
--- a/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
+++ b/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type ColumnType, isSupportedDisplayValueColumn, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
+import { type ColumnType, isSupportedDisplayValueColumn, isSystemColumn, isVirtualCol, UITypes, UITypesName } from 'nocodb-sdk'
 
 interface Props {
   column: ColumnType
@@ -30,14 +30,19 @@ const filteredColumns = computed(() => {
   const columns = meta.value?.columnsById ?? {}
 
   return (fields.value ?? [])
+    .filter((f) => columns[f?.fk_column_id] && !isSystemColumn(columns[f.fk_column_id]))
     .map((f) => {
+      const column = columns[f.fk_column_id] as ColumnType
       return {
         title: f.title,
         id: f.fk_column_id,
-        column: columns[f.fk_column_id],
+        disabled: !isSupportedDisplayValueColumn(column),
+        ncItemTooltip: !isSupportedDisplayValueColumn(column)
+          ? `${column?.uidt ? UITypesName[column.uidt as UITypes] : 'This'} field cannot be a display value field`
+          : '',
+        column: column,
       }
     })
-    .filter((f) => f.column && !isSystemColumn(f.column) && isSupportedDisplayValueColumn(f.column))
 })
 
 const changeDisplayField = async () => {
diff --git a/packages/nocodb-sdk/src/lib/UITypes.ts b/packages/nocodb-sdk/src/lib/UITypes.ts
index c150be6469..26b2b84858 100644
--- a/packages/nocodb-sdk/src/lib/UITypes.ts
+++ b/packages/nocodb-sdk/src/lib/UITypes.ts
@@ -334,6 +334,8 @@ export const getUITypesForFormulaDataType = (
 };
 
 export const isSupportedDisplayValueColumn = (column: ColumnType) => {
+  if (!column?.uidt) return false;
+
   switch (column.uidt) {
     case UITypes.SingleLineText:
     case UITypes.Date:

From f6c1506cb7588cb5b2bf9decb01b7222a3070f65 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:57:59 +0000
Subject: [PATCH 05/14] fix(nc-gui): disable set displaly value option from
 field context menu

---
 .../components/smartsheet/header/Menu.vue     | 38 +++++++++++++------
 .../smartsheet/header/UpdateDisplayValue.vue  |  9 +++--
 packages/nocodb-sdk/src/lib/UITypes.ts        | 28 ++++++++++++++
 packages/nocodb-sdk/src/lib/index.ts          |  1 +
 4 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index bb97f621c7..4d0232058b 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -1,5 +1,12 @@
 <script lang="ts" setup>
-import { type ColumnReqType, type ColumnType, partialUpdateAllowedTypes, readonlyMetaAllowedTypes } from 'nocodb-sdk'
+import {
+  type ColumnReqType,
+  type ColumnType,
+  columnTypeName,
+  isVirtualCol,
+  partialUpdateAllowedTypes,
+  readonlyMetaAllowedTypes,
+} from 'nocodb-sdk'
 import { PlanLimitTypes, RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn, isSupportedDisplayValueColumn } from 'nocodb-sdk'
 import { SmartsheetStoreEvents, isColumnInvalid } from '#imports'
 
@@ -578,16 +585,25 @@ const onDeleteColumn = () => {
             {{ isHiddenCol ? $t('general.showField') : $t('general.hideField') }}
           </div>
         </NcMenuItem>
-        <NcMenuItem v-if="column && isSupportedDisplayValueColumn(column) && !column?.pv && !isHiddenCol" @click="setAsDisplayValue">
-          <div class="nc-column-set-primary nc-header-menu-item item">
-            <GeneralLoader v-if="isLoading === 'setDisplay'" size="regular" />
-            <GeneralIcon v-else icon="star" class="text-gray-500 !w-4.25 !h-4.25" />
-
-            <!--       todo : tooltip -->
-            <!-- Set as Display value -->
-            {{ $t('activity.setDisplay') }}
-          </div>
-        </NcMenuItem>
+        <NcTooltip
+          v-if="column && !column?.pv && !isHiddenCol && (column.uidt === UITypes.Formula || !isVirtualCol(column))"
+          :disabled="isSupportedDisplayValueColumn(column)"
+        >
+          <template #title>
+            {{ `${columnTypeName(column)} field cannot be a display value field` }}
+          </template>
+
+          <NcMenuItem @click="setAsDisplayValue" :disabled="!isSupportedDisplayValueColumn(column)">
+            <div class="nc-column-set-primary nc-header-menu-item item">
+              <GeneralLoader v-if="isLoading === 'setDisplay'" size="regular" />
+              <GeneralIcon v-else icon="star" class="text-gray-500 !w-4.25 !h-4.25" />
+
+              <!--       todo : tooltip -->
+              <!-- Set as Display value -->
+              {{ $t('activity.setDisplay') }}
+            </div>
+          </NcMenuItem>
+        </NcTooltip>
 
         <template v-if="!isExpandedForm">
           <a-divider v-if="!isLinksOrLTAR(column) || column.colOptions.type !== RelationTypes.BELONGS_TO" class="!my-0" />
diff --git a/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue b/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
index dadcdb799b..c4d1e06541 100644
--- a/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
+++ b/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type ColumnType, isSupportedDisplayValueColumn, isSystemColumn, isVirtualCol, UITypes, UITypesName } from 'nocodb-sdk'
+import { type ColumnType, columnTypeName, isSupportedDisplayValueColumn, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 
 interface Props {
   column: ColumnType
@@ -37,9 +37,10 @@ const filteredColumns = computed(() => {
         title: f.title,
         id: f.fk_column_id,
         disabled: !isSupportedDisplayValueColumn(column),
-        ncItemTooltip: !isSupportedDisplayValueColumn(column)
-          ? `${column?.uidt ? UITypesName[column.uidt as UITypes] : 'This'} field cannot be a display value field`
-          : '',
+        ncItemTooltip:
+          !isSupportedDisplayValueColumn(column) && columnTypeName(column)
+            ? `${columnTypeName(column)} field cannot be a display value field`
+            : '',
         column: column,
       }
     })
diff --git a/packages/nocodb-sdk/src/lib/UITypes.ts b/packages/nocodb-sdk/src/lib/UITypes.ts
index 26b2b84858..ed9c93e567 100644
--- a/packages/nocodb-sdk/src/lib/UITypes.ts
+++ b/packages/nocodb-sdk/src/lib/UITypes.ts
@@ -95,6 +95,34 @@ export const UITypesName = {
   AIPrompt: 'AI Prompt',
 };
 
+export const columnTypeName = (column: ColumnType) => {
+  if (!column) return '';
+
+  switch (column.uidt) {
+    case UITypes.LongText: {
+      if (ncParseProp(column.meta)?.richMode) {
+        return UITypesName.RichText;
+      }
+      //Todo: prevent AI Prompt field once it get merged in develop
+
+      return UITypesName[column.uidt];
+    }
+    case UITypes.Button: {
+      if (
+        column.uidt === UITypes.Button &&
+        (column?.colOptions as any)?.type === 'ai'
+      ) {
+        return UITypesName.AIButton;
+      }
+
+      return UITypesName[column.uidt];
+    }
+    default: {
+      return column.uidt ? UITypesName[column.uidt] : '';
+    }
+  }
+};
+
 export const FieldNameFromUITypes: Record<UITypes, string> = {
   [UITypes.ID]: 'ID',
   [UITypes.LinkToAnotherRecord]: '{TableName}',
diff --git a/packages/nocodb-sdk/src/lib/index.ts b/packages/nocodb-sdk/src/lib/index.ts
index 9993308c97..cc639aaf08 100644
--- a/packages/nocodb-sdk/src/lib/index.ts
+++ b/packages/nocodb-sdk/src/lib/index.ts
@@ -25,6 +25,7 @@ export {
   readonlyMetaAllowedTypes,
   partialUpdateAllowedTypes,
   isSupportedDisplayValueColumn,
+  columnTypeName,
 } from '~/lib/UITypes';
 export { default as CustomAPI, FileType } from '~/lib/CustomAPI';
 export { default as TemplateGenerator } from '~/lib/TemplateGenerator';

From 5c5c9cfa193af9c3846151fa5d7054607498bd24 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:57:59 +0000
Subject: [PATCH 06/14] chore(nc-gui): lint

---
 packages/nc-gui/components/smartsheet/header/Menu.vue      | 7 +++----
 .../components/smartsheet/header/UpdateDisplayValue.vue    | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index 4d0232058b..e66930f734 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -3,11 +3,10 @@ import {
   type ColumnReqType,
   type ColumnType,
   columnTypeName,
-  isVirtualCol,
   partialUpdateAllowedTypes,
   readonlyMetaAllowedTypes,
 } from 'nocodb-sdk'
-import { PlanLimitTypes, RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn, isSupportedDisplayValueColumn } from 'nocodb-sdk'
+import { PlanLimitTypes, RelationTypes, UITypes, isLinksOrLTAR, isSupportedDisplayValueColumn, isSystemColumn } from 'nocodb-sdk'
 import { SmartsheetStoreEvents, isColumnInvalid } from '#imports'
 
 const props = defineProps<{ virtual?: boolean; isOpen: boolean; isHiddenCol?: boolean }>()
@@ -586,14 +585,14 @@ const onDeleteColumn = () => {
           </div>
         </NcMenuItem>
         <NcTooltip
-          v-if="column && !column?.pv && !isHiddenCol && (column.uidt === UITypes.Formula || !isVirtualCol(column))"
+          v-if="column && !column?.pv && !isHiddenCol && (!virtual || column.uidt === UITypes.Formula)"
           :disabled="isSupportedDisplayValueColumn(column)"
         >
           <template #title>
             {{ `${columnTypeName(column)} field cannot be a display value field` }}
           </template>
 
-          <NcMenuItem @click="setAsDisplayValue" :disabled="!isSupportedDisplayValueColumn(column)">
+          <NcMenuItem :disabled="!isSupportedDisplayValueColumn(column)" @click="setAsDisplayValue">
             <div class="nc-column-set-primary nc-header-menu-item item">
               <GeneralLoader v-if="isLoading === 'setDisplay'" size="regular" />
               <GeneralIcon v-else icon="star" class="text-gray-500 !w-4.25 !h-4.25" />
diff --git a/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue b/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
index c4d1e06541..9209c29fb6 100644
--- a/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
+++ b/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
@@ -41,7 +41,7 @@ const filteredColumns = computed(() => {
           !isSupportedDisplayValueColumn(column) && columnTypeName(column)
             ? `${columnTypeName(column)} field cannot be a display value field`
             : '',
-        column: column,
+        column,
       }
     })
 })

From a1a55dd68808e6a9dd7a4e6bbb4e289dfec31970 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:57:59 +0000
Subject: [PATCH 07/14] fix(nc-gui): don't disabled pv column even if it is not
 supported as pv column

---
 .../components/smartsheet/header/UpdateDisplayValue.vue       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue b/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
index 9209c29fb6..b9f1890af8 100644
--- a/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
+++ b/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
@@ -36,9 +36,9 @@ const filteredColumns = computed(() => {
       return {
         title: f.title,
         id: f.fk_column_id,
-        disabled: !isSupportedDisplayValueColumn(column),
+        disabled: !isSupportedDisplayValueColumn(column) && !column.pv,
         ncItemTooltip:
-          !isSupportedDisplayValueColumn(column) && columnTypeName(column)
+          !isSupportedDisplayValueColumn(column) && columnTypeName(column) && !column.pv
             ? `${columnTypeName(column)} field cannot be a display value field`
             : '',
         column,

From 457054ed4798a540e56f15b4895ac70ad85b5aa3 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:57:59 +0000
Subject: [PATCH 08/14] fix(nc-gui): don't allow AI prompt field to set as pv
 column

---
 packages/nocodb-sdk/src/lib/UITypes.ts        | 20 +++++++++----------
 .../nocodb-sdk/src/lib/helperFunctions.ts     |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/nocodb-sdk/src/lib/UITypes.ts b/packages/nocodb-sdk/src/lib/UITypes.ts
index ed9c93e567..7c1cee69a8 100644
--- a/packages/nocodb-sdk/src/lib/UITypes.ts
+++ b/packages/nocodb-sdk/src/lib/UITypes.ts
@@ -1,8 +1,7 @@
 import { ColumnReqType, ColumnType, TableType } from './Api';
 import { FormulaDataTypes } from './formulaHelpers';
 import { LongTextAiMetaProp, RelationTypes } from '~/lib/globals';
-import { parseHelper } from './helperFunctions';
-import { ncParseProp } from './helperFunctions';
+import { parseHelper, ncParseProp } from './helperFunctions';
 
 enum UITypes {
   ID = 'ID',
@@ -217,12 +216,11 @@ export function isVirtualCol(
   ].includes(<UITypes>(typeof col === 'object' ? col?.uidt : col));
 }
 
-export function isAIPromptCol(
-  col:
-    | ColumnReqType
-    | ColumnType
-) {
-  return col.uidt === UITypes.LongText && parseHelper((col as any)?.meta)?.[LongTextAiMetaProp];
+export function isAIPromptCol(col: ColumnReqType | ColumnType) {
+  return (
+    col.uidt === UITypes.LongText &&
+    parseHelper((col as any)?.meta)?.[LongTextAiMetaProp]
+  );
 }
 
 export function isCreatedOrLastModifiedTimeCol(
@@ -381,10 +379,12 @@ export const isSupportedDisplayValueColumn = (column: ColumnType) => {
       return true;
     }
     case UITypes.LongText: {
-      if (ncParseProp(column.meta)?.richMode) {
+      if (
+        ncParseProp(column.meta)?.richMode ||
+        ncParseProp(column.meta)[LongTextAiMetaProp]
+      ) {
         return false;
       }
-      //Todo: prevent AI Prompt field once it get merged in develop
       return true;
     }
 
diff --git a/packages/nocodb-sdk/src/lib/helperFunctions.ts b/packages/nocodb-sdk/src/lib/helperFunctions.ts
index e5a7e3c55c..32567926ff 100644
--- a/packages/nocodb-sdk/src/lib/helperFunctions.ts
+++ b/packages/nocodb-sdk/src/lib/helperFunctions.ts
@@ -256,7 +256,7 @@ export function parseHelper(v: any): any {
 
 export function stringifyHelper(v: any): string {
   try {
-    return JSON.stringify(v);
+    return typeof v === 'string' ? v : JSON.stringify(v);
   } catch {
     return v;
   }

From 1b564512cde6e95e55e7b0af44b608e10553d408 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:57:59 +0000
Subject: [PATCH 09/14] fix(nc-gui): disabled rich text and ai prompt options
 from long text field if it is pv column

---
 .../smartsheet/column/LongTextOptions.vue     | 32 +++++++++++++++----
 packages/nocodb-sdk/src/lib/UITypes.ts        |  7 ++--
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue b/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
index 08db2880e8..738dc8d1b9 100644
--- a/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isAIPromptCol, UITypes } from 'nocodb-sdk'
+import { columnTypeName, isAIPromptCol, UITypes, UITypesName } from 'nocodb-sdk'
 
 const props = defineProps<{
   modelValue: any
@@ -59,6 +59,12 @@ const isEnabledGenerateText = computed({
   },
 })
 
+const isPvColumn = computed(() => {
+  if (!isEdit.value) return false
+
+  return !!column.value?.pv
+})
+
 const loadViewData = async () => {
   if (!formattedData.value.length) {
     await loadData(undefined, false)
@@ -180,10 +186,16 @@ watch(isPreviewEnabled, handleDisableSubmitBtn, {
 <template>
   <div class="flex flex-col gap-4">
     <a-form-item>
-      <NcTooltip :disabled="!isEnabledGenerateText">
-        <template #title> Rich text formatting is not supported when generate text using AI is enabled </template>
+      <NcTooltip :disabled="!(isEnabledGenerateText || (isPvColumn && !richMode))">
+        <template #title>
+          {{
+            isPvColumn && !richMode
+              ? `${UITypesName.RichText} field cannot be a display value field`
+              : 'Rich text formatting is not supported when generate text using AI is enabled'
+          }}
+        </template>
         <div class="flex items-center gap-1">
-          <NcSwitch v-model:checked="richMode" :disabled="isEnabledGenerateText">
+          <NcSwitch v-model:checked="richMode" :disabled="isEnabledGenerateText || (isPvColumn && !richMode)">
             <div class="text-sm text-gray-800 select-none font-semibold">
               {{ $t('labels.enableRichText') }}
             </div>
@@ -194,12 +206,18 @@ watch(isPreviewEnabled, handleDisableSubmitBtn, {
 
     <div v-if="isPromptEnabled" class="relative">
       <a-form-item class="flex items-center">
-        <NcTooltip :disabled="!richMode" class="flex items-center">
-          <template #title> Generate text using AI is not supported when rich text formatting is enabled </template>
+        <NcTooltip :disabled="!(richMode || (isPvColumn && !isEnabledGenerateText))" class="flex items-center">
+          <template #title>
+            {{
+              isPvColumn && !isEnabledGenerateText
+                ? `${UITypesName.AIPrompt} field cannot be a display value field`
+                : 'Generate text using AI is not supported when rich text formatting is enabled'
+            }}</template
+          >
 
           <NcSwitch
             v-model:checked="isEnabledGenerateText"
-            :disabled="richMode"
+            :disabled="richMode || (isPvColumn && !isEnabledGenerateText)"
             class="nc-ai-field-generate-text nc-ai-input"
             @change="handleDisableSubmitBtn"
           >
diff --git a/packages/nocodb-sdk/src/lib/UITypes.ts b/packages/nocodb-sdk/src/lib/UITypes.ts
index 7c1cee69a8..dea52645e5 100644
--- a/packages/nocodb-sdk/src/lib/UITypes.ts
+++ b/packages/nocodb-sdk/src/lib/UITypes.ts
@@ -94,7 +94,7 @@ export const UITypesName = {
   AIPrompt: 'AI Prompt',
 };
 
-export const columnTypeName = (column: ColumnType) => {
+export const columnTypeName = (column?: ColumnType) => {
   if (!column) return '';
 
   switch (column.uidt) {
@@ -102,7 +102,10 @@ export const columnTypeName = (column: ColumnType) => {
       if (ncParseProp(column.meta)?.richMode) {
         return UITypesName.RichText;
       }
-      //Todo: prevent AI Prompt field once it get merged in develop
+
+      if (ncParseProp(column.meta)[LongTextAiMetaProp]) {
+        return UITypesName.AIPrompt;
+      }
 
       return UITypesName[column.uidt];
     }

From 4a1488d8aae64f0ba5e3b2c4eabb425eec52ccd3 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:58:00 +0000
Subject: [PATCH 10/14] fix(nc-gui): disabled select field type options if
 field edit column is pv column and user wants to change type

---
 .../smartsheet/column/EditOrAdd.vue           | 50 ++++++++++++-------
 packages/nocodb-sdk/src/lib/UITypes.ts        |  2 +-
 2 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 491f329690..6c76ef10c5 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { type ColumnReqType, type ColumnType, isAIPromptCol } from 'nocodb-sdk'
+import { type ColumnReqType, type ColumnType, isAIPromptCol, isSupportedDisplayValueColumn } from 'nocodb-sdk'
 import {
   ButtonActionsType,
   UITypes,
@@ -10,7 +10,7 @@ import {
   isVirtualCol,
   readonlyMetaAllowedTypes,
 } from 'nocodb-sdk'
-import { AiWizardTabsType, type PredictedFieldType } from '#imports'
+import { AiWizardTabsType, type PredictedFieldType, type UiTypesType } from '#imports'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 import MdiIdentifierIcon from '~icons/mdi/identifier'
@@ -195,7 +195,7 @@ const predictedFieldType = ref<UITypes | null>(null)
 
 // const lastPredictedAt = ref<number>(0)
 
-const uiTypesOptions = computed<typeof uiTypes>(() => {
+const uiTypesOptions = computed<(UiTypesType & { disabled?: boolean; tooltip?: string })[]>(() => {
   const types = [
     ...uiTypes.filter(uiFilters),
     ...(!isEdit.value && meta?.value?.columns?.every((c) => !c.pk)
@@ -236,7 +236,23 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
     }
   }
 
-  return types
+  if (!isEdit.value) {
+    return types
+  } else {
+    return types.map((type) => {
+      if (!isEdit.value) return type
+
+      const isColumnTypeDisabled =
+        !!column.value?.pv && column.value?.uidt !== type.name && !isSupportedDisplayValueColumn({ uidt: type.name as UITypes })
+
+      return {
+        ...type,
+        disabled: isColumnTypeDisabled,
+        tooltip:
+          isColumnTypeDisabled && UITypesName[type.name] ? `${UITypesName[type.name]} field cannot be a display value field` : '',
+      }
+    })
+  }
 })
 
 const editOrAddRef = ref<HTMLDivElement>()
@@ -504,10 +520,7 @@ const submitBtnLabel = computed(() => {
 })
 
 const filterOption = (input: string, option: { value: UITypes }) => {
-  return (
-    option.value.toLowerCase().includes(input.toLowerCase()) ||
-    (UITypesName[option.value] && UITypesName[option.value].toLowerCase().includes(input.toLowerCase()))
-  )
+  return searchCompare([option.value, ...(UITypesName[option.value] ? [UITypesName[option.value]] : [])], input)
 }
 
 const triggerDescriptionEnable = () => {
@@ -1077,7 +1090,7 @@ watch(activeAiTab, (newValue) => {
                 v-for="opt of uiTypesOptions"
                 :key="opt.name"
                 :value="opt.name"
-                :disabled="isMetaReadOnly && !readonlyMetaAllowedTypes.includes(opt.name)"
+                :disabled="(isMetaReadOnly && !readonlyMetaAllowedTypes.includes(opt.name)) || opt.disabled"
                 v-bind="validateInfos.uidt"
                 :class="{
                   'ant-select-item-option-active-selected': showHoverEffectOnSelectedType && formState.uidt === opt.name,
@@ -1085,7 +1098,14 @@ watch(activeAiTab, (newValue) => {
                 }"
                 @mouseover="handleResetHoverEffect"
               >
-                <div class="w-full flex gap-2 items-center justify-between" :data-testid="opt.name" :data-title="formState?.type">
+                <NcTooltip
+                  class="w-full flex gap-2 items-center justify-between"
+                  :data-testid="opt.name"
+                  :data-title="formState?.type"
+                  placement="right"
+                  :disabled="!opt?.tooltip"
+                >
+                  <template #title> {{ opt?.tooltip }} </template>
                   <div class="flex-1 flex gap-2 items-center max-w-[calc(100%_-_24px)]">
                     <component
                       :is="
@@ -1095,8 +1115,7 @@ watch(activeAiTab, (newValue) => {
                           ? iconMap.cellAi
                           : opt.icon
                       "
-                      class="nc-field-type-icon w-4 h-4"
-                      :class="isMetaReadOnly && !readonlyMetaAllowedTypes.includes(opt.name) ? 'text-gray-300' : 'text-gray-700'"
+                      class="nc-field-type-icon w-4 h-4 !opacity-90 text-current"
                     />
                     <div class="flex-1">
                       {{ UITypesName[opt.name] }}
@@ -1118,7 +1137,7 @@ watch(activeAiTab, (newValue) => {
                       'text-nc-content-purple-medium': isAiMode,
                     }"
                   />
-                </div>
+                </NcTooltip>
               </a-select-option>
             </a-select>
           </NcTooltip>
@@ -1410,11 +1429,6 @@ watch(activeAiTab, (newValue) => {
   }
 }
 
-:deep(.ant-select-disabled.nc-column-type-input) {
-  .nc-field-type-icon {
-    @apply text-current;
-  }
-}
 :deep(.ant-select.nc-column-type-input) {
   .nc-new-field-badge {
     @apply hidden;
diff --git a/packages/nocodb-sdk/src/lib/UITypes.ts b/packages/nocodb-sdk/src/lib/UITypes.ts
index dea52645e5..b25a2b87f6 100644
--- a/packages/nocodb-sdk/src/lib/UITypes.ts
+++ b/packages/nocodb-sdk/src/lib/UITypes.ts
@@ -362,7 +362,7 @@ export const getUITypesForFormulaDataType = (
   }
 };
 
-export const isSupportedDisplayValueColumn = (column: ColumnType) => {
+export const isSupportedDisplayValueColumn = (column: Partial<ColumnType>) => {
   if (!column?.uidt) return false;
 
   switch (column.uidt) {

From 06d4febe050911a569c07005d6e4c56068038a8e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:58:00 +0000
Subject: [PATCH 11/14] chore(nc-gui): lint

---
 packages/nc-gui/components/smartsheet/column/ButtonOptions.vue  | 2 +-
 .../nc-gui/components/smartsheet/column/LongTextOptions.vue     | 2 +-
 .../components/smartsheet/column/UITypesOptionsWithSearch.vue   | 2 --
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/ButtonOptions.vue b/packages/nc-gui/components/smartsheet/column/ButtonOptions.vue
index d2f6ed168a..e294acf04f 100644
--- a/packages/nc-gui/components/smartsheet/column/ButtonOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/ButtonOptions.vue
@@ -365,7 +365,7 @@ const selectIcon = (icon: string) => {
   isButtonIconDropdownOpen.value = false
 }
 
-const handleUpdateActionType = (type: ButtonActionsType) => {
+const handleUpdateActionType = () => {
   vModel.value.formula_raw = ''
 }
 
diff --git a/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue b/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
index 738dc8d1b9..04ee6604fa 100644
--- a/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { columnTypeName, isAIPromptCol, UITypes, UITypesName } from 'nocodb-sdk'
+import { UITypes, UITypesName, isAIPromptCol } from 'nocodb-sdk'
 
 const props = defineProps<{
   modelValue: any
diff --git a/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue b/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
index 99a63bd714..5e62105fb4 100644
--- a/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
+++ b/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
@@ -14,8 +14,6 @@ const searchQuery = ref('')
 
 const { isMetaReadOnly } = useRoles()
 
-const { isFeatureEnabled } = useBetaFeatureToggle()
-
 const filteredOptions = computed(
   () => options.value?.filter((c) => searchCompare([c.name, UITypesName[c.name]], searchQuery.value)) ?? [],
 )

From b02f48c327276ae8a1567e5b8f17a470a432ce6b Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:58:00 +0000
Subject: [PATCH 12/14] chore: tooltip correction

---
 packages/nc-gui/components/smartsheet/column/EditOrAdd.vue    | 4 +++-
 .../nc-gui/components/smartsheet/column/LongTextOptions.vue   | 4 ++--
 packages/nc-gui/components/smartsheet/header/Menu.vue         | 2 +-
 .../components/smartsheet/header/UpdateDisplayValue.vue       | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 6c76ef10c5..4930c234bd 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -249,7 +249,9 @@ const uiTypesOptions = computed<(UiTypesType & { disabled?: boolean; tooltip?: s
         ...type,
         disabled: isColumnTypeDisabled,
         tooltip:
-          isColumnTypeDisabled && UITypesName[type.name] ? `${UITypesName[type.name]} field cannot be a display value field` : '',
+          isColumnTypeDisabled && UITypesName[type.name]
+            ? `${UITypesName[type.name]} field cannot be used as display value field`
+            : '',
       }
     })
   }
diff --git a/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue b/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
index 04ee6604fa..0081db29a6 100644
--- a/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LongTextOptions.vue
@@ -190,7 +190,7 @@ watch(isPreviewEnabled, handleDisableSubmitBtn, {
         <template #title>
           {{
             isPvColumn && !richMode
-              ? `${UITypesName.RichText} field cannot be a display value field`
+              ? `${UITypesName.RichText} field cannot be used as display value field`
               : 'Rich text formatting is not supported when generate text using AI is enabled'
           }}
         </template>
@@ -210,7 +210,7 @@ watch(isPreviewEnabled, handleDisableSubmitBtn, {
           <template #title>
             {{
               isPvColumn && !isEnabledGenerateText
-                ? `${UITypesName.AIPrompt} field cannot be a display value field`
+                ? `${UITypesName.AIPrompt} field cannot be used as display value field`
                 : 'Generate text using AI is not supported when rich text formatting is enabled'
             }}</template
           >
diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index e66930f734..d9b24993d3 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -589,7 +589,7 @@ const onDeleteColumn = () => {
           :disabled="isSupportedDisplayValueColumn(column)"
         >
           <template #title>
-            {{ `${columnTypeName(column)} field cannot be a display value field` }}
+            {{ `${columnTypeName(column)} field cannot be used as display value field` }}
           </template>
 
           <NcMenuItem :disabled="!isSupportedDisplayValueColumn(column)" @click="setAsDisplayValue">
diff --git a/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue b/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
index b9f1890af8..6575dd61c5 100644
--- a/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
+++ b/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
@@ -39,7 +39,7 @@ const filteredColumns = computed(() => {
         disabled: !isSupportedDisplayValueColumn(column) && !column.pv,
         ncItemTooltip:
           !isSupportedDisplayValueColumn(column) && columnTypeName(column) && !column.pv
-            ? `${columnTypeName(column)} field cannot be a display value field`
+            ? `${columnTypeName(column)} field cannot be used as display value field`
             : '',
         column,
       }

From 76cba0e030c6ced32b8ed58ade6ead5ce49ec0ff Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:58:00 +0000
Subject: [PATCH 13/14] fix(nc-gui): allow decimal field to be used as display
 value field

---
 packages/nocodb-sdk/src/lib/UITypes.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nocodb-sdk/src/lib/UITypes.ts b/packages/nocodb-sdk/src/lib/UITypes.ts
index b25a2b87f6..d6195b4e78 100644
--- a/packages/nocodb-sdk/src/lib/UITypes.ts
+++ b/packages/nocodb-sdk/src/lib/UITypes.ts
@@ -378,6 +378,7 @@ export const isSupportedDisplayValueColumn = (column: Partial<ColumnType>) => {
     case UITypes.Currency:
     case UITypes.Percent:
     case UITypes.Duration:
+    case UITypes.Decimal:
     case UITypes.Formula: {
       return true;
     }

From 398253789012220941add4a6dfea6452d4f9fb6e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:58:00 +0000
Subject: [PATCH 14/14] fix(nc-gui): select field type test fail issue

---
 packages/nc-gui/components/smartsheet/column/EditOrAdd.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 4930c234bd..6e328d7b1b 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -1102,10 +1102,11 @@ watch(activeAiTab, (newValue) => {
               >
                 <NcTooltip
                   class="w-full flex gap-2 items-center justify-between"
-                  :data-testid="opt.name"
-                  :data-title="formState?.type"
                   placement="right"
                   :disabled="!opt?.tooltip"
+                  :attrs="{
+                    'data-testid': opt.name,
+                  }"
                 >
                   <template #title> {{ opt?.tooltip }} </template>
                   <div class="flex-1 flex gap-2 items-center max-w-[calc(100%_-_24px)]">