feat: add shared by filter on 'Shared with me'-page

changelog/unreleased/enhancement-shared-by-filter

@@ -0,0 +1,6 @@
+Enhancement: Shared by filter
+
+The received shares on the "Shared with me"-page can now be filtered by the users that created the share.
+
+https://github.com/owncloud/web/issues/10013
+https://github.com/owncloud/web/pull/10029

packages/web-app-files/src/views/shares/SharedWithMe.vue

@@ -20,22 +20,40 @@
             @toggle-filter="setAreHiddenFilesShown"
           />
           <item-filter
-            v-if="shareTypes.length > 1"
             :allow-multiple="true"
             :filter-label="$gettext('Share Type')"
             :filterable-attributes="['label']"
             :items="shareTypes"
             :option-filter-label="$gettext('Filter share types')"
             :show-option-filter="true"
             id-attribute="key"
-            class="share-type-filter oc-mx-s"
+            class="share-type-filter oc-ml-s"
             display-name-attribute="label"
             filter-name="shareType"
           >
             <template #item="{ item }">
               <span class="oc-ml-s" v-text="item.label" />
             </template>
           </item-filter>
+          <item-filter
+            :allow-multiple="true"
+            :filter-label="$gettext('Shared By')"
+            :filterable-attributes="['displayName']"
+            :items="fileOwners"
+            :option-filter-label="$gettext('Filter shared by')"
+            :show-option-filter="true"
+            id-attribute="username"
+            class="shared-by-filter oc-ml-s"
+            display-name-attribute="displayName"
+            filter-name="sharedBy"
+          >
+            <template #image="{ item }">
+              <avatar-image :width="32" :userid="item.username" :user-name="item.displayName" />
+            </template>
+            <template #item="{ item }">
+              <span class="oc-ml-s" v-text="item.displayName" />
+            </template>
+          </item-filter>
         </div>
         <shared-with-me-section
           id="files-shared-with-me-view"
@@ -130,14 +148,25 @@ export default defineComponent({
     })
 
     const selectedShareTypesQuery = useRouteQuery('q_shareType')
+    const selectedSharedByQuery = useRouteQuery('q_sharedBy')
     const filteredItems = computed(() => {
+      let result = unref(currentItems)
+
       const selectedShareTypes = queryItemAsString(unref(selectedShareTypesQuery))?.split('+')
-      if (!selectedShareTypes || selectedShareTypes.length === 0) {
-        return unref(currentItems)
+      if (selectedShareTypes?.length) {
+        result = result.filter(({ share }) => {
+          return selectedShareTypes.map((t) => ShareTypes[t].value).includes(share.shareType)
+        })
+      }
+
+      const selectedSharedBy = queryItemAsString(unref(selectedSharedByQuery))?.split('+')
+      if (selectedSharedBy?.length) {
+        result = result.filter(({ owner }) =>
+          owner.some(({ username }) => selectedSharedBy.includes(username))
+        )
       }
-      return unref(currentItems).filter((item) => {
-        return selectedShareTypes.map((t) => ShareTypes[t].value).includes(item.share.shareType)
-      })
+
+      return result
     })
 
     const { sortBy, sortDir, items, handleSort } = useSort({
@@ -172,7 +201,14 @@ export default defineComponent({
 
     const shareTypes = computed(() => {
       const uniqueShareTypes = uniq(unref(storeItems).map((i) => i.share?.shareType))
-      return ShareTypes.getByValues(uniqueShareTypes)
+      return ShareTypes.getByValues(uniqueShareTypes).map(({ label, key }) => ({ label, key }))
+    })
+
+    const fileOwners = computed(() => {
+      const flatList = unref(storeItems)
+        .map((i) => i.owner)
+        .flat()
+      return [...new Map(flatList.map((item) => [item.username, item])).values()]
     })
 
     onMounted(() => {
@@ -197,6 +233,7 @@ export default defineComponent({
       shareSectionTitle,
       visibleShares,
       shareTypes,
+      fileOwners,
 
       handleSort,
       sortBy,

packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts

@@ -86,20 +86,42 @@ describe('SharedWithMe view', () => {
       })
     })
     describe('share type', () => {
-      it('shows filter if more than one share types are present', () => {
+      it('shows all available share types as filter option', () => {
+        const shareType1 = ShareTypes.user
+        const shareType2 = ShareTypes.group
         const { wrapper } = getMountedWrapper({
           files: [
-            mock<Resource>({ share: { shareType: ShareTypes.user.value } }),
-            mock<Resource>({ share: { shareType: ShareTypes.group.value } })
+            mock<Resource>({ share: { shareType: shareType1.value } }),
+            mock<Resource>({ share: { shareType: shareType2.value } })
           ]
         })
+        const filterItems = wrapper.findComponent<any>('.share-type-filter').props('items')
         expect(wrapper.find('.share-type-filter').exists()).toBeTruthy()
+        expect(filterItems).toEqual([
+          { label: shareType1.label, key: shareType1.key },
+          { label: shareType2.label, key: shareType2.key }
+        ])
       })
-      it('does not show filter if only one share type is present', () => {
+    })
+    describe('shared by', () => {
+      it('shows all available collaborators as filter option', () => {
+        const collaborator1 = { username: 'user1', displayName: 'user1' }
+        const collaborator2 = { username: 'user2', displayName: 'user2' }
         const { wrapper } = getMountedWrapper({
-          files: [mock<Resource>({ share: { shareType: ShareTypes.user.value } })]
+          files: [
+            mock<Resource>({
+              owner: [collaborator1],
+              share: { shareType: ShareTypes.user.value }
+            }),
+            mock<Resource>({
+              owner: [collaborator2],
+              share: { shareType: ShareTypes.user.value }
+            })
+          ]
         })
-        expect(wrapper.find('.share-type-filter').exists()).toBeFalsy()
+        const filterItems = wrapper.findComponent<any>('.shared-by-filter').props('items')
+        expect(wrapper.find('.shared-by-filter').exists()).toBeTruthy()
+        expect(filterItems).toEqual([collaborator1, collaborator2])
       })
     })
   })
@@ -120,6 +142,8 @@ function getMountedWrapper({
   jest.mocked(useSort).mockImplementation((options) => useSortMock({ items: ref(options.items) }))
   // selected share types
   jest.mocked(queryItemAsString).mockImplementationOnce(() => undefined)
+  // selected shared by
+  jest.mocked(queryItemAsString).mockImplementationOnce(() => undefined)
   // openWithDefaultAppQuery
   jest.mocked(queryItemAsString).mockImplementationOnce(() => openWithDefaultAppQuery)