diff --git a/changelog/unreleased/enhancement-redesign-shared-with-list b/changelog/unreleased/enhancement-redesign-shared-with-list index c44859dcb24..d41eeae1dfc 100644 --- a/changelog/unreleased/enhancement-redesign-shared-with-list +++ b/changelog/unreleased/enhancement-redesign-shared-with-list @@ -5,5 +5,6 @@ We've also fixed a bug, where the role in a child of a share wasn't shown. https://github.com/owncloud/web/pull/7252 https://github.com/owncloud/web/pull/7310 +https://github.com/owncloud/web/pull/7315 https://github.com/owncloud/web/issues/7110 diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue index 344bc65c2c6..8d3d791228f 100644 --- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue +++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue @@ -35,6 +35,7 @@
  • - - -
  • - Addition -
  • -
  • - Type -
  • - +
    Access details
    +
    +
    Addition
    +
    +
    Type
    +
    +
    @@ -91,27 +79,29 @@ /> +
    + + + + + +
    -
    - - - - - -
    @@ -281,7 +271,7 @@ export default defineComponent({ text: this.$gettext('Invite persons or groups to access this file or folder.') } }, - shareAccessToggleId() { + editDropDownToggleId() { return uuid.v4() } }, @@ -293,6 +283,11 @@ export default defineComponent({ this.$emit('onDelete', this.share) }, + showAccessDetails() { + console.log('SHOW EVENT EMITTED') + this.$refs.accessDetails.show() + }, + shareRoleChanged({ role, permissions }) { const expirationDate = this.share.expires try { @@ -343,4 +338,20 @@ export default defineComponent({ .sharee-avatar { min-width: 48px; } + +.share-access-details-drop { + dl { + display: grid; + grid-template-columns: max-content auto; + } + + dt { + grid-column-start: 1; + } + + dd { + grid-column-start: 2; + margin-left: var(--oc-space-medium); + } +} 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 d43f62bf4c9..02a1c862698 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 @@ -64,21 +64,15 @@ describe('Collaborator ListItem component', () => { const wrapper = createWrapper() expect(wrapper.find(selectors.collaboratorName).text()).toEqual('Brian Murphy') }) - it.each(ShareTypes.authenticated)('shows a button for the access details', (shareType) => { - const wrapper = createWrapper({ shareType: shareType.value }) - expect(wrapper.find(selectors.accessDetailsButton).exists()).toBeTruthy() - }) }) describe('modifiable property', () => { it('shows interactive elements when modifiable', () => { const wrapper = createWrapper({ modifiable: true }) expect(wrapper.find(selectors.collaboratorRole).exists()).toBeTruthy() - expect(wrapper.find(selectors.collaboratorEdit).exists()).toBeTruthy() }) it('hides interactive elements when not modifiable', () => { const wrapper = createWrapper({ modifiable: false }) expect(wrapper.find(selectors.collaboratorRole).exists()).toBeFalsy() - expect(wrapper.find(selectors.collaboratorEdit).exists()).toBeFalsy() }) }) describe('share inheritance indicators', () => { diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.js.snap index 3db87eb28dd..37223debc74 100644 --- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.js.snap +++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.js.snap @@ -6,15 +6,14 @@ exports[`Collaborator ListItem component share inheritance indicators show when
    Share receiver name: Brian Murphy (brian@owncloud.com) - - - -
    @@ -25,12 +24,12 @@ exports[`Collaborator ListItem component share inheritance indicators show when
    - -
    -
    - via - folder - +
    + via + folder + +
    +
    diff --git a/tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js b/tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js index f0fc100297e..bcf5b72b8e6 100644 --- a/tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js +++ b/tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js @@ -22,6 +22,7 @@ module.exports = { .waitForAnimationToFinish() // wait for transition on the modal to finish .click(dialogConfirmSelector) .waitForAjaxCallsToStartAndFinish() + .waitForElementNotPresent('@collaboratorEditDropDownList') }, /** * Open the role selection dialog for a new share or for editing the given collaborator @@ -98,7 +99,7 @@ module.exports = { filterDisplayName = null, timeout = null ) { - let results = [] + const results = [] let listItemSelector = { selector: this.elements.collaboratorsListItem.selector @@ -137,10 +138,20 @@ module.exports = { ) } ) - - results = listItemElementIds.map(async (collaboratorElementId) => { + for (const collaboratorElementId of listItemElementIds) { const collaboratorResult = {} + let collaboratorEditButton = null + await this.api.elementIdElement( + collaboratorElementId, + 'css selector', + this.elements.collaboratorEditButton, + (result) => { + collaboratorEditButton = result.value.ELEMENT + } + ) + await this.api.elementIdClick(collaboratorEditButton) + let accessDetailsBtn = null await this.api.elementIdElement( collaboratorElementId, @@ -174,11 +185,24 @@ module.exports = { collaboratorResult[attrName] = false } } - this.api.mouseButtonClick() - return collaboratorResult - }) + results.push(collaboratorResult) + let collaboratorAvatarElId = null + await this.api.elementIdElement( + collaboratorElementId, + 'css selector', + '.files-collaborators-collaborator-indicator', + (result) => { + collaboratorAvatarElId = result.value.ELEMENT + } + ) + // to hide the access details dialog from the screen, click on the collaborator avatar + await this.api.elementIdClick(collaboratorAvatarElId) + await this.waitForElementNotPresent( + '@collaboratorAccessDetailsDrop', + this.api.globals.waitForNegativeConditionTimeout + ) + } - results = await Promise.all(results) return results }, /** @@ -287,11 +311,17 @@ module.exports = { selector: '//button[contains(@class, "files-collaborators-expiration-button")]', locateStrategy: 'xpath' }, + collaboratorEditButton: { + selector: '.collaborator-edit-dropdown-options-btn' + }, collaboratorAccessDetailsButton: { - selector: '.files-collaborators-collaborator-access-details-button' + selector: '.show-access-details' }, collaboratorAccessDetailsDrop: { selector: '.share-access-details-drop' + }, + collaboratorEditDropDownList: { + selector: '.collaborator-edit-dropdown-options-list' } } } diff --git a/tests/acceptance/stepDefinitions/sharingContext.js b/tests/acceptance/stepDefinitions/sharingContext.js index 50670cbea40..4065ec2385a 100644 --- a/tests/acceptance/stepDefinitions/sharingContext.js +++ b/tests/acceptance/stepDefinitions/sharingContext.js @@ -145,7 +145,7 @@ const assertCollaboratorslistDoesNotContain = async function (type, name) { { displayName: collaboratorsDialog.elements.collaboratorInformationSubName }, - null, + name, client.globals.waitForNegativeConditionTimeout ) .then((shares) => {