From 65e327e1a93ceb180c02d63e1a39133f1478bd10 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 17 Sep 2022 16:01:16 +0530
Subject: [PATCH] fix(gui): add fallback for copy to clipboard

re #3598

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components.d.ts               |  1 +
 .../smartsheet-toolbar/ShareView.vue          |  4 +--
 .../smartsheet-toolbar/SharedViewList.vue     |  4 +--
 .../components/smartsheet/ApiSnippet.vue      |  4 +--
 .../nc-gui/components/smartsheet/Grid.vue     |  4 +--
 .../tabs/auth/ApiTokenManagement.vue          |  4 +--
 .../components/tabs/auth/UserManagement.vue   |  4 +--
 .../tabs/auth/user-management/ShareBase.vue   |  4 +--
 .../tabs/auth/user-management/UsersModal.vue  |  4 +--
 packages/nc-gui/composables/index.ts          |  1 +
 .../composables/useColumnCreateStore.ts       |  1 -
 packages/nc-gui/composables/useCopy.ts        | 26 +++++++++++++++++++
 .../pages/[projectType]/[projectId]/index.vue |  4 +--
 13 files changed, 46 insertions(+), 19 deletions(-)
 create mode 100644 packages/nc-gui/composables/useCopy.ts

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index abfefb9a7b..ed6ae88878 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -232,6 +232,7 @@ declare module '@vue/runtime-core' {
     MdiUpload: typeof import('~icons/mdi/upload')['default']
     MdiUploadOutline: typeof import('~icons/mdi/upload-outline')['default']
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
+    MdiWarning: typeof import('~icons/mdi/warning')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
     MiCircleWarning: typeof import('~icons/mi/circle-warning')['default']
diff --git a/packages/nc-gui/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet-toolbar/ShareView.vue
index 10dc3fd6bd..0484072fce 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/ShareView.vue
@@ -4,7 +4,7 @@ import { message } from 'ant-design-vue'
 import {
   computed,
   extractSdkResponseErrorMsg,
-  useClipboard,
+  useCopy,
   useI18n,
   useNuxtApp,
   useProject,
@@ -17,7 +17,7 @@ const { t } = useI18n()
 
 const { view, $api } = useSmartsheetStoreOrThrow()
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 const { $e } = useNuxtApp()
 
diff --git a/packages/nc-gui/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui/components/smartsheet-toolbar/SharedViewList.vue
index db39f24e17..138c55fbd0 100644
--- a/packages/nc-gui/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui/components/smartsheet-toolbar/SharedViewList.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ViewTypes } from 'nocodb-sdk'
 import { Empty, message } from 'ant-design-vue'
-import { extractSdkResponseErrorMsg, onMounted, useClipboard, useI18n, useSmartsheetStoreOrThrow } from '#imports'
+import { extractSdkResponseErrorMsg, onMounted, useCopy, useI18n, useSmartsheetStoreOrThrow } from '#imports'
 import MdiVisibilityOnIcon from '~icons/mdi/visibility'
 import MdiVisibilityOffIcon from '~icons/mdi/visibility-off'
 import MdiCopyIcon from '~icons/mdi/content-copy'
@@ -20,7 +20,7 @@ const { t } = useI18n()
 
 const { $api, meta } = useSmartsheetStoreOrThrow()
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 const { dashboardUrl } = useDashboard()
 
diff --git a/packages/nc-gui/components/smartsheet/ApiSnippet.vue b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
index 57813ab3fb..119fc8648f 100644
--- a/packages/nc-gui/components/smartsheet/ApiSnippet.vue
+++ b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
@@ -5,7 +5,7 @@ import {
   ActiveViewInj,
   MetaInj,
   inject,
-  useClipboard,
+  useCopy,
   useGlobal,
   useI18n,
   useProject,
@@ -36,7 +36,7 @@ const { xWhere } = useSmartsheetStoreOrThrow()
 
 const { queryParams } = $(useViewData($$(meta), $$(view), xWhere))
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 let vModel = $(useVModel(props, 'modelValue', emits))
 
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index ee63f384b7..9cf501cd7b 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -23,7 +23,7 @@ import {
   provide,
   reactive,
   ref,
-  useClipboard,
+  useCopy,
   useEventListener,
   useGridViewColumnWidth,
   useI18n,
@@ -97,7 +97,7 @@ const {
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 onMounted(loadGridViewColumns)
 
diff --git a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
index c65fbbe569..60be3ca554 100644
--- a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ApiTokenType } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { extractSdkResponseErrorMsg, useClipboard, useI18n } from '#imports'
+import { extractSdkResponseErrorMsg, useCopy, useI18n } from '#imports'
 import KebabIcon from '~icons/ic/baseline-more-vert'
 import MdiPlusIcon from '~icons/mdi/plus'
 import CloseIcon from '~icons/material-symbols/close-rounded'
@@ -21,7 +21,7 @@ const { $api, $e } = useNuxtApp()
 
 const { project } = $(useProject())
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 let tokensInfo = $ref<ApiToken[] | undefined>([])
 
diff --git a/packages/nc-gui/components/tabs/auth/UserManagement.vue b/packages/nc-gui/components/tabs/auth/UserManagement.vue
index d88b38b039..26ae5f1797 100644
--- a/packages/nc-gui/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/UserManagement.vue
@@ -8,7 +8,7 @@ import {
   onBeforeMount,
   ref,
   useApi,
-  useClipboard,
+  useCopy,
   useDashboard,
   useI18n,
   useNuxtApp,
@@ -26,7 +26,7 @@ const { api } = useApi()
 
 const { project } = useProject()
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 const { isUIAllowed } = useUIPermission()
 
diff --git a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
index 4417ebe2ce..2949e1ab45 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import { extractSdkResponseErrorMsg, onMounted, useClipboard, useI18n, useNuxtApp, useProject } from '#imports'
+import { extractSdkResponseErrorMsg, onMounted, useCopy, useI18n, useNuxtApp, useProject } from '#imports'
 
 interface ShareBase {
   uuid?: string
@@ -25,7 +25,7 @@ const showEditBaseDropdown = $ref(false)
 
 const { project } = useProject()
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 const url = $computed(() => (base && base.uuid ? `${dashboardUrl}#/base/${base.uuid}` : null))
 
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index ce559cb338..3c5281af61 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -9,7 +9,7 @@ import {
   projectRoleTagColors,
   projectRoles,
   ref,
-  useClipboard,
+  useCopy,
   useDashboard,
   useI18n,
   useNuxtApp,
@@ -37,7 +37,7 @@ const { t } = useI18n()
 
 const { project } = useProject()
 const { $api, $e } = useNuxtApp()
-const { copy } = useClipboard()
+const { copy } = useCopy()
 const { dashboardUrl } = $(useDashboard())
 
 const usersData = $ref<Users>({ emails: undefined, role: ProjectRole.Viewer, invitationToken: undefined })
diff --git a/packages/nc-gui/composables/index.ts b/packages/nc-gui/composables/index.ts
index fd818866f4..149bbff61d 100644
--- a/packages/nc-gui/composables/index.ts
+++ b/packages/nc-gui/composables/index.ts
@@ -25,3 +25,4 @@ export * from './useLTARStore'
 export * from './useExpandedFormStore'
 export * from './useSharedFormViewStore'
 export * from './useCellUrlConfig'
+export * from './useCopy'
diff --git a/packages/nc-gui/composables/useColumnCreateStore.ts b/packages/nc-gui/composables/useColumnCreateStore.ts
index 1d01368c63..4f287356a5 100644
--- a/packages/nc-gui/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui/composables/useColumnCreateStore.ts
@@ -4,7 +4,6 @@ import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useColumn } from './useColumn'
 import { computed, createInjectionState, extractSdkResponseErrorMsg, useNuxtApp } from '#imports'
 
 const useForm = Form.useForm
diff --git a/packages/nc-gui/composables/useCopy.ts b/packages/nc-gui/composables/useCopy.ts
new file mode 100644
index 0000000000..643fa46b1c
--- /dev/null
+++ b/packages/nc-gui/composables/useCopy.ts
@@ -0,0 +1,26 @@
+import { useClipboard } from '#imports'
+
+export const useCopy = () => {
+  /** fallback for copy if clipboard api is not supported */
+  const copyFallback = (text: string) => {
+    const textAreaEl = document.createElement('textarea')
+    textAreaEl.innerHTML = text
+    document.body.appendChild(textAreaEl)
+    textAreaEl.select()
+    const result = document.execCommand('copy')
+    document.body.removeChild(textAreaEl)
+    return result
+  }
+
+  const { copy: _copy, isSupported } = useClipboard()
+
+  const copy = async (text: string) => {
+    if (isSupported) {
+      await _copy(text)
+    } else {
+      copyFallback(text)
+    }
+  }
+
+  return { copy }
+}
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 65d4baacbb..d31ecac549 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -12,7 +12,7 @@ import {
   projectThemeColors,
   provide,
   ref,
-  useClipboard,
+  useCopy,
   useGlobal,
   useI18n,
   useProject,
@@ -42,7 +42,7 @@ const { clearTabs, addTab } = useTabs()
 
 const { isUIAllowed } = useUIPermission()
 
-const { copy } = useClipboard()
+const { copy } = useCopy()
 
 const isLocked = ref(false)