refactor: use autocomplete for user search

Signed-off-by: grnd-alt <git@belakkaf.net>

Author: grnd-alt

cypress/support/commands.js

@@ -99,7 +99,7 @@ Cypress.Commands.add('getNavigationEntry', (boardTitle) => {
 })
 
 Cypress.Commands.add('shareBoardWithUi', (query, userId=query) => {
-	cy.intercept({ method: 'GET', url: `**/ocs/v2.php/apps/files_sharing/api/v1/sharees?search=${query}*` }).as('fetchRecipients')
+	cy.intercept({ method: 'GET', url: `**/ocs/v2.php/core/autocomplete/get?search=${query}*` }).as('fetchRecipients')
 	cy.get('[aria-label="Open details"]').click()
 	cy.get('.app-sidebar').should('be.visible')
 

lib/Db/BoardMapper.php

@@ -524,7 +524,7 @@ public function mapAcl(Acl &$acl): void {
 				return null;
 			}
 			if ($acl->getType() === Acl::PERMISSION_TYPE_REMOTE) {
-				return null;
+				return new FederatedUser($this->cloudIdManager->resolveCloudId($acl->getParticipant()));
 			}
 			$this->logger->warning('Unknown permission type for mapping acl ' . $acl->getId());
 			return null;

lib/Federation/DeckFederationProvider.php

@@ -81,7 +81,7 @@ public function notificationReceived($notificationType, $providerId, $notificati
 				if (!isset($localBoard)) {
 					throw new NotFoundException('Board not found for provider ID: ' . $providerId);
 				}
-				$localParticipant = $this->cloudIdManager->resolveCloudId($notification[0]['participant'])->getUser();
+				$localParticipant = $this->cloudIdManager->resolveCloudId($notification[0]['participant']['uid'])->getUser();
 				$acls = $this->aclMapper->findAll($localBoard->getId());
 				foreach ($acls as $acl) {
 					if ($acl->getParticipant() === $localParticipant) {

lib/Service/BoardService.php

@@ -41,7 +41,6 @@
 use OCP\DB\Exception as DbException;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\Federation\ICloudFederationFactory;
-use OCP\Federation\ICloudFederationNotification;
 use OCP\Federation\ICloudFederationProviderManager;
 use OCP\Federation\ICloudIdManager;
 use OCP\IConfig;
@@ -448,9 +447,6 @@ public function updateAcl(int $id, bool $edit, bool $share, bool $manage): Acl {
 		if ($acl->getType() === Acl::PERMISSION_TYPE_REMOTE) {
 			$this->configService->ensureFederationEnabled();
 			$notification = $this->federationFactory->getCloudFederationNotification();
-			if (!$notification instanceof ICloudFederationNotification) {
-				throw new \InvalidArgumentException('Invalid notification type');
-			}
 
 			$payload = [
 				$acl->jsonSerialize(),

src/components/board/SharingTabSidebar.vue

@@ -4,25 +4,10 @@
 -->
 <template>
 	<div>
-		<NcSelect v-if="canShare"
-			v-model="addAcl"
-			:input-label="t('deck', 'Share board with a user, group or team …')"
+		<NcSelectUsers v-model="addAcl"
 			:options="formatedSharees"
-			:user-select="true"
-			label="displayName"
-			:loading="isLoading || !!isSearching"
-			:disabled="isLoading"
-			track-by="multiselectKey"
-			:internal-search="false"
-			@input="clickAddAcl"
-			@search="(search, loading) => asyncFind(search, loading)">
-			<template #noOptions>
-				{{ isSearching ? t('deck', 'Searching for users, groups and teams …') : t('deck', 'No participants found') }}
-			</template>
-			<template #noResult>
-				{{ isSearching ? t('deck', 'Searching for users, groups and teams …') : t('deck', 'No participants found') }}
-			</template>
-		</NcSelect>
+			:loading="isLoading"
+			@search="(search) => asyncFind(search)" />
 
 		<ul id="shareWithList"
 			class="shareWithList">
@@ -94,12 +79,19 @@
 </template>
 
 <script>
-import { NcCollectionList, NcAvatar, NcSelect, NcActions, NcActionButton, NcActionCheckbox, NcRelatedResourcesPanel } from '@nextcloud/vue'
+import { NcCollectionList, NcAvatar, NcActions, NcActionButton, NcActionCheckbox, NcRelatedResourcesPanel, NcSelectUsers } from '@nextcloud/vue'
 import { mapGetters, mapState } from 'vuex'
 import { getCurrentUser } from '@nextcloud/auth'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import debounce from 'lodash/debounce.js'
+const SOURCE_TO_SHARE_TYPE = {
+	users: 0,
+	groups: 1,
+	emails: 4,
+	remotes: 6,
+	teams: 7,
+}
 
 export default {
 	name: 'SharingTabSidebar',
@@ -108,7 +100,7 @@ export default {
 		NcActions,
 		NcActionButton,
 		NcActionCheckbox,
-		NcSelect,
+		NcSelectUsers,
 		NcCollectionList,
 		NcRelatedResourcesPanel,
 	},
@@ -141,35 +133,28 @@ export default {
 			return (uid) => uid === getCurrentUser().uid
 		},
 		formatedSharees() {
-			return this.unallocatedSharees.map(item => {
-				const subname = item.label === item.shareWithDisplayNameUnique
-					? ''
-					: item.shareWithDisplayNameUnique
-				const sharee = {
-					user: item.value.shareWith,
-					displayName: item.label,
-					subname,
-					icon: 'icon-user',
-					multiselectKey: item.shareType + ':' + item.primaryKey,
-				}
-
-				if (item.value.shareType === 1) {
-					sharee.icon = 'icon-group'
-					sharee.isNoUser = true
+			const result = this.unallocatedSharees.map(item => {
+				const res = {
+					...item,
+					displayName: item.displayname || item.name || item.label || item.id,
+					user: item.id,
+					subname: item.shareWithDisplayNameUnique || item.subline, // NcSelectUser does its own pattern matching to filter things out
 				}
-				if (item.value.shareType === 7) {
-					sharee.icon = 'icon-circles'
-					sharee.isNoUser = true
-				}
-
-				sharee.value = item.value
-				return sharee
+				return res
 			}).slice(0, 10)
+			return result
 		},
 		unallocatedSharees() {
 			return this.sharees.filter((sharee) => {
 				const foundIndex = this.board.acl.findIndex((acl) => {
-					return acl.participant.uid === sharee.value.shareWith && acl.participant.type === sharee.value.shareType
+					console.debug()
+					if (acl.participant.uid === sharee.id && acl.type === SOURCE_TO_SHARE_TYPE[sharee.source]) {
+						return true
+					}
+					if (acl.participant.id === sharee.id && acl.type === SOURCE_TO_SHARE_TYPE[sharee.source]) {
+						return true
+					}
+					return false
 				})
 				if (foundIndex === -1) {
 					return true
@@ -178,6 +163,15 @@ export default {
 			})
 		},
 	},
+	watch: {
+		addAcl: {
+			handler() {
+				if (this.addAcl) {
+					this.clickAddAcl()
+				}
+			},
+		},
+	},
 	mounted() {
 		this.asyncFind('', () => {})
 	},
@@ -187,15 +181,15 @@ export default {
 			await this.$store.dispatch('loadSharees', query)
 			this.isSearching = false
 		}, 300),
-		async asyncFind(query, loading) {
-			loading(true)
+		async asyncFind(query) {
+			this.isLoading = true
 			await this.debouncedFind(query)
-			loading(false)
+			this.isLoading = false
 		},
 		async clickAddAcl() {
 			this.addAclForAPI = {
-				type: this.addAcl.value.shareType,
-				participant: this.addAcl.value.shareWith,
+				type: SOURCE_TO_SHARE_TYPE[this.addAcl.source],
+				participant: this.addAcl.id,
 				permissionEdit: false,
 				permissionShare: false,
 				permissionManage: false,

src/store/main.js

@@ -238,14 +238,7 @@ export default function storeFactory() {
 				state.boards = boards
 			},
 			setSharees(state, shareesUsersAndGroups) {
-				Vue.set(state, 'sharees', shareesUsersAndGroups.exact.users)
-				state.sharees.push(...shareesUsersAndGroups.exact.groups)
-				state.sharees.push(...shareesUsersAndGroups.exact.circles)
-
-				state.sharees.push(...shareesUsersAndGroups.users)
-				state.sharees.push(...shareesUsersAndGroups.groups)
-				state.sharees.push(...shareesUsersAndGroups.circles)
-				state.sharees.push(...shareesUsersAndGroups.remotes)
+				Vue.set(state, 'sharees', shareesUsersAndGroups)
 			},
 			setAssignableUsers(state, users) {
 				state.assignableUsers = users
@@ -434,17 +427,17 @@ export default function storeFactory() {
 				commit('setBoards', boards)
 			},
 			async loadSharees({ commit }, query) {
-				const params = new URLSearchParams()
 				if (typeof query === 'undefined') {
 					return
 				}
-				params.append('search', query)
-				params.append('format', 'json')
-				params.append('perPage', 20)
-				params.append('itemType', 'deck')
-				params.append('lookup', false)
+				const params = {
+					search: query,
+					itemType: 'deck',
+					shareTypes: [0, 1, 4, 6, 7],
+					limit: 20,
+				}
 
-				const response = await axios.get(generateOcsUrl('apps/files_sharing/api/v1/sharees'), { params })
+				const response = await axios.get(generateOcsUrl('/core/autocomplete/get'), { params })
 				commit('setSharees', response.data.ocs.data)
 			},