Display indirect shares for links

apps/files/src/components/Collaborators/Collaborator.vue

@@ -1,17 +1,17 @@
 <template>
   <oc-table middle class="files-collaborators-collaborator">
-    <oc-table-row v-if="$_reshareInformation || $_getViaLabel" class="files-collaborators-collaborator-table-row-extra">
+    <oc-table-row v-if="$_reshareInformation || $_viaLabel" class="files-collaborators-collaborator-table-row-extra">
       <oc-table-cell shrink colspan="2"></oc-table-cell>
       <oc-table-cell colspan="2">
         <div v-if="$_reshareInformation" class="uk-text-meta uk-flex uk-flex-middle">
           <oc-icon name="repeat" class="uk-preserve-width" />
           <span>{{ $_reshareInformation }}</span>
         </div>
-        <div v-if="$_getViaLabel" class="uk-text-meta">
-          <router-link :to="$_getViaRouterParams" :aria-label="$gettext('Navigate to parent')"
+        <div v-if="$_viaLabel" class="uk-text-meta">
+          <router-link :to="$_viaRouterParams" :aria-label="$gettext('Navigate to parent')"
                        class="files-collaborators-collaborator-follow-via uk-flex uk-flex-middle">
             <oc-icon name="exit_to_app" size="small" class="uk-preserve-width" />
-            <span class="oc-file-name uk-padding-remove uk-text-truncate files-collaborators-collaborator-via-label">{{ $_getViaLabel }}</span>
+            <span class="oc-file-name uk-padding-remove uk-margin-xsmall-left uk-text-truncate files-collaborators-collaborator-via-label">{{ $_viaLabel }}</span>
           </router-link>
         </div>
       </oc-table-cell>
@@ -99,15 +99,15 @@ export default {
       return parseInt(this.collaborator.info.share_type, 10)
     },
 
-    $_getViaLabel () {
+    $_viaLabel () {
       if (!this.$_isIndirectShare) {
         return null
       }
       const translated = this.$gettext('Via %{folderName}')
       return this.$gettextInterpolate(translated, { folderName: basename(this.collaborator.info.path) }, false)
     },
 
-    $_getViaRouterParams () {
+    $_viaRouterParams () {
       const viaPath = this.collaborator.info.path
       return {
         name: 'files-list',

apps/files/src/components/FileLinkSidebar.vue

@@ -34,38 +34,31 @@
                             name="custom-classes-transition"
                             tag="ul">
             <li v-for="link in $_links" :key="'li-' + link.id">
-              <oc-table midldle class="files-file-links-link">
-                <oc-table-row class="files-file-links-link-table-row-info">
-                  <oc-table-cell shrink>
-                    <oc-button :aria-label="$_deleteButtonLabel" @click="$_removePublicLink(link)" variation="raw" class="oc-files-file-link-delete">
-                      <oc-icon name="close" />
-                    </oc-button>
-                  </oc-table-cell>
-                  <oc-table-cell>
-                    <a :href="link.url" target="_blank" :uk-tooltip="$_tooltipTextLink" class="uk-text-bold uk-text-truncate oc-files-file-link-url">{{ link.name }}</a>
-                    <br>
-                    <span class="uk-text-meta uk-text-break">
-                      <span>{{ link.description }}</span>
-                      <template v-if="link.expiration"> |
-                        <span v-translate>Expires</span> {{ formDateFromNow(link.expiration) }}
-                      </template>
-                      <template v-if="link.password"> |
-                        <span v-translate>Password protected</span>
-                      </template>
-                    </span>
-                  </oc-table-cell>
-                  <oc-table-cell shrink class="uk-text-nowrap">
-                    <oc-button :aria-label="$_publicLinkCopyLabel" variation="raw" class="oc-files-file-link-copy-url">
-                      <oc-icon v-if="!linksCopied[link.url]"  name="copy_to_clipboard" size="small"
-                               v-clipboard:copy="link.url" v-clipboard:success="$_clipboardSuccessHandler"/>
-                      <oc-icon v-else name="ready" size="small" class="oc-files-file-link-copied-url _clipboard-success-animation"/>
-                    </oc-button>
-                    <oc-button :aria-label="$_editButtonLabel" @click="$_editPublicLink(link)" variation="raw" class="oc-files-file-link-edit">
-                      <oc-icon name="edit" size="small"/>
-                    </oc-button>
-                  </oc-table-cell>
-                </oc-table-row>
-              </oc-table>
+              <public-link-list-item :link="link"
+                                     :modifiable="true"
+                                     :indirect="false"
+                                     :linksCopied="linksCopied"
+                                     @onCopy="$_clipboardSuccessHandler"
+                                     @onDelete="$_removePublicLink"
+                                     @onEdit="$_editPublicLink" />
+            </li>
+          </transition-group>
+        </section>
+        <section v-if="$_indirectLinks.length > 0" class="uk-margin-medium-top">
+          <div class="uk-text-bold">
+            <translate>Public Links Via Parent</translate>
+          </div>
+          <transition-group class="uk-list uk-list-divider uk-overflow-hidden"
+                            enter-active-class="uk-animation-slide-left-medium"
+                            leave-active-class="uk-animation-slide-right-medium uk-animation-reverse"
+                            name="custom-classes-transition"
+                            tag="ul">
+            <li v-for="link in $_indirectLinks" :key="'li-' + link.id">
+              <public-link-list-item :link="link"
+                                     :modifiable="false"
+                                     :indirect="true"
+                                     :linksCopied="linksCopied"
+                                     @onCopy="$_clipboardSuccessHandler" />
             </li>
           </transition-group>
         </section>
@@ -83,19 +76,23 @@
   </div>
 </template>
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions, mapState } from 'vuex'
 import moment from 'moment'
 import mixins from '../mixins'
+import { shareTypes } from '../helpers/shareTypes'
+import { getParentPaths } from '../helpers/path'
 
 const EditPublicLink = _ => import('./PublicLinksSidebar/EditPublicLink.vue')
+const PublicLinkListItem = _ => import('./PublicLinksSidebar/PublicLinkListItem.vue')
 
 const PANEL_SHOW = 'showLinks'
 const PANEL_EDIT = 'editPublicLink'
 
 export default {
   mixins: [mixins],
   components: {
-    EditPublicLink
+    EditPublicLink,
+    PublicLinkListItem
   },
   title: ($gettext) => {
     return $gettext('Links')
@@ -145,6 +142,34 @@ export default {
   computed: {
     ...mapGetters('Files', ['highlightedFile', 'links', 'linksLoading', 'linksError']),
     ...mapGetters(['getToken', 'capabilities']),
+    ...mapState('Files', [
+      'sharesTree'
+    ]),
+
+    $_indirectLinks () {
+      const allShares = []
+      const parentPaths = getParentPaths(this.highlightedFile.path, true)
+      if (parentPaths.length === 0) {
+        return []
+      }
+
+      // remove root entry
+      parentPaths.pop()
+
+      parentPaths.forEach((parentPath) => {
+        const shares = this.sharesTree[parentPath]
+        if (shares) {
+          shares.forEach((share) => {
+            if (share.outgoing && parseInt(share.info.share_type, 10) === shareTypes.link) {
+              share.key = 'indirect-link-' + share.info.id
+              allShares.push(share)
+            }
+          })
+        }
+      })
+
+      return allShares
+    },
 
     $_links () {
       return this.links.filter(link => {
@@ -161,21 +186,9 @@ export default {
         enforced: expireDate.enforced === '1'
       }
     },
-    $_tooltipTextLink () {
-      return `title: ${this.$gettext('Click to open the link')}; pos: bottom`
-    },
     $_addButtonLabel () {
       return this.$gettext('Add public link')
     },
-    $_deleteButtonLabel () {
-      return this.$gettext('Delete public link')
-    },
-    $_editButtonLabel () {
-      return this.$gettext('Edit public link')
-    },
-    $_publicLinkCopyLabel () {
-      return this.$gettext('Copy public link url')
-    },
     $_privateLinkCopyLabel () {
       return this.$gettext('Copy private link url')
     },
@@ -254,12 +267,6 @@ export default {
     }
   }
 </style>
-<style scoped="scoped">
-  /* FIXME: Move to ODS somehow */
-  .files-file-links-link-table-row-info > td {
-    padding: 0 10px 0 0;
-  }
-</style>
 <style>
   /* FIXME: Move to design system (copied from FileSharingSidebar.vue) */
   .oc-app-side-bar .oc-label {

apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue

@@ -0,0 +1,126 @@
+<template>
+  <oc-table middle class="files-file-links-link">
+    <oc-table-row v-if="$_viaLabel" class="files-file-links-link-table-row-extra">
+      <oc-table-cell shrink></oc-table-cell>
+      <oc-table-cell colspan="2">
+        <div class="uk-text-meta">
+          <router-link :to="$_viaRouterParams" :aria-label="$gettext('Navigate to parent')"
+                       class="oc-files-file-link-via uk-flex uk-flex-middle">
+            <oc-icon name="exit_to_app" size="small" class="uk-preserve-width" />
+            <span class="oc-file-name uk-padding-remove uk-margin-xsmall-left uk-text-truncate files-file-links-link-via-label">{{ $_viaLabel }}</span>
+          </router-link>
+        </div>
+      </oc-table-cell>
+    </oc-table-row>
+    <oc-table-row class="files-file-links-link-table-row-info">
+      <oc-table-cell shrink>
+        <oc-button v-if="modifiable" :aria-label="$_deleteButtonLabel" @click="$emit('onDelete', link)" variation="raw" class="oc-files-file-link-delete">
+          <oc-icon name="close" />
+        </oc-button>
+        <oc-icon v-else name="lock" />
+      </oc-table-cell>
+      <oc-table-cell>
+        <a :href="link.url" target="_blank" :uk-tooltip="$_tooltipTextLink" class="uk-text-bold uk-text-truncate oc-files-file-link-url">{{ link.name }}</a>
+        <br>
+        <span class="uk-text-meta uk-text-break">
+                      <span class="oc-files-file-link-role">{{ link.description }}</span>
+                      <template v-if="link.expiration"> |
+                        <span v-translate>Expires</span> {{ formDateFromNow(link.expiration) }}
+                      </template>
+                      <template v-if="link.password"> |
+                        <span v-translate>Password protected</span>
+                      </template>
+                    </span>
+      </oc-table-cell>
+      <oc-table-cell shrink class="uk-text-nowrap">
+        <oc-button v-if="modifiable" :aria-label="$_editButtonLabel" @click="$emit('onEdit', link)" variation="raw" class="oc-files-file-link-edit">
+          <oc-icon name="edit" size="small"/>
+        </oc-button>
+        <oc-button :aria-label="$_publicLinkCopyLabel" variation="raw" class="oc-files-file-link-copy-url">
+          <oc-icon v-if="!linksCopied[link.url]"  name="copy_to_clipboard" size="small"
+                   v-clipboard:copy="link.url" v-clipboard:success="$_clipboardSuccessHandler"/>
+          <oc-icon v-else name="ready" size="small" class="oc-files-file-link-copied-url _clipboard-success-animation"/>
+        </oc-button>
+      </oc-table-cell>
+    </oc-table-row>
+  </oc-table>
+</template>
+
+<script>
+import { basename, dirname } from 'path'
+import mixins from '../../mixins'
+
+export default {
+  name: 'PublicLinkListItem',
+  props: {
+    link: {
+      type: Object,
+      required: true
+    },
+    modifiable: {
+      type: Boolean,
+      default: false
+    },
+    indirect: {
+      type: Boolean,
+      default: false
+    },
+    linksCopied: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  mixins: [mixins],
+  computed: {
+    $_viaLabel () {
+      if (!this.indirect) {
+        return null
+      }
+      const translated = this.$gettext('Via %{folderName}')
+      return this.$gettextInterpolate(translated, { folderName: basename(this.link.info.path) }, false)
+    },
+    $_viaRouterParams () {
+      const viaPath = this.link.info.path
+      return {
+        name: 'files-list',
+        params: {
+          item: dirname(viaPath) || '/'
+        },
+        query: {
+          scrollTo: basename(viaPath)
+        }
+      }
+    },
+    $_tooltipTextLink () {
+      return `title: ${this.$gettext('Click to open the link')}; pos: bottom`
+    },
+    $_deleteButtonLabel () {
+      return this.$gettext('Delete public link')
+    },
+    $_editButtonLabel () {
+      return this.$gettext('Edit public link')
+    },
+    $_publicLinkCopyLabel () {
+      return this.$gettext('Copy public link url')
+    }
+  },
+  methods: {
+    $_clipboardSuccessHandler (event) {
+      this.$emit('onCopy', event)
+    }
+  }
+}
+</script>
+
+<style scoped="scoped">
+  /* FIXME: Move to ODS somehow */
+  .files-file-links-link-table-row-extra > td {
+    padding: 0 10px 5px 0;
+  }
+  .files-file-links-link-table-row-info > td {
+    padding: 0 10px 0 0;
+  }
+  .files-file-links-link-via-label {
+    max-width: 65%;
+  }
+</style>