From 1c9aee2a00febb71b1ee00a1e858670c48194b59 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 27 Apr 2022 15:21:53 +0200
Subject: [PATCH 1/6] WIP init revert

first ruff implementation for quicklinks

combine CURRENT_FILE_OUTGOING_SHARES_ADD and CURRENT_FILE_OUTGOING_SHARES_UPDATE into CURRENT_FILE_OUTGOING_SHARES_UPSERT
refactor quicklink action into helper
implement quicklink logic

update test message text
---
 .../components/FilesList/ContextActions.vue   |  6 +-
 .../components/SideBar/Shares/FileLinks.vue   | 10 +++-
 .../SideBar/Shares/Links/QuickLink.vue        | 18 ++++++
 .../web-app-files/src/helpers/share/index.ts  |  1 +
 .../web-app-files/src/helpers/share/link.ts   | 54 +++++++++++++++++
 .../src/mixins/actions/createPublicLink.js    | 44 --------------
 .../src/mixins/actions/createQuicklink.js     | 45 ++++++++++++++
 packages/web-app-files/src/quickActions.js    | 59 +++----------------
 packages/web-app-files/src/store/actions.js   | 17 +++---
 packages/web-app-files/src/store/mutations.js |  5 +-
 .../components/FilesList/QuickActions.spec.js | 10 ++--
 .../tests/unit/store/mutations.spec.js        |  6 +-
 .../publicLinkCreate.feature                  |  3 +-
 13 files changed, 157 insertions(+), 121 deletions(-)
 create mode 100644 packages/web-app-files/src/components/SideBar/Shares/Links/QuickLink.vue
 create mode 100644 packages/web-app-files/src/helpers/share/link.ts
 delete mode 100644 packages/web-app-files/src/mixins/actions/createPublicLink.js
 create mode 100644 packages/web-app-files/src/mixins/actions/createQuicklink.js

diff --git a/packages/web-app-files/src/components/FilesList/ContextActions.vue b/packages/web-app-files/src/components/FilesList/ContextActions.vue
index 7d495715445..9ec6eb533e2 100644
--- a/packages/web-app-files/src/components/FilesList/ContextActions.vue
+++ b/packages/web-app-files/src/components/FilesList/ContextActions.vue
@@ -8,7 +8,7 @@ import ContextActionMenu from '../ContextActionMenu.vue'
 import FileActions from '../../mixins/fileActions'
 import AcceptShare from '../../mixins/actions/acceptShare'
 import Copy from '../../mixins/actions/copy'
-import CreatePublicLink from '../../mixins/actions/createPublicLink'
+import CreateQuicklink from '../../mixins/actions/createQuicklink'
 import DeclineShare from '../../mixins/actions/declineShare'
 import Delete from '../../mixins/actions/delete'
 import DownloadArchive from '../../mixins/actions/downloadArchive'
@@ -35,7 +35,7 @@ export default {
     FileActions,
     AcceptShare,
     Copy,
-    CreatePublicLink,
+    CreateQuicklink,
     DeclineShare,
     Delete,
     DownloadArchive,
@@ -134,7 +134,7 @@ export default {
     },
 
     menuItemsShare() {
-      return [...this.$_showShares_items, ...this.$_createPublicLink_items].filter((item) =>
+      return [...this.$_showShares_items, ...this.$_createQuicklink_items].filter((item) =>
         item.isEnabled(this.filterParams)
       )
     },
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
index b8fc42fd62c..2d2a37cf488 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
@@ -12,8 +12,7 @@
           <oc-contextual-helper v-if="helpersEnabled" v-bind="viaLinkHelp" />
         </h3>
         <div v-if="canCreatePublicLinks" class="oc-mt-m">
-          <!-- quicklink goes here -->
-          <!-- <hr class="oc-my-s"> -->
+          <hr class="oc-my-s" />
           <oc-button
             id="files-file-link-add"
             variation="primary"
@@ -77,6 +76,7 @@ import { cloneStateObject } from '../../../helpers/store'
 import CreateForm from './Links/CreateForm.vue'
 import DetailsAndEdit from './Links/DetailsAndEdit.vue'
 import NameAndCopy from './Links/NameAndCopy.vue'
+import QuickLink from './Links/QuickLink.vue'
 import { ShareTypes, LinkShareRoles } from '../../../helpers/share'
 import { useStore, useCapabilitySpacesEnabled } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
@@ -92,6 +92,7 @@ export default defineComponent({
   components: {
     CreateForm,
     DetailsAndEdit,
+    QuickLink,
     NameAndCopy
   },
   mixins: [mixins],
@@ -130,6 +131,11 @@ export default defineComponent({
       return this.capabilities?.files_sharing?.public?.defaultPublicLinkShareName || ''
     },
 
+    quickLink() {
+      // TODO: filter for quicklink
+      return this.links[0]
+    },
+
     globalExpirationDate() {
       const expireDate = this.capabilities.files_sharing.public.expire_date
 
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/QuickLink.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/QuickLink.vue
new file mode 100644
index 00000000000..32ad1489412
--- /dev/null
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/QuickLink.vue
@@ -0,0 +1,18 @@
+<template>
+  <h4 class="oc-text-truncate oc-files-file-link-name oc-my-s" v-text="link.name" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  setup() {},
+  name: 'QuickLink',
+  props: {
+    link: {
+      type: Object,
+      required: true
+    }
+  }
+})
+</script>
diff --git a/packages/web-app-files/src/helpers/share/index.ts b/packages/web-app-files/src/helpers/share/index.ts
index 9af0188df59..ab3eab0e62c 100644
--- a/packages/web-app-files/src/helpers/share/index.ts
+++ b/packages/web-app-files/src/helpers/share/index.ts
@@ -1,3 +1,4 @@
+export * from './link'
 export * from './permission'
 export * from './role'
 export * from './share'
diff --git a/packages/web-app-files/src/helpers/share/link.ts b/packages/web-app-files/src/helpers/share/link.ts
new file mode 100644
index 00000000000..01619cbbaf6
--- /dev/null
+++ b/packages/web-app-files/src/helpers/share/link.ts
@@ -0,0 +1,54 @@
+import { DateTime } from 'luxon'
+import { Share } from './share'
+import { Store } from 'vuex'
+import { clientService } from 'web-pkg/src/services'
+import copyToClipboard from 'copy-to-clipboard'
+
+const $gettext = (str) => {
+  return str
+}
+
+interface CreateQuicklink {
+  store: Store<any>
+  storageId?: any
+  resource: any
+}
+
+export const createQuicklink = async (args: CreateQuicklink): Promise<Share> => {
+  const params: { [key: string]: unknown } = {
+    name: $gettext('Quicklink'),
+    permissions: 1,
+    quicklink: true
+  }
+  const { storageId, resource, store } = args
+  const expirationDate = store.state.user.capabilities.files_sharing.public.expire_date
+
+  if (expirationDate.enforced) {
+    params.expireDate = DateTime.now()
+      .plus({ days: parseInt(expirationDate.days, 10) })
+      .endOf('day')
+      .toISO()
+  }
+
+  // needs check for enforced password for default role (viewer?)
+  // and concept to what happens if it is enforced
+
+  if (storageId) {
+    params.spaceRef = `${storageId}${resource.path}`
+  }
+
+  const link = await store.dispatch('Files/addLink', {
+    path: resource.path,
+    client: clientService.owncloudSdk,
+    params,
+    storageId
+  })
+
+  copyToClipboard(link.url)
+
+  await store.dispatch('showMessage', {
+    title: $gettext('Quicklink copied into your clipboard')
+  })
+
+  return link
+}
diff --git a/packages/web-app-files/src/mixins/actions/createPublicLink.js b/packages/web-app-files/src/mixins/actions/createPublicLink.js
deleted file mode 100644
index 1d83a4653af..00000000000
--- a/packages/web-app-files/src/mixins/actions/createPublicLink.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import quickActions, { canShare, createPublicLink } from '../../quickActions'
-import { ShareStatus } from '../../helpers/share'
-import { isLocationSharesActive } from '../../router'
-
-export default {
-  computed: {
-    $_createPublicLink_items() {
-      return [
-        {
-          name: 'create-public-link',
-          icon: quickActions.publicLink.icon,
-          iconFillType: quickActions.publicLink.iconFillType,
-          label: () => this.$gettext('Create & copy public link'),
-          handler: this.$_createPublicLink_trigger,
-          isEnabled: ({ resources }) => {
-            if (resources.length !== 1) {
-              return false
-            }
-            if (isLocationSharesActive(this.$router, 'files-shares-with-me')) {
-              if (resources[0].status !== ShareStatus.accepted) {
-                return false
-              }
-              // FIXME: also check via capabilities if resharing is enabled + resharing is allowed on the share
-            }
-            return canShare(resources[0], this.$store)
-          },
-          componentType: 'oc-button',
-          class: 'oc-files-actions-create-public-link-trigger'
-        }
-      ]
-    }
-  },
-  methods: {
-    $_createPublicLink_trigger({ resources }) {
-      createPublicLink({
-        item: resources[0],
-        client: this.$client,
-        store: this.$store,
-        $gettext: this.$gettext,
-        storageId: this.$route.params.storageId
-      })
-    }
-  }
-}
diff --git a/packages/web-app-files/src/mixins/actions/createQuicklink.js b/packages/web-app-files/src/mixins/actions/createQuicklink.js
new file mode 100644
index 00000000000..30e5cbefe0d
--- /dev/null
+++ b/packages/web-app-files/src/mixins/actions/createQuicklink.js
@@ -0,0 +1,45 @@
+import quickActions, { canShare } from '../../quickActions'
+import { ShareStatus, createQuicklink } from '../../helpers/share'
+import { isLocationSharesActive } from '../../router'
+
+export default {
+  computed: {
+    $_createQuicklink_items() {
+      return [
+        {
+          name: 'create-quicklink',
+          icon: quickActions.quicklink.icon,
+          iconFillType: quickActions.quicklink.iconFillType,
+          label: () => this.$gettext('Copy quicklink'),
+          handler: this.$_createQuicklink_trigger,
+          isEnabled: ({ resources }) => {
+            if (resources.length !== 1) {
+              return false
+            }
+            if (isLocationSharesActive(this.$router, 'files-shares-with-me')) {
+              if (resources[0].status !== ShareStatus.accepted) {
+                return false
+              }
+              // FIXME: also check via capabilities if resharing is enabled + resharing is allowed on the share
+            }
+            return canShare(resources[0], this.$store)
+          },
+          componentType: 'oc-button',
+          class: 'oc-files-actions-create-quicklink-trigger'
+        }
+      ]
+    }
+  },
+  methods: {
+    async $_createQuicklink_trigger({ resources }) {
+      const store = this.$store
+      await createQuicklink({
+        resource: resources[0],
+        storageId: this.$route.params.storageId,
+        store
+      })
+
+      await store.dispatch('Files/sidebar/openWithPanel', 'sharing-item')
+    }
+  }
+}
diff --git a/packages/web-app-files/src/quickActions.js b/packages/web-app-files/src/quickActions.js
index c9fce52a031..f7c7fb40c5e 100644
--- a/packages/web-app-files/src/quickActions.js
+++ b/packages/web-app-files/src/quickActions.js
@@ -1,50 +1,4 @@
-import { DateTime } from 'luxon'
-import copyToClipboard from 'copy-to-clipboard'
-
-export function createPublicLink(ctx) {
-  const params = { name: ctx.$gettext('Quick action link'), permissions: 1 }
-  const capabilities = ctx.store.state.user.capabilities
-  const expirationDate = capabilities.files_sharing.public.expire_date
-
-  if (expirationDate.enforced) {
-    params.expireDate = DateTime.now()
-      .plus({ days: parseInt(expirationDate.days, 10) })
-      .endOf('day')
-      .toISO()
-  }
-
-  // needs check for enforced password for default role (viewer?)
-  // and concept to what happens if it is enforced
-
-  if (ctx.storageId) {
-    params.spaceRef = `${ctx.storageId}${ctx.item.path}`
-  }
-
-  return new Promise((resolve, reject) => {
-    ctx.store
-      .dispatch('Files/addLink', {
-        path: ctx.item.path,
-        client: ctx.client,
-        params,
-        storageId: ctx.storageId
-      })
-      .then((link) => {
-        ctx.store.dispatch('Files/sidebar/openWithPanel', 'sharing-item').then(() => {
-          copyToClipboard(link.url)
-          ctx.store.dispatch('showMessage', {
-            title: ctx.$gettext('Public link created'),
-            desc: ctx.$gettext(
-              'Public link was created successfully and copied into your clipboard.'
-            )
-          })
-        })
-        resolve()
-      })
-      .catch((e) => {
-        reject(e)
-      })
-  })
-}
+import { createQuicklink } from './helpers/share'
 
 export async function openNewCollaboratorsPanel(ctx) {
   await ctx.store.dispatch('Files/sidebar/openWithPanel', 'sharing-item')
@@ -70,11 +24,14 @@ export default {
     handler: openNewCollaboratorsPanel,
     displayed: canShare
   },
-  publicLink: {
-    id: 'public-link',
-    label: ($gettext) => $gettext('Create and copy public link'),
+  quicklink: {
+    id: 'quicklink',
+    label: ($gettext) => $gettext('Copy quicklink'),
     icon: 'link',
-    handler: createPublicLink,
+    handler: async (ctx) => {
+      await createQuicklink({ ...ctx, resource: ctx.item })
+      await ctx.store.dispatch('Files/sidebar/openWithPanel', 'sharing-item')
+    },
     displayed: canShare
   }
 }
diff --git a/packages/web-app-files/src/store/actions.js b/packages/web-app-files/src/store/actions.js
index 616989dd1cd..a4d85f11a9d 100644
--- a/packages/web-app-files/src/store/actions.js
+++ b/packages/web-app-files/src/store/actions.js
@@ -278,7 +278,7 @@ export default {
               displayName: share.collaborator.displayName
             }
             const updatedShare = buildSpaceShare(shareObj, share.id)
-            commit('CURRENT_FILE_OUTGOING_SHARES_UPDATE', updatedShare)
+            commit('CURRENT_FILE_OUTGOING_SHARES_UPSERT', updatedShare)
 
             graphClient.drives.getDrive(share.id).then((response) => {
               const space = buildSpace(response.data)
@@ -306,7 +306,7 @@ export default {
             getters.highlightedFile,
             allowSharePermissions(rootGetters)
           )
-          commit('CURRENT_FILE_OUTGOING_SHARES_UPDATE', share)
+          commit('CURRENT_FILE_OUTGOING_SHARES_UPSERT', share)
           resolve(share)
         })
         .catch((e) => {
@@ -342,7 +342,7 @@ export default {
         })
         .then((share) => {
           context.commit(
-            'CURRENT_FILE_OUTGOING_SHARES_ADD',
+            'CURRENT_FILE_OUTGOING_SHARES_UPSERT',
             buildCollaboratorShare(
               share.shareInfo,
               context.getters.highlightedFile,
@@ -379,7 +379,10 @@ export default {
             displayName
           }
 
-          context.commit('CURRENT_FILE_OUTGOING_SHARES_ADD', buildSpaceShare(shareObj, storageId))
+          context.commit(
+            'CURRENT_FILE_OUTGOING_SHARES_UPSERT',
+            buildSpaceShare(shareObj, storageId)
+          )
           context.commit('CURRENT_FILE_OUTGOING_SHARES_LOADING', true)
 
           return graphClient.drives.getDrive(storageId).then((response) => {
@@ -416,7 +419,7 @@ export default {
       })
       .then((share) => {
         context.commit(
-          'CURRENT_FILE_OUTGOING_SHARES_ADD',
+          'CURRENT_FILE_OUTGOING_SHARES_UPSERT',
           buildCollaboratorShare(
             share.shareInfo,
             context.getters.highlightedFile,
@@ -590,7 +593,7 @@ export default {
         .shareFileWithLink(path, params)
         .then((data) => {
           const link = buildShare(data.shareInfo, null, allowSharePermissions(context.rootGetters))
-          context.commit('CURRENT_FILE_OUTGOING_SHARES_ADD', link)
+          context.commit('CURRENT_FILE_OUTGOING_SHARES_UPSERT', link)
           context.dispatch('updateCurrentFileShareTypes')
           context.dispatch('loadIndicators', { client, currentFolder: path, storageId })
           resolve(link)
@@ -606,7 +609,7 @@ export default {
         .updateShare(id, params)
         .then((data) => {
           const link = buildShare(data.shareInfo, null, allowSharePermissions(context.rootGetters))
-          context.commit('CURRENT_FILE_OUTGOING_SHARES_UPDATE', link)
+          context.commit('CURRENT_FILE_OUTGOING_SHARES_UPSERT', link)
           resolve(link)
         })
         .catch((e) => {
diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
index 87c08af2fb6..bb82fcbf989 100644
--- a/packages/web-app-files/src/store/mutations.js
+++ b/packages/web-app-files/src/store/mutations.js
@@ -107,9 +107,6 @@ export default {
   CURRENT_FILE_OUTGOING_SHARES_SET(state, shares) {
     state.currentFileOutgoingShares = shares
   },
-  CURRENT_FILE_OUTGOING_SHARES_ADD(state, share) {
-    state.currentFileOutgoingShares.push(share)
-  },
   CURRENT_FILE_OUTGOING_SHARES_REMOVE(state, share) {
     if (share.shareType === ShareTypes.space.value) {
       state.currentFileOutgoingShares = state.currentFileOutgoingShares.filter(
@@ -121,7 +118,7 @@ export default {
       (s) => share.id !== s.id
     )
   },
-  CURRENT_FILE_OUTGOING_SHARES_UPDATE(state, share) {
+  CURRENT_FILE_OUTGOING_SHARES_UPSERT(state, share) {
     let fileIndex
     if (share.shareType === ShareTypes.space.value) {
       fileIndex = state.currentFileOutgoingShares.findIndex((s) => {
diff --git a/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.js b/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.js
index 85964b131e5..5045bfab7ca 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.js
+++ b/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.js
@@ -11,12 +11,12 @@ const collaboratorAction = {
   label: () => 'Add people'
 }
 
-const publicLinkAction = {
+const quicklinkAction = {
   displayed: jest.fn(() => false),
   handler: jest.fn(),
   icon: 'link-add',
-  id: 'public-link',
-  label: () => 'Create and copy public link'
+  id: 'quicklink',
+  label: () => 'Create and copy quicklink'
 }
 
 const testItem = {
@@ -79,7 +79,7 @@ function getShallowMountedWrapper() {
     propsData: {
       actions: {
         collaborators: collaboratorAction,
-        publicLink: publicLinkAction
+        publicLink: quicklinkAction
       },
       item: testItem
     },
@@ -101,7 +101,7 @@ function getMountedWrapper() {
     propsData: {
       actions: {
         collaborators: collaboratorAction,
-        publicLink: publicLinkAction
+        publicLink: quicklinkAction
       },
       item: testItem
     },
diff --git a/packages/web-app-files/tests/unit/store/mutations.spec.js b/packages/web-app-files/tests/unit/store/mutations.spec.js
index 7bb2c91b436..99b2e23cf62 100644
--- a/packages/web-app-files/tests/unit/store/mutations.spec.js
+++ b/packages/web-app-files/tests/unit/store/mutations.spec.js
@@ -127,12 +127,12 @@ describe('vuex store mutations', () => {
     })
   })
 
-  describe('CURRENT_FILE_OUTGOING_SHARES_UPDATE', () => {
+  describe('CURRENT_FILE_OUTGOING_SHARES_UPSERT', () => {
     it('updates an outgoing user share', () => {
       const share = { id: 1, shareType: ShareTypes.user.value, permissions: 1 }
       const state = { currentFileOutgoingShares: [share] }
       const updatedShare = { ...share, permissions: 31 }
-      mutations.CURRENT_FILE_OUTGOING_SHARES_UPDATE(state, updatedShare)
+      mutations.CURRENT_FILE_OUTGOING_SHARES_UPSERT(state, updatedShare)
 
       expect(state.currentFileOutgoingShares[0]).toEqual(updatedShare)
     })
@@ -145,7 +145,7 @@ describe('vuex store mutations', () => {
       }
       const state = { currentFileOutgoingShares: [share] }
       const updatedShare = { ...share, permissions: 31 }
-      mutations.CURRENT_FILE_OUTGOING_SHARES_UPDATE(state, updatedShare)
+      mutations.CURRENT_FILE_OUTGOING_SHARES_UPSERT(state, updatedShare)
 
       expect(state.currentFileOutgoingShares[0]).toEqual(updatedShare)
     })
diff --git a/tests/acceptance/features/webUISharingPublicBasic/publicLinkCreate.feature b/tests/acceptance/features/webUISharingPublicBasic/publicLinkCreate.feature
index 9e00619845f..df14c9806e6 100644
--- a/tests/acceptance/features/webUISharingPublicBasic/publicLinkCreate.feature
+++ b/tests/acceptance/features/webUISharingPublicBasic/publicLinkCreate.feature
@@ -182,8 +182,7 @@ Feature: Create public link shares
       | name        | Quick action link |
     And the following success message should be displayed on the webUI
       """
-      Public link created
-      Public link was created successfully and copied into your clipboard.
+      Quicklink copied into your clipboard
       """
 
   # This test is skipped in OCIS as it's starting to fail frequently

From d50763c0f30d23747859a122827be8c2b11232da Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Thu, 28 Apr 2022 15:33:27 +0200
Subject: [PATCH 2/6] Split copyLinkToClipBoard for public&private link, add
 quicklinks to sidebar

---
 .../components/SideBar/PrivateLinkItem.vue    |  74 ++++++++++---
 .../SideBar/Shared/CopyToClipboardButton.vue  | 104 ------------------
 .../components/SideBar/Shares/FileLinks.vue   |  37 ++++++-
 .../SideBar/Shares/Links/CreateQuickLink.vue  |  68 ++++++++++++
 .../SideBar/Shares/Links/NameAndCopy.vue      |  82 ++++++++++----
 .../SideBar/Shares/Links/QuickLink.vue        |  18 ---
 .../web-app-files/src/helpers/resources.ts    |   2 +
 .../web-app-files/src/helpers/share/share.ts  |   1 +
 8 files changed, 225 insertions(+), 161 deletions(-)
 delete mode 100644 packages/web-app-files/src/components/SideBar/Shared/CopyToClipboardButton.vue
 create mode 100644 packages/web-app-files/src/components/SideBar/Shares/Links/CreateQuickLink.vue
 delete mode 100644 packages/web-app-files/src/components/SideBar/Shares/Links/QuickLink.vue

diff --git a/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue b/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue
index 7fd6a68f084..b1919167bd8 100644
--- a/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue
+++ b/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue
@@ -1,21 +1,34 @@
 <template>
-  <copy-to-clipboard-button
+  <oc-button
+    v-oc-tooltip="copyToClipboardLabel"
     class="oc-files-private-link-copy-url"
-    :value="link"
-    :label="copyToClipboardLabel"
-    :text="copyToClipboardText"
-    :success-msg-title="copyToClipboardSuccessMsgTitle"
-    :success-msg-text="copyToClipboardSuccessMsgText"
-  />
+    :aria-label="copyToClipboardLabel"
+    appearance="raw"
+    :variation="copied ? 'success' : 'passive'"
+    @click="copyValueToClipboard"
+  >
+    <span v-text="copyToClipboardText" />
+    <oc-icon
+      v-if="copied"
+      key="oc-copy-to-clipboard-copied"
+      name="checkbox-circle"
+      class="_clipboard-success-animation"
+    />
+    <oc-icon v-else key="oc-copy-to-clipboard-copy" name="clipboard" />
+  </oc-button>
 </template>
 
 <script>
-import CopyToClipboardButton from './Shared/CopyToClipboardButton.vue'
+import { mapActions } from 'vuex'
+import copyToClipboard from 'copy-to-clipboard'
 
 export default {
   name: 'PrivateLinkItem',
-  components: { CopyToClipboardButton },
   inject: ['displayedItem'],
+  data: () => ({
+    copied: false,
+    timeout: null
+  }),
   computed: {
     link() {
       return this.displayedItem.value.privateLink
@@ -25,13 +38,46 @@ export default {
     },
     copyToClipboardLabel() {
       return this.$gettext('Copy private link to clipboard')
+    }
+  },
+  methods: {
+    ...mapActions(['showMessage']),
+    copyValueToClipboard() {
+      copyToClipboard(this.displayedItem.value)
+      this.clipboardSuccessHandler()
+      this.showMessage({
+        title: this.$gettext('Private link copied'),
+        desc: this.$gettext('The private link has been copied to your clipboard.')
+      })
     },
-    copyToClipboardSuccessMsgTitle() {
-      return this.$gettext('Private link copied')
-    },
-    copyToClipboardSuccessMsgText() {
-      return 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>
+
+<style scoped>
+._clipboard-success-animation {
+  animation-name: _clipboard-success-animation;
+  animation-duration: 0.8s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+
+@keyframes _clipboard-success-animation {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>
diff --git a/packages/web-app-files/src/components/SideBar/Shared/CopyToClipboardButton.vue b/packages/web-app-files/src/components/SideBar/Shared/CopyToClipboardButton.vue
deleted file mode 100644
index ba777983161..00000000000
--- a/packages/web-app-files/src/components/SideBar/Shared/CopyToClipboardButton.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <oc-button
-    v-oc-tooltip="label"
-    :aria-label="label"
-    appearance="raw"
-    :variation="copied ? 'success' : 'passive'"
-    @click="copyValueToClipboard"
-  >
-    <span v-text="text" />
-    <oc-icon
-      v-if="copied"
-      key="oc-copy-to-clipboard-copied"
-      name="checkbox-circle"
-      class="_clipboard-success-animation"
-    />
-    <oc-icon v-else key="oc-copy-to-clipboard-copy" name="clipboard" />
-  </oc-button>
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-import copyToClipboard from 'copy-to-clipboard'
-
-export default {
-  props: {
-    text: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * Content which is to be copied to the clipboard
-     */
-    value: {
-      type: String,
-      required: true
-    },
-    /**
-     * Tooltip and aria-label for the button (describing the action, e.g. "Copy link to clipboard")
-     */
-    label: {
-      type: String,
-      required: true
-    },
-    /**
-     * Title for the success message toast
-     */
-    successMsgTitle: {
-      type: String,
-      required: true
-    },
-    /**
-     * Content for the success message toast
-     */
-    successMsgText: {
-      type: String,
-      required: true
-    }
-  },
-  data: () => ({
-    copied: false,
-    timeout: null
-  }),
-  methods: {
-    ...mapActions(['showMessage']),
-    copyValueToClipboard() {
-      copyToClipboard(this.value)
-      this.clipboardSuccessHandler()
-      this.showMessage({
-        title: this.successMsgTitle,
-        desc: this.successMsgText
-      })
-    },
-    clipboardSuccessHandler() {
-      this.copied = true
-      clearTimeout(this.timeout)
-      this.timeout = setTimeout(() => {
-        this.copied = false
-      }, 550)
-    }
-  }
-}
-</script>
-
-<style scoped>
-._clipboard-success-animation {
-  animation-name: _clipboard-success-animation;
-  animation-duration: 0.8s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: both;
-}
-
-@keyframes _clipboard-success-animation {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.9;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-</style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
index 2d2a37cf488..4f9abfd3bd3 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
@@ -12,6 +12,24 @@
           <oc-contextual-helper v-if="helpersEnabled" v-bind="viaLinkHelp" />
         </h3>
         <div v-if="canCreatePublicLinks" class="oc-mt-m">
+          <name-and-copy v-if="quicklink" :link="quicklink" />
+          <create-quick-link
+            v-else
+            :password-enforced="passwordEnforced"
+            :expiration-date="globalExpirationDate"
+            @createPublicLink="createLink"
+          />
+          <details-and-edit
+            v-if="quicklink"
+            :is-folder-share="highlightedFile.isFolder"
+            :link="quicklink"
+            :modifiable="canEdit"
+            :password-enforced="passwordEnforced"
+            :expiration-date="globalExpirationDate"
+            :available-role-options="availableRoleOptions"
+            @updateLink="updatePublicLink"
+            @removePublicLink="deleteLinkConfirmation"
+          />
           <hr class="oc-my-s" />
           <oc-button
             id="files-file-link-add"
@@ -76,7 +94,7 @@ import { cloneStateObject } from '../../../helpers/store'
 import CreateForm from './Links/CreateForm.vue'
 import DetailsAndEdit from './Links/DetailsAndEdit.vue'
 import NameAndCopy from './Links/NameAndCopy.vue'
-import QuickLink from './Links/QuickLink.vue'
+import CreateQuickLink from './Links/CreateQuickLink.vue'
 import { ShareTypes, LinkShareRoles } from '../../../helpers/share'
 import { useStore, useCapabilitySpacesEnabled } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
@@ -91,8 +109,8 @@ export default defineComponent({
   name: 'FileLinks',
   components: {
     CreateForm,
+    CreateQuickLink,
     DetailsAndEdit,
-    QuickLink,
     NameAndCopy
   },
   mixins: [mixins],
@@ -131,9 +149,8 @@ export default defineComponent({
       return this.capabilities?.files_sharing?.public?.defaultPublicLinkShareName || ''
     },
 
-    quickLink() {
-      // TODO: filter for quicklink
-      return this.links[0]
+    quicklink() {
+      return this.currentFileOutgoingLinks.find((link) => link.quicklink === true)
     },
 
     globalExpirationDate() {
@@ -229,7 +246,14 @@ export default defineComponent({
     },
 
     links() {
-      return [...this.currentFileOutgoingLinks, ...this.indirectLinks]
+      // 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) => {
           share.key = 'direct-link-' + share.id
@@ -376,6 +400,7 @@ export default defineComponent({
         expireDate,
         password,
         permissions: link.permissions,
+        quicklink: link.quicklink,
         name: link.name,
         ...(this.currentStorageId && {
           spaceRef: `${this.currentStorageId}${this.highlightedFile.path}`
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/CreateQuickLink.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/CreateQuickLink.vue
new file mode 100644
index 00000000000..e6246a6d14e
--- /dev/null
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/CreateQuickLink.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="oc-mb-s oc-width-1-1">
+    <h4 class="oc-text-truncate oc-files-file-link-name oc-my-s" v-text="heading" />
+    <div class="oc-flex oc-flex-middle oc-flex-between oc-width-1-1 oc-p-s link-name-container">
+      <div class="oc-flex oc-flex-middle oc-text-truncate">
+        <oc-icon name="link" fill-type="line" />
+        <p class="oc-files-file-link-url oc-ml-s oc-text-truncate oc-my-rm" v-text="noLinkLabel" />
+      </div>
+      <oc-button v-oc-tooltip="label" :aria-label="label" @click="createQuickLink">
+        <span v-text="createLinkLabel" />
+      </oc-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CreateQuickLink',
+  props: {
+    expirationDate: {
+      type: Object,
+      default: () => {},
+      required: false
+    },
+    passwordEnforced: {
+      type: Object,
+      default: () => {},
+      required: false
+    }
+  },
+  computed: {
+    heading() {
+      return this.$gettext('Quick link')
+    },
+    label() {
+      return this.$gettext('Create quick link')
+    },
+    createLinkLabel() {
+      return this.$gettext('Create link')
+    },
+    noLinkLabel() {
+      return this.$gettext('No link')
+    }
+  },
+  methods: {
+    createQuickLink() {
+      // handle expiredate && passwordenforcement
+      this.$emit('createPublicLink', {
+        link: {
+          name: this.$gettext('Quicklink'),
+          permissions: 1,
+          quicklink: true
+        },
+        showError: (e) => {
+          this.error = e
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.link-name-container {
+  background-color: var(--oc-color-input-bg);
+  border: 1px solid var(--oc-color-input-border);
+}
+</style>
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 bbe82bbc163..4cbd014b77a 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
@@ -2,55 +2,80 @@
   <div class="oc-mb-s oc-width-1-1">
     <h4 class="oc-text-truncate oc-files-file-link-name oc-my-s" v-text="linkName" />
     <div class="oc-flex oc-flex-middle oc-flex-between oc-width-1-1 oc-p-s link-name-container">
-      <div class="oc-flex oc-flex-middle oc-text-truncate">
+      <div v-if="copied" class="oc-flex oc-flex-middle oc-text-truncate">
+        <oc-icon variation="success" name="checkbox-circle" />
+        <p class="oc-files-file-link-url url-copied oc-ml-s oc-my-rm" v-text="copiedLabel" />
+      </div>
+      <div v-else class="oc-flex oc-flex-middle oc-text-truncate">
         <oc-icon name="link" fill-type="line" />
         <p class="oc-files-file-link-url oc-ml-s oc-text-truncate oc-my-rm" v-text="link.url" />
       </div>
-      <copy-to-clipboard-button
+      <oc-button
+        v-oc-tooltip="copyToClipboardLabel"
+        appearance="raw"
+        :aria-label="copyToClipboardLabel"
         class="oc-files-public-link-copy-url"
-        :value="link.url"
-        :label="copyToClipboardLabel"
-        :success-msg-title="copyToClipboardSuccessMsgTitle"
-        :success-msg-text="getCopyToClipboardSuccessMsgText(linkName)"
+        @click="copyToClipBoardMethod"
+        v-text="copyLabel"
       />
     </div>
   </div>
 </template>
 
 <script>
-import CopyToClipboardButton from '../../Shared/CopyToClipboardButton.vue'
+import { mapActions } from 'vuex'
+import copyToClipboard from 'copy-to-clipboard'
 
 export default {
   name: 'NameAndCopy',
-  components: { CopyToClipboardButton },
   props: {
     link: {
       type: Object,
       required: true
     }
   },
+  data: () => ({
+    copied: false,
+    timeout: null
+  }),
   computed: {
     linkName() {
       return this.link.name
     },
-
-    copyToClipboardLabel() {
-      return this.$gettext('Copy link to clipboard')
+    copyLabel() {
+      return this.$gettext('Copy')
     },
-
-    copyToClipboardSuccessMsgTitle() {
-      return this.$gettext('Link copied')
-    }
-  },
-  methods: {
-    getCopyToClipboardSuccessMsgText(linkName) {
+    copiedLabel() {
+      return this.$gettext('Copied')
+    },
+    getCopyToClipboardSuccessMsgText() {
       return this.$gettextInterpolate(
         this.$gettext('The link "%{linkName}" has been copied to your clipboard.'),
         {
-          linkName
+          linkName: this.linkName
         },
         true
       )
+    },
+    copyToClipboardLabel() {
+      return this.$gettext('Copy link to clipboard')
+    }
+  },
+  methods: {
+    ...mapActions(['showMessage']),
+    copyToClipBoardMethod() {
+      copyToClipboard(this.link.url)
+      this.clipboardSuccessHandler()
+      this.showMessage({
+        title: this.$gettext('Link copied')
+      })
+    },
+    clipboardSuccessHandler() {
+      this.copied = true
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        this.copied = false
+      }, 550)
     }
   }
 }
@@ -61,4 +86,23 @@ export default {
   background-color: var(--oc-color-input-bg);
   border: 1px solid var(--oc-color-input-border);
 }
+
+._clipboard-success-animation {
+  animation-name: _clipboard-success-animation;
+  animation-duration: 0.8s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+
+@keyframes _clipboard-success-animation {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/QuickLink.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/QuickLink.vue
deleted file mode 100644
index 32ad1489412..00000000000
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/QuickLink.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <h4 class="oc-text-truncate oc-files-file-link-name oc-my-s" v-text="link.name" />
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api'
-
-export default defineComponent({
-  setup() {},
-  name: 'QuickLink',
-  props: {
-    link: {
-      type: Object,
-      required: true
-    }
-  }
-})
-</script>
diff --git a/packages/web-app-files/src/helpers/resources.ts b/packages/web-app-files/src/helpers/resources.ts
index 6c5064ae316..1d95cd89eb9 100644
--- a/packages/web-app-files/src/helpers/resources.ts
+++ b/packages/web-app-files/src/helpers/resources.ts
@@ -452,6 +452,8 @@ function _buildLink(link): Share {
     path: link.path,
     permissions: link.permissions,
     description,
+    // TODO: May need OC10 differentiation
+    quicklink: link.quicklink === 'true',
     stime: link.stime,
     name: typeof link.name === 'string' ? link.name : (link.token as string),
     password: !!(link.share_with && link.share_with_displayname),
diff --git a/packages/web-app-files/src/helpers/share/share.ts b/packages/web-app-files/src/helpers/share/share.ts
index ba3e6b96360..2cd77ca5d83 100644
--- a/packages/web-app-files/src/helpers/share/share.ts
+++ b/packages/web-app-files/src/helpers/share/share.ts
@@ -22,4 +22,5 @@ export interface Share {
   fileOwner?: User
   customPermissions?: SharePermission[]
   expires?: Date
+  quicklink?: boolean
 }

From 04404e8fbc486df8cf40f66d7c8198c428b34e35 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Fri, 29 Apr 2022 15:31:33 +0200
Subject: [PATCH 3/6] Add quicklink compatibility for oc10, changelog item

Minor styling & unit test fixes

Restrict link renaming for quicklink
---
 .../enhancement-introduce-quicklink           |   6 +
 .../components/SideBar/PrivateLinkItem.vue    |  42 ++----
 .../components/SideBar/Shares/FileLinks.vue   |  13 +-
 .../SideBar/Shares/Links/CreateQuickLink.vue  |  21 ++-
 .../SideBar/Shares/Links/DetailsAndEdit.vue   |   7 +-
 .../SideBar/Shares/Links/NameAndCopy.vue      |  63 +++------
 .../src/components/SideBar/SideBar.vue        |  19 +++
 .../web-app-files/src/helpers/resources.ts    |  11 +-
 .../SideBar/Links/PrivateLinkItem.spec.js     |  77 -----------
 .../SideBar/PrivateLinkItem.spec.js           |  60 +++++---
 .../Shared/CopyToClipboardButton.spec.js      | 130 ------------------
 .../Shares/Links/DetailsAndEdit.spec.js       |   1 +
 .../SideBar/Shares/Links/NameAndCopy.spec.js  |  65 +++++++--
 .../__snapshots__/NameAndCopy.spec.js.snap    |  30 +++-
 .../PrivateLinkItem.spec.js.snap              |   7 +
 15 files changed, 219 insertions(+), 333 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-introduce-quicklink
 delete mode 100644 packages/web-app-files/tests/unit/components/SideBar/Links/PrivateLinkItem.spec.js
 delete mode 100644 packages/web-app-files/tests/unit/components/SideBar/Shared/CopyToClipboardButton.spec.js
 create mode 100644 packages/web-app-files/tests/unit/components/SideBar/__snapshots__/PrivateLinkItem.spec.js.snap

diff --git a/changelog/unreleased/enhancement-introduce-quicklink b/changelog/unreleased/enhancement-introduce-quicklink
new file mode 100644
index 00000000000..b305107365d
--- /dev/null
+++ b/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
diff --git a/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue b/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue
index b1919167bd8..b9a1924f4cd 100644
--- a/packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue
+++ b/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'),
@@ -60,24 +57,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-._clipboard-success-animation {
-  animation-name: _clipboard-success-animation;
-  animation-duration: 0.8s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: both;
-}
-
-@keyframes _clipboard-success-animation {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.9;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-</style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
index 4f9abfd3bd3..ae0a574b6f8 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
@@ -24,13 +24,14 @@
             :is-folder-share="highlightedFile.isFolder"
             :link="quicklink"
             :modifiable="canEdit"
+            :can-rename="false"
             :password-enforced="passwordEnforced"
             :expiration-date="globalExpirationDate"
             :available-role-options="availableRoleOptions"
             @updateLink="updatePublicLink"
             @removePublicLink="deleteLinkConfirmation"
           />
-          <hr class="oc-my-s" />
+          <hr class="oc-my-m" />
           <oc-button
             id="files-file-link-add"
             variation="primary"
@@ -58,6 +59,7 @@
               :is-folder-share="highlightedFile.isFolder"
               :link="link"
               :modifiable="canEdit"
+              :can-rename="true"
               :password-enforced="passwordEnforced"
               :expiration-date="globalExpirationDate"
               :available-role-options="availableRoleOptions"
@@ -246,13 +248,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) => {
@@ -490,3 +489,9 @@ export default defineComponent({
   }
 })
 </script>
+<style lang="scss">
+.link-name-container {
+  background-color: var(--oc-color-input-bg);
+  border: 1px solid var(--oc-color-input-border);
+}
+</style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/CreateQuickLink.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/CreateQuickLink.vue
index e6246a6d14e..896b98a4ade 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/CreateQuickLink.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/CreateQuickLink.vue
@@ -1,14 +1,18 @@
 <template>
-  <div class="oc-mb-s oc-width-1-1">
+  <div class="oc-mb-s oc-width-1-1 oc-mb-l">
     <h4 class="oc-text-truncate oc-files-file-link-name oc-my-s" v-text="heading" />
     <div class="oc-flex oc-flex-middle oc-flex-between oc-width-1-1 oc-p-s link-name-container">
       <div class="oc-flex oc-flex-middle oc-text-truncate">
         <oc-icon name="link" fill-type="line" />
         <p class="oc-files-file-link-url oc-ml-s oc-text-truncate oc-my-rm" v-text="noLinkLabel" />
       </div>
-      <oc-button v-oc-tooltip="label" :aria-label="label" @click="createQuickLink">
-        <span v-text="createLinkLabel" />
-      </oc-button>
+      <oc-button
+        v-oc-tooltip="createLinkHint"
+        appearance="raw"
+        :aria-label="createLinkHint"
+        @click="createQuickLink"
+        v-text="createLinkLabel"
+      />
     </div>
   </div>
 </template>
@@ -32,7 +36,7 @@ export default {
     heading() {
       return this.$gettext('Quick link')
     },
-    label() {
+    createLinkHint() {
       return this.$gettext('Create quick link')
     },
     createLinkLabel() {
@@ -59,10 +63,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.link-name-container {
-  background-color: var(--oc-color-input-bg);
-  border: 1px solid var(--oc-color-input-border);
-}
-</style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index 9ba4674b5e6..95d982b6841 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -154,6 +154,10 @@ export default {
       type: Array,
       required: true
     },
+    canRename: {
+      type: Boolean,
+      default: false
+    },
     expirationDate: {
       type: Object,
       default: () => ({}),
@@ -209,8 +213,7 @@ export default {
     editOptions() {
       const result = []
 
-      // renaming not allowed for (future) quick links
-      if (this.link) {
+      if (this.canRename) {
         result.push({
           id: 'rename',
           title: this.$gettext('Rename'),
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 4cbd014b77a..088228c7641 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
@@ -11,12 +11,12 @@
         <p class="oc-files-file-link-url oc-ml-s oc-text-truncate oc-my-rm" v-text="link.url" />
       </div>
       <oc-button
-        v-oc-tooltip="copyToClipboardLabel"
+        v-oc-tooltip="copyBtnHint"
         appearance="raw"
-        :aria-label="copyToClipboardLabel"
+        :aria-label="copyBtnHint"
         class="oc-files-public-link-copy-url"
-        @click="copyToClipBoardMethod"
-        v-text="copyLabel"
+        @click="copyLinkToClipboard"
+        v-text="copyBtnLabel"
       />
     </div>
   </div>
@@ -42,32 +42,31 @@ export default {
     linkName() {
       return this.link.name
     },
-    copyLabel() {
+    copyBtnLabel() {
       return this.$gettext('Copy')
     },
+    copyBtnHint() {
+      return this.$gettext('Copy link to clipboard')
+    },
     copiedLabel() {
       return this.$gettext('Copied')
-    },
-    getCopyToClipboardSuccessMsgText() {
-      return this.$gettextInterpolate(
-        this.$gettext('The link "%{linkName}" has been copied to your clipboard.'),
-        {
-          linkName: this.linkName
-        },
-        true
-      )
-    },
-    copyToClipboardLabel() {
-      return this.$gettext('Copy link to clipboard')
     }
   },
   methods: {
     ...mapActions(['showMessage']),
-    copyToClipBoardMethod() {
+    copyLinkToClipboard() {
       copyToClipboard(this.link.url)
       this.clipboardSuccessHandler()
       this.showMessage({
-        title: this.$gettext('Link copied')
+        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() {
@@ -81,28 +80,8 @@ export default {
 }
 </script>
 
-<style scoped>
-.link-name-container {
-  background-color: var(--oc-color-input-bg);
-  border: 1px solid var(--oc-color-input-border);
-}
-
-._clipboard-success-animation {
-  animation-name: _clipboard-success-animation;
-  animation-duration: 0.8s;
-  animation-timing-function: ease-out;
-  animation-fill-mode: both;
-}
-
-@keyframes _clipboard-success-animation {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.9;
-  }
-  100% {
-    opacity: 0;
-  }
+<style lang="scss" scoped>
+.url-copied {
+  color: var(--oc-color-swatch-success-default);
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index cbc9f549303..896f5611aae 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -195,4 +195,23 @@ export default defineComponent({
     padding: 0 10px;
   }
 }
+
+._clipboard-success-animation {
+  animation-name: _clipboard-success-animation;
+  animation-duration: 0.8s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+
+@keyframes _clipboard-success-animation {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 </style>
diff --git a/packages/web-app-files/src/helpers/resources.ts b/packages/web-app-files/src/helpers/resources.ts
index 1d95cd89eb9..83a0b45b3f9 100644
--- a/packages/web-app-files/src/helpers/resources.ts
+++ b/packages/web-app-files/src/helpers/resources.ts
@@ -444,6 +444,14 @@ function _buildLink(link): Share {
     description = role.label
   }
 
+  let oc10QuickLink = false
+  if (link.attributes) {
+    const attributes = JSON.parse(link.attributes) || []
+    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,
@@ -452,8 +460,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),
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Links/PrivateLinkItem.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Links/PrivateLinkItem.spec.js
deleted file mode 100644
index 7ad90106227..00000000000
--- a/packages/web-app-files/tests/unit/components/SideBar/Links/PrivateLinkItem.spec.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import Vuex from 'vuex'
-import GetTextPlugin from 'vue-gettext'
-import DesignSystem from 'owncloud-design-system'
-import { shallowMount, createLocalVue } from '@vue/test-utils'
-import PrivateLinkItem from '@files/src/components/SideBar/PrivateLinkItem.vue'
-
-const localVue = createLocalVue()
-
-localVue.use(Vuex)
-localVue.use(DesignSystem)
-localVue.use(GetTextPlugin, {
-  translations: 'does-not-matter.json',
-  silent: true
-})
-
-describe('PrivateLinkItem', () => {
-  it('should render the copy-to-clipboard button and a success message upon clicking it', () => {
-    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 getTestFolder = () => ({
-  type: 'folder',
-  ownerId: 'marie',
-  ownerDisplayName: 'Marie',
-  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
-  size: '740',
-  name: 'lorem.txt',
-  privateLink: 'some-link'
-})
-
-function createStore() {
-  return new Vuex.Store({
-    getters: {
-      capabilities: function () {
-        return {
-          files: {
-            privateLinks: true
-          }
-        }
-      }
-    },
-    modules: {
-      Files: {
-        namespaced: true,
-        getters: {
-          highlightedFile: () => getTestFolder()
-        }
-      }
-    }
-  })
-}
-
-function getShallowWrapper(store) {
-  return shallowMount(PrivateLinkItem, {
-    localVue,
-    store,
-    stubs: {
-      'copy-to-clipboard-button': true
-    },
-    provide: {
-      displayedItem: {
-        value: getTestFolder()
-      }
-    }
-  })
-}
diff --git a/packages/web-app-files/tests/unit/components/SideBar/PrivateLinkItem.spec.js b/packages/web-app-files/tests/unit/components/SideBar/PrivateLinkItem.spec.js
index 7ad90106227..3335009bf3b 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/PrivateLinkItem.spec.js
+++ b/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,13 +90,10 @@ function createStore() {
   })
 }
 
-function getShallowWrapper(store) {
-  return shallowMount(PrivateLinkItem, {
+function getWrapper(store) {
+  return mount(PrivateLinkItem, {
     localVue,
     store,
-    stubs: {
-      'copy-to-clipboard-button': true
-    },
     provide: {
       displayedItem: {
         value: getTestFolder()
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shared/CopyToClipboardButton.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Shared/CopyToClipboardButton.spec.js
deleted file mode 100644
index 30ee5607dba..00000000000
--- a/packages/web-app-files/tests/unit/components/SideBar/Shared/CopyToClipboardButton.spec.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import Vuex from 'vuex'
-import DesignSystem from 'owncloud-design-system'
-import { createLocalVue, mount, shallowMount } from '@vue/test-utils'
-import CopyToClipboardButton from '@files/src/components/SideBar/Shared/CopyToClipboardButton.vue'
-
-jest.useFakeTimers()
-
-const localVue = createLocalVue()
-localVue.use(Vuex)
-localVue.use(DesignSystem)
-
-const selectors = {
-  copiedIcon: '._clipboard-success-animation'
-}
-
-const mapActions = {
-  showMessage: jest.fn()
-}
-
-describe('CopyToClipboardButton', () => {
-  it('should set provided label as button aria label', () => {
-    const wrapper = getShallowWrapper()
-
-    expect(wrapper.attributes('arialabel')).toBe('test label')
-  })
-
-  describe('copy to clipboard copied icon', () => {
-    it('should be visible if copied is set to true', () => {
-      const wrapper = getShallowWrapper(true)
-
-      expect(wrapper.find(selectors.copiedIcon).exists()).toBeTruthy()
-    })
-
-    it('should not be visible if copied is set to false', () => {
-      const wrapper = getShallowWrapper()
-
-      expect(wrapper.find(selectors.copiedIcon).exists()).toBeFalsy()
-    })
-  })
-  describe('when the button is clicked', () => {
-    const spyShowMessage = jest.spyOn(mapActions, 'showMessage')
-    const windowSpy = jest.spyOn(window, 'prompt').mockImplementation()
-    const wrapper = getMountedWrapper()
-
-    it('should copy the value to the clipboard and trigger the showMessage store action', async () => {
-      expect(spyShowMessage).not.toHaveBeenCalled()
-      expect(windowSpy).not.toHaveBeenCalled()
-
-      await wrapper.trigger('click')
-
-      expect(spyShowMessage).toHaveBeenCalledTimes(1)
-      expect(windowSpy).toHaveBeenCalledTimes(1)
-      expect(windowSpy).toHaveBeenCalledWith('Copy to clipboard: Ctrl+C, Enter', 'test string')
-      expect(wrapper.find(selectors.copiedIcon).exists()).toBeTruthy()
-    })
-
-    it('should set copied to true and then to false after a timeout', () => {
-      // constant set in wrapper component
-      const clipboardSuccessHandlerTimeout = 550
-      expect(wrapper.vm.copied).toBeTruthy()
-      expect(wrapper.find(selectors.copiedIcon).exists()).toBeTruthy()
-
-      jest.advanceTimersByTime(clipboardSuccessHandlerTimeout)
-
-      wrapper.vm.$nextTick(() => {
-        expect(wrapper.vm.copied).toBeFalsy()
-        expect(wrapper.find(selectors.copiedIcon).exists()).toBeFalsy()
-      })
-    })
-  })
-})
-
-function createStore() {
-  return new Vuex.Store({
-    actions: mapActions,
-    commit: jest.fn(),
-    dispatch: jest.fn()
-  })
-}
-
-function getMountOptions({
-  stubs = {
-    'oc-icon': true,
-    'oc-button': true
-  }
-}) {
-  return {
-    localVue,
-    store: createStore(),
-    propsData: {
-      value: 'test string',
-      label: 'test label',
-      successMsgTitle: 'test success',
-      successMsgText: 'test success text'
-    },
-    stubs: stubs,
-    directives: {
-      'oc-tooltip': jest.fn()
-    }
-  }
-}
-
-function getShallowWrapper(copied = false) {
-  return shallowMount(CopyToClipboardButton, {
-    ...getMountOptions({
-      copied: copied,
-      stubs: {
-        'oc-icon': true,
-        'oc-button': true
-      }
-    }),
-    data() {
-      return {
-        copied: copied
-      }
-    }
-  })
-}
-
-function getMountedWrapper() {
-  return mount(
-    CopyToClipboardButton,
-    getMountOptions({
-      stubs: {
-        'oc-icon': true,
-        'oc-button': false
-      }
-    })
-  )
-}
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.js
index 13db93bad86..d55c68b77c7 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.js
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.js
@@ -50,6 +50,7 @@ function getShallowMountedWrapper(link, expireDateEnforced = false, modifiable =
   return shallowMount(DetailsAndEdit, {
     propsData: {
       availableRoleOptions,
+      canRename: true,
       expirationDate: {
         enforced: expireDateEnforced,
         default: null,
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/NameAndCopy.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/NameAndCopy.spec.js
index 5f0aa0b63bf..77f056bf269 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/NameAndCopy.spec.js
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/NameAndCopy.spec.js
@@ -1,36 +1,83 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils'
+import { createLocalVue, mount } from '@vue/test-utils'
+import Vuex from 'vuex'
 import GetTextPlugin from 'vue-gettext'
 import DesignSystem from 'owncloud-design-system'
 import NameAndCopy from '@files/src/components/SideBar/Shares/Links/NameAndCopy.vue'
 
+jest.useFakeTimers()
+
 const localVue = createLocalVue()
+
+localVue.use(Vuex)
 localVue.use(DesignSystem)
 localVue.use(GetTextPlugin, {
   translations: 'does-not-matter.json',
   silent: true
 })
 
+const mapActions = {
+  showMessage: jest.fn()
+}
+
 const exampleLink = {
   name: 'Example link',
   url: 'https://some-url.com/abc'
 }
 
 describe('NameAndCopy', () => {
-  it('should show link info component', () => {
-    const wrapper = getShallowWrapper()
+  it('should show link info component including a copy-to-clipboard button', () => {
+    const wrapper = getWrapper()
     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 = getWrapper(store)
+
+    expect(spyShowMessage).not.toHaveBeenCalled()
+    expect(windowSpy).not.toHaveBeenCalled()
+
+    await wrapper.find('.oc-files-public-link-copy-url').trigger('click')
+
+    expect(wrapper).toMatchSnapshot()
+
+    expect(spyShowMessage).toHaveBeenCalledTimes(1)
+    expect(windowSpy).toHaveBeenCalledTimes(1)
+    expect(windowSpy).toHaveBeenCalledWith('Copy to clipboard: Ctrl+C, Enter', exampleLink.url)
+
+    jest.advanceTimersByTime(550)
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
 })
 
-function getShallowWrapper() {
-  return shallowMount(NameAndCopy, {
+function createStore() {
+  return new Vuex.Store({
+    actions: mapActions,
+    commit: jest.fn(),
+    dispatch: jest.fn(),
+    getters: {
+      capabilities: function () {
+        return {
+          files: {
+            privateLinks: true
+          }
+        }
+      }
+    }
+  })
+}
+
+function getWrapper(store) {
+  return mount(NameAndCopy, {
     localVue,
+    store,
     propsData: {
       link: exampleLink
-    },
-    stubs: {
-      'oc-icon': true,
-      'copy-to-clipboard-button': true
     }
   })
 }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/NameAndCopy.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/NameAndCopy.spec.js.snap
index 5f5df96b485..9db27791d72 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/NameAndCopy.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/NameAndCopy.spec.js.snap
@@ -1,14 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NameAndCopy should show link info component 1`] = `
+exports[`NameAndCopy should show link info component including a copy-to-clipboard button 1`] = `
 <div class="oc-mb-s oc-width-1-1">
   <h4 class="oc-text-truncate oc-files-file-link-name oc-my-s">Example link</h4>
   <div class="oc-flex oc-flex-middle oc-flex-between oc-width-1-1 oc-p-s link-name-container">
-    <div class="oc-flex oc-flex-middle oc-text-truncate">
-      <oc-icon-stub name="link" filltype="line" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+    <div class="oc-flex oc-flex-middle oc-text-truncate"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span>
       <p class="oc-files-file-link-url oc-ml-s oc-text-truncate oc-my-rm">https://some-url.com/abc</p>
-    </div>
-    <copy-to-clipboard-button-stub text="" value="https://some-url.com/abc" label="Copy link to clipboard" successmsgtitle="Link copied" successmsgtext="The link &quot;Example link&quot; has been copied to your clipboard." class="oc-files-public-link-copy-url"></copy-to-clipboard-button-stub>
+    </div> <button aria-label="Copy link to clipboard" type="button" class="oc-files-public-link-copy-url oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">Copy</button>
+  </div>
+</div>
+`;
+
+exports[`NameAndCopy upon clicking it should copy the private link to the clipboard button, render a success message and change icon for half a second 1`] = `
+<div class="oc-mb-s oc-width-1-1">
+  <h4 class="oc-text-truncate oc-files-file-link-name oc-my-s">Example link</h4>
+  <div class="oc-flex oc-flex-middle oc-flex-between oc-width-1-1 oc-p-s link-name-container">
+    <div class="oc-flex oc-flex-middle oc-text-truncate"><span class="oc-icon oc-icon-m oc-icon-success"><!----></span>
+      <p class="oc-files-file-link-url url-copied oc-ml-s oc-my-rm">Copied</p>
+    </div> <button aria-label="Copy link to clipboard" type="button" class="oc-files-public-link-copy-url oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">Copy</button>
+  </div>
+</div>
+`;
+
+exports[`NameAndCopy upon clicking it should copy the private link to the clipboard button, render a success message and change icon for half a second 2`] = `
+<div class="oc-mb-s oc-width-1-1">
+  <h4 class="oc-text-truncate oc-files-file-link-name oc-my-s">Example link</h4>
+  <div class="oc-flex oc-flex-middle oc-flex-between oc-width-1-1 oc-p-s link-name-container">
+    <div class="oc-flex oc-flex-middle oc-text-truncate"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span>
+      <p class="oc-files-file-link-url oc-ml-s oc-text-truncate oc-my-rm">https://some-url.com/abc</p>
+    </div> <button aria-label="Copy link to clipboard" type="button" class="oc-files-public-link-copy-url oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">Copy</button>
   </div>
 </div>
 `;
diff --git a/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/PrivateLinkItem.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/PrivateLinkItem.spec.js.snap
new file mode 100644
index 00000000000..2b1ba9ed963
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/PrivateLinkItem.spec.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PrivateLinkItem should render a button 1`] = `<button aria-label="Copy private link to clipboard" type="button" class="oc-files-private-link-copy-url oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><span>Private link</span> <span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>`;
+
+exports[`PrivateLinkItem upon clicking it should copy the private link to the clipboard button, render a success message and change icon for half a second 1`] = `<button aria-label="Copy private link to clipboard" type="button" class="oc-files-private-link-copy-url oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-success oc-button-success-raw"><span>Private link</span> <span class="_clipboard-success-animation oc-icon oc-icon-m oc-icon-passive"><!----></span></button>`;
+
+exports[`PrivateLinkItem upon clicking it should copy the private link to the clipboard button, render a success message and change icon for half a second 2`] = `<button aria-label="Copy private link to clipboard" type="button" class="oc-files-private-link-copy-url oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><span>Private link</span> <span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>`;

From ad1f15d05a6bebfcd95926e396415d12421b3aa5 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 2 May 2022 15:41:34 +0200
Subject: [PATCH 4/6] Add graph env var to dockerized oCIS middleware


From 72fba4481b9d3b9592ed064b0f39d8503518df66 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 2 May 2022 16:08:06 +0200
Subject: [PATCH 5/6] Add toggles to sidebar sharee/link lists

---
 .../components/SideBar/Shares/FileLinks.vue   |  28 ++++-
 .../components/SideBar/Shares/FileShares.vue  | 105 ++++++++++--------
 .../SideBar/Shares/FileShares.spec.js         |  34 +++---
 .../__snapshots__/FileShares.spec.js.snap     |   8 +-
 packages/web-runtime/src/store/config.js      |   7 +-
 5 files changed, 111 insertions(+), 71 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
index ae0a574b6f8..3c2b6c6c4cc 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
@@ -49,7 +49,7 @@
         />
         <oc-list v-if="links.length" class="oc-overflow-hidden oc-my-m">
           <li
-            v-for="link in links"
+            v-for="link in displayLinks"
             :key="link.key"
             class="oc-py-s"
             :data-testid="`files-link-id-${link.id}`"
@@ -68,6 +68,13 @@
             />
           </li>
         </oc-list>
+        <div v-if="links.length > 3" class="oc-flex oc-flex-center">
+          <oc-button
+            appearance="raw"
+            @click="toggleLinkListCollapsed"
+            v-text="collapseButtonTitle"
+          />
+        </div>
       </template>
     </div>
     <div
@@ -123,7 +130,9 @@ export default defineComponent({
       store.getters.getToken
     )
 
-    return { graphClient, hasSpaces: useCapabilitySpacesEnabled() }
+    const linkListCollapsed = !store.getters.configuration.sidebar.shares.showAllOnLoad
+
+    return { graphClient, hasSpaces: useCapabilitySpacesEnabled(), linkListCollapsed }
   },
   data() {
     return {
@@ -147,6 +156,10 @@ export default defineComponent({
       return this.$gettext('Add link')
     },
 
+    collapseButtonTitle() {
+      return this.linkListCollapsed ? this.$gettext('Show more') : this.$gettext('Show less')
+    },
+
     defaultNewLinkName() {
       return this.capabilities?.files_sharing?.public?.defaultPublicLinkShareName || ''
     },
@@ -260,6 +273,13 @@ export default defineComponent({
         })
     },
 
+    displayLinks() {
+      if (this.links.length > 3 && this.linkListCollapsed) {
+        return this.links.slice(0, 3)
+      }
+      return this.links
+    },
+
     indirectLinks() {
       const allShares = []
       const parentPaths = getParentPaths(this.highlightedFile.path, false)
@@ -317,6 +337,10 @@ export default defineComponent({
     ]),
     ...mapActions(['showMessage', 'createModal', 'hideModal']),
 
+    toggleLinkListCollapsed() {
+      this.linkListCollapsed = !this.linkListCollapsed
+    },
+
     reloadLinks() {
       this.loadCurrentFileOutgoingShares({
         client: this.$client,
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
index 21b8ca223d5..000d4dce400 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -12,31 +12,15 @@
       />
       <div v-if="hasSharees" class="avatars-wrapper oc-flex oc-flex-middle oc-flex-between">
         <h4 class="oc-text-initial oc-text-bold oc-my-rm" v-text="sharedWithLabel" />
-        <oc-button
-          v-oc-tooltip="sharedWithTooltip"
-          data-testid="collaborators-show-people"
-          appearance="raw"
-          :aria-label="sharedWithTooltip"
-          @click="toggleShareeList"
-        >
-          <oc-avatars
-            v-if="!showShareesList"
-            :items="collaboratorsAvatar"
-            :stacked="true"
-            :is-tooltip-displayed="false"
-            class="sharee-avatars"
-          />
-          <oc-icon v-else name="arrow-up-s" />
-        </oc-button>
       </div>
-      <template v-if="showShareesList && hasSharees">
+      <template v-if="hasSharees">
         <ul
           id="files-collaborators-list"
           class="oc-list oc-list-divider oc-overflow-hidden"
           :class="{ 'oc-mb-l': showSpaceMembers, 'oc-m-rm': !showSpaceMembers }"
           :aria-label="$gettext('Share receivers')"
         >
-          <li v-for="collaborator in collaborators" :key="collaborator.key">
+          <li v-for="collaborator in displayCollaborators" :key="collaborator.key">
             <collaborator-list-item
               :share="collaborator"
               :modifiable="!collaborator.indirect"
@@ -45,6 +29,13 @@
             />
           </li>
         </ul>
+        <div v-if="showShareToggle" class="oc-flex oc-flex-center">
+          <oc-button
+            appearance="raw"
+            @click="toggleShareesListCollapsed"
+            v-text="collapseButtonTitle"
+          />
+        </div>
       </template>
       <template v-if="showSpaceMembers">
         <h4 class="oc-text-initial oc-text-bold oc-my-s" v-text="spaceMemberLabel" />
@@ -53,30 +44,37 @@
           class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm"
           :aria-label="spaceMemberLabel"
         >
-          <li v-for="collaborator in spaceMembers" :key="collaborator.key">
+          <li v-for="collaborator in displaySpaceMembers" :key="collaborator.key">
             <collaborator-list-item :share="collaborator" :modifiable="false" />
           </li>
         </ul>
+        <div v-if="showShareToggle" class="oc-flex oc-flex-center">
+          <oc-button
+            appearance="raw"
+            @click="toggleShareesListCollapsed"
+            v-text="collapseButtonTitle"
+          />
+        </div>
       </template>
     </template>
   </div>
 </template>
 
 <script lang="ts">
+import { dirname } from 'path'
+import { useTask } from 'vue-concurrency'
 import { mapGetters, mapActions, mapState } from 'vuex'
 import { watch, computed } from '@vue/composition-api'
 import { useStore, useDebouncedRef } from 'web-pkg/src/composables'
+import { clientService } from 'web-pkg/src/services'
+import { createLocationSpaces, isLocationSpacesActive } from '../../../router'
 import { textUtils } from '../../../helpers/textUtils'
 import { getParentPaths } from '../../../helpers/path'
-import { dirname } from 'path'
-import InviteCollaboratorForm from './Collaborators/InviteCollaborator/InviteCollaboratorForm.vue'
-import CollaboratorListItem from './Collaborators/ListItem.vue'
-import { ShareTypes } from '../../../helpers/share'
-import { clientService } from 'web-pkg/src/services'
-import { useTask } from 'vue-concurrency'
 import { buildSpace, buildSpaceShare } from '../../../helpers/resources'
+import { ShareTypes } from '../../../helpers/share'
 import { sortSpaceMembers } from '../../../helpers/space'
-import { createLocationSpaces, isLocationSpacesActive } from '../../../router'
+import InviteCollaboratorForm from './Collaborators/InviteCollaborator/InviteCollaboratorForm.vue'
+import CollaboratorListItem from './Collaborators/ListItem.vue'
 
 export default {
   name: 'FileShares',
@@ -133,12 +131,17 @@ export default {
       })
     })
 
-    return { sharesLoading, loadSpaceTask, loadSpaceMembersTask }
+    const sharesListCollapsed = !store.getters.configuration.sidebar.shares.showAllOnLoad
+
+    return {
+      loadSpaceTask,
+      loadSpaceMembersTask,
+      sharesListCollapsed,
+      sharesLoading
+    }
   },
   data() {
     return {
-      currentShare: null,
-      showShareesList: true,
       currentSpace: null,
       spaceMembers: []
     }
@@ -155,23 +158,12 @@ export default {
       return this.$gettext('Space members')
     },
 
-    hasSharees() {
-      return this.collaboratorsAvatar.length > 0
-    },
-
-    sharedWithTooltip() {
-      return this.showShareesList
-        ? this.$gettext('Collapse list of invited people')
-        : this.$gettext('Show all invited people')
+    collapseButtonTitle() {
+      return this.sharesListCollapsed ? this.$gettext('Show more') : this.$gettext('Show less')
     },
 
-    collaboratorsAvatar() {
-      return this.collaborators.map((c) => {
-        return {
-          ...c.collaborator,
-          shareType: c.shareType
-        }
-      })
+    hasSharees() {
+      return this.collaborators.length > 0
     },
 
     /**
@@ -221,6 +213,24 @@ export default {
         })
     },
 
+    displayCollaborators() {
+      if (this.collaborators.length > 3 && this.sharesListCollapsed) {
+        return this.collaborators.slice(0, 3)
+      }
+      return this.collaborators
+    },
+
+    displaySpaceMembers() {
+      if (this.spaceMembers.length > 3 && this.sharesListCollapsed) {
+        return this.spaceMembers.slice(0, 3)
+      }
+      return this.spaceMembers
+    },
+
+    showShareToggle() {
+      return this.spaceMembers.length > 3 || this.collaborators.length > 3
+    },
+
     indirectOutgoingShares() {
       const allShares = []
       const parentPaths = getParentPaths(this.highlightedFile.path, false)
@@ -284,7 +294,6 @@ export default {
       handler: function (newItem, oldItem) {
         if (oldItem !== newItem) {
           this.$_reloadShares()
-          this.showShareesList = true
         }
       },
       immediate: true
@@ -307,6 +316,9 @@ export default {
       'loadIncomingShares'
     ]),
     ...mapActions(['createModal', 'hideModal', 'showMessage']),
+    toggleShareesListCollapsed() {
+      this.sharesListCollapsed = !this.sharesListCollapsed
+    },
     $_isCollaboratorShare(collaborator) {
       return ShareTypes.containsAnyValue(ShareTypes.authenticated, [collaborator.shareType])
     },
@@ -335,9 +347,6 @@ export default {
 
       return c1UserShare ? -1 : 1
     },
-    toggleShareeList() {
-      this.showShareesList = !this.showShareesList
-    },
 
     $_ocCollaborators_deleteShare_trigger(share) {
       const modal = {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js
index 8018b002caf..9e9d087de95 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js
@@ -1,14 +1,15 @@
-import FileShares from '@files/src/components/SideBar/Shares/FileShares.vue'
 import { createLocalVue, mount, shallowMount } from '@vue/test-utils'
+import mockAxios from 'jest-mock-axios'
+import VueCompositionAPI from '@vue/composition-api/dist/vue-composition-api'
 import GetTextPlugin from 'vue-gettext'
 import Vuex from 'vuex'
 import DesignSystem from 'owncloud-design-system'
+import stubs from '@/tests/unit/stubs'
 import Users from '@/__fixtures__/users'
 import Collaborators from '@/__fixtures__/collaborators'
-import mockAxios from 'jest-mock-axios'
 import { spaceRoleManager } from '../../../../../src/helpers/share'
-import VueCompositionAPI from '@vue/composition-api/dist/vue-composition-api'
 import * as reactivities from 'web-pkg/src/composables/reactivity'
+import FileShares from '@files/src/components/SideBar/Shares/FileShares.vue'
 
 const localVue = createLocalVue()
 localVue.use(DesignSystem)
@@ -248,7 +249,12 @@ const storeOptions = (data) => {
       getToken: jest.fn(() => 'GFwHKXdsMgoFwt'),
       configuration: jest.fn(() => ({
         options: {
-          contextHelpers: true
+          contextHelpers: true,
+          sidebar: {
+            shares: {
+              showAllOnLoad: false
+            }
+          }
         },
         server: 'http://example.com/'
       })),
@@ -275,10 +281,17 @@ const storeOptions = (data) => {
   }
 }
 
-function getMountedWrapper(data, loading = false) {
+function getMountedWrapper(data) {
   return mount(FileShares, {
     localVue,
+    setup: () => ({
+      spaceMembers: []
+    }),
     store: createStore(data),
+    stubs: {
+      ...stubs,
+      'oc-button': false
+    },
     mocks: {
       $route: {
         params: { storageId: 1 }
@@ -291,12 +304,6 @@ function getMountedWrapper(data, loading = false) {
           }
         }
       }
-    },
-    stubs: {
-      'oc-button': false,
-      'oc-icon': true,
-      'oc-spinner': true,
-      'avatar-image': true
     }
   })
 }
@@ -308,9 +315,8 @@ function getShallowMountedWrapper(data, loading = false) {
     localVue,
     store: createStore(data),
     stubs: {
-      'oc-button': true,
-      'oc-icon': true,
-      'oc-spinner': true
+      ...stubs,
+      'oc-button': true
     },
     mocks: {
       $route: {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.js.snap
index 38cae3fa520..b9d723d238c 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.js.snap
@@ -26,9 +26,6 @@ exports[`FileShares if there are collaborators present correctly passes the shar
   <invite-collaborator-form-stub savebuttonlabel="Share" class="oc-my-s"></invite-collaborator-form-stub>
   <div class="avatars-wrapper oc-flex oc-flex-middle oc-flex-between">
     <h4 class="oc-text-initial oc-text-bold oc-my-rm">Shared with</h4>
-    <oc-button-stub type="button" size="medium" arialabel="Collapse list of invited people" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" data-testid="collaborators-show-people">
-      <oc-icon-stub name="arrow-up-s" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-    </oc-button-stub>
   </div>
   <ul id="files-collaborators-list" aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
     <li>
@@ -36,6 +33,7 @@ exports[`FileShares if there are collaborators present correctly passes the shar
     </li>
   </ul>
   <!---->
+  <!---->
 </div>
 `;
 
@@ -45,9 +43,6 @@ exports[`FileShares if there are collaborators present renders sharedWithLabel a
   <invite-collaborator-form-stub savebuttonlabel="Share" class="oc-my-s"></invite-collaborator-form-stub>
   <div class="avatars-wrapper oc-flex oc-flex-middle oc-flex-between">
     <h4 class="oc-text-initial oc-text-bold oc-my-rm">Shared with</h4>
-    <oc-button-stub type="button" size="medium" arialabel="Collapse list of invited people" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" data-testid="collaborators-show-people">
-      <oc-icon-stub name="arrow-up-s" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-    </oc-button-stub>
   </div>
   <ul id="files-collaborators-list" aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
     <li>
@@ -58,6 +53,7 @@ exports[`FileShares if there are collaborators present renders sharedWithLabel a
     </li>
   </ul>
   <!---->
+  <!---->
 </div>
 `;
 
diff --git a/packages/web-runtime/src/store/config.js b/packages/web-runtime/src/store/config.js
index 98ff7961ef3..036ae090bad 100644
--- a/packages/web-runtime/src/store/config.js
+++ b/packages/web-runtime/src/store/config.js
@@ -39,9 +39,14 @@ const state = {
   },
   options: {
     defaultExtension: 'files',
-    homeFolder: '',
     disablePreviews: false,
     displayResourcesLazy: true,
+    homeFolder: '',
+    sidebar: {
+      shares: {
+        showAllOnLoad: false
+      }
+    },
     previewFileExtensions: [],
     sharingRecipientsPerPage: 200
   }

From 2e763c754b2456e68e1c10dbc188e2fc56496622 Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Mon, 2 May 2022 16:49:35 +0200
Subject: [PATCH 6/6] bump sdk fix currentRole in createForm add oc10 docker
 dev config to enable quicklinks fix resource quicklink detection

Add SDK bump changelog && fix fault accessing of sidebar config option

get rid uf obsolete collaborator unit test

fix oc10 resource quicklink attribute detection

fix failing acceptance tests
---
 changelog/unreleased/enhancement-update-sdk   | 15 ++++++++++
 dev/docker/oc10.config.php                    |  1 +
 dev/docker/oc10.web.config.json               |  7 ++++-
 dev/docker/ocis.web.config.json               |  7 ++++-
 .../components/SideBar/Shares/FileLinks.vue   |  2 +-
 .../components/SideBar/Shares/FileShares.vue  |  2 +-
 .../SideBar/Shares/Links/CreateForm.vue       |  2 +-
 .../web-app-files/src/helpers/resources.ts    | 19 ++++++++-----
 .../SideBar/Shares/FileShares.spec.js         | 14 ----------
 .../features/webUIFilesList/fileList.feature  |  4 +--
 .../publicLinkCreate.feature                  |  2 +-
 .../stepDefinitions/publicLinkContext.js      |  2 +-
 .../config-oc10-integration-app-oauth.json    |  7 ++++-
 tests/drone/config-oc10-oauth.json            |  7 ++++-
 tests/drone/config-oc10-openid.json           |  7 ++++-
 tests/drone/config-ocis.json                  |  7 ++++-
 yarn.lock                                     | 28 ++-----------------
 17 files changed, 73 insertions(+), 60 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-update-sdk

diff --git a/changelog/unreleased/enhancement-update-sdk b/changelog/unreleased/enhancement-update-sdk
new file mode 100644
index 00000000000..428fe4b6c7b
--- /dev/null
+++ b/changelog/unreleased/enhancement-update-sdk
@@ -0,0 +1,15 @@
+Enhancement: Update SDK
+
+We've updated the ownCloud SDK to version 3.0.0-alpha.7.
+
+- Change - Pass full trash bin path to methods of FilesTrash class: https://github.com/owncloud/owncloud-sdk/pull/1021
+- Enhancement - Enforce share_type guest if applies: https://github.com/owncloud/owncloud-sdk/pull/1046
+- Enhancement - Create quicklink: https://github.com/owncloud/owncloud-sdk/pull/1041
+- Enhancement - Replace deprecated String.prototype.substr(): https://github.com/owncloud/owncloud-sdk/pull/1035
+- Enhancement - Add blob resolveType: https://github.com/owncloud/owncloud-sdk/pull/1028
+- Enhancement - Adjust share management to properly work with spaces: https://github.com/owncloud/owncloud-sdk/pull/1013
+- Bugfix - Always add X-Request-ID: https://github.com/owncloud/owncloud-sdk/pull/1016
+- Bugfix - Always add X-Requested-With header: https://github.com/owncloud/owncloud-sdk/pull/1020
+
+https://github.com/owncloud/web/pull/6820
+https://github.com/owncloud/owncloud-sdk/releases/tag/v3.0.0-alpha.7
diff --git a/dev/docker/oc10.config.php b/dev/docker/oc10.config.php
index 5edf59fc444..2eeaa57ca8b 100644
--- a/dev/docker/oc10.config.php
+++ b/dev/docker/oc10.config.php
@@ -2,5 +2,6 @@
 $CONFIG = [
     'web.baseUrl' => 'http://host.docker.internal:8080/index.php/apps/web',
     'web.rewriteLinks' => true,
+    'sharing.showPublicLinkQuickAction' => true,
 ];
 
diff --git a/dev/docker/oc10.web.config.json b/dev/docker/oc10.web.config.json
index 7e5874139ce..74159323c36 100644
--- a/dev/docker/oc10.web.config.json
+++ b/dev/docker/oc10.web.config.json
@@ -14,7 +14,12 @@
   ],
   "options": {
     "disablePreviews": true,
-    "displayResourcesLazy": false
+    "displayResourcesLazy": false,
+    "sidebar": {
+      "shares": {
+        "showAllOnLoad": true
+      }
+    }
   },
   "applications": [
     {
diff --git a/dev/docker/ocis.web.config.json b/dev/docker/ocis.web.config.json
index 1ec9b4d0de7..46f29d2d070 100644
--- a/dev/docker/ocis.web.config.json
+++ b/dev/docker/ocis.web.config.json
@@ -11,7 +11,12 @@
   },
   "options": {
     "disablePreviews": true,
-    "displayResourcesLazy": false
+    "displayResourcesLazy": false,
+    "sidebar": {
+      "shares": {
+        "showAllOnLoad": true
+      }
+    }
   },
   "apps": [
     "files",
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
index 3c2b6c6c4cc..cfc8cd0e0c3 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
@@ -130,7 +130,7 @@ export default defineComponent({
       store.getters.getToken
     )
 
-    const linkListCollapsed = !store.getters.configuration.sidebar.shares.showAllOnLoad
+    const linkListCollapsed = !store.getters.configuration.options.sidebar.shares.showAllOnLoad
 
     return { graphClient, hasSpaces: useCapabilitySpacesEnabled(), linkListCollapsed }
   },
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
index 000d4dce400..9315f9d39be 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -131,7 +131,7 @@ export default {
       })
     })
 
-    const sharesListCollapsed = !store.getters.configuration.sidebar.shares.showAllOnLoad
+    const sharesListCollapsed = !store.getters.configuration.options.sidebar.shares.showAllOnLoad
 
     return {
       loadSpaceTask,
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/CreateForm.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/CreateForm.vue
index 7aa0058ffe9..71a2698fb31 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/CreateForm.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/CreateForm.vue
@@ -182,7 +182,7 @@ export default {
 
     passwordEnforcedForRole() {
       const currentRole = this.availableRoleOptions.find(({ role }) => {
-        return this.link.role.label === role.label
+        return this.link.role.name === role.name
       })
 
       const canRead = currentRole.role.hasPermission(SharePermissions.read)
diff --git a/packages/web-app-files/src/helpers/resources.ts b/packages/web-app-files/src/helpers/resources.ts
index 83a0b45b3f9..27f39db9d7b 100644
--- a/packages/web-app-files/src/helpers/resources.ts
+++ b/packages/web-app-files/src/helpers/resources.ts
@@ -444,13 +444,18 @@ function _buildLink(link): Share {
     description = role.label
   }
 
-  let oc10QuickLink = false
-  if (link.attributes) {
-    const attributes = JSON.parse(link.attributes) || []
-    oc10QuickLink = attributes.find((attr) => attr.key === 'isQuickLink')?.enabled
-  }
-  const ocisQuickLink = link.quicklink === 'true'
-  const quicklink = oc10QuickLink || ocisQuickLink
+  const quicklinkOc10 = ((): boolean => {
+    if (typeof link.attributes !== 'string') {
+      return false
+    }
+
+    return (
+      JSON.parse(link.attributes || '[]').find((attr) => attr.key === 'isQuickLink')?.enabled ===
+      'true'
+    )
+  })()
+  const quicklinkOcis = link.quicklink === 'true'
+  const quicklink = quicklinkOc10 || quicklinkOcis
 
   return {
     shareType: parseInt(link.share_type),
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js
index 9e9d087de95..b0f82a90f48 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js
@@ -26,7 +26,6 @@ const user = Users.alice
 const collaborators = [Collaborators[0], Collaborators[1]]
 
 const selectors = {
-  showCollaboratorButton: 'button[data-testid="collaborators-show-people"]',
   firstCollaboratorListItem: `div[data-testid="collaborator-user-item-${Collaborators[0].collaborator.name}"]`
 }
 
@@ -78,19 +77,6 @@ describe('FileShares', () => {
       expect(wrapper).toMatchSnapshot()
     })
 
-    it('can toggle the collaborators list by clicking the avatar wrapper button', async () => {
-      const wrapper = getMountedWrapper({
-        user,
-        outgoingCollaborators: collaborators
-      })
-      const button = wrapper.find(selectors.showCollaboratorButton)
-      expect(wrapper.vm.showShareesList).toBe(true)
-      await button.trigger('click')
-      expect(wrapper.vm.showShareesList).toBe(false)
-      await button.trigger('click')
-      expect(wrapper.vm.showShareesList).toBe(true)
-    })
-
     it('reacts on delete events by collaborator list items', async () => {
       const spyOnCollaboratorDeleteTrigger = jest
         .spyOn(FileShares.methods, '$_ocCollaborators_deleteShare_trigger')
diff --git a/tests/acceptance/features/webUIFilesList/fileList.feature b/tests/acceptance/features/webUIFilesList/fileList.feature
index 24d8b0b6fdf..f77533e169e 100644
--- a/tests/acceptance/features/webUIFilesList/fileList.feature
+++ b/tests/acceptance/features/webUIFilesList/fileList.feature
@@ -25,9 +25,9 @@ Feature: User can view files inside a folder
     Then there should be no resources listed on the webUI
 
 
-  Scenario: All files list displays public link quick action
+  Scenario: All files list displays quicklink quick action
     When the user browses to the files page
-    Then quick action "public link" should be displayed on the webUI
+    Then quick action "quicklink" should be displayed on the webUI
     And the sidebar should match the default baseline
 
   Scenario: files are not selected when the user logs in
diff --git a/tests/acceptance/features/webUISharingPublicBasic/publicLinkCreate.feature b/tests/acceptance/features/webUISharingPublicBasic/publicLinkCreate.feature
index df14c9806e6..61c1717c4e0 100644
--- a/tests/acceptance/features/webUISharingPublicBasic/publicLinkCreate.feature
+++ b/tests/acceptance/features/webUISharingPublicBasic/publicLinkCreate.feature
@@ -179,7 +179,7 @@ Feature: Create public link shares
       | uid_owner   | Alice             |
       | permissions | read              |
       | path        | /simple-folder    |
-      | name        | Quick action link |
+      | name        | Quicklink |
     And the following success message should be displayed on the webUI
       """
       Quicklink copied into your clipboard
diff --git a/tests/acceptance/stepDefinitions/publicLinkContext.js b/tests/acceptance/stepDefinitions/publicLinkContext.js
index 5e39a27d3af..72a69e1524a 100644
--- a/tests/acceptance/stepDefinitions/publicLinkContext.js
+++ b/tests/acceptance/stepDefinitions/publicLinkContext.js
@@ -306,6 +306,6 @@ Then(
 When(
   'the user creates a public link via quick action for resource {string} using the webUI',
   function (resource) {
-    return client.page.FilesPageElement.filesList().useQuickAction(resource, 'public link')
+    return client.page.FilesPageElement.filesList().useQuickAction(resource, 'quicklink')
   }
 )
diff --git a/tests/drone/config-oc10-integration-app-oauth.json b/tests/drone/config-oc10-integration-app-oauth.json
index ebbdef476f5..aedf035a6ee 100644
--- a/tests/drone/config-oc10-integration-app-oauth.json
+++ b/tests/drone/config-oc10-integration-app-oauth.json
@@ -15,7 +15,12 @@
   ],
   "options": {
     "disablePreviews": true,
-    "displayResourcesLazy": false
+    "displayResourcesLazy": false,
+    "sidebar": {
+      "shares": {
+        "showAllOnLoad": true
+      }
+    }
   },
   "applications": [
     {
diff --git a/tests/drone/config-oc10-oauth.json b/tests/drone/config-oc10-oauth.json
index 283c47abac8..0b31295d186 100644
--- a/tests/drone/config-oc10-oauth.json
+++ b/tests/drone/config-oc10-oauth.json
@@ -8,7 +8,12 @@
     "authUrl": "http://owncloud/index.php/apps/oauth2/authorize"
   },
   "options": {
-    "displayResourcesLazy": false
+    "displayResourcesLazy": false,
+    "sidebar": {
+      "shares": {
+        "showAllOnLoad": true
+      }
+    }
   },
   "apps": [
     "files",
diff --git a/tests/drone/config-oc10-openid.json b/tests/drone/config-oc10-openid.json
index fc8a6458127..06dd85e7d3f 100644
--- a/tests/drone/config-oc10-openid.json
+++ b/tests/drone/config-oc10-openid.json
@@ -10,7 +10,12 @@
     "scope": "openid profile email"
   },
   "options": {
-    "displayResourcesLazy": false
+    "displayResourcesLazy": false,
+    "sidebar": {
+      "shares": {
+        "showAllOnLoad": true
+      }
+    }
   },
   "apps": [
     "files",
diff --git a/tests/drone/config-ocis.json b/tests/drone/config-ocis.json
index 006c3c247af..aa427496855 100644
--- a/tests/drone/config-ocis.json
+++ b/tests/drone/config-ocis.json
@@ -11,7 +11,12 @@
   },
   "options": {
     "disablePreviews": true,
-    "displayResourcesLazy": false
+    "displayResourcesLazy": false,
+    "sidebar": {
+      "shares": {
+        "showAllOnLoad": true
+      }
+    }
   },
   "apps": [
     "files",
diff --git a/yarn.lock b/yarn.lock
index a38066ed745..5ad5b910ccd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2279,17 +2279,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/glob@npm:^7.1.1":
-  version: 7.1.3
-  resolution: "@types/glob@npm:7.1.3"
-  dependencies:
-    "@types/minimatch": "*"
-    "@types/node": "*"
-  checksum: e0eef12285f548f15d887145590594a04ccce7f7e645fb047cbac18cb093f25d507ffbcc725312294c224bb78cf980fce33e5807de8d6f8a868b4186253499d4
-  languageName: node
-  linkType: hard
-
-"@types/glob@npm:^7.1.3, @types/glob@npm:^7.2.0":
+"@types/glob@npm:^7.1.1, @types/glob@npm:^7.1.3, @types/glob@npm:^7.2.0":
   version: 7.2.0
   resolution: "@types/glob@npm:7.2.0"
   dependencies:
@@ -6640,21 +6630,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6":
-  version: 7.1.7
-  resolution: "glob@npm:7.1.7"
-  dependencies:
-    fs.realpath: ^1.0.0
-    inflight: ^1.0.4
-    inherits: 2
-    minimatch: ^3.0.4
-    once: ^1.3.0
-    path-is-absolute: ^1.0.0
-  checksum: b61f48973bbdcf5159997b0874a2165db572b368b931135832599875919c237fc05c12984e38fe828e69aa8a921eb0e8a4997266211c517c9cfaae8a93988bb8
-  languageName: node
-  linkType: hard
-
-"glob@npm:^7.2.0":
+"glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.2.0":
   version: 7.2.0
   resolution: "glob@npm:7.2.0"
   dependencies: