Merge Confirmation Dialogs into Alert, Confirmation or Prompt

src/components/buttons/ha-call-service-button.js

@@ -3,7 +3,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "./ha-progress-button";
 import { EventsMixin } from "../../mixins/events-mixin";
-import { showConfirmationDialog } from "../../dialogs/confirmation/show-dialog-confirmation";
+import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 
 /*
  * @appliesMixin EventsMixin

src/dialogs/config-flow/step-flow-create-entry.ts

@@ -25,6 +25,7 @@ import {
 } from "../../data/area_registry";
 import { DataEntryFlowStepCreateEntry } from "../../data/data_entry_flow";
 import { FlowConfig } from "./show-dialog-data-entry-flow";
+import { showPromptDialog } from "../generic/show-dialog-box";
 
 @customElement("step-flow-create-entry")
 class StepFlowCreateEntry extends LitElement {
@@ -93,7 +94,7 @@ class StepFlowCreateEntry extends LitElement {
       <div class="buttons">
         ${this.devices.length > 0
           ? html`
-              <mwc-button @click="${this._addArea}"
+              <mwc-button @click="${this._promptAddArea}"
                 >${localize(
                   "ui.panel.config.integrations.config_flow.add_area"
                 )}</mwc-button
@@ -114,12 +115,7 @@ class StepFlowCreateEntry extends LitElement {
     fireEvent(this, "flow-update", { step: undefined });
   }
 
-  private async _addArea() {
-    const name = prompt(
-      this.hass.localize(
-        "ui.panel.config.integrations.config_flow.name_new_area"
-      )
-    );
+  private async _addArea(name?: string) {
     if (!name) {
       return;
     }
@@ -137,6 +133,18 @@ class StepFlowCreateEntry extends LitElement {
     }
   }
 
+  private async _promptAddArea() {
+    showPromptDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.integrations.config_flow.name_new_area"
+      ),
+      inputLabel: this.hass.localize(
+        "ui.panel.config.integrations.config_flow.area_picker_label"
+      ),
+      confirm: (text) => this._addArea(text),
+    });
+  }
+
   private async _handleAreaChanged(ev: Event) {
     const dropdown = ev.currentTarget as any;
     const device = dropdown.device;

src/dialogs/confirmation/dialog-confirmation.ts → src/dialogs/generic/dialog-box.ts

@@ -14,24 +14,30 @@ import "../../components/dialog/ha-paper-dialog";
 import "../../components/ha-switch";
 
 import { HomeAssistant } from "../../types";
-import { ConfirmationDialogParams } from "./show-dialog-confirmation";
+import { DialogParams } from "./show-dialog-box";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { haStyleDialog } from "../../resources/styles";
 
-@customElement("dialog-confirmation")
-class DialogConfirmation extends LitElement {
+@customElement("dialog-box")
+class DialogBox extends LitElement {
   @property() public hass!: HomeAssistant;
-  @property() private _params?: ConfirmationDialogParams;
+  @property() private _params?: DialogParams;
+  @property() private _value?: string;
 
-  public async showDialog(params: ConfirmationDialogParams): Promise<void> {
+  public async showDialog(params: DialogParams): Promise<void> {
     this._params = params;
+    if (params.prompt) {
+      this._value = params.defaultValue;
+    }
   }
 
   protected render(): TemplateResult | void {
     if (!this._params) {
       return html``;
     }
 
+    const confirmPrompt = this._params.confirmation || this._params.prompt;
+
     return html`
       <ha-paper-dialog
         with-backdrop
@@ -42,33 +48,67 @@ class DialogConfirmation extends LitElement {
         <h2>
           ${this._params.title
             ? this._params.title
-            : this.hass.localize("ui.dialogs.confirmation.title")}
+            : this._params.confirmation &&
+              this.hass.localize(
+                "ui.dialogs.generic.default_confirmation_title"
+              )}
         </h2>
         <paper-dialog-scrollable>
-          <p>${this._params.text}</p>
+          ${this._params.text
+            ? html`
+                <p>${this._params.text}</p>
+              `
+            : ""}
+          ${this._params.prompt
+            ? html`
+                <paper-input
+                  autofocus
+                  .value=${this._value}
+                  @value-changed=${this._valueChanged}
+                  .label=${this._params.inputLabel
+                    ? this._params.inputLabel
+                    : ""}
+                  .type=${this._params.inputType
+                    ? this._params.inputType
+                    : "text"}
+                ></paper-input>
+              `
+            : ""}
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <mwc-button @click="${this._dismiss}">
-            ${this._params.cancelBtnText
-              ? this._params.cancelBtnText
-              : this.hass.localize("ui.dialogs.confirmation.cancel")}
-          </mwc-button>
+          ${confirmPrompt &&
+            html`
+              <mwc-button @click="${this._dismiss}">
+                ${this._params.dismissText
+                  ? this._params.dismissText
+                  : this.hass.localize("ui.dialogs.generic.cancel")}
+              </mwc-button>
+            `}
           <mwc-button @click="${this._confirm}">
-            ${this._params.confirmBtnText
-              ? this._params.confirmBtnText
-              : this.hass.localize("ui.dialogs.confirmation.ok")}
+            ${this._params.confirmText
+              ? this._params.confirmText
+              : this.hass.localize("ui.dialogs.generic.ok")}
           </mwc-button>
         </div>
       </ha-paper-dialog>
     `;
   }
 
+  private _valueChanged(ev: PolymerChangedEvent<string>) {
+    this._value = ev.detail.value;
+  }
+
   private async _dismiss(): Promise<void> {
+    if (this._params!.cancel) {
+      this._params!.cancel();
+    }
     this._params = undefined;
   }
 
   private async _confirm(): Promise<void> {
-    this._params!.confirm();
+    if (this._params!.confirm) {
+      this._params!.confirm(this._value);
+    }
     this._dismiss();
   }
 
@@ -107,6 +147,6 @@ class DialogConfirmation extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dialog-confirmation": DialogConfirmation;
+    "dialog-box": DialogBox;
   }
 }

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

@@ -0,0 +1,62 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+interface AlertDialogParams {
+  confirmText?: string;
+  text?: string;
+  title?: string;
+  confirm?: (out?: string) => void;
+}
+
+interface ConfirmationDialogParams extends AlertDialogParams {
+  dismissText?: string;
+  cancel?: () => void;
+}
+
+interface PromptDialogParams extends AlertDialogParams {
+  inputLabel?: string;
+  inputType?: string;
+  defaultValue?: string;
+}
+
+export interface DialogParams
+  extends ConfirmationDialogParams,
+    PromptDialogParams {
+  confirmation?: boolean;
+  prompt?: boolean;
+}
+
+export const loadGenericDialog = () =>
+  import(/* webpackChunkName: "confirmation" */ "./dialog-box");
+
+export const showAlertDialog = (
+  element: HTMLElement,
+  dialogParams: AlertDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-box",
+    dialogImport: loadGenericDialog,
+    dialogParams,
+  });
+};
+
+export const showConfirmationDialog = (
+  element: HTMLElement,
+  dialogParams: ConfirmationDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-box",
+    dialogImport: loadGenericDialog,
+    dialogParams: { ...dialogParams, confirmation: true },
+  });
+};
+
+export const showPromptDialog = (
+  element: HTMLElement,
+  dialogParams: PromptDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-box",
+    dialogImport: loadGenericDialog,
+    dialogParams: { ...dialogParams, prompt: true },
+  });
+};

src/dialogs/more-info/more-info-controls.js

@@ -21,7 +21,7 @@ import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { removeEntityRegistryEntry } from "../../data/entity_registry";
-import { showConfirmationDialog } from "../confirmation/show-dialog-confirmation";
+import { showConfirmationDialog } from "../generic/show-dialog-box";
 import { showEntityRegistryDetailDialog } from "../../panels/config/entities/show-dialog-entity-registry-detail";
 
 const DOMAINS_NO_INFO = ["camera", "configurator", "history_graph"];
@@ -252,8 +252,8 @@ class MoreInfoControls extends LocalizeMixin(EventsMixin(PolymerElement)) {
       text: this.localize(
         "ui.dialogs.more_info_control.restored.confirm_remove_text"
       ),
-      confirmBtnText: this.localize("ui.common.yes"),
-      cancelBtnText: this.localize("ui.common.no"),
+      confirmText: this.localize("ui.common.yes"),
+      dismissText: this.localize("ui.common.no"),
       confirm: () =>
         removeEntityRegistryEntry(this.hass, this.stateObj.entity_id),
     });

src/panels/config/automation/ha-automation-editor.ts

@@ -25,7 +25,10 @@ import {
   Trigger,
 } from "../../../data/automation";
 import { Action } from "../../../data/script";
-import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialog-confirmation";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/ha-app-layout";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
@@ -65,7 +68,7 @@ export class HaAutomationEditor extends LitElement {
                       "ui.panel.config.automation.picker.delete_automation"
                     )}"
                     icon="hass:delete"
-                    @click=${this._delete}
+                    @click=${this._deleteConfirm}
                   ></paper-icon-button>
                 `}
           </app-toolbar>
@@ -252,17 +255,18 @@ export class HaAutomationEditor extends LitElement {
             this._config = config;
           },
           (resp) => {
-            alert(
-              resp.status_code === 404
-                ? this.hass.localize(
-                    "ui.panel.config.automation.editor.load_error_not_editable"
-                  )
-                : this.hass.localize(
-                    "ui.panel.config.automation.editor.load_error_unknown",
-                    "err_no",
-                    resp.status_code
-                  )
-            );
+            showAlertDialog(this, {
+              text:
+                resp.status_code === 404
+                  ? this.hass.localize(
+                      "ui.panel.config.automation.editor.load_error_not_editable"
+                    )
+                  : this.hass.localize(
+                      "ui.panel.config.automation.editor.load_error_unknown",
+                      "err_no",
+                      resp.status_code
+                    ),
+            });
             history.back();
           }
         );
@@ -326,23 +330,27 @@ export class HaAutomationEditor extends LitElement {
         text: this.hass!.localize(
           "ui.panel.config.automation.editor.unsaved_confirm"
         ),
-        confirmBtnText: this.hass!.localize("ui.common.yes"),
-        cancelBtnText: this.hass!.localize("ui.common.no"),
+        confirmText: this.hass!.localize("ui.common.yes"),
+        dismissText: this.hass!.localize("ui.common.no"),
         confirm: () => history.back(),
       });
     } else {
       history.back();
     }
   }
 
+  private async _deleteConfirm() {
+    showConfirmationDialog(this, {
+      text: this.hass.localize(
+        "ui.panel.config.automation.picker.delete_confirm"
+      ),
+      confirmText: this.hass!.localize("ui.common.yes"),
+      dismissText: this.hass!.localize("ui.common.no"),
+      confirm: () => this._delete(),
+    });
+  }
+
   private async _delete() {
-    if (
-      !confirm(
-        this.hass.localize("ui.panel.config.automation.picker.delete_confirm")
-      )
-    ) {
-      return;
-    }
     await deleteAutomation(this.hass, this.automation.attributes.id!);
     history.back();
   }

src/panels/config/entities/entity-registry-settings.ts

@@ -25,7 +25,7 @@ import {
   removeEntityRegistryEntry,
   EntityRegistryEntry,
 } from "../../../data/entity_registry";
-import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialog-confirmation";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { fireEvent } from "../../../common/dom/fire_event";
 
 @customElement("entity-registry-settings")