feat(dialogs): allow to quickly show a dialog

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

Author: susnux

lib/dialogs.spec.ts

@@ -0,0 +1,60 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { cleanup, findByRole, fireEvent, getByLabelText, getByRole } from '@testing-library/vue'
+import { afterEach, expect, test } from 'vitest'
+import { showConfirmation } from './dialogs.ts'
+
+afterEach(cleanup)
+
+test('Show confirmation dialog', async () => {
+	const promise = showConfirmation({
+		name: 'Dialog name',
+		text: 'Dialog text',
+	})
+
+	const dialog = await findByRole(document.documentElement, 'dialog')
+	expect(dialog).toBeInstanceOf(HTMLElement)
+
+	expect(getByLabelText(document.documentElement, 'Dialog name')).toBe(dialog)
+	expect(dialog.textContent).toContain('Dialog text')
+
+	const close = getByRole(dialog, 'button', { name: 'Close' })
+	expect(close).toBeInstanceOf(HTMLElement)
+	const confirm = getByRole(dialog, 'button', { name: 'Confirm' })
+	expect(confirm).toBeInstanceOf(HTMLElement)
+	await fireEvent(confirm, new MouseEvent('click', { bubbles: true }))
+	expect(promise).resolves.toBe(true)
+})
+
+test('show confirmation dialog with reject', async () => {
+	const promise = showConfirmation({
+		name: 'Dialog name',
+		text: 'Dialog text',
+		labelConfirm: 'My confirm',
+		labelReject: 'My reject',
+	})
+
+	const dialog = await findByRole(document.documentElement, 'dialog')
+	const confirm = getByRole(dialog, 'button', { name: 'My confirm' })
+	const reject = getByRole(dialog, 'button', { name: 'My reject' })
+	expect(confirm).toBeInstanceOf(HTMLElement)
+	expect(reject).toBeInstanceOf(HTMLElement)
+	await fireEvent(reject, new MouseEvent('click', { bubbles: true }))
+	expect(promise).resolves.toBe(false)
+})
+
+test('show confirmation dialog and close', async () => {
+	const promise = showConfirmation({
+		name: 'Dialog name',
+		text: 'Dialog text',
+	})
+
+	const dialog = await findByRole(document.documentElement, 'dialog')
+	const close = getByRole(dialog, 'button', { name: 'Close' })
+	expect(close).toBeInstanceOf(HTMLElement)
+	await fireEvent(close, new MouseEvent('click', { bubbles: true }))
+	expect(promise).rejects.toThrowError('Dialog closed')
+})

lib/dialogs.ts

@@ -7,6 +7,7 @@ import type { IDialogButton, IDialogSeverity } from './components/types.ts'
 
 import { spawnDialog } from '@nextcloud/vue/functions/dialog'
 import GenericDialog from './components/GenericDialog.vue'
+import { t } from './utils/l10n.ts'
 import { logger } from './utils/logger.ts'
 
 export type * from './components/types.ts'
@@ -172,3 +173,57 @@ export class DialogBuilder {
 export function getDialogBuilder(name: string) {
 	return new DialogBuilder(name)
 }
+
+export interface ConfirmationDialogOptions {
+	/** The name of the dialog (heading) */
+	name: string
+	/** The text of the dialog */
+	text: string
+	/** The text of the confirmation button */
+	labelConfirm?: string
+	/** The text of the reject button */
+	labelReject?: string
+	/** The severity */
+	severity?: IDialogSeverity
+}
+
+/**
+ * Open a new confirmation dialog.
+ * The dialog either resolves to true when the confirm-button was pressed,
+ * or to false if the reject-button was pressed.
+ *
+ * @param options - Dialog options see `ConfirmationDialogOptions`
+ */
+export async function showConfirmation(options: ConfirmationDialogOptions): Promise<boolean> {
+	options = {
+		labelConfirm: t('Confirm'),
+		...options,
+	}
+
+	const { promise, resolve } = Promise.withResolvers<boolean>()
+	const buttons: IDialogButton[] = [{
+		label: options.labelConfirm!,
+		variant: 'primary',
+		callback() {
+			resolve(true)
+		},
+	}]
+
+	if (options.labelReject) {
+		buttons.unshift({
+			label: options.labelReject,
+			callback() {
+				resolve(false)
+			},
+		})
+	}
+
+	const dialog = new Dialog(
+		options.name,
+		options.text,
+		buttons,
+		options.severity,
+	)
+	await dialog.show()
+	return promise
+}