Merge pull request #4203 from owncloud/collaborators-autocomplete

owncloud · Nov 1, 2020 · bf4a1d7 · bf4a1d7
2 parents 4717624 + befd557
commit bf4a1d7
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 26 deletions.
diff --git a/apps/files/src/components/Collaborators/AutocompleteItem.vue b/apps/files/src/components/Collaborators/AutocompleteItem.vue
@@ -18,8 +18,13 @@
       <oc-icon v-else key="avatar-generic-person" class="oc-mr-s" name="person" size="xlarge" />
     </template>
     <div class="files-collaborators-autocomplete-user-text">
-      <div class="oc-text-bold files-collaborators-autocomplete-username" v-text="item.label" />
-      <div v-if="item.value.shareWithAdditionalInfo" v-text="item.value.shareWithAdditionalInfo" />
+      <span class="oc-text-bold files-collaborators-autocomplete-username" v-text="item.label" />
+      <span
+        v-if="item.value.shareWithAdditionalInfo"
+        class="uk-text-meta"
+        v-text="item.value.shareWithAdditionalInfo"
+      />
+      <div v-text="collaboratorType(item.value.shareType)" />
     </div>
   </div>
 </template>
@@ -42,18 +47,21 @@ export default {
 
   data() {
     return {
-      shareTypes,
       loading: false
     }
   },
 
   computed: {
+    shareTypes() {
+      return shareTypes
+    },
+
     isUser() {
-      return this.item.value.shareType === shareTypes.user
+      return this.item.value.shareType === this.shareTypes.user
     },
 
     isRemoteUser() {
-      return this.item.value.shareType === shareTypes.remote
+      return this.item.value.shareType === this.shareTypes.remote
     },
 
     collaboratorClass() {

diff --git a/apps/files/src/components/Collaborators/Collaborator.vue b/apps/files/src/components/Collaborators/Collaborator.vue
@@ -105,21 +105,27 @@
       <oc-table-cell>
         <div class="uk-flex uk-flex-column uk-flex-center" :class="collaboratorListItemClass">
           <div class="oc-text">
-            <span class="files-collaborators-collaborator-name oc-text-bold">{{
-              collaborator.collaborator.displayName
-            }}</span>
-            <translate
-              v-if="collaborator.collaborator.name === user.id"
-              translate-comment="Indicator for current user in list of people"
+            <span>
+              <span class="files-collaborators-collaborator-name oc-text-bold">{{
+                collaborator.collaborator.displayName
+              }}</span>
+              <translate
+                v-if="collaborator.collaborator.name === user.id"
+                translate-comment="Indicator for current user in list of people"
+                class="uk-text-meta files-collaborators-collaborator-additional-info"
+              >
+                (me)
+              </translate>
+            </span>
+            <span
+              v-if="collaborator.collaborator.additionalInfo"
               class="uk-text-meta files-collaborators-collaborator-additional-info"
-            >
-              (me)
-            </translate>
+              v-text="collaborator.collaborator.additionalInfo"
+            />
           </div>
-          <span
-            v-if="collaborator.collaborator.additionalInfo"
-            class="uk-text-meta files-collaborators-collaborator-additional-info"
-            v-text="collaborator.collaborator.additionalInfo"
+          <div
+            v-if="collaborator.collaborator.name !== user.id"
+            v-text="collaboratorType(collaborator.shareType)"
           />
           <span class="oc-text"
             ><span class="files-collaborators-collaborator-role">{{ originalRole.label }}</span
@@ -205,13 +211,16 @@ export default {
   },
   data: function() {
     return {
-      shareTypes,
       removalInProgress: false
     }
   },
   computed: {
     ...mapGetters(['user']),
 
+    shareTypes() {
+      return shareTypes
+    },
+
     $_resharerToggleId() {
       return 'collaborator-' + this.collaborator.collaborator.name + '-resharer-details-toggle'
     },
@@ -281,11 +290,11 @@ export default {
     },
 
     isUser() {
-      return this.collaborator.shareType === shareTypes.user
+      return this.collaborator.shareType === this.shareTypes.user
     },
 
     isRemoteUser() {
-      return this.collaborator.shareType === shareTypes.remote
+      return this.collaborator.shareType === this.shareTypes.remote
     },
 
     collaboratorListItemClass() {

diff --git a/apps/files/src/components/Collaborators/NewCollaborator.vue b/apps/files/src/components/Collaborators/NewCollaborator.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="files-collaborators-collaborator-add-dialog">
-    <label for="oc-sharing-autocomplete"><translate>Add People:</translate></label>
-    <oc-grid gutter="small">
+    <label for="oc-sharing-autocomplete" class="oc-mb-s uk-display-block">
+      <translate>Add People:</translate>
       <oc-autocomplete
         id="oc-sharing-autocomplete"
         ref="ocSharingAutocomplete"
@@ -20,7 +20,7 @@
           <autocomplete-item :item="item" />
         </template>
       </oc-autocomplete>
-    </oc-grid>
+    </label>
     <oc-grid v-if="selectedCollaborators.length > 0" gutter="small">
       <div>
         <div>

diff --git a/apps/files/src/mixins/collaborators.js b/apps/files/src/mixins/collaborators.js
@@ -1,5 +1,6 @@
 import { mapGetters } from 'vuex'
 import roles from '../helpers/collaboratorRolesDefinition'
+import { shareTypes } from '../helpers/shareTypes'
 
 export default {
   computed: {
@@ -80,6 +81,21 @@ export default {
       this.selectedRole = role
       this.additionalPermissions = permissions
       this.expirationDate = expirationDate
+    },
+
+    collaboratorType(type) {
+      switch (type) {
+        case shareTypes.user:
+          return this.$gettext('User')
+        case shareTypes.group:
+          return this.$gettext('Group')
+        case shareTypes.guest:
+          return this.$gettext('Guest')
+        case shareTypes.remote:
+          return this.$gettext('Remote user')
+        default:
+          return this.$gettext('Unknown type')
+      }
     }
   }
 }
diff --git a/changelog/unreleased/collaborator-type b/changelog/unreleased/collaborator-type
@@ -0,0 +1,5 @@
+Enhancement: Display collaborators type
+
+We've added a new line into the collaborators autocomplete and list in the sidebar to display their type.
+
+https://github.com/owncloud/phoenix/pull/4203
diff --git a/tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js b/tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js
@@ -236,7 +236,7 @@ module.exports = {
     },
     collaboratorExpirationInfo: {
       selector:
-        '//div/span[.="%s"]/parent::div/following-sibling::span/span[contains(text(), "Expires")]',
+        '//span[.="%s"]//ancestor::div[contains(@class, "files-collaborators-collaborator-info")]//span[contains(text(), "Expires")]',
       locateStrategy: 'xpath'
     }
   }

diff --git a/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js b/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js
@@ -718,7 +718,7 @@ module.exports = {
     },
     collaboratorAutocompleteItemName: {
       selector:
-        '//div[contains(@class, "files-collaborators-autocomplete-username") and text()="%s"]',
+        '//div[contains(@class, "files-collaborators-autocomplete-user-text")]/span[contains(@class, "files-collaborators-autocomplete-username") and text()="%s"]',
       locateStrategy: 'xpath'
     },
     collaboratorsListItemInfo: {