diff --git a/changelog/unreleased/enhancement-select-roles b/changelog/unreleased/enhancement-select-roles new file mode 100644 index 00000000000..8d1e2b1cfcb --- /dev/null +++ b/changelog/unreleased/enhancement-select-roles @@ -0,0 +1,6 @@ +Enhancement: Use `oc-select` for role select + +We've used the new `oc-select` component from ODS for selecting role in people and public links accordions in the right sidebar. +We are using this component to enable keyboard navigation when selecting the role. + +https://github.com/owncloud/web/pull/4937 \ No newline at end of file diff --git a/packages/web-app-files/src/components/Collaborators/Collaborator.vue b/packages/web-app-files/src/components/Collaborators/Collaborator.vue index 8d285085ae1..ce132d1aa53 100644 --- a/packages/web-app-files/src/components/Collaborators/Collaborator.vue +++ b/packages/web-app-files/src/components/Collaborators/Collaborator.vue @@ -266,11 +266,8 @@ export default { }, originalRole() { - if (this.collaborator.role.name === 'advancedRole') { - return this.advancedRole - } + const role = this.displayRoles.find(r => r.name === this.collaborator.role.name) - const role = this.displayRoles[this.collaborator.role.name] if (role) { return role } diff --git a/packages/web-app-files/src/components/Collaborators/CollaboratorsEditOptions.vue b/packages/web-app-files/src/components/Collaborators/CollaboratorsEditOptions.vue index 12b166bd0f3..e6cd537c4b0 100644 --- a/packages/web-app-files/src/components/Collaborators/CollaboratorsEditOptions.vue +++ b/packages/web-app-files/src/components/Collaborators/CollaboratorsEditOptions.vue @@ -1,22 +1,33 @@ diff --git a/packages/web-app-files/src/components/Roles/RoleItem.vue b/packages/web-app-files/src/components/Roles/RoleItem.vue deleted file mode 100644 index 6cc9949027b..00000000000 --- a/packages/web-app-files/src/components/Roles/RoleItem.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - - - diff --git a/packages/web-app-files/src/components/Roles/RolesSelect.vue b/packages/web-app-files/src/components/Roles/RolesSelect.vue deleted file mode 100644 index 85e29ec791d..00000000000 --- a/packages/web-app-files/src/components/Roles/RolesSelect.vue +++ /dev/null @@ -1,68 +0,0 @@ - - - diff --git a/packages/web-app-files/src/helpers/collaboratorRolesDefinition.js b/packages/web-app-files/src/helpers/collaboratorRolesDefinition.js index 9af20291ba8..cfe8bf677e2 100644 --- a/packages/web-app-files/src/helpers/collaboratorRolesDefinition.js +++ b/packages/web-app-files/src/helpers/collaboratorRolesDefinition.js @@ -13,8 +13,8 @@ function returnOriginal(string) { */ export default ({ isFolder = false, $gettext = returnOriginal, allowSharePerm = false }) => { if (isFolder) { - return { - viewer: { + return [ + { name: 'viewer', label: $gettext('Viewer'), description: allowSharePerm @@ -22,7 +22,7 @@ export default ({ isFolder = false, $gettext = returnOriginal, allowSharePerm = : $gettext('Download and preview'), permissions: allowSharePerm ? ['read', 'share'] : ['read'] }, - editor: { + { name: 'editor', label: $gettext('Editor'), description: allowSharePerm @@ -32,11 +32,11 @@ export default ({ isFolder = false, $gettext = returnOriginal, allowSharePerm = ? ['read', 'update', 'create', 'delete', 'share'] : ['read', 'update', 'create', 'delete'] } - } + ] } - return { - viewer: { + return [ + { name: 'viewer', label: $gettext('Viewer'), description: allowSharePerm @@ -44,7 +44,7 @@ export default ({ isFolder = false, $gettext = returnOriginal, allowSharePerm = : $gettext('Download and preview'), permissions: allowSharePerm ? ['read', 'share'] : ['read'] }, - editor: { + { name: 'editor', label: $gettext('Editor'), description: allowSharePerm @@ -52,5 +52,5 @@ export default ({ isFolder = false, $gettext = returnOriginal, allowSharePerm = : $gettext('Edit, download and preview'), permissions: allowSharePerm ? ['read', 'update', 'share'] : ['read', 'update'] } - } + ] } diff --git a/packages/web-app-files/src/helpers/publicLinkRolesDefinition.js b/packages/web-app-files/src/helpers/publicLinkRolesDefinition.js index f6c742da4c9..6f28f81bdc4 100644 --- a/packages/web-app-files/src/helpers/publicLinkRolesDefinition.js +++ b/packages/web-app-files/src/helpers/publicLinkRolesDefinition.js @@ -11,33 +11,35 @@ function returnOriginal(string) { * @returns {object} Public link roles */ export default ({ isFolder = false, $gettext = returnOriginal }) => { - const roles = { - viewer: { + const roles = [ + { name: 'viewer', label: $gettext('Viewer'), description: $gettext('Recipients can view and download contents.'), permissions: 1 } - } + ] if (isFolder) { - roles.contributor = { - name: 'contributor', - label: $gettext('Contributor'), - description: $gettext('Recipients can view, download and upload contents.'), - permissions: 5 - } - roles.editor = { - name: 'editor', - label: $gettext('Editor'), - description: $gettext('Recipients can view, download, edit, delete and upload contents.'), - permissions: 15 - } - roles.uploader = { - name: 'uploader', - label: $gettext('Uploader'), - description: $gettext('Recipients can upload but existing contents are not revealed.'), - permissions: 4 - } + roles.push( + { + name: 'contributor', + label: $gettext('Contributor'), + description: $gettext('Recipients can view, download and upload contents.'), + permissions: 5 + }, + { + name: 'editor', + label: $gettext('Editor'), + description: $gettext('Recipients can view, download, edit, delete and upload contents.'), + permissions: 15 + }, + { + name: 'uploader', + label: $gettext('Uploader'), + description: $gettext('Recipients can upload but existing contents are not revealed.'), + permissions: 4 + } + ) } return roles } diff --git a/packages/web-app-files/src/mixins/collaborators.js b/packages/web-app-files/src/mixins/collaborators.js index 7e1c4dc0b8a..d712e1589a3 100644 --- a/packages/web-app-files/src/mixins/collaborators.js +++ b/packages/web-app-files/src/mixins/collaborators.js @@ -65,14 +65,16 @@ export default { isFolder: isFolder, allowSharePerm: !this.isOcis }) - collaboratorRoles.advancedRole = this.advancedRole + collaboratorRoles.push(this.advancedRole) return collaboratorRoles }, + displayRoles() { const result = this.roles - result[this.resharerRole.name] = this.resharerRole - result[this.ownerRole.name] = this.ownerRole + + result.push(this.resharerRole, this.ownerRole) + return result } }, diff --git a/tests/acceptance/helpers/stringHelper.js b/tests/acceptance/helpers/stringHelper.js new file mode 100644 index 00000000000..33ef36325c1 --- /dev/null +++ b/tests/acceptance/helpers/stringHelper.js @@ -0,0 +1,8 @@ +module.exports = { + camelize: function(str) { + return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) { + if (+match === 0) return '' // or if (/\s+/.test(match)) for white spaces + return index === 0 ? match.toLowerCase() : match.toUpperCase() + }) + } +} diff --git a/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js b/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js index f9a25cb6389..a328bd8646d 100644 --- a/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js +++ b/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js @@ -40,12 +40,8 @@ module.exports = { this.elements.publicLinkRoleSelectionDropdown.selector, role ) - return this.waitForElementPresent('@selectRoleButton') - .click('@selectRoleButton') - .waitForElementVisible('@rolesDropdown') - .waitForElementVisible(`@role${role}`) + return this.click('@selectRoleButton') .click(`@role${role}`) - .waitForElementNotVisible('@rolesDropdown') .useXpath() .waitForElementVisible(selectedRoleDropdown) .useCss() @@ -382,20 +378,17 @@ module.exports = { selectRoleButton: { selector: '#files-file-link-role-button' }, - rolesDropdown: { - selector: '#files-file-link-roles-dropdown' - }, roleViewer: { - selector: '#files-file-link-role-viewer' + selector: '#files-role-viewer' }, roleContributor: { - selector: '#files-file-link-role-contributor' + selector: '#files-role-contributor' }, roleEditor: { - selector: '#files-file-link-role-editor' + selector: '#files-role-editor' }, roleUploader: { - selector: '#files-file-link-role-uploader' + selector: '#files-role-uploader' }, errorMessageInsidePublicLinkContainer: { selector: '//div[contains(@class, "oc-alert-danger")]', @@ -440,7 +433,7 @@ module.exports = { selector: '#files-sidebar-private-link-icon-copied' }, publicLinkRoleSelectionDropdown: { - selector: '//button[contains(@class, "files-file-link-role-button")]//span[.="%s"]', + selector: '//div[contains(@class, "files-file-link-role-button-wrapper")]//span[.="%s"]', locateStrategy: 'xpath' } } diff --git a/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js b/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js index f7939ddaed9..49eda0ed88e 100644 --- a/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js +++ b/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js @@ -4,6 +4,7 @@ const { COLLABORATOR_PERMISSION_ARRAY, calculateDate } = require('../../helpers/ const { client } = require('nightwatch-api') const userSettings = require('../../helpers/userSettings') const collaboratorDialog = client.page.FilesPageElement.SharingDialog.collaboratorsDialog() +const stringHelper = require('../../helpers/stringHelper') const SHARE_TYPE_STRING = { user: 'user', group: 'group', @@ -203,12 +204,7 @@ module.exports = { .startCase() .replace(/\s/g, '') .value() - return this.waitForElementPresent('@newCollaboratorSelectRoleButton') - .click('@newCollaboratorSelectRoleButton') - .waitForElementVisible('@newCollaboratorRolesDropdown') - .waitForElementVisible(`@newCollaboratorRole${role}`) - .click(`@newCollaboratorRole${role}`) - .waitForElementNotVisible('@newCollaboratorRolesDropdown') + return this.click('@newCollaboratorSelectRoleButton').click(`@newCollaboratorRole${role}`) }, confirmShare: function() { return this.waitForElementPresent('@addShareSaveButton') @@ -405,13 +401,13 @@ module.exports = { * @returns {Promise} */ changeCollaboratorRoleInDropdown: function(newRole) { - const newRoleButton = util.format( - this.elements.roleButtonInDropdown.selector, - newRole.toLowerCase() - ) - return this.useXpath() - .waitForElementVisible('@selectRoleButtonInCollaboratorInformation') + newRole = newRole === 'Advanced permissions' ? 'advancedRole' : newRole + newRole = stringHelper.camelize(newRole) + + const newRoleButton = util.format(this.elements.roleButtonInDropdown.selector, newRole) + return this.waitForElementVisible('@selectRoleButtonInCollaboratorInformation') .click('@selectRoleButtonInCollaboratorInformation') + .useXpath() .waitForElementVisible(newRoleButton) .click(newRoleButton) .useCss() @@ -658,14 +654,11 @@ module.exports = { newCollaboratorSelectRoleButton: { selector: '#files-collaborators-role-button' }, - newCollaboratorRolesDropdown: { - selector: '#files-collaborators-roles-dropdown' - }, newCollaboratorRoleViewer: { - selector: '#files-collaborators-role-viewer' + selector: '#files-role-viewer' }, newCollaboratorRoleEditor: { - selector: '#files-collaborators-role-editor' + selector: '#files-role-editor' }, newCollaboratorItems: { selector: @@ -676,11 +669,10 @@ module.exports = { "//button[contains(@class, 'files-collaborators-collaborator-autocomplete-item-remove')]" }, newCollaboratorRoleAdvancedPermissions: { - selector: '#files-collaborators-role-advancedRole' + selector: '#files-role-advancedRole' }, selectRoleButtonInCollaboratorInformation: { - selector: '//button[contains(@class, "files-collaborators-role-button")]', - locateStrategy: 'xpath' + selector: '#files-collaborators-role-button' }, roleDropdownInCollaboratorInformation: { selector: '//div[contains(@id, "files-collaborators-roles-dropdown")]', @@ -688,8 +680,7 @@ module.exports = { }, roleButtonInDropdown: { // the translate bit is to make it case-insensitive - selector: - '//ul[contains(@class,"oc-autocomplete-suggestion-list")]//span[translate(.,"ABCDEFGHJIKLMNOPQRSTUVWXYZ","abcdefghjiklmnopqrstuvwxyz") ="%s"]', + selector: '//span[@id="files-role-%s"]', locateStrategy: 'xpath' }, permissionCheckbox: {