fixup!

Signed-off-by: Ferdinand Thiessen <[email protected]>

Author: susnux

apps/settings/src/components/AppNavigationGroupList.vue

@@ -62,7 +62,6 @@
 </template>
 
 <script setup lang="ts">
-import type CancelablePromise from 'cancelable-promise'
 import type { IGroup } from '../views/user-types.d.ts'
 
 import { mdiAccountGroupOutline, mdiPlus } from '@mdi/js'
@@ -154,8 +153,8 @@ watch(groupsSearchQuery, async () => {
 	await loadGroups()
 })
 
-/** Cancelable promise for search groups request */
-const promise = ref<CancelablePromise<IGroup[]>>()
+let abortController: AbortController = new AbortController()
+const promise = ref<Promise<IGroup[]>>()
 
 /**
  * Load groups
@@ -166,14 +165,17 @@ async function loadGroups() {
 	}
 
 	if (promise.value) {
-		promise.value.cancel()
+		abortController.abort()
 	}
+
 	loadingGroups.value = true
 	try {
+		abortController = new AbortController()
 		promise.value = searchGroups({
 			search: groupsSearchQuery.value,
 			offset: offset.value,
 			limit: 25,
+			signal: abortController.signal,
 		})
 		const groups = await promise.value
 		if (groups.length > 0) {

apps/settings/src/components/Users/NewUserDialog.vue

@@ -199,6 +199,7 @@ export default {
 			// TRANSLATORS This string describes a manager in the context of an organization
 			managerLabel: t('settings', 'Set line manager'),
 			// Cancelable promise for search groups request
+			controller: new AbortController(),
 			promise: null,
 		}
 	},
@@ -296,14 +297,16 @@ export default {
 			}
 
 			if (this.promise) {
-				this.promise.cancel()
+				this.controller.abort()
 			}
 			toggleLoading(true)
 			try {
+				this.controller = new AbortController()
 				this.promise = searchGroups({
 					search: query,
 					offset: 0,
 					limit: 25,
+					signal: this.controller.signal,
 				})
 				const groups = await this.promise
 				// Populate store from server request

apps/settings/src/components/Users/UserRow.vue

@@ -416,6 +416,7 @@ export default {
 			editedPassword: '',
 			editedMail: this.user.email ?? '',
 			// Cancelable promise for search groups request
+			controller: new AbortController(),
 			promise: null,
 		}
 	},
@@ -654,14 +655,16 @@ export default {
 				return // Prevent unexpected search behaviour e.g. on option:created
 			}
 			if (this.promise) {
-				this.promise.cancel()
+				this.controller.abort()
 			}
 			toggleLoading(true)
 			try {
+				this.controller = new AbortController()
 				this.promise = await searchGroups({
 					search: query,
 					offset: 0,
 					limit: 25,
+					signal: this.controller.signal,
 				})
 				const groups = await this.promise
 				// Populate store from server request

apps/settings/src/service/groups.ts

@@ -7,7 +7,6 @@ import type { IGroup } from '../views/user-types.d.ts'
 
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
-import { CancelablePromise } from 'cancelable-promise'
 
 interface Group {
 	id: string
@@ -33,29 +32,29 @@ function formatGroup(group: Group): Required<IGroup> {
 	}
 }
 
+interface SearchGroupOptions {
+	search: string
+	offset: number
+	limit: number
+	signal?: AbortSignal
+}
+
 /**
  * Search groups
  *
  * @param options Options
  * @param options.search Search query
  * @param options.offset Offset
  * @param options.limit Limit
+ * @param options.signal Abort signal
  */
-export function searchGroups({ search, offset, limit }): CancelablePromise<Required<IGroup>[]> {
-	const controller = new AbortController()
-	return new CancelablePromise(async (resolve, reject, onCancel) => {
-		onCancel(() => controller.abort())
-		try {
-			const { data } = await axios.get(generateOcsUrl('/cloud/groups/details?search={search}&offset={offset}&limit={limit}', { search, offset, limit }), {
-				signal: controller.signal,
-			})
-			const groups: Group[] = data.ocs?.data?.groups ?? []
-			const formattedGroups = groups.map(formatGroup)
-			resolve(formattedGroups)
-		} catch (error) {
-			reject(error)
-		}
+export async function searchGroups({ search, offset, limit, signal }: SearchGroupOptions): Promise<Required<IGroup>[]> {
+	const { data } = await axios.get(generateOcsUrl('/cloud/groups/details?search={search}&offset={offset}&limit={limit}', { search, offset, limit }), {
+		signal,
 	})
+	const groups: Group[] = data.ocs?.data?.groups ?? []
+	const formattedGroups = groups.map(formatGroup)
+	return formattedGroups
 }
 
 /**