enh(sharing): Move away from deprecated icon classes and allow to sea…

…rch user by email

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

package.json

@@ -52,10 +52,12 @@
     "npm": "^9.0.0"
   },
   "devDependencies": {
+    "@mdi/svg": "^7.3.67",
     "@nextcloud/babel-config": "^1.0.0",
     "@nextcloud/browserslist-config": "^3.0.0",
     "@nextcloud/eslint-config": "^8.3.0",
     "@nextcloud/stylelint-config": "^2.3.1",
-    "@nextcloud/webpack-vue-config": "^6.0.0"
+    "@nextcloud/webpack-vue-config": "^6.0.0",
+    "raw-loader": "^4.0.2"
   }
 }

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 ''

webpack.js

@@ -1,8 +1,20 @@
 const path = require('path')
 const webpackConfig = require('@nextcloud/webpack-vue-config')
+const webpackRules = require('@nextcloud/webpack-vue-config/rules')
 
 webpackConfig.entry.emptyContent = path.resolve(path.join('src', 'emptyContent.js'))
 webpackConfig.entry.submit = path.resolve(path.join('src', 'submit.js'))
 webpackConfig.entry.settings = path.resolve(path.join('src', 'settings.js'))
 
+delete webpackRules.RULE_ASSETS
+
+webpackConfig.module.rules = [
+	{
+		test: /\.svg$/i,
+		use: 'raw-loader',
+		resourceQuery: /raw/,
+	},
+	...Object.values(webpackRules),
+]
+
 module.exports = webpackConfig