fix(sharing): list accounts with matches in email

* Show users with matches in the email address.

* List email addresses in sharing dialog.

`NcSelect` filters the options based on matches in `label` and `subname`.

By using the email address as a subname we ensure

options with a matching email address are shown.

Signed-off-by: Max <max@nextcloud.com>

[skip ci]

Author: max-nextcloud

cypress/e2e/sharingFeatures.js

@@ -2,11 +2,14 @@ import { randUser } from '../utils/index.js'
 import { sampleBoard } from '../utils/sampleBoard'
 const user = randUser()
 const recipient = randUser()
+const domain = Math.random().toString(36).replace(/[^a-z]+/g, '').slice(0, 10)
 
 describe('Board', function() {
 	before(function() {
 		cy.createUser(user)
 		cy.createUser(recipient)
+		cy.login(recipient)
+		cy.setUserEmail(recipient, `${recipient.userId}@${domain}.com`)
 	})
 
 	beforeEach(function() {
@@ -30,6 +33,24 @@ describe('Board', function() {
 		})
 	})
 
+	it('Share a board to a user by email', function() {
+		const board = sampleBoard('Shared by email')
+		cy.createExampleBoard({ user, board }).then((board) => {
+			const boardId = board.id
+			cy.visit(`/apps/deck/#/board/${boardId}`)
+			cy.get('.board-title').contains(board.title)
+
+			// domain is only in the email address - not in user ids.
+			cy.shareBoardWithUi(domain, recipient.userId)
+
+			cy.login(recipient)
+			cy.visit(`/apps/deck/#/board/${boardId}`)
+			cy.get('.board-title').contains(board.title)
+			cy.get('.button-vue[aria-label*="Add card"]')
+				.should('not.exist')
+		})
+	})
+
 	it('Share a board to a user as writable', function() {
 		const board = sampleBoard('Editable board')
 		cy.createExampleBoard({ user, board }).then((board) => {

cypress/support/commands.js

@@ -21,12 +21,21 @@
  */
 
 import { addCommands } from '@nextcloud/cypress'
+import axios from '@nextcloud/axios'
 
 addCommands()
 
 const url = Cypress.config('baseUrl').replace(/\/index.php\/?$/g, '')
 Cypress.env('baseUrl', url)
 
+// prepare main cypress window so we can use axios there
+// and it will successfully fetch csrf tokens when needed.
+window.OC = {
+	config: { modRewriteWorking: false },
+}
+// Prevent @nextcloud/router from reading window.location
+window._oc_webroot = url
+
 Cypress.Commands.add('openLeftSidebar', () => {
 	cy.get('.app-navigation button.app-navigation-toggle').click()
 })
@@ -106,16 +115,24 @@ Cypress.Commands.add('getNavigationEntry', (boardTitle) => {
 		.find('a.app-navigation-entry-link')
 })
 
-Cypress.Commands.add('shareBoardWithUi', (userId) => {
-	cy.intercept({ method: 'GET', url: `**/ocs/v2.php/apps/files_sharing/api/v1/sharees?search=${userId}*` }).as('fetchRecipients')
+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.get('[aria-label="Open details"]').click()
 	cy.get('.app-sidebar').should('be.visible')
 	cy.get('.select input').click()
 	cy.get('.select input').type(`${userId}`)
 	cy.wait('@fetchRecipients', { timeout: 7000 })
 
-	cy.get('.vs__dropdown-menu .option').first().contains(userId)
+	cy.get('.vs__dropdown-menu .option').first().contains(query)
 	cy.get('.select input').type('{enter}')
 
 	cy.get('.shareWithList').contains(userId)
 })
+
+Cypress.Commands.add('setUserEmail', (user, value) => {
+	Cypress.log()
+	return axios.put(
+		`${url}/ocs/v2.php/cloud/users/${user.userId}`,
+		{ key: 'email', value },
+	)
+})

src/components/board/SharingTabSidebar.vue

@@ -137,9 +137,13 @@ export default {
 		},
 		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,
 				}