refactor(gui): useCellUrlConfig composable

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

@@ -2,7 +2,7 @@
 import type { VNodeRef } from '@vue/runtime-core'
 import { message } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
-import { CellUrlConfigInj, CellUrlDisableOverlayInj, ColumnInj, EditModeInj, computed, inject, isValidURL, ref } from '#imports'
+import { CellUrlDisableOverlayInj, ColumnInj, EditModeInj, computed, inject, isValidURL, ref } from '#imports'
 import MiCircleWarning from '~icons/mi/circle-warning'
 
 const { modelValue: value } = defineProps<Props>()
@@ -16,7 +16,6 @@ const column = inject(ColumnInj)!
 
 const editEnabled = inject(EditModeInj)!
 
-const config = inject(CellUrlConfigInj, {})
 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)
@@ -41,17 +40,7 @@ const url = computed(() => {
 
   return `https://${value}`
 })
-
-const urlOptions = 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)
-    }
-  }
-  return options
-})
+const urlOptions = useCellUrlConfig(url)
 
 const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 

packages/nc-gui/composables/index.ts

@@ -24,3 +24,4 @@ export * from './useSmartsheetStore'
 export * from './useLTARStore'
 export * from './useExpandedFormStore'
 export * from './useSharedFormViewStore'
+export * from './useCellUrlConfig'

packages/nc-gui/composables/useCellUrlConfig.ts

@@ -0,0 +1,48 @@
+import type { ComputedRef } from 'vue'
+import { useRoute } from '#imports'
+
+export interface CellUrlOptions {
+  behavior?: string
+  overlay?: string
+}
+
+const parseUrlRules = (serialized: string | undefined): Array<[RegExp, CellUrlOptions]> | 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
+  } catch (err) {
+    console.error(err)
+    return undefined
+  }
+}
+
+const [useProvideCellUrlConfig, useCellUrlGeneralConfig] = useInjectionState(() => {
+  const route = useRoute()
+
+  return {
+    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)
+      }
+    }
+    return options
+  })
+}

packages/nc-gui/context/index.ts

@@ -5,11 +5,6 @@ import type { useViewData } from '#imports'
 import type { Row } from '~/composables'
 import type { TabItem } from '~/composables/useTabs'
 
-export interface CellUrlOptions {
-  behavior?: string
-  overlay?: string
-}
-
 export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
 export const IsPublicInj: InjectionKey<Ref<boolean>> = Symbol('is-public')
 export const RowInj: InjectionKey<Ref<Row>> = Symbol('row')
@@ -32,6 +27,4 @@ export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-injection')
 export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')
 export const SharedViewPasswordInj: InjectionKey<Ref<string | null>> = Symbol('shared-view-password-injection')
-export const CellUrlConfigInj: InjectionKey<CellUrlOptions & { rules?: Array<[RegExp, CellUrlOptions]> }> =
-  Symbol('cell-url-config')
 export const CellUrlDisableOverlayInj: InjectionKey<Ref<boolean>> = Symbol('cell-url-disable-url')

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
 import {
-  CellUrlConfigInj,
   ReadonlyInj,
   ReloadViewDataHookInj,
   createEventHook,
@@ -9,6 +8,7 @@ import {
   extractSdkResponseErrorMsg,
   provide,
   ref,
+  useProvideCellUrlConfig,
   useRoute,
   useSharedView,
 } from '#imports'
@@ -25,24 +25,7 @@ const reloadEventHook = createEventHook<void>()
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(ReadonlyInj, true)
 
-const parseUrlRules = (serialized: string | 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
-  } catch (err) {
-    console.error(err)
-    return undefined
-  }
-}
-provide(CellUrlConfigInj, {
-  behavior: route.query.url_behavior as string,
-  overlay: route.query.url_overlay as string,
-  rules: parseUrlRules(route.query.url_rules as string),
-})
+useProvideCellUrlConfig()
 
 const { loadSharedView } = useSharedView()
 const showPassword = ref(false)