refactor(nc-gui): update useCellUrlConfig composable

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

@@ -1,22 +1,35 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import { CellUrlDisableOverlayInj, ColumnInj, EditModeInj, computed, inject, isValidURL, ref } from '#imports'
-import MiCircleWarning from '~icons/mi/circle-warning'
+import {
+  CellUrlDisableOverlayInj,
+  ColumnInj,
+  EditModeInj,
+  computed,
+  inject,
+  isValidURL,
+  ref,
+  useCellUrlConfig,
+  useI18n,
+  watch,
+} from '#imports'
 
-const { modelValue: value } = defineProps<Props>()
-const emit = defineEmits(['update:modelValue'])
-const { t } = useI18n()
 interface Props {
   modelValue?: string | null
 }
 
+const { modelValue: value } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const { t } = useI18n()
+
 const column = inject(ColumnInj)!
 
 const editEnabled = inject(EditModeInj)!
 
 const disableOverlay = inject(CellUrlDisableOverlayInj)
+
 // Used in the logic of when to display error since we are not storing the url if its not valid
 const localState = ref(value)
 
@@ -40,7 +53,8 @@ const url = computed(() => {
 
   return `https://${value}`
 })
-const urlOptions = useCellUrlConfig(url)
+
+const { cellUrlOptions } = useCellUrlConfig(url)
 
 const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
@@ -62,20 +76,20 @@ watch(
     <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 && !urlOptions?.overlay"
+      v-else-if="isValid && !cellUrlOptions?.overlay"
       class="z-3 text-sm underline hover:opacity-75"
       :to="url"
-      :target="urlOptions?.behavior === 'replace' ? undefined : '_blank'"
+      :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
     >
       {{ value }}
     </nuxt-link>
     <nuxt-link
-      v-else-if="isValid && !disableOverlay && urlOptions?.overlay"
+      v-else-if="isValid && !disableOverlay && cellUrlOptions?.overlay"
       class="z-3 w-full h-full text-center !no-underline hover:opacity-75"
       :to="url"
-      :target="urlOptions?.behavior === 'replace' ? undefined : '_blank'"
+      :target="cellUrlOptions?.behavior === 'replace' ? undefined : '_blank'"
     >
-      {{ urlOptions.overlay }}
+      {{ cellUrlOptions.overlay }}
     </nuxt-link>
 
     <span v-else class="w-9/10 overflow-ellipsis overflow-hidden">{{ value }}</span>

packages/nc-gui/components/shared-view/Grid.vue

@@ -2,7 +2,6 @@
 import type { Ref } from 'vue'
 import type { TableType } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-
 import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 
 const { sharedView, meta, sorts, nestedFilters } = useSharedView()
@@ -10,6 +9,7 @@ const { signedIn } = useGlobal()
 const { loadProject } = useProject(meta?.value.project_id)
 
 const reloadEventHook = createEventHook<void>()
+
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(ReadonlyInj, true)
 provide(MetaInj, meta)

packages/nc-gui/components/smartsheet/Grid.vue

@@ -2,7 +2,6 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
 import {
   ActiveViewInj,
   CellUrlDisableOverlayInj,
@@ -27,6 +26,7 @@ import {
   ref,
   useEventListener,
   useGridViewColumnWidth,
+  useI18n,
   useSmartsheetStoreOrThrow,
   useUIPermission,
   useViewData,

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

@@ -2,7 +2,18 @@
 import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { CellUrlDisableOverlayInj, CellValueInj, ColumnInj, MetaInj, ReadonlyInj, computed, inject, provide, useColumn, useMetas } from '#imports'
+import {
+  CellUrlDisableOverlayInj,
+  CellValueInj,
+  ColumnInj,
+  MetaInj,
+  ReadonlyInj,
+  computed,
+  inject,
+  provide,
+  useColumn,
+  useMetas,
+} from '#imports'
 
 const { metas, getMeta } = useMetas()
 

packages/nc-gui/composables/useCellUrlConfig.ts

@@ -1,48 +1,48 @@
-import type { ComputedRef } from 'vue'
-import { useRoute } from '#imports'
+import type { MaybeRef } from '@vueuse/core'
+import { computed, ref, unref, useInjectionState, useRoute } from '#imports'
 
 export interface CellUrlOptions {
   behavior?: string
   overlay?: string
 }
 
-const parseUrlRules = (serialized: string | undefined): Array<[RegExp, CellUrlOptions]> | undefined => {
+type ParsedRules = [RegExp, CellUrlOptions]
+
+const parseUrlRules = (serialized?: string): ParsedRules[] | undefined => {
   if (!serialized) return undefined
+
   try {
-    const rules: Array<[RegExp, {}]> = Object.entries(JSON.parse(serialized)).map(([key, value]) => [
-      new RegExp(key),
-      value as {},
-    ])
-    return rules
+    return Object.entries(JSON.parse(serialized)).map(([key, value]) => [new RegExp(key), value] as ParsedRules)
   } catch (err) {
     console.error(err)
+
     return undefined
   }
 }
 
-const [useProvideCellUrlConfig, useCellUrlGeneralConfig] = useInjectionState(() => {
+export function useCellUrlConfig(url?: MaybeRef<string>) {
   const route = useRoute()
 
-  return {
+  const config = $computed(() => ({
     behavior: route.query.url_behavior as string | undefined,
     overlay: route.query.url_overlay as string | undefined,
     rules: parseUrlRules(route.query.url_rules as string),
-  }
-}, 'cell-url-config')
-
-export { useProvideCellUrlConfig }
-
-export function useCellUrlConfig(url: ComputedRef<string>) {
-  const config = useCellUrlGeneralConfig()
-  if (!config) return undefined
-  return computed(() => {
-    const { behavior, overlay, rules } = config
-    const options = { behavior, overlay }
-    if (rules && (!behavior || !overlay)) {
-      for (const [regex, value] of rules) {
-        if (url.value.match(regex)) return Object.assign(options, value)
+  }))
+
+  const options = computed(() => {
+    const options = { behavior: config.behavior, overlay: config.overlay }
+
+    if (config.rules && (!config.behavior || !config.overlay)) {
+      for (const [regex, value] of config.rules) {
+        if (unref(url)?.match(regex)) return Object.assign(options, value)
       }
     }
+
     return options
   })
+
+  return {
+    cellUrlConfig: config,
+    cellUrlOptions: options,
+  }
 }

packages/nc-gui/pages/[projectType]/view/[viewId].vue

@@ -8,7 +8,6 @@ import {
   extractSdkResponseErrorMsg,
   provide,
   ref,
-  useProvideCellUrlConfig,
   useRoute,
   useSharedView,
 } from '#imports'
@@ -25,8 +24,6 @@ const reloadEventHook = createEventHook<void>()
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(ReadonlyInj, true)
 
-useProvideCellUrlConfig()
-
 const { loadSharedView } = useSharedView()
 const showPassword = ref(false)