Implement people sharing for spaces

changelog/unreleased/enhancement-spaces-people-sharing

@@ -0,0 +1,11 @@
+Enhancement: Implement people sharing for spaces
+
+Spaces can now be shared with other people. This change specifically includes:
+
+* listing all members who have access to a space (possible for all space members)
+* adding members to a space and giving them dedicated roles (possible for managers only)
+* editing the role of members (possible for managers only)
+* removing members from a space (possible for managers only)
+
+https://github.com/owncloud/web/pull/?
+https://github.com/owncloud/web/issues/6283

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

@@ -16,7 +16,14 @@
       />
     </div>
     <div v-if="hasPeopleShares || hasLinkShares" class="oc-flex oc-flex-middle oc-mb-m">
-      <oc-icon v-if="hasPeopleShares" name="group" class="oc-mr-s" />
+      <oc-button
+        v-if="hasPeopleShares"
+        appearance="raw"
+        :aria-label="$gettext('Open the people panel')"
+        @click="expandPeoplePanel"
+      >
+        <oc-icon name="group" class="oc-mr-s" />
+      </oc-button>
       <oc-icon v-if="hasLinkShares" name="link" class="oc-mr-s" />
       <span class="oc-text-small" v-text="shareLabel" />
     </div>
@@ -33,7 +40,7 @@
         <tr>
           <th scope="col" class="oc-pr-s" v-text="$gettext('Manager')" />
           <td>
-            <span v-if="!loadOwnersTask.isRunning" v-text="ownerUsernames" />
+            <span v-text="ownerUsernames" />
           </td>
         </tr>
         <tr>
@@ -50,11 +57,10 @@
 import { ref } from '@vue/composition-api'
 import Mixins from '../../../mixins'
 import MixinResources from '../../../mixins/resources'
-import { mapGetters } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import { useTask } from 'vue-concurrency'
 import { buildWebDavSpacesPath } from '../../../helpers/resources'
-import { useStore } from 'web-pkg/src/composables'
-import { clientService } from 'web-pkg/src/services'
+import { spaceManager } from '../../../helpers/share'
 import SpaceQuota from '../../SpaceQuota.vue'
 
 export default {
@@ -66,13 +72,8 @@ export default {
     return $gettext('Details')
   },
   setup() {
-    const store = useStore()
     const spaceImage = ref('')
     const owners = ref([])
-    const graphClient = clientService.graphAuthenticated(
-      store.getters.configuration.server,
-      store.getters.getToken
-    )
 
     const loadImageTask = useTask(function* (signal, ref) {
       if (!ref.space?.spaceImageData) {
@@ -87,24 +88,14 @@ export default {
       spaceImage.value = Buffer.from(fileContents).toString('base64')
     })
 
-    const loadOwnersTask = useTask(function* (signal, ref) {
-      const promises = []
-      for (const userId of ref.ownerUserIds) {
-        promises.push(graphClient.users.getUser(userId))
-      }
-
-      if (promises.length > 0) {
-        yield Promise.all(promises).then((resolvedData) => {
-          resolvedData.forEach((response) => {
-            owners.value.push(response.data)
-          })
-        })
-      }
-    })
-
-    return { loadImageTask, loadOwnersTask, spaceImage, owners }
+    return { loadImageTask, spaceImage, owners }
   },
   computed: {
+    ...mapGetters('Files', [
+      'highlightedFile',
+      'currentFileOutgoingCollaborators',
+      'currentFileOutgoingLinks'
+    ]),
     ...mapGetters(['user']),
 
     space() {
@@ -116,46 +107,31 @@ export default {
     lastModifyDate() {
       return this.formDateFromISO(this.space.mdate)
     },
-    ownerUserIds() {
-      const permissions = this.space.spacePermissions?.filter((permission) =>
-        permission.roles.includes('manager')
-      )
-      if (!permissions.length) {
-        return []
-      }
-
-      const userIds = permissions.reduce((acc, item) => {
-        const ids = item.grantedTo.map((user) => user.user.id)
-        acc = acc.concat(ids)
-        return acc
-      }, [])
-
-      return [...new Set(userIds)]
-    },
     ownerUsernames() {
       const userId = this.user?.id
-      return this.owners
-        .map((owner) => {
-          if (owner.onPremisesSamAccountName === userId) {
+      return this.currentFileOutgoingCollaborators
+        .filter((share) => share.role.name === spaceManager.name)
+        .map((share) => {
+          if (share.collaborator.onPremisesSamAccountName === userId) {
             return this.$gettextInterpolate(this.$gettext('%{displayName} (me)'), {
-              displayName: owner.displayName
+              displayName: share.collaborator.displayName
             })
           }
-          return owner.displayName
+          return share.collaborator.displayName
         })
         .join(', ')
     },
     hasPeopleShares() {
-      return false // @TODO
+      return this.currentFileOutgoingCollaborators.length > 1
     },
     hasLinkShares() {
-      return false // @TODO
+      return this.currentFileOutgoingLinks.length > 1
     },
     peopleShareCount() {
-      return 0 // @TODO
+      return this.currentFileOutgoingCollaborators.length
     },
     linkShareCount() {
-      return 0 // @TODO
+      return this.currentFileOutgoingLinks.length
     },
     shareLabel() {
       let peopleString, linksString
@@ -203,7 +179,16 @@ export default {
   },
   mounted() {
     this.loadImageTask.perform(this)
-    this.loadOwnersTask.perform(this)
+  },
+  methods: {
+    ...mapActions('Files/sidebar', {
+      setSidebarPanel: 'setActivePanel',
+      closeSidebar: 'close'
+    }),
+
+    expandPeoplePanel() {
+      this.setSidebarPanel('space-share-item')
+    }
   }
 }
 </script>

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

@@ -1,11 +1,13 @@
 <template>
   <div
-    :data-testid="`collaborator-${isUser ? 'user' : 'group'}-item-${share.collaborator.name}`"
-    class="files-collaborators-collaborator oc-flex oc-flex-middle oc-py-xs"
+    :data-testid="`collaborator-${isUser || isSpace ? 'user' : 'group'}-item-${
+      share.collaborator.name
+    }`"
+    class="files-collaborators-collaborator oc-flex oc-flex-middle oc-py-xs oc-flex-between"
   >
     <div class="oc-width-2-3 oc-flex oc-flex-middle" style="gap: 10px">
       <avatar-image
-        v-if="isUser"
+        v-if="isUser || isSpace"
         :userid="share.collaborator.name"
         :user-name="share.collaborator.displayName"
         :width="48"
@@ -64,7 +66,8 @@
         :share-id="share.id"
         :existing-permissions="share.customPermissions"
         :existing-role="share.role"
-        :allow-share-permission="!isOcis"
+        :collaborator-name="share.collaborator.name"
+        :allow-share-permission="!isOcis || isSpace"
         class="files-collaborators-collaborator-role"
         @optionChange="shareRoleChanged"
       />
@@ -77,6 +80,9 @@
         @removeShare="removeShare"
       />
     </div>
+    <div v-else>
+      <span class="oc-mr-xs" v-text="share.role.label" />
+    </div>
   </div>
 </template>
 
@@ -126,6 +132,10 @@ export default {
       return this.shareType === ShareTypes.user
     },
 
+    isSpace() {
+      return this.shareType === ShareTypes.space
+    },
+
     shareTypeText() {
       return this.$gettext(this.shareType.label)
     },
@@ -135,6 +145,11 @@ export default {
     },
 
     shareDisplayName() {
+      if (this.user.id === this.share.collaborator.name) {
+        return this.$gettextInterpolate(this.$gettext('%{collaboratorName} (me)'), {
+          collaboratorName: this.share.collaborator.displayName
+        })
+      }
       return this.share.collaborator.displayName
     },
 
@@ -243,7 +258,9 @@ export default {
     saveShareChanges({ role, permissions, expirationDate }) {
       const bitmask = role.hasCustomPermissions
         ? SharePermissions.permissionsToBitmask(permissions)
-        : SharePermissions.permissionsToBitmask(role.permissions(!this.isOcis))
+        : SharePermissions.permissionsToBitmask(
+            role.permissions(!this.isOcis || this.shareType === ShareTypes.space)
+          )
       this.changeShare({
         client: this.$client,
         share: this.share,

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

@@ -5,7 +5,7 @@
     :class="collaboratorClass"
   >
     <avatar-image
-      v-if="isUser"
+      v-if="isUser || isSpace"
       class="oc-mr-s"
       :width="48"
       :userid="item.value.shareWith"
@@ -67,6 +67,10 @@ export default {
       return this.shareType === ShareTypes.user
     },
 
+    isSpace() {
+      return this.shareType === ShareTypes.space
+    },
+
     isGroup() {
       return this.shareType === ShareTypes.group
     },

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

@@ -42,7 +42,7 @@
     <div class="oc-flex oc-flex-middle oc-flex-between oc-mb-l">
       <role-dropdown
         :resource="highlightedFile"
-        :allow-share-permission="!isOcis"
+        :allow-share-permission="!isOcis || resourceIsSpace"
         @optionChange="collaboratorRoleChanged"
       />
       <expiration-datepicker
@@ -79,7 +79,12 @@ import AutocompleteItem from './AutocompleteItem.vue'
 import RoleDropdown from '../RoleDropdown.vue'
 import RecipientContainer from './RecipientContainer.vue'
 import ExpirationDatepicker from './ExpirationDatepicker.vue'
-import { PeopleShareRoles, SharePermissions, ShareTypes } from '../../../../helpers/share'
+import {
+  PeopleShareRoles,
+  SharePermissions,
+  ShareTypes,
+  SpacePeopleShareRoles
+} from '../../../../helpers/share'
 
 export default {
   name: 'InviteCollaboratorForm',
@@ -124,11 +129,20 @@ export default {
     },
     selectedCollaboratorsLabel() {
       return this.$gettext('Invite')
+    },
+
+    resourceIsSpace() {
+      return this.highlightedFile.type === 'space'
     }
   },
   mounted() {
     this.fetchRecipients = debounce(this.fetchRecipients, 500)
-    this.selectedRole = PeopleShareRoles.list(this.highlightedFile.isFolder)[0]
+
+    if (this.resourceIsSpace) {
+      this.selectedRole = SpacePeopleShareRoles.all[0]
+    } else {
+      this.selectedRole = PeopleShareRoles.list(this.highlightedFile.isFolder)[0]
+    }
   },
 
   methods: {
@@ -142,9 +156,15 @@ export default {
           1,
           this.configuration.options.sharingRecipientsPerPage
         )
+
+        const shareType = this.resourceIsSpace ? ShareTypes.space.value : ShareTypes.user.value
         const users = recipients.exact.users
           .concat(recipients.users)
           .filter((user) => user.value.shareWith !== this.user.id)
+          .map((result) => {
+            // Inject the correct share type here as the response has always type "user"
+            return { ...result, value: { ...result.value, shareType } }
+          })
         const groups = recipients.exact.groups.concat(recipients.groups)
         const remotes = recipients.exact.remotes.concat(recipients.remotes)
 
@@ -229,15 +249,19 @@ export default {
           saveQueue.add(() => {
             const bitmask = this.selectedRole.hasCustomPermissions
               ? SharePermissions.permissionsToBitmask(this.customPermissions)
-              : SharePermissions.permissionsToBitmask(this.selectedRole.permissions(!this.isOcis))
+              : SharePermissions.permissionsToBitmask(
+                  this.selectedRole.permissions(!this.isOcis || this.resourceIsSpace)
+                )
             this.addShare({
               client: this.$client,
               path: this.highlightedFile.path,
               $gettext: this.$gettext,
               shareWith: collaborator.value.shareWith,
+              displayName: collaborator.label,
               shareType: collaborator.value.shareType,
               permissions: bitmask,
-              expirationDate: this.expirationDate
+              expirationDate: this.expirationDate,
+              spaceId: this.resourceIsSpace ? this.highlightedFile.id : null
             })
           })
         )

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

@@ -40,7 +40,9 @@ export default {
       formattedRecipient: {
         name: this.recipient.label,
         icon: this.getRecipientIcon(),
-        hasAvatar: this.recipient.value.shareType === ShareTypes.user.value,
+        hasAvatar:
+          this.recipient.value.shareType === ShareTypes.user.value ||
+          this.recipient.value.shareType === ShareTypes.space.value,
         isLoadingAvatar: true
       }
     }
@@ -57,10 +59,7 @@ export default {
   },
 
   async created() {
-    if (
-      this.capabilities.files_sharing.user.profile_picture &&
-      this.recipient.value.shareType === ShareTypes.user.value
-    ) {
+    if (this.capabilities.files_sharing.user.profile_picture && this.hasAvatar) {
       try {
         this.formattedRecipient.avatar = await avatarUrl({
           server: this.configuration.server,