From 0bf64d88ec5dad548066d0c98b5c4b4fd4f6d801 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Tue, 27 Dec 2022 01:09:55 +0100
Subject: [PATCH] Feature/8134 - copy to clipboard

---
 .../unreleased/enhancement-clipboard-copy     |  8 +++
 packages/web-app-files/package.json           |  1 -
 .../SideBar/Details/FileDetails.vue           | 70 ++++++++++---------
 .../components/SideBar/PrivateLinkItem.vue    | 59 ++++++++--------
 .../SideBar/Shares/Links/NameAndCopy.vue      | 63 ++++++++---------
 .../web-app-files/src/helpers/share/link.ts   |  5 +-
 .../SideBar/PrivateLinkItem.spec.ts           | 31 ++++----
 .../SideBar/Shares/Links/NameAndCopy.spec.ts  | 11 +--
 packages/web-runtime/src/defaults/vue.js      |  5 --
 pnpm-lock.yaml                                | 12 ----
 10 files changed, 136 insertions(+), 129 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-clipboard-copy

diff --git a/changelog/unreleased/enhancement-clipboard-copy b/changelog/unreleased/enhancement-clipboard-copy
new file mode 100644
index 00000000000..a4687ed2752
--- /dev/null
+++ b/changelog/unreleased/enhancement-clipboard-copy
@@ -0,0 +1,8 @@
+Enhancement: Make clipboard copy available to more browsers 
+
+We have added more functionality for copying (e.g. links) to the user's clipboard. 
+By switching libraries we now use the standard browser API (if available) with a 
+fallback and only offer copy-to-clipboard buttons if the browser supports it.
+
+https://github.com/owncloud/web/pull/8136
+https://github.com/owncloud/web/issues/8134
diff --git a/packages/web-app-files/package.json b/packages/web-app-files/package.json
index b52eb8965f5..adab7e78705 100644
--- a/packages/web-app-files/package.json
+++ b/packages/web-app-files/package.json
@@ -5,7 +5,6 @@
   "description": "ownCloud web files",
   "license": "AGPL-3.0",
   "dependencies": {
-    "copy-to-clipboard": "^3.3.1",
     "mark.js": "^8.11.1"
   },
   "devDependencies": {
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index 40cc97a04bf..904e1fb6c09 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -95,6 +95,7 @@
                 v-text="file.path"
               />
               <oc-button
+                v-if="isSupported"
                 v-oc-tooltip="copyEosPathLabel"
                 :aria-label="copyEosPathLabel"
                 appearance="raw"
@@ -123,6 +124,7 @@
                 v-text="directLink"
               />
               <oc-button
+                v-if="isSupported"
                 v-oc-tooltip="copyDirectLinkLabel"
                 :aria-label="copyDirectLinkLabel"
                 appearance="raw"
@@ -160,7 +162,7 @@
   </div>
 </template>
 <script lang="ts">
-import { ComputedRef, defineComponent, inject } from 'vue'
+import { ComputedRef, defineComponent, inject, ref } from 'vue'
 import { mapActions, mapGetters } from 'vuex'
 import { ImageDimension } from '../../../constants'
 import { loadPreview } from 'web-pkg/src/helpers/preview'
@@ -173,10 +175,11 @@ import {
   useCapabilityFilesTags,
   usePublicLinkContext,
   useStore,
+  useTranslations,
   useUserContext
 } from 'web-pkg/src/composables'
 import { getIndicators } from '../../../helpers/statusIndicators'
-import copyToClipboard from 'copy-to-clipboard'
+import { useClipboard } from '@vueuse/core'
 import { encodePath } from 'web-pkg/src/utils'
 import { formatDateFromHTTP, formatFileSize } from 'web-pkg/src/helpers'
 import { eventBus } from 'web-pkg/src/services/eventBus'
@@ -190,8 +193,40 @@ export default defineComponent({
   name: 'FileDetails',
   setup() {
     const store = useStore()
+    const { $gettext } = useTranslations()
+
+    const copiedDirect = ref(false)
+    const copiedEos = ref(false)
+    const { copy, copied, isSupported } = useClipboard({ legacy: true, copiedDuring: 550 })
+
+    const copyEosPathToClipboard = () => {
+      copy(inject<ComputedRef<Resource>>('displayedItem').value.path)
+      copiedEos.value = copied.value
+      store.dispatch('showMessage', {
+        title: $gettext('EOS path copied'),
+        desc: $gettext('The EOS path has been copied to your clipboard.')
+      })
+    }
+
+    const copyDirectLinkToClipboard = () => {
+      copy(
+        `${store.getters.configuration.server}files/spaces/personal/home${
+          inject<ComputedRef<Resource>>('displayedItem').value.path
+        }`
+      )
+      copiedDirect.value = copied.value
+      store.dispatch('showMessage', {
+        title: $gettext('Direct link copied'),
+        desc: $gettext('The direct link has been copied to your clipboard.')
+      })
+    }
 
     return {
+      copiedEos,
+      copyEosPathToClipboard,
+      copiedDirect,
+      copyDirectLinkToClipboard,
+      isSupported,
       isUserContext: useUserContext({ store }),
       isPublicLinkContext: usePublicLinkContext({ store }),
       accessToken: useAccessToken({ store }),
@@ -200,12 +235,8 @@ export default defineComponent({
       hasTags: useCapabilityFilesTags()
     }
   },
-
   data: () => ({
-    loading: false,
-    copiedDirect: false,
-    copiedEos: false,
-    timeout: null
+    loading: false
   }),
   computed: {
     ...mapGetters('runtime/spaces', ['spaces']),
@@ -468,31 +499,6 @@ export default defineComponent({
       await Promise.all(calls.map((p) => p.catch((e) => e)))
       this.loading = false
     },
-    copyEosPathToClipboard() {
-      copyToClipboard(this.file.path)
-      this.copiedEos = true
-      this.clipboardSuccessHandler()
-      this.showMessage({
-        title: this.$gettext('EOS path copied'),
-        desc: this.$gettext('The EOS path has been copied to your clipboard.')
-      })
-    },
-    copyDirectLinkToClipboard() {
-      copyToClipboard(this.directLink)
-      this.copiedDirect = true
-      this.clipboardSuccessHandler()
-      this.showMessage({
-        title: this.$gettext('Direct link copied'),
-        desc: this.$gettext('The direct link has been copied to your clipboard.')
-      })
-    },
-    clipboardSuccessHandler() {
-      clearTimeout(this.timeout)
-      this.timeout = setTimeout(() => {
-        this.copiedDirect = false
-        this.copiedEos = false
-      }, 550)
-    },
     getTagLink(tag) {
       return createLocationCommon('files-common-search', {
         query: { term: `Tags:${tag}`, provider: 'files.sdk' }
diff --git a/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue b/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue
index 8575b44addd..42daf56d464 100644
--- a/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue
+++ b/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue
@@ -1,5 +1,6 @@
 <template>
   <oc-button
+    v-if="isSupported"
     v-oc-tooltip="buttonLabel"
     appearance="raw"
     :aria-label="buttonLabel"
@@ -18,18 +19,36 @@
   </oc-button>
 </template>
 
-<script>
-import { mapActions } from 'vuex'
-import copyToClipboard from 'copy-to-clipboard'
-import { unref } from 'vue'
+<script lang="ts">
+import { computed, defineComponent, inject, unref } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { Resource } from 'web-client'
+import { useStore, useTranslations } from 'web-pkg/src'
 
-export default {
+export default defineComponent({
   name: 'PrivateLinkItem',
-  inject: ['displayedItem'],
-  data: () => ({
-    copied: false,
-    timeout: null
-  }),
+  setup() {
+    const { $gettext } = useTranslations()
+    const store = useStore<any>()
+    const displayedItem = inject<Resource>('displayedItem')
+    const privateLink = computed(() => unref(displayedItem))
+
+    const { copy, copied, isSupported } = useClipboard({ legacy: true, copiedDuring: 550 })
+
+    const copyLinkToClipboard = () => {
+      copy(privateLink.value.privateLink)
+      store.dispatch('showMessage', {
+        title: $gettext('Private link copied'),
+        desc: $gettext('The private link has been copied to your clipboard.')
+      })
+    }
+
+    return {
+      copied,
+      copyLinkToClipboard,
+      isSupported
+    }
+  },
   computed: {
     buttonText() {
       return this.$gettext('Private link')
@@ -37,24 +56,6 @@ export default {
     buttonLabel() {
       return this.$gettext('Copy private link to clipboard')
     }
-  },
-  methods: {
-    ...mapActions(['showMessage']),
-    copyPrivateLinkToClipboard() {
-      copyToClipboard(unref(this.displayedItem).privateLink)
-      this.clipboardSuccessHandler()
-      this.showMessage({
-        title: this.$gettext('Private link copied'),
-        desc: this.$gettext('The private link has been copied to your clipboard.')
-      })
-    },
-    clipboardSuccessHandler() {
-      this.copied = true
-      clearTimeout(this.timeout)
-      this.timeout = setTimeout(() => {
-        this.copied = false
-      }, 550)
-    }
   }
-}
+})
 </script>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/NameAndCopy.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/NameAndCopy.vue
index e937731e7ed..e20ac4494d7 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/NameAndCopy.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/NameAndCopy.vue
@@ -15,6 +15,7 @@
         />
       </div>
       <oc-button
+        v-if="isSupported"
         v-oc-tooltip="copyBtnHint"
         appearance="raw"
         :aria-label="copyBtnHint"
@@ -26,10 +27,10 @@
   </div>
 </template>
 
-<script>
-import { mapActions } from 'vuex'
+<script lang="ts">
 import { defineComponent } from 'vue'
-import copyToClipboard from 'copy-to-clipboard'
+import { useStore, useTranslations } from 'web-pkg/src/composables'
+import { useClipboard } from '@vueuse/core'
 
 export default defineComponent({
   name: 'NameAndCopy',
@@ -39,10 +40,33 @@ export default defineComponent({
       required: true
     }
   },
-  data: () => ({
-    copied: false,
-    timeout: null
-  }),
+  setup(props) {
+    const { $gettext, $gettextInterpolate } = useTranslations()
+    const store = useStore<any>()
+
+    const { copy, copied, isSupported } = useClipboard({ legacy: true, copiedDuring: 550 })
+
+    const copyLinkToClipboard = () => {
+      copy(props.link.url)
+      store.dispatch('showMessage', {
+        title: props.link.quicklink
+          ? $gettext('The quicklink has been copied to your clipboard.')
+          : $gettextInterpolate(
+              $gettext('The link "%{linkName}" has been copied to your clipboard.'),
+              {
+                linkName: props.link.linkName
+              },
+              true
+            )
+      })
+    }
+
+    return {
+      copied,
+      copyLinkToClipboard,
+      isSupported
+    }
+  },
   computed: {
     linkName() {
       return this.link.name
@@ -56,31 +80,6 @@ export default defineComponent({
     copiedLabel() {
       return this.$gettext('Copied')
     }
-  },
-  methods: {
-    ...mapActions(['showMessage']),
-    copyLinkToClipboard() {
-      copyToClipboard(this.link.url)
-      this.clipboardSuccessHandler()
-      this.showMessage({
-        title: this.link.quicklink
-          ? this.$gettext('The quicklink has been copied to your clipboard.')
-          : this.$gettextInterpolate(
-              this.$gettext('The link "%{linkName}" has been copied to your clipboard.'),
-              {
-                linkName: this.linkName
-              },
-              true
-            )
-      })
-    },
-    clipboardSuccessHandler() {
-      this.copied = true
-      clearTimeout(this.timeout)
-      this.timeout = setTimeout(() => {
-        this.copied = false
-      }, 550)
-    }
   }
 })
 </script>
diff --git a/packages/web-app-files/src/helpers/share/link.ts b/packages/web-app-files/src/helpers/share/link.ts
index dbfc82c7ee4..74be344658e 100644
--- a/packages/web-app-files/src/helpers/share/link.ts
+++ b/packages/web-app-files/src/helpers/share/link.ts
@@ -2,7 +2,7 @@ import { DateTime } from 'luxon'
 import { Share } from 'web-client/src/helpers/share'
 import { Store } from 'vuex'
 import { clientService } from 'web-pkg/src/services'
-import copyToClipboard from 'copy-to-clipboard'
+import { useClipboard } from '@vueuse/core'
 
 interface CreateQuicklink {
   store: Store<any>
@@ -45,7 +45,8 @@ export const createQuicklink = async (args: CreateQuicklink): Promise<Share> =>
     storageId: resource.fileId || resource.id
   })
 
-  copyToClipboard(link.url)
+  const { copy } = useClipboard({ legacy: true })
+  copy(link.url)
 
   await store.dispatch('showMessage', {
     title: $gettext('The quicklink has been copied to your clipboard.')
diff --git a/packages/web-app-files/tests/unit/components/SideBar/PrivateLinkItem.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/PrivateLinkItem.spec.ts
index d62c72a3b23..606d2286f2f 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/PrivateLinkItem.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/PrivateLinkItem.spec.ts
@@ -1,23 +1,39 @@
-import PrivateLinkItem from 'web-app-files/src/components/SideBar/PrivateLinkItem.vue'
-import { mockDeep } from 'jest-mock-extended'
+import { mock } from 'jest-mock-extended'
 import { Resource } from 'web-client'
 import { createStore, defaultPlugins, mount, defaultStoreMockOptions } from 'web-test-helpers'
+import PrivateLinkItem from 'web-app-files/src/components/SideBar/PrivateLinkItem.vue'
 
 jest.useFakeTimers()
 
+const folder = mock<Resource>({
+  type: 'folder',
+  ownerId: 'marie',
+  ownerDisplayName: 'Marie',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  size: '740',
+  name: 'lorem.txt',
+  privateLink: 'https://example.com/fake-private-link'
+})
+
 describe('PrivateLinkItem', () => {
   it('should render a button', () => {
     const { wrapper } = getWrapper()
     expect(wrapper.html()).toMatchSnapshot()
   })
   it('upon clicking it should copy the private link to the clipboard button, render a success message and change icon for half a second', async () => {
-    jest.spyOn(window, 'prompt').mockImplementation()
+    Object.assign(window.navigator, {
+      clipboard: {
+        writeText: jest.fn().mockImplementation(() => Promise.resolve())
+      }
+    })
+
     const { wrapper } = getWrapper()
     const spyShowMessage = jest.spyOn(wrapper.vm, 'showMessage')
     expect(spyShowMessage).not.toHaveBeenCalled()
 
     await wrapper.trigger('click')
     expect(wrapper.html()).toMatchSnapshot()
+    expect(window.navigator.clipboard.writeText).toHaveBeenCalledWith(folder.privateLink)
     expect(spyShowMessage).toHaveBeenCalledTimes(1)
 
     jest.advanceTimersByTime(550)
@@ -29,15 +45,6 @@ describe('PrivateLinkItem', () => {
 })
 
 function getWrapper() {
-  const folder = mockDeep<Resource>({
-    type: 'folder',
-    ownerId: 'marie',
-    ownerDisplayName: 'Marie',
-    mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
-    size: '740',
-    name: 'lorem.txt',
-    privateLink: 'https://example.com/fake-private-link'
-  })
   const storeOptions = { ...defaultStoreMockOptions }
   storeOptions.getters.capabilities.mockImplementation(() => ({ files: { privateLinks: true } }))
   storeOptions.modules.Files.getters.highlightedFile.mockImplementation(() => folder)
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/NameAndCopy.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/NameAndCopy.spec.ts
index 384f4ef0cfd..2ac38ef16e2 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/NameAndCopy.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/NameAndCopy.spec.ts
@@ -16,17 +16,20 @@ describe('NameAndCopy', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
   it('upon clicking it should copy the private link to the clipboard button, render a success message and change icon for half a second', async () => {
-    const windowSpy = jest.spyOn(window, 'prompt').mockImplementation()
+    Object.assign(window.navigator, {
+      clipboard: {
+        writeText: jest.fn().mockImplementation(() => Promise.resolve())
+      }
+    })
+
     const { wrapper } = getWrapper()
     const spyShowMessage = jest.spyOn(wrapper.vm, 'showMessage')
     expect(spyShowMessage).not.toHaveBeenCalled()
-    expect(windowSpy).not.toHaveBeenCalled()
 
     await wrapper.find('.oc-files-public-link-copy-url').trigger('click')
+    expect(window.navigator.clipboard.writeText).toHaveBeenCalledWith(exampleLink.url)
     expect(wrapper.html()).toMatchSnapshot()
     expect(spyShowMessage).toHaveBeenCalledTimes(1)
-    expect(windowSpy).toHaveBeenCalledTimes(1)
-    expect(windowSpy).toHaveBeenCalledWith('Copy to clipboard: Ctrl+C, Enter', exampleLink.url)
 
     jest.advanceTimersByTime(550)
 
diff --git a/packages/web-runtime/src/defaults/vue.js b/packages/web-runtime/src/defaults/vue.js
index 2f12418b766..41aa4c58d49 100644
--- a/packages/web-runtime/src/defaults/vue.js
+++ b/packages/web-runtime/src/defaults/vue.js
@@ -1,12 +1,9 @@
-import 'vue-resize/dist/vue-resize.css'
 import Vue from 'vue'
 import WebPlugin from '../plugins/web'
 import Avatar from '../components/Avatar.vue'
 import focusMixin from '../mixins/focusMixin'
 import lifecycleMixin from '../mixins/lifecycleMixin'
-import VueEvents from 'vue-events'
 import VueScrollTo from 'vue-scrollto'
-import VueResize from 'vue-resize'
 import VueMeta from 'vue-meta'
 import PortalVue from 'portal-vue'
 import AsyncComputed from 'vue-async-computed'
@@ -15,10 +12,8 @@ import Vuex from 'vuex'
 
 Vue.use(Vuex)
 Vue.use(VueRouter)
-Vue.use(VueEvents)
 Vue.use(VueScrollTo)
 Vue.use(WebPlugin)
-Vue.use(VueResize)
 Vue.use(VueMeta, {
   refreshOnceOnNavigation: true
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 22866f35661..de5a9e35a80 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -424,7 +424,6 @@ importers:
     specifiers:
       '@jest/globals': 29.3.1
       '@vueuse/core': ^9.8.2
-      copy-to-clipboard: ^3.3.1
       filesize: ^9.0.11
       fuse.js: ^6.5.3
       lodash-es: 4.17.21
@@ -449,7 +448,6 @@ importers:
       web-pkg: npm:@ownclouders/web-pkg
       web-runtime: workspace:*
     dependencies:
-      copy-to-clipboard: 3.3.1
       filesize: 9.0.11
       fuse.js: 6.5.3
       lodash-es: 4.17.21
@@ -9763,12 +9761,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /copy-to-clipboard/3.3.1:
-    resolution: {integrity: sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==}
-    dependencies:
-      toggle-selection: 1.0.6
-    dev: false
-
   /copy-webpack-plugin/5.1.2_webpack@4.46.0:
     resolution: {integrity: sha512-Uh7crJAco3AjBvgAy9Z75CjK8IG+gxaErro71THQ+vv/bl4HaQcpkexAY8KVW/T6D2W2IRr+couF/knIRkZMIQ==}
     engines: {node: '>= 6.9.0'}
@@ -21504,10 +21496,6 @@ packages:
       safe-regex: 1.1.0
     dev: true
 
-  /toggle-selection/1.0.6:
-    resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
-    dev: false
-
   /toidentifier/1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}