Merge pull request #3185 from nocodb/fix/added-showing-error-message-on-url-error

Added showing error message on invalid url entry

packages/nc-gui-v2/components/cell/Url.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
+import { message } from 'ant-design-vue'
 import { ColumnInj, EditModeInj, computed, inject, isValidURL } from '#imports'
+import MiCircleWarning from '~icons/mi/circle-warning'
 
 interface Props {
   modelValue?: string | null
@@ -14,10 +16,14 @@ const column = inject(ColumnInj)!
 
 const editEnabled = inject(EditModeInj)!
 
+// Used in the logic of when to display error since we are not storing the url if its not valid
+const localState = ref(value)
+
 const vModel = computed({
   get: () => value,
   set: (val) => {
-    if (!column.value.meta?.validate || (val && isValidURL(val))) {
+    localState.value = val
+    if (!column.value.meta?.validate || (val && isValidURL(val)) || !val) {
       emit('update:modelValue', val)
     }
   },
@@ -35,14 +41,37 @@ const url = computed(() => {
 })
 
 const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
+
+watch(
+  () => editEnabled.value,
+  () => {
+    if (column.value.meta?.validate && !editEnabled.value && localState.value && !isValidURL(localState.value)) {
+      message.error('Invalid URL')
+      localState.value = undefined
+      return
+    }
+    localState.value = value
+  },
+)
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm" @blur="editEnabled = false" />
+  <div class="flex flex-row items-center justify-between">
+    <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm w-full" @blur="editEnabled = false" />
+
+    <nuxt-link v-else-if="isValid" class="text-sm underline hover:opacity-75" :to="url" target="_blank">{{ value }} </nuxt-link>
 
-  <nuxt-link v-else-if="isValid" class="text-sm underline hover:opacity-75" :to="url" target="_blank">{{ value }} </nuxt-link>
+    <span v-else class="w-9/10 overflow-ellipsis overflow-hidden">{{ value }}</span>
 
-  <span v-else>{{ value }}</span>
+    <div v-if="column.meta?.validate && !isValid && value?.length && !editEnabled" class="mr-1 w-1/10">
+      <a-tooltip placement="top">
+        <template #title> Invalid URL </template>
+        <div class="flex flex-row items-center">
+          <MiCircleWarning class="text-red-400 h-4" />
+        </div>
+      </a-tooltip>
+    </div>
+  </div>
 </template>
 
 <!--

packages/nc-gui-v2/package-lock.json

@@ -39,6 +39,7 @@
         "@iconify-json/lucide": "^1.1.36",
         "@iconify-json/material-symbols": "^1.1.8",
         "@iconify-json/mdi": "^1.1.25",
+        "@iconify-json/mi": "^1.1.2",
         "@iconify-json/ri": "^1.1.3",
         "@intlify/vite-plugin-vue-i18n": "^6.0.1",
         "@nuxt/image-edge": "^1.0.0-27657146.da85542",
@@ -1058,6 +1059,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/mi": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/mi/-/mi-1.1.2.tgz",
+      "integrity": "sha512-NPyKBxoui8Oude4ChB80iBLRdI22xpM6JFFYpDHycxREQgzfVyoOuX1ukpbWOe+IkEVvFFLZzSDOlPcipn1cgw==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/ri": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.3.tgz",
@@ -16008,6 +16018,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/mi": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/mi/-/mi-1.1.2.tgz",
+      "integrity": "sha512-NPyKBxoui8Oude4ChB80iBLRdI22xpM6JFFYpDHycxREQgzfVyoOuX1ukpbWOe+IkEVvFFLZzSDOlPcipn1cgw==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/ri": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.3.tgz",

packages/nc-gui-v2/package.json

@@ -45,6 +45,7 @@
     "@iconify-json/lucide": "^1.1.36",
     "@iconify-json/material-symbols": "^1.1.8",
     "@iconify-json/mdi": "^1.1.25",
+    "@iconify-json/mi": "^1.1.2",
     "@iconify-json/ri": "^1.1.3",
     "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@nuxt/image-edge": "^1.0.0-27657146.da85542",