feat: support message dialogs with 3 buttons (#2641)

* feat: support message dialogs with 3 buttons

* change file

* From<String>

* untagged & YesNoCancel

* revert package.json

* Update plugins/dialog/src/desktop.rs

Co-authored-by: Tony <[email protected]>

* no optional

* Update desktop.rs

* Update plugins/dialog/src/models.rs

Co-authored-by: Tony <[email protected]>

* change to an enum

* convert back into union

* regen

* update @SInCE

* map buttons for linux

* enhance type

* Add examples

---------

Co-authored-by: Tony <[email protected]>
Co-authored-by: Lucas Nogueira <[email protected]>
Co-authored-by: Tony <[email protected]>

Author: 3 people

.changes/dialog-3-buttons.md

@@ -0,0 +1,6 @@
+---
+"dialog": "minor"
+"dialog-js": "minor"
+---
+
+Add support for showing a message dialog with 3 buttons.

examples/api/src/views/Dialog.svelte

@@ -44,6 +44,13 @@
     await message("Tauri is awesome!");
   }
 
+  async function msgCustom(result) {
+    const buttons = { yes: "awesome", no: "amazing", cancel: "stunning" };
+    await message(`Tauri is: `, { buttons })
+      .then((res) => onMessage(`Tauri is ${res}`))
+      .catch(onMessage);
+  }
+
   function openDialog() {
     open({
       title: "My wonderful open dialog",
@@ -136,12 +143,17 @@
   <label for="dialog-directory">Directory</label>
 </div>
 <br />
-<button class="btn" id="open-dialog" on:click={openDialog}>Open dialog</button>
-<button class="btn" id="save-dialog" on:click={saveDialog}
-  >Open save dialog</button
->
-<button class="btn" id="prompt-dialog" on:click={prompt}>Prompt</button>
-<button class="btn" id="custom-prompt-dialog" on:click={promptCustom}
-  >Prompt (custom)</button
->
-<button class="btn" id="message-dialog" on:click={msg}>Message</button>
+
+<div class="flex flex-wrap flex-col md:flex-row gap-2 children:flex-shrink-0">
+  <button class="btn" id="open-dialog" on:click={openDialog}>Open dialog</button>
+  <button class="btn" id="save-dialog" on:click={saveDialog}
+    >Open save dialog</button
+  >
+  <button class="btn" id="prompt-dialog" on:click={prompt}>Prompt</button>
+  <button class="btn" id="custom-prompt-dialog" on:click={promptCustom}
+    >Prompt (custom)</button
+  >
+  <button class="btn" id="message-dialog" on:click={msg}>Message</button>
+  <button class="btn" id="message-dialog" on:click={msgCustom}>Message (custom)</button>
+
+</div>

plugins/dialog/android/src/main/java/DialogPlugin.kt

@@ -38,6 +38,7 @@ class MessageOptions {
   var title: String? = null
   lateinit var message: String
   var okButtonLabel: String? = null
+  var noButtonLabel: String? = null
   var cancelButtonLabel: String? = null
 }
 
@@ -139,9 +140,8 @@ class DialogPlugin(private val activity: Activity): Plugin(activity) {
       return
     }
 
-    val handler = { cancelled: Boolean, value: Boolean ->
+    val handler = { value: String ->
       val ret = JSObject()
-      ret.put("cancelled", cancelled)
       ret.put("value", value)
       invoke.resolve(ret)
     }
@@ -153,24 +153,34 @@ class DialogPlugin(private val activity: Activity): Plugin(activity) {
         if (args.title != null) {
           builder.setTitle(args.title)
         }
+
+        val okButtonLabel = args.okButtonLabel ?: "Ok"
+
         builder
           .setMessage(args.message)
-          .setPositiveButton(
-            args.okButtonLabel ?: "OK"
-          ) { dialog, _ ->
+          .setPositiveButton(okButtonLabel) { dialog, _ ->
             dialog.dismiss()
-            handler(false, true)
+            handler(okButtonLabel)
           }
           .setOnCancelListener { dialog ->
             dialog.dismiss()
-            handler(true, false)
+            handler(args.cancelButtonLabel ?: "Cancel")
+          }
+
+        if (args.noButtonLabel != null) {
+          builder.setNeutralButton(args.noButtonLabel) { dialog, _ ->
+            dialog.dismiss()
+            handler(args.noButtonLabel!!)
           }
+        }
+
         if (args.cancelButtonLabel != null) {
           builder.setNegativeButton( args.cancelButtonLabel) { dialog, _ ->
             dialog.dismiss()
-            handler(false, false)
+            handler(args.cancelButtonLabel!!)
           }
         }
+
         val dialog = builder.create()
         dialog.show()
       }

plugins/dialog/api-iife.js

@@ -77,6 +77,80 @@ interface SaveDialogOptions {
   canCreateDirectories?: boolean
 }
 
+/**
+ * Default buttons for a message dialog.
+ *
+ * @since 2.4.0
+ */
+export type MessageDialogDefaultButtons =
+  | 'Ok'
+  | 'OkCancel'
+  | 'YesNo'
+  | 'YesNoCancel'
+
+/** All possible button keys. */
+type ButtonKey = 'ok' | 'cancel' | 'yes' | 'no'
+
+/** Ban everything except a set of keys. */
+type BanExcept<Allowed extends ButtonKey> = Partial<
+  Record<Exclude<ButtonKey, Allowed>, never>
+>
+
+/**
+ * The Yes, No and Cancel buttons of a message dialog.
+ *
+ * @since 2.4.0
+ */
+export type MessageDialogButtonsYesNoCancel = {
+  /** The Yes button. */
+  yes: string
+  /** The No button. */
+  no: string
+  /** The Cancel button. */
+  cancel: string
+} & BanExcept<'yes' | 'no' | 'cancel'>
+
+/**
+ * The Ok and Cancel buttons of a message dialog.
+ *
+ * @since 2.4.0
+ */
+export type MessageDialogButtonsOkCancel = {
+  /** The Ok button. */
+  ok: string
+  /** The Cancel button. */
+  cancel: string
+} & BanExcept<'ok' | 'cancel'>
+
+/**
+ * The Ok button of a message dialog.
+ *
+ * @since 2.4.0
+ */
+export type MessageDialogButtonsOk = {
+  /** The Ok button. */
+  ok: string
+} & BanExcept<'ok'>
+
+/**
+ * Custom buttons for a message dialog.
+ *
+ * @since 2.4.0
+ */
+export type MessageDialogCustomButtons =
+  | MessageDialogButtonsYesNoCancel
+  | MessageDialogButtonsOkCancel
+  | MessageDialogButtonsOk
+
+/**
+ * The buttons of a message dialog.
+ *
+ * @since 2.4.0
+ */
+export type MessageDialogButtons =
+  | MessageDialogDefaultButtons
+  | MessageDialogCustomButtons
+
 /**
  * @since 2.0.0
  */
@@ -85,8 +159,58 @@ interface MessageDialogOptions {
   title?: string
   /** The kind of the dialog. Defaults to `info`. */
   kind?: 'info' | 'warning' | 'error'
-  /** The label of the confirm button. */
+  /**
+   * The label of the Ok button.
+   *
+   * @deprecated Use {@linkcode MessageDialogOptions.buttons} instead.
+   */
   okLabel?: string
+  /**
+   * The buttons of the dialog.
+   *
+   * @example
+   *
+   * ```ts
+   * // Use system default buttons texts
+   * await message('Hello World!', { buttons: 'Ok' })
+   * await message('Hello World!', { buttons: 'OkCancel' })
+   *
+   * // Or with custom button texts
+   * await message('Hello World!', { buttons: { ok: 'Yes!' } })
+   * await message('Take on the task?', {
+   *   buttons: { ok: 'Accept', cancel: 'Cancel' }
+   * })
+   * await message('Show the file content?', {
+   *   buttons: { yes: 'Show content', no: 'Show in folder', cancel: 'Cancel' }
+   * })
+   * ```
+   *
+   * @since 2.4.0
+   */
+  buttons?: MessageDialogButtons
+}
+
+/**
+ * Internal function to convert the buttons to the Rust type.
+ */
+function buttonsToRust(buttons: MessageDialogButtons | undefined) {
+  if (buttons === undefined) {
+    return undefined
+  }
+
+  if (typeof buttons === 'string') {
+    return buttons
+  } else if ('ok' in buttons && 'cancel' in buttons) {
+    return { OkCancelCustom: [buttons.ok, buttons.cancel] }
+  } else if ('yes' in buttons && 'no' in buttons && 'cancel' in buttons) {
+    return {
+      YesNoCancelCustom: [buttons.yes, buttons.no, buttons.cancel]
+    }
+  } else if ('ok' in buttons) {
+    return { OkCustom: buttons.ok }
+  }
+
+  return undefined
 }
 
 interface ConfirmDialogOptions {
@@ -202,6 +326,16 @@ async function save(options: SaveDialogOptions = {}): Promise<string | null> {
   return await invoke('plugin:dialog|save', { options })
 }
 
+/**
+ * The result of a message dialog.
+ *
+ * The result is a string if the dialog has custom buttons,
+ * otherwise it is one of the default buttons.
+ *
+ * @since 2.4.0
+ */
+export type MessageDialogResult = 'Yes' | 'No' | 'Ok' | 'Cancel' | (string & {})
+
 /**
  * Shows a message dialog with an `Ok` button.
  * @example
@@ -222,13 +356,15 @@ async function save(options: SaveDialogOptions = {}): Promise<string | null> {
 async function message(
   message: string,
   options?: string | MessageDialogOptions
-): Promise<void> {
+): Promise<MessageDialogResult> {
   const opts = typeof options === 'string' ? { title: options } : options
-  await invoke('plugin:dialog|message', {
+
+  return invoke<MessageDialogResult>('plugin:dialog|message', {
     message: message.toString(),
     title: opts?.title?.toString(),
     kind: opts?.kind,
-    okButtonLabel: opts?.okLabel?.toString()
+    okButtonLabel: opts?.okLabel?.toString(),
+    buttons: buttonsToRust(opts?.buttons)
   })
 }
 

plugins/dialog/guest-js/index.ts

@@ -20,6 +20,7 @@ struct MessageDialogOptions: Decodable {
   var title: String?
   let message: String
   var okButtonLabel: String?
+  var noButtonLabel: String?
   var cancelButtonLabel: String?
 }
 
@@ -200,36 +201,38 @@ class DialogPlugin: Plugin {
       let alert = UIAlertController(
         title: args.title, message: args.message, preferredStyle: UIAlertController.Style.alert)
 
-      let cancelButtonLabel = args.cancelButtonLabel ?? ""
-      if !cancelButtonLabel.isEmpty {
+      if let cancelButtonLabel = args.cancelButtonLabel {
         alert.addAction(
           UIAlertAction(
             title: cancelButtonLabel, style: UIAlertAction.Style.default,
             handler: { (_) -> Void in
-              Logger.error("cancel")
-
-              invoke.resolve([
-                "value": false,
-                "cancelled": false,
-              ])
-            }))
+              invoke.resolve(["value": cancelButtonLabel])
+            }
+          )
+        )
       }
 
-      let okButtonLabel = args.okButtonLabel ?? (cancelButtonLabel.isEmpty ? "OK" : "")
-      if !okButtonLabel.isEmpty {
+      if let noButtonLabel = args.noButtonLabel {
         alert.addAction(
           UIAlertAction(
-            title: okButtonLabel, style: UIAlertAction.Style.default,
+            title: noButtonLabel, style: UIAlertAction.Style.default,
             handler: { (_) -> Void in
-              Logger.error("ok")
-
-              invoke.resolve([
-                "value": true,
-                "cancelled": false,
-              ])
-            }))
+              invoke.resolve(["value": noButtonLabel])
+            }
+          )
+        )
       }
 
+      let okButtonLabel = args.okButtonLabel ?? "Ok"
+      alert.addAction(
+        UIAlertAction(
+          title: okButtonLabel, style: UIAlertAction.Style.default,
+          handler: { (_) -> Void in
+            invoke.resolve(["value": okButtonLabel])
+          }
+        )
+      )
+
       manager.viewController?.present(alert, animated: true, completion: nil)
     }
   }