Removed share type and moved additional info on its own row

Refactor autocomplete select test

Use indicator to retrieve collaborator type

Refactor assert in autocomplete list

apps/files/src/components/Collaborators/AutocompleteItem.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="uk-flex uk-flex-middle">
-    <avatar-image v-if="item.value.shareType === shareTypes.user" class="uk-margin-small-right" :width="48" :userid="item.value.shareWith" :userName="item.label" />
+  <div
+    class="uk-flex uk-flex-middle"
+    :class="collaboratorClass"
+  >
+    <avatar-image v-if="isUser" class="uk-margin-small-right" :width="48" :userid="item.value.shareWith" :userName="item.label" />
     <template v-else>
       <oc-icon v-if="item.value.shareType === shareTypes.group" class="uk-margin-small-right" name="group" size="large" key="avatar-group" />
       <oc-icon v-else class="uk-margin-small-right" name="person" size="large" key="avatar-generic-person" />
@@ -11,7 +14,6 @@
         v-text="item.label"
       />
       <div v-if="item.value.shareWithAdditionalInfo" v-text="item.value.shareWithAdditionalInfo" />
-      <div class="uk-text-meta" v-text="$_ocCollaborators_collaboratorType(item.value.shareType)" />
     </div>
   </div>
 </template>
@@ -22,13 +24,26 @@ import { shareTypes } from '../../helpers/shareTypes'
 
 export default {
   name: 'AutocompleteItem',
+
   mixins: [Mixins],
+
   props: ['item'],
+
   data () {
     return {
       shareTypes,
       loading: false
     }
+  },
+
+  computed: {
+    isUser () {
+      return this.item.value.shareType === shareTypes.user
+    },
+
+    collaboratorClass () {
+      return 'files-collaborators-search-' + (this.isUser ? 'user' : 'group')
+    }
   }
 }
 </script>

apps/files/src/components/Collaborators/Collaborator.vue

@@ -45,18 +45,41 @@
       </oc-table-cell>
       <oc-table-cell shrink>
         <div key="collaborator-avatar-loaded">
-          <avatar-image v-if="collaborator.shareType === shareTypes.user" class="uk-margin-small-right" :width="48" :userid="collaborator.collaborator.name" :userName="collaborator.collaborator.displayName" />
+          <avatar-image
+            v-if="collaborator.shareType === shareTypes.user"
+            class="uk-margin-small-right files-collaborators-collaborator-indicator"
+            :width="48"
+            :userid="collaborator.collaborator.name"
+            :userName="collaborator.collaborator.displayName"
+            :aria-label="$gettext('User')"
+          />
           <div v-else key="collaborator-avatar-placeholder">
-            <oc-icon v-if="collaborator.shareType === shareTypes.group" class="uk-margin-small-right" name="group" size="large" key="avatar-group" />
-            <oc-icon v-else class="uk-margin-small-right" name="person" size="large" key="avatar-generic-person" />
+            <oc-icon
+              v-if="collaborator.shareType === shareTypes.group"
+              class="uk-margin-small-right files-collaborators-collaborator-indicator"
+              name="group"
+              size="large"
+              key="avatar-group"
+              :aria-label="$gettext('Group')"
+            />
+            <oc-icon
+              v-else
+              class="uk-margin-small-right files-collaborators-collaborator-indicator"
+              name="person"
+              size="large"
+              key="avatar-generic-person"
+              :aria-label="$gettext('Remote user')"
+            />
           </div>
         </div>
       </oc-table-cell>
       <oc-table-cell>
-        <div class="uk-flex uk-flex-column uk-flex-center">
+        <div
+          class="uk-flex uk-flex-column uk-flex-center"
+          :class="collaboratorListItemClass"
+        >
           <div class="oc-text">
             <span class="files-collaborators-collaborator-name uk-text-bold">{{ collaborator.collaborator.displayName }}</span>
-            <span v-if="collaborator.shareType === shareTypes.user && collaborator.collaborator.additionalInfo" class="uk-text-meta files-collaborators-collaborator-additional-info">({{ collaborator.collaborator.additionalInfo }})</span>
             <translate
               v-if="collaborator.collaborator.name === user.id"
               translate-comment="Indicator for current user in collaborators list"
@@ -65,7 +88,11 @@
               (me)
             </translate>
           </div>
-          <span class="uk-text-meta files-collaborators-collaborator-share-type" v-text="$_ocCollaborators_collaboratorType(collaborator.shareType)" />
+          <span
+            v-if="collaborator.collaborator.additionalInfo"
+            class="uk-text-meta files-collaborators-collaborator-additional-info"
+            v-text="collaborator.collaborator.additionalInfo"
+          />
           <span class="oc-text"><span class="files-collaborators-collaborator-role">{{ originalRole.label }}</span><template v-if="collaborator.expires"> | <translate class="files-collaborators-collaborator-expires" :translate-params="{expires: formDateFromNow(collaborator.expires)}">Expires %{expires}</translate></template></span>
         </div>
       </oc-table-cell>
@@ -188,6 +215,14 @@ export default {
       return {
         label: this.$gettext('Unknown Role')
       }
+    },
+
+    isUser () {
+      return this.collaborator.shareType === shareTypes.user
+    },
+
+    collaboratorListItemClass () {
+      return 'files-collaborators-collaborator-info-' + (this.isUser ? 'user' : 'group')
     }
   },
   methods: {

apps/files/src/mixins/collaborators.js

@@ -69,13 +69,6 @@ export default {
     }
   },
   methods: {
-    $_ocCollaborators_collaboratorType (type) {
-      if (parseInt(type, 10) === 0) return this.$gettext('User')
-
-      if (parseInt(type, 10) === 6) return this.$gettext('Remote user')
-
-      return this.$gettext('Group')
-    },
     collaboratorOptionChanged ({ role, permissions, expirationDate }) {
       this.selectedRole = role
       this.additionalPermissions = permissions

tests/acceptance/features/webUISharingInternalUsers/shareWithUsers.feature

@@ -546,8 +546,8 @@ Feature: Sharing files and folders with internal users
     Then user "User Two" should be listed with additional info "<additional-info-result>" in the collaborators list on the webUI
     Examples:
       | additional-info-field | additional-info-result |
-      | id                    | (user2)                |
-      | email                 | (user2@example.org)    |
+      | id                    | user2                  |
+      | email                 | user2@example.org      |
 
   Scenario: collaborators list does not contain additional info when disabled
     Given the setting "user_additional_info_field" of app "core" has been set to ""

tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js

@@ -74,10 +74,11 @@ module.exports = {
         subSelectors = {
           displayName: this.elements.collaboratorInformationSubName,
           role: this.elements.collaboratorInformationSubRole,
-          shareType: this.elements.collaboratorInformationSubShareType,
           additionalInfo: this.elements.collaboratorInformationSubAdditionalInfo,
           viaLabel: this.elements.collaboratorInformationSubVia,
-          resharer: this.elements.collaboratorInformationSubResharer
+          resharer: this.elements.collaboratorInformationSubResharer,
+          // Type of user is stored in aria-label of indicator so we use the selector for the indicator
+          shareType: this.elements.collaboratorIndicator
         }
       }
 
@@ -105,9 +106,16 @@ module.exports = {
           )
 
           if (attrElementId) {
-            await this.api.elementIdText(attrElementId, (text) => {
-              collaboratorResult[attrName] = text.value
-            })
+            // Get collaborator type via aria-label of indicator
+            if (attrName === 'shareType') {
+              await this.api.elementIdAttribute(attrElementId, 'aria-label', (label) => {
+                collaboratorResult[attrName] = label.value
+              })
+            } else {
+              await this.api.elementIdText(attrElementId, (text) => {
+                collaboratorResult[attrName] = text.value
+              })
+            }
           } else {
             collaboratorResult[attrName] = false
           }
@@ -169,10 +177,6 @@ module.exports = {
       // within collaboratorsInformation
       selector: '.files-collaborators-collaborator-role'
     },
-    collaboratorInformationSubShareType: {
-      // within collaboratorsInformation
-      selector: '.files-collaborators-collaborator-share-type'
-    },
     collaboratorInformationSubAdditionalInfo: {
       // within collaboratorsInformation
       selector: '.files-collaborators-collaborator-additional-info'
@@ -184,6 +188,9 @@ module.exports = {
     collaboratorInformationSubResharer: {
       // within collaboratorsInformation
       selector: '.files-collaborators-collaborator-reshare-information'
+    },
+    collaboratorIndicator: {
+      selector: '.files-collaborators-collaborator-indicator'
     }
   }
 }

tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js

@@ -1,11 +1,13 @@
-const groupSharePostfix = '\nGroup'
-const userSharePostfix = '\nUser'
-const federationSharePostfix = '\nRemote user'
 const util = require('util')
 const _ = require('lodash')
 const { COLLABORATOR_PERMISSION_ARRAY } = require('../../helpers/sharingHelper')
 const { client } = require('nightwatch-api')
 const collaboratorDialog = client.page.FilesPageElement.SharingDialog.collaboratorsDialog()
+const SHARE_TYPE_STRING = {
+  user: 'user',
+  group: 'group',
+  federation: 'remote'
+}
 
 module.exports = {
   commands: {
@@ -99,29 +101,14 @@ module.exports = {
           }
         })
 
-      const webElementIdList = await this.getShareAutocompleteWebElementIdList()
+      let receiverType = (shareWithGroup === true) ? SHARE_TYPE_STRING.group : SHARE_TYPE_STRING.user
+      receiverType = (remoteShare === true) ? SHARE_TYPE_STRING.federation : receiverType
 
-      let index = 0
-      for (; index !== webElementIdList.length; index++) {
-        let wasFound = false
-        const webElementId = webElementIdList[index]
-        await this.api.elementIdText(webElementId, (text) => {
-          let suffix = (shareWithGroup === true) ? groupSharePostfix : userSharePostfix
-          suffix = (remoteShare === true) ? federationSharePostfix : suffix
-          if (text.value === sharee + suffix) {
-            wasFound = true
-            this.api
-              .elementIdClick(webElementId)
-              .waitForOutstandingAjaxCalls()
-          }
-        })
-        if (wasFound === true) break
-      }
+      const collaboratorSelector = this.getCollaboratorInAutocompleteList(receiver, receiverType)
 
-      if (index === webElementIdList.length) {
-        // * we won't see this probably, unless dropdown gives different results than entered
-        throw new Error(`Could not find ${sharee} on the sharing auto-completion list.`)
-      }
+      await this.useXpath().click(collaboratorSelector)
+
+      return this
     },
 
     /**
@@ -402,20 +389,6 @@ module.exports = {
         .click(newRoleButton)
         .waitForOutstandingAjaxCalls()
     },
-    /**
-     *
-     * @returns {string}
-     */
-    getGroupSharePostfix: function () {
-      return groupSharePostfix
-    },
-    /**
-     *
-     * @returns {string}
-     */
-    getUserSharePostfix: function () {
-      return userSharePostfix
-    },
     /**
      * checks whether autocomplete list is visible
      *
@@ -430,6 +403,88 @@ module.exports = {
         }
       )
       return isVisible
+    },
+
+    /**
+     * Checks if the users found in the autocomplete list consists of all the created users whose display name or userId
+     * matches with the pattern
+     *
+     * @param {string} usersMatchingPattern
+     *
+     */
+    assertUsersInAutocompleteList: function (usersMatchingPattern) {
+      usersMatchingPattern.map(user => {
+        const collaboratorSelector = this.getCollaboratorInAutocompleteList(user, 'user')
+
+        return this.useXpath().expect.element(collaboratorSelector).to.be.visible
+      })
+
+      return this
+    },
+
+    /**
+     * Retures a xpath for the collaborator in the autocomplete list
+     * @param {string} collaborator Name of hte collaborator which should be found
+     * @param {string} type Type of the collaborator which should be found
+     * @returns {string} xpath of the collaborator
+     */
+    getCollaboratorInAutocompleteList: function (collaborator, type) {
+      return (
+        util.format(this.elements.collaboratorAutocompleteItem.selector, type) +
+        util.format(this.elements.collaboratorAutocompleteItemName.selector, collaborator)
+      )
+    },
+
+    displayAllCollaboratorsAutocompleteResults: function () {
+      return this.click('@sharingAutoCompleteShowAllResultsButton')
+    },
+
+    /**
+     * Checks if the groups found in the autocomplete list consists of all the created groups whose name
+     * matches with the pattern
+     *
+     * @param {string} groupMatchingPattern
+     *
+     */
+    assertGroupsInAutocompleteList: function (groupMatchingPattern) {
+      groupMatchingPattern.map(user => {
+        const collaboratorSelector = this.getCollaboratorInAutocompleteList(user, 'group')
+
+        return this.useXpath().expect.element(collaboratorSelector).to.be.visible
+      })
+
+      return this
+    },
+
+    /**
+     * Checks if the already existingCollaborator is not in the autocomplete list
+     *
+     * @param {string} name Name of the collaborator
+     * @param {string} type Type of the collaborator. Can be either user or group
+     *
+     */
+    assertAlreadyExistingCollaboratorIsNotInAutocompleteList: function (name, type) {
+      const collaboratorSelector = this.getCollaboratorInAutocompleteList(name, type)
+
+      return this.useXpath().expect.element(collaboratorSelector).to.not.be.present
+    },
+
+    /**
+     * Checks if the collaborator is in the autocomplete list
+     *
+     * @param {string} name Name of the collaborator
+     * @param {string} type Type of the collaborator. Can be either user or group
+     * @param {boolean} shouldBePresent Whether the collaborator should be found in the list or not
+     *
+     */
+    assertCollaboratorsInAutocompleteList: function (name, type, shouldBePresent = true) {
+      const collaboratorSelector = this.getCollaboratorInAutocompleteList(name, type)
+
+      if (shouldBePresent) {
+        return this.useXpath().expect.element(collaboratorSelector).to.be.visible
+      }
+
+      return this.useXpath().expect.element(collaboratorSelector).to.not.be.present
     }
   },
   elements: {
@@ -527,6 +582,22 @@ module.exports = {
     collaboratorExpirationDate: {
       selector: '//span[contains(@class, "files-collaborators-collaborator-name") and text()="%s"]/../../span/span[contains(@class, "files-collaborators-collaborator-expires")]',
       locateStrategy: 'xpath'
+    },
+    collaboratorAutocompleteItem: {
+      selector: '//div[contains(@class, "files-collaborators-search-%s")]',
+      locateStrategy: 'xpath'
+    },
+    collaboratorAutocompleteItemName: {
+      selector: '//div[contains(@class, "files-collaborators-autocomplete-username") and text()="%s"]',
+      locateStrategy: 'xpath'
+    },
+    collaboratorsListItemInfo: {
+      selector: '//div[contains(@class, "files-collaborators-collaborator-info-%s")]',
+      locateStrategy: 'xpath'
+    },
+    collaboratorsListItemName: {
+      selector: '//span[contains(@class, "files-collaborators-collaborator-name") and text()="%s"]',
+      locateStrategy: 'xpath'
     }
   }
 }