From 1faea6dd485cb282117ae257b642dbdd9ace60cd Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 4 Jan 2024 11:07:52 +0000
Subject: [PATCH 1/7] fix: render formula field type display value in blue

---
 packages/nc-gui/components/smartsheet/VirtualCell.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui/components/smartsheet/VirtualCell.vue b/packages/nc-gui/components/smartsheet/VirtualCell.vue
index a9b78586be..b3f55d4666 100644
--- a/packages/nc-gui/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/VirtualCell.vue
@@ -23,6 +23,7 @@ import {
   isRollup,
   provide,
   toRef,
+  isPrimary,
 } from '#imports'
 import type { Row } from '#imports'
 
@@ -99,6 +100,7 @@ onUnmounted(() => {
     class="nc-virtual-cell w-full flex items-center"
     :class="{
       'text-right justify-end': isGrid && !isForm && isRollup(column) && !isExpandedForm,
+      'text-brand-500': isPrimary(column) && !isForm,
     }"
     @keydown.enter.exact="onNavigate(NavigateDir.NEXT, $event)"
     @keydown.shift.enter.exact="onNavigate(NavigateDir.PREV, $event)"

From eb3d2b0a3a07fca79a96575194db65d01542e2a5 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 4 Jan 2024 11:07:52 +0000
Subject: [PATCH 2/7] fix: render display value in blue - date, dateTime, time,
 year

---
 packages/nc-gui/components/cell/DatePicker.vue                | 4 ++--
 packages/nc-gui/components/cell/DateTimePicker.vue            | 4 ++--
 packages/nc-gui/components/cell/TimePicker.vue                | 4 ++--
 packages/nc-gui/components/cell/YearPicker.vue                | 4 ++--
 .../nc-gui/components/virtual-cell/components/ListItem.vue    | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index f137d7ef63..e39344c91e 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -243,7 +243,7 @@ const clickHandler = () => {
     :picker="picker"
     :tabindex="0"
     :bordered="false"
-    class="!w-full !py-1 !border-none"
+    class="!w-full !py-1 !border-none !text-current"
     :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
     :format="dateFormat"
     :placeholder="placeholder"
@@ -260,7 +260,7 @@ const clickHandler = () => {
 </template>
 
 <style scoped>
-:deep(.ant-picker-input > input[disabled]) {
+:deep(.ant-picker-input > input) {
   @apply !text-current;
 }
 </style>
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 381feff1bb..173c063f0b 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -296,7 +296,7 @@ const isColDisabled = computed(() => {
     :disabled="isColDisabled"
     :show-time="true"
     :bordered="false"
-    class="!w-full !py-1 !border-none"
+    class="!w-full !py-1 !border-none !text-current"
     :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
     :format="dateTimeFormat"
     :placeholder="placeholder"
@@ -313,7 +313,7 @@ const isColDisabled = computed(() => {
 </template>
 
 <style scoped>
-:deep(.ant-picker-input > input[disabled]) {
+:deep(.ant-picker-input > input) {
   @apply !text-current;
 }
 </style>
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 3757f4a131..34081a1e1e 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -133,7 +133,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :bordered="false"
     use12-hours
     format="HH:mm"
-    class="!w-full !py-1 !border-none"
+    class="!w-full !py-1 !border-none !text-current"
     :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
@@ -148,7 +148,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
 </template>
 
 <style scoped>
-:deep(.ant-picker-input > input[disabled]) {
+:deep(.ant-picker-input > input) {
   @apply !text-current;
 }
 </style>
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index 3b7ab61455..090845cb17 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -119,7 +119,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :tabindex="0"
     picker="year"
     :bordered="false"
-    class="!w-full !py-1 !border-none"
+    class="!w-full !py-1 !border-none !text-current"
     :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
     :placeholder="placeholder"
     :allow-clear="(!readOnly && !localState && !isPk) || isEditColumn"
@@ -136,7 +136,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
 </template>
 
 <style scoped>
-:deep(.ant-picker-input > input[disabled]) {
+:deep(.ant-picker-input > input) {
   @apply !text-current;
 }
 </style>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
index 8dd8ef034a..0e83c33e08 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
@@ -103,7 +103,7 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
 
       <div class="flex flex-col m-[.75rem] gap-1 flex-grow justify-center overflow-hidden">
         <div class="flex justify-between xs:gap-x-2">
-          <span class="font-semibold text-gray-800 nc-display-value xs:(truncate)">
+          <span class="font-semibold text-brand-500 nc-display-value xs:(truncate)">
             {{ row[relatedTableDisplayValueProp] }}
           </span>
           <div

From 291e05481b8330115d784abb0d8b7618713ef470 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 4 Jan 2024 11:07:53 +0000
Subject: [PATCH 3/7] fix: expanded links add record list items display value
 is not rendered as cell display format

---
 .../components/smartsheet/grid/GroupBy.vue    | 24 ++++++-----
 .../components/ListChildItems.vue             |  2 +
 .../virtual-cell/components/ListItem.vue      | 20 +++++++++-
 .../virtual-cell/components/ListItems.vue     |  2 +
 packages/nc-gui/composables/useLTARStore.ts   | 40 ++++++++++++++++++-
 packages/nocodb-sdk/src/lib/dateTimeHelper.ts |  9 +++--
 6 files changed, 80 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
index 510c902cb2..2bf3e6512c 100644
--- a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
+++ b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import tinycolor from 'tinycolor2'
-import dayjs from 'dayjs'
-import { UITypes, dateFormats, timeFormats } from 'nocodb-sdk'
+import { UITypes, dateFormats, parseStringDateTime, timeFormats } from 'nocodb-sdk'
 import Table from './Table.vue'
 import GroupBy from './GroupBy.vue'
 import GroupByTable from './GroupByTable.vue'
@@ -154,18 +153,21 @@ const parseKey = (group: Group) => {
   }
 
   // show the groupBy dateTime field title format as like cell format
-  if (key && group.column?.uidt === UITypes.DateTime && dayjs(key).isValid()) {
-    const dateFormat = parseProp(group.column?.meta)?.date_format ?? dateFormats[0]
-    const timeFormat = parseProp(group.column?.meta)?.time_format ?? timeFormats[0]
-
-    const dateTimeFormat = `${dateFormat} ${timeFormat}`
-
-    return [dayjs(key).utc().local().format(dateTimeFormat)]
+  if (key && group.column?.uidt === UITypes.DateTime) {
+    const dateTime = parseStringDateTime(
+      key,
+      `${parseProp(group.column?.meta)?.date_format ?? dateFormats[0]} ${
+        parseProp(group.column?.meta)?.time_format ?? timeFormats[0]
+      }`,
+    )
+
+    return [dateTime]
   }
 
   // show the groupBy time field title format as like cell format
-  if (key && group.column?.uidt === UITypes.Time && dayjs(key).isValid()) {
-    return [dayjs(key).format(timeFormats[0])]
+  if (key && group.column?.uidt === UITypes.Time) {
+    const time = parseStringDateTime(key, timeFormats[0], false)
+    return [time]
   }
 
   if (key && group.column?.uidt === UITypes.User) {
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 8e26b8b41c..4c40b7a9d5 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -49,6 +49,7 @@ const {
   loadChildrenList,
   childrenListPagination,
   relatedTableDisplayValueProp,
+  relatedTableDisplayValueTypeAndFormatProp,
   unlink,
   isChildrenListLoading,
   isChildrenListLinked,
@@ -260,6 +261,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
               data-testid="nc-child-list-item"
               :attachment="attachmentCol"
               :related-table-display-value-prop="relatedTableDisplayValueProp"
+              :related-table-display-value-type-and-format-prop="relatedTableDisplayValueTypeAndFormatProp"
               :is-linked="childrenList?.list ? isChildrenListLinked[Number.parseInt(id)] : true"
               :is-loading="isChildrenListLoading[Number.parseInt(id)]"
               @expand="onClick(refRow)"
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
index 0e83c33e08..cb62e6a9cb 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { isVirtualCol } from 'nocodb-sdk'
+import { UITypes, isVirtualCol, parseStringDateTime } from 'nocodb-sdk'
 import {
   type ComputedRef,
   IsExpandedFormOpenInj,
@@ -22,6 +22,7 @@ const props = defineProps<{
   fields: any[]
   attachment: any
   relatedTableDisplayValueProp: string
+  relatedTableDisplayValueTypeAndFormatProp: { type: string; format: string }
   isLoading: boolean
   isLinked: boolean
 }>()
@@ -68,6 +69,21 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
     return []
   }
 })
+
+const displayValue = computed(() => {
+  if (
+    row.value[props.relatedTableDisplayValueProp] &&
+    props.relatedTableDisplayValueTypeAndFormatProp.type &&
+    props.relatedTableDisplayValueTypeAndFormatProp.format
+  ) {
+    return parseStringDateTime(
+      row.value[props.relatedTableDisplayValueProp],
+      props.relatedTableDisplayValueTypeAndFormatProp.format,
+      !(props.relatedTableDisplayValueTypeAndFormatProp.format === UITypes.Time),
+    )
+  }
+  return row.value[props.relatedTableDisplayValueProp]
+})
 </script>
 
 <template>
@@ -104,7 +120,7 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
       <div class="flex flex-col m-[.75rem] gap-1 flex-grow justify-center overflow-hidden">
         <div class="flex justify-between xs:gap-x-2">
           <span class="font-semibold text-brand-500 nc-display-value xs:(truncate)">
-            {{ row[relatedTableDisplayValueProp] }}
+            {{ displayValue }}
           </span>
           <div
             v-if="isLinked && !isLoading"
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 73fd1bc59e..0969cc8786 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -44,6 +44,7 @@ const {
   loadChildrenList,
   childrenExcludedListPagination,
   relatedTableDisplayValueProp,
+  relatedTableDisplayValueTypeAndFormatProp,
   link,
   relatedTableMeta,
   meta,
@@ -315,6 +316,7 @@ const onCreatedRecord = (record: any) => {
             :fields="fields"
             :attachment="attachmentCol"
             :related-table-display-value-prop="relatedTableDisplayValueProp"
+            :related-table-display-value-type-and-format-prop="relatedTableDisplayValueTypeAndFormatProp"
             :is-loading="isChildrenExcludedListLoading[Number.parseInt(id)]"
             :is-linked="isChildrenExcludedListLinked[Number.parseInt(id)]"
             @expand="
diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts
index abf2a544e7..9ed4c013e6 100644
--- a/packages/nc-gui/composables/useLTARStore.ts
+++ b/packages/nc-gui/composables/useLTARStore.ts
@@ -1,4 +1,13 @@
-import type { ColumnType, LinkToAnotherRecordType, PaginatedType, RequestParams, TableType } from 'nocodb-sdk'
+import {
+  UITypes,
+  type ColumnType,
+  type LinkToAnotherRecordType,
+  type PaginatedType,
+  type RequestParams,
+  type TableType,
+  dateFormats,
+  timeFormats,
+} from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import {
   IsPublicInj,
@@ -20,6 +29,7 @@ import {
   useRouter,
   useSharedView,
   watch,
+  parseProp,
 } from '#imports'
 import type { Row } from '#imports'
 
@@ -121,9 +131,36 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       return (relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title || ''
     })
 
+    const relatedTableDisplayValueTypeAndFormatProp = computed(() => {
+      let dateOrDateTimeFieldTypeAndFormat = {
+        type: '',
+        format: '',
+      }
+      let currentColumn = relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0]
+
+      if (currentColumn) {
+        if (currentColumn?.uidt === UITypes.DateTime) {
+          dateOrDateTimeFieldTypeAndFormat = {
+            type: currentColumn?.uidt,
+            format: `${parseProp(currentColumn?.meta)?.date_format ?? dateFormats[0]} ${
+              parseProp(currentColumn?.meta)?.time_format ?? timeFormats[0]
+            }`,
+          }
+        }
+        if (currentColumn?.uidt === UITypes.Time) {
+          dateOrDateTimeFieldTypeAndFormat = {
+            type: currentColumn?.uidt,
+            format: `${timeFormats[0]}`,
+          }
+        }
+      }
+      return dateOrDateTimeFieldTypeAndFormat
+    })
+
     const relatedTablePrimaryKeyProps = computed(() => {
       return relatedTableMeta.value?.columns?.filter((c) => c.pk)?.map((c) => c.title) ?? []
     })
+
     const displayValueProp = computed(() => {
       return (meta.value?.columns?.find((c: Required<ColumnType>) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
     })
@@ -470,6 +507,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       relatedTableMeta,
       loadRelatedTableMeta,
       relatedTableDisplayValueProp,
+      relatedTableDisplayValueTypeAndFormatProp,
       childrenExcludedList,
       childrenList,
       childrenListCount,
diff --git a/packages/nocodb-sdk/src/lib/dateTimeHelper.ts b/packages/nocodb-sdk/src/lib/dateTimeHelper.ts
index 7d98d29c75..e0652f13b3 100644
--- a/packages/nocodb-sdk/src/lib/dateTimeHelper.ts
+++ b/packages/nocodb-sdk/src/lib/dateTimeHelper.ts
@@ -79,14 +79,17 @@ export function parseStringDate(v: string, dateFormat: string) {
 
 export function parseStringDateTime(
   v: string,
-  dateTimeFormat: string = `${dateFormats[0]} ${timeFormats[0]}`
+  dateTimeFormat: string = `${dateFormats[0]} ${timeFormats[0]}`,
+  toLocal: boolean = true
 ) {
-  const dayjsObj = dayjs(v).local();
+  const dayjsObj = toLocal ? dayjs(v).local() : dayjs(v);
 
   if (dayjsObj.isValid()) {
     v = dayjsObj.format(dateTimeFormat);
   } else {
-    v = dayjs(v, dateTimeFormat).local().format(dateTimeFormat);
+    v = toLocal
+      ? dayjs(v, dateTimeFormat).local().format(dateTimeFormat)
+      : dayjs(v, dateTimeFormat).format(dateTimeFormat);
   }
 
   return v;

From 112f42d8055c5e79ec6c20309c43e430ad86b750 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 4 Jan 2024 11:07:53 +0000
Subject: [PATCH 4/7] fix: add links modal displayValue in header is not like
 cell format

---
 .../components/ListChildItems.vue             |  8 ++--
 .../virtual-cell/components/ListItem.vue      | 10 ++---
 .../virtual-cell/components/ListItems.vue     |  8 ++--
 packages/nc-gui/composables/useLTARStore.ts   | 41 +++++++++++++------
 4 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 4c40b7a9d5..3a35ef42b0 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -49,7 +49,7 @@ const {
   loadChildrenList,
   childrenListPagination,
   relatedTableDisplayValueProp,
-  relatedTableDisplayValueTypeAndFormatProp,
+  displayValueTypeAndFormatProp,
   unlink,
   isChildrenListLoading,
   isChildrenListLinked,
@@ -58,7 +58,7 @@ const {
   row,
   link,
   meta,
-  displayValueProp,
+  headerDisplayValue
 } = useLTARStoreOrThrow()
 
 const { isNew, state, removeLTARRef, addLTARRef } = useSmartsheetRowStoreOrThrow()
@@ -196,7 +196,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
       :table-title="meta?.title"
       :header="$t('activity.linkedRecords')"
       :related-table-title="relatedTableMeta?.title"
-      :display-value="row.row[displayValueProp]"
+      :display-value="headerDisplayValue"
     />
     <div v-if="!isForm" class="flex mt-2 mb-2 items-center gap-2">
       <div
@@ -261,7 +261,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
               data-testid="nc-child-list-item"
               :attachment="attachmentCol"
               :related-table-display-value-prop="relatedTableDisplayValueProp"
-              :related-table-display-value-type-and-format-prop="relatedTableDisplayValueTypeAndFormatProp"
+              :display-value-type-and-format-prop="displayValueTypeAndFormatProp"
               :is-linked="childrenList?.list ? isChildrenListLinked[Number.parseInt(id)] : true"
               :is-loading="isChildrenListLoading[Number.parseInt(id)]"
               @expand="onClick(refRow)"
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
index cb62e6a9cb..69f9d7364e 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
@@ -22,7 +22,7 @@ const props = defineProps<{
   fields: any[]
   attachment: any
   relatedTableDisplayValueProp: string
-  relatedTableDisplayValueTypeAndFormatProp: { type: string; format: string }
+  displayValueTypeAndFormatProp: { type: string; format: string }
   isLoading: boolean
   isLinked: boolean
 }>()
@@ -73,13 +73,13 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
 const displayValue = computed(() => {
   if (
     row.value[props.relatedTableDisplayValueProp] &&
-    props.relatedTableDisplayValueTypeAndFormatProp.type &&
-    props.relatedTableDisplayValueTypeAndFormatProp.format
+    props.displayValueTypeAndFormatProp.type &&
+    props.displayValueTypeAndFormatProp.format
   ) {
     return parseStringDateTime(
       row.value[props.relatedTableDisplayValueProp],
-      props.relatedTableDisplayValueTypeAndFormatProp.format,
-      !(props.relatedTableDisplayValueTypeAndFormatProp.format === UITypes.Time),
+      props.displayValueTypeAndFormatProp.format,
+      !(props.displayValueTypeAndFormatProp.format === UITypes.Time),
     )
   }
   return row.value[props.relatedTableDisplayValueProp]
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 0969cc8786..ee5059f3b6 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -37,19 +37,19 @@ const {
   childrenExcludedList,
   isChildrenExcludedListLinked,
   isChildrenExcludedListLoading,
-  displayValueProp,
   isChildrenExcludedLoading,
   childrenListCount,
   loadChildrenExcludedList,
   loadChildrenList,
   childrenExcludedListPagination,
   relatedTableDisplayValueProp,
-  relatedTableDisplayValueTypeAndFormatProp,
+  displayValueTypeAndFormatProp,
   link,
   relatedTableMeta,
   meta,
   unlink,
   row,
+  headerDisplayValue
 } = useLTARStoreOrThrow()
 
 const { addLTARRef, isNew, removeLTARRef, state: rowState } = useSmartsheetRowStoreOrThrow()
@@ -236,7 +236,7 @@ const onCreatedRecord = (record: any) => {
       :relation="relation"
       :table-title="meta?.title"
       :related-table-title="relatedTableMeta?.title"
-      :display-value="row.row[displayValueProp]"
+      :display-value="headerDisplayValue"
       :header="$t('activity.addNewLink')"
     />
     <div class="flex mt-2 mb-2 items-center gap-2">
@@ -316,7 +316,7 @@ const onCreatedRecord = (record: any) => {
             :fields="fields"
             :attachment="attachmentCol"
             :related-table-display-value-prop="relatedTableDisplayValueProp"
-            :related-table-display-value-type-and-format-prop="relatedTableDisplayValueTypeAndFormatProp"
+            :display-value-type-and-format-prop="displayValueTypeAndFormatProp"
             :is-loading="isChildrenExcludedListLoading[Number.parseInt(id)]"
             :is-linked="isChildrenExcludedListLinked[Number.parseInt(id)]"
             @expand="
diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts
index 9ed4c013e6..623dd8008a 100644
--- a/packages/nc-gui/composables/useLTARStore.ts
+++ b/packages/nc-gui/composables/useLTARStore.ts
@@ -7,6 +7,7 @@ import {
   type TableType,
   dateFormats,
   timeFormats,
+  parseStringDateTime,
 } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import {
@@ -131,8 +132,16 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       return (relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title || ''
     })
 
-    const relatedTableDisplayValueTypeAndFormatProp = computed(() => {
-      let dateOrDateTimeFieldTypeAndFormat = {
+    const relatedTablePrimaryKeyProps = computed(() => {
+      return relatedTableMeta.value?.columns?.filter((c) => c.pk)?.map((c) => c.title) ?? []
+    })
+
+    const displayValueProp = computed(() => {
+      return (meta.value?.columns?.find((c: Required<ColumnType>) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
+    })
+
+    const displayValueTypeAndFormatProp = computed(() => {
+      let displayValueTypeAndFormat = {
         type: '',
         format: '',
       }
@@ -140,7 +149,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
 
       if (currentColumn) {
         if (currentColumn?.uidt === UITypes.DateTime) {
-          dateOrDateTimeFieldTypeAndFormat = {
+          displayValueTypeAndFormat = {
             type: currentColumn?.uidt,
             format: `${parseProp(currentColumn?.meta)?.date_format ?? dateFormats[0]} ${
               parseProp(currentColumn?.meta)?.time_format ?? timeFormats[0]
@@ -148,21 +157,28 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           }
         }
         if (currentColumn?.uidt === UITypes.Time) {
-          dateOrDateTimeFieldTypeAndFormat = {
+          displayValueTypeAndFormat = {
             type: currentColumn?.uidt,
             format: `${timeFormats[0]}`,
           }
         }
       }
-      return dateOrDateTimeFieldTypeAndFormat
+      return displayValueTypeAndFormat
     })
 
-    const relatedTablePrimaryKeyProps = computed(() => {
-      return relatedTableMeta.value?.columns?.filter((c) => c.pk)?.map((c) => c.title) ?? []
-    })
-
-    const displayValueProp = computed(() => {
-      return (meta.value?.columns?.find((c: Required<ColumnType>) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
+    const headerDisplayValue = computed(() => {
+      if (
+        row.value.row[displayValueProp.value] &&
+        displayValueTypeAndFormatProp.value.type &&
+        displayValueTypeAndFormatProp.value.format
+      ) {
+        return parseStringDateTime(
+          row.value.row[displayValueProp.value],
+          displayValueTypeAndFormatProp.value.format,
+          !(displayValueTypeAndFormatProp.value.format === UITypes.Time),
+        )
+      }
+      return row.value.row[displayValueProp.value]
     })
 
     const loadChildrenExcludedList = async (activeState?: any) => {
@@ -507,7 +523,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       relatedTableMeta,
       loadRelatedTableMeta,
       relatedTableDisplayValueProp,
-      relatedTableDisplayValueTypeAndFormatProp,
+      displayValueTypeAndFormatProp,
       childrenExcludedList,
       childrenList,
       childrenListCount,
@@ -529,6 +545,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       isChildrenExcludedLoading,
       deleteRelatedRow,
       getRelatedTableRowId,
+      headerDisplayValue
     }
   },
   'ltar-store',

From 53a31efc965498de1c93ccb75b02bbec28fda4bc Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 4 Jan 2024 11:07:53 +0000
Subject: [PATCH 5/7] fix: group by lookup groupHeaderLabel height changes as
 row height change

---
 .../components/smartsheet/grid/GroupByLabel.vue      | 12 ++++++++++--
 packages/nc-gui/components/virtual-cell/Lookup.vue   |  4 +++-
 packages/nc-gui/context/index.ts                     |  1 +
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue b/packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue
index 2e9638e344..977742537e 100644
--- a/packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue
+++ b/packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue
@@ -1,19 +1,27 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { isVirtualCol } from 'nocodb-sdk'
+import { ReadonlyInj, IsGroupByLabelInj } from '#imports'
 
 defineProps<{
   column: ColumnType
   modelValue: any
 }>()
 
-provide(ReadonlyInj, true)
+provide(ReadonlyInj, ref(true))
+provide(IsGroupByLabelInj, ref(true))
 </script>
 
 <template>
   <div class="pointer-events-none">
     <LazySmartsheetRow :row="{ row: { [column.title]: modelValue }, rowMeta: {} }">
-      <LazySmartsheetVirtualCell v-if="isVirtualCol(column)" :model-value="modelValue" class="!text-gray-600" :column="column" />
+      <LazySmartsheetVirtualCell
+        v-if="isVirtualCol(column)"
+        :model-value="modelValue"
+        class="!text-gray-600"
+        :column="column"
+        :read-only="true"
+      />
 
       <LazySmartsheetCell
         v-else
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index c869bd6f22..c55ae4a4b3 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -25,6 +25,8 @@ const meta = inject(MetaInj, ref())
 
 const cellValue = inject(CellValueInj, ref())
 
+const isGroupByLabel = inject(IsGroupByLabelInj, ref(false))
+
 // Change the row height of the child cell under lookup
 // Other wise things like text will can take multi line tag
 const providedHeightRef = ref(1) as any
@@ -100,7 +102,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
   <div
     class="h-full w-full nc-lookup-cell"
     tabindex="-1"
-    :style="{ height: rowHeight && rowHeight !== 1 ? `${rowHeight * 2}rem` : `2.85rem` }"
+    :style="{ height: isGroupByLabel ? undefined : rowHeight && rowHeight !== 1 ? `${rowHeight * 2}rem` : `2.85rem` }"
     @dblclick="activateShowEditNonEditableFieldWarning"
   >
     <div
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index a6f1106d99..240adb3e8d 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -13,6 +13,7 @@ export const IsFormInj: InjectionKey<Ref<boolean>> = Symbol('is-form-injection')
 export const IsSurveyFormInj: InjectionKey<Ref<boolean>> = Symbol('is-survey-form-injection')
 export const IsGridInj: InjectionKey<Ref<boolean>> = Symbol('is-grid-injection')
 export const IsGroupByInj: InjectionKey<Ref<boolean>> = Symbol('is-group-by-injection')
+export const IsGroupByLabelInj: InjectionKey<Ref<boolean>> = Symbol('is-group-by-label-injection')
 export const IsGalleryInj: InjectionKey<Ref<boolean>> = Symbol('is-gallery-injection')
 export const IsKanbanInj: InjectionKey<Ref<boolean>> = Symbol('is-kanban-injection')
 export const IsLockedInj: InjectionKey<Ref<boolean>> = Symbol('is-locked-injection')

From 03468c17d959d29db7253bb15ac1809b92eb6d05 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 4 Jan 2024 11:07:53 +0000
Subject: [PATCH 6/7] fix: render displayValue in blue color in gallery &
 Kanban view

---
 packages/nc-gui/components/smartsheet/Gallery.vue | 4 ++--
 packages/nc-gui/components/smartsheet/Kanban.vue  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index c648ccbab9..9b636913ab 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -295,7 +295,7 @@ watch(
                 <LazySmartsheetVirtualCell
                   v-if="isVirtualCol(displayField)"
                   v-model="record.row[displayField.title]"
-                  class="!text-gray-600"
+                  class="!text-brand-500"
                   :column="displayField"
                   :row="record"
                 />
@@ -303,7 +303,7 @@ watch(
                 <LazySmartsheetCell
                   v-else
                   v-model="record.row[displayField.title]"
-                  class="!text-gray-600"
+                  class="!text-brand-500"
                   :column="displayField"
                   :edit-enabled="false"
                   :read-only="true"
diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 0024ad4c65..22e02d1e6b 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -593,7 +593,7 @@ const getRowId = (row: RowType) => {
                                   <LazySmartsheetVirtualCell
                                     v-if="isVirtualCol(displayField)"
                                     v-model="record.row[displayField.title]"
-                                    class="!text-gray-600"
+                                    class="!text-brand-500"
                                     :column="displayField"
                                     :row="record"
                                   />
@@ -601,7 +601,7 @@ const getRowId = (row: RowType) => {
                                   <LazySmartsheetCell
                                     v-else
                                     v-model="record.row[displayField.title]"
-                                    class="!text-gray-600"
+                                    class="!text-brand-500"
                                     :column="displayField"
                                     :edit-enabled="false"
                                     :read-only="true"

From ef28d43cc59329bb96248e425b5c219dfdb5be27 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 4 Jan 2024 11:07:53 +0000
Subject: [PATCH 7/7] fix: review changes

---
 .../components/smartsheet/grid/GroupBy.vue    | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
index 2bf3e6512c..9accec8518 100644
--- a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
+++ b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
@@ -154,20 +154,19 @@ const parseKey = (group: Group) => {
 
   // show the groupBy dateTime field title format as like cell format
   if (key && group.column?.uidt === UITypes.DateTime) {
-    const dateTime = parseStringDateTime(
-      key,
-      `${parseProp(group.column?.meta)?.date_format ?? dateFormats[0]} ${
-        parseProp(group.column?.meta)?.time_format ?? timeFormats[0]
-      }`,
-    )
-
-    return [dateTime]
+    return [
+      parseStringDateTime(
+        key,
+        `${parseProp(group.column?.meta)?.date_format ?? dateFormats[0]} ${
+          parseProp(group.column?.meta)?.time_format ?? timeFormats[0]
+        }`,
+      ),
+    ]
   }
 
   // show the groupBy time field title format as like cell format
   if (key && group.column?.uidt === UITypes.Time) {
-    const time = parseStringDateTime(key, timeFormats[0], false)
-    return [time]
+    return [parseStringDateTime(key, timeFormats[0], false)]
   }
 
   if (key && group.column?.uidt === UITypes.User) {