Feature/8134 - copy to clipboard

changelog/unreleased/enhancement-clipboard-copy

@@ -0,0 +1,6 @@
+Enhancement: Make clipboard copy available to more browsers 
+
+We've removed a thirdparty library and now rely on the standard browser API for copying (e.g. links) to the user's clipboard.
+
+https://github.com/owncloud/web/pull/8136
+https://github.com/owncloud/web/issues/8134

packages/design-system/src/components/OcRecipient/OcRecipient.spec.ts

@@ -53,7 +53,6 @@ describe('OcRecipient', () => {
  hasAvatar: false
  })
 
- console.log(wrapper.html())
  const icon = wrapper.find('[data-testid="recipient-icon"]')
 
  expect(icon.exists()).toBeTruthy()

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": {

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -156,7 +156,7 @@ import { createLocationSpaces } from '../../../router'
 import { ShareTypes } from 'web-client/src/helpers/share'
 import { useAccessToken, usePublicLinkContext, useStore } from 'web-pkg/src/composables'
 import { getIndicators } from '../../../helpers/statusIndicators'
-import copyToClipboard from 'copy-to-clipboard'
+import { copyToClipboard } from 'web-pkg/src/helpers'
 import { encodePath } from 'web-pkg/src/utils'
 import { formatDateFromHTTP, formatFileSize } from 'web-pkg/src/helpers'
 import { eventBus } from 'web-pkg/src/services/eventBus'

packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue

@@ -19,9 +19,9 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
-import copyToClipboard from 'copy-to-clipboard'
 import { unref } from 'vue'
+import { mapActions } from 'vuex'
+import { copyToClipboard } from 'web-pkg/src/helpers'
 
 export default {
  name: 'PrivateLinkItem',

packages/web-app-files/src/components/SideBar/Shares/Links/NameAndCopy.vue

@@ -29,7 +29,7 @@
 <script>
 import { mapActions } from 'vuex'
 import { defineComponent } from 'vue'
-import copyToClipboard from 'copy-to-clipboard'
+import { copyToClipboard } from 'web-pkg/src/helpers'
 
 export default defineComponent({
  name: 'NameAndCopy',

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 { copyToClipboard } from 'web-pkg/src/helpers'
 
 interface CreateQuicklink {
  store: Store<any>

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)

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)
 

packages/web-pkg/src/helpers/clipboard.ts

@@ -0,0 +1,3 @@
+export function copyToClipboard(string): Promise<void> {
+ return navigator.clipboard.writeText(string)
+}

packages/web-pkg/src/helpers/index.ts

@@ -1,4 +1,5 @@
 export * from './cache'
+export * from './clipboard'
 export * from './preview'
 export * from './datetime'
 export * from './filesize'