Merge pull request #258 from nextcloud-libraries/feature/dialog-per-recipient-permissions

feat(dialog): multiple recipients with per-recipient permissions

Author: skjnldsv

.gitignore

@@ -63,3 +63,8 @@ typings/
 .next
 
 /dist
+
+# Playwright
+test-results/
+playwright-report/
+playwright/.cache/

lib/dialog/SharingDialog.vue

@@ -62,7 +62,8 @@
 				:folderName="folderName"
 				@settingsWarning="settingsHasWarning = $event"
 				@settingsAvailable="settingsAvailable = $event"
-				@submitted="onSubmitted" />
+				@submitted="onSubmitted"
+				@deleted="emit('close')" />
 		</template>
 
 		<!-- Settings toggle -->
@@ -98,7 +99,7 @@ import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import ShareConfirmation from './components/ShareConfirmation.vue'
 import SharePanel from './components/SharePanel.vue'
 import { createShare } from './api/share.ts'
-import { SOURCE_TYPE_NODE } from './constants.ts'
+import { RECIPIENT_TYPE_TOKEN, SOURCE_TYPE_NODE } from './constants.ts'
 import { ShareDialogTab } from './types/ui.ts'
 import { t } from './utils/l10n.ts'
 import { logger } from './utils/logger.ts'
@@ -138,7 +139,11 @@ const dialogTitle = computed(() => {
 		: t('Share')
 })
 
-const shareDialogTab = ref<ShareDialogTab>(ShareDialogTab.InvitedPeople)
+// Open an existing share on the view matching its type. Getting this wrong is
+// destructive: the link view syncs the token recipient, so opening a link share
+// on the invited view would strip its link.
+const isExistingLinkShare = props.share?.recipients.some((recipient) => recipient.class === RECIPIENT_TYPE_TOKEN) ?? false
+const shareDialogTab = ref<ShareDialogTab>(isExistingLinkShare ? ShareDialogTab.Anyone : ShareDialogTab.InvitedPeople)
 const settingsHasWarning = ref(false)
 const settingsAvailable = ref(false)
 
@@ -207,6 +212,9 @@ onMounted(async () => {
 	// flex is used so the dialog still sizes to its content when it is short.
 	:deep(.share-panel) {
 		max-height: 50vh;
+		// Keep a stable floor so the dialog does not jump around as the content
+		// changes (switching tabs, adding recipients, revealing toggles).
+		min-height: min(320px, 50vh);
 		overflow-y: auto;
 		// Match the dialog's inline padding at the bottom (its content has none),
 		// so the form does not sit flush against the edge.

lib/dialog/api/share.spec.ts

@@ -22,6 +22,7 @@ vi.mock('./sharing.ts', () => ({
 	updateShareProperty: vi.fn(),
 	updateSharePermission: vi.fn(),
 	selectSharePermissionPreset: vi.fn(),
+	updateShareRecipientPermission: vi.fn(),
 	updateShareState: vi.fn(),
 	searchRecipients: vi.fn(),
 	deleteShare: vi.fn(),
@@ -119,6 +120,13 @@ describe('Share', () => {
 		expect(mocked.updateSharePermission).toHaveBeenCalledWith('abc', 'C', false)
 	})
 
+	it('setRecipientPermission forwards recipient identity, permission and flag', async () => {
+		const instance = await makeShare()
+		mocked.updateShareRecipientPermission.mockResolvedValue(share())
+		await instance.setRecipientPermission('R', 'bob', 'C', true, 'inst')
+		expect(mocked.updateShareRecipientPermission).toHaveBeenCalledWith('abc', 'R', 'bob', 'C', true, 'inst')
+	})
+
 	it('addSource forwards the class and value', async () => {
 		const instance = await makeShare()
 		mocked.addShareSource.mockResolvedValue(share())

lib/dialog/api/share.ts

@@ -183,6 +183,20 @@ class Share {
 		return this.#sync(await client.selectSharePermissionPreset(this.id, presetClass))
 	}
 
+	/**
+	 * Enable or disable a single permission for one recipient. The backend caps
+	 * the recipient at the share-level permissions (the maximum).
+	 *
+	 * @param recipientClass The recipient type class
+	 * @param recipientValue The recipient value
+	 * @param permissionClass The permission type class
+	 * @param enabled The new enabled state
+	 * @param instance The recipient's instance (federated shares)
+	 */
+	async setRecipientPermission(recipientClass: string, recipientValue: string, permissionClass: string, enabled: boolean, instance?: string): Promise<this> {
+		return this.#sync(await client.updateShareRecipientPermission(this.id, recipientClass, recipientValue, permissionClass, enabled, instance))
+	}
+
 	/**
 	 * Set the share state (draft → active → deleted).
 	 *

lib/dialog/api/sharing.ts

@@ -172,6 +172,31 @@ export async function selectSharePermissionPreset(shareId: string, presetClass:
 	return unwrapOcs<SharingShare>(response)
 }
 
+/**
+ * Update a single permission for one recipient of a share.
+ *
+ * The backend caps the recipient's permissions at the share-level permissions
+ * (the maximum), which are themselves bounded by the sharer's own permissions
+ * on a reshare, or the admin default.
+ *
+ * @param shareId
+ * @param recipientClass
+ * @param recipientValue
+ * @param permissionClass
+ * @param enabled
+ * @param instance
+ */
+export async function updateShareRecipientPermission(shareId: string, recipientClass: string, recipientValue: string, permissionClass: string, enabled: boolean, instance?: string): Promise<SharingShare> {
+	const response = await axios.put(sharingUrl(`/share/${shareId}/recipient/permission`), {
+		recipientClass,
+		recipientValue,
+		recipientInstance: instance ?? null,
+		permissionClass,
+		enabled,
+	})
+	return unwrapOcs<SharingShare>(response)
+}
+
 /**
  * Update the state of a share (draft → active → deleted).
  *

lib/dialog/components/PermissionEditor.spec.ts

@@ -0,0 +1,63 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import type { EditablePermission } from './PermissionEditor.vue'
+
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import PermissionEditor from './PermissionEditor.vue'
+
+vi.mock('../utils/l10n.ts', () => ({ t: (s: string) => s }))
+
+function permission(cls: string, enabled: boolean, available: boolean): EditablePermission {
+	return { class: cls, source_class: null, display_name: cls, hint: null, priority: 0, presets: [], enabled, available }
+}
+
+function mountEditor(props: Record<string, unknown> = {}) {
+	return shallowMount(PermissionEditor, {
+		props: {
+			presetOptions: [{ value: 'View', label: 'Can view' }, { value: 'custom', label: 'Can…' }],
+			selectedPreset: { value: 'custom', label: 'Can…' },
+			showPermissions: true,
+			permissions: [permission('read', true, true), permission('write', false, false)],
+			...props,
+		},
+		global: { renderStubDefaultSlot: true },
+	})
+}
+
+describe('PermissionEditor', () => {
+	it('shows the notice only when provided', () => {
+		expect(mountEditor({ notice: null }).findComponent({ name: 'NcNoteCard' }).exists()).toBe(false)
+		expect(mountEditor({ notice: 'Capped' }).text()).toContain('Capped')
+	})
+
+	it('emits presetChange from the select', () => {
+		const wrapper = mountEditor()
+		wrapper.findComponent({ name: 'NcSelect' }).vm.$emit('update:modelValue', { value: 'View', label: 'Can view' })
+		expect(wrapper.emitted('presetChange')![0]).toEqual([{ value: 'View', label: 'Can view' }])
+	})
+
+	it('renders a toggle per permission and disables those over the cap', () => {
+		const wrapper = mountEditor()
+		const toggles = wrapper.findAllComponents({ name: 'NcFormBoxSwitch' })
+		expect(toggles).toHaveLength(2)
+		expect(toggles[0].props('disabled')).toBe(false)
+		expect(toggles[1].props('disabled')).toBe(true)
+	})
+
+	it('hides toggles when not in custom mode', () => {
+		const wrapper = mountEditor({ showPermissions: false })
+		expect(wrapper.findComponent({ name: 'NcFormBoxSwitch' }).exists()).toBe(false)
+	})
+
+	it('emits permissionToggle from a switch', () => {
+		const wrapper = mountEditor()
+		wrapper.findAllComponents({ name: 'NcFormBoxSwitch' })[0].vm.$emit('update:modelValue', false)
+		const emitted = wrapper.emitted('permissionToggle')![0]
+		expect((emitted[0] as { class: string }).class).toBe('read')
+		expect(emitted[1]).toBe(false)
+	})
+})

lib/dialog/components/PermissionEditor.vue

@@ -0,0 +1,138 @@
+<!--
+  SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+	<div class="permission-editor">
+		<!-- Cap notice: shown when some permissions are not grantable -->
+		<NcNoteCard v-if="notice" type="info">
+			{{ notice }}
+		</NcNoteCard>
+
+		<NcSelect
+			:modelValue="selectedPreset"
+			:clearable="false"
+			:searchable="false"
+			:inputLabel="presetLabel"
+			:hideLabel="hideLabel"
+			:options="presetOptions"
+			class="permission-editor__preset"
+			:placeholder="t('Custom permissions')"
+			@update:modelValue="(option) => emit('presetChange', option)" />
+
+		<!-- Fine-grained toggles, shown while the custom entry is selected -->
+		<Transition name="expand">
+			<div v-if="showPermissions" ref="permissionsEl" class="permission-editor__permissions">
+				<div class="permission-editor__permissions-inner">
+					<NcFormBox>
+						<NcFormBoxSwitch
+							v-for="permission in permissions"
+							:key="permission.class"
+							:label="permission.display_name"
+							:description="permission.hint ?? undefined"
+							:disabled="permission.available === false"
+							:error="permissionErrors[permission.class]"
+							:modelValue="permission.enabled"
+							@update:modelValue="(enabled) => emit('permissionToggle', permission, enabled)" />
+					</NcFormBox>
+				</div>
+			</div>
+		</Transition>
+
+		<NcNoteCard v-if="presetError" type="error">
+			{{ presetError }}
+		</NcNoteCard>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { PresetOption } from '../composables/useRecipientPermissions.ts'
+import type { SharingPermission } from '../types/api.ts'
+
+import { nextTick, ref, watch } from 'vue'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import { t } from '../utils/l10n.ts'
+
+/** A permission toggle; `available === false` disables it (over the cap). */
+export type EditablePermission = SharingPermission & { available?: boolean }
+
+const props = withDefaults(defineProps<{
+	/** Preset dropdown options */
+	presetOptions: PresetOption[]
+	/** The currently selected preset option */
+	selectedPreset: PresetOption | null
+	/** Whether the fine-grained toggles are shown (custom preset) */
+	showPermissions: boolean
+	/** The permission toggles */
+	permissions: EditablePermission[]
+	/** Backend errors per permission class */
+	permissionErrors?: Record<string, string>
+	/** Backend error for the preset selection */
+	presetError?: string | null
+	/** Info notice shown above the editor (e.g. the permission cap) */
+	notice?: string | null
+	/** Label for the preset select */
+	presetLabel?: string
+	/** Hide the preset select label */
+	hideLabel?: boolean
+}>(), {
+	permissionErrors: () => ({}),
+	presetError: null,
+	notice: null,
+	presetLabel: undefined,
+	hideLabel: false,
+})
+
+const emit = defineEmits<{
+	(e: 'presetChange', option: PresetOption | null): void
+	(e: 'permissionToggle', permission: SharingPermission, enabled: boolean): void
+}>()
+
+const permissionsEl = ref<HTMLElement | null>(null)
+
+// Reveal the toggles once they appear, they are below the fold in the dialog.
+watch(() => props.showPermissions, async (shown) => {
+	if (!shown) {
+		return
+	}
+	await nextTick()
+	permissionsEl.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+})
+</script>
+
+<style scoped lang="scss">
+.permission-editor {
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--default-grid-baseline) * 3);
+
+	&__permissions {
+		display: grid;
+		grid-template-rows: 1fr;
+	}
+
+	&__permissions-inner {
+		overflow: hidden;
+	}
+}
+
+.expand-enter-active,
+.expand-leave-active {
+	transition: grid-template-rows 0.2s ease-in-out;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+	grid-template-rows: 0fr;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.expand-enter-active,
+	.expand-leave-active {
+		transition: none;
+	}
+}
+</style>

lib/dialog/components/RecipientList.vue

@@ -0,0 +1,38 @@
+<!--
+  SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+	<ul v-if="recipients.length > 0" class="recipient-list">
+		<RecipientRow
+			v-for="recipient in recipients"
+			:key="recipient.class + recipient.value + (recipient.instance ?? '')"
+			:share="share"
+			:recipient="recipient" />
+	</ul>
+</template>
+
+<script setup lang="ts">
+import type { Share } from '../api/share.ts'
+
+import { computed } from 'vue'
+import RecipientRow from './RecipientRow.vue'
+import { RECIPIENT_TYPE_TOKEN } from '../constants.ts'
+
+const props = defineProps<{
+	/** The share being edited */
+	share: Share
+}>()
+
+// Link (token) recipients are managed by the "Anyone" tab, not listed here.
+const recipients = computed(() => props.share.recipients.filter((recipient) => recipient.class !== RECIPIENT_TYPE_TOKEN))
+</script>
+
+<style scoped lang="scss">
+.recipient-list {
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--default-grid-baseline) * 3);
+	padding-inline-start: calc(var(--default-grid-baseline) * 2);
+}
+</style>