fix(api): show warning as cell content like formula

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/virtual-cell/Formula.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { message } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { CellValueInj, ColumnInj, computed, handleTZ, inject, ref, replaceUrlsWithLink, useProject } from '#imports'
@@ -13,6 +12,8 @@ const { isPg } = useProject()
 
 const showEditFormulaWarning = ref(false)
 
+const showClearFormulaWarning = ref(false)
+
 const showEditFormulaWarningMessage = () => {
   showEditFormulaWarning.value = true
 
@@ -20,6 +21,13 @@ const showEditFormulaWarningMessage = () => {
     showEditFormulaWarning.value = false
   }, 3000)
 }
+const showClearFormulaWarningMessage = () => {
+  showClearFormulaWarning.value = true
+
+  setTimeout(() => {
+    showClearFormulaWarning.value = false
+  }, 3000)
+}
 
 const result = computed(() => (isPg.value ? handleTZ(cellValue?.value) : cellValue?.value))
 
@@ -28,10 +36,10 @@ const urls = computed(() => replaceUrlsWithLink(result.value))
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
-      message.warning('Formula fields should be configured in the field menu dropdown')
+      showEditFormulaWarningMessage()
       break
     case 'Delete':
-      message.warning('Computed field: unable to clear text')
+      showClearFormulaWarningMessage()
       break
   }
 })
@@ -52,10 +60,14 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
 
       <div v-else>{{ result }}</div>
 
-      <div v-if="showEditFormulaWarning" class="text-left text-wrap mt-2 text-[#e65100]">
+      <div v-if="showEditFormulaWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
         <!-- TODO: i18n -->
         Warning: Formula fields should be configured in the field menu dropdown.
       </div>
+      <div v-if="showClearFormulaWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+        <!-- TODO: i18n -->
+        Warning: Computed field - unable to clear text.
+      </div>
     </div>
   </div>
 </template>

packages/nc-gui/components/virtual-cell/Lookup.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { message } from 'ant-design-vue'
 import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
@@ -48,55 +47,86 @@ provide(CellUrlDisableOverlayInj, ref(true))
 
 const lookupColumnMetaProps = useColumn(lookupColumn)
 
+const showEditWarning = ref(false)
+
+const showClearWarning = ref(false)
+
+const showEditWarningMessage = () => {
+  showEditWarning.value = true
+
+  setTimeout(() => {
+    showEditWarning.value = false
+  }, 3000)
+}
+const showClearWarningMessage = () => {
+  showClearWarning.value = true
+
+  setTimeout(() => {
+    showClearWarning.value = false
+  }, 3000)
+}
+
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
-      message.warning('Computed field: unable to edit')
+      showEditWarningMessage()
       break
     case 'Delete':
-      message.warning('Computed field: unable to clear text')
+      showClearWarningMessage()
       break
   }
 })
 </script>
 
 <template>
-  <div class="h-full flex gap-1 overflow-x-auto p-1">
+  <div class="h-full">
-    <template v-if="lookupColumn">
+    <div class="h-full flex gap-1 overflow-x-auto p-1">
-      <!-- Render virtual cell -->
+      <template v-if="lookupColumn">
-      <div v-if="isVirtualCol(lookupColumn)">
+        <!-- Render virtual cell -->
-        <template
+        <div v-if="isVirtualCol(lookupColumn)">
-          v-if="lookupColumn.uidt === UITypes.LinkToAnotherRecord && lookupColumn.colOptions.type === RelationTypes.BELONGS_TO"
+          <template
-        >
+            v-if="lookupColumn.uidt === UITypes.LinkToAnotherRecord && lookupColumn.colOptions.type === RelationTypes.BELONGS_TO"
-          <LazySmartsheetVirtualCell
+          >
+            <LazySmartsheetVirtualCell
+              v-for="(v, i) of arrValue"
+              :key="i"
+              :edit-enabled="false"
+              :model-value="v"
+              :column="lookupColumn"
+            />
+          </template>
+
+          <LazySmartsheetVirtualCell v-else :edit-enabled="false" :model-value="arrValue" :column="lookupColumn" />
+        </div>
+
+        <!-- Render normal cell -->
+        <template v-else>
+          <!-- For attachment cell avoid adding chip style -->
+          <div
             v-for="(v, i) of arrValue"
             :key="i"
-            :edit-enabled="false"
+            class="min-w-max"
-            :model-value="v"
+            :class="{
-            :column="lookupColumn"
+              'bg-gray-100 px-1 rounded-full flex-1': !lookupColumnMetaProps.isAttachment,
-          />
+              ' border-gray-200 rounded border-1': ![UITypes.Attachment, UITypes.MultiSelect, UITypes.SingleSelect].includes(
+                lookupColumn.uidt,
+              ),
+            }"
+          >
+            <LazySmartsheetCell :model-value="v" :column="lookupColumn" :edit-enabled="false" :virtual="true" />
+          </div>
         </template>
-
-        <LazySmartsheetVirtualCell v-else :edit-enabled="false" :model-value="arrValue" :column="lookupColumn" />
-      </div>
-
-      <!-- Render normal cell -->
-      <template v-else>
-        <!-- For attachment cell avoid adding chip style -->
-        <div
-          v-for="(v, i) of arrValue"
-          :key="i"
-          class="min-w-max"
-          :class="{
-            'bg-gray-100 px-1 rounded-full flex-1': !lookupColumnMetaProps.isAttachment,
-            ' border-gray-200 rounded border-1': ![UITypes.Attachment, UITypes.MultiSelect, UITypes.SingleSelect].includes(
-              lookupColumn.uidt,
-            ),
-          }"
-        >
-          <LazySmartsheetCell :model-value="v" :column="lookupColumn" :edit-enabled="false" :virtual="true" />
-        </div>
       </template>
-    </template>
+    </div>
+    <div>
+      <div v-if="showEditWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+        <!-- TODO: i18n -->
+        Warning: Computed field - unable to edit content.
+      </div>
+      <div v-if="showClearWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+        <!-- TODO: i18n -->
+        Warning: Computed field - unable to clear content.
+      </div>
+    </div>
   </div>
 </template>

packages/nc-gui/components/virtual-cell/Rollup.vue

@@ -1,23 +1,55 @@
 <script setup lang="ts">
-import { message } from 'ant-design-vue'
 import { CellValueInj, inject } from '#imports'
 
 const value = inject(CellValueInj)
 
+const showEditWarning = ref(false)
+
+const showClearWarning = ref(false)
+
+const showEditWarningMessage = () => {
+  showEditWarning.value = true
+
+  setTimeout(() => {
+    showEditWarning.value = false
+  }, 3000)
+}
+
+const showClearWarningMessage = () => {
+  showClearWarning.value = true
+
+  setTimeout(() => {
+    showClearWarning.value = false
+  }, 3000)
+}
+
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
-      message.warning('Computed field: unable to edit')
+      showEditWarningMessage()
       break
     case 'Delete':
-      message.warning('Computed field: unable to clear text')
+      showClearWarningMessage()
       break
   }
 })
 </script>
 
 <template>
-  <span class="text-center pl-3">
+  <div>
-    {{ value }}
+    <span class="text-center pl-3">
-  </span>
+      {{ value }}
+    </span>
+
+    <div>
+      <div v-if="showEditWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+        <!-- TODO: i18n -->
+        Warning: Computed field - unable to edit content.
+      </div>
+      <div v-if="showClearWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+        <!-- TODO: i18n -->
+        Warning: Computed field - unable to clear content.
+      </div>
+    </div>
+  </div>
 </template>

packages/nc-gui/components/virtual-cell/components/ListItems.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { onUnmounted } from '@vue/runtime-core'
 import type { Card } from 'ant-design-vue'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
@@ -105,34 +104,25 @@ watch(expandedFormDlg, (nexVal) => {
   if (!nexVal && !isNew.value) vModel.value = false
 })
 
-const { cleanup } = useSelectedCellKeyupListener(
+useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
-  vModel,
+  switch (e.key) {
-  (e: KeyboardEvent) => {
+    case 'ArrowUp':
-    switch (e.key) {
+      selectedRowIndex.value = Math.max(0, selectedRowIndex.value - 1)
-      case 'ArrowUp':
+      e.stopPropagation()
-        selectedRowIndex.value = Math.max(0, selectedRowIndex.value - 1)
+      break
+    case 'ArrowDown':
+      selectedRowIndex.value = Math.min(childrenExcludedList.value?.list?.length - 1, selectedRowIndex.value + 1)
+      e.stopPropagation()
+      break
+    case 'Enter':
+      const selectedRow = childrenExcludedList.value?.list?.[selectedRowIndex.value]
+      if (selectedRow) {
+        linkRow(selectedRow)
         e.stopPropagation()
-        break
+      }
-      case 'ArrowDown':
+      break
-        selectedRowIndex.value = Math.min(childrenExcludedList.value?.list?.length - 1, selectedRowIndex.value + 1)
+  }
-        e.stopPropagation()
-        break
-      case 'Enter':
-        const selectedRow = childrenExcludedList.value?.list?.[selectedRowIndex.value]
-        if (selectedRow) {
-          linkRow(selectedRow)
-          e.stopPropagation()
-        }
-        break
-    }
-  },
-  true,
-)
-
-onUnmounted(() => {
-  cleanup.value?.()
 })
-
 const activeRow = (el: InstanceType<typeof Card>) => {
   el?.$el?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }