[full-ci] Show sharees as avatars

.gitignore

@@ -50,3 +50,4 @@ comments.file
 # Report for tests
 tests/report/cucumber_report.json
 tests/report/cucumber_report.html
+.vscode/settings.json

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

@@ -24,45 +24,68 @@
           data-testid="files-collaborators-no-reshare-permissions-message"
           v-text="noResharePermsMessage"
         />
-        <template v-if="$_ownerAsCollaborator">
-          <p id="original-sharing-user" v-translate class="oc-invisible-sr">File owner</p>
-          <show-collaborator
-            :collaborator="$_ownerAsCollaborator"
-            aria-describedby="original-sharing-user"
-          />
-          <hr />
-          <show-collaborator :collaborator="$_currentUserAsCollaborator" />
-        </template>
-        <template v-else>
-          <p id="collaborator-as-fileowner" v-translate class="oc-invisible-sr">
-            You are the file owner
-          </p>
-          <show-collaborator
-            :collaborator="$_currentUserAsCollaborator"
-            aria-describedby="collaborator-as-fileowner"
-          />
-        </template>
-        <hr v-if="collaborators.length > 0" class="oc-mt-s oc-mb-s" />
-        <transition-group
-          id="files-collaborators-list"
-          class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm"
-          :enter-active-class="$_transitionGroupEnter"
-          :leave-active-class="$_transitionGroupLeave"
-          name="custom-classes-transition"
-          tag="ul"
-          :aria-label="$gettext('Share receivers')"
-        >
-          <li v-for="collaborator in collaborators" :key="collaborator.key">
+        <div class="avatars-wrapper">
+          <h4 v-if="hasSharees" class="shared-with-label" v-text="sharedWithLabel" />
+          <oc-button
+            v-oc-tooltip="sharedWithTooltip"
+            appearance="raw"
+            class="sharee-avatars-button"
+            :aria-label="sharedWithTooltip"
+            data-testid="shared-with-avatars"
+            @click="onClickSharedWith"
+          >
+            <oc-avatars
+              v-if="!showShareesList"
+              :items="collaboratorsAvatar"
+              :stacked="true"
+              :is-tooltip-displayed="false"
+              class="sharee-avatars"
+            />
+            <oc-icon v-else name="close" />
+          </oc-button>
+        </div>
+        <template v-if="showShareesList">
+          <template v-if="$_ownerAsCollaborator">
+            <p id="original-sharing-user" v-translate class="oc-invisible-sr">File owner</p>
             <show-collaborator
-              :collaborator="collaborator"
-              :modifiable="!collaborator.indirect"
-              @onDelete="$_ocCollaborators_deleteShare"
-              @onEdit="$_ocCollaborators_editShare"
+              :collaborator="$_ownerAsCollaborator"
+              aria-describedby="original-sharing-user"
             />
-          </li>
-        </transition-group>
+            <hr />
+            <show-collaborator :collaborator="$_currentUserAsCollaborator" />
+          </template>
+          <template v-else>
+            <p id="collaborator-as-fileowner" v-translate class="oc-invisible-sr">
+              You are the file owner
+            </p>
+            <show-collaborator
+              :collaborator="$_currentUserAsCollaborator"
+              aria-describedby="collaborator-as-fileowner"
+            />
+          </template>
+          <hr v-if="collaborators.length > 0" class="oc-mt-s oc-mb-s" />
+          <transition-group
+            id="files-collaborators-list"
+            class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm"
+            :enter-active-class="$_transitionGroupEnter"
+            :leave-active-class="$_transitionGroupLeave"
+            name="custom-classes-transition"
+            tag="ul"
+            :aria-label="$gettext('Share receivers')"
+          >
+            <li v-for="collaborator in collaborators" :key="collaborator.key">
+              <show-collaborator
+                :collaborator="collaborator"
+                :modifiable="!collaborator.indirect"
+                @onDelete="$_ocCollaborators_deleteShare"
+                @onEdit="$_ocCollaborators_editShare"
+              />
+            </li>
+          </transition-group>
+        </template>
       </template>
     </div>
+
     <new-collaborator
       v-if="$_ocCollaborators_canShare && currentView === VIEW_NEW"
       key="new-collaborator"
@@ -117,7 +140,8 @@ export default {
       VIEW_SHOW,
       VIEW_EDIT,
       VIEW_NEW,
-      currentView: VIEW_SHOW
+      currentView: VIEW_SHOW,
+      showShareesList: false
     }
   },
   computed: {
@@ -145,6 +169,20 @@ export default {
         : ''
     },
 
+    sharedWithLabel() {
+      return this.$gettext('Shared with')
+    },
+
+    hasSharees() {
+      return this.collaboratorsAvatar.length > 0
+    },
+
+    sharedWithTooltip() {
+      return this.showShareesList
+        ? this.$gettext('Collapse list of invited people')
+        : this.$gettext('Show all invited people')
+    },
+
     sharesLoading() {
       return (
         this.currentFileOutgoingSharesLoading ||
@@ -176,6 +214,14 @@ export default {
         role
       }
     },
+    collaboratorsAvatar() {
+      return this.collaborators.map(c => {
+        return {
+          ...c.collaborator,
+          shareType: c.shareType
+        }
+      })
+    },
 
     $_ownerAsCollaborator() {
       if (!this.$_allIncomingShares.length) {
@@ -322,6 +368,9 @@ export default {
       'loadIncomingShares',
       'incomingSharesClearState'
     ]),
+    onClickSharedWith() {
+      this.showShareesList = !this.showShareesList
+    },
     $_isCollaboratorShare(collaborator) {
       return userShareTypes.includes(collaborator.shareType)
     },
@@ -413,6 +462,21 @@ export default {
 </script>
 
 <style>
+.avatars-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+}
+.shared-with-label {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+.sharee-avatars {
+  justify-self: flex-end;
+}
 /* TODO: Move to design system */
 .oc-app-side-bar .oc-label {
   display: block;

packages/web-app-files/src/helpers/resources.js

@@ -122,12 +122,14 @@ export function aggregateResourceShares(
         prev.sharedWith.push({
           username: share.share_with,
           displayName: share.share_with_displayname,
-          avatar: undefined
+          avatar: undefined,
+          shareType: share.share_type
         })
       } else if (share.share_type === shareTypes.link) {
         prev.sharedWith.push({
           name: share.name || share.token,
-          link: true
+          link: true,
+          shareType: share.share_type
         })
       }
 
@@ -139,14 +141,16 @@ export function aggregateResourceShares(
         {
           username: share.share_with,
           displayName: share.share_with_displayname,
-          avatar: undefined
+          avatar: undefined,
+          shareType: share.share_type
         }
       ]
     } else if (share.share_type === shareTypes.link) {
       share.sharedWith = [
         {
           name: share.name || share.token,
-          link: true
+          link: true,
+          shareType: share.share_type
         }
       ]
     }

tests/acceptance/pageObjects/FilesPageElement/filesList.js

@@ -15,7 +15,8 @@ module.exports = {
      */
     openSharingDialog: async function(resource) {
       await this.openSideBar(resource)
-      return await appSideBar.activatePanel('people')
+      await appSideBar.activatePanel('people')
+      return await this.click('@sharedWithAvatars')
     },
     /**
      * @param {string} resource
@@ -743,6 +744,9 @@ module.exports = {
     },
     btnToggleSideBar: {
       selector: '#files-toggle-sidebar'
+    },
+    sharedWithAvatars: {
+      selector: '[data-testid="shared-with-avatars"]'
     }
   }
 }