Browse Source

fix(gui): show modal popup with text if copy failed

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/5065/head
Pranav C 2 years ago
parent
commit
e093264e19
  1. 7
      packages/nc-gui/assets/style.scss
  2. 36
      packages/nc-gui/composables/useCopy.ts
  3. 29
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue

7
packages/nc-gui/assets/style.scss

@ -311,3 +311,10 @@ a {
@apply block bg-red-500
}
}
.nc-copy-failed-modal .ant-modal-confirm-content{
@apply pt-4 overflow-auto;
white-space: pre;
user-select: auto;
}

36
packages/nc-gui/composables/useCopy.ts

@ -1,6 +1,9 @@
import { useClipboard } from '#imports'
import { Modal } from 'ant-design-vue'
import { useClipboard, useI18n } from '#imports'
export const useCopy = (showDialogIfFailed = false) => {
const { t } = useI18n()
export const useCopy = () => {
/** fallback for copy if clipboard api is not supported */
const copyFallback = async (text: string, retryCount = 0): Promise<boolean> => {
try {
@ -12,7 +15,15 @@ export const useCopy = () => {
document.body.removeChild(textAreaEl)
if (!result && retryCount < 3) {
// retry if copy failed
return new Promise((resolve) => setTimeout(() => resolve(copyFallback(text, retryCount + 1)), 100))
return new Promise((resolve, reject) =>
setTimeout(
() =>
copyFallback(text, retryCount + 1)
.then(resolve)
.catch(reject),
100,
),
)
}
if (!result) {
@ -20,8 +31,15 @@ export const useCopy = () => {
}
return result
} catch (e) {
throw new Error('Clipboard copy failed, please copy it from console log')
console.log(text)
if (!showDialogIfFailed) throw new Error(t('msg.error.copyToClipboardError'))
Modal.info({
title: 'Copy failed, please manually copy it from here',
content: text,
class: 'nc-copy-failed-modal',
width: '550px',
})
return false
}
}
@ -32,12 +50,10 @@ export const useCopy = () => {
if (isSupported.value) {
await _copy(text)
return true
} else {
return copyFallback(text)
}
} catch (e) {
return copyFallback(text)
}
} catch {}
return copyFallback(text)
}
return { copy }

29
packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@ -52,7 +52,7 @@ const { clearTabs, addTab } = useTabs()
const { isUIAllowed } = useUIPermission()
const { copy } = useCopy()
const { copy } = useCopy(true)
// create a new sidebar state
const { isOpen, toggle, toggleHasSidebar } = useSidebar('nc-left-sidebar', { hasSidebar: false, isOpen: false })
@ -128,15 +128,17 @@ const copyProjectInfo = async () => {
try {
await loadProjectMetaInfo()
await copy(
Object.entries(projectMetaInfo.value!)
.map(([k, v]) => `${k}: **${v}**`)
.join('\n'),
)
// Copied to clipboard
message.info(t('msg.info.copiedToClipboard'))
} catch (e: any) {
if (
await copy(
Object.entries(projectMetaInfo.value!)
.map(([k, v]) => `${k}: **${v}**`)
.join('\n'),
)
) {
// Copied to clipboard
message.info(t('msg.info.copiedToClipboard'))
}
} catch (e) {
console.error(e)
message.error(e.message)
}
@ -144,9 +146,10 @@ const copyProjectInfo = async () => {
const copyAuthToken = async () => {
try {
await copy(token.value!)
// Copied to clipboard
message.info(t('msg.info.copiedToClipboard'))
if (await copy(token.value!)) {
// Copied to clipboard
message.info(t('msg.info.copiedToClipboard'))
}
} catch (e: any) {
console.error(e)
message.error(e.message)

Loading…
Cancel
Save