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,19 +47,39 @@ 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">
     <div class="h-full flex gap-1 overflow-x-auto p-1">
       <template v-if="lookupColumn">
         <!-- Render virtual cell -->
@@ -99,4 +118,15 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
         </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>
+  <div>
     <span class="text-center pl-3">
       {{ 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,9 +104,7 @@ watch(expandedFormDlg, (nexVal) => {
   if (!nexVal && !isNew.value) vModel.value = false
 })
 
-const { cleanup } = useSelectedCellKeyupListener(
-  vModel,
-  (e: KeyboardEvent) => {
+useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'ArrowUp':
       selectedRowIndex.value = Math.max(0, selectedRowIndex.value - 1)
@@ -125,14 +122,7 @@ const { cleanup } = useSelectedCellKeyupListener(
       }
       break
   }
-  },
-  true,
-)
-
-onUnmounted(() => {
-  cleanup.value?.()
 })
-
 const activeRow = (el: InstanceType<typeof Card>) => {
   el?.$el?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }