Add quicklink compatibility for oc10, changelog item

changelog/unreleased/enhancement-introduce-quicklink

@@ -0,0 +1,6 @@
+Enhancement: Introduce quicklinks
+
+We have added quicklinks to the link share section in the right sidebar. Clicking the link quickaction and the link menu item in the files table contextmenu now always copy the quick link instead of creating a new link (and create it first, if it didn't exist before).
+
+https://github.com/owncloud/web/pull/6820
+https://github.com/owncloud/web/issues/6605

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

@@ -1,13 +1,13 @@
 <template>
   <oc-button
-    v-oc-tooltip="copyToClipboardLabel"
-    class="oc-files-private-link-copy-url"
-    :aria-label="copyToClipboardLabel"
+    v-oc-tooltip="buttonLabel"
     appearance="raw"
+    :aria-label="buttonLabel"
+    class="oc-files-private-link-copy-url"
     :variation="copied ? 'success' : 'passive'"
-    @click="copyValueToClipboard"
+    @click="copyPrivateLinkToClipboard"
   >
-    <span v-text="copyToClipboardText" />
+    <span v-text="buttonText" />
     <oc-icon
       v-if="copied"
       key="oc-copy-to-clipboard-copied"
@@ -30,20 +30,17 @@ export default {
     timeout: null
   }),
   computed: {
-    link() {
-      return this.displayedItem.value.privateLink
-    },
-    copyToClipboardText() {
+    buttonText() {
       return this.$gettext('Private link')
     },
-    copyToClipboardLabel() {
+    buttonLabel() {
       return this.$gettext('Copy private link to clipboard')
     }
   },
   methods: {
     ...mapActions(['showMessage']),
-    copyValueToClipboard() {
-      copyToClipboard(this.displayedItem.value)
+    copyPrivateLinkToClipboard() {
+      copyToClipboard(this.displayedItem.value.privateLink)
       this.clipboardSuccessHandler()
       this.showMessage({
         title: this.$gettext('Private link copied'),

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

@@ -246,13 +246,10 @@ export default defineComponent({
     },
 
     links() {
-      // exclude quicklink here
       const nonQuickLinkOutgoingLinks = this.currentFileOutgoingLinks.filter(
         (link) => !link.quicklink
       )
 
-      console.log(nonQuickLinkOutgoingLinks, this.currentFileOutgoingLinks)
-
       return [...nonQuickLinkOutgoingLinks, ...this.indirectLinks]
         .sort(this.linksComparator)
         .map((share) => {

packages/web-app-files/src/helpers/resources.ts

@@ -433,6 +433,11 @@ function _buildLink(link): Share {
     description = role.label
   }
 
+  const attributes = JSON.parse(link.attributes) || []
+  const oc10QuickLink = attributes.find((attr) => attr.key === 'isQuickLink')?.enabled
+  const ocisQuickLink = link.quicklink === 'true'
+  const quicklink = oc10QuickLink || ocisQuickLink
+
   return {
     shareType: parseInt(link.share_type),
     id: link.id,
@@ -441,8 +446,7 @@ function _buildLink(link): Share {
     path: link.path,
     permissions: link.permissions,
     description,
-    // TODO: May need OC10 differentiation
-    quicklink: link.quicklink === 'true',
+    quicklink,
     stime: link.stime,
     name: typeof link.name === 'string' ? link.name : (link.token as string),
     password: !!(link.share_with && link.share_with_displayname),

packages/web-app-files/tests/unit/components/SideBar/PrivateLinkItem.spec.js

@@ -1,9 +1,11 @@
 import Vuex from 'vuex'
 import GetTextPlugin from 'vue-gettext'
 import DesignSystem from 'owncloud-design-system'
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import PrivateLinkItem from '@files/src/components/SideBar/PrivateLinkItem.vue'
 
+jest.useFakeTimers()
+
 const localVue = createLocalVue()
 
 localVue.use(Vuex)
@@ -13,19 +15,43 @@ localVue.use(GetTextPlugin, {
   silent: true
 })
 
+const mapActions = {
+  showMessage: jest.fn()
+}
+
 describe('PrivateLinkItem', () => {
-  it('should render the copy-to-clipboard button and a success message upon clicking it', () => {
+  it('should render a button', () => {
+    const store = createStore()
+    const wrapper = getWrapper(store)
+
+    expect(wrapper).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 spyShowMessage = jest.spyOn(mapActions, 'showMessage')
+    const windowSpy = jest.spyOn(window, 'prompt').mockImplementation()
+
     const store = createStore()
-    const wrapper = getShallowWrapper(store)
-    const copyToClipboardButtonElement = wrapper.find('.oc-files-private-link-copy-url')
-
-    expect(copyToClipboardButtonElement.exists()).toBeTruthy()
-    expect(copyToClipboardButtonElement.attributes().text).toBe('Private link')
-    expect(copyToClipboardButtonElement.attributes().label).toBe('Copy private link to clipboard')
-    expect(copyToClipboardButtonElement.attributes().successmsgtitle).toBe('Private link copied')
-    expect(copyToClipboardButtonElement.attributes().successmsgtext).toBe(
-      'The private link has been copied to your clipboard.'
+    const wrapper = getWrapper(store)
+
+    expect(spyShowMessage).not.toHaveBeenCalled()
+    expect(windowSpy).not.toHaveBeenCalled()
+
+    await wrapper.trigger('click')
+
+    expect(wrapper).toMatchSnapshot()
+
+    expect(spyShowMessage).toHaveBeenCalledTimes(1)
+    expect(windowSpy).toHaveBeenCalledTimes(1)
+    expect(windowSpy).toHaveBeenCalledWith(
+      'Copy to clipboard: Ctrl+C, Enter',
+      'https://example.com/fake-private-link'
     )
+
+    jest.advanceTimersByTime(550)
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper).toMatchSnapshot()
+    })
   })
 })
 
@@ -36,11 +62,14 @@ const getTestFolder = () => ({
   mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
   size: '740',
   name: 'lorem.txt',
-  privateLink: 'some-link'
+  privateLink: 'https://example.com/fake-private-link'
 })
 
 function createStore() {
   return new Vuex.Store({
+    actions: mapActions,
+    commit: jest.fn(),
+    dispatch: jest.fn(),
     getters: {
       capabilities: function () {
         return {
@@ -61,12 +90,13 @@ function createStore() {
   })
 }
 
-function getShallowWrapper(store) {
-  return shallowMount(PrivateLinkItem, {
+function getWrapper(store) {
+  return mount(PrivateLinkItem, {
     localVue,
     store,
-    stubs: {
-      'copy-to-clipboard-button': true
+    stubs: {},
+    directives: {
+      'oc-tooltip': jest.fn()
     },
     provide: {
       displayedItem: {