From b08ff394edf6c8013ccf24d76d8876850b9f846f Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 22 Nov 2023 09:46:31 +0100
Subject: [PATCH 1/2] feat: add a share search filter on the 'Shared with
 me'-page

---
 .../enhancement-share-search-filter           |   6 +
 .../src/views/shares/SharedWithMe.vue         | 139 ++++++++++++------
 .../unit/views/shares/SharedWithMe.spec.ts    |  27 ++++
 3 files changed, 124 insertions(+), 48 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-share-search-filter

diff --git a/changelog/unreleased/enhancement-share-search-filter b/changelog/unreleased/enhancement-share-search-filter
new file mode 100644
index 00000000000..2939725f925
--- /dev/null
+++ b/changelog/unreleased/enhancement-share-search-filter
@@ -0,0 +1,6 @@
+Enhancement: Share search filter
+
+The received shares on the "Shared with me"-page can now be filtered by their names via a text input field.
+
+https://github.com/owncloud/web/issues/10014
+https://github.com/owncloud/web/pull/10033
diff --git a/packages/web-app-files/src/views/shares/SharedWithMe.vue b/packages/web-app-files/src/views/shares/SharedWithMe.vue
index 7a16c6238ae..0d3eb1776a7 100644
--- a/packages/web-app-files/src/views/shares/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithMe.vue
@@ -8,52 +8,64 @@
       </app-bar>
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
-        <div class="oc-flex oc-m-m">
-          <div class="oc-mr-m oc-flex oc-flex-middle">
-            <oc-icon name="filter-2" class="oc-mr-xs" />
-            <span v-text="$gettext('Filter:')" />
+        <div
+          class="shared-with-me-filters oc-flex oc-flex-between oc-flex-wrap oc-flex-bottom oc-mx-m oc-mb-m"
+        >
+          <div class="oc-flex">
+            <div class="oc-mr-m oc-flex oc-flex-middle">
+              <oc-icon name="filter-2" class="oc-mr-xs" />
+              <span v-text="$gettext('Filter:')" />
+            </div>
+            <item-filter-inline
+              class="share-visibility-filter"
+              filter-name="share-visibility"
+              :filter-options="visibilityOptions"
+              @toggle-filter="setAreHiddenFilesShown"
+            />
+            <item-filter
+              :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-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>
+          <div>
+            <oc-text-input
+              v-model="filterTerm"
+              class="search-filter"
+              :label="$gettext('Search')"
+              autocomplete="off"
+            />
           </div>
-          <item-filter-inline
-            class="share-visibility-filter"
-            filter-name="share-visibility"
-            :filter-options="visibilityOptions"
-            @toggle-filter="setAreHiddenFilesShown"
-          />
-          <item-filter
-            :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-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"
@@ -77,13 +89,15 @@
 </template>
 
 <script lang="ts">
+import Fuse from 'fuse.js'
+import Mark from 'mark.js'
 import { useResourcesViewDefaults } from '../../composables'
 
 import { AppLoadingSpinner, InlineFilterOption, ItemFilter } from '@ownclouders/web-pkg'
 import { AppBar, ItemFilterInline } from '@ownclouders/web-pkg'
 import { queryItemAsString, useRouteQuery } from '@ownclouders/web-pkg'
 import SharedWithMeSection from '../../components/Shares/SharedWithMeSection.vue'
-import { computed, defineComponent, onMounted, ref, unref } from 'vue'
+import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue'
 import { Resource } from '@ownclouders/web-client'
 import SideBar from '../../components/SideBar/SideBar.vue'
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
@@ -91,7 +105,7 @@ import { useGetMatchingSpace, useSort } from '@ownclouders/web-pkg'
 import { useGroupingSettings } from '@ownclouders/web-pkg'
 import SharesNavigation from 'web-app-files/src/components/AppBar/SharesNavigation.vue'
 import { useGettext } from 'vue3-gettext'
-import { useStore, useOpenWithDefaultApp } from '@ownclouders/web-pkg'
+import { useStore, useOpenWithDefaultApp, defaultFuseOptions } from '@ownclouders/web-pkg'
 import { ShareTypes } from '@ownclouders/web-client/src/helpers'
 import { uniq } from 'lodash-es'
 
@@ -126,9 +140,11 @@ export default defineComponent({
     const { $gettext } = useGettext()
 
     const areHiddenFilesShown = ref(false)
+    const filterTerm = ref('')
+    const markInstance = ref<Mark>()
 
     const shareSectionTitle = computed(() => {
-      return areHiddenFilesShown.value ? $gettext('Hidden Shares') : $gettext('Shares')
+      return unref(areHiddenFilesShown) ? $gettext('Hidden Shares') : $gettext('Shares')
     })
 
     const visibilityOptions = computed(() => [
@@ -166,9 +182,29 @@ export default defineComponent({
         )
       }
 
+      if (unref(filterTerm).trim()) {
+        const usersSearchEngine = new Fuse(result, { ...defaultFuseOptions, keys: ['name'] })
+        const fuseResult = usersSearchEngine.search(unref(filterTerm)).map((r) => r.item)
+        result = fuseResult.filter((item) => result.includes(item))
+      }
+
       return result
     })
 
+    watch(filteredItems, () => {
+      if (!unref(areResourcesLoading)) {
+        if (!unref(markInstance)) {
+          markInstance.value = new Mark('.oc-resource-details')
+        }
+
+        unref(markInstance).unmark()
+        unref(markInstance).mark(unref(filterTerm), {
+          element: 'span',
+          className: 'highlight-mark'
+        })
+      }
+    })
+
     const { sortBy, sortDir, items, handleSort } = useSort({
       items: filteredItems,
       fields: sortFields
@@ -234,6 +270,7 @@ export default defineComponent({
       visibleShares,
       shareTypes,
       fileOwners,
+      filterTerm,
 
       handleSort,
       sortBy,
@@ -246,3 +283,9 @@ export default defineComponent({
   }
 })
 </script>
+
+<style lang="scss" scoped>
+.search-filter {
+  width: 16rem;
+}
+</style>
diff --git a/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts b/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts
index 8928c0cd38a..6e69eaea661 100644
--- a/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts
+++ b/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts
@@ -124,6 +124,33 @@ describe('SharedWithMe view', () => {
         expect(filterItems).toEqual([collaborator1, collaborator2])
       })
     })
+    describe('search', () => {
+      it('shows filter', () => {
+        const { wrapper } = getMountedWrapper()
+        expect(wrapper.find('.search-filter').exists()).toBeTruthy()
+      })
+      it('filters shares accordingly by name', async () => {
+        const { wrapper } = getMountedWrapper({
+          files: [
+            mock<Resource>({
+              name: 'share1',
+              hidden: false,
+              share: { shareType: ShareTypes.user.value }
+            }),
+            mock<Resource>({
+              name: 'share2',
+              hidden: false,
+              share: { shareType: ShareTypes.user.value }
+            })
+          ]
+        })
+
+        await wrapper.vm.$nextTick()
+        wrapper.vm.filterTerm = 'share1'
+        expect(wrapper.vm.items.find(({ name }) => name === 'share1')).toBeDefined()
+        expect(wrapper.vm.items.find(({ name }) => name === 'share2')).toBeUndefined()
+      })
+    })
   })
 })
 

From 847a581c6e8ef1affff712a76beed0586c1363e8 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 22 Nov 2023 10:06:00 +0100
Subject: [PATCH 2/2] feat: align search input positions across the app

---
 .../src/components/Groups/GroupsList.vue        | 15 ++++++++-------
 .../src/components/Spaces/SpacesList.vue        | 15 ++++++++-------
 .../src/components/Users/UsersList.vue          | 17 +++++++++--------
 .../web-app-admin-settings/src/views/Users.vue  |  2 +-
 .../__snapshots__/SpacesList.spec.ts.snap       | 14 ++++++++------
 .../web-app-files/src/views/spaces/Projects.vue | 15 ++++++++-------
 .../web-app-files/src/views/trash/Overview.vue  | 17 ++++++++++-------
 .../spaces/__snapshots__/Projects.spec.ts.snap  | 14 ++++++++------
 .../trash/__snapshots__/Overview.spec.ts.snap   | 14 ++++++++------
 9 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
index 2b029b9dde7..15d86ed6af1 100644
--- a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -1,12 +1,13 @@
 <template>
   <div id="group-list">
-    <oc-text-input
-      id="groups-filter"
-      v-model="filterTerm"
-      class="oc-ml-m oc-my-s"
-      :label="$gettext('Search')"
-      autocomplete="off"
-    />
+    <div class="group-filters oc-flex oc-flex-right oc-flex-wrap oc-flex-bottom oc-mx-m oc-mb-m">
+      <oc-text-input
+        id="groups-filter"
+        v-model="filterTerm"
+        :label="$gettext('Search')"
+        autocomplete="off"
+      />
+    </div>
     <oc-table
       ref="tableRef"
       :sort-by="sortBy"
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index 24556df121c..070d33893ec 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -1,12 +1,13 @@
 <template>
   <div id="space-list">
-    <oc-text-input
-      id="spaces-filter"
-      v-model="filterTerm"
-      class="oc-ml-m oc-my-s"
-      :label="$gettext('Search')"
-      autocomplete="off"
-    />
+    <div class="space-filters oc-flex oc-flex-right oc-flex-wrap oc-flex-bottom oc-mx-m oc-mb-m">
+      <oc-text-input
+        id="spaces-filter"
+        v-model="filterTerm"
+        :label="$gettext('Search')"
+        autocomplete="off"
+      />
+    </div>
     <oc-table
       ref="tableRef"
       class="spaces-table"
diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
index e262271b1ad..897a540ce56 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -1,13 +1,14 @@
 <template>
   <div id="user-list">
-    <oc-text-input
-      id="users-filter"
-      v-model="filterTerm"
-      class="oc-ml-m oc-my-s"
-      :label="$gettext('Search')"
-      autocomplete="off"
-    />
-    <slot name="filter" />
+    <div class="user-filters oc-flex oc-flex-between oc-flex-wrap oc-flex-bottom oc-mx-m oc-mb-m">
+      <slot name="filter" />
+      <oc-text-input
+        id="users-filter"
+        v-model="filterTerm"
+        :label="$gettext('Search')"
+        autocomplete="off"
+      />
+    </div>
     <no-content-message v-if="!users.length" icon="user">
       <template #message>
         <span v-text="$gettext('No users in here')" />
diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index 6bbd2c62042..ccd8b77ecbf 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -43,7 +43,7 @@
               <context-actions :items="selectedUsers" />
             </template>
             <template #filter>
-              <div class="oc-flex oc-flex-middle oc-ml-m oc-mb-m oc-mt-m">
+              <div class="oc-flex oc-flex-middle">
                 <div class="oc-mr-m oc-flex oc-flex-middle">
                   <oc-icon name="filter-2" class="oc-mr-xs" />
                   <span v-text="$gettext('Filter:')" />
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
index 6a2dbc7a94d..67fb765ee1c 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -2,15 +2,17 @@
 
 exports[`SpacesList should render all spaces in a table 1`] = `
 <div headerposition="0" id="space-list">
-  <div class="oc-ml-m oc-my-s">
-    <label class="oc-label" for="spaces-filter">Search</label>
-    <div class="oc-position-relative">
+  <div class="space-filters oc-flex oc-flex-right oc-flex-wrap oc-flex-bottom oc-mx-m oc-mb-m">
+    <div class="">
+      <label class="oc-label" for="spaces-filter">Search</label>
+      <div class="oc-position-relative">
+        <!--v-if-->
+        <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
+        <!--v-if-->
+      </div>
       <!--v-if-->
-      <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
       <!--v-if-->
     </div>
-    <!--v-if-->
-    <!--v-if-->
   </div>
   <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu spaces-table">
     <thead class="oc-thead">
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index e29d149eea2..4325485f8ae 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -30,13 +30,14 @@
           </template>
         </no-content-message>
         <div v-else class="spaces-list oc-mt-l">
-          <oc-text-input
-            id="spaces-filter"
-            v-model="filterTerm"
-            class="oc-ml-m oc-my-m"
-            :label="$gettext('Search')"
-            autocomplete="off"
-          />
+          <div class="spaces-list-filters oc-flex oc-flex-right oc-px-m oc-mb-m">
+            <oc-text-input
+              id="spaces-filter"
+              v-model="filterTerm"
+              :label="$gettext('Search')"
+              autocomplete="off"
+            />
+          </div>
           <resource-tiles
             v-if="viewMode === ViewModeConstants.tilesView.name"
             v-model:selectedIds="selectedResourcesIds"
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index 54da2c160b2..0f801998d25 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -17,13 +17,16 @@
           </template>
         </no-content-message>
         <template v-else>
-          <oc-text-input
-            id="spaces-filter"
-            v-model="filterTerm"
-            class="oc-ml-m oc-my-s"
-            :label="$gettext('Search')"
-            autocomplete="off"
-          />
+          <div
+            class="trash-bin-filters oc-flex oc-flex-right oc-flex-wrap oc-flex-bottom oc-mx-m oc-mb-m"
+          >
+            <oc-text-input
+              id="spaces-filter"
+              v-model="filterTerm"
+              :label="$gettext('Search')"
+              autocomplete="off"
+            />
+          </div>
           <oc-table
             ref="tableRef"
             class="spaces-table"
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
index 16884651ef3..a43548847ae 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -6,15 +6,17 @@ exports[`Projects view different files view states lists all available project s
     <div id="files-view">
       <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="true" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true" sidebaropen="false" viewmodedefault="resource-tiles" viewmodes="[object Object],[object Object]"></app-bar-stub>
       <div class="spaces-list oc-mt-l">
-        <div class="oc-ml-m oc-my-m">
-          <label class="oc-label" for="spaces-filter">Search</label>
-          <div class="oc-position-relative">
+        <div class="spaces-list-filters oc-flex oc-flex-right oc-px-m oc-mb-m">
+          <div class="">
+            <label class="oc-label" for="spaces-filter">Search</label>
+            <div class="oc-position-relative">
+              <!--v-if-->
+              <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
+              <!--v-if-->
+            </div>
             <!--v-if-->
-            <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
             <!--v-if-->
           </div>
-          <!--v-if-->
-          <!--v-if-->
         </div>
         <resource-table-stub arepathsdisplayed="false" areresourcesclickable="true" arethumbnailsdisplayed="true" class="spaces-table" dragdrop="false" fieldsdisplayed="image,name,manager,members,totalQuota,usedQuota,remainingQuota,status,mdate" hasactions="true" headerposition="0" hover="true" isselectable="true" paddingx="small" resourcedomselector="[Function]" resources="[object Object],[object Object]" selectedids="" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" sortby="[Function]" sortdir="desc" sticky="false" viewmode="resource-table"></resource-table-stub>
       </div>
diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
index e509c05723e..f808ef486e0 100644
--- a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -5,15 +5,17 @@ exports[`TrashOverview view states should render spaces list 1`] = `
   <div class="files-view-wrapper oc-width-expand">
     <div id="files-view">
       <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" hasbulkactions="false" hasfileextensions="false" hashiddenfiles="false" haspagination="false" hassidebartoggle="false" hasviewoptions="false" showactionsonselection="false" sidebaropen="false" viewmodedefault="resource-table" viewmodes=""></app-bar-stub>
-      <div class="oc-ml-m oc-my-s">
-        <label class="oc-label" for="spaces-filter">Search</label>
-        <div class="oc-position-relative">
+      <div class="trash-bin-filters oc-flex oc-flex-right oc-flex-wrap oc-flex-bottom oc-mx-m oc-mb-m">
+        <div class="">
+          <label class="oc-label" for="spaces-filter">Search</label>
+          <div class="oc-position-relative">
+            <!--v-if-->
+            <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
+            <!--v-if-->
+          </div>
           <!--v-if-->
-          <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
           <!--v-if-->
         </div>
-        <!--v-if-->
-        <!--v-if-->
       </div>
       <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu spaces-table">
         <thead class="oc-thead">