From bc9bd2533f502098c8dc95b6504a5a3403f809c8 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 19:35:54 +0530
Subject: [PATCH 1/4] fix/Added showing error message on invalid url entry

---
 packages/nc-gui-v2/components/cell/Url.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 5cddb7349c..1722797e24 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -1,5 +1,6 @@
 <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'
 
 interface Props {
@@ -14,9 +15,13 @@ 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) => {
+    localState.value = val
     if (!column.value.meta?.validate || (val && isValidURL(val))) {
       emit('update:modelValue', val)
     }
@@ -35,6 +40,16 @@ const url = computed(() => {
 })
 
 const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
+
+watch(
+  () => editEnabled.value,
+  () => {
+    if (!editEnabled.value && localState.value && !isValidURL(localState.value)) {
+      message.error('Invalid URL')
+    }
+    localState.value = value
+  },
+)
 </script>
 
 <template>

From 60be7e730de70e3ae5b6545e240c5cd936d44291 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 17 Aug 2022 10:37:38 +0530
Subject: [PATCH 2/4] fix/removed url validation when it is not required

---
 packages/nc-gui-v2/components.d.ts         | 1 +
 packages/nc-gui-v2/components/cell/Url.vue | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 6ff3d158bd..35b9712b59 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -155,6 +155,7 @@ declare module '@vue/runtime-core' {
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']
+    MdiScriptTextKeyOutline: typeof import('~icons/mdi/script-text-key-outline')['default']
     MdiScriptTextOutline: typeof import('~icons/mdi/script-text-outline')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 1722797e24..7b3e4b584e 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -44,8 +44,10 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 watch(
   () => editEnabled.value,
   () => {
-    if (!editEnabled.value && localState.value && !isValidURL(localState.value)) {
+    if (column.value.meta?.validate && !editEnabled.value && localState.value && !isValidURL(localState.value)) {
       message.error('Invalid URL')
+      localState.value = undefined
+      return
     }
     localState.value = value
   },

From 39fc75cd8b94b9860295b50cc2abd1dba751701d Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 17 Aug 2022 19:22:11 +0530
Subject: [PATCH 3/4] fix/Added url validation ui indicator

---
 packages/nc-gui-v2/components.d.ts         |  2 ++
 packages/nc-gui-v2/components/cell/Url.vue | 26 ++++++++++++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 35b9712b59..9dc137dc31 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -103,6 +103,7 @@ declare module '@vue/runtime-core' {
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']
+    MdiCloseBox: typeof import('~icons/mdi/close-box')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
     MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
     MdiCodeJson: typeof import('~icons/mdi/code-json')['default']
@@ -127,6 +128,7 @@ declare module '@vue/runtime-core' {
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
     MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
     MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
+    MdiFileEyeOutline: typeof import('~icons/mdi/file-eye-outline')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']
     MdiFlashOutline: typeof import('~icons/mdi/flash-outline')['default']
     MdiFolder: typeof import('~icons/mdi/folder')['default']
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 7b3e4b584e..cd123ef0ac 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -2,6 +2,7 @@
 import type { VNodeRef } from '@vue/runtime-core'
 import { message } from 'ant-design-vue'
 import { ColumnInj, EditModeInj, computed, inject, isValidURL } from '#imports'
+import MaterialSymbolsWarning from '~icons/material-symbols/warning'
 
 interface Props {
   modelValue?: string | null
@@ -22,13 +23,13 @@ const vModel = computed({
   get: () => value,
   set: (val) => {
     localState.value = val
-    if (!column.value.meta?.validate || (val && isValidURL(val))) {
+    if (!column.value.meta?.validate || (val && isValidURL(val)) || !val) {
       emit('update:modelValue', val)
     }
   },
 })
 
-const isValid = computed(() => value && isValidURL(value))
+const isValid = computed(() => !column.value.meta?.validate || (value && isValidURL(value)))
 
 const url = computed(() => {
   if (!value || !isValidURL(value)) return ''
@@ -55,11 +56,22 @@ watch(
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm" @blur="editEnabled = false" />
-
-  <nuxt-link v-else-if="isValid" class="text-sm underline hover:opacity-75" :to="url" target="_blank">{{ value }} </nuxt-link>
-
-  <span v-else>{{ value }}</span>
+  <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>
+
+    <span v-else class="w-9/10 overflow-ellipsis overflow-hidden">{{ value }}</span>
+
+    <div v-if="!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">
+          <MaterialSymbolsWarning />
+        </div>
+      </a-tooltip>
+    </div>
+  </div>
 </template>
 
 <!--

From 91ba29887ac9aa3ae6b8009618c9136571b523a8 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 18 Aug 2022 10:23:09 +0530
Subject: [PATCH 4/4] fix/minor ui improvements and bug fix

---
 packages/nc-gui-v2/components/cell/Url.vue |  8 ++++----
 packages/nc-gui-v2/package-lock.json       | 19 +++++++++++++++++++
 packages/nc-gui-v2/package.json            |  1 +
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index cd123ef0ac..c87b8751d2 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -2,7 +2,7 @@
 import type { VNodeRef } from '@vue/runtime-core'
 import { message } from 'ant-design-vue'
 import { ColumnInj, EditModeInj, computed, inject, isValidURL } from '#imports'
-import MaterialSymbolsWarning from '~icons/material-symbols/warning'
+import MiCircleWarning from '~icons/mi/circle-warning'
 
 interface Props {
   modelValue?: string | null
@@ -29,7 +29,7 @@ const vModel = computed({
   },
 })
 
-const isValid = computed(() => !column.value.meta?.validate || (value && isValidURL(value)))
+const isValid = computed(() => value && isValidURL(value))
 
 const url = computed(() => {
   if (!value || !isValidURL(value)) return ''
@@ -63,11 +63,11 @@ watch(
 
     <span v-else class="w-9/10 overflow-ellipsis overflow-hidden">{{ value }}</span>
 
-    <div v-if="!isValid && value?.length && !editEnabled" class="mr-1 w-1/10">
+    <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">
-          <MaterialSymbolsWarning />
+          <MiCircleWarning class="text-red-400 h-4" />
         </div>
       </a-tooltip>
     </div>
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index c9bc82fe4c..ee14ac4964 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -37,6 +37,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",
@@ -1056,6 +1057,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",
@@ -15940,6 +15950,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",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index cca8e10ace..1893ec16ca 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -43,6 +43,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",