diff --git a/changelog/unreleased/enhancement-redesign-shared-with-list b/changelog/unreleased/enhancement-redesign-shared-with-list new file mode 100644 index 00000000000..29f6dd13215 --- /dev/null +++ b/changelog/unreleased/enhancement-redesign-shared-with-list @@ -0,0 +1,7 @@ +Enhancement: Redesign shared with list + +We've redesigned the shared with list, to achieve more spacing and a better user experience. +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/issues/7110 diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue index e5bbc3e7055..df094d19b4f 100644 --- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue +++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/AutocompleteItem.vue @@ -37,7 +37,7 @@ :accessible-label="$gettext('User')" />
- + -
+
-
-

-

+
+ + -

-

-

Access details
+ +
  • + Addition +
    • +
  • + Type +
    • +     + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    + + + + + +
    +
    - - -

    -

    -

    +
    +
    -
    - - -
    -
    - -
    @@ -190,14 +211,13 @@ export default defineComponent({ }, shareAdditionalInfo() { - if (!this.share.collaborator.additionalInfo) { - return - } - return ` (${this.share.collaborator.additionalInfo})` + return this.share.collaborator.additionalInfo }, shareDisplayNameTooltip() { - return this.shareDisplayName + (this.shareAdditionalInfo || '') + return ( + this.shareDisplayName + (this.shareAdditionalInfo ? `(${this.shareAdditionalInfo})` : '') + ) }, screenreaderShareDisplayName() { @@ -214,11 +234,6 @@ export default defineComponent({ return this.$gettextInterpolate(translated, context) }, - screenreaderShareDetails() { - const translated = this.$gettext('Share type: %{ shareType }') - return this.$gettextInterpolate(translated, { shareType: this.shareTypeText }) - }, - shareExpirationText() { const translated = this.$gettext('Expires %{ expiryDateRelative }') return this.$gettextInterpolate(translated, { @@ -258,6 +273,12 @@ export default defineComponent({ sharedParentDir() { return this.sharedParentRoute?.params?.item.split('/').pop() + }, + + shareDetailsHelperContent() { + return { + text: this.$gettext('Invite persons or groups to access this file or folder.') + } } }, methods: { diff --git a/packages/web-app-files/src/helpers/resources.ts b/packages/web-app-files/src/helpers/resources.ts index bc7b21917c7..0e911f118a5 100644 --- a/packages/web-app-files/src/helpers/resources.ts +++ b/packages/web-app-files/src/helpers/resources.ts @@ -541,7 +541,7 @@ export function buildCollaboratorShare(s, file, allowSharePermission): Share { share.customPermissions = SharePermissions.bitmaskToPermissions(s.permissions) share.role = PeopleShareRoles.getByBitmask( parseInt(s.permissions), - file.isFolder, + file.isFolder || file.type === 'folder', allowSharePermission ) // share.email = 'foo@djungle.com' // hm, where do we get the mail from? share_with_additional_info:Object? 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 e2cb7ed5584..184b65ce76b 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 @@ -18,7 +18,7 @@ const selectors = { notUserAvatar: 'oc-avatar-item-stub.files-collaborators-collaborator-indicator', collaboratorAdditionalInfo: '.files-collaborators-collaborator-additional-info', collaboratorName: '.files-collaborators-collaborator-name', - shareType: '.files-collaborators-collaborator-share-type', + accessDetailsButton: '.files-collaborators-collaborator-access-details-button', collaboratorRole: '.files-collaborators-collaborator-role', collaboratorEdit: '.files-collaborators-collaborator-edit', shareInheritanceIndicators: '.oc-resource-indicators' @@ -58,25 +58,9 @@ describe('Collaborator ListItem component', () => { const wrapper = createWrapper() expect(wrapper.find(selectors.collaboratorName).text()).toEqual('Brian Murphy') }) - describe('additionalInfo', () => { - it('shows additional information about the collaborator if set', () => { - const wrapper = createWrapper() - expect(wrapper.find(selectors.collaboratorAdditionalInfo).text()).toEqual( - '(brian@owncloud.com)' - ) - }) - it('does not show additional information about the collaborator if not set', () => { - const wrapper = createWrapper({ - collaborator: { - displayName: 'Alice Hansen' - } - }) - expect(wrapper.find(selectors.collaboratorAdditionalInfo).exists()).toBeFalsy() - }) - }) - it.each(ShareTypes.authenticated)('shows a label for the share type', (shareType) => { + it.each(ShareTypes.authenticated)('shows a button for the access details', (shareType) => { const wrapper = createWrapper({ shareType: shareType.value }) - expect(wrapper.find(selectors.shareType).text()).toBe(shareType.label) + expect(wrapper.find(selectors.accessDetailsButton).exists()).toBeTruthy() }) }) describe('modifiable property', () => { 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 23419191d70..2a9314e17d2 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 @@ -2,22 +2,38 @@ exports[`Collaborator ListItem component share inheritance indicators show when sharedParentRoute is given 1`] = `
    -
    +
    -
    -

    Share receiver name: Brian Murphy (brian@owncloud.com)

    -

    · - via - folder - - Share type: User -

    - +
    +
    Share receiver name: Brian Murphy (brian@owncloud.com) + + + + +
    +
    +
    +
    + +
    +
    +
    + + +
    +
    + via + folder + +
    +
    -
    - - -
    `; diff --git a/tests/acceptance/features/webUISharingInternalUsersShareWithPage/shareWithUsers.feature b/tests/acceptance/features/webUISharingInternalUsersShareWithPage/shareWithUsers.feature index f70d508fdf7..ddc4d89fbb3 100644 --- a/tests/acceptance/features/webUISharingInternalUsersShareWithPage/shareWithUsers.feature +++ b/tests/acceptance/features/webUISharingInternalUsersShareWithPage/shareWithUsers.feature @@ -137,8 +137,8 @@ Feature: Shares in share-with pages Then user "Brian Murphy" should be listed with additional info "" in the collaborators list on the webUI Examples: | additional-info-field | additional-info-result | - | id | (Brian) | - | email | (brian@example.org) | + | id | Brian | + | email | brian@example.org | @issue-ocis-1328 Scenario: collaborators list does not contain additional info when disabled diff --git a/tests/acceptance/features/webUISharingInternalUsersToRootCollaborator/shareWithUsers.feature b/tests/acceptance/features/webUISharingInternalUsersToRootCollaborator/shareWithUsers.feature index e6f466105f0..e56bc3209b9 100644 --- a/tests/acceptance/features/webUISharingInternalUsersToRootCollaborator/shareWithUsers.feature +++ b/tests/acceptance/features/webUISharingInternalUsersToRootCollaborator/shareWithUsers.feature @@ -71,8 +71,8 @@ Feature: Shares collaborator list Then user "Brian Murphy" should be listed with additional info "" in the collaborators list on the webUI Examples: | additional-info-field | additional-info-result | - | id | (Brian) | - | email | (brian@example.org) | + | id | Brian | + | email | brian@example.org | Scenario: collaborators list does not contain additional info when disabled diff --git a/tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js b/tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js index 1a0a5c8231b..f0fc100297e 100644 --- a/tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js +++ b/tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js @@ -140,6 +140,19 @@ module.exports = { results = listItemElementIds.map(async (collaboratorElementId) => { const collaboratorResult = {} + + let accessDetailsBtn = null + await this.api.elementIdElement( + collaboratorElementId, + 'css selector', + this.elements.collaboratorAccessDetailsButton, + (result) => { + accessDetailsBtn = result.value.ELEMENT + } + ) + await this.api.elementIdClick(accessDetailsBtn) + this.waitForElementVisible(this.elements.collaboratorAccessDetailsDrop) + for (const attrName in subSelectors) { let attrElementId = null await this.api.elementIdElement( @@ -161,7 +174,7 @@ module.exports = { collaboratorResult[attrName] = false } } - + this.api.mouseButtonClick() return collaboratorResult }) @@ -273,6 +286,12 @@ module.exports = { expirationDatePickerTrigger: { selector: '//button[contains(@class, "files-collaborators-expiration-button")]', locateStrategy: 'xpath' + }, + collaboratorAccessDetailsButton: { + selector: '.files-collaborators-collaborator-access-details-button' + }, + collaboratorAccessDetailsDrop: { + selector: '.share-access-details-drop' } } }