Merge pull request #1802 from nextcloud/enh/improve-sharing

enh(sharing): Move away from deprecated icon classes and allow to search user by email

src/components/SidebarTabs/SharingSearchDiv.vue

@@ -232,15 +232,20 @@ export default {
 			}
 		},
 
+		/**
+		 * A OCS Sharee response
+		 * @typedef {{label: string, shareWithDisplayNameUnique: string, value: { shareType: number, shareWith: string }, status?: unknown }} Sharee
+		 */
+
 		/**
 		 * Format search results
 		 *
-		 * @param {object[]} results Results as returned by search
-		 * @return {object[]} results as we use them on storage
+		 * @param {Record<string, Sharee>} results Results as returned by search
+		 * @return {Sharee[]} results as we use them on storage
 		 */
 		formatSearchResults(results) {
 			// flatten array of arrays
-			const flatResults = Object.values(results).reduce((arr, elem) => arr.concat(elem), [])
+			const flatResults = Object.values(results).flat()
 
 			return this.filterUnwantedShares(flatResults)
 				.map(share => this.formatForMultiselect(share))
@@ -252,36 +257,35 @@ export default {
 		 * Remove static unwanted shares from search results
 		 * Existing shares must be done dynamically to account for new shares.
 		 *
-		 * @param {object[]} shares the array of share objects
-		 * @return {object[]}
+		 * @param {Sharee[]} shares the array of share objects
+		 * @return {Sharee[]}
 		 */
 		filterUnwantedShares(shares) {
-			return shares.reduce((arr, share) => {
+			return shares.filter((share) => {
 				// only use proper objects
 				if (typeof share !== 'object') {
-					return arr
+					return false
 				}
 
 				try {
 					// filter out current user
 					if (share.value.shareType === this.SHARE_TYPES.SHARE_TYPE_USER
 						&& share.value.shareWith === getCurrentUser().uid) {
-						return arr
+						return false
 					}
 
 					// All good, let's add the suggestion
-					arr.push(share)
+					return true
 				} catch {
-					return arr
+					return false
 				}
-				return arr
-			}, [])
+			})
 		},
 
 		/**
 		 * Format shares for the multiselect options
 		 *
-		 * @param {object} share Share in search formatting
+		 * @param {Sharee} share Share in search formatting
 		 * @return {object} Share in multiselect formatting
 		 */
 		formatForMultiselect(share) {
@@ -290,8 +294,10 @@ export default {
 				shareType: share.value.shareType,
 				user: share.value.shareWith,
 				isNoUser: share.value.shareType !== this.SHARE_TYPES.SHARE_TYPE_USER,
+				id: share.value.shareWith,
 				displayName: share.label,
-				icon: this.shareTypeToIcon(share.value.shareType),
+				subname: share.shareWithDisplayNameUnique,
+				iconSvg: this.shareTypeToIcon(share.value.shareType),
 				// Vue unique binding to render within Multiselect's AvatarSelectOption
 				key: share.value.shareWith + '-' + share.value.shareType,
 			}

src/mixins/ShareTypes.js

@@ -19,6 +19,13 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/* eslint-disable import/no-unresolved */
+import IconUserSvg from '@mdi/svg/svg/account.svg?raw'
+import IconGroupSvg from '@mdi/svg/svg/account-group.svg?raw'
+import IconMailSvg from '@mdi/svg/svg/email.svg?raw'
+import IconChatSvg from '@mdi/svg/svg/chat.svg?raw'
+import IconCircleSvg from '@mdi/svg/svg/circle-outline.svg?raw'
+/* eslint-enable import/no-unresolved */
 
 export default {
 	data() {
@@ -53,23 +60,23 @@ export default {
 		 * Default share is a user, other icons are here to differenciate from it, so let's not display the user icon.
 		 *
 		 * @param {number} type the share type
-		 * @return {string} the icon class
+		 * @return {string} the icon as raw svg
 		 */
 		shareTypeToIcon(type) {
 			switch (type) {
 			case this.SHARE_TYPES.SHARE_TYPE_GUEST:
 			// case this.SHARE_TYPES.SHARE_TYPE_REMOTE:
 			// case this.SHARE_TYPES.SHARE_TYPE_USER:
-				return 'icon-user'
+				return IconUserSvg
 			case this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP:
 			case this.SHARE_TYPES.SHARE_TYPE_GROUP:
-				return 'icon-group'
+				return IconGroupSvg
 			case this.SHARE_TYPES.SHARE_TYPE_EMAIL:
-				return 'icon-mail'
+				return IconMailSvg
 			case this.SHARE_TYPES.SHARE_TYPE_CIRCLE:
-				return 'icon-circle'
+				return IconCircleSvg
 			case this.SHARE_TYPES.SHARE_TYPE_ROOM:
-				return 'icon-room'
+				return IconChatSvg
 
 			default:
 				return ''