Confirm when resetting hassio optoins (#4718)

hassio/src/addon-view/hassio-addon-config.ts

@@ -25,6 +25,7 @@ import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-yaml-editor";
 // tslint:disable-next-line: no-duplicate-imports
 import { HaYamlEditor } from "../../../src/components/ha-yaml-editor";
+import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
 
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
@@ -115,6 +116,16 @@ class HassioAddonConfig extends LitElement {
   }
 
   private async _resetTapped(): Promise<void> {
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.addon.name,
+      text: "Are you sure you want to reset all your options?",
+      confirmText: "reset options",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
     this._error = undefined;
     const data: HassioAddonSetOptionParams = {
       options: null,

src/dialogs/generic/show-dialog-box.ts

@@ -1,26 +1,32 @@
 import { fireEvent } from "../../common/dom/fire_event";
 
-export interface AlertDialogParams {
+interface BaseDialogParams {
   confirmText?: string;
   text?: string;
   title?: string;
-  confirm?: (out?: string) => void;
 }
 
-interface ConfirmationDialogParams extends AlertDialogParams {
+export interface AlertDialogParams extends BaseDialogParams {
+  confirm?: () => void;
+}
+
+export interface ConfirmationDialogParams extends BaseDialogParams {
   dismissText?: string;
+  confirm?: () => void;
   cancel?: () => void;
 }
 
-interface PromptDialogParams extends AlertDialogParams {
+export interface PromptDialogParams extends BaseDialogParams {
   inputLabel?: string;
   inputType?: string;
   defaultValue?: string;
+  confirm?: (out?: string) => void;
 }
 
 export interface DialogParams
   extends ConfirmationDialogParams,
     PromptDialogParams {
+  confirm?: (out?: string) => void;
   confirmation?: boolean;
   prompt?: boolean;
 }
@@ -28,35 +34,57 @@ export interface DialogParams
 export const loadGenericDialog = () =>
   import(/* webpackChunkName: "confirmation" */ "./dialog-box");
 
+const showDialogHelper = (
+  element: HTMLElement,
+  dialogParams: DialogParams,
+  extra?: {
+    confirmation?: DialogParams["confirmation"];
+    prompt?: DialogParams["prompt"];
+  }
+) =>
+  new Promise((resolve) => {
+    const origCancel = dialogParams.cancel;
+    const origConfirm = dialogParams.confirm;
+
+    fireEvent(element, "show-dialog", {
+      dialogTag: "dialog-box",
+      dialogImport: loadGenericDialog,
+      dialogParams: {
+        ...dialogParams,
+        ...extra,
+        cancel: () => {
+          resolve(extra?.prompt ? null : false);
+          if (origCancel) {
+            origCancel();
+          }
+        },
+        confirm: (out) => {
+          resolve(extra?.prompt ? out : true);
+          if (origConfirm) {
+            origConfirm(out);
+          }
+        },
+      },
+    });
+  });
+
 export const showAlertDialog = (
   element: HTMLElement,
   dialogParams: AlertDialogParams
-): void => {
+) => showDialogHelper(element, dialogParams);
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-box",
-    dialogImport: loadGenericDialog,
-    dialogParams,
-  });
-};
 
 export const showConfirmationDialog = (
   element: HTMLElement,
   dialogParams: ConfirmationDialogParams
-): void => {
+) =>
-  fireEvent(element, "show-dialog", {
+  showDialogHelper(element, dialogParams, { confirmation: true }) as Promise<
-    dialogTag: "dialog-box",
+    boolean
-    dialogImport: loadGenericDialog,
+  >;
-    dialogParams: { ...dialogParams, confirmation: true },
-  });
-};
 
 export const showPromptDialog = (
   element: HTMLElement,
   dialogParams: PromptDialogParams
-): void => {
+) =>
-  fireEvent(element, "show-dialog", {
+  showDialogHelper(element, dialogParams, { prompt: true }) as Promise<
-    dialogTag: "dialog-box",
+    null | string
-    dialogImport: loadGenericDialog,
+  >;
-    dialogParams: { ...dialogParams, prompt: true },
-  });
-};