From 51d229c4ced7e6571bf40f7e989146a31feb24f2 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 6 Feb 2023 13:48:01 +0100
Subject: [PATCH 1/9] Add groups filter to the users list

---
 .../src/components/Users/UsersList.vue        |   3 +-
 .../src/views/Users.vue                       | 108 +++++++++++++-----
 .../tests/unit/views/Users.spec.ts            |  44 ++++++-
 .../web-pkg/src/components/ItemFilter.vue     |   2 +-
 4 files changed, 124 insertions(+), 33 deletions(-)

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 ec06ca1cf54..028f7426ee3 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -4,9 +4,10 @@
       id="users-filter"
       v-model="filterTerm"
       class="oc-ml-m oc-my-s"
-      :label="$gettext('Filter users')"
+      :label="$gettext('Search')"
       autocomplete="off"
     />
+    <slot name="filter" />
     <oc-table
       ref="tableRef"
       class="users-table"
diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index 3faff4bf91e..e1cb9ec298e 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -2,7 +2,6 @@
   <div>
     <app-template
       ref="template"
-      :loading="loadResourcesTask.isRunning || !loadResourcesTask.last"
       :breadcrumbs="breadcrumbs"
       :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
@@ -34,31 +33,59 @@
         </div>
       </template>
       <template #mainContent>
-        <no-content-message
-          v-if="!users.length"
-          id="admin-settings-users-empty"
-          class="files-empty"
-          icon="user"
-        >
-          <template #message>
-            <span v-translate>No users in here</span>
-          </template>
-        </no-content-message>
+        <app-loading-spinner v-if="loadResourcesTask.isRunning || !loadResourcesTask.last" />
         <div v-else>
-          <UsersList
-            :users="users"
-            :roles="roles"
-            :class="{ 'users-table-squashed': sideBarOpen }"
-            :selected-users="selectedUsers"
-            :header-position="listHeaderPosition"
-            @toggle-select-user="toggleSelectUser"
-            @toggle-select-all-users="toggleSelectAllUsers"
-            @un-select-all-users="unselectAllUsers"
+          <no-content-message
+            v-if="!users.length"
+            id="admin-settings-users-empty"
+            class="files-empty"
+            icon="user"
           >
-            <template #contextMenu>
-              <context-actions :items="selectedUsers" />
+            <template #message>
+              <span v-translate>No users in here</span>
             </template>
-          </UsersList>
+          </no-content-message>
+          <div v-else>
+            <UsersList
+              :users="users"
+              :roles="roles"
+              :class="{ 'users-table-squashed': sideBarOpen }"
+              :selected-users="selectedUsers"
+              :header-position="listHeaderPosition"
+              @toggle-select-user="toggleSelectUser"
+              @toggle-select-all-users="toggleSelectAllUsers"
+              @un-select-all-users="unselectAllUsers"
+            >
+              <template #contextMenu>
+                <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-mr-m oc-flex oc-flex-middle">
+                    <oc-icon name="filter-2" class="oc-mr-xs" />
+                    <span v-text="$gettext('Filter:')" />
+                  </div>
+                  <item-filter
+                    filter-name="groups"
+                    :filter-label="$gettext('Groups')"
+                    :items="groups"
+                    :show-filter="true"
+                    :allow-multiple="true"
+                    display-name-attribute="displayName"
+                    :filterable-attributes="['displayName']"
+                    @selection-change="filterGroups"
+                  >
+                    <template #image="{ item }">
+                      <avatar-image :width="32" :userid="item.id" :user-name="item.displayName" />
+                    </template>
+                    <template #item="{ item }">
+                      <div v-text="item.displayName" />
+                    </template>
+                  </item-filter>
+                </div>
+              </template>
+            </UsersList>
+          </div>
         </div>
       </template>
     </app-template>
@@ -82,7 +109,13 @@ import EditPanel from '../components/Users/SideBar/EditPanel.vue'
 import BatchActions from 'web-pkg/src/components/BatchActions.vue'
 import Delete from '../mixins/users/delete'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-import { useAccessToken, useGraphClient, useStore } from 'web-pkg/src/composables'
+import {
+  queryItemAsString,
+  useAccessToken,
+  useGraphClient,
+  useRouteQuery,
+  useStore
+} from 'web-pkg/src/composables'
 import {
   computed,
   defineComponent,
@@ -98,16 +131,20 @@ import { eventBus } from 'web-pkg/src/services/eventBus'
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import AppTemplate from '../components/AppTemplate.vue'
 import { useSideBar } from 'web-pkg/src/composables/sideBar'
+import ItemFilter from 'web-pkg/src/components/ItemFilter.vue'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 
 export default defineComponent({
   name: 'UsersView',
   components: {
+    AppLoadingSpinner,
     AppTemplate,
     UsersList,
     NoContentMessage,
     CreateUserModal,
     BatchActions,
-    ContextActions
+    ContextActions,
+    ItemFilter
   },
   mixins: [Delete],
   setup() {
@@ -128,6 +165,8 @@ export default defineComponent({
     let loadResourcesEventToken
     let userUpdatedEventToken
 
+    const groupFilterParam = useRouteQuery('q_groups')
+
     const loadGroupsTask = useTask(function* (signal) {
       const groupsResponse = yield unref(graphClient).groups.listGroups()
       groups.value = groupsResponse.data.value
@@ -138,11 +177,15 @@ export default defineComponent({
       roles.value = applicationsResponse.data.value[0].appRoles
     })
 
-    const loadResourcesTask = useTask(function* (signal) {
+    const loadResourcesTask = useTask(function* (signal, loadGroups = true, groupIds = null) {
+      // TODO: filter group ids
       const usersResponse = yield unref(graphClient).users.listUsers('displayName')
       users.value = usersResponse.data.value || []
 
-      yield loadGroupsTask.perform()
+      if (loadGroups) {
+        yield loadGroupsTask.perform()
+      }
+
       yield loadAppRolesTask.perform()
     })
 
@@ -156,6 +199,11 @@ export default defineComponent({
       return data
     })
 
+    const filterGroups = (groups) => {
+      const groupIds = groups.map((g) => g.id)
+      loadResourcesTask.perform(false, groupIds)
+    }
+
     watch(
       selectedUsers,
       async () => {
@@ -189,7 +237,8 @@ export default defineComponent({
     })
 
     onMounted(async () => {
-      await loadResourcesTask.perform()
+      const groupFilterIds = queryItemAsString(unref(groupFilterParam))?.split('+')
+      await loadResourcesTask.perform(true, groupFilterIds)
       loadResourcesEventToken = eventBus.subscribe('app.admin-settings.list.load', () => {
         loadResourcesTask.perform()
         selectedUsers.value = []
@@ -225,7 +274,8 @@ export default defineComponent({
       accessToken,
       listHeaderPosition,
       createUserModalOpen,
-      batchActions
+      batchActions,
+      filterGroups
     }
   },
   computed: {
diff --git a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
index 3dbc6716744..85869699ec8 100644
--- a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
@@ -12,6 +12,7 @@ import {
   shallowMount
 } from 'web-test-helpers'
 import { AxiosResponse } from 'axios'
+import { queryItemAsString } from 'web-pkg'
 
 jest.mock('web-pkg/src/composables/appDefaults')
 
@@ -82,6 +83,10 @@ const getDefaultGraphMock = () => {
   return graph
 }
 
+const selectors = {
+  itemFilterGroupsStub: 'item-filter-stub[filtername="groups"]'
+}
+
 describe('Users view', () => {
   describe('method "createUser"', () => {
     it('should hide the modal and show message on success', async () => {
@@ -325,9 +330,43 @@ describe('Users view', () => {
       expect(wrapper.find('batch-actions-stub').exists()).toBeTruthy()
     })
   })
+
+  describe('filter', () => {
+    it('does filter users by groups when the "selectionChange"-event is triggered', async () => {
+      const graphMock = getDefaultGraphMock()
+      const { wrapper } = getMountedWrapper({ mountType: mount, graph: graphMock })
+      await wrapper.vm.loadResourcesTask.last
+      expect(graphMock.users.listUsers).toHaveBeenCalledTimes(1)
+      ;(wrapper.findComponent<any>(selectors.itemFilterGroupsStub).vm as any).$emit(
+        'selectionChange',
+        [{ id: '1' }]
+      )
+      await wrapper.vm.$nextTick()
+      expect(graphMock.users.listUsers).toHaveBeenCalledTimes(2)
+      // TODO: check for filter
+      expect(graphMock.users.listUsers).toHaveBeenNthCalledWith(2, 'displayName')
+    })
+    it('does filter initially if group ids are given via query param', async () => {
+      const groupIdsQueryParam = '1+2'
+      const graphMock = getDefaultGraphMock()
+      const { wrapper } = getMountedWrapper({
+        mountType: mount,
+        graph: graphMock,
+        queryItem: groupIdsQueryParam
+      })
+      await wrapper.vm.loadResourcesTask.last
+      // TODO: check for filter
+      expect(graphMock.users.listUsers).toHaveBeenCalledWith('displayName')
+    })
+  })
 })
 
-function getMountedWrapper({ mountType = shallowMount, graph = getDefaultGraphMock() } = {}) {
+function getMountedWrapper({
+  mountType = shallowMount,
+  graph = getDefaultGraphMock(),
+  queryItem = null
+} = {}) {
+  jest.mocked(queryItemAsString).mockImplementation(() => queryItem)
   const mocks = {
     ...defaultComponentMocks()
   }
@@ -352,8 +391,9 @@ function getMountedWrapper({ mountType = shallowMount, graph = getDefaultGraphMo
           CreateUserModal: true,
           AppLoadingSpinner: true,
           NoContentMessage: true,
-          UsersList: true,
           OcBreadcrumb: true,
+          OcTable: true,
+          ItemFilter: true,
           BatchActions: true
         }
       }
diff --git a/packages/web-pkg/src/components/ItemFilter.vue b/packages/web-pkg/src/components/ItemFilter.vue
index cd84960a781..e93bb4c3a9b 100644
--- a/packages/web-pkg/src/components/ItemFilter.vue
+++ b/packages/web-pkg/src/components/ItemFilter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="item-filter oc-flex">
+  <div class="item-filter oc-flex" :class="`item-filter-${filterName}`">
     <oc-filter-chip
       :filter-label="filterLabel"
       :selected-item-names="selectedItems.map((i) => i[displayNameAttribute])"

From d601eef14c86a98dc7db3fd014a52ef141f86552 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 8 Feb 2023 17:47:40 +0100
Subject: [PATCH 2/9] wip: filter

---
 packages/web-app-admin-settings/src/views/Users.vue | 5 ++++-
 packages/web-client/src/graph.ts                    | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index e1cb9ec298e..08d8e6825ad 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -179,7 +179,10 @@ export default defineComponent({
 
     const loadResourcesTask = useTask(function* (signal, loadGroups = true, groupIds = null) {
       // TODO: filter group ids
-      const usersResponse = yield unref(graphClient).users.listUsers('displayName')
+      const usersResponse = yield unref(graphClient).users.listUsers(
+        'displayName'
+        // "memberOf/any(m:m/id eq '13bc6d10-00fd-4091-a978-923e1528be60')"
+      )
       users.value = usersResponse.data.value || []
 
       if (loadGroups) {
diff --git a/packages/web-client/src/graph.ts b/packages/web-client/src/graph.ts
index 7e187a1ac46..98eec837ea6 100644
--- a/packages/web-client/src/graph.ts
+++ b/packages/web-client/src/graph.ts
@@ -50,7 +50,7 @@ export interface Graph {
     changeOwnPassword: (currentPassword: string, newPassword: string) => AxiosPromise<void>
     editUser: (userId: string, user: User) => AxiosPromise<User>
     deleteUser: (userId: string) => AxiosPromise<void>
-    listUsers: (orderBy?: string) => AxiosPromise<CollectionOfUser>
+    listUsers: (orderBy?: string, filter?: string) => AxiosPromise<CollectionOfUser>
     createUserAppRoleAssignment: (
       userId: string,
       appRoleAssignment: AppRoleAssignment
@@ -131,12 +131,12 @@ export const graph = (baseURI: string, axiosClient: AxiosInstance): Graph => {
         meChangepasswordApiFactory.changeOwnPassword({ currentPassword, newPassword }),
       editUser: (userId: string, user: User) => userApiFactory.updateUser(userId, user),
       deleteUser: (userId: string) => userApiFactory.deleteUser(userId),
-      listUsers: (orderBy?: any) =>
+      listUsers: (orderBy?: any, filter?: string) =>
         usersApiFactory.listUsers(
           0,
           0,
           '',
-          '',
+          filter,
           false,
           new Set<any>([orderBy]),
           new Set<any>([]),

From 73e7cbbd368d6537a04af48d9063b8787c7847da Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 9 Feb 2023 09:04:02 +0100
Subject: [PATCH 3/9] wip: filter

---
 packages/web-app-admin-settings/src/views/Users.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index 08d8e6825ad..3976961af1f 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -178,11 +178,9 @@ export default defineComponent({
     })
 
     const loadResourcesTask = useTask(function* (signal, loadGroups = true, groupIds = null) {
-      // TODO: filter group ids
-      const usersResponse = yield unref(graphClient).users.listUsers(
-        'displayName'
-        // "memberOf/any(m:m/id eq '13bc6d10-00fd-4091-a978-923e1528be60')"
-      )
+      // TODO: filter multiple group ids
+      const groupFilter = groupIds?.length ? `memberOf/any(m:m/id eq '${groupIds[0]}')` : ''
+      const usersResponse = yield unref(graphClient).users.listUsers('displayName', groupFilter)
       users.value = usersResponse.data.value || []
 
       if (loadGroups) {

From 70fd95ef154db68274bfd3af2ac4b166bc21cd3d Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 13 Feb 2023 10:43:39 +0100
Subject: [PATCH 4/9] Add support for filtering for multiple groups

---
 .../src/components/Users/UsersList.vue        | 35 ++++---
 .../src/views/Users.vue                       | 95 +++++++++----------
 .../tests/unit/views/Users.spec.ts            | 14 ++-
 3 files changed, 73 insertions(+), 71 deletions(-)

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 028f7426ee3..a4131a84455 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -8,7 +8,18 @@
       autocomplete="off"
     />
     <slot name="filter" />
+    <no-content-message
+      v-if="!users.length"
+      id="admin-settings-users-empty"
+      class="files-empty"
+      icon="user"
+    >
+      <template #message>
+        <span v-text="$gettext('No users in here')" />
+      </template>
+    </no-content-message>
     <oc-table
+      v-else
       ref="tableRef"
       class="users-table"
       :sort-by="sortBy"
@@ -96,10 +107,11 @@ import { displayPositionedDropdown, eventBus } from 'web-pkg'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 import { User } from 'web-client/src/generated'
 import ContextMenuQuickAction from 'web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue'
+import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 
 export default defineComponent({
   name: 'UsersList',
-  components: { ContextMenuQuickAction },
+  components: { ContextMenuQuickAction, NoContentMessage },
   props: {
     users: {
       type: Array as PropType<User[]>,
@@ -254,22 +266,17 @@ export default defineComponent({
   },
   watch: {
     filterTerm() {
-      if (!this.markInstance) {
-        return
+      if (this.$refs.tableRef) {
+        this.markInstance = new Mark(this.$refs.tableRef.$el)
+        this.markInstance.unmark()
+        this.markInstance.mark(this.filterTerm, {
+          element: 'span',
+          className: 'highlight-mark',
+          exclude: ['th *', 'tfoot *']
+        })
       }
-      this.markInstance.unmark()
-      this.markInstance.mark(this.filterTerm, {
-        element: 'span',
-        className: 'highlight-mark',
-        exclude: ['th *', 'tfoot *']
-      })
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.markInstance = new Mark(this.$refs.tableRef.$el)
-    })
-  },
   methods: {
     filter(users, filterTerm) {
       if (!(filterTerm || '').trim()) {
diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index 3976961af1f..19e98d85b1e 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -35,57 +35,45 @@
       <template #mainContent>
         <app-loading-spinner v-if="loadResourcesTask.isRunning || !loadResourcesTask.last" />
         <div v-else>
-          <no-content-message
-            v-if="!users.length"
-            id="admin-settings-users-empty"
-            class="files-empty"
-            icon="user"
+          <UsersList
+            :users="users"
+            :roles="roles"
+            :class="{ 'users-table-squashed': sideBarOpen }"
+            :selected-users="selectedUsers"
+            :header-position="listHeaderPosition"
+            @toggle-select-user="toggleSelectUser"
+            @toggle-select-all-users="toggleSelectAllUsers"
+            @un-select-all-users="unselectAllUsers"
           >
-            <template #message>
-              <span v-translate>No users in here</span>
+            <template #contextMenu>
+              <context-actions :items="selectedUsers" />
             </template>
-          </no-content-message>
-          <div v-else>
-            <UsersList
-              :users="users"
-              :roles="roles"
-              :class="{ 'users-table-squashed': sideBarOpen }"
-              :selected-users="selectedUsers"
-              :header-position="listHeaderPosition"
-              @toggle-select-user="toggleSelectUser"
-              @toggle-select-all-users="toggleSelectAllUsers"
-              @un-select-all-users="unselectAllUsers"
-            >
-              <template #contextMenu>
-                <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-mr-m oc-flex oc-flex-middle">
-                    <oc-icon name="filter-2" class="oc-mr-xs" />
-                    <span v-text="$gettext('Filter:')" />
-                  </div>
-                  <item-filter
-                    filter-name="groups"
-                    :filter-label="$gettext('Groups')"
-                    :items="groups"
-                    :show-filter="true"
-                    :allow-multiple="true"
-                    display-name-attribute="displayName"
-                    :filterable-attributes="['displayName']"
-                    @selection-change="filterGroups"
-                  >
-                    <template #image="{ item }">
-                      <avatar-image :width="32" :userid="item.id" :user-name="item.displayName" />
-                    </template>
-                    <template #item="{ item }">
-                      <div v-text="item.displayName" />
-                    </template>
-                  </item-filter>
+            <template #filter>
+              <div class="oc-flex oc-flex-middle oc-ml-m oc-mb-m oc-mt-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>
-              </template>
-            </UsersList>
-          </div>
+                <item-filter
+                  filter-name="groups"
+                  :filter-label="$gettext('Groups')"
+                  :items="groups"
+                  :show-filter="true"
+                  :allow-multiple="true"
+                  display-name-attribute="displayName"
+                  :filterable-attributes="['displayName']"
+                  @selection-change="filterGroups"
+                >
+                  <template #image="{ item }">
+                    <avatar-image :width="32" :userid="item.id" :user-name="item.displayName" />
+                  </template>
+                  <template #item="{ item }">
+                    <div v-text="item.displayName" />
+                  </template>
+                </item-filter>
+              </div>
+            </template>
+          </UsersList>
         </div>
       </template>
     </app-template>
@@ -108,7 +96,6 @@ import DetailsPanel from '../components/Users/SideBar/DetailsPanel.vue'
 import EditPanel from '../components/Users/SideBar/EditPanel.vue'
 import BatchActions from 'web-pkg/src/components/BatchActions.vue'
 import Delete from '../mixins/users/delete'
-import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import {
   queryItemAsString,
   useAccessToken,
@@ -140,7 +127,6 @@ export default defineComponent({
     AppLoadingSpinner,
     AppTemplate,
     UsersList,
-    NoContentMessage,
     CreateUserModal,
     BatchActions,
     ContextActions,
@@ -178,8 +164,13 @@ export default defineComponent({
     })
 
     const loadResourcesTask = useTask(function* (signal, loadGroups = true, groupIds = null) {
-      // TODO: filter multiple group ids
-      const groupFilter = groupIds?.length ? `memberOf/any(m:m/id eq '${groupIds[0]}')` : ''
+      const groupFilter = groupIds
+        ?.reduce((acc, id) => {
+          acc += `memberOf/any(m:m/id eq '${id}') and `
+          return acc
+        }, '')
+        .slice(0, -5)
+
       const usersResponse = yield unref(graphClient).users.listUsers('displayName', groupFilter)
       users.value = usersResponse.data.value || []
 
diff --git a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
index 85869699ec8..9fb04d68456 100644
--- a/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/views/Users.spec.ts
@@ -343,8 +343,11 @@ describe('Users view', () => {
       )
       await wrapper.vm.$nextTick()
       expect(graphMock.users.listUsers).toHaveBeenCalledTimes(2)
-      // TODO: check for filter
-      expect(graphMock.users.listUsers).toHaveBeenNthCalledWith(2, 'displayName')
+      expect(graphMock.users.listUsers).toHaveBeenNthCalledWith(
+        2,
+        'displayName',
+        "memberOf/any(m:m/id eq '1')"
+      )
     })
     it('does filter initially if group ids are given via query param', async () => {
       const groupIdsQueryParam = '1+2'
@@ -355,8 +358,10 @@ describe('Users view', () => {
         queryItem: groupIdsQueryParam
       })
       await wrapper.vm.loadResourcesTask.last
-      // TODO: check for filter
-      expect(graphMock.users.listUsers).toHaveBeenCalledWith('displayName')
+      expect(graphMock.users.listUsers).toHaveBeenCalledWith(
+        'displayName',
+        "memberOf/any(m:m/id eq '1') and memberOf/any(m:m/id eq '2')"
+      )
     })
   })
 })
@@ -390,7 +395,6 @@ function getMountedWrapper({
         stubs: {
           CreateUserModal: true,
           AppLoadingSpinner: true,
-          NoContentMessage: true,
           OcBreadcrumb: true,
           OcTable: true,
           ItemFilter: true,

From e7f63245b558fafdbe54d80bc50aeba5bda1b34a Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 13 Feb 2023 10:48:33 +0100
Subject: [PATCH 5/9] Remove unnecessary stuff

---
 .../src/components/Users/UsersList.vue                     | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

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 a4131a84455..102ee1da968 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -8,12 +8,7 @@
       autocomplete="off"
     />
     <slot name="filter" />
-    <no-content-message
-      v-if="!users.length"
-      id="admin-settings-users-empty"
-      class="files-empty"
-      icon="user"
-    >
+    <no-content-message v-if="!users.length" icon="user">
       <template #message>
         <span v-text="$gettext('No users in here')" />
       </template>

From 2ae8c41750206af2bdb19792094b8b17238a09a5 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 13 Feb 2023 10:50:47 +0100
Subject: [PATCH 6/9] Add changelog item

---
 changelog/unreleased/enhancement-user-group-filter | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-user-group-filter

diff --git a/changelog/unreleased/enhancement-user-group-filter b/changelog/unreleased/enhancement-user-group-filter
new file mode 100644
index 00000000000..67e9db579d9
--- /dev/null
+++ b/changelog/unreleased/enhancement-user-group-filter
@@ -0,0 +1,6 @@
+Enhancement: User group filter
+
+Users in the users list can now be filtered by their group assignments.
+
+https://github.com/owncloud/web/issues/8377
+https://github.com/owncloud/web/pull/8378

From c2b3d2a4cf22e9c93a9857d6ea7aec91c3acb0db Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 13 Feb 2023 10:58:48 +0100
Subject: [PATCH 7/9] Update snapshots

---
 .../unit/components/__snapshots__/ItemFilter.spec.ts.snap     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
index 3b476893fa8..b0a8a655e39 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ItemFilter can use a custom attribute as display name 1`] = `
-<div class="item-filter oc-flex">
+<div class="item-filter oc-flex item-filter-users">
   <div class="oc-filter-chip oc-flex">
     <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-filter-chip-button" id="oc-filter-chip-5" type="button">
       <!-- @slot Content of the button -->
@@ -47,7 +47,7 @@ exports[`ItemFilter can use a custom attribute as display name 1`] = `
 `;
 
 exports[`ItemFilter renders all items 1`] = `
-<div class="item-filter oc-flex">
+<div class="item-filter oc-flex item-filter-users">
   <div class="oc-filter-chip oc-flex">
     <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-filter-chip-button" id="oc-filter-chip-1" type="button">
       <!-- @slot Content of the button -->

From f4eb883c872ea1aa03c5585773c28d2b43122ec7 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 13 Feb 2023 12:19:23 +0100
Subject: [PATCH 8/9] Rename other filters to 'Search'

---
 .../web-app-admin-settings/src/components/Groups/GroupsList.vue | 2 +-
 .../web-app-admin-settings/src/components/Spaces/SpacesList.vue | 2 +-
 .../components/Spaces/__snapshots__/SpacesList.spec.ts.snap     | 2 +-
 3 files changed, 3 insertions(+), 3 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 3e76dc46dea..ef8ea31cfbe 100644
--- a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -4,7 +4,7 @@
       id="groups-filter"
       v-model="filterTerm"
       class="oc-ml-m oc-my-s"
-      :label="$gettext('Filter groups')"
+      :label="$gettext('Search')"
       autocomplete="off"
     />
     <oc-table
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 43694755b7d..b4f2cffc159 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -4,7 +4,7 @@
       id="spaces-filter"
       v-model="filterTerm"
       class="oc-ml-m oc-my-s"
-      :label="$gettext('Filter spaces')"
+      :label="$gettext('Search')"
       autocomplete="off"
     />
     <oc-table
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 3a4b7ad2574..f256283eb2a 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
@@ -3,7 +3,7 @@
 exports[`SpacesList should render all spaces in a table 1`] = `
 <div>
   <div class="oc-ml-m oc-my-s">
-    <label class="oc-label" for="spaces-filter">Filter spaces</label>
+    <label class="oc-label" for="spaces-filter">Search</label>
     <div class="oc-position-relative">
       <input aria-invalid="false" autocomplete="off" class="oc-text-input oc-input oc-rounded" id="spaces-filter" type="text">
       <!--v-if-->

From a63214ed26f6cd387322cf66743af814637fe3e5 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Mon, 13 Feb 2023 15:48:22 +0100
Subject: [PATCH 9/9] Introduce separate loadUsersTask for loading users

---
 .../src/views/Users.vue                       | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index 19e98d85b1e..c1b5d805e39 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -163,21 +163,15 @@ export default defineComponent({
       roles.value = applicationsResponse.data.value[0].appRoles
     })
 
-    const loadResourcesTask = useTask(function* (signal, loadGroups = true, groupIds = null) {
-      const groupFilter = groupIds
-        ?.reduce((acc, id) => {
-          acc += `memberOf/any(m:m/id eq '${id}') and `
-          return acc
-        }, '')
-        .slice(0, -5)
-
+    const loadUsersTask = useTask(function* (signal, groupIds) {
+      const groupFilter = groupIds?.map((id) => `memberOf/any(m:m/id eq '${id}')`).join(' and ')
       const usersResponse = yield unref(graphClient).users.listUsers('displayName', groupFilter)
       users.value = usersResponse.data.value || []
+    })
 
-      if (loadGroups) {
-        yield loadGroupsTask.perform()
-      }
-
+    const loadResourcesTask = useTask(function* (signal, groupIds = null) {
+      yield loadUsersTask.perform(groupIds)
+      yield loadGroupsTask.perform()
       yield loadAppRolesTask.perform()
     })
 
@@ -193,7 +187,7 @@ export default defineComponent({
 
     const filterGroups = (groups) => {
       const groupIds = groups.map((g) => g.id)
-      loadResourcesTask.perform(false, groupIds)
+      loadUsersTask.perform(groupIds)
     }
 
     watch(
@@ -230,7 +224,7 @@ export default defineComponent({
 
     onMounted(async () => {
       const groupFilterIds = queryItemAsString(unref(groupFilterParam))?.split('+')
-      await loadResourcesTask.perform(true, groupFilterIds)
+      await loadResourcesTask.perform(groupFilterIds)
       loadResourcesEventToken = eventBus.subscribe('app.admin-settings.list.load', () => {
         loadResourcesTask.perform()
         selectedUsers.value = []