owncloud · pascalwengerter · Jun 21, 2022 · Jun 20, 2022
diff --git a/changelog/unreleased/enhancement-split-sidebar-direct-indirect-linkshares b/changelog/unreleased/enhancement-split-sidebar-direct-indirect-linkshares
@@ -0,0 +1,6 @@
+Enhancement: Separate direct and indirect link shares in sidebar
+
+We have split the list of link shares into two lists, one with direct (and editable) and another one with read-only indirect link shares of parent folders for better structure in the sidebar.
+
+https://github.com/owncloud/web/pull/7140
+https://github.com/owncloud/web/issues/7132
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
@@ -53,8 +53,8 @@
             :available-role-options="availableRoleOptions"
             :can-rename="true"
             :expiration-date="expirationDate"
-            :is-folder-share="link.indirect || highlightedFile.isFolder"
-            :is-modifiable="canEdit && !link.indirect"
+            :is-folder-share="highlightedFile.isFolder"
+            :is-modifiable="canEdit"
             :is-password-enforced="isPasswordEnforcedFor(link)"
             :link="link"
             @updateLink="checkLinkToUpdate"
@@ -63,7 +63,44 @@
         </li>
       </oc-list>
       <div v-if="links.length > 3" class="oc-flex oc-flex-center">
-        <oc-button appearance="raw" @click="toggleLinkListCollapsed" v-text="collapseButtonTitle" />
+        <oc-button appearance="raw" @click="toggleLinkListCollapsed">
+          <span v-text="collapseButtonTitle" />
+          <oc-icon :name="collapseButtonIcon" fill-type="line" />
+        </oc-button>
+      </div>
+      <div v-if="indirectLinks.length" id="indirect-link-list">
+        <hr class="link-separator oc-my-m" />
+        <h3 class="oc-text-bold oc-m-rm oc-text-initial">
+          <span v-text="indirectLinksHeading" />
+          <oc-contextual-helper v-if="helpersEnabled" v-bind="indirectLinkHelp" />
+        </h3>
+        <oc-list v-if="!indirectLinkListCollapsed" class="oc-overflow-hidden oc-my-m">
+          <li
+            v-for="link in displayIndirectLinks"
+            :key="link.key"
+            class="oc-py-s"
+            :data-testid="`files-link-id-${link.id}`"
+          >
+            <name-and-copy :link="link" />
+            <details-and-edit
+              :available-role-options="availableRoleOptions"
+              :expiration-date="expirationDate"
+              :is-folder-share="true"
+              :is-modifiable="false"
+              :link="link"
+            />
+          </li>
+        </oc-list>
+        <div class="oc-flex oc-flex-center">
+          <oc-button
+            id="indirect-link-list-toggle"
+            appearance="raw"
+            @click="toggleIndirectLinkListCollapsed"
+          >
+            <span v-text="indirectCollapseButtonTitle" />
+            <oc-icon :name="indirectCollapseButtonIcon" fill-type="line" />
+          </oc-button>
+        </div>
       </div>
     </template>
   </div>
@@ -76,7 +113,7 @@ import { mapGetters, mapActions, mapState } from 'vuex'
 import { useStore, useCapabilitySpacesEnabled } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
 import mixins from '../../../mixins'
-import { shareViaLinkHelp } from '../../../helpers/contextualHelpers'
+import { shareViaLinkHelp, shareViaIndirectLinkHelp } from '../../../helpers/contextualHelpers'
 import { getParentPaths } from '../../../helpers/path'
 import { ShareTypes, LinkShareRoles, SharePermissions } from '../../../helpers/share'
 import { cloneStateObject } from '../../../helpers/store'
@@ -101,10 +138,13 @@ export default defineComponent({
     )
 
     const linkListCollapsed = !store.getters.configuration.options.sidebar.shares.showAllOnLoad
+    const indirectLinkListCollapsed =
+      !store.getters.configuration.options.sidebar.shares.showAllOnLoad
 
     return {
       graphClient,
       hasSpaces: useCapabilitySpacesEnabled(),
+      indirectLinkListCollapsed,
       linkListCollapsed
     }
   },
@@ -124,7 +164,16 @@ export default defineComponent({
     },
 
     collapseButtonTitle() {
-      return this.linkListCollapsed ? this.$gettext('Show more') : this.$gettext('Show less')
+      return this.linkListCollapsed ? this.$gettext('Show all') : this.$gettext('Show less')
+    },
+    collapseButtonIcon() {
+      return this.linkListCollapsed ? 'arrow-down-s' : 'arrow-up-s'
+    },
+    indirectCollapseButtonTitle() {
+      return this.indirectLinkListCollapsed ? this.$gettext('Show') : this.$gettext('Hide')
+    },
+    indirectCollapseButtonIcon() {
+      return this.indirectLinkListCollapsed ? 'arrow-down-s' : 'arrow-up-s'
     },
 
     quicklink() {
@@ -190,6 +239,9 @@ export default defineComponent({
     viaLinkHelp() {
       return shareViaLinkHelp
     },
+    indirectLinkHelp() {
+      return shareViaIndirectLinkHelp
+    },
 
     canCreatePublicLinks() {
       return this.highlightedFile.canShare({ user: this.user })
@@ -216,8 +268,13 @@ export default defineComponent({
       return this.$gettext('Share via public link')
     },
 
+    indirectLinksHeading() {
+      const translated = this.$gettext('Indirect links (%{ count })')
+      return this.$gettextInterpolate(translated, { count: this.indirectLinks.length })
+    },
+
     links() {
-      const nonQuickLinkOutgoingLinks = this.currentFileOutgoingLinks
+      return this.currentFileOutgoingLinks
         .filter((link) => !link.quicklink)
         .map((share) => {
           share.key = 'direct-link-' + share.id
@@ -226,8 +283,6 @@ export default defineComponent({
         .sort((a, b) => {
           return b.stime - a.stime
         })
-
-      return [...nonQuickLinkOutgoingLinks, ...this.indirectLinks]
     },
 
     displayLinks() {
@@ -237,6 +292,13 @@ export default defineComponent({
       return this.links
     },
 
+    displayIndirectLinks() {
+      if (this.indirectLinkListCollapsed) {
+        return []
+      }
+      return this.indirectLinks
+    },
+
     indirectLinks() {
       const allShares = []
       const parentPaths = getParentPaths(this.highlightedFile.path, false)
@@ -299,6 +361,10 @@ export default defineComponent({
       this.linkListCollapsed = !this.linkListCollapsed
     },
 
+    toggleIndirectLinkListCollapsed() {
+      this.indirectLinkListCollapsed = !this.indirectLinkListCollapsed
+    },
+
     reloadLinks() {
       this.loadCurrentFileOutgoingShares({
         client: this.$client,

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
@@ -1,6 +1,6 @@
 <template>
   <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" />
+    <h4 class="oc-text-truncate oc-text-normal 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" />

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
@@ -1,6 +1,6 @@
 <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="linkName" />
+    <h4 class="oc-text-truncate oc-text-normal 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 v-if="copied" class="oc-flex oc-flex-middle oc-text-truncate">
         <oc-icon variation="success" name="checkbox-circle" />

diff --git a/packages/web-app-files/src/helpers/contextualHelpers.js b/packages/web-app-files/src/helpers/contextualHelpers.js
@@ -46,6 +46,9 @@ export const shareViaLinkHelp = {
     )
   ]
 }
+export const shareViaIndirectLinkHelp = {
+  text: $gettext('This file is shared, because one of the folders it is in is shared via link.')
+}
 export const shareQuickLinkHelp = {
   text: $gettext('The Quick link is the link that is always copied if you'),
   list: [

diff --git a/...p-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/NameAndCopy.spec.js.snap b/...p-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/NameAndCopy.spec.js.snap
@@ -2,7 +2,7 @@
 
 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>
+  <h4 class="oc-text-truncate oc-text-normal 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>
@@ -13,7 +13,7 @@ exports[`NameAndCopy should show link info component including a copy-to-clipboa
 
 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>
+  <h4 class="oc-text-truncate oc-text-normal 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>
@@ -24,7 +24,7 @@ exports[`NameAndCopy upon clicking it should copy the private link to the clipbo
 
 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>
+  <h4 class="oc-text-truncate oc-text-normal 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>