Implement link sharing for and in spaces

changelog/unreleased/enhancement-spaces-link-sharing

@@ -0,0 +1,6 @@
+Enhancement: Spaces link sharing
+
+Spaces and their resources can now be shared via links.
+
+https://github.com/owncloud/web/pull/6633
+https://github.com/owncloud/web/issues/6283

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

@@ -24,19 +24,40 @@
         >
           <oc-icon name="group" class="oc-mr-s" />
         </oc-button>
-        <span class="oc-mr-xs" v-text="memberShareLabel" />
+      </div>
+      <div v-if="hasLinkShares" class="oc-flex oc-flex-middle">
         <oc-button
           appearance="raw"
-          :aria-label="$gettext('Open the member panel')"
-          size="small"
-          @click="expandMemberPanel"
+          :aria-label="$gettext('Open the link panel')"
+          @click="expandLinkPanel"
         >
-          <span class="oc-text-small" v-text="$gettext('Show')"></span>
+          <oc-icon name="link" class="oc-mr-s" />
         </oc-button>
       </div>
-      <div v-if="hasLinkShares" class="oc-flex oc-flex-middle">
-        <oc-icon name="link" class="oc-mr-s" />
-        <span v-text="linkShareLabel" />
+      <div>
+        <span v-if="hasMemberShares">
+          <span v-text="memberShareLabel" />
+          <oc-button
+            appearance="raw"
+            :aria-label="$gettext('Open the member panel')"
+            size="small"
+            @click="expandMemberPanel"
+          >
+            <span class="oc-text-small" v-text="$gettext('Show')"></span>
+          </oc-button>
+        </span>
+        <span v-if="hasMemberShares && hasLinkShares">·</span>
+        <span v-if="hasLinkShares">
+          <span v-text="linkShareLabel" />
+          <oc-button
+            appearance="raw"
+            :aria-label="$gettext('Open the link panel')"
+            size="small"
+            @click="expandLinkPanel"
+          >
+            <span class="oc-text-small" v-text="$gettext('Show')"></span>
+          </oc-button>
+        </span>
       </div>
     </div>
     <div>
@@ -203,6 +224,10 @@ export default {
 
     expandMemberPanel() {
       this.setSidebarPanel('space-share-item')
+    },
+
+    expandLinkPanel() {
+      this.setSidebarPanel('links-item')
     }
   }
 }

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

@@ -55,7 +55,6 @@
 </template>
 <script>
 import { DateTime } from 'luxon'
-import { dirname } from 'path'
 import { mapGetters, mapActions, mapState, mapMutations } from 'vuex'
 import mixins from '../../../mixins'
 import { getParentPaths } from '../../../helpers/path'
@@ -65,6 +64,9 @@ import LinkEdit from './PublicLinks/LinkEdit.vue'
 import ListItem from './PublicLinks/ListItem.vue'
 import PrivateLinkItem from './PrivateLinkItem.vue'
 import { ShareTypes } from '../../../helpers/share'
+import { useStore } from 'web-pkg/src/composables'
+import { clientService } from 'web-pkg/src/services'
+import { dirname } from 'path'
 
 const VIEW_SHOW = 'showLinks'
 const VIEW_EDIT = 'editPublicLink'
@@ -85,6 +87,15 @@ export default {
       changeView: (view) => (this.$data.currentView = view)
     }
   },
+  setup() {
+    const store = useStore()
+    const graphClient = clientService.graphAuthenticated(
+      store.getters.configuration.server,
+      store.getters.getToken
+    )
+
+    return { graphClient }
+  },
   data() {
     return {
       VIEW_SHOW,
@@ -101,9 +112,10 @@ export default {
     ]),
     ...mapGetters(['capabilities']),
     ...mapState('Files', ['sharesTree']),
+    ...mapState(['user']),
 
     canCreatePublicLinks() {
-      return this.highlightedFile.canShare()
+      return this.highlightedFile.canShare({ user: this.user })
     },
 
     noResharePermsMessage() {
@@ -172,6 +184,9 @@ export default {
 
     privateLinkEnabled() {
       return this.capabilities.files.privateLinks
+    },
+    resourceIsSpace() {
+      return this.highlightedFile.type === 'space'
     }
   },
   watch: {
@@ -193,18 +208,27 @@ export default {
       this.currentView = VIEW_SHOW
     },
     $_reloadLinks() {
+      let storageId
+      if (this.resourceIsSpace) {
+        storageId = this.highlightedFile.id
+      } else if (this.$route.params.storageId) {
+        storageId = this.$route.params.storageId
+      }
+
       this.$_showList()
       this.loadCurrentFileOutgoingShares({
         client: this.$client,
+        graphClient: this.graphClient,
         path: this.highlightedFile.path,
         $gettext: this.$gettext,
-        storageId: this.$route.params.storageId
+        storageId,
+        resource: this.highlightedFile
       })
       this.loadSharesTree({
         client: this.$client,
-        path: dirname(this.highlightedFile.path),
+        path: this.highlightedFile.path === '' ? '/' : dirname(this.highlightedFile.path),
         $gettext: this.$gettext,
-        storageId: this.$route.params.storageId
+        storageId
       })
     },
     linksComparator(l1, l2) {

packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkActions.vue

@@ -80,8 +80,15 @@ export default {
     },
 
     deleteLink({ client, share, resource }) {
+      let storageId
+      if (this.highlightedFile.type === 'space') {
+        storageId = this.highlightedFile.id
+      } else if (this.$route.params.storageId) {
+        storageId = this.$route.params.storageId
+      }
+
       this.hideModal()
-      this.removeLink({ client, share, resource })
+      this.removeLink({ client, share, resource, storageId })
 
       this.showMessage({
         title: this.$gettext('Public link was deleted successfully')

packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkEdit.vue

@@ -372,11 +372,23 @@ export default {
         params.password = this.password
       }
 
+      let storageId
+      if (this.highlightedFile.type === 'space') {
+        storageId = this.highlightedFile.id
+      } else if (this.$route.params.storageId) {
+        storageId = this.$route.params.storageId
+      }
+
+      if (storageId) {
+        params.spaceRef = `${storageId}${this.highlightedFile.path}`
+      }
+
       this.addLink({
         path: this.highlightedFile.path,
         client: this.$client,
         $gettext: this.$gettext,
-        params
+        params,
+        storageId
       })
         .then((e) => {
           this.saving = false

packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkInfo.vue

@@ -64,9 +64,9 @@
 </template>
 
 <script>
-import { basename, dirname } from 'path'
+import { basename } from 'path'
 import Mixins from '../../../../mixins'
-import { createLocationSpaces } from '../../../../router'
+import { createLocationSpaces, isLocationSpacesActive } from '../../../../router'
 import CopyToClipboardButton from '../CopyToClipboardButton.vue'
 import { DateTime } from 'luxon'
 
@@ -118,9 +118,14 @@ export default {
 
     viaRouterParams() {
       const viaPath = this.link.path
-      return createLocationSpaces('files-spaces-personal-home', {
+      const locationName = isLocationSpacesActive(this.$router, 'files-spaces-project')
+        ? 'files-spaces-project'
+        : 'files-spaces-personal-home'
+
+      return createLocationSpaces(locationName, {
         params: {
-          item: dirname(viaPath) || '/'
+          item: viaPath || '/',
+          storageId: this.$route.params.storageId
         },
         query: {
           scrollTo: basename(viaPath)

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

@@ -9,7 +9,7 @@
           class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm"
           :aria-label="$gettext('Share receivers')"
         >
-          <li v-for="collaborator in currentFileOutgoingCollaborators" :key="collaborator.key">
+          <li v-for="collaborator in members" :key="collaborator.key">
             <collaborator-list-item
               :share="collaborator"
               :modifiable="isModifiable(collaborator)"
@@ -28,7 +28,7 @@ import { useStore } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
 import CollaboratorListItem from './Collaborators/ListItem.vue'
 import InviteCollaboratorForm from './InviteCollaborator/InviteCollaboratorForm.vue'
-import { spaceRoleManager } from '../../../helpers/share'
+import { ShareTypes, spaceRoleManager } from '../../../helpers/share'
 import { createLocationSpaces, isLocationSpacesActive } from '../../../router'
 import { useTask } from 'vue-concurrency'
 
@@ -51,8 +51,10 @@ export default {
 
     const loadSharesTask = useTask(function* (signal, ref) {
       yield ref.loadCurrentFileOutgoingShares({
-        client: graphClient,
+        client: ref.$client,
+        graphClient,
         path: ref.space.id,
+        storageId: ref.space.id,
         resource: ref.space
       })
     })
@@ -70,17 +72,22 @@ export default {
     space() {
       return this.displayedItem.value
     },
+    members() {
+      return this.currentFileOutgoingCollaborators.filter(
+        (share) => share.shareType === ShareTypes.space.value
+      )
+    },
     sharesLoading() {
       return this.currentFileOutgoingSharesLoading
     },
     hasCollaborators() {
-      return this.currentFileOutgoingCollaborators.length > 0
+      return this.members.length > 0
     },
     currentUserCanShare() {
       return this.currentUserIsManager
     },
     currentUserIsManager() {
-      const currentUserCollaborator = this.currentFileOutgoingCollaborators.find(
+      const currentUserCollaborator = this.members.find(
         (collaborator) => collaborator.collaborator.name === this.user.id
       )
 
@@ -110,7 +117,7 @@ export default {
       }
 
       // forbid to remove last manager of a space
-      const managers = this.currentFileOutgoingCollaborators.filter(
+      const managers = this.members.filter(
         (collaborator) => collaborator.role.name === spaceRoleManager.name
       )
       return managers.length > 1

packages/web-app-files/src/fileSideBars.js

@@ -48,6 +48,15 @@ export default [
       return multipleSelection && !rootFolder
     }
   }),
+  ({ router, highlightedFile }) => ({
+    app: 'details-space-item',
+    icon: 'questionnaire-line',
+    component: SpaceDetails,
+    default: isLocationSpacesActive(router, 'files-spaces-projects'),
+    get enabled() {
+      return highlightedFile?.type === 'space'
+    }
+  }),
   ({ router, multipleSelection, rootFolder }) => ({
     app: 'actions-item',
     component: FileActions,
@@ -60,6 +69,21 @@ export default [
       return !multipleSelection && !rootFolder
     }
   }),
+  ({ highlightedFile, user }) => ({
+    app: 'space-actions-item',
+    component: SpaceActions,
+    icon: 'slideshow-3',
+    iconFillType: 'line',
+    get enabled() {
+      if (highlightedFile?.type !== 'space') {
+        return false
+      }
+      return [
+        ...highlightedFile.spaceRoles[spaceRoleManager.name],
+        ...highlightedFile.spaceRoles[spaceRoleEditor.name]
+      ].includes(user.uuid)
+    }
+  }),
   ({ capabilities, router, multipleSelection, rootFolder }) => ({
     app: 'sharing-item',
     icon: 'group',
@@ -80,12 +104,21 @@ export default [
       return false
     }
   }),
-  ({ capabilities, router, multipleSelection, rootFolder }) => ({
+  ({ highlightedFile }) => ({
+    app: 'space-share-item',
+    component: SpaceShares,
+    icon: 'group',
+    iconFillType: 'line',
+    get enabled() {
+      return highlightedFile?.type === 'space'
+    }
+  }),
+  ({ capabilities, router, multipleSelection, rootFolder, highlightedFile }) => ({
     app: 'links-item',
     icon: 'link',
     component: FileLinks,
     get enabled() {
-      if (multipleSelection || rootFolder) return false
+      if (multipleSelection || (rootFolder && highlightedFile?.type !== 'space')) return false
       if (
         isLocationTrashActive(router, 'files-trash-personal') ||
         isLocationTrashActive(router, 'files-trash-spaces-project') ||
@@ -115,38 +148,5 @@ export default [
       }
       return !!capabilities.core && highlightedFile && highlightedFile.type !== 'folder'
     }
-  }),
-  ({ router, highlightedFile }) => ({
-    app: 'details-space-item',
-    icon: 'questionnaire-line',
-    component: SpaceDetails,
-    default: isLocationSpacesActive(router, 'files-spaces-projects'),
-    get enabled() {
-      return highlightedFile?.type === 'space'
-    }
-  }),
-  ({ highlightedFile, user }) => ({
-    app: 'space-actions-item',
-    component: SpaceActions,
-    icon: 'slideshow-3',
-    iconFillType: 'line',
-    get enabled() {
-      if (highlightedFile?.type !== 'space') {
-        return false
-      }
-      return [
-        ...highlightedFile.spaceRoles[spaceRoleManager.name],
-        ...highlightedFile.spaceRoles[spaceRoleEditor.name]
-      ].includes(user.uuid)
-    }
-  }),
-  ({ highlightedFile }) => ({
-    app: 'space-share-item',
-    component: SpaceShares,
-    icon: 'group',
-    iconFillType: 'line',
-    get enabled() {
-      return highlightedFile?.type === 'space'
-    }
   })
 ]

packages/web-app-files/src/mixins/actions/createPublicLink.js

@@ -36,7 +36,8 @@ export default {
         item: resources[0],
         client: this.$client,
         store: this.$store,
-        $gettext: this.$gettext
+        $gettext: this.$gettext,
+        storageId: this.$route.params.storageId
       })
     }
   }