From b8fd829aed6503b32c0a4ad33e0cadba6c959617 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 2 Mar 2022 10:15:57 +0100
Subject: [PATCH 1/8] Implement people sharing for spaces

---
 .../SideBar/Details/SpaceDetails.vue          |  90 +++++------
 .../SideBar/Shares/Collaborators/ListItem.vue |  35 ++++-
 .../components/SideBar/Shares/FileShares.vue  |   3 +-
 .../InviteCollaborator/AutocompleteItem.vue   |   6 +-
 .../InviteCollaboratorForm.vue                |  34 ++++-
 .../InviteCollaborator/RecipientContainer.vue |   9 +-
 .../SideBar/Shares/RoleDropdown.vue           |  29 +++-
 .../components/SideBar/Shares/SpaceShares.vue | 135 +++++++++++++++++
 packages/web-app-files/src/fileSideBars.js    |  10 ++
 .../web-app-files/src/helpers/resources.js    |  45 +++++-
 .../web-app-files/src/helpers/share/role.ts   |  49 ++++++
 .../web-app-files/src/helpers/share/type.ts   |   7 +-
 packages/web-app-files/src/store/actions.js   | 131 +++++++++++++++-
 packages/web-app-files/src/store/mutations.js |  21 ++-
 .../src/views/spaces/Project.vue              | 141 ++++++++++++------
 .../src/views/spaces/Projects.vue             |  90 ++++++-----
 16 files changed, 667 insertions(+), 168 deletions(-)
 create mode 100644 packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue

diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
index 0ae941e8674..50981adeedc 100644
--- a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
@@ -13,7 +13,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>
@@ -30,7 +37,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>
@@ -47,11 +54,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 {
@@ -63,13 +69,7 @@ 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) {
@@ -89,24 +89,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 }
   },
   computed: {
+    ...mapGetters('Files', [
+      'highlightedFile',
+      'currentFileOutgoingCollaborators',
+      'currentFileOutgoingLinks'
+    ]),
     ...mapGetters(['user']),
 
     space() {
@@ -118,46 +108,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.name === 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.peopleShareCount > 1
     },
     hasLinkShares() {
-      return false // @TODO
+      return this.linkShareCount > 1
     },
     peopleShareCount() {
-      return 0 // @TODO
+      return this.currentFileOutgoingCollaborators.length
     },
     linkShareCount() {
-      return 0 // @TODO
+      return this.currentFileOutgoingLinks.length
     },
     shareLabel() {
       let peopleString, linksString
@@ -205,7 +180,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>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
index b93c1aabe9a..bcfabad2809 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
+++ b/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"
+        :allow-share-permission="!isOcis || isSpace"
+        :index="index"
         class="files-collaborators-collaborator-role"
         @optionChange="shareRoleChanged"
       />
@@ -77,11 +80,14 @@
         @removeShare="removeShare"
       />
     </div>
+    <div v-else>
+      <span class="oc-mr-xs" v-text="share.role.label" />
+    </div>
   </div>
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions, mapState } from 'vuex'
 import Mixins from '../../../../mixins'
 import { DateTime } from 'luxon'
 
@@ -104,11 +110,17 @@ export default {
     modifiable: {
       type: Boolean,
       default: false
+    },
+    index: {
+      type: Number,
+      required: false,
+      default: 0
     }
   },
   computed: {
     ...mapGetters('Files', ['highlightedFile']),
     ...mapGetters(['isOcis']),
+    ...mapState(['user']),
 
     shareType() {
       return ShareTypes.getByValue(this.share.shareType)
@@ -126,6 +138,10 @@ export default {
       return this.shareType === ShareTypes.user
     },
 
+    isSpace() {
+      return this.shareType === ShareTypes.space
+    },
+
     shareTypeText() {
       return this.$gettext(this.shareType.label)
     },
@@ -135,6 +151,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 +264,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,
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 9698f3fab2b..c6f7a05d633 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -34,10 +34,11 @@
           class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm"
           :aria-label="$gettext('Share receivers')"
         >
-          <li v-for="collaborator in collaborators" :key="collaborator.key">
+          <li v-for="(collaborator, index) in collaborators" :key="collaborator.key">
             <collaborator-list-item
               :share="collaborator"
               :modifiable="!collaborator.indirect"
+              :index="index"
               @onDelete="$_ocCollaborators_deleteShare"
             />
           </li>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/AutocompleteItem.vue b/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/AutocompleteItem.vue
index 8ca2360b1a5..07a0e5c2a8a 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/AutocompleteItem.vue
+++ b/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
     },
diff --git a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/InviteCollaboratorForm.vue b/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/InviteCollaboratorForm.vue
index 5fafd8685f1..b0ed6baf3d0 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/InviteCollaboratorForm.vue
+++ b/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
             })
           })
         )
diff --git a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/RecipientContainer.vue b/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/RecipientContainer.vue
index afcdcbb1924..555bb3d7c6b 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/RecipientContainer.vue
+++ b/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,
diff --git a/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue
index 1788922f5a6..0c9f03a606e 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue
@@ -77,7 +77,12 @@
 <script>
 import get from 'lodash-es/get'
 import RoleItem from '../Shared/RoleItem.vue'
-import { PeopleShareRoles, SharePermissions, ShareRole } from '../../../helpers/share'
+import {
+  PeopleShareRoles,
+  SharePermissions,
+  ShareRole,
+  SpacePeopleShareRoles
+} from '../../../helpers/share'
 
 export default {
   name: 'RoleDropdown',
@@ -105,6 +110,11 @@ export default {
     allowSharePermission: {
       type: Boolean,
       required: true
+    },
+    index: {
+      type: Number,
+      required: false,
+      default: 0
     }
   },
   data() {
@@ -116,7 +126,7 @@ export default {
   computed: {
     roleButtonId() {
       if (this.shareId) {
-        return `files-collaborators-role-button-${this.shareId}`
+        return `files-collaborators-role-button-${this.shareId}-${this.index}`
       }
       return 'files-collaborators-role-button-new'
     },
@@ -136,10 +146,16 @@ export default {
       return PeopleShareRoles.custom(this.resource.isFolder)
     },
     availableRoles() {
+      if (this.resourceIsSpace) {
+        return SpacePeopleShareRoles.all
+      }
       return PeopleShareRoles.list(this.resource.isFolder)
     },
     availablePermissions() {
       return this.customPermissionsRole.permissions(this.allowSharePermission)
+    },
+    resourceIsSpace() {
+      return this.resource.type === 'space'
     }
   },
 
@@ -158,7 +174,14 @@ export default {
 
   methods: {
     applyRoleAndPermissions() {
-      this.selectedRole = this.existingRole || PeopleShareRoles.list(this.resource.isFolder)[0]
+      if (this.existingRole) {
+        this.selectedRole = this.existingRole
+      } else if (this.resourceIsSpace) {
+        this.selectedRole = SpacePeopleShareRoles.all[0]
+      } else {
+        this.selectedRole = PeopleShareRoles.list(this.resource.isFolder)[0]
+      }
+
       if (this.selectedRole.hasCustomPermissions) {
         this.customPermissions = this.existingPermissions
       } else {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue b/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue
new file mode 100644
index 00000000000..cf681ef71af
--- /dev/null
+++ b/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue
@@ -0,0 +1,135 @@
+<template>
+  <div id="oc-files-sharing-sidebar" class="oc-position-relative">
+    <oc-loader v-if="sharesLoading" :aria-label="$gettext('Loading people list')" />
+    <template v-else>
+      <invite-collaborator-form v-if="currentUserCanShare" key="new-collaborator" class="oc-my-s" />
+      <template v-if="hasCollaborators">
+        <ul
+          id="files-collaborators-list"
+          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">
+            <collaborator-list-item
+              :share="collaborator"
+              :modifiable="isModifiable(collaborator)"
+              @onDelete="$_ocCollaborators_deleteShare(collaborator)"
+            />
+          </li>
+        </ul>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions, mapState } from 'vuex'
+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 { spaceManager } from '../../../helpers/share'
+import { createLocationSpaces, isLocationSpacesActive } from '../../../router'
+import { useTask } from 'vue-concurrency'
+
+export default {
+  title: ($gettext) => {
+    return $gettext('People')
+  },
+  name: 'SpaceShares',
+  components: {
+    CollaboratorListItem,
+    InviteCollaboratorForm
+  },
+  inject: ['displayedItem'],
+  setup() {
+    const store = useStore()
+    const graphClient = clientService.graphAuthenticated(
+      store.getters.configuration.server,
+      store.getters.getToken
+    )
+
+    const loadSharesTask = useTask(function* (signal, ref) {
+      yield ref.loadCurrentFileOutgoingShares({
+        client: graphClient,
+        path: ref.space.id,
+        space: ref.space
+      })
+    })
+
+    return { graphClient, loadSharesTask }
+  },
+  computed: {
+    ...mapGetters('Files', [
+      'highlightedFile',
+      'currentFileOutgoingCollaborators',
+      'currentFileOutgoingSharesLoading',
+      'sharesTreeLoading'
+    ]),
+    ...mapState(['user']),
+    space() {
+      return this.displayedItem.value
+    },
+    sharesLoading() {
+      return this.currentFileOutgoingSharesLoading
+    },
+    hasCollaborators() {
+      return this.currentFileOutgoingCollaborators.length > 0
+    },
+    currentUserCanShare() {
+      return this.currentUserIsManager
+    },
+    currentUserIsManager() {
+      const currentUserCollaborator = this.currentFileOutgoingCollaborators.find(
+        (collaborator) => collaborator.collaborator.name === this.user.id
+      )
+
+      return currentUserCollaborator?.role?.name === spaceManager.name
+    }
+  },
+  mounted() {
+    this.loadSharesTask.perform(this)
+  },
+  methods: {
+    ...mapActions('Files', ['loadCurrentFileOutgoingShares', 'deleteShare']),
+
+    isModifiable(share) {
+      if (this.currentFileOutgoingCollaborators.length < 2) {
+        return false
+      }
+
+      const managers = this.currentFileOutgoingCollaborators.filter(
+        (collaborator) => collaborator.role.name === spaceManager.name
+      )
+
+      // only one manager -> can't remove those
+      if (managers.length < 2 && share.role.name === spaceManager.name) {
+        return false
+      }
+
+      return this.currentUserIsManager
+    },
+    $_ocCollaborators_deleteShare(share) {
+      this.deleteShare({
+        client: this.$client,
+        share: share,
+        resource: this.highlightedFile
+      }).then(() => {
+        // current user was removed from the share.
+        if (share.collaborator.name === this.user.id) {
+          if (isLocationSpacesActive(this.$router, 'files-spaces-projects')) {
+            return this.$router.go(0)
+          }
+          return this.$router.push(createLocationSpaces('files-spaces-projects'))
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.avatars-wrapper {
+  height: 40px;
+}
+</style>
diff --git a/packages/web-app-files/src/fileSideBars.js b/packages/web-app-files/src/fileSideBars.js
index 63ab3881037..6587dcd31f8 100644
--- a/packages/web-app-files/src/fileSideBars.js
+++ b/packages/web-app-files/src/fileSideBars.js
@@ -7,6 +7,7 @@ import FileLinks from './components/SideBar/Links/FileLinks.vue'
 import NoSelection from './components/SideBar/NoSelection.vue'
 import SpaceActions from './components/SideBar/Actions/SpaceActions.vue'
 import SpaceDetails from './components/SideBar/Details/SpaceDetails.vue'
+import SpaceShares from './components/SideBar/Shares/SpaceShares.vue'
 import { isLocationCommonActive, isLocationSpacesActive } from './router'
 
 export default [
@@ -112,5 +113,14 @@ export default [
     get enabled() {
       return highlightedFile?.type === 'space'
     }
+  }),
+  ({ highlightedFile }) => ({
+    app: 'space-share-item',
+    component: SpaceShares,
+    icon: 'group',
+    iconFillType: 'line',
+    get enabled() {
+      return highlightedFile?.type === 'space'
+    }
   })
 ]
diff --git a/packages/web-app-files/src/helpers/resources.js b/packages/web-app-files/src/helpers/resources.js
index d4845efb797..5eb3d547c68 100644
--- a/packages/web-app-files/src/helpers/resources.js
+++ b/packages/web-app-files/src/helpers/resources.js
@@ -4,7 +4,15 @@ import { DateTime } from 'luxon'
 import { getIndicators } from './statusIndicators'
 import { $gettext } from '../gettext'
 import { DavPermission, DavProperty } from 'web-pkg/src/constants'
-import { PeopleShareRoles, SharePermissions, ShareStatus, ShareTypes } from './share'
+import {
+  PeopleShareRoles,
+  SharePermissions,
+  ShareStatus,
+  ShareTypes,
+  spaceEditor,
+  spaceManager,
+  spaceViewer
+} from './share'
 
 function _getFileExtension(name) {
   const extension = path.extname(name)
@@ -324,9 +332,44 @@ export function buildShare(s, file, allowSharePermission) {
   if (parseInt(s.share_type) === ShareTypes.link.value) {
     return _buildLink(s)
   }
+  if (parseInt(s.share_type) === ShareTypes.space.value) {
+    return buildSpaceShare(s, file)
+  }
+
   return buildCollaboratorShare(s, file, allowSharePermission)
 }
 
+export function buildSpaceShare(s, spaceId) {
+  let permissions, role
+
+  switch (s.role) {
+    case spaceManager.inlineLabel:
+      permissions = 31
+      role = spaceManager
+      break
+    case spaceEditor.inlineLabel:
+      permissions = 15
+      role = spaceEditor
+      break
+    case spaceViewer.inlineLabel:
+      permissions = 1
+      role = spaceViewer
+      break
+  }
+
+  return {
+    shareType: ShareTypes.space.value,
+    id: spaceId,
+    collaborator: {
+      name: s.onPremisesSamAccountName,
+      displayName: s.displayName,
+      additionalInfo: null
+    },
+    permissions,
+    role
+  }
+}
+
 function _buildLink(link) {
   let description = ''
 
diff --git a/packages/web-app-files/src/helpers/share/role.ts b/packages/web-app-files/src/helpers/share/role.ts
index bd55034878e..4c52f658d7b 100644
--- a/packages/web-app-files/src/helpers/share/role.ts
+++ b/packages/web-app-files/src/helpers/share/role.ts
@@ -98,6 +98,20 @@ export class PeopleShareRole extends ShareRole {
   }
 }
 
+export class SpaceShareRole extends ShareRole {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public description(allowSharing: boolean): string {
+    switch (this.name) {
+      case spaceViewer.name:
+        return $gettext('Download and preview')
+      case spaceEditor.name:
+        return $gettext('Upload, edit, delete, download and preview')
+      case spaceManager.name:
+        return $gettext('Upload, edit, delete, download, preview and share')
+    }
+  }
+}
+
 export class LinkShareRole extends ShareRole {
   public description(allowSharing: boolean): string {
     return linkRoleDescriptions[this.bitmask(allowSharing)]
@@ -193,6 +207,41 @@ export const linkRoleUploaderFolder = new LinkShareRole(
   $gettext('uploader'),
   [SharePermissions.create]
 )
+export const spaceViewer = new SpaceShareRole(
+  'spaceViewer',
+  false,
+  $gettext('Viewer'),
+  $gettext('viewer'),
+  [SharePermissions.read]
+)
+export const spaceEditor = new SpaceShareRole(
+  'spaceEditor',
+  false,
+  $gettext('Editor'),
+  $gettext('editor'),
+  [SharePermissions.read, SharePermissions.update, SharePermissions.create, SharePermissions.delete]
+)
+export const spaceManager = new SpaceShareRole(
+  'spaceManager',
+  false,
+  $gettext('Manager'),
+  $gettext('manager'),
+  [
+    SharePermissions.read,
+    SharePermissions.update,
+    SharePermissions.create,
+    SharePermissions.delete,
+    SharePermissions.share
+  ]
+)
+
+export abstract class SpacePeopleShareRoles {
+  static readonly all = [spaceViewer, spaceEditor, spaceManager]
+
+  static getByBitmask(bitmask: number): ShareRole {
+    return this.all.find((r) => r.bitmask(true) === bitmask)
+  }
+}
 
 export abstract class PeopleShareRoles {
   static readonly all = [
diff --git a/packages/web-app-files/src/helpers/share/type.ts b/packages/web-app-files/src/helpers/share/type.ts
index 34114f95628..47c928d7489 100644
--- a/packages/web-app-files/src/helpers/share/type.ts
+++ b/packages/web-app-files/src/helpers/share/type.ts
@@ -35,12 +35,13 @@ export abstract class ShareTypes {
   static readonly link = new ShareType('link', 3, $gettext('Link'))
   static readonly guest = new ShareType('guest', 4, $gettext('Guest'))
   static readonly remote = new ShareType('remote', 6, $gettext('Federated'))
+  static readonly space = new ShareType('space', 7, $gettext('User'))
 
-  static readonly individuals = [this.user, this.guest, this.remote]
+  static readonly individuals = [this.user, this.guest, this.remote, this.space]
   static readonly collectives = [this.group]
   static readonly unauthenticated = [this.link]
-  static readonly authenticated = [this.user, this.group, this.guest, this.remote]
-  static readonly all = [this.user, this.group, this.link, this.guest, this.remote]
+  static readonly authenticated = [this.user, this.group, this.guest, this.remote, this.space]
+  static readonly all = [this.user, this.group, this.link, this.guest, this.remote, this.space]
 
   static isIndividual(type: ShareType): boolean {
     return this.individuals.includes(type)
diff --git a/packages/web-app-files/src/store/actions.js b/packages/web-app-files/src/store/actions.js
index 37d0160a99a..94fb0971f6e 100644
--- a/packages/web-app-files/src/store/actions.js
+++ b/packages/web-app-files/src/store/actions.js
@@ -2,12 +2,17 @@ import PQueue from 'p-queue'
 
 import { getParentPaths } from '../helpers/path'
 import { dirname } from 'path'
-import { buildResource, buildShare, buildCollaboratorShare } from '../helpers/resources'
+import {
+  buildResource,
+  buildShare,
+  buildCollaboratorShare,
+  buildSpaceShare
+} from '../helpers/resources'
 import { $gettext, $gettextInterpolate } from '../gettext'
 import { loadPreview } from '../helpers/resource'
 import { avatarUrl } from '../helpers/user'
 import { has } from 'lodash-es'
-import { ShareTypes } from '../helpers/share'
+import { ShareTypes, SpacePeopleShareRoles } from '../helpers/share'
 
 export default {
   updateFileProgress({ commit }, progress) {
@@ -144,11 +149,47 @@ export default {
       value: computeShareTypes(state.currentFileOutgoingShares)
     })
   },
-  loadCurrentFileOutgoingShares(context, { client, path }) {
+  loadCurrentFileOutgoingShares(context, { client, path, space }) {
     context.commit('CURRENT_FILE_OUTGOING_SHARES_SET', [])
     context.commit('CURRENT_FILE_OUTGOING_SHARES_ERROR', null)
     context.commit('CURRENT_FILE_OUTGOING_SHARES_LOADING', true)
 
+    if (space) {
+      const promises = []
+      const spaceShares = []
+
+      for (const permission of space.spacePermissions) {
+        for (const {
+          user: { id }
+        } of permission.grantedTo) {
+          promises.push(
+            client.users.getUser(id).then((resolved) => {
+              spaceShares.push(
+                buildSpaceShare(
+                  {
+                    ...resolved.data,
+                    role: permission.roles[0]
+                  },
+                  space.id
+                )
+              )
+            })
+          )
+        }
+      }
+
+      return Promise.all(promises)
+        .then(() => {
+          context.commit('CURRENT_FILE_OUTGOING_SHARES_SET', spaceShares)
+          context.dispatch('updateCurrentFileShareTypes')
+          context.commit('CURRENT_FILE_OUTGOING_SHARES_LOADING', false)
+        })
+        .catch((error) => {
+          context.commit('CURRENT_FILE_OUTGOING_SHARES_ERROR', error.message)
+          context.commit('CURRENT_FILE_OUTGOING_SHARES_LOADING', false)
+        })
+    }
+
     // see https://owncloud.dev/owncloud-sdk/Shares.html
     client.shares
       .getShares(path, { reshares: true })
@@ -211,6 +252,29 @@ export default {
       })
     }
 
+    if (share.shareType === ShareTypes.space.value) {
+      return new Promise((resolve, reject) => {
+        client.shares
+          .shareSpaceWithUser('', share.collaborator.name, share.id, {
+            permissions
+          })
+          .then(() => {
+            const role = SpacePeopleShareRoles.getByBitmask(permissions)
+            const shareObj = {
+              role: role.inlineLabel,
+              onPremisesSamAccountName: share.collaborator.name,
+              displayName: share.collaborator.displayName
+            }
+            const updatedShare = buildSpaceShare(shareObj, share.id)
+            commit('CURRENT_FILE_OUTGOING_SHARES_UPDATE', updatedShare)
+            resolve(updatedShare)
+          })
+          .catch((e) => {
+            reject(e)
+          })
+      })
+    }
+
     return new Promise((resolve, reject) => {
       client.shares
         .updateShare(share.id, params)
@@ -228,7 +292,10 @@ export default {
         })
     })
   },
-  addShare(context, { client, path, shareWith, shareType, permissions, expirationDate }) {
+  addShare(
+    context,
+    { client, path, shareWith, shareType, permissions, expirationDate, spaceId, displayName }
+  ) {
     if (shareType === ShareTypes.group.value) {
       client.shares
         .shareFileWithGroup(path, shareWith, {
@@ -261,6 +328,41 @@ export default {
       return
     }
 
+    if (shareType === ShareTypes.space.value) {
+      client.shares
+        .shareSpaceWithUser(path, shareWith, spaceId, {
+          permissions
+        })
+        .then(() => {
+          const role = SpacePeopleShareRoles.getByBitmask(permissions)
+          const shareObj = {
+            role: role.inlineLabel,
+            onPremisesSamAccountName: shareWith,
+            displayName
+          }
+
+          context.commit('CURRENT_FILE_OUTGOING_SHARES_ADD', buildSpaceShare(shareObj, spaceId))
+          context.commit('CURRENT_FILE_OUTGOING_SHARES_LOADING', true)
+
+          // FIXME
+          return Promise.all([]).then(() => {
+            context.commit('CURRENT_FILE_OUTGOING_SHARES_LOADING', false)
+          })
+        })
+        .catch((e) => {
+          context.dispatch(
+            'showMessage',
+            {
+              title: $gettext('Error while sharing.'),
+              desc: e,
+              status: 'danger'
+            },
+            { root: true }
+          )
+        })
+      return
+    }
+
     const remoteShare = shareType === ShareTypes.remote.value
     client.shares
       .shareFileWithUser(path, shareWith, {
@@ -293,12 +395,27 @@ export default {
       })
   },
   deleteShare(context, { client, share, resource }) {
+    const additionalParams = {}
+    if (share.shareType === ShareTypes.space.value) {
+      additionalParams.shareWith = share.collaborator.name
+    }
+
     client.shares
-      .deleteShare(share.id)
+      .deleteShare(share.id, additionalParams)
       .then(() => {
         context.commit('CURRENT_FILE_OUTGOING_SHARES_REMOVE', share)
-        context.dispatch('updateCurrentFileShareTypes')
-        context.dispatch('loadIndicators', { client, currentFolder: resource.path })
+
+        if (share.shareType !== ShareTypes.space.value) {
+          context.dispatch('updateCurrentFileShareTypes')
+          context.dispatch('loadIndicators', { client, currentFolder: resource.path })
+        } else {
+          context.commit('CURRENT_FILE_OUTGOING_SHARES_LOADING', true)
+
+          // FIXME
+          return Promise.all([]).then(() => {
+            context.commit('CURRENT_FILE_OUTGOING_SHARES_LOADING', false)
+          })
+        }
       })
       .catch((e) => {
         console.error(e)
diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
index 42929b18445..5c03d85323a 100644
--- a/packages/web-app-files/src/store/mutations.js
+++ b/packages/web-app-files/src/store/mutations.js
@@ -4,6 +4,7 @@ import { DateTime } from 'luxon'
 import { set, has } from 'lodash-es'
 import { getIndicators } from '../helpers/statusIndicators'
 import { renameResource } from '../helpers/resources'
+import { ShareTypes } from '../helpers/share'
 
 export default {
   UPDATE_FILE_PROGRESS(state, file) {
@@ -121,14 +122,28 @@ export default {
     state.currentFileOutgoingShares.push(share)
   },
   CURRENT_FILE_OUTGOING_SHARES_REMOVE(state, share) {
+    if (share.shareType === ShareTypes.space.value) {
+      state.currentFileOutgoingShares = state.currentFileOutgoingShares.filter(
+        (s) => share.id === s.id && share.collaborator.name !== s.collaborator.name
+      )
+      return
+    }
     state.currentFileOutgoingShares = state.currentFileOutgoingShares.filter(
       (s) => share.id !== s.id
     )
   },
   CURRENT_FILE_OUTGOING_SHARES_UPDATE(state, share) {
-    const fileIndex = state.currentFileOutgoingShares.findIndex((s) => {
-      return s.id === share.id
-    })
+    let fileIndex
+    if (share.shareType === ShareTypes.space.value) {
+      fileIndex = state.currentFileOutgoingShares.findIndex((s) => {
+        return share.id === s.id && share.collaborator.name === s.collaborator.name
+      })
+    } else {
+      fileIndex = state.currentFileOutgoingShares.findIndex((s) => {
+        return s.id === share.id
+      })
+    }
+
     if (fileIndex >= 0) {
       Vue.set(state.currentFileOutgoingShares, fileIndex, share)
     } else {
diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
index 5698327309b..9eee72e1b1c 100644
--- a/packages/web-app-files/src/views/spaces/Project.vue
+++ b/packages/web-app-files/src/views/spaces/Project.vue
@@ -26,52 +26,66 @@
             </div>
           </div>
           <div>
-            <div class="oc-flex oc-mb-s oc-flex-middle">
+            <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
               <h1 class="space-overview-name oc-text-truncate">{{ space.name }}</h1>
-              <oc-button
-                :id="`space-context-btn`"
-                v-oc-tooltip="$gettext('Show context menu')"
-                :aria-label="$gettext('Show context menu')"
-                appearance="raw"
-              >
-                <oc-icon name="more-2" />
-              </oc-button>
-              <oc-drop
-                :drop-id="`space-context-drop`"
-                :toggle="`#space-context-btn`"
-                mode="click"
-                close-on-click
-                :options="{ delayHide: 0 }"
-                padding-size="small"
-                position="right-start"
-              >
-                <input
-                  id="space-image-upload-input"
-                  ref="spaceImageInput"
-                  type="file"
-                  name="file"
-                  multiple
-                  tabindex="-1"
-                  accept="image/*"
-                  @change="$_uploadImage_uploadImageSpace"
-                />
-                <ul class="oc-list oc-files-context-actions">
-                  <li
-                    v-for="(action, actionIndex) in getContextMenuActions(space)"
-                    :key="`action-${actionIndex}`"
-                    class="oc-spaces-context-action oc-py-xs oc-px-s"
-                  >
-                    <oc-button
-                      appearance="raw"
-                      justify-content="left"
-                      @click="action.handler({ resources: [space] })"
+              <div class="oc-flex oc-flex-middle">
+                <oc-button
+                  v-if="!loadSharesTask.isRunning && currentFileOutgoingCollaborators.length"
+                  :aria-label="$gettext('Open context menu and show invited people')"
+                  appearance="raw"
+                  @click="openSidebarSharePanel"
+                >
+                  <oc-icon name="group" fill-type="line" size="small" />
+                  <span
+                    class="space-overview-people-count oc-text-small"
+                    v-text="peopleCountString"
+                  ></span>
+                </oc-button>
+                <oc-button
+                  :id="`space-context-btn`"
+                  v-oc-tooltip="$gettext('Show context menu')"
+                  :aria-label="$gettext('Show context menu')"
+                  appearance="raw"
+                >
+                  <oc-icon name="more-2" />
+                </oc-button>
+                <oc-drop
+                  :drop-id="`space-context-drop`"
+                  :toggle="`#space-context-btn`"
+                  mode="click"
+                  close-on-click
+                  :options="{ delayHide: 0 }"
+                  padding-size="small"
+                  position="right-start"
+                >
+                  <input
+                    id="space-image-upload-input"
+                    ref="spaceImageInput"
+                    type="file"
+                    name="file"
+                    multiple
+                    tabindex="-1"
+                    accept="image/*"
+                    @change="$_uploadImage_uploadImageSpace"
+                  />
+                  <ul class="oc-list oc-files-context-actions">
+                    <li
+                      v-for="(action, actionIndex) in getContextMenuActions(space)"
+                      :key="`action-${actionIndex}`"
+                      class="oc-spaces-context-action oc-py-xs oc-px-s"
                     >
-                      <oc-icon :name="action.icon" />
-                      {{ action.label() }}
-                    </oc-button>
-                  </li>
-                </ul>
-              </oc-drop>
+                      <oc-button
+                        appearance="raw"
+                        justify-content="left"
+                        @click="action.handler({ resources: [space] })"
+                      >
+                        <oc-icon :name="action.icon" />
+                        {{ action.label() }}
+                      </oc-button>
+                    </li>
+                  </ul>
+                </oc-drop>
+              </div>
             </div>
             <p v-if="space.description" class="oc-mt-rm">{{ space.description }}</p>
             <div>
@@ -261,9 +275,18 @@ export default {
       })
     })
 
+    const loadSharesTask = useTask(function* (signal, ref) {
+      yield ref.loadCurrentFileOutgoingShares({
+        client: graphClient,
+        path: ref.space.id,
+        space: ref.space
+      })
+    })
+
     return {
       space,
       loadResourcesTask,
+      loadSharesTask,
       resourceTargetLocation: createLocationSpaces('files-spaces-project'),
       paginatedResources,
       paginationPages,
@@ -290,7 +313,8 @@ export default {
       'selectedFiles',
       'currentFolder',
       'totalFilesCount',
-      'totalFilesSize'
+      'totalFilesSize',
+      'currentFileOutgoingCollaborators'
     ]),
 
     selected: {
@@ -319,6 +343,17 @@ export default {
     displayThumbnails() {
       return !this.configuration.options.disablePreviews
     },
+    peopleCountString() {
+      const translated = this.$ngettext(
+        '%{count} invited person',
+        '%{count} invited people',
+        this.currentFileOutgoingCollaborators.length
+      )
+
+      return this.$gettextInterpolate(translated, {
+        count: this.currentFileOutgoingCollaborators.length
+      })
+    },
     quotaModalIsOpen() {
       return this.$data.$_editQuota_modalOpen
     },
@@ -388,6 +423,7 @@ export default {
   },
   async mounted() {
     await this.loadResourcesTask.perform(this, false, this.$route.params.item || '')
+    this.loadSharesTask.perform(this)
 
     if (this.markdownResizeObserver) {
       this.markdownResizeObserver.unobserve(this.$refs.markdownContainer)
@@ -413,7 +449,11 @@ export default {
     }
   },
   methods: {
-    ...mapActions('Files', ['loadIndicators', 'loadPreview']),
+    ...mapActions('Files', ['loadIndicators', 'loadPreview', 'loadCurrentFileOutgoingShares']),
+    ...mapActions('Files/sidebar', {
+      openSidebarWithPanel: 'openWithPanel',
+      closeSidebar: 'close'
+    }),
     ...mapMutations('Files', [
       'SET_CURRENT_FOLDER',
       'LOAD_FILES',
@@ -485,6 +525,11 @@ export default {
     closeQuotaModal() {
       this.$_editQuota_closeModal()
     },
+    async openSidebarSharePanel() {
+      await this.closeSidebar()
+      this.SET_FILE_SELECTION([this.space])
+      this.openSidebarWithPanel('space-share-item')
+    },
     closeReadmeContentModal() {
       this.$_editReadmeContent_closeModal()
     }
@@ -510,6 +555,10 @@ export default {
     font-size: 1.5rem;
   }
 
+  &-people-count {
+    white-space: nowrap;
+  }
+
   .markdown-container.collapsed {
     max-height: 150px;
     overflow: hidden;
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index f0114c0a4c3..dae2db1fe72 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -52,7 +52,8 @@
             oc-grid-row-large
             oc-text-center
             oc-child-width-1-3@m
-            oc-child-width-1-5@l
+            oc-child-width-1-4@l
+            oc-child-width-1-5@xl
           "
         >
           <li v-for="space in spaces" :key="space.id" class="oc-mb-m">
@@ -97,40 +98,52 @@
                     </router-link>
                   </div>
                   <div class="oc-flex oc-flex-middle">
-                    <oc-button
-                      :id="`space-context-btn-${sanitizeSpaceId(space.id)}`"
-                      v-oc-tooltip="$gettext('Show context menu')"
-                      :aria-label="$gettext('Show context menu')"
-                      appearance="raw"
-                    >
-                      <oc-icon name="more-2" />
-                    </oc-button>
-                    <oc-drop
-                      :drop-id="`space-context-drop-${space.id}`"
-                      :toggle="`#space-context-btn-${sanitizeSpaceId(space.id)}`"
-                      mode="click"
-                      close-on-click
-                      :options="{ delayHide: 0 }"
-                      padding-size="small"
-                      position="bottom-end"
-                    >
-                      <ul class="oc-list oc-files-context-actions">
-                        <li
-                          v-for="(action, actionIndex) in getContextMenuActions(space)"
-                          :key="`action-${actionIndex}`"
-                          class="oc-files-context-action oc-px-s"
-                        >
-                          <oc-button
-                            appearance="raw"
-                            justify-content="left"
-                            @click="action.handler({ resources: [space] })"
+                    <div>
+                      <oc-button
+                        v-oc-tooltip="$gettext('Show invited people')"
+                        :aria-label="$gettext('Show invited people')"
+                        appearance="raw"
+                        @click="openSidebarSharePanel(space)"
+                      >
+                        <oc-icon name="group" />
+                      </oc-button>
+                    </div>
+                    <div>
+                      <oc-button
+                        :id="`space-context-btn-${sanitizeSpaceId(space.id)}`"
+                        v-oc-tooltip="$gettext('Show context menu')"
+                        :aria-label="$gettext('Show context menu')"
+                        appearance="raw"
+                      >
+                        <oc-icon name="more-2" />
+                      </oc-button>
+                      <oc-drop
+                        :drop-id="`space-context-drop-${space.id}`"
+                        :toggle="`#space-context-btn-${sanitizeSpaceId(space.id)}`"
+                        mode="click"
+                        close-on-click
+                        :options="{ delayHide: 0 }"
+                        padding-size="small"
+                        position="bottom-end"
+                      >
+                        <ul class="oc-list oc-files-context-actions">
+                          <li
+                            v-for="(action, actionIndex) in getContextMenuActions(space)"
+                            :key="`action-${actionIndex}`"
+                            class="oc-files-context-action oc-px-s"
                           >
-                            <oc-icon :name="action.icon" fill-type="line" class="oc-flex" />
-                            {{ action.label() }}
-                          </oc-button>
-                        </li>
-                      </ul>
-                    </oc-drop>
+                            <oc-button
+                              appearance="raw"
+                              justify-content="left"
+                              @click="action.handler({ resources: [space] })"
+                            >
+                              <oc-icon :name="action.icon" fill-type="line" class="oc-flex" />
+                              {{ action.label() }}
+                            </oc-button>
+                          </li>
+                        </ul>
+                      </oc-drop>
+                    </div>
                   </div>
                 </div>
                 <p
@@ -246,6 +259,10 @@ export default {
   },
   methods: {
     ...mapActions(['createModal', 'hideModal', 'setModalInputErrorMessage']),
+    ...mapActions('Files/sidebar', {
+      openSidebarWithPanel: 'openWithPanel',
+      closeSidebar: 'close'
+    }),
     ...mapMutations('Files', [
       'SET_CURRENT_FOLDER',
       'LOAD_FILES',
@@ -361,6 +378,11 @@ export default {
         return 'state-trashed'
       }
       return ''
+    },
+    async openSidebarSharePanel(space) {
+      await this.closeSidebar()
+      this.SET_FILE_SELECTION([space])
+      this.openSidebarWithPanel('space-share-item')
     }
   }
 }

From e9428dd8f49b73e98b206e8c39fe81338b3d0d7d Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 2 Mar 2022 10:17:20 +0100
Subject: [PATCH 2/8] Add and adjust unit tests

---
 __fixtures__/collaborators.js                 |  23 +-
 .../SideBar/Details/SpaceDetails.spec.js      |  19 +-
 .../__snapshots__/SpaceDetails.spec.js.snap   |   4 +-
 .../Shares/Collaborators/ListItem.spec.js     |  23 +-
 .../SideBar/Shares/FileShares.spec.js         |   2 +-
 .../RecipientContainer.spec.js.snap           |   7 +-
 .../SideBar/Shares/SpaceShares.spec.js        | 246 ++++++++++++++++++
 .../__snapshots__/FileShares.spec.js.snap     |   4 +-
 .../__snapshots__/SpaceShares.spec.js.snap    |  60 +++++
 .../tests/unit/store/actions.spec.js          | 146 +++++++++++
 .../tests/unit/store/mutations.spec.js        |  46 ++++
 .../tests/unit/views/spaces/Project.spec.js   |  19 +-
 .../spaces/__snapshots__/Project.spec.js.snap | 186 ++++++-------
 .../__snapshots__/Projects.spec.js.snap       |  46 ++--
 14 files changed, 700 insertions(+), 131 deletions(-)
 create mode 100644 packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceShares.spec.js
 create mode 100644 packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceShares.spec.js.snap
 create mode 100644 packages/web-app-files/tests/unit/store/actions.spec.js

diff --git a/__fixtures__/collaborators.js b/__fixtures__/collaborators.js
index 51cd46f0cce..e82820df067 100644
--- a/__fixtures__/collaborators.js
+++ b/__fixtures__/collaborators.js
@@ -1,6 +1,7 @@
 import {
   peopleRoleEditorFile,
-  peopleRoleViewerFile
+  peopleRoleViewerFile,
+  spaceEditor
 } from '../packages/web-app-files/src/helpers/share'
 
 export default [
@@ -142,5 +143,25 @@ export default [
     role: peopleRoleViewerFile,
     path: "/Neuer Ordner-'singe'",
     key: "collaborator-51a8aafe-cd40-4d0a-8566-87a1149b7fea"
+  },
+  {
+    shareType: 7,
+    id: "f5c28709-b921-4ec8-b39a-4c243709b514",
+    collaborator: {
+      name: "einstein",
+      displayName: "Albert Einstein",
+      additionalInfo: "einstein@example.org"
+    },
+    owner: {
+      name: "admin",
+      displayName: "Admin",
+      additionalInfo: "admin@example.org"
+    },
+    fileOwner: {
+      name: "admin",
+      displayName: "Admin",
+      additionalInfo: "admin@example.org"
+    },
+    role: spaceEditor
   }
 ]
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Details/SpaceDetails.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Details/SpaceDetails.spec.js
index b9b359279fd..c558189929f 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Details/SpaceDetails.spec.js
+++ b/packages/web-app-files/tests/unit/components/SideBar/Details/SpaceDetails.spec.js
@@ -5,6 +5,7 @@ import stubs from '../../../../../../../tests/unit/stubs'
 import GetTextPlugin from 'vue-gettext'
 import AsyncComputed from 'vue-async-computed'
 import VueCompositionAPI from '@vue/composition-api/dist/vue-composition-api'
+import { ShareTypes, spaceManager } from '../../../../../src/helpers/share'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
@@ -27,6 +28,18 @@ const spaceMock = {
   }
 }
 
+const spaceShare = {
+  id: '1',
+  shareType: ShareTypes.space.value,
+  collaborator: {
+    onPremisesSamAccountName: 'Alice',
+    displayName: 'alice'
+  },
+  role: {
+    name: spaceManager.name
+  }
+}
+
 const formDateFromJSDate = jest.fn().mockImplementation(() => 'ABSOLUTE_TIME')
 const formDateFromHTTP = jest.fn().mockImplementation(() => 'ABSOLUTE_TIME')
 const refreshShareDetailsTree = jest.fn()
@@ -38,7 +51,7 @@ beforeEach(() => {
 })
 
 describe('Details SideBar Panel', () => {
-  it('displayes the details side panel', () => {
+  it('displays the details side panel', () => {
     const wrapper = createWrapper(spaceMock)
     expect(wrapper).toMatchSnapshot()
   })
@@ -76,7 +89,9 @@ function createWrapper(spaceResource) {
           getters: {
             highlightedFile: function () {
               return spaceResource
-            }
+            },
+            currentFileOutgoingCollaborators: () => [spaceShare],
+            currentFileOutgoingLinks: () => []
           }
         }
       }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/SpaceDetails.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/SpaceDetails.spec.js.snap
index a63d31fd829..8324e5f0acd 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/SpaceDetails.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Details/__snapshots__/SpaceDetails.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Details SideBar Panel displayes the details side panel 1`] = `
+exports[`Details SideBar Panel displays the details side panel 1`] = `
 <div id="oc-space-details-sidebar">
   <div class="oc-space-details-sidebar-image oc-text-center">
     <oc-icon-stub name="layout-grid" size="xxlarge" class="space-default-image oc-px-m oc-py-m"></oc-icon-stub>
@@ -15,7 +15,7 @@ exports[`Details SideBar Panel displayes the details side panel 1`] = `
       <!---->
       <tr>
         <th scope="col" class="oc-pr-s">Manager</th>
-        <td><span></span></td>
+        <td><span>alice</span></td>
       </tr>
       <tr>
         <th scope="col" class="oc-pr-s">Quota</th>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/ListItem.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/ListItem.spec.js
index de607e403cf..c57fc166737 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/ListItem.spec.js
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/ListItem.spec.js
@@ -4,6 +4,7 @@ import ListItem from '../../../../../../src/components/SideBar/Shares/Collaborat
 import stubs from '../../../../../../../../tests/unit/stubs'
 import GetTextPlugin from 'vue-gettext'
 import { peopleRoleViewerFolder, ShareTypes } from '../../../../../../src/helpers/share'
+import Users from '@/__fixtures__/users'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
@@ -39,15 +40,16 @@ describe('Collaborator ListItem component', () => {
       })
     })
     describe('non-user share types', () => {
-      it.each(ShareTypes.all.filter((shareType) => shareType !== ShareTypes.user))(
-        'should display an oc-avatar-item for any non-user share types',
-        (shareType) => {
-          const wrapper = createWrapper({ shareType: shareType.value })
-          expect(wrapper.find(selectors.userAvatarImage).exists()).toBeFalsy()
-          expect(wrapper.find(selectors.notUserAvatar).exists()).toBeTruthy()
-          expect(wrapper.find(selectors.notUserAvatar).attributes().name).toEqual(shareType.key)
-        }
-      )
+      it.each(
+        ShareTypes.all.filter(
+          (shareType) => ![ShareTypes.user, ShareTypes.space].includes(shareType)
+        )
+      )('should display an oc-avatar-item for any non-user share types', (shareType) => {
+        const wrapper = createWrapper({ shareType: shareType.value })
+        expect(wrapper.find(selectors.userAvatarImage).exists()).toBeFalsy()
+        expect(wrapper.find(selectors.notUserAvatar).exists()).toBeTruthy()
+        expect(wrapper.find(selectors.notUserAvatar).attributes().name).toEqual(shareType.key)
+      })
     })
   })
   describe('share info', () => {
@@ -102,6 +104,9 @@ function createWrapper({
 } = {}) {
   return mount(ListItem, {
     store: new Vuex.Store({
+      state: {
+        user: Users.alice
+      },
       getters: {
         isOcis: () => false
       },
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 75e27c1f3b5..4bd7b562703 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
@@ -14,7 +14,7 @@ localVue.use(GetTextPlugin, {
   silent: true
 })
 
-const user = Users.admin
+const user = Users.alice
 const collaborators = [Collaborators[0], Collaborators[1]]
 
 const selectors = {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap
index 3f1c1c3aa8d..d84bb63e827 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/InviteCollaborator/__snapshots__/RecipientContainer.spec.js.snap
@@ -1,11 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`InviteCollaborator RecipientContainer displays an avatar image if capability is present 1`] = `
-<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><span aria-label="Loading avatar" tabindex="-1" role="img" class="oc-spinner oc-spinner-s" data-testid="recipient-avatar-spinner"></span>
+<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><span width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein" class="vue-avatar--wrapper oc-avatar oc-recipient-avatar" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: rgb(194, 28, 83); font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" data-testid="recipient-avatar"><span class="avatarInitials">AE</span></span>
 <p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw">
   <ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub>
-</button>
-</span>
+</button></span>
 `;
 
 exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 1`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
@@ -15,3 +14,5 @@ exports[`InviteCollaborator RecipientContainer renders a recipient with a desele
 exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 3`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-guest-user"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">guest-user</p> <button aria-label="Deselect guest-user" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
 
 exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 4`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-remote-user"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">remote-user</p> <button aria-label="Deselect remote-user" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
+
+exports[`InviteCollaborator RecipientContainer renders a recipient with a deselect button different recipients for different shareTypes 5`] = `<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><ocicon-stub name="person" filltype="fill" accessiblelabel="User" type="span" size="small" variation="passive" color="" data-testid="recipient-icon" class="oc-recipient-icon"></ocicon-stub> <p data-testid="recipient-name" class="oc-recipient-name">Albert Einstein</p> <button aria-label="Deselect Albert Einstein" class="files-share-invite-recipient-btn-remove oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><ocicon-stub name="close" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></ocicon-stub></button></span>`;
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceShares.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceShares.spec.js
new file mode 100644
index 00000000000..059ecce367f
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceShares.spec.js
@@ -0,0 +1,246 @@
+import SpaceShares from '@files/src/components/SideBar/Shares/SpaceShares.vue'
+import { createLocalVue, mount, shallowMount } from '@vue/test-utils'
+import GetTextPlugin from 'vue-gettext'
+import Vuex from 'vuex'
+import DesignSystem from 'owncloud-design-system'
+import Users from '@/__fixtures__/users'
+import { ShareTypes, spaceManager, spaceViewer } from '../../../../../src/helpers/share'
+import VueCompositionAPI from '@vue/composition-api/dist/vue-composition-api'
+
+const localVue = createLocalVue()
+localVue.use(DesignSystem)
+localVue.use(Vuex)
+localVue.use(VueCompositionAPI)
+localVue.use(GetTextPlugin, {
+  translations: 'does-not-matter.json',
+  silent: true
+})
+
+const user = Users.alice
+const spaceMock = {
+  type: 'space',
+  name: ' space',
+  id: '1',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  spaceQuota: {
+    used: 100,
+    total: 1000
+  }
+}
+
+const outgoingShares = [
+  {
+    id: '1',
+    shareType: ShareTypes.space.value,
+    collaborator: {
+      name: user.id,
+      displayName: user.displayname
+    },
+    role: {
+      name: spaceManager.name
+    }
+  },
+  {
+    id: '2',
+    shareType: ShareTypes.space.value,
+    collaborator: {
+      onPremisesSamAccountName: 'Einstein',
+      displayName: 'einstein'
+    },
+    role: {
+      name: spaceViewer.name
+    }
+  },
+  {
+    id: '3',
+    shareType: ShareTypes.space.value,
+    collaborator: {
+      onPremisesSamAccountName: 'Marie',
+      displayName: 'marie'
+    },
+    role: {
+      name: spaceManager.name
+    }
+  }
+]
+
+describe('SpaceShares', () => {
+  it('renders loading spinner while loading', () => {
+    const wrapper = getShallowMountedWrapper(
+      {
+        user
+      },
+      true
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+  describe('if currentUser can share', () => {
+    it('initially renders add people dialog', () => {
+      const wrapper = getShallowMountedWrapper({
+        user,
+        outgoingCollaborators: [outgoingShares[0]]
+      })
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+
+  describe('if currentUser can not share', () => {
+    it('other shares are listed, but creating/editing shares is not possible', () => {
+      const wrapper = getShallowMountedWrapper({
+        user,
+        outgoingCollaborators: [outgoingShares[1]]
+      })
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+
+  describe('if currentUser is manager', () => {
+    it('allows role edit of the current user if another user is manager', () => {
+      const wrapper = getShallowMountedWrapper({
+        user,
+        outgoingCollaborators: outgoingShares
+      })
+      expect(wrapper).toMatchSnapshot()
+    })
+    it('does not allow role edit of the current user if they are the only manager', () => {
+      const wrapper = getShallowMountedWrapper({
+        user,
+        outgoingCollaborators: [outgoingShares[0], outgoingShares[1]]
+      })
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+
+  describe('if currentUser can delete', () => {
+    it('reacts on delete events by collaborator list items', async () => {
+      const wrapper = getMountedWrapper({
+        user,
+        outgoingCollaborators: outgoingShares
+      })
+
+      const spyOnCollaboratorDelete = jest.spyOn(wrapper.vm, 'deleteShare')
+      wrapper
+        .find(`div[data-testid="collaborator-user-item-${outgoingShares[0].collaborator.name}"]`)
+        .vm.$emit('onDelete')
+      await wrapper.vm.$nextTick()
+      expect(spyOnCollaboratorDelete).toHaveBeenCalledTimes(1)
+    })
+  })
+})
+
+const storeOptions = (data, isInLoadingState) => {
+  const { user, outgoingCollaborators = [] } = data
+
+  return {
+    state: {
+      user
+    },
+    modules: {
+      Files: {
+        namespaced: true,
+        getters: {
+          highlightedFile: () => spaceMock,
+          currentFileOutgoingCollaborators: () => outgoingCollaborators,
+          currentFileOutgoingSharesLoading: () => isInLoadingState,
+          sharesTreeLoading: () => false
+        },
+        actions: {
+          loadCurrentFileOutgoingShares: jest.fn(),
+          deleteShare: jest.fn()
+        },
+        mutations: {
+          SET_HIGHLIGHTED_FILE(state, file) {
+            state.highlightedFile = spaceMock
+          }
+        }
+      }
+    },
+    getters: {
+      isOcis: () => true,
+      user: () => user,
+      capabilities: () => {
+        return {
+          files_sharing: {
+            user: {
+              expire_date: {
+                enabled: true,
+                days: 10
+              }
+            },
+            group: {
+              expire_date: {
+                enabled: true,
+                days: 10
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+function getShallowMountedWrapper(data, loading = false) {
+  return shallowMount(getComponent(loading), {
+    localVue,
+    store: createStore(data, loading),
+    stubs: {
+      'oc-button': true,
+      'oc-icon': true,
+      'oc-spinner': true
+    },
+    provide: {
+      displayedItem: {
+        value: spaceMock
+      }
+    }
+  })
+}
+
+function getMountedWrapper(data, loading = false) {
+  return mount(getComponent(loading), {
+    localVue,
+    store: createStore(data, loading),
+    stubs: {
+      'oc-button': true,
+      'oc-icon': true,
+      'oc-spinner': true,
+      'avatar-image': true,
+      'role-dropdown': true,
+      'edit-dropdown': true
+    },
+    mocks: {
+      $router: {
+        go: jest.fn(),
+        push: jest.fn(),
+        currentRoute: {
+          name: 'some-route',
+          query: { page: 1 }
+        },
+        resolve: (r) => ({ href: r.name })
+      }
+    },
+    provide: {
+      displayedItem: {
+        value: spaceMock
+      }
+    }
+  })
+}
+
+function createStore(data, loading) {
+  return new Vuex.Store(storeOptions(data, loading))
+}
+
+function getComponent(loading) {
+  return {
+    ...SpaceShares,
+    setup: () => ({
+      graphClient: {},
+      loadSharesTask: {
+        isRunning: loading,
+        perform: jest.fn()
+      }
+    })
+  }
+}
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 20889013bfe..59d0ff5d5af 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
@@ -27,10 +27,10 @@ exports[`FileShares if there are collaborators present renders sharedWithLabel a
   </div>
   <ul id="files-collaborators-list" aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
     <li>
-      <collaborator-list-item-stub share="[object Object]" modifiable="true"></collaborator-list-item-stub>
+      <collaborator-list-item-stub share="[object Object]" modifiable="true" index="0"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub share="[object Object]" modifiable="true"></collaborator-list-item-stub>
+      <collaborator-list-item-stub share="[object Object]" modifiable="true" index="1"></collaborator-list-item-stub>
     </li>
   </ul>
 </div>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceShares.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceShares.spec.js.snap
new file mode 100644
index 00000000000..92aeb3f81d5
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceShares.spec.js.snap
@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SpaceShares if currentUser can not share other shares are listed, but creating/editing shares is not possible 1`] = `
+<div id="oc-files-sharing-sidebar" class="oc-position-relative">
+  <!---->
+  <ul id="files-collaborators-list" aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
+    <li>
+      <collaborator-list-item-stub share="[object Object]" index="0"></collaborator-list-item-stub>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`SpaceShares if currentUser can share initially renders add people dialog 1`] = `
+<div id="oc-files-sharing-sidebar" class="oc-position-relative">
+  <invite-collaborator-form-stub class="oc-my-s"></invite-collaborator-form-stub>
+  <ul id="files-collaborators-list" aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
+    <li>
+      <collaborator-list-item-stub share="[object Object]" index="0"></collaborator-list-item-stub>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`SpaceShares if currentUser is manager allows role edit of the current user if another user is manager 1`] = `
+<div id="oc-files-sharing-sidebar" class="oc-position-relative">
+  <invite-collaborator-form-stub class="oc-my-s"></invite-collaborator-form-stub>
+  <ul id="files-collaborators-list" aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
+    <li>
+      <collaborator-list-item-stub share="[object Object]" modifiable="true" index="0"></collaborator-list-item-stub>
+    </li>
+    <li>
+      <collaborator-list-item-stub share="[object Object]" modifiable="true" index="0"></collaborator-list-item-stub>
+    </li>
+    <li>
+      <collaborator-list-item-stub share="[object Object]" modifiable="true" index="0"></collaborator-list-item-stub>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`SpaceShares if currentUser is manager does not allow role edit of the current user if they are the only manager 1`] = `
+<div id="oc-files-sharing-sidebar" class="oc-position-relative">
+  <invite-collaborator-form-stub class="oc-my-s"></invite-collaborator-form-stub>
+  <ul id="files-collaborators-list" aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
+    <li>
+      <collaborator-list-item-stub share="[object Object]" index="0"></collaborator-list-item-stub>
+    </li>
+    <li>
+      <collaborator-list-item-stub share="[object Object]" modifiable="true" index="0"></collaborator-list-item-stub>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`SpaceShares renders loading spinner while loading 1`] = `
+<div id="oc-files-sharing-sidebar" class="oc-position-relative">
+  <oc-loader-stub arialabel="Loading people list"></oc-loader-stub>
+</div>
+`;
diff --git a/packages/web-app-files/tests/unit/store/actions.spec.js b/packages/web-app-files/tests/unit/store/actions.spec.js
new file mode 100644
index 00000000000..89de538a58c
--- /dev/null
+++ b/packages/web-app-files/tests/unit/store/actions.spec.js
@@ -0,0 +1,146 @@
+import actions from '../../../src/store/actions'
+import { ShareTypes, spaceManager } from '../../../src/helpers/share'
+
+const stateMock = {
+  commit: jest.fn(),
+  dispatch: jest.fn(),
+  getters: {
+    highlightedFile: { isFolder: false }
+  },
+  rootGetters: {
+    isOcis: true
+  }
+}
+
+const clientMock = {
+  users: {
+    getUser: () => {
+      return Promise.resolve({})
+    }
+  },
+  shares: {
+    getShares: () => {
+      return Promise.resolve([{ shareInfo: { share_type: ShareTypes.user.value, permissions: 1 } }])
+    },
+    updateShare: () => {
+      return Promise.resolve({ shareInfo: { share_type: ShareTypes.user.value, permissions: 1 } })
+    },
+    deleteShare: () => {
+      return Promise.resolve({})
+    },
+    shareSpaceWithUser: () => {
+      return Promise.resolve({})
+    },
+    shareFileWithUser: () => {
+      return Promise.resolve({ shareInfo: { share_type: ShareTypes.user.value, permissions: 1 } })
+    }
+  }
+}
+
+const shareMock = {
+  id: '1',
+  shareType: ShareTypes.user.value
+}
+
+const spaceMock = {
+  type: 'space',
+  name: ' space',
+  id: '1',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  spacePermissions: [{ grantedTo: [{ user: { id: 1 } }], roles: ['manager'] }],
+  spaceQuota: {
+    used: 100,
+    total: 1000
+  }
+}
+
+const spaceShareMock = {
+  id: '1',
+  shareType: ShareTypes.space.value,
+  collaborator: {
+    onPremisesSamAccountName: 'Alice',
+    displayName: 'alice'
+  },
+  role: {
+    name: spaceManager.name
+  }
+}
+
+describe('vuex store actions', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('loadCurrentFileOutgoingShares', () => {
+    it.each([
+      { space: spaceMock, expectedCommitCalls: 5, expectedDispatchCalls: 1 },
+      { space: null, expectedCommitCalls: 5, expectedDispatchCalls: 1 }
+    ])('succeeds using action %s', async (dataSet) => {
+      const commitSpy = jest.spyOn(stateMock, 'commit')
+      const dispatchSpy = jest.spyOn(stateMock, 'dispatch')
+
+      await actions.loadCurrentFileOutgoingShares(stateMock, {
+        client: clientMock,
+        path: 'path',
+        space: dataSet.space
+      })
+
+      expect(commitSpy).toBeCalledTimes(dataSet.expectedCommitCalls)
+      expect(dispatchSpy).toBeCalledTimes(dataSet.expectedDispatchCalls)
+    })
+  })
+
+  describe('changeShare', () => {
+    it.each([{ share: spaceShareMock }, { share: shareMock }])(
+      'succeeds using action %s',
+      async (dataSet) => {
+        const commitSpy = jest.spyOn(stateMock, 'commit')
+
+        await actions.changeShare(stateMock, {
+          client: clientMock,
+          share: dataSet.share,
+          permissions: 1,
+          expirationDate: null
+        })
+
+        expect(commitSpy).toBeCalledTimes(1)
+      }
+    )
+  })
+
+  describe('addShare', () => {
+    it.each([
+      { shareType: spaceShareMock.shareType, spaceId: spaceMock.id, expectedCommitCalls: 2 },
+      { shareType: shareMock.shareType, spaceId: null, expectedCommitCalls: 1 }
+    ])('succeeds using action %s', async (dataSet) => {
+      const commitSpy = jest.spyOn(stateMock, 'commit')
+
+      await actions.addShare(stateMock, {
+        client: clientMock,
+        shareType: dataSet.shareType,
+        spaceId: dataSet.spaceId,
+        permissions: 1,
+        expirationDate: null
+      })
+
+      expect(commitSpy).toBeCalledTimes(dataSet.expectedCommitCalls)
+    })
+  })
+
+  describe('deleteShare', () => {
+    it.each([
+      { share: spaceShareMock, spaceId: spaceMock.id, expectedCommitCalls: 2 },
+      { share: shareMock, spaceId: null, expectedCommitCalls: 1 }
+    ])('succeeds using action %s', async (dataSet) => {
+      const commitSpy = jest.spyOn(stateMock, 'commit')
+
+      await actions.deleteShare(stateMock, {
+        client: clientMock,
+        share: dataSet.share,
+        resource: {}
+      })
+
+      expect(commitSpy).toBeCalledTimes(dataSet.expectedCommitCalls)
+    })
+  })
+})
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 beb13c7ab31..d0d7c92bcdb 100644
--- a/packages/web-app-files/tests/unit/store/mutations.spec.js
+++ b/packages/web-app-files/tests/unit/store/mutations.spec.js
@@ -1,5 +1,6 @@
 import mutations from '../../../src/store/mutations'
 import { cloneDeep } from 'lodash-es'
+import { ShareTypes } from '../../../src/helpers/share'
 
 const stateFixture = {
   files: [
@@ -83,4 +84,49 @@ describe('vuex store mutations', () => {
 
     expect(state.areHiddenFilesShown).toEqual(false)
   })
+
+  describe('CURRENT_FILE_OUTGOING_SHARES_REMOVE', () => {
+    it('removes an outgoing user share', () => {
+      const shareToRemove = { id: 1, shareType: ShareTypes.user.value }
+      const state = { currentFileOutgoingShares: [shareToRemove] }
+      mutations.CURRENT_FILE_OUTGOING_SHARES_REMOVE(state, shareToRemove)
+
+      expect(state.currentFileOutgoingShares.length).toEqual(0)
+    })
+    it('removes an outgoing space share', () => {
+      const shareToRemove = {
+        id: 1,
+        shareType: ShareTypes.space.value,
+        collaborator: { name: 'admin' }
+      }
+      const state = { currentFileOutgoingShares: [shareToRemove] }
+      mutations.CURRENT_FILE_OUTGOING_SHARES_REMOVE(state, shareToRemove)
+
+      expect(state.currentFileOutgoingShares.length).toEqual(0)
+    })
+  })
+
+  describe('CURRENT_FILE_OUTGOING_SHARES_UPDATE', () => {
+    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)
+
+      expect(state.currentFileOutgoingShares[0]).toEqual(updatedShare)
+    })
+    it('updates an outgoing space share', () => {
+      const share = {
+        id: 1,
+        shareType: ShareTypes.space.value,
+        permissions: 1,
+        collaborator: { name: 'admin' }
+      }
+      const state = { currentFileOutgoingShares: [share] }
+      const updatedShare = { ...share, permissions: 31 }
+      mutations.CURRENT_FILE_OUTGOING_SHARES_UPDATE(state, updatedShare)
+
+      expect(state.currentFileOutgoingShares[0]).toEqual(updatedShare)
+    })
+  })
 })
diff --git a/packages/web-app-files/tests/unit/views/spaces/Project.spec.js b/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
index 585964f6583..e4044e34dd1 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
+++ b/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
@@ -6,6 +6,7 @@ import Files from '@/__fixtures__/files'
 import mockAxios from 'jest-mock-axios'
 import SpaceProject from '../../../../src/views/spaces/Project.vue'
 import Vuex from 'vuex'
+import { ShareTypes, spaceManager } from '../../../../src/helpers/share'
 
 localVue.use(GetTextPlugin, {
   translations: 'does-not-matter.json',
@@ -58,6 +59,18 @@ const spaceMocks = {
   }
 }
 
+const spaceShare = {
+  id: '1',
+  shareType: ShareTypes.space.value,
+  collaborator: {
+    onPremisesSamAccountName: 'Alice',
+    displayName: 'alice'
+  },
+  role: {
+    name: spaceManager.name
+  }
+}
+
 describe('Spaces project view', () => {
   it('should not show anything if space can not be found', async () => {
     mockAxios.request.mockImplementationOnce(() => {
@@ -230,14 +243,16 @@ function getMountedWrapper(spaceResources = [], spaceItem = null, imageContent =
             LOAD_FILES: jest.fn()
           },
           actions: {
-            loadIndicators: jest.fn()
+            loadIndicators: jest.fn(),
+            loadCurrentFileOutgoingShares: jest.fn()
           },
           getters: {
             activeFiles: () => spaceResources,
             totalFilesCount: () => ({ files: spaceResources.length, folders: 0 }),
             selectedFiles: () => [],
             totalFilesSize: () => 10,
-            pages: () => 1
+            pages: () => 1,
+            currentFileOutgoingCollaborators: () => [spaceShare]
           }
         }
       }
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
index d2ec3a7e51a..6a3ae8a31c8 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
@@ -10,51 +10,56 @@ exports[`Spaces project view space image should show if given 1`] = `
         <div class="oc-position-relative"><img alt="" src="data:image/png;base64,ZmlsZWNvbnRlbnQ=" class="space-overview-image oc-cursor-pointer"></div>
       </div>
       <div>
-        <div class="oc-flex oc-mb-s oc-flex-middle">
+        <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
           <h1 class="space-overview-name oc-text-truncate">space</h1>
-          <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn">
-            <oc-icon-stub name="more-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-          </oc-button-stub>
-          <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]"><input id="space-image-upload-input" type="file" name="file" multiple="multiple" tabindex="-1" accept="image/*">
-            <ul class="oc-list oc-files-context-actions">
-              <li class="oc-spaces-context-action oc-py-xs oc-px-s">
-                <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-                  <oc-icon-stub name="edit" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-                  Rename
-                </oc-button-stub>
-              </li>
-              <li class="oc-spaces-context-action oc-py-xs oc-px-s">
-                <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-                  <oc-icon-stub name="pencil" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-                  Change subtitle
-                </oc-button-stub>
-              </li>
-              <li class="oc-spaces-context-action oc-py-xs oc-px-s">
-                <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-                  <oc-icon-stub name="markdown" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-                  Edit description
-                </oc-button-stub>
-              </li>
-              <li class="oc-spaces-context-action oc-py-xs oc-px-s">
-                <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-                  <oc-icon-stub name="image-add" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-                  Upload new space image
-                </oc-button-stub>
-              </li>
-              <li class="oc-spaces-context-action oc-py-xs oc-px-s">
-                <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-                  <oc-icon-stub name="forbid-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-                  Disable
-                </oc-button-stub>
-              </li>
-              <li class="oc-spaces-context-action oc-py-xs oc-px-s">
-                <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-                  <oc-icon-stub name="information" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-                  Details
-                </oc-button-stub>
-              </li>
-            </ul>
-          </oc-drop-stub>
+          <div class="oc-flex oc-flex-middle">
+            <oc-button-stub type="button" size="medium" arialabel="Open context menu and show invited people" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
+              <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span class="space-overview-people-count oc-text-small">1 invited person</span>
+            </oc-button-stub>
+            <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn">
+              <oc-icon-stub name="more-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+            </oc-button-stub>
+            <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]"><input id="space-image-upload-input" type="file" name="file" multiple="multiple" tabindex="-1" accept="image/*">
+              <ul class="oc-list oc-files-context-actions">
+                <li class="oc-spaces-context-action oc-py-xs oc-px-s">
+                  <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+                    <oc-icon-stub name="edit" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+                    Rename
+                  </oc-button-stub>
+                </li>
+                <li class="oc-spaces-context-action oc-py-xs oc-px-s">
+                  <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+                    <oc-icon-stub name="pencil" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+                    Change subtitle
+                  </oc-button-stub>
+                </li>
+                <li class="oc-spaces-context-action oc-py-xs oc-px-s">
+                  <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+                    <oc-icon-stub name="markdown" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+                    Edit description
+                  </oc-button-stub>
+                </li>
+                <li class="oc-spaces-context-action oc-py-xs oc-px-s">
+                  <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+                    <oc-icon-stub name="image-add" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+                    Upload new space image
+                  </oc-button-stub>
+                </li>
+                <li class="oc-spaces-context-action oc-py-xs oc-px-s">
+                  <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+                    <oc-icon-stub name="forbid-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+                    Disable
+                  </oc-button-stub>
+                </li>
+                <li class="oc-spaces-context-action oc-py-xs oc-px-s">
+                  <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+                    <oc-icon-stub name="information" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+                    Details
+                  </oc-button-stub>
+                </li>
+              </ul>
+            </oc-drop-stub>
+          </div>
         </div>
         <!---->
         <div>
@@ -80,51 +85,56 @@ exports[`Spaces project view space readme should show if given 1`] = `
         <div class="oc-position-relative"><img alt="" src="data:image/png;base64,ZmlsZWNvbnRlbnQ=" class="space-overview-image oc-cursor-pointer"></div>
       </div>
       <div>
-        <div class="oc-flex oc-mb-s oc-flex-middle">
+        <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
           <h1 class="space-overview-name oc-text-truncate">space</h1>
-          <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn">
-            <oc-icon-stub name="more-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-          </oc-button-stub>
-          <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]"><input id="space-image-upload-input" type="file" name="file" multiple="multiple" tabindex="-1" accept="image/*">
-            <ul class="oc-list oc-files-context-actions">
-              <li class="oc-spaces-context-action oc-py-xs oc-px-s">
-                <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-                  <oc-icon-stub name="edit" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-                  Rename
-                </oc-button-stub>
-              </li>
-              <li class="oc-spaces-context-action oc-py-xs oc-px-s">
-                <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-                  <oc-icon-stub name="pencil" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-                  Change subtitle
-                </oc-button-stub>
-              </li>
-              <li class="oc-spaces-context-action oc-py-xs oc-px-s">
-                <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-                  <oc-icon-stub name="markdown" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-                  Edit description
-                </oc-button-stub>
-              </li>
-              <li class="oc-spaces-context-action oc-py-xs oc-px-s">
-                <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-                  <oc-icon-stub name="image-add" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-                  Upload new space image
-                </oc-button-stub>
-              </li>
-              <li class="oc-spaces-context-action oc-py-xs oc-px-s">
-                <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-                  <oc-icon-stub name="forbid-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-                  Disable
-                </oc-button-stub>
-              </li>
-              <li class="oc-spaces-context-action oc-py-xs oc-px-s">
-                <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
-                  <oc-icon-stub name="information" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
-                  Details
-                </oc-button-stub>
-              </li>
-            </ul>
-          </oc-drop-stub>
+          <div class="oc-flex oc-flex-middle">
+            <oc-button-stub type="button" size="medium" arialabel="Open context menu and show invited people" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
+              <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span class="space-overview-people-count oc-text-small">1 invited person</span>
+            </oc-button-stub>
+            <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn">
+              <oc-icon-stub name="more-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+            </oc-button-stub>
+            <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]"><input id="space-image-upload-input" type="file" name="file" multiple="multiple" tabindex="-1" accept="image/*">
+              <ul class="oc-list oc-files-context-actions">
+                <li class="oc-spaces-context-action oc-py-xs oc-px-s">
+                  <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+                    <oc-icon-stub name="edit" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+                    Rename
+                  </oc-button-stub>
+                </li>
+                <li class="oc-spaces-context-action oc-py-xs oc-px-s">
+                  <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+                    <oc-icon-stub name="pencil" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+                    Change subtitle
+                  </oc-button-stub>
+                </li>
+                <li class="oc-spaces-context-action oc-py-xs oc-px-s">
+                  <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+                    <oc-icon-stub name="markdown" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+                    Edit description
+                  </oc-button-stub>
+                </li>
+                <li class="oc-spaces-context-action oc-py-xs oc-px-s">
+                  <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+                    <oc-icon-stub name="image-add" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+                    Upload new space image
+                  </oc-button-stub>
+                </li>
+                <li class="oc-spaces-context-action oc-py-xs oc-px-s">
+                  <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+                    <oc-icon-stub name="forbid-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+                    Disable
+                  </oc-button-stub>
+                </li>
+                <li class="oc-spaces-context-action oc-py-xs oc-px-s">
+                  <oc-button-stub type="button" size="medium" variation="passive" appearance="raw" justifycontent="left" gapsize="medium">
+                    <oc-icon-stub name="information" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
+                    Details
+                  </oc-button-stub>
+                </li>
+              </ul>
+            </oc-drop-stub>
+          </div>
         </div>
         <!---->
         <div>
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
index 1838eab175c..09fd0051fb8 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
@@ -13,7 +13,8 @@ exports[`Spaces component should list spaces 1`] = `
           oc-grid-row-large
           oc-text-center
           oc-child-width-1-3@m
-          oc-child-width-1-5@l
+          oc-child-width-1-4@l
+          oc-child-width-1-5@xl
         ">
       <li class="oc-mb-m">
         <div class="spaces-list-card oc-card oc-card-default oc-rounded">
@@ -23,26 +24,29 @@ exports[`Spaces component should list spaces 1`] = `
           <div class="oc-card-body oc-p-s">
             <div class="oc-flex oc-flex-between oc-flex-middle">
               <div class="oc-flex oc-flex-middle"><span class="oc-mr-s oc-icon oc-icon-m oc-icon-passive"><!----></span> <a href="#/" aria-current="page" class="space-name oc-text-left router-link-exact-active router-link-active"><span></span></a></div>
-              <div class="oc-flex oc-flex-middle"><button aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="space-context-btn-1"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
-                <div id="space-context-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded" options="[object Object]">
-                  <div class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-s">
-                    <ul class="oc-list oc-files-context-actions">
-                      <li class="oc-files-context-action oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
-                          Rename
-                        </button></li>
-                      <li class="oc-files-context-action oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
-                          Change subtitle
-                        </button></li>
-                      <li class="oc-files-context-action oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
-                          Upload new space image
-                        </button></li>
-                      <li class="oc-files-context-action oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
-                          Disable
-                        </button></li>
-                      <li class="oc-files-context-action oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
-                          Details
-                        </button></li>
-                    </ul>
+              <div class="oc-flex oc-flex-middle">
+                <div><button aria-label="Show invited people" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button></div>
+                <div><button aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="space-context-btn-1"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+                  <div id="space-context-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded" options="[object Object]">
+                    <div class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-s">
+                      <ul class="oc-list oc-files-context-actions">
+                        <li class="oc-files-context-action oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
+                            Rename
+                          </button></li>
+                        <li class="oc-files-context-action oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
+                            Change subtitle
+                          </button></li>
+                        <li class="oc-files-context-action oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
+                            Upload new space image
+                          </button></li>
+                        <li class="oc-files-context-action oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
+                            Disable
+                          </button></li>
+                        <li class="oc-files-context-action oc-px-s"><button class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-flex oc-icon oc-icon-m oc-icon-passive"><!----></span>
+                            Details
+                          </button></li>
+                      </ul>
+                    </div>
                   </div>
                 </div>
               </div>

From 8c891b385696d1ba800c0ad1f7162173715f0041 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 2 Mar 2022 10:17:33 +0100
Subject: [PATCH 3/8] Add changelog item

---
 .../unreleased/enhancement-spaces-people-sharing      | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-spaces-people-sharing

diff --git a/changelog/unreleased/enhancement-spaces-people-sharing b/changelog/unreleased/enhancement-spaces-people-sharing
new file mode 100644
index 00000000000..8901c33f485
--- /dev/null
+++ b/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/6455
+https://github.com/owncloud/web/issues/6283

From de908c803eb425c5585b51528bec9b50f4a9642d Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 2 Mar 2022 14:40:53 +0100
Subject: [PATCH 4/8] Use uuid instead of index for the role dropdown class

---
 .../components/SideBar/Shares/Collaborators/ListItem.vue  | 6 ------
 .../src/components/SideBar/Shares/FileShares.vue          | 3 +--
 .../src/components/SideBar/Shares/RoleDropdown.vue        | 8 ++------
 3 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
index bcfabad2809..a8039aaf835 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
@@ -67,7 +67,6 @@
         :existing-permissions="share.customPermissions"
         :existing-role="share.role"
         :allow-share-permission="!isOcis || isSpace"
-        :index="index"
         class="files-collaborators-collaborator-role"
         @optionChange="shareRoleChanged"
       />
@@ -110,11 +109,6 @@ export default {
     modifiable: {
       type: Boolean,
       default: false
-    },
-    index: {
-      type: Number,
-      required: false,
-      default: 0
     }
   },
   computed: {
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 c6f7a05d633..9698f3fab2b 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -34,11 +34,10 @@
           class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm"
           :aria-label="$gettext('Share receivers')"
         >
-          <li v-for="(collaborator, index) in collaborators" :key="collaborator.key">
+          <li v-for="collaborator in collaborators" :key="collaborator.key">
             <collaborator-list-item
               :share="collaborator"
               :modifiable="!collaborator.indirect"
-              :index="index"
               @onDelete="$_ocCollaborators_deleteShare"
             />
           </li>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue
index 0c9f03a606e..64574a57ddb 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue
@@ -83,6 +83,7 @@ import {
   ShareRole,
   SpacePeopleShareRoles
 } from '../../../helpers/share'
+import * as uuid from 'uuid'
 
 export default {
   name: 'RoleDropdown',
@@ -110,11 +111,6 @@ export default {
     allowSharePermission: {
       type: Boolean,
       required: true
-    },
-    index: {
-      type: Number,
-      required: false,
-      default: 0
     }
   },
   data() {
@@ -126,7 +122,7 @@ export default {
   computed: {
     roleButtonId() {
       if (this.shareId) {
-        return `files-collaborators-role-button-${this.shareId}-${this.index}`
+        return `files-collaborators-role-button-${this.shareId}-${uuid.v4()}`
       }
       return 'files-collaborators-role-button-new'
     },

From 0db26466a24d24f60aca53fe2d51a0d397cb72d1 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 2 Mar 2022 14:41:14 +0100
Subject: [PATCH 5/8] Redesign the project view a bit

---
 .../src/views/spaces/Project.vue              | 59 +++++++++----------
 1 file changed, 27 insertions(+), 32 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
index 9eee72e1b1c..aa72d1d47bd 100644
--- a/packages/web-app-files/src/views/spaces/Project.vue
+++ b/packages/web-app-files/src/views/spaces/Project.vue
@@ -10,37 +10,20 @@
           :space="space"
         ></readme-content-modal>
         <quota-modal v-if="quotaModalIsOpen" :cancel="closeQuotaModal" :space="space" />
-        <div
-          class="oc-grid oc-px-m oc-mt-m"
-          :class="{ 'oc-child-width-1-1@s': imageExpanded, 'oc-child-width-1-3@s': !imageExpanded }"
-        >
-          <div v-if="imageContent">
-            <div class="oc-position-relative">
-              <img
-                :class="{ expanded: imageExpanded }"
-                class="space-overview-image oc-cursor-pointer"
-                alt=""
-                :src="'data:' + imageContent.mimeType + ';base64,' + imageContent.data"
-                @click="toggleImageExpanded"
-              />
-            </div>
+        <div class="oc-px-m oc-mt-m" :class="{ 'oc-flex': !imageExpanded }">
+          <div v-if="imageContent" :class="{ 'oc-width-1-4 oc-mr-l': !imageExpanded }">
+            <img
+              :class="{ expanded: imageExpanded }"
+              class="space-overview-image oc-cursor-pointer"
+              alt=""
+              :src="'data:' + imageContent.mimeType + ';base64,' + imageContent.data"
+              @click="toggleImageExpanded"
+            />
           </div>
-          <div>
+          <div :class="{ 'oc-width-3-4': !imageExpanded }">
             <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
-              <h1 class="space-overview-name oc-text-truncate">{{ space.name }}</h1>
               <div class="oc-flex oc-flex-middle">
-                <oc-button
-                  v-if="!loadSharesTask.isRunning && currentFileOutgoingCollaborators.length"
-                  :aria-label="$gettext('Open context menu and show invited people')"
-                  appearance="raw"
-                  @click="openSidebarSharePanel"
-                >
-                  <oc-icon name="group" fill-type="line" size="small" />
-                  <span
-                    class="space-overview-people-count oc-text-small"
-                    v-text="peopleCountString"
-                  ></span>
-                </oc-button>
+                <h1 class="space-overview-name oc-text-truncate">{{ space.name }}</h1>
                 <oc-button
                   :id="`space-context-btn`"
                   v-oc-tooltip="$gettext('Show context menu')"
@@ -86,6 +69,18 @@
                   </ul>
                 </oc-drop>
               </div>
+              <oc-button
+                v-if="!loadSharesTask.isRunning && currentFileOutgoingCollaborators.length"
+                :aria-label="$gettext('Open context menu and show members')"
+                appearance="raw"
+                @click="openSidebarSharePanel"
+              >
+                <oc-icon name="group" fill-type="line" size="small" />
+                <span
+                  class="space-overview-people-count oc-text-small"
+                  v-text="peopleCountString"
+                ></span>
+              </oc-button>
             </div>
             <p v-if="space.description" class="oc-mt-rm">{{ space.description }}</p>
             <div>
@@ -345,8 +340,8 @@ export default {
     },
     peopleCountString() {
       const translated = this.$ngettext(
-        '%{count} invited person',
-        '%{count} invited people',
+        '%{count} member',
+        '%{count} members',
         this.currentFileOutgoingCollaborators.length
       )
 
@@ -541,9 +536,9 @@ export default {
 .space-overview {
   &-image {
     border-radius: 10px;
-    max-height: 250px;
-    object-fit: cover;
     width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
   }
 
   &-image.expanded {

From bad70e71813bdf2cf38e1e40926c355fa31c4fc1 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 2 Mar 2022 14:41:38 +0100
Subject: [PATCH 6/8] Rename 'people' to 'members' for spaces

---
 .../SideBar/Details/SpaceDetails.vue          | 110 +++++++++---------
 .../components/SideBar/Shares/SpaceShares.vue |   4 +-
 .../src/views/spaces/Projects.vue             |   4 +-
 .../__snapshots__/FileShares.spec.js.snap     |   4 +-
 .../__snapshots__/SpaceShares.spec.js.snap    |  16 +--
 .../__snapshots__/Projects.spec.js.snap       |   2 +-
 6 files changed, 68 insertions(+), 72 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
index 50981adeedc..03ee2ceed31 100644
--- a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
@@ -12,17 +12,32 @@
         class="space-default-image oc-px-m oc-py-m"
       />
     </div>
-    <div v-if="hasPeopleShares || hasLinkShares" class="oc-flex oc-flex-middle oc-mb-m">
-      <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
+      v-if="hasMemberShares || hasLinkShares"
+      class="oc-flex oc-flex-middle oc-mb-m oc-text-small"
+    >
+      <div v-if="hasMemberShares" class="oc-flex oc-flex-middle">
+        <oc-button
+          appearance="raw"
+          :aria-label="$gettext('Open the member panel')"
+          @click="expandMemberPanel"
+        >
+          <oc-icon name="group" class="oc-mr-s" />
+        </oc-button>
+        <span class="oc-mr-xs" 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>
+      </div>
+      <div v-if="hasLinkShares" class="oc-flex oc-flex-middle">
+        <oc-icon name="link" class="oc-mr-s" />
+        <span v-text="linkShareLabel" />
+      </div>
     </div>
     <div>
       <table class="details-table" :aria-label="detailsTableLabel">
@@ -122,60 +137,41 @@ export default {
         })
         .join(', ')
     },
-    hasPeopleShares() {
-      return this.peopleShareCount > 1
+    hasMemberShares() {
+      return this.memberShareCount > 1
     },
     hasLinkShares() {
       return this.linkShareCount > 1
     },
-    peopleShareCount() {
+    memberShareCount() {
       return this.currentFileOutgoingCollaborators.length
     },
     linkShareCount() {
       return this.currentFileOutgoingLinks.length
     },
-    shareLabel() {
-      let peopleString, linksString
-
-      if (this.hasPeopleShares) {
-        peopleString = this.$gettextInterpolate(
-          this.$ngettext(
-            'This space has been shared with %{peopleShareCount} person.',
-            'This space has been shared with %{peopleShareCount} people.',
-            this.peopleShareCount
-          ),
-          {
-            peopleShareCount: this.peopleShareCount
-          }
-        )
-      }
-
-      if (this.hasLinkShares) {
-        linksString = this.$gettextInterpolate(
-          this.$ngettext(
-            '%{linkShareCount} link giving access.',
-            '%{linkShareCount} links giving access.',
-            this.linkShareCount
-          ),
-          {
-            linkShareCount: this.linkShareCount
-          }
-        )
-      }
-
-      if (peopleString && linksString) {
-        return `${peopleString} ${linksString}`
-      }
-
-      if (peopleString) {
-        return peopleString
-      }
-
-      if (linksString) {
-        return linksString
-      }
-
-      return ''
+    memberShareLabel() {
+      return this.$gettextInterpolate(
+        this.$ngettext(
+          'This space has %{memberShareCount} member.',
+          'This space has %{memberShareCount} members.',
+          this.memberShareCount
+        ),
+        {
+          memberShareCount: this.memberShareCount
+        }
+      )
+    },
+    linkShareLabel() {
+      return this.$gettextInterpolate(
+        this.$ngettext(
+          '%{linkShareCount} link giving access.',
+          '%{linkShareCount} links giving access.',
+          this.linkShareCount
+        ),
+        {
+          linkShareCount: this.linkShareCount
+        }
+      )
     }
   },
   mounted() {
@@ -187,7 +183,7 @@ export default {
       closeSidebar: 'close'
     }),
 
-    expandPeoplePanel() {
+    expandMemberPanel() {
       this.setSidebarPanel('space-share-item')
     }
   }
diff --git a/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue b/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue
index cf681ef71af..1011aaadedf 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="oc-files-sharing-sidebar" class="oc-position-relative">
-    <oc-loader v-if="sharesLoading" :aria-label="$gettext('Loading people list')" />
+    <oc-loader v-if="sharesLoading" :aria-label="$gettext('Loading members')" />
     <template v-else>
       <invite-collaborator-form v-if="currentUserCanShare" key="new-collaborator" class="oc-my-s" />
       <template v-if="hasCollaborators">
@@ -34,7 +34,7 @@ import { useTask } from 'vue-concurrency'
 
 export default {
   title: ($gettext) => {
-    return $gettext('People')
+    return $gettext('Members')
   },
   name: 'SpaceShares',
   components: {
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index dae2db1fe72..2e2edc7ce28 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -100,8 +100,8 @@
                   <div class="oc-flex oc-flex-middle">
                     <div>
                       <oc-button
-                        v-oc-tooltip="$gettext('Show invited people')"
-                        :aria-label="$gettext('Show invited people')"
+                        v-oc-tooltip="$gettext('Show members')"
+                        :aria-label="$gettext('Show members')"
                         appearance="raw"
                         @click="openSidebarSharePanel(space)"
                       >
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 59d0ff5d5af..20889013bfe 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
@@ -27,10 +27,10 @@ exports[`FileShares if there are collaborators present renders sharedWithLabel a
   </div>
   <ul id="files-collaborators-list" aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
     <li>
-      <collaborator-list-item-stub share="[object Object]" modifiable="true" index="0"></collaborator-list-item-stub>
+      <collaborator-list-item-stub share="[object Object]" modifiable="true"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub share="[object Object]" modifiable="true" index="1"></collaborator-list-item-stub>
+      <collaborator-list-item-stub share="[object Object]" modifiable="true"></collaborator-list-item-stub>
     </li>
   </ul>
 </div>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceShares.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceShares.spec.js.snap
index 92aeb3f81d5..b4ee8d187b7 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceShares.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/SpaceShares.spec.js.snap
@@ -5,7 +5,7 @@ exports[`SpaceShares if currentUser can not share other shares are listed, but c
   <!---->
   <ul id="files-collaborators-list" aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
     <li>
-      <collaborator-list-item-stub share="[object Object]" index="0"></collaborator-list-item-stub>
+      <collaborator-list-item-stub share="[object Object]"></collaborator-list-item-stub>
     </li>
   </ul>
 </div>
@@ -16,7 +16,7 @@ exports[`SpaceShares if currentUser can share initially renders add people dialo
   <invite-collaborator-form-stub class="oc-my-s"></invite-collaborator-form-stub>
   <ul id="files-collaborators-list" aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
     <li>
-      <collaborator-list-item-stub share="[object Object]" index="0"></collaborator-list-item-stub>
+      <collaborator-list-item-stub share="[object Object]"></collaborator-list-item-stub>
     </li>
   </ul>
 </div>
@@ -27,13 +27,13 @@ exports[`SpaceShares if currentUser is manager allows role edit of the current u
   <invite-collaborator-form-stub class="oc-my-s"></invite-collaborator-form-stub>
   <ul id="files-collaborators-list" aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
     <li>
-      <collaborator-list-item-stub share="[object Object]" modifiable="true" index="0"></collaborator-list-item-stub>
+      <collaborator-list-item-stub share="[object Object]" modifiable="true"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub share="[object Object]" modifiable="true" index="0"></collaborator-list-item-stub>
+      <collaborator-list-item-stub share="[object Object]" modifiable="true"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub share="[object Object]" modifiable="true" index="0"></collaborator-list-item-stub>
+      <collaborator-list-item-stub share="[object Object]" modifiable="true"></collaborator-list-item-stub>
     </li>
   </ul>
 </div>
@@ -44,10 +44,10 @@ exports[`SpaceShares if currentUser is manager does not allow role edit of the c
   <invite-collaborator-form-stub class="oc-my-s"></invite-collaborator-form-stub>
   <ul id="files-collaborators-list" aria-label="Share receivers" class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm">
     <li>
-      <collaborator-list-item-stub share="[object Object]" index="0"></collaborator-list-item-stub>
+      <collaborator-list-item-stub share="[object Object]"></collaborator-list-item-stub>
     </li>
     <li>
-      <collaborator-list-item-stub share="[object Object]" modifiable="true" index="0"></collaborator-list-item-stub>
+      <collaborator-list-item-stub share="[object Object]" modifiable="true"></collaborator-list-item-stub>
     </li>
   </ul>
 </div>
@@ -55,6 +55,6 @@ exports[`SpaceShares if currentUser is manager does not allow role edit of the c
 
 exports[`SpaceShares renders loading spinner while loading 1`] = `
 <div id="oc-files-sharing-sidebar" class="oc-position-relative">
-  <oc-loader-stub arialabel="Loading people list"></oc-loader-stub>
+  <oc-loader-stub arialabel="Loading members"></oc-loader-stub>
 </div>
 `;
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
index 09fd0051fb8..e21f892a1b6 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
@@ -25,7 +25,7 @@ exports[`Spaces component should list spaces 1`] = `
             <div class="oc-flex oc-flex-between oc-flex-middle">
               <div class="oc-flex oc-flex-middle"><span class="oc-mr-s oc-icon oc-icon-m oc-icon-passive"><!----></span> <a href="#/" aria-current="page" class="space-name oc-text-left router-link-exact-active router-link-active"><span></span></a></div>
               <div class="oc-flex oc-flex-middle">
-                <div><button aria-label="Show invited people" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button></div>
+                <div><button aria-label="Show members" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button></div>
                 <div><button aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="space-context-btn-1"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
                   <div id="space-context-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded" options="[object Object]">
                     <div class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-s">

From 18577d32061e849c5cfb88958a84ab3d501bdd39 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 7 Mar 2022 09:33:58 +0100
Subject: [PATCH 7/8] Minor adjustments according to code review

---
 __fixtures__/collaborators.js                 |  4 ++--
 .../SideBar/Details/SpaceDetails.vue          |  6 ++---
 .../InviteCollaboratorForm.vue                |  8 +++----
 .../InviteCollaborator/RecipientContainer.vue |  6 ++---
 .../SideBar/Shares/RoleDropdown.vue           |  4 ++--
 .../components/SideBar/Shares/SpaceShares.vue | 23 +++++++++---------
 .../web-app-files/src/helpers/resources.js    | 24 +++++++++----------
 .../web-app-files/src/helpers/share/role.ts   | 24 +++++++++++--------
 packages/web-app-files/src/store/actions.js   |  4 ++--
 .../src/views/spaces/Project.vue              |  1 +
 .../src/views/spaces/Projects.vue             |  1 -
 .../SideBar/Details/SpaceDetails.spec.js      |  4 ++--
 .../SideBar/Shares/SpaceShares.spec.js        |  8 +++----
 .../tests/unit/store/actions.spec.js          |  4 ++--
 .../tests/unit/views/spaces/Project.spec.js   |  4 ++--
 15 files changed, 63 insertions(+), 62 deletions(-)

diff --git a/__fixtures__/collaborators.js b/__fixtures__/collaborators.js
index e82820df067..415c1a3ebd6 100644
--- a/__fixtures__/collaborators.js
+++ b/__fixtures__/collaborators.js
@@ -1,7 +1,7 @@
 import {
   peopleRoleEditorFile,
   peopleRoleViewerFile,
-  spaceEditor
+  spaceRoleEditor
 } from '../packages/web-app-files/src/helpers/share'
 
 export default [
@@ -162,6 +162,6 @@ export default [
       displayName: "Admin",
       additionalInfo: "admin@example.org"
     },
-    role: spaceEditor
+    role: spaceRoleEditor
   }
 ]
diff --git a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
index 03ee2ceed31..7c6d177fc70 100644
--- a/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue
@@ -72,7 +72,7 @@ import MixinResources from '../../../mixins/resources'
 import { mapActions, mapGetters } from 'vuex'
 import { useTask } from 'vue-concurrency'
 import { buildWebDavSpacesPath } from '../../../helpers/resources'
-import { spaceManager } from '../../../helpers/share'
+import { spaceRoleManager } from '../../../helpers/share'
 import SpaceQuota from '../../SpaceQuota.vue'
 
 export default {
@@ -126,7 +126,7 @@ export default {
     ownerUsernames() {
       const userId = this.user?.id
       return this.currentFileOutgoingCollaborators
-        .filter((share) => share.role.name === spaceManager.name)
+        .filter((share) => share.role.name === spaceRoleManager.name)
         .map((share) => {
           if (share.collaborator.name === userId) {
             return this.$gettextInterpolate(this.$gettext('%{displayName} (me)'), {
@@ -141,7 +141,7 @@ export default {
       return this.memberShareCount > 1
     },
     hasLinkShares() {
-      return this.linkShareCount > 1
+      return this.linkShareCount > 0
     },
     memberShareCount() {
       return this.currentFileOutgoingCollaborators.length
diff --git a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/InviteCollaboratorForm.vue b/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/InviteCollaboratorForm.vue
index b0ed6baf3d0..d18f11bfe13 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/InviteCollaboratorForm.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/InviteCollaboratorForm.vue
@@ -138,11 +138,9 @@ export default {
   mounted() {
     this.fetchRecipients = debounce(this.fetchRecipients, 500)
 
-    if (this.resourceIsSpace) {
-      this.selectedRole = SpacePeopleShareRoles.all[0]
-    } else {
-      this.selectedRole = PeopleShareRoles.list(this.highlightedFile.isFolder)[0]
-    }
+    this.selectedRole = this.resourceIsSpace
+      ? SpacePeopleShareRoles.list()[0]
+      : PeopleShareRoles.list(this.highlightedFile.isFolder)[0]
   },
 
   methods: {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/RecipientContainer.vue b/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/RecipientContainer.vue
index 555bb3d7c6b..e7102c6c5b1 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/RecipientContainer.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/RecipientContainer.vue
@@ -40,9 +40,9 @@ export default {
       formattedRecipient: {
         name: this.recipient.label,
         icon: this.getRecipientIcon(),
-        hasAvatar:
-          this.recipient.value.shareType === ShareTypes.user.value ||
-          this.recipient.value.shareType === ShareTypes.space.value,
+        hasAvatar: [ShareTypes.user.value, ShareTypes.space.value].includes(
+          this.recipient.value.shareType
+        ),
         isLoadingAvatar: true
       }
     }
diff --git a/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue
index 64574a57ddb..6d262c2f84d 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue
@@ -143,7 +143,7 @@ export default {
     },
     availableRoles() {
       if (this.resourceIsSpace) {
-        return SpacePeopleShareRoles.all
+        return SpacePeopleShareRoles.list()
       }
       return PeopleShareRoles.list(this.resource.isFolder)
     },
@@ -173,7 +173,7 @@ export default {
       if (this.existingRole) {
         this.selectedRole = this.existingRole
       } else if (this.resourceIsSpace) {
-        this.selectedRole = SpacePeopleShareRoles.all[0]
+        this.selectedRole = SpacePeopleShareRoles.list()[0]
       } else {
         this.selectedRole = PeopleShareRoles.list(this.resource.isFolder)[0]
       }
diff --git a/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue b/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue
index 1011aaadedf..b3f415cbcd8 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/SpaceShares.vue
@@ -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 { spaceManager } from '../../../helpers/share'
+import { spaceRoleManager } from '../../../helpers/share'
 import { createLocationSpaces, isLocationSpacesActive } from '../../../router'
 import { useTask } from 'vue-concurrency'
 
@@ -84,7 +84,7 @@ export default {
         (collaborator) => collaborator.collaborator.name === this.user.id
       )
 
-      return currentUserCollaborator?.role?.name === spaceManager.name
+      return currentUserCollaborator?.role?.name === spaceRoleManager.name
     }
   },
   mounted() {
@@ -94,20 +94,19 @@ export default {
     ...mapActions('Files', ['loadCurrentFileOutgoingShares', 'deleteShare']),
 
     isModifiable(share) {
-      if (this.currentFileOutgoingCollaborators.length < 2) {
+      if (!this.currentUserIsManager) {
         return false
       }
 
-      const managers = this.currentFileOutgoingCollaborators.filter(
-        (collaborator) => collaborator.role.name === spaceManager.name
-      )
-
-      // only one manager -> can't remove those
-      if (managers.length < 2 && share.role.name === spaceManager.name) {
-        return false
+      if (share.role.name !== spaceRoleManager.name) {
+        return true
       }
 
-      return this.currentUserIsManager
+      // forbid to remove last manager of a space
+      const managers = this.currentFileOutgoingCollaborators.filter(
+        (collaborator) => collaborator.role.name === spaceRoleManager.name
+      )
+      return managers.length > 1
     },
     $_ocCollaborators_deleteShare(share) {
       this.deleteShare({
@@ -118,7 +117,7 @@ export default {
         // current user was removed from the share.
         if (share.collaborator.name === this.user.id) {
           if (isLocationSpacesActive(this.$router, 'files-spaces-projects')) {
-            return this.$router.go(0)
+            return this.$router.go()
           }
           return this.$router.push(createLocationSpaces('files-spaces-projects'))
         }
diff --git a/packages/web-app-files/src/helpers/resources.js b/packages/web-app-files/src/helpers/resources.js
index 5eb3d547c68..cd1d2520e61 100644
--- a/packages/web-app-files/src/helpers/resources.js
+++ b/packages/web-app-files/src/helpers/resources.js
@@ -9,9 +9,9 @@ import {
   SharePermissions,
   ShareStatus,
   ShareTypes,
-  spaceEditor,
-  spaceManager,
-  spaceViewer
+  spaceRoleEditor,
+  spaceRoleManager,
+  spaceRoleViewer
 } from './share'
 
 function _getFileExtension(name) {
@@ -343,17 +343,17 @@ export function buildSpaceShare(s, spaceId) {
   let permissions, role
 
   switch (s.role) {
-    case spaceManager.inlineLabel:
-      permissions = 31
-      role = spaceManager
+    case spaceRoleManager.name:
+      permissions = spaceRoleManager.bitmask(true)
+      role = spaceRoleManager
       break
-    case spaceEditor.inlineLabel:
-      permissions = 15
-      role = spaceEditor
+    case spaceRoleEditor.name:
+      permissions = spaceRoleEditor.bitmask(true)
+      role = spaceRoleEditor
       break
-    case spaceViewer.inlineLabel:
-      permissions = 1
-      role = spaceViewer
+    case spaceRoleViewer.name:
+      permissions = spaceRoleViewer.bitmask(true)
+      role = spaceRoleViewer
       break
   }
 
diff --git a/packages/web-app-files/src/helpers/share/role.ts b/packages/web-app-files/src/helpers/share/role.ts
index 4c52f658d7b..a464a9c0338 100644
--- a/packages/web-app-files/src/helpers/share/role.ts
+++ b/packages/web-app-files/src/helpers/share/role.ts
@@ -102,11 +102,11 @@ export class SpaceShareRole extends ShareRole {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public description(allowSharing: boolean): string {
     switch (this.name) {
-      case spaceViewer.name:
+      case spaceRoleViewer.name:
         return $gettext('Download and preview')
-      case spaceEditor.name:
+      case spaceRoleEditor.name:
         return $gettext('Upload, edit, delete, download and preview')
-      case spaceManager.name:
+      case spaceRoleManager.name:
         return $gettext('Upload, edit, delete, download, preview and share')
     }
   }
@@ -207,22 +207,22 @@ export const linkRoleUploaderFolder = new LinkShareRole(
   $gettext('uploader'),
   [SharePermissions.create]
 )
-export const spaceViewer = new SpaceShareRole(
-  'spaceViewer',
+export const spaceRoleViewer = new SpaceShareRole(
+  'viewer',
   false,
   $gettext('Viewer'),
   $gettext('viewer'),
   [SharePermissions.read]
 )
-export const spaceEditor = new SpaceShareRole(
-  'spaceEditor',
+export const spaceRoleEditor = new SpaceShareRole(
+  'editor',
   false,
   $gettext('Editor'),
   $gettext('editor'),
   [SharePermissions.read, SharePermissions.update, SharePermissions.create, SharePermissions.delete]
 )
-export const spaceManager = new SpaceShareRole(
-  'spaceManager',
+export const spaceRoleManager = new SpaceShareRole(
+  'manager',
   false,
   $gettext('Manager'),
   $gettext('manager'),
@@ -236,7 +236,11 @@ export const spaceManager = new SpaceShareRole(
 )
 
 export abstract class SpacePeopleShareRoles {
-  static readonly all = [spaceViewer, spaceEditor, spaceManager]
+  static readonly all = [spaceRoleViewer, spaceRoleEditor, spaceRoleManager]
+
+  static list(): ShareRole[] {
+    return this.all
+  }
 
   static getByBitmask(bitmask: number): ShareRole {
     return this.all.find((r) => r.bitmask(true) === bitmask)
diff --git a/packages/web-app-files/src/store/actions.js b/packages/web-app-files/src/store/actions.js
index 94fb0971f6e..6a74405c891 100644
--- a/packages/web-app-files/src/store/actions.js
+++ b/packages/web-app-files/src/store/actions.js
@@ -261,7 +261,7 @@ export default {
           .then(() => {
             const role = SpacePeopleShareRoles.getByBitmask(permissions)
             const shareObj = {
-              role: role.inlineLabel,
+              role: role.name,
               onPremisesSamAccountName: share.collaborator.name,
               displayName: share.collaborator.displayName
             }
@@ -336,7 +336,7 @@ export default {
         .then(() => {
           const role = SpacePeopleShareRoles.getByBitmask(permissions)
           const shareObj = {
-            role: role.inlineLabel,
+            role: role.name,
             onPremisesSamAccountName: shareWith,
             displayName
           }
diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
index aa72d1d47bd..28563b5a2e9 100644
--- a/packages/web-app-files/src/views/spaces/Project.vue
+++ b/packages/web-app-files/src/views/spaces/Project.vue
@@ -29,6 +29,7 @@
                   v-oc-tooltip="$gettext('Show context menu')"
                   :aria-label="$gettext('Show context menu')"
                   appearance="raw"
+                  class="oc-ml-s"
                 >
                   <oc-icon name="more-2" />
                 </oc-button>
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 2e2edc7ce28..ce5f533e63e 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -380,7 +380,6 @@ export default {
       return ''
     },
     async openSidebarSharePanel(space) {
-      await this.closeSidebar()
       this.SET_FILE_SELECTION([space])
       this.openSidebarWithPanel('space-share-item')
     }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Details/SpaceDetails.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Details/SpaceDetails.spec.js
index c558189929f..add52ce0ca8 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Details/SpaceDetails.spec.js
+++ b/packages/web-app-files/tests/unit/components/SideBar/Details/SpaceDetails.spec.js
@@ -5,7 +5,7 @@ import stubs from '../../../../../../../tests/unit/stubs'
 import GetTextPlugin from 'vue-gettext'
 import AsyncComputed from 'vue-async-computed'
 import VueCompositionAPI from '@vue/composition-api/dist/vue-composition-api'
-import { ShareTypes, spaceManager } from '../../../../../src/helpers/share'
+import { ShareTypes, spaceRoleManager } from '../../../../../src/helpers/share'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
@@ -36,7 +36,7 @@ const spaceShare = {
     displayName: 'alice'
   },
   role: {
-    name: spaceManager.name
+    name: spaceRoleManager.name
   }
 }
 
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceShares.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceShares.spec.js
index 059ecce367f..2578bceb8f0 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceShares.spec.js
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceShares.spec.js
@@ -4,7 +4,7 @@ import GetTextPlugin from 'vue-gettext'
 import Vuex from 'vuex'
 import DesignSystem from 'owncloud-design-system'
 import Users from '@/__fixtures__/users'
-import { ShareTypes, spaceManager, spaceViewer } from '../../../../../src/helpers/share'
+import { ShareTypes, spaceRoleManager, spaceRoleViewer } from '../../../../../src/helpers/share'
 import VueCompositionAPI from '@vue/composition-api/dist/vue-composition-api'
 
 const localVue = createLocalVue()
@@ -37,7 +37,7 @@ const outgoingShares = [
       displayName: user.displayname
     },
     role: {
-      name: spaceManager.name
+      name: spaceRoleManager.name
     }
   },
   {
@@ -48,7 +48,7 @@ const outgoingShares = [
       displayName: 'einstein'
     },
     role: {
-      name: spaceViewer.name
+      name: spaceRoleViewer.name
     }
   },
   {
@@ -59,7 +59,7 @@ const outgoingShares = [
       displayName: 'marie'
     },
     role: {
-      name: spaceManager.name
+      name: spaceRoleManager.name
     }
   }
 ]
diff --git a/packages/web-app-files/tests/unit/store/actions.spec.js b/packages/web-app-files/tests/unit/store/actions.spec.js
index 89de538a58c..355a9efbeed 100644
--- a/packages/web-app-files/tests/unit/store/actions.spec.js
+++ b/packages/web-app-files/tests/unit/store/actions.spec.js
@@ -1,5 +1,5 @@
 import actions from '../../../src/store/actions'
-import { ShareTypes, spaceManager } from '../../../src/helpers/share'
+import { ShareTypes, spaceRoleManager } from '../../../src/helpers/share'
 
 const stateMock = {
   commit: jest.fn(),
@@ -62,7 +62,7 @@ const spaceShareMock = {
     displayName: 'alice'
   },
   role: {
-    name: spaceManager.name
+    name: spaceRoleManager.name
   }
 }
 
diff --git a/packages/web-app-files/tests/unit/views/spaces/Project.spec.js b/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
index e4044e34dd1..c8bfa13aa4b 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
+++ b/packages/web-app-files/tests/unit/views/spaces/Project.spec.js
@@ -6,7 +6,7 @@ import Files from '@/__fixtures__/files'
 import mockAxios from 'jest-mock-axios'
 import SpaceProject from '../../../../src/views/spaces/Project.vue'
 import Vuex from 'vuex'
-import { ShareTypes, spaceManager } from '../../../../src/helpers/share'
+import { ShareTypes, spaceRoleManager } from '../../../../src/helpers/share'
 
 localVue.use(GetTextPlugin, {
   translations: 'does-not-matter.json',
@@ -67,7 +67,7 @@ const spaceShare = {
     displayName: 'alice'
   },
   role: {
-    name: spaceManager.name
+    name: spaceRoleManager.name
   }
 }
 

From 7a4b939476a07c47cc86b3240f56b110b86e93fa Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 7 Mar 2022 09:50:58 +0100
Subject: [PATCH 8/8] Update snapshot

---
 .../src/views/spaces/Projects.vue             |  1 +
 .../spaces/__snapshots__/Project.spec.js.snap | 36 +++++++++----------
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index ce5f533e63e..2e2edc7ce28 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -380,6 +380,7 @@ export default {
       return ''
     },
     async openSidebarSharePanel(space) {
+      await this.closeSidebar()
       this.SET_FILE_SELECTION([space])
       this.openSidebarWithPanel('space-share-item')
     }
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
index 6a3ae8a31c8..48b24954bea 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
@@ -5,18 +5,13 @@ exports[`Spaces project view space image should show if given 1`] = `
   <div>
     <!---->
     <!---->
-    <div class="oc-grid oc-px-m oc-mt-m oc-child-width-1-3@s">
-      <div>
-        <div class="oc-position-relative"><img alt="" src="data:image/png;base64,ZmlsZWNvbnRlbnQ=" class="space-overview-image oc-cursor-pointer"></div>
-      </div>
-      <div>
+    <div class="oc-px-m oc-mt-m oc-flex">
+      <div class="oc-width-1-4 oc-mr-l"><img alt="" src="data:image/png;base64,ZmlsZWNvbnRlbnQ=" class="space-overview-image oc-cursor-pointer"></div>
+      <div class="oc-width-3-4">
         <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
-          <h1 class="space-overview-name oc-text-truncate">space</h1>
           <div class="oc-flex oc-flex-middle">
-            <oc-button-stub type="button" size="medium" arialabel="Open context menu and show invited people" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
-              <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span class="space-overview-people-count oc-text-small">1 invited person</span>
-            </oc-button-stub>
-            <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn">
+            <h1 class="space-overview-name oc-text-truncate">space</h1>
+            <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn" class="oc-ml-s">
               <oc-icon-stub name="more-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
             </oc-button-stub>
             <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]"><input id="space-image-upload-input" type="file" name="file" multiple="multiple" tabindex="-1" accept="image/*">
@@ -60,6 +55,9 @@ exports[`Spaces project view space image should show if given 1`] = `
               </ul>
             </oc-drop-stub>
           </div>
+          <oc-button-stub type="button" size="medium" arialabel="Open context menu and show members" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
+            <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span class="space-overview-people-count oc-text-small">1 member</span>
+          </oc-button-stub>
         </div>
         <!---->
         <div>
@@ -80,18 +78,13 @@ exports[`Spaces project view space readme should show if given 1`] = `
   <div>
     <!---->
     <!---->
-    <div class="oc-grid oc-px-m oc-mt-m oc-child-width-1-3@s">
-      <div>
-        <div class="oc-position-relative"><img alt="" src="data:image/png;base64,ZmlsZWNvbnRlbnQ=" class="space-overview-image oc-cursor-pointer"></div>
-      </div>
-      <div>
+    <div class="oc-px-m oc-mt-m oc-flex">
+      <div class="oc-width-1-4 oc-mr-l"><img alt="" src="data:image/png;base64,ZmlsZWNvbnRlbnQ=" class="space-overview-image oc-cursor-pointer"></div>
+      <div class="oc-width-3-4">
         <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
-          <h1 class="space-overview-name oc-text-truncate">space</h1>
           <div class="oc-flex oc-flex-middle">
-            <oc-button-stub type="button" size="medium" arialabel="Open context menu and show invited people" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
-              <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span class="space-overview-people-count oc-text-small">1 invited person</span>
-            </oc-button-stub>
-            <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn">
+            <h1 class="space-overview-name oc-text-truncate">space</h1>
+            <oc-button-stub type="button" size="medium" arialabel="Show context menu" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="space-context-btn" class="oc-ml-s">
               <oc-icon-stub name="more-2" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub>
             </oc-button-stub>
             <oc-drop-stub dropid="space-context-drop" toggle="#space-context-btn" position="right-start" mode="click" closeonclick="true" paddingsize="small" options="[object Object]"><input id="space-image-upload-input" type="file" name="file" multiple="multiple" tabindex="-1" accept="image/*">
@@ -135,6 +128,9 @@ exports[`Spaces project view space readme should show if given 1`] = `
               </ul>
             </oc-drop-stub>
           </div>
+          <oc-button-stub type="button" size="medium" arialabel="Open context menu and show members" variation="passive" appearance="raw" justifycontent="center" gapsize="medium">
+            <oc-icon-stub name="group" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span class="space-overview-people-count oc-text-small">1 member</span>
+          </oc-button-stub>
         </div>
         <!---->
         <div>