From 7def177ea42dd9fd55cc6e4df5263d535ce5ea19 Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Tue, 12 Apr 2022 13:32:14 +0200
Subject: [PATCH 1/7] prepare search for usersManagement add filter logic
 implementation inside usersManagement users list component

---
 .../src/components/Groups/GroupsList.vue      | 10 ++++
 .../src/components/Users/UsersList.vue        | 32 +++++++++++-
 packages/web-app-user-management/src/index.js | 10 +++-
 .../src/search/filter/index.ts                | 50 +++++++++++++++++++
 .../src/search/index.ts                       |  1 +
 .../src/services/index.ts                     |  1 +
 .../src/services/registry.ts                  |  5 ++
 7 files changed, 105 insertions(+), 4 deletions(-)
 create mode 100644 packages/web-app-user-management/src/search/filter/index.ts
 create mode 100644 packages/web-app-user-management/src/search/index.ts
 create mode 100644 packages/web-app-user-management/src/services/index.ts
 create mode 100644 packages/web-app-user-management/src/services/registry.ts

diff --git a/packages/web-app-user-management/src/components/Groups/GroupsList.vue b/packages/web-app-user-management/src/components/Groups/GroupsList.vue
index 420555dcd66..f3711f813e5 100644
--- a/packages/web-app-user-management/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-user-management/src/components/Groups/GroupsList.vue
@@ -50,6 +50,9 @@
 </template>
 
 <script>
+import { onBeforeUnmount } from '@vue/composition-api'
+import { Registry } from '../../services'
+
 const orderBy = (list, prop, desc) => {
   return [...list].sort((a, b) => {
     a = a[prop] || ''
@@ -70,6 +73,13 @@ export default {
       required: true
     }
   },
+  setup() {
+    const tkn = Registry.search.subscribe('updateTerm', ({ term, kind }) =>
+      console.log('updateTerm', kind, term)
+    )
+
+    onBeforeUnmount(() => Registry.search.unsubscribe('updateTerm', tkn))
+  },
   data() {
     return {
       sortBy: 'displayName',
diff --git a/packages/web-app-user-management/src/components/Users/UsersList.vue b/packages/web-app-user-management/src/components/Users/UsersList.vue
index dd6ff922d47..f2ac8769b77 100644
--- a/packages/web-app-user-management/src/components/Users/UsersList.vue
+++ b/packages/web-app-user-management/src/components/Users/UsersList.vue
@@ -31,7 +31,7 @@
     <template #avatar="{ item }">
       <avatar-image :width="32" :userid="item.id" :user-name="item.displayName" />
     </template>
-    <template #role="{ item }"> {{ getUserRole(item) }} </template>
+    <template #role="{ item }"> {{ getUserRole(item) }}</template>
     <template #actions="{ item }">
       <oc-button v-oc-tooltip="$gettext('Details')" @click="$emit('clickDetails', item)">
         <oc-icon size="small" name="information" />
@@ -49,6 +49,10 @@
 </template>
 
 <script>
+import { onBeforeUnmount, ref } from '@vue/composition-api'
+import { Registry } from '../../services'
+import Fuse from 'fuse.js'
+
 export default {
   name: 'UsersList',
   props: {
@@ -65,6 +69,17 @@ export default {
       required: true
     }
   },
+  setup() {
+    const searchTerm = ref('')
+
+    const tkn = Registry.search.subscribe('updateTerm', ({ term }) => (searchTerm.value = term))
+
+    onBeforeUnmount(() => Registry.search.unsubscribe('updateTerm', tkn))
+
+    return {
+      searchTerm
+    }
+  },
   data() {
     return {
       sortBy: 'onPremisesSamAccountName',
@@ -125,7 +140,20 @@ export default {
       ]
     },
     data() {
-      return this.orderBy(this.users, this.sortBy, this.sortDir === 'desc')
+      const orderedUsers = this.orderBy(this.users, this.sortBy, this.sortDir === 'desc')
+
+      if (!this.searchTerm) {
+        return orderedUsers
+      }
+
+      const usersSearchEngine = new Fuse(orderedUsers, {
+        includeScore: true,
+        useExtendedSearch: true,
+        threshold: 0.3,
+        keys: ['displayName', 'mail', 'onPremisesSamAccountName']
+      })
+
+      return usersSearchEngine.search(this.searchTerm).map((r) => r.item)
     },
     highlighted() {
       return this.selectedUsers.map((user) => user.id)
diff --git a/packages/web-app-user-management/src/index.js b/packages/web-app-user-management/src/index.js
index 9393e719af6..be54aeb3fe7 100644
--- a/packages/web-app-user-management/src/index.js
+++ b/packages/web-app-user-management/src/index.js
@@ -1,7 +1,9 @@
+import { Registry } from './services'
 import translations from '../l10n/translations'
 import Users from './views/Users.vue'
 import Groups from './views/Groups.vue'
-
+import { FilterSearch } from './search'
+import { bus } from 'web-pkg/src/instance'
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
   return msg
@@ -54,5 +56,9 @@ export default {
   appInfo,
   routes,
   translations,
-  navItems
+  navItems,
+  ready({ router }) {
+    Registry.search = new FilterSearch(router)
+    bus.publish('app.search.register.provider', Registry.search)
+  }
 }
diff --git a/packages/web-app-user-management/src/search/filter/index.ts b/packages/web-app-user-management/src/search/filter/index.ts
new file mode 100644
index 00000000000..0034bb3130e
--- /dev/null
+++ b/packages/web-app-user-management/src/search/filter/index.ts
@@ -0,0 +1,50 @@
+import { SearchProvider } from 'search/src/types'
+import { EventBus } from 'web-pkg/src/event'
+import VueRouter, { Route } from 'vue-router'
+
+function $gettext(msg) {
+  return msg
+}
+
+const kind = (currentRoute: Route): 'users' | 'groups' | undefined => {
+  switch (currentRoute.name) {
+    case 'user-management-users':
+      return 'users'
+    case 'user-management-groups':
+      return 'groups'
+    default:
+      return undefined
+  }
+}
+
+export default class Provider extends EventBus implements SearchProvider {
+  public readonly id: string
+  private readonly router: VueRouter
+
+  constructor(router: VueRouter) {
+    super()
+
+    this.id = 'usersManagement.filter'
+    this.router = router
+  }
+
+  public get label(): string {
+    return $gettext(`Search ${kind(this.router.currentRoute)} ↵`)
+  }
+
+  public activate(term: string): void {
+    /* noop */
+  }
+
+  public reset(): void {
+    /* noop */
+  }
+
+  public updateTerm(term: string): void {
+    this.publish('updateTerm', { kind: kind(this.router.currentRoute), term })
+  }
+
+  public get available(): boolean {
+    return !!kind(this.router.currentRoute)
+  }
+}
diff --git a/packages/web-app-user-management/src/search/index.ts b/packages/web-app-user-management/src/search/index.ts
new file mode 100644
index 00000000000..21c7722caa5
--- /dev/null
+++ b/packages/web-app-user-management/src/search/index.ts
@@ -0,0 +1 @@
+export { default as FilterSearch } from './filter'
diff --git a/packages/web-app-user-management/src/services/index.ts b/packages/web-app-user-management/src/services/index.ts
new file mode 100644
index 00000000000..292d80a6bd3
--- /dev/null
+++ b/packages/web-app-user-management/src/services/index.ts
@@ -0,0 +1 @@
+export { default as Registry } from './registry'
diff --git a/packages/web-app-user-management/src/services/registry.ts b/packages/web-app-user-management/src/services/registry.ts
new file mode 100644
index 00000000000..7824817bec7
--- /dev/null
+++ b/packages/web-app-user-management/src/services/registry.ts
@@ -0,0 +1,5 @@
+import { FilterSearch } from '../search'
+
+export default class Registry {
+  static search: FilterSearch
+}

From 92663b05c74263e8125cf95fb8a17c56a41147ee Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Tue, 12 Apr 2022 14:06:33 +0200
Subject: [PATCH 2/7] Refactor and enable filtering in groups

---
 .../src/components/Groups/GroupsList.vue      | 44 +++++++++++++------
 .../src/components/Users/UsersList.vue        | 29 ++++++------
 2 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/packages/web-app-user-management/src/components/Groups/GroupsList.vue b/packages/web-app-user-management/src/components/Groups/GroupsList.vue
index f3711f813e5..c32d68db737 100644
--- a/packages/web-app-user-management/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-user-management/src/components/Groups/GroupsList.vue
@@ -50,16 +50,9 @@
 </template>
 
 <script>
-import { onBeforeUnmount } from '@vue/composition-api'
+import { onBeforeUnmount, ref } from '@vue/composition-api'
 import { Registry } from '../../services'
-
-const orderBy = (list, prop, desc) => {
-  return [...list].sort((a, b) => {
-    a = a[prop] || ''
-    b = b[prop] || ''
-    return desc ? b.localeCompare(a) : a.localeCompare(b)
-  })
-}
+import Fuse from 'fuse.js'
 
 export default {
   name: 'GroupsList',
@@ -74,11 +67,13 @@ export default {
     }
   },
   setup() {
-    const tkn = Registry.search.subscribe('updateTerm', ({ term, kind }) =>
-      console.log('updateTerm', kind, term)
-    )
+    const searchTerm = ref('')
+    const token = Registry.search.subscribe('updateTerm', ({ term }) => (searchTerm.value = term))
+    onBeforeUnmount(() => Registry.search.unsubscribe('updateTerm', token))
 
-    onBeforeUnmount(() => Registry.search.unsubscribe('updateTerm', tkn))
+    return {
+      searchTerm
+    }
   },
   data() {
     return {
@@ -124,13 +119,34 @@ export default {
       return this.$gettextInterpolate(translated, { groupCount: this.groups.length })
     },
     data() {
-      return orderBy(this.groups, this.sortBy, this.sortDir === 'desc')
+      const orderedGroups = this.orderBy(this.groups, this.sortBy, this.sortDir === 'desc')
+      return this.filter(orderedGroups, this.searchTerm)
     },
     highlighted() {
       return this.selectedGroups.map((group) => group.id)
     }
   },
   methods: {
+    filter(groups, searchTerm) {
+      if (!searchTerm) {
+        return groups
+      }
+      const groupsSearchEngine = new Fuse(groups, {
+        includeScore: true,
+        useExtendedSearch: true,
+        threshold: 0.3,
+        keys: ['displayName']
+      })
+
+      return groupsSearchEngine.search(searchTerm).map((r) => r.item)
+    },
+    orderBy(list, prop, desc) {
+      return [...list].sort((a, b) => {
+        a = a[prop] || ''
+        b = b[prop] || ''
+        return desc ? b.localeCompare(a) : a.localeCompare(b)
+      })
+    },
     handleSort(event) {
       this.sortBy = event.sortBy
       this.sortDir = event.sortDir
diff --git a/packages/web-app-user-management/src/components/Users/UsersList.vue b/packages/web-app-user-management/src/components/Users/UsersList.vue
index f2ac8769b77..17ba11eb421 100644
--- a/packages/web-app-user-management/src/components/Users/UsersList.vue
+++ b/packages/web-app-user-management/src/components/Users/UsersList.vue
@@ -71,10 +71,8 @@ export default {
   },
   setup() {
     const searchTerm = ref('')
-
-    const tkn = Registry.search.subscribe('updateTerm', ({ term }) => (searchTerm.value = term))
-
-    onBeforeUnmount(() => Registry.search.unsubscribe('updateTerm', tkn))
+    const token = Registry.search.subscribe('updateTerm', ({ term }) => (searchTerm.value = term))
+    onBeforeUnmount(() => Registry.search.unsubscribe('updateTerm', token))
 
     return {
       searchTerm
@@ -141,25 +139,26 @@ export default {
     },
     data() {
       const orderedUsers = this.orderBy(this.users, this.sortBy, this.sortDir === 'desc')
-
-      if (!this.searchTerm) {
-        return orderedUsers
+      return this.filter(orderedUsers, this.searchTerm)
+    },
+    highlighted() {
+      return this.selectedUsers.map((user) => user.id)
+    }
+  },
+  methods: {
+    filter(users, searchTerm) {
+      if (!searchTerm) {
+        return users
       }
-
-      const usersSearchEngine = new Fuse(orderedUsers, {
+      const usersSearchEngine = new Fuse(users, {
         includeScore: true,
         useExtendedSearch: true,
         threshold: 0.3,
         keys: ['displayName', 'mail', 'onPremisesSamAccountName']
       })
 
-      return usersSearchEngine.search(this.searchTerm).map((r) => r.item)
+      return usersSearchEngine.search(searchTerm).map((r) => r.item)
     },
-    highlighted() {
-      return this.selectedUsers.map((user) => user.id)
-    }
-  },
-  methods: {
     orderBy(list, prop, desc) {
       return [...list].sort((user1, user2) => {
         if (prop === 'role') {

From bc9217ad2267a4ce8d44f1f4f86f44aae4037c3c Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Tue, 12 Apr 2022 15:37:59 +0200
Subject: [PATCH 3/7] Add tests

---
 .../unit/components/Groups/GroupsList.spec.js | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 packages/web-app-user-management/tests/unit/components/Groups/GroupsList.spec.js

diff --git a/packages/web-app-user-management/tests/unit/components/Groups/GroupsList.spec.js b/packages/web-app-user-management/tests/unit/components/Groups/GroupsList.spec.js
new file mode 100644
index 00000000000..c460474a03c
--- /dev/null
+++ b/packages/web-app-user-management/tests/unit/components/Groups/GroupsList.spec.js
@@ -0,0 +1,73 @@
+import Vuex from 'vuex'
+import { mount, createLocalVue } from '@vue/test-utils'
+import UsersList from '../../../../src/components/Groups/GroupsList'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+afterEach(() => jest.clearAllMocks())
+
+describe('GroupsList', () => {
+  describe('method "orderBy"', () => {
+    it('should return an ascending ordered list while desc is set to false', () => {
+      const wrapper = getMountedWrapper()
+
+      expect(
+        wrapper.vm.orderBy(
+          [{ displayName: 'users' }, { displayName: 'admins' }],
+          'displayName',
+          false
+        )
+      ).toEqual([{ displayName: 'admins' }, { displayName: 'users' }])
+    })
+    it('should return an descending ordered list while desc is set to true', () => {
+      const wrapper = getMountedWrapper()
+
+      expect(
+        wrapper.vm.orderBy(
+          [{ displayName: 'admins' }, { displayName: 'users' }],
+          'displayName',
+          true
+        )
+      ).toEqual([{ displayName: 'users' }, { displayName: 'admins' }])
+    })
+  })
+
+  describe('method "filter"', () => {
+    it('should return a list containing record admins if search term is "ad"', () => {
+      const wrapper = getMountedWrapper()
+
+      expect(
+        wrapper.vm.filter([{ displayName: 'users' }, { displayName: 'admins' }], 'ad')
+      ).toEqual([{ displayName: 'admins' }])
+    })
+    it('should return an an empty list if search term does not match any entry', () => {
+      const wrapper = getMountedWrapper()
+
+      expect(
+        wrapper.vm.filter([{ displayName: 'admins' }, { displayName: 'users' }], 'ownClouders')
+      ).toEqual([])
+    })
+  })
+})
+
+function getMountedWrapper({ propsData = {} } = {}) {
+  return mount(UsersList, {
+    localVue,
+    mocks: {
+      $gettext: jest.fn(),
+      $gettextInterpolate: jest.fn()
+    },
+    propsData: {
+      groups: [],
+      selectedGroups: [],
+      ...propsData
+    },
+    stubs: {
+      'avatar-image': true,
+      'oc-checkbox': true,
+      'oc-button': true,
+      'oc-table': { template: '<div></div>' }
+    }
+  })
+}

From a259a6086237f19697c625e1ed849e1bbe543b37 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Tue, 12 Apr 2022 15:47:51 +0200
Subject: [PATCH 4/7] Add tests

---
 .../unit/components/Users/UsersList.spec.js   | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/packages/web-app-user-management/tests/unit/components/Users/UsersList.spec.js b/packages/web-app-user-management/tests/unit/components/Users/UsersList.spec.js
index a4935d6f977..ba5098af538 100644
--- a/packages/web-app-user-management/tests/unit/components/Users/UsersList.spec.js
+++ b/packages/web-app-user-management/tests/unit/components/Users/UsersList.spec.js
@@ -48,6 +48,44 @@ describe('UsersList', () => {
       expect(wrapper.vm.getUserRole({ id: 1 })).toEqual('')
     })
   })
+
+  describe('method "orderBy"', () => {
+    it('should return an ascending ordered list while desc is set to false', () => {
+      const wrapper = getWrapper()
+
+      expect(
+        wrapper.vm.orderBy(
+          [{ displayName: 'user' }, { displayName: 'admin' }],
+          'displayName',
+          false
+        )
+      ).toEqual([{ displayName: 'admin' }, { displayName: 'user' }])
+    })
+    it('should return an descending ordered list while desc is set to true', () => {
+      const wrapper = getWrapper()
+
+      expect(
+        wrapper.vm.orderBy([{ displayName: 'admin' }, { displayName: 'user' }], 'displayName', true)
+      ).toEqual([{ displayName: 'user' }, { displayName: 'admin' }])
+    })
+  })
+
+  describe('method "filter"', () => {
+    it('should return a list containing record admin if search term is "ad"', () => {
+      const wrapper = getWrapper()
+
+      expect(wrapper.vm.filter([{ displayName: 'user' }, { displayName: 'admin' }], 'ad')).toEqual([
+        { displayName: 'admin' }
+      ])
+    })
+    it('should return an an empty list if search term does not match any entry', () => {
+      const wrapper = getWrapper()
+
+      expect(
+        wrapper.vm.filter([{ displayName: 'admin' }, { displayName: 'user' }], 'jana')
+      ).toEqual([])
+    })
+  })
 })
 
 function getWrapper({ propsData = {} } = {}) {

From ba6547afb00aa567ee40f3fb9d2e74a3776300b5 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Wed, 13 Apr 2022 09:15:16 +0200
Subject: [PATCH 5/7] React on code review

---
 .../src/components/Groups/GroupsList.vue                   | 2 +-
 .../src/components/Users/UsersList.vue                     | 2 +-
 .../web-app-user-management/src/search/filter/index.ts     | 7 ++++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-user-management/src/components/Groups/GroupsList.vue b/packages/web-app-user-management/src/components/Groups/GroupsList.vue
index c32d68db737..decdb8eb1de 100644
--- a/packages/web-app-user-management/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-user-management/src/components/Groups/GroupsList.vue
@@ -128,7 +128,7 @@ export default {
   },
   methods: {
     filter(groups, searchTerm) {
-      if (!searchTerm) {
+      if (!(searchTerm || '').trim()) {
         return groups
       }
       const groupsSearchEngine = new Fuse(groups, {
diff --git a/packages/web-app-user-management/src/components/Users/UsersList.vue b/packages/web-app-user-management/src/components/Users/UsersList.vue
index 17ba11eb421..29eddf3a877 100644
--- a/packages/web-app-user-management/src/components/Users/UsersList.vue
+++ b/packages/web-app-user-management/src/components/Users/UsersList.vue
@@ -147,7 +147,7 @@ export default {
   },
   methods: {
     filter(users, searchTerm) {
-      if (!searchTerm) {
+      if (!(searchTerm || '').trim()) {
         return users
       }
       const usersSearchEngine = new Fuse(users, {
diff --git a/packages/web-app-user-management/src/search/filter/index.ts b/packages/web-app-user-management/src/search/filter/index.ts
index 0034bb3130e..6fc9c964e3d 100644
--- a/packages/web-app-user-management/src/search/filter/index.ts
+++ b/packages/web-app-user-management/src/search/filter/index.ts
@@ -29,7 +29,12 @@ export default class Provider extends EventBus implements SearchProvider {
   }
 
   public get label(): string {
-    return $gettext(`Search ${kind(this.router.currentRoute)} ↵`)
+    switch (kind(this.router.currentRoute)) {
+      case 'users':
+        return $gettext('Search users ↵')
+      case 'groups':
+        return $gettext('Search groups ↵')
+    }
   }
 
   public activate(term: string): void {

From 15cf9e1023e5cee91855efc81c3cb53b53dd5efc Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Wed, 13 Apr 2022 10:46:56 +0200
Subject: [PATCH 6/7] Implement search highlighting

---
 packages/web-app-user-management/package.json |  3 +-
 .../src/components/Groups/GroupsList.vue      | 29 ++++++++++++++++++-
 .../src/components/Users/UsersList.vue        | 29 ++++++++++++++++++-
 yarn.lock                                     |  8 +++++
 4 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-user-management/package.json b/packages/web-app-user-management/package.json
index c957eca0ead..ff7ee04fd12 100644
--- a/packages/web-app-user-management/package.json
+++ b/packages/web-app-user-management/package.json
@@ -4,6 +4,7 @@
   "description": "ownCloud user management",
   "license": "AGPL-3.0",
   "dependencies": {
-    "email-validator": "^2.0.4"
+    "email-validator": "^2.0.4",
+    "mark.js": "^8.11.1"
   }
 }
diff --git a/packages/web-app-user-management/src/components/Groups/GroupsList.vue b/packages/web-app-user-management/src/components/Groups/GroupsList.vue
index decdb8eb1de..499a59643b3 100644
--- a/packages/web-app-user-management/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-user-management/src/components/Groups/GroupsList.vue
@@ -1,5 +1,6 @@
 <template>
   <oc-table
+    ref="table"
     :sort-by="sortBy"
     :sort-dir="sortDir"
     :fields="fields"
@@ -53,6 +54,7 @@
 import { onBeforeUnmount, ref } from '@vue/composition-api'
 import { Registry } from '../../services'
 import Fuse from 'fuse.js'
+import Mark from 'mark.js'
 
 export default {
   name: 'GroupsList',
@@ -78,7 +80,8 @@ export default {
   data() {
     return {
       sortBy: 'displayName',
-      sortDir: 'asc'
+      sortDir: 'asc',
+      markInstance: null
     }
   },
   computed: {
@@ -126,6 +129,24 @@ export default {
       return this.selectedGroups.map((group) => group.id)
     }
   },
+  watch: {
+    searchTerm() {
+      if (!this.markInstance) {
+        return
+      }
+      this.markInstance.unmark()
+      this.markInstance.mark(this.searchTerm, {
+        element: 'span',
+        className: 'highlight-mark',
+        exclude: ['th *', 'tfoot *']
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.markInstance = new Mark(this.$refs.table.$el)
+    })
+  },
   methods: {
     filter(groups, searchTerm) {
       if (!(searchTerm || '').trim()) {
@@ -158,3 +179,9 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.highlight-mark {
+  background: yellow;
+}
+</style>
diff --git a/packages/web-app-user-management/src/components/Users/UsersList.vue b/packages/web-app-user-management/src/components/Users/UsersList.vue
index 29eddf3a877..4c5ab5904a9 100644
--- a/packages/web-app-user-management/src/components/Users/UsersList.vue
+++ b/packages/web-app-user-management/src/components/Users/UsersList.vue
@@ -1,5 +1,6 @@
 <template>
   <oc-table
+    ref="table"
     :sort-by="sortBy"
     :sort-dir="sortDir"
     :fields="fields"
@@ -52,6 +53,7 @@
 import { onBeforeUnmount, ref } from '@vue/composition-api'
 import { Registry } from '../../services'
 import Fuse from 'fuse.js'
+import Mark from 'mark.js'
 
 export default {
   name: 'UsersList',
@@ -81,7 +83,8 @@ export default {
   data() {
     return {
       sortBy: 'onPremisesSamAccountName',
-      sortDir: 'asc'
+      sortDir: 'asc',
+      markInstance: null
     }
   },
   computed: {
@@ -145,6 +148,24 @@ export default {
       return this.selectedUsers.map((user) => user.id)
     }
   },
+  watch: {
+    searchTerm() {
+      if (!this.markInstance) {
+        return
+      }
+      this.markInstance.unmark()
+      this.markInstance.mark(this.searchTerm, {
+        element: 'span',
+        className: 'highlight-mark',
+        exclude: ['th *', 'tfoot *']
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.markInstance = new Mark(this.$refs.table.$el)
+    })
+  },
   methods: {
     filter(users, searchTerm) {
       if (!(searchTerm || '').trim()) {
@@ -188,3 +209,9 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.highlight-mark {
+  background: yellow;
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
index 28477083388..86f2c9e2927 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8941,6 +8941,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mark.js@npm:^8.11.1":
+  version: 8.11.1
+  resolution: "mark.js@npm:8.11.1"
+  checksum: aa6b9ae1c67245348d5b7abd253ef2acd6bb05c6be358d7d192416d964e42665fc10e0e865591c6f93ab9b57e8da1f23c23216e8ebddb580905ea7a0c0df15d4
+  languageName: node
+  linkType: hard
+
 "marked@npm:^4.0.12":
   version: 4.0.12
   resolution: "marked@npm:4.0.12"
@@ -13389,6 +13396,7 @@ __metadata:
   resolution: "user-management@workspace:packages/web-app-user-management"
   dependencies:
     email-validator: ^2.0.4
+    mark.js: ^8.11.1
   languageName: unknown
   linkType: soft
 

From d7fb93ce9dd77dc8f1163623939f9acf26177365 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Wed, 13 Apr 2022 11:22:28 +0200
Subject: [PATCH 7/7] Change colors

---
 .../web-app-user-management/src/components/Groups/GroupsList.vue | 1 +
 .../web-app-user-management/src/components/Users/UsersList.vue   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/web-app-user-management/src/components/Groups/GroupsList.vue b/packages/web-app-user-management/src/components/Groups/GroupsList.vue
index 499a59643b3..8529c58233c 100644
--- a/packages/web-app-user-management/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-user-management/src/components/Groups/GroupsList.vue
@@ -183,5 +183,6 @@ export default {
 <style lang="scss">
 .highlight-mark {
   background: yellow;
+  color: var(--oc-color-text-muted);
 }
 </style>
diff --git a/packages/web-app-user-management/src/components/Users/UsersList.vue b/packages/web-app-user-management/src/components/Users/UsersList.vue
index 4c5ab5904a9..5ea3eb7fac0 100644
--- a/packages/web-app-user-management/src/components/Users/UsersList.vue
+++ b/packages/web-app-user-management/src/components/Users/UsersList.vue
@@ -213,5 +213,6 @@ export default {
 <style lang="scss">
 .highlight-mark {
   background: yellow;
+  color: var(--oc-color-text-muted);
 }
 </style>