[full-ci] Redesign share with list followup

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
 

packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue

@@ -35,6 +35,7 @@
         </li>
         <li v-for="(option, i) in options" :key="i" class="oc-px-s oc-py-xs">
           <oc-button
+            v-if="option.enabled"
             appearance="raw"
             :class="option.class"
             v-bind="option.additionalAttributes || {}"
@@ -69,6 +70,10 @@ export default {
       validator: function (value) {
         return ['user', 'group'].includes(value) || !value
       }
+    },
+    canEditOrDelete: {
+      type: Boolean,
+      required: true
     }
   },
   data: function () {
@@ -86,6 +91,7 @@ export default {
           title: this.$gettext('Remove expiration date'),
           method: this.removeExpirationDate,
           class: 'remove-expiration-date',
+          enabled: this.canEditOrDelete,
           additionalAttributes: {
             'data-testid': 'collaborator-remove-expiration-btn'
           }
@@ -97,10 +103,17 @@ export default {
           title: this.$gettext('Remove share'),
           method: this.removeShare,
           class: 'remove-share',
+          enabled: this.canEditOrDelete,
           additionalAttributes: {
             variation: 'danger',
             'data-testid': 'collaborator-remove-share-btn'
           }
+        },
+        {
+          title: this.$gettext('Access details'),
+          method: this.showAccessDetails,
+          enabled: true,
+          class: 'show-access-details'
         }
       ]
     },
@@ -233,6 +246,9 @@ export default {
     },
     removeShare() {
       this.$emit('removeShare')
+    },
+    showAccessDetails() {
+      this.$emit('showAccessDetails')
     }
   }
 }

packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue

@@ -31,35 +31,23 @@
             />
           </span>
           <span class="oc-invisible-sr" v-text="screenreaderShareDisplayName" />
-          <oc-button
-            :id="`share-access-details-toggle-${shareAccessToggleId}`"
-            class="oc-ml-xs files-collaborators-collaborator-access-details-button"
-            appearance="raw"
-          >
-            <oc-icon name="information" fill-type="line" size="small" />
-          </oc-button>
           <oc-drop
+            ref="accessDetails"
             class="share-access-details-drop"
-            :toggle="`#share-access-details-toggle-${shareAccessToggleId}`"
-            mode="click"
+            mode="manual"
+            :target="`#edit-drop-down-${editDropDownToggleId}`"
           >
-            <h5 v-translate class="oc-text-bold oc-mt-rm">Access details</h5>
-            <oc-list>
-              <li v-if="shareAdditionalInfo" class="oc-flex">
-                <span v-translate class="oc-width-1-2">Addition</span
-                ><span
-                  class="files-collaborators-collaborator-additional-info oc-width-1-2"
-                  v-text="shareAdditionalInfo"
-                />
-              </li>
-              <li class="oc-flex">
-                <span v-translate class="oc-width-1-2">Type</span
-                ><span
-                  class="files-collaborators-collaborator-share-type oc-width-1-2"
-                  v-text="shareTypeText"
-                />
-              </li>
-            </oc-list>
+            <h5 v-translate class="oc-text-bold oc-m-rm">Access details</h5>
+            <dl class="oc-mt-s">
+              <dt v-if="shareAdditionalInfo" v-translate class="oc-text-muted oc-mb-s">Addition</dt>
+              <dd
+                v-if="shareAdditionalInfo"
+                class="files-collaborators-collaborator-additional-info"
+                v-text="shareAdditionalInfo"
+              />
+              <dt v-translate class="oc-text-muted">Type</dt>
+              <dd class="files-collaborators-collaborator-share-type" v-text="shareTypeText" />
+            </dl>
           </oc-drop>
         </div>
         <div class="oc-m-rm oc-flex oc-flex-middle oc-flex-between">
@@ -91,27 +79,29 @@
               />
               <span class="oc-invisible-sr" v-text="screenreaderShareExpiration" />
             </span>
+            <div v-if="sharedParentRoute" class="oc-resource-indicators oc-text-truncate">
+              <router-link
+                v-oc-tooltip="$gettext('Navigate to parent folder')"
+                class="parent-folder oc-text-truncate"
+                :to="sharedParentRoute"
+              >
+                <span class="text" v-text="$gettext('via')" />
+                <oc-icon name="folder-2" size="small" fill-type="line" class="oc-px-xs" />
+                <span class="text oc-text-truncate" v-text="sharedParentDir" />
+              </router-link>
+            </div>
             <edit-dropdown
-              v-if="canEditOrDelete"
+              :id="`edit-drop-down-${editDropDownToggleId}`"
               class="files-collaborators-collaborator-edit"
               data-testid="collaborator-edit"
               :expiration-date="share.expires ? share.expires : null"
               :share-category="shareCategory"
+              :can-edit-or-delete="canEditOrDelete"
               @expirationDateChanged="shareExpirationChanged"
               @removeShare="removeShare"
+              @showAccessDetails="showAccessDetails"
             />
           </div>
-          <div v-if="sharedParentRoute" class="oc-resource-indicators oc-text-truncate">
-            <router-link
-              v-oc-tooltip="$gettext('Navigate to parent folder')"
-              class="parent-folder oc-text-truncate"
-              :to="sharedParentRoute"
-            >
-              <span class="text" v-text="$gettext('via')" />
-              <oc-icon name="folder-2" size="small" fill-type="line" class="oc-px-xs" />
-              <span class="text oc-text-truncate" v-text="sharedParentDir" />
-            </router-link>
-          </div>
         </div>
       </div>
     </div>
@@ -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);
+  }
+}
 </style>

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', () => {

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
     <avatar-image-stub userid="brian" user-name="Brian Murphy" width="48" class="files-collaborators-collaborator-indicator"></avatar-image-stub>
     <div class="oc-text-truncate oc-width-1-1">
       <div class="oc-flex oc-flex-middle"><span class="oc-text-truncate oc-m-rm"><span aria-hidden="true" class="files-collaborators-collaborator-name">Brian Murphy</span></span> <span class="oc-invisible-sr">Share receiver name: Brian Murphy ([email protected])</span>
-        <oc-button-stub id="share-access-details-toggle-00000000-0000-0000-0000-000000000000" appearance="raw" class="oc-ml-xs files-collaborators-collaborator-access-details-button">
-          <oc-icon-stub name="information" fill-type="line" size="small"></oc-icon-stub>
-        </oc-button-stub>
-        <oc-drop-stub toggle="#share-access-details-toggle-00000000-0000-0000-0000-000000000000" mode="click" class="share-access-details-drop">
-          <h5 class="oc-text-bold oc-mt-rm" data-msgid="Access details" data-current-language="en_US">Access details</h5>
-          <oc-list-stub>
-            <li class="oc-flex"><span class="oc-width-1-2" data-msgid="Addition" data-current-language="en_US">Addition</span><span class="files-collaborators-collaborator-additional-info oc-width-1-2">[email protected]</span></li>
-            <li class="oc-flex"><span class="oc-width-1-2" data-msgid="Type" data-current-language="en_US">Type</span><span class="files-collaborators-collaborator-share-type oc-width-1-2">User</span></li>
-          </oc-list-stub>
+        <oc-drop-stub mode="manual" target="#edit-drop-down-00000000-0000-0000-0000-000000000000" class="share-access-details-drop">
+          <h5 class="oc-text-bold oc-m-rm" data-msgid="Access details" data-current-language="en_US">Access details</h5>
+          <dl class="oc-mt-s">
+            <dt class="oc-text-muted oc-mb-s" data-msgid="Addition" data-current-language="en_US">Addition</dt>
+            <dd class="files-collaborators-collaborator-additional-info">[email protected]</dd>
+            <dt class="oc-text-muted" data-msgid="Type" data-current-language="en_US">Type</dt>
+            <dd class="files-collaborators-collaborator-share-type">User</dd>
+          </dl>
         </oc-drop-stub>
       </div>
       <div class="oc-m-rm oc-flex oc-flex-middle oc-flex-between">
@@ -25,12 +24,12 @@ exports[`Collaborator ListItem component share inheritance indicators show when
         </div>
         <div class="oc-flex oc-flex-between oc-flex-middle oc-pl-s">
           <!---->
-          <edit-dropdown-stub sharecategory="user" data-testid="collaborator-edit" class="files-collaborators-collaborator-edit"></edit-dropdown-stub>
-        </div>
-        <div class="oc-resource-indicators oc-text-truncate">
-          <router-link-stub to="[object Object]" class="parent-folder oc-text-truncate"><span class="text">via</span>
-            <oc-icon-stub name="folder-2" size="small" fill-type="line" class="oc-px-xs"></oc-icon-stub> <span class="text oc-text-truncate">folder</span>
-          </router-link-stub>
+          <div class="oc-resource-indicators oc-text-truncate">
+            <router-link-stub to="[object Object]" class="parent-folder oc-text-truncate"><span class="text">via</span>
+              <oc-icon-stub name="folder-2" size="small" fill-type="line" class="oc-px-xs"></oc-icon-stub> <span class="text oc-text-truncate">folder</span>
+            </router-link-stub>
+          </div>
+          <edit-dropdown-stub sharecategory="user" caneditordelete="true" id="edit-drop-down-00000000-0000-0000-0000-000000000000" data-testid="collaborator-edit" class="files-collaborators-collaborator-edit"></edit-dropdown-stub>
         </div>
       </div>
     </div>

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'
     }
   }
 }

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) => {