fix(gui): if copy failed show error message and print content in console

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/account/Token.vue

@@ -81,14 +81,18 @@ const generateToken = async () => {
   $e('a:api-token:generate')
 }
 
-const copyToken = (token: string | undefined) => {
+const copyToken = async (token: string | undefined) => {
   if (!token) return
 
-  copy(token)
-  // Copied to clipboard
-  message.info(t('msg.info.copiedToClipboard'))
+  try {
+    await copy(token)
+    // Copied to clipboard
+    message.info(t('msg.info.copiedToClipboard'))
 
-  $e('c:api-token:copy')
+    $e('c:api-token:copy')
+  } catch (e) {
+    message.error(e.message)
+  }
 }
 
 const descriptionInput = (el) => {

packages/nc-gui/components/account/UserList.vue

@@ -99,13 +99,16 @@ const resendInvite = async (user: User) => {
   $e('a:org-user:resend-invite')
 }
 
-const copyInviteUrl = (user: User) => {
+const copyInviteUrl = async (user: User) => {
   if (!user.invite_token) return
+  try {
+    await copy(`${dashboardUrl}#/signup/${user.invite_token}`)
 
-  copy(`${dashboardUrl}#/signup/${user.invite_token}`)
-
-  // Invite URL copied to clipboard
-  message.success(t('msg.success.inviteURLCopied'))
+    // Invite URL copied to clipboard
+    message.success(t('msg.success.inviteURLCopied'))
+  } catch (e) {
+    message.error(e.message)
+  }
   $e('c:user:copy-url')
 }
 
@@ -113,7 +116,7 @@ const copyPasswordResetUrl = async (user: User) => {
   try {
     const { reset_password_url } = await api.orgUsers.generatePasswordResetToken(user.id)
 
-    copy(reset_password_url)
+    await copy(reset_password_url!)
 
     // Invite URL copied to clipboard
     message.success(t('msg.success.passwordResetURLCopied'))

packages/nc-gui/components/account/UsersModal.vue

@@ -93,12 +93,14 @@ const inviteUrl = $computed(() => (usersData.invitationToken ? `${dashboardUrl}#
 
 const copyUrl = async () => {
   if (!inviteUrl) return
+  try {
+    await copy(inviteUrl)
 
-  await copy(inviteUrl)
-
-  // Copied shareable base url to clipboard!
-  message.success(t('msg.success.shareableURLCopied'))
-
+    // Copied shareable base url to clipboard!
+    message.success(t('msg.success.shareableURLCopied'))
+  } catch (e) {
+    message.error(e.message)
+  }
   $e('c:shared-base:copy-url')
 }
 

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

@@ -126,10 +126,14 @@ api.dbViewRow.list(
   return snippet.convert(activeLang?.name, selectedClient || (activeLang?.clients && activeLang?.clients[0]), {})
 })
 
-const onCopyToClipboard = () => {
-  copy(code)
-  // Copied to clipboard
-  message.info(t('msg.info.copiedToClipboard'))
+const onCopyToClipboard = async () => {
+  try {
+    await copy(code)
+    // Copied to clipboard
+    message.info(t('msg.info.copiedToClipboard'))
+  } catch (e) {
+    message.error(e.message)
+  }
 }
 
 const afterVisibleChange = (visible: boolean) => {

packages/nc-gui/components/smartsheet/toolbar/ShareView.vue

@@ -186,10 +186,14 @@ function onChangeTheme(color: string) {
 
 const copyLink = async () => {
   if (sharedViewUrl.value) {
-    await copy(sharedViewUrl.value)
+    try {
+      await copy(sharedViewUrl.value)
 
-    // Copied to clipboard
-    message.success(t('msg.info.copiedToClipboard'))
+      // Copied to clipboard
+      message.success(t('msg.info.copiedToClipboard'))
+    } catch (e) {
+      message.error(e.message)
+    }
   }
 }
 
@@ -217,10 +221,14 @@ const iframeCode = computed(() => {
 
 const copyIframeCode = async () => {
   if (iframeCode.value) {
-    await copy(iframeCode.value)
+    try {
+      await copy(iframeCode.value)
 
-    // Copied to clipboard
-    message.success(t('msg.info.copiedToClipboard'))
+      // Copied to clipboard
+      message.success(t('msg.info.copiedToClipboard'))
+    } catch (e) {
+      message.error(e.message)
+    }
   }
 }
 </script>
@@ -268,7 +276,8 @@ const copyIframeCode = async () => {
         class="flex gap-1 items-center pb-1 text-gray-500 cursor-pointer font-weight-medium mb-2 mt-4 pl-1"
         @click="copyIframeCode"
       >
-        <MdiCodeTags class="text-gray-500" /> Embed this view in your site
+        <MdiCodeTags class="text-gray-500" />
+        Embed this view in your site
       </div>
 
       <div class="px-1 mt-2 flex flex-col gap-3">

packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue

@@ -75,9 +75,13 @@ const renderAllowCSVDownload = (view: SharedViewType) => {
 }
 
 const copyLink = (view: SharedViewType) => {
-  copy(`${dashboardUrl?.value as string}#${sharedViewUrl(view)}`)
-  // Copied to clipboard
-  message.success(t('msg.info.copiedToClipboard'))
+  try {
+    copy(`${dashboardUrl?.value as string}#${sharedViewUrl(view)}`)
+    // Copied to clipboard
+    message.success(t('msg.info.copiedToClipboard'))
+  } catch (e) {
+    message.error(e.message)
+  }
 }
 
 const deleteLink = async (id: string) => {

packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue

@@ -33,13 +33,16 @@ const openNewTokenModal = () => {
   $e('c:api-token:generate')
 }
 
-const copyToken = (token: string | undefined) => {
+const copyToken = async (token: string | undefined) => {
   if (!token) return
 
-  copy(token)
-  // Copied to clipboard
-  message.info(t('msg.info.copiedToClipboard'))
-
+  try {
+    await copy(token)
+    // Copied to clipboard
+    message.info(t('msg.info.copiedToClipboard'))
+  } catch (e) {
+    message.error(e.message)
+  }
   $e('c:api-token:copy')
 }
 
@@ -145,8 +148,8 @@ onMounted(() => {
         <div class="flex flex-row justify-center mt-2 text-center w-full text-base">This action will remove this API Token</div>
 
         <div class="flex mt-6 justify-center space-x-2">
-          <a-button @click="showDeleteTokenModal = false"> {{ $t('general.cancel') }} </a-button>
-          <a-button type="primary" danger @click="deleteToken()"> {{ $t('general.confirm') }} </a-button>
+          <a-button @click="showDeleteTokenModal = false"> {{ $t('general.cancel') }}</a-button>
+          <a-button type="primary" danger @click="deleteToken()"> {{ $t('general.confirm') }}</a-button>
         </div>
       </div>
     </a-modal>
@@ -205,7 +208,7 @@ onMounted(() => {
               </a-tooltip>
 
               <a-tooltip placement="bottom">
-                <template #title> {{ $t('general.copy') }} </template>
+                <template #title> {{ $t('general.copy') }}</template>
 
                 <a-button type="text" class="!rounded-md" @click="copyToken(item.token)">
                   <template #icon>

packages/nc-gui/components/tabs/auth/UserManagement.vue

@@ -140,13 +140,16 @@ const resendInvite = async (user: User) => {
   $e('a:user:resend-invite')
 }
 
-const copyInviteUrl = (user: User) => {
+const copyInviteUrl = async (user: User) => {
   if (!user.invite_token) return
+  try {
+    await copy(`${dashboardUrl}#/signup/${user.invite_token}`)
 
-  copy(`${dashboardUrl}#/signup/${user.invite_token}`)
-
-  // Invite URL copied to clipboard
-  message.success(t('msg.success.inviteURLCopied'))
+    // Invite URL copied to clipboard
+    message.success(t('msg.success.inviteURLCopied'))
+  } catch (e) {
+    message.error(e.message)
+  }
   $e('c:user:copy-url')
 }
 

packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue

@@ -94,11 +94,14 @@ const recreate = async () => {
 
 const copyUrl = async () => {
   if (!url) return
+  try {
+    await copy(url)
 
-  await copy(url)
-
-  // Copied shareable base url to clipboard!
-  message.success(t('msg.success.shareableURLCopied'))
+    // Copied shareable base url to clipboard!
+    message.success(t('msg.success.shareableURLCopied'))
+  } catch (e) {
+    message.error(e.message)
+  }
 
   $e('c:shared-base:copy-url')
 }
@@ -111,10 +114,10 @@ const navigateToSharedBase = () => {
   $e('c:shared-base:open-url')
 }
 
-const generateEmbeddableIframe = () => {
+const generateEmbeddableIframe = async () => {
   if (!url) return
-
-  copy(`<iframe
+  try {
+    await copy(`<iframe
 class="nc-embed"
 src="${url}?embed"
 frameborder="0"
@@ -122,9 +125,11 @@ width="100%"
 height="700"
 style="background: transparent; border: 1px solid #ddd"></iframe>`)
 
-  // Copied embeddable html code!
-  message.success(t('msg.success.embeddableHTMLCodeCopied'))
-
+    // Copied embeddable html code!
+    message.success(t('msg.success.embeddableHTMLCodeCopied'))
+  } catch (e) {
+    message.error(e.message)
+  }
   $e('c:shared-base:copy-embed-frame')
 }
 

packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue

@@ -125,12 +125,14 @@ const inviteUrl = $computed(() => (usersData.invitationToken ? `${dashboardUrl}#
 
 const copyUrl = async () => {
   if (!inviteUrl) return
+  try {
+    await copy(inviteUrl)
 
-  await copy(inviteUrl)
-
-  // Copied shareable base url to clipboard!
-  message.success(t('msg.success.shareableURLCopied'))
-
+    // Copied shareable base url to clipboard!
+    message.success(t('msg.success.shareableURLCopied'))
+  } catch (e) {
+    message.error(e.message)
+  }
   $e('c:shared-base:copy-url')
 }
 

packages/nc-gui/components/template/Editor.vue

@@ -501,16 +501,12 @@ async function importTemplate() {
             }
           }
         }
-        const createdTable = await $api.base.tableCreate(
-          project.value?.id as string,
-          (baseId || project.value?.bases?.[0].id)!,
-          {
-            table_name: table.table_name,
-            // leave title empty to get a generated one based on table_name
-            title: '',
-            columns: table.columns || [],
-          },
-        )
+        const createdTable = await $api.base.tableCreate(project.value?.id as string, (baseId || project.value?.bases?.[0].id)!, {
+          table_name: table.table_name,
+          // leave title empty to get a generated one based on table_name
+          title: '',
+          columns: table.columns || [],
+        })
         table.id = createdTable.id
         table.title = createdTable.title
 

packages/nc-gui/composables/useCopy.ts

@@ -2,14 +2,27 @@ 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 copyFallback = async (text: string, retryCount = 0): Promise<boolean> => {
+    try {
+      const textAreaEl = document.createElement('textarea')
+      textAreaEl.innerHTML = text
+      document.body.appendChild(textAreaEl)
+      textAreaEl.select()
+      const result = document.execCommand('copy')
+      document.body.removeChild(textAreaEl)
+      if (!result && retryCount < 3) {
+        // retry if copy failed
+        return new Promise((resolve) => setTimeout(() => resolve(copyFallback(text, retryCount + 1)), 100))
+      }
+
+      if (!result) {
+        throw new Error('failed')
+      }
+      return result
+    } catch (e) {
+      throw new Error('Clipboard copy failed, please copy it from console log')
+      console.log(text)
+    }
   }
 
   const { copy: _copy, isSupported } = useClipboard()
@@ -18,11 +31,12 @@ export const useCopy = () => {
     try {
       if (isSupported.value) {
         await _copy(text)
+        return true
       } else {
-        copyFallback(text)
+        return copyFallback(text)
       }
     } catch (e) {
-      copyFallback(text)
+      return copyFallback(text)
     }
   }
 

packages/nc-gui/pages/index/index/index.vue

@@ -132,9 +132,13 @@ onBeforeMount(loadProjects)
 const { copy } = useCopy()
 
 const copyProjectMeta = async () => {
-  const aggregatedMetaInfo = await $api.utils.aggregatedMetaInfo()
-  copy(JSON.stringify(aggregatedMetaInfo))
-  message.info('Copied aggregated project meta to clipboard')
+  try {
+    const aggregatedMetaInfo = await $api.utils.aggregatedMetaInfo()
+    await copy(JSON.stringify(aggregatedMetaInfo))
+    message.info('Copied aggregated project meta to clipboard')
+  } catch (e) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
 }
 </script>