tauriのフロントエンド部分でwindow.confirmを使用した部分をtauriのdialogで書いてみた

[経緯]
tauriで作成したアプリケーションでダイアログの確認をした後に、バックエンドの処理を呼ぶため、window.confirmを使用した。
ただtauriのdialogも使用できるようなので使ってみた。

[結論]
window.confirmだと最小限のカスタマイズしかできないが、tauriのdialogならタイトルなどさまざまな変更が可能である。MUIなどで実装する程でもないと言う時に使用できるかもしれないと思いました。

変更前

import { invoke } from "@tauri-apps/api/tauri";

const executeCommands = () => {
        invoke<string>("command");
  };

...

const handleCommand = async() => {
  const Confirm = await window.confirm("helloコマンドを実行しますか？");
  if (Confirm) {
       executeCommands();
     }
   };

...
return (
<div>
    <button onClick={handleCommand}>実行ボタン</button>
</div>

変更後

import { invoke } from "@tauri-apps/api/tauri";
import { dialog } from "@tauri-apps/api";
const executeCommands = () => {
      invoke<string>("command");
  };

...

const handleCommand = async () => {
    const Confirm = await dialog.ask("helloコマンドを実行しますか?", "Ask Dialog");
    if (Confirm) {
      // yes
      executeCommands();
    }
  };

...
return (
<div>
    <button onClick={handleCommand}>実行ボタン</button>
</div>

tauri.conf.json内

  "tauri":
  {
    "allowlist": {
      "all": false,
      "dialog": {
        "confirm": true,
        "open": true,
        "ask": true
      }
    }
  }