From 5b93e5eba8cf06395f9ca73a567a7080153b2051 Mon Sep 17 00:00:00 2001
From: Jan <jan.alexander.ackermann@outlook.com>
Date: Wed, 29 Nov 2023 16:40:08 +0100
Subject: [PATCH] Admin settings fix mark problems, remove memberOf from list
 users query (#10090)

---
 .../src/components/Groups/GroupsList.vue      | 58 +++++++++----------
 .../src/components/Spaces/SpacesList.vue      | 33 +++++------
 .../src/components/Users/UsersList.vue        | 58 +++++++++----------
 packages/web-client/src/graph.ts              |  2 +-
 4 files changed, 69 insertions(+), 82 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 15d86ed6af1..b01a929bb93 100644
--- a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -9,7 +9,6 @@
       />
     </div>
     <oc-table
-      ref="tableRef"
       :sort-by="sortBy"
       :sort-dir="sortDir"
       :fields="fields"
@@ -107,18 +106,16 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  PropType,
-  ref,
-  unref,
-  ComponentPublicInstance,
-  computed,
-  watch
-} from 'vue'
+import { defineComponent, PropType, ref, unref, computed, watch } from 'vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
-import { displayPositionedDropdown, eventBus, SortDir } from '@ownclouders/web-pkg'
+import {
+  displayPositionedDropdown,
+  eventBus,
+  SortDir,
+  useRoute,
+  useRouter
+} from '@ownclouders/web-pkg'
 import { SideBarEventTopics } from '@ownclouders/web-pkg'
 import { Group } from '@ownclouders/web-client/src/generated'
 import { ContextMenuQuickAction } from '@ownclouders/web-pkg'
@@ -155,6 +152,9 @@ export default defineComponent({
     const sortBy = ref<string>('displayName')
     const sortDir = ref<string>(SortDir.Asc)
     const filterTerm = ref<string>('')
+    const router = useRouter()
+    const route = useRoute()
+    const markInstance = ref(null)
 
     const lastSelectedGroupIndex = ref(0)
     const lastSelectedGroupId = ref(null)
@@ -285,6 +285,18 @@ export default defineComponent({
       emit('unSelectAllGroups')
     })
 
+    watch(filterTerm, async () => {
+      await unref(router).push({ ...unref(route), query: { ...unref(route).query, page: '1' } })
+    })
+
+    watch([filterTerm, paginatedItems], () => {
+      unref(markInstance)?.unmark()
+      unref(markInstance)?.mark(unref(filterTerm), {
+        element: 'span',
+        className: 'highlight-mark'
+      })
+    })
+
     return {
       showDetails,
       rowClicked,
@@ -304,12 +316,8 @@ export default defineComponent({
       currentPage,
       totalPages,
       filter,
-      orderBy
-    }
-  },
-  data() {
-    return {
-      markInstance: null
+      orderBy,
+      markInstance
     }
   },
   computed: {
@@ -366,23 +374,9 @@ export default defineComponent({
       return this.selectedGroups.map((group) => group.id)
     }
   },
-  watch: {
-    async filterTerm() {
-      if (!this.markInstance) {
-        return
-      }
-      await this.$router.push({ ...this.$route, query: { ...this.$route.query, page: '1' } })
-      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 as ComponentPublicInstance).$el)
+      this.markInstance = new Mark('td.oc-table-data-cell-displayName')
     })
   },
   methods: {
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 070d33893ec..e3a1c0f91ce 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -9,7 +9,6 @@
       />
     </div>
     <oc-table
-      ref="tableRef"
       class="spaces-table"
       :sort-by="sortBy"
       :sort-dir="sortDir"
@@ -63,9 +62,9 @@
       <template #members="{ item }">
         {{ getMemberCount(item) }}
       </template>
-      <template #totalQuota="{ item }"> {{ getTotalQuota(item) }} </template>
-      <template #usedQuota="{ item }"> {{ getUsedQuota(item) }} </template>
-      <template #remainingQuota="{ item }"> {{ getRemainingQuota(item) }} </template>
+      <template #totalQuota="{ item }"> {{ getTotalQuota(item) }}</template>
+      <template #usedQuota="{ item }"> {{ getUsedQuota(item) }}</template>
+      <template #remainingQuota="{ item }"> {{ getRemainingQuota(item) }}</template>
       <template #mdate="{ item }">
         <span
           v-oc-tooltip="formatDate(item.mdate)"
@@ -93,7 +92,8 @@
             appearance="raw"
             class="spaces-table-btn-details"
             @click.stop.prevent="showDetailsForSpace(item)"
-            ><oc-icon name="information" fill-type="line" />
+          >
+            <oc-icon name="information" fill-type="line" />
           </oc-button>
           <context-menu-quick-action
             ref="contextMenuButtonRef"
@@ -174,7 +174,6 @@ export default defineComponent({
     const sortDir = ref(SortDir.Asc)
     const filterTerm = ref('')
     const markInstance = ref(undefined)
-    const tableRef = ref(undefined)
 
     const lastSelectedSpaceIndex = ref(0)
     const lastSelectedSpaceId = ref(null)
@@ -386,21 +385,19 @@ export default defineComponent({
 
     onMounted(() => {
       nextTick(() => {
-        markInstance.value = new Mark(unref(tableRef).$el)
+        markInstance.value = new Mark('td.oc-table-data-cell-name')
       })
     })
 
     watch(filterTerm, async () => {
-      const instance = unref(markInstance)
-      if (!instance) {
-        return
-      }
-      await router.push({ ...unref(route), query: { ...unref(route).query, page: '1' } })
-      instance.unmark()
-      instance.mark(unref(filterTerm), {
+      await unref(router).push({ ...unref(route), query: { ...unref(route).query, page: '1' } })
+    })
+
+    watch([filterTerm, paginatedItems], () => {
+      unref(markInstance)?.unmark()
+      unref(markInstance)?.mark(unref(filterTerm), {
         element: 'span',
-        className: 'highlight-mark',
-        exclude: ['th *', 'tfoot *']
+        className: 'highlight-mark'
       })
     })
 
@@ -491,7 +488,6 @@ export default defineComponent({
       footerTextFilter,
       fields,
       highlighted,
-      tableRef,
       filter,
       getManagerNames,
       formatDate,
@@ -545,6 +541,7 @@ export default defineComponent({
       display: table-cell;
     }
   }
+
   .oc-table-header-cell-totalQuota,
   .oc-table-data-cell-totalQuota,
   .oc-table-header-cell-usedQuota,
@@ -555,6 +552,7 @@ export default defineComponent({
       display: table-cell;
     }
   }
+
   &-squashed {
     .oc-table-header-cell-manager,
     .oc-table-data-cell-manager,
@@ -564,6 +562,7 @@ export default defineComponent({
     .oc-table-data-cell-usedQuota {
       display: none;
     }
+
     .oc-table-header-cell-remainingQuota,
     .oc-table-data-cell-remainingQuota,
     .oc-table-header-cell-mdate,
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 897a540ce56..c9c93335f31 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -16,7 +16,6 @@
     </no-content-message>
     <oc-table
       v-else
-      ref="tableRef"
       class="users-table"
       :sort-by="sortBy"
       :sort-dir="sortDir"
@@ -79,8 +78,9 @@
           class="oc-mr-xs quick-action-button oc-p-xs users-table-btn-details"
           @click="showDetails(item)"
         >
-          <oc-icon name="information" fill-type="line" /></oc-button
-        ><oc-button
+          <oc-icon name="information" fill-type="line" />
+        </oc-button>
+        <oc-button
           v-oc-tooltip="$gettext('Edit')"
           appearance="raw"
           class="oc-mr-xs quick-action-button oc-p-xs users-table-btn-edit"
@@ -112,22 +112,16 @@
 
 <script lang="ts">
 import { useGettext } from 'vue3-gettext'
-import {
-  defineComponent,
-  PropType,
-  ref,
-  unref,
-  ComponentPublicInstance,
-  watch,
-  computed
-} from 'vue'
+import { defineComponent, PropType, ref, unref, watch, nextTick, onMounted, computed } from 'vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
 import {
   defaultFuseOptions,
   displayPositionedDropdown,
   eventBus,
-  SortDir
+  SortDir,
+  useRoute,
+  useRouter
 } from '@ownclouders/web-pkg'
 import { SideBarEventTopics } from '@ownclouders/web-pkg'
 import { AppRole, User } from '@ownclouders/web-client/src/generated'
@@ -169,6 +163,9 @@ export default defineComponent({
     const sortBy = ref<string>('onPremisesSamAccountName')
     const sortDir = ref<string>(SortDir.Asc)
     const { y: fileListHeaderY } = useFileListHeaderPosition('#admin-settings-app-bar')
+    const router = useRouter()
+    const route = useRoute()
+    const markInstance = ref(null)
 
     const lastSelectedUserIndex = ref(0)
     const lastSelectedUserId = ref(null)
@@ -254,7 +251,7 @@ export default defineComponent({
       }
       const usersSearchEngine = new Fuse(users, {
         ...defaultFuseOptions,
-        keys: ['displayName', 'mail', 'onPremisesSamAccountName', 'role.displayName']
+        keys: ['displayName']
       })
 
       return usersSearchEngine.search(filterTerm).map((r) => r.item)
@@ -306,8 +303,21 @@ export default defineComponent({
       total: totalPages
     } = usePagination({ items, perPageDefault, perPageStoragePrefix })
 
-    watch(currentPage, () => {
-      emit('unSelectAllUsers')
+    onMounted(async () => {
+      await nextTick()
+      markInstance.value = new Mark('td.oc-table-data-cell-displayName')
+    })
+
+    watch(filterTerm, async () => {
+      await unref(router).push({ ...unref(route), query: { ...unref(route).query, page: '1' } })
+    })
+
+    watch([filterTerm, paginatedItems], () => {
+      unref(markInstance)?.unmark()
+      unref(markInstance)?.mark(unref(filterTerm), {
+        element: 'span',
+        className: 'highlight-mark'
+      })
     })
 
     const keyActions = useKeyboardActions()
@@ -430,22 +440,6 @@ export default defineComponent({
       return this.selectedUsers.map((user) => user.id)
     }
   },
-  watch: {
-    async filterTerm() {
-      if (!this.$refs.tableRef) {
-        return
-      }
-
-      await this.$router.push({ ...this.$route, query: { ...this.$route.query, page: '1' } })
-      this.markInstance = new Mark((this.$refs.tableRef as ComponentPublicInstance).$el)
-      this.markInstance.unmark()
-      this.markInstance.mark(this.filterTerm, {
-        element: 'span',
-        className: 'highlight-mark',
-        exclude: ['th *', 'tfoot *']
-      })
-    }
-  },
   methods: {
     handleSort(event) {
       this.sortBy = event.sortBy
diff --git a/packages/web-client/src/graph.ts b/packages/web-client/src/graph.ts
index 9cc7046a781..27c8591bcc0 100644
--- a/packages/web-client/src/graph.ts
+++ b/packages/web-client/src/graph.ts
@@ -150,7 +150,7 @@ export const graph = (baseURI: string, axiosClient: AxiosInstance): Graph => {
           filter,
           new Set<any>([orderBy]),
           new Set<any>([]),
-          new Set<any>(['memberOf', 'appRoleAssignments'])
+          new Set<any>(['appRoleAssignments'])
         ),
       createUserAppRoleAssignment: (userId: string, appRoleAssignment: AppRoleAssignment) =>
         userAppRoleAssignmentApiFactory.userCreateAppRoleAssignments(userId, appRoleAssignment),