From 1ea56db61cd0cae62c35b8572b334220c88c7ef2 Mon Sep 17 00:00:00 2001
From: Denis <dols3m@gmail.com>
Date: Sun, 28 Aug 2022 18:53:13 -0500
Subject: [PATCH 1/5] feat(gui-v2): customizable urls in shared views

---
 packages/nc-gui/components/cell/Url.vue       | 39 ++++++++++++++++++-
 .../nc-gui/components/smartsheet/Grid.vue     | 14 +++++++
 packages/nc-gui/context/index.ts              |  7 ++++
 .../pages/[projectType]/view/[viewId].vue     | 20 ++++++++++
 4 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 2d9af3343b..ff7b1261ce 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/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 { ColumnInj, EditModeInj, computed, inject, isValidURL } from '#imports'
+import { CellUrlConfigInj, CellUrlDisableOverlayInj, ColumnInj, EditModeInj, computed, inject, isValidURL, ref } from '#imports'
 import MiCircleWarning from '~icons/mi/circle-warning'
 
 const { modelValue: value } = defineProps<Props>()
@@ -16,6 +16,8 @@ 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)
 
@@ -40,6 +42,17 @@ 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 focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
 watch(
@@ -59,7 +72,20 @@ watch(
   <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 && !urlOptions?.overlay"
+      class="z-3 text-sm underline hover:opacity-75"
+      :to="url"
+      :target="urlOptions?.behavior === 'replace' ? undefined : '_blank'"
+      >{{ value }}
+    </nuxt-link>
+    <nuxt-link
+      v-else-if="isValid && !disableOverlay && urlOptions?.overlay"
+      class="z-3 url-overlay hover:opacity-75"
+      :to="url"
+      :target="urlOptions?.behavior === 'replace' ? undefined : '_blank'"
+      >{{ urlOptions.overlay }}
+    </nuxt-link>
 
     <span v-else class="w-9/10 overflow-ellipsis overflow-hidden">{{ value }}</span>
 
@@ -74,6 +100,15 @@ watch(
   </div>
 </template>
 
+<style scoped lang="scss">
+.url-overlay {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  text-decoration-line: none !important;
+}
+</style>
+
 <!--
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 7d2eee0c0d..7073c7d85b 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -5,6 +5,7 @@ import { message } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
 import {
   ActiveViewInj,
+  CellUrlDisableOverlayInj,
   ChangePageInj,
   FieldsInj,
   IsFormInj,
@@ -109,6 +110,9 @@ provide(ChangePageInj, changePage)
 
 provide(ReadonlyInj, !hasEditPermission)
 
+const disableUrlOverlay = ref(false)
+provide(CellUrlDisableOverlayInj, disableUrlOverlay)
+
 reloadViewDataHook?.on(async () => {
   await loadData()
 })
@@ -198,6 +202,10 @@ const makeEditable = (row: Row, col: ColumnType) => {
 
 /** handle keypress events */
 const onKeyDown = async (e: KeyboardEvent) => {
+  if (e.key === 'Alt') {
+    disableUrlOverlay.value = true
+    return
+  }
   if (selected.row === null || selected.col === null) return
   /** on tab key press navigate through cells */
   switch (e.key) {
@@ -281,8 +289,14 @@ const onKeyDown = async (e: KeyboardEvent) => {
       break
   }
 }
+const onKeyUp = async (e: KeyboardEvent) => {
+  if (e.key === 'Alt') {
+    disableUrlOverlay.value = false
+  }
+}
 
 useEventListener(document, 'keydown', onKeyDown)
+useEventListener(document, 'keyup', onKeyUp)
 
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index a2463cfa08..3ac894ccd1 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -27,3 +27,10 @@ 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')
+interface CellUrlOptions {
+  behavior?: string
+  overlay?: string
+}
+export const CellUrlConfigInj: InjectionKey<CellUrlOptions & { rules?: Array<[RegExp, CellUrlOptions]> }> =
+  Symbol('cell-url-config')
+export const CellUrlDisableOverlayInj: InjectionKey<Ref<boolean>> = Symbol('cell-url-disable-url')
diff --git a/packages/nc-gui/pages/[projectType]/view/[viewId].vue b/packages/nc-gui/pages/[projectType]/view/[viewId].vue
index 6187bce03c..b840be27f7 100644
--- a/packages/nc-gui/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/view/[viewId].vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
 import {
+  CellUrlConfigInj,
   ReadonlyInj,
   ReloadViewDataHookInj,
   createEventHook,
@@ -24,6 +25,25 @@ 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),
+})
+
 const { loadSharedView } = useSharedView()
 const showPassword = ref(false)
 

From dab2ce16b26a0dbbea788ab4bba711a04f075a34 Mon Sep 17 00:00:00 2001
From: Denis <dols3m@gmail.com>
Date: Mon, 29 Aug 2022 05:51:03 -0500
Subject: [PATCH 2/5] refactor(gui-v2): tailwind classes for url overlay,
 interface at the top of the file

---
 packages/nc-gui/components/cell/Url.vue | 11 +----------
 packages/nc-gui/context/index.ts        |  9 +++++----
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index ff7b1261ce..805b67cb3f 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -81,7 +81,7 @@ watch(
     </nuxt-link>
     <nuxt-link
       v-else-if="isValid && !disableOverlay && urlOptions?.overlay"
-      class="z-3 url-overlay hover:opacity-75"
+      class="z-3 w-full h-full text-center !no-underline hover:opacity-75"
       :to="url"
       :target="urlOptions?.behavior === 'replace' ? undefined : '_blank'"
       >{{ urlOptions.overlay }}
@@ -100,15 +100,6 @@ watch(
   </div>
 </template>
 
-<style scoped lang="scss">
-.url-overlay {
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  text-decoration-line: none !important;
-}
-</style>
-
 <!--
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index 3ac894ccd1..d3dfbd9b65 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -5,6 +5,11 @@ 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')
@@ -27,10 +32,6 @@ 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')
-interface CellUrlOptions {
-  behavior?: string
-  overlay?: string
-}
 export const CellUrlConfigInj: InjectionKey<CellUrlOptions & { rules?: Array<[RegExp, CellUrlOptions]> }> =
   Symbol('cell-url-config')
 export const CellUrlDisableOverlayInj: InjectionKey<Ref<boolean>> = Symbol('cell-url-disable-url')

From dd1a6f2f23a6f8dc31361914926ee2365688b153 Mon Sep 17 00:00:00 2001
From: Denis <dols3m@gmail.com>
Date: Wed, 7 Sep 2022 11:16:02 -0500
Subject: [PATCH 3/5] fix(gui): disable overlay in lookup cells

---
 packages/nc-gui/components/virtual-cell/Lookup.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 8c3544f063..831d48e6a4 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -2,7 +2,7 @@
 import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { 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()
 
@@ -32,6 +32,7 @@ const lookupColumn = computed<any>(
 )
 
 provide(MetaInj, lookupTableMeta)
+provide(CellUrlDisableOverlayInj, true)
 
 const lookupColumnMetaProps = useColumn(lookupColumn)
 </script>

From 4a9915f6a63d0dd28fc0272f2e82fe25874fe607 Mon Sep 17 00:00:00 2001
From: Denis <dols3m@gmail.com>
Date: Wed, 7 Sep 2022 19:00:21 -0500
Subject: [PATCH 4/5] fix(gui): typos

---
 packages/nc-gui/components/cell/Url.vue            | 6 ++++--
 packages/nc-gui/components/virtual-cell/Lookup.vue | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 805b67cb3f..0aff9f3b59 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -77,14 +77,16 @@ watch(
       class="z-3 text-sm underline hover:opacity-75"
       :to="url"
       :target="urlOptions?.behavior === 'replace' ? undefined : '_blank'"
-      >{{ value }}
+    >
+      {{ value }}
     </nuxt-link>
     <nuxt-link
       v-else-if="isValid && !disableOverlay && urlOptions?.overlay"
       class="z-3 w-full h-full text-center !no-underline hover:opacity-75"
       :to="url"
       :target="urlOptions?.behavior === 'replace' ? undefined : '_blank'"
-      >{{ urlOptions.overlay }}
+    >
+      {{ urlOptions.overlay }}
     </nuxt-link>
 
     <span v-else class="w-9/10 overflow-ellipsis overflow-hidden">{{ value }}</span>
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 831d48e6a4..afce758a8f 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -32,7 +32,7 @@ const lookupColumn = computed<any>(
 )
 
 provide(MetaInj, lookupTableMeta)
-provide(CellUrlDisableOverlayInj, true)
+provide(CellUrlDisableOverlayInj, ref(true))
 
 const lookupColumnMetaProps = useColumn(lookupColumn)
 </script>

From 1615ee0eab90cdd0e52570acc7310fe8ba25116f Mon Sep 17 00:00:00 2001
From: Denis <dols3m@gmail.com>
Date: Wed, 7 Sep 2022 19:35:41 -0500
Subject: [PATCH 5/5] refactor(gui): useCellUrlConfig composable

---
 packages/nc-gui/components/cell/Url.vue       | 15 +-----
 packages/nc-gui/composables/index.ts          |  1 +
 .../nc-gui/composables/useCellUrlConfig.ts    | 48 +++++++++++++++++++
 packages/nc-gui/context/index.ts              |  7 ---
 .../pages/[projectType]/view/[viewId].vue     | 21 +-------
 5 files changed, 53 insertions(+), 39 deletions(-)
 create mode 100644 packages/nc-gui/composables/useCellUrlConfig.ts

diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 0aff9f3b59..16d7f4042b 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/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()
 
diff --git a/packages/nc-gui/composables/index.ts b/packages/nc-gui/composables/index.ts
index cea4437711..fd818866f4 100644
--- a/packages/nc-gui/composables/index.ts
+++ b/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'
diff --git a/packages/nc-gui/composables/useCellUrlConfig.ts b/packages/nc-gui/composables/useCellUrlConfig.ts
new file mode 100644
index 0000000000..2f6044193d
--- /dev/null
+++ b/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
+  })
+}
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index d3dfbd9b65..9922aa22a2 100644
--- a/packages/nc-gui/context/index.ts
+++ b/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')
diff --git a/packages/nc-gui/pages/[projectType]/view/[viewId].vue b/packages/nc-gui/pages/[projectType]/view/[viewId].vue
index b840be27f7..0b5c7c0810 100644
--- a/packages/nc-gui/pages/[projectType]/view/[viewId].vue
+++ b/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)