feat: create guests through the contacts menu

core/src/tests/views/ContactsMenu.spec.js

@@ -140,4 +140,39 @@ describe('ContactsMenu', function() {
 		expect(view.text()).toContain('Adeline Snider')
 		expect(view.text()).toContain('Show all contacts')
 	})
+
+	it('hides add guest button when not capable', async () => {
+		const view = mount(ContactsMenu, {
+			data() {
+				return {
+					canInviteGuests: false,
+				}
+			},
+		})
+
+		await view.vm.handleOpen()
+
+		expect(view.vm.canInviteGuests).toBe(false)
+		expect(view.findComponent('button[title="Add guest"]').exists()).toBe(false)
+	})
+
+	it('shows add guest button when capable', async () => {
+		const view = mount(ContactsMenu, {
+			data() {
+				return {
+					canInviteGuests: true,
+				}
+			},
+		})
+
+		await view.vm.handleOpen()
+
+		const guestButton = view.findComponent('button[title="Add guest"]')
+
+		expect(view.vm.canInviteGuests).toBe(true)
+		expect(guestButton.exists()).toBe(true)
+		expect(guestButton.vm.$options.name).toBe('NcButton')
+		expect(guestButton.vm.$attrs.title).toBe('Add guest')
+	})
+
 })

core/src/views/ContactsMenu.vue

@@ -5,25 +5,37 @@
 
 <template>
 	<NcHeaderMenu id="contactsmenu"
+		ref="contactsmenu"
 		class="contactsmenu"
 		:aria-label="t('core', 'Search contacts')"
 		@open="handleOpen">
 		<template #trigger>
 			<NcIconSvgWrapper class="contactsmenu__trigger-icon" :path="mdiContacts" />
 		</template>
 		<div class="contactsmenu__menu">
-			<div class="contactsmenu__menu__input-wrapper">
-				<NcTextField id="contactsmenu__menu__search"
-					ref="contactsMenuInput"
-					:value.sync="searchTerm"
-					trailing-button-icon="close"
-					:label="t('core', 'Search contacts')"
-					:trailing-button-label="t('core','Reset search')"
-					:show-trailing-button="searchTerm !== ''"
-					:placeholder="t('core', 'Search contacts …')"
-					class="contactsmenu__menu__search"
-					@input="onInputDebounced"
-					@trailing-button-click="onReset" />
+			<div class="contactsmenu__menu__search-container">
+				<div class="contactsmenu__menu__input-wrapper">
+					<NcTextField id="contactsmenu__menu__search"
+						ref="contactsMenuInput"
+						:value.sync="searchTerm"
+						trailing-button-icon="close"
+						:label="t('core', 'Search contacts')"
+						:trailing-button-label="t('core','Reset search')"
+						:show-trailing-button="searchTerm !== ''"
+						:placeholder="t('core', 'Search contacts …')"
+						class="contactsmenu__menu__search"
+						@input="onInputDebounced"
+						@trailing-button-click="onReset" />
+				</div>
+				<NcButton v-if="canInviteGuests"
+					variant="tertiary"
+					:aria-label="t('core', 'Add guest')"
+					:title="t('core', 'Add guest')"
+					@click="onGuestButtonClick">
+					<template #icon>
+						<NcIconSvgWrapper :path="mdiAccountPlusOutline" />
+					</template>
+				</NcButton>
 			</div>
 			<NcEmptyContent v-if="error" :name="t('core', 'Could not load your contacts')">
 				<template #icon>
@@ -62,7 +74,7 @@
 </template>
 
 <script>
-import { mdiContacts, mdiMagnify } from '@mdi/js'
+import { mdiAccountPlusOutline, mdiContacts, mdiMagnify } from '@mdi/js'
 import { generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { t } from '@nextcloud/l10n'
@@ -97,6 +109,7 @@ export default {
 
 	setup() {
 		return {
+			mdiAccountPlusOutline,
 			mdiContacts,
 			mdiMagnify,
 		}
@@ -112,6 +125,7 @@ export default {
 			contacts: [],
 			loadingText: undefined,
 			error: false,
+			canInviteGuests: !!window?.OCA?.Guests?.openGuestDialog,
 			searchTerm: '',
 		}
 	},
@@ -170,6 +184,12 @@ export default {
 			})
 		},
 
+		onGuestButtonClick() {
+			if (window?.OCA?.Guests?.openGuestDialog) {
+				this.$refs.contactsmenu.closeMenu()
+				OCA.Guests.openGuestDialog('core')
+			}
+		},
 	},
 }
 </script>
@@ -195,10 +215,16 @@ export default {
 			margin-inline-start: 13px;
 		}
 
+		&__search-container {
+			display: flex;
+			flex: row nowrap;
+		}
+
 		&__input-wrapper {
 			padding: 10px;
 			z-index: 2;
 			top: 0;
+			flex-grow: 1;
 		}
 
 		&__search {