From 15be1688ad1407cc5b2a4018645fbd603347332e Mon Sep 17 00:00:00 2001 From: Timmo Date: Sat, 25 Jan 2020 16:48:29 +0000 Subject: [PATCH] Merge Confirmation Dialogs into Alert, Confirmation or Prompt (#4114) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * :sparkles: Add alert dialog :hammer: Add alert dialogs :hammer: add more :hammer: Add more :hammer: Enhance check Co-Authored-By: Bram Kragten :fire: Combine confirmation into alert dialog :hammer: Replace confirmation calls with alert dialog :pencil2: Remove 3 :hammer: Add prompt logic Rename to generic Rename and add new params for alert, confirmation and prompt Renames and prop changes Rename and props Cleanup Setup prompt Wording Use text for prompt Add prompts and confirmation on delete user Rename Rename Rename imports Fix parms change Only use default for confirmation Co-Authored-By: Bram Kragten Update src/dialogs/generic/dialog-box.ts Co-Authored-By: Bram Kragten Update change text Add autofocus Merge show dialogs into one generic Add automation delete confirmation Modal Remove deleted file Add delete donfirm to script Fix error with tslint Fix from rebase Fix from rebase Fix from rebase * 🔧 Split dialog functions * 🔧 Fix from rebase * 🔧 More fixes * 🔧 Fix * 🔧 Apply suggestions from code review Co-Authored-By: Bram Kragten * 🔧 Update from suggestion * 🔧 Renames and cleanup * 🔧 Camelcase Co-Authored-By: Bram Kragten * 🔧 camel case Co-Authored-By: Bram Kragten Co-authored-by: Bram Kragten --- .../buttons/ha-call-service-button.js | 2 +- .../config-flow/step-flow-create-entry.ts | 22 ++++-- .../confirmation/show-dialog-confirmation.ts | 23 ------ .../dialog-box.ts} | 74 ++++++++++++++----- src/dialogs/generic/show-dialog-box.ts | 62 ++++++++++++++++ src/dialogs/more-info/more-info-controls.js | 6 +- .../config/automation/ha-automation-editor.ts | 52 +++++++------ .../entities/entity-registry-settings.ts | 2 +- .../config/entities/ha-config-entities.ts | 14 ++-- .../config-entry/ha-config-entry-page.ts | 13 ++-- .../ha-config-entries-dashboard.ts | 6 +- src/panels/config/scene/ha-scene-editor.ts | 10 +-- src/panels/config/script/ha-script-editor.ts | 24 +++--- src/panels/config/users/ha-user-editor.ts | 71 ++++++++++-------- .../event/developer-tools-event.js | 9 ++- .../service/developer-tools-service.js | 10 +-- .../state/developer-tools-state.js | 9 ++- src/panels/lovelace/editor/delete-card.ts | 9 ++- .../editor/view-editor/hui-edit-view.ts | 17 ++++- src/panels/lovelace/hui-editor.ts | 33 +++++---- src/panels/lovelace/hui-root.ts | 5 +- .../ha-long-lived-access-tokens-card.js | 17 +++-- src/panels/profile/ha-panel-profile.ts | 4 +- src/translations/en.json | 4 +- 24 files changed, 318 insertions(+), 180 deletions(-) delete mode 100644 src/dialogs/confirmation/show-dialog-confirmation.ts rename src/dialogs/{confirmation/dialog-confirmation.ts => generic/dialog-box.ts} (51%) create mode 100644 src/dialogs/generic/show-dialog-box.ts diff --git a/src/components/buttons/ha-call-service-button.js b/src/components/buttons/ha-call-service-button.js index cd229a772f..c8d7b79b56 100644 --- a/src/components/buttons/ha-call-service-button.js +++ b/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 diff --git a/src/dialogs/config-flow/step-flow-create-entry.ts b/src/dialogs/config-flow/step-flow-create-entry.ts index 9fe62ffd2b..07cad8a94a 100644 --- a/src/dialogs/config-flow/step-flow-create-entry.ts +++ b/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 {
${this.devices.length > 0 ? html` - ${localize( "ui.panel.config.integrations.config_flow.add_area" )} this._addArea(text), + }); + } + private async _handleAreaChanged(ev: Event) { const dropdown = ev.currentTarget as any; const device = dropdown.device; diff --git a/src/dialogs/confirmation/show-dialog-confirmation.ts b/src/dialogs/confirmation/show-dialog-confirmation.ts deleted file mode 100644 index df57cf5558..0000000000 --- a/src/dialogs/confirmation/show-dialog-confirmation.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { fireEvent } from "../../common/dom/fire_event"; - -export interface ConfirmationDialogParams { - title?: string; - text: string; - confirmBtnText?: string; - cancelBtnText?: string; - confirm: () => void; -} - -export const loadConfirmationDialog = () => - import(/* webpackChunkName: "confirmation" */ "./dialog-confirmation"); - -export const showConfirmationDialog = ( - element: HTMLElement, - systemLogDetailParams: ConfirmationDialogParams -): void => { - fireEvent(element, "show-dialog", { - dialogTag: "dialog-confirmation", - dialogImport: loadConfirmationDialog, - dialogParams: systemLogDetailParams, - }); -}; diff --git a/src/dialogs/confirmation/dialog-confirmation.ts b/src/dialogs/generic/dialog-box.ts similarity index 51% rename from src/dialogs/confirmation/dialog-confirmation.ts rename to src/dialogs/generic/dialog-box.ts index 2ef6003b54..0738239257 100644 --- a/src/dialogs/confirmation/dialog-confirmation.ts +++ b/src/dialogs/generic/dialog-box.ts @@ -14,17 +14,21 @@ 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 { + public async showDialog(params: DialogParams): Promise { this._params = params; + if (params.prompt) { + this._value = params.defaultValue; + } } protected render(): TemplateResult | void { @@ -32,6 +36,8 @@ class DialogConfirmation extends LitElement { return html``; } + const confirmPrompt = this._params.confirmation || this._params.prompt; + return html` ${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" + )} -

${this._params.text}

+ ${this._params.text + ? html` +

${this._params.text}

+ ` + : ""} + ${this._params.prompt + ? html` + + ` + : ""}
- - ${this._params.cancelBtnText - ? this._params.cancelBtnText - : this.hass.localize("ui.dialogs.confirmation.cancel")} - + ${confirmPrompt && + html` + + ${this._params.dismissText + ? this._params.dismissText + : this.hass.localize("ui.dialogs.generic.cancel")} + + `} - ${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")}
`; } + private _valueChanged(ev: PolymerChangedEvent) { + this._value = ev.detail.value; + } + private async _dismiss(): Promise { + if (this._params!.cancel) { + this._params!.cancel(); + } this._params = undefined; } private async _confirm(): Promise { - 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; } } diff --git a/src/dialogs/generic/show-dialog-box.ts b/src/dialogs/generic/show-dialog-box.ts new file mode 100644 index 0000000000..bd88af81b6 --- /dev/null +++ b/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 }, + }); +}; diff --git a/src/dialogs/more-info/more-info-controls.js b/src/dialogs/more-info/more-info-controls.js index 65c24a5846..c4ff5e4f6f 100644 --- a/src/dialogs/more-info/more-info-controls.js +++ b/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), }); diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 51980e7c88..832d9116ea 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/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} > `} @@ -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,8 +330,8 @@ 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 { @@ -335,14 +339,18 @@ export class HaAutomationEditor extends LitElement { } } + 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(); } diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts index 6806f5c6d1..24540bb38b 100644 --- a/src/panels/config/entities/entity-registry-settings.ts +++ b/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") diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index ea9fdd0b2e..ae39bd03a2 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -45,7 +45,7 @@ import { HaDataTable, DataTableColumnData, } from "../../../components/data-table/ha-data-table"; -import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialog-confirmation"; +import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import { DialogEntityRegistryDetail } from "./dialog-entity-registry-detail"; @@ -410,8 +410,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { text: this.hass.localize( "ui.panel.config.entities.picker.enable_selected.confirm_text" ), - 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: () => { this._selectedEntities.forEach((entity) => updateEntityRegistryEntry(this.hass, entity, { @@ -433,8 +433,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { text: this.hass.localize( "ui.panel.config.entities.picker.disable_selected.confirm_text" ), - 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: () => { this._selectedEntities.forEach((entity) => updateEntityRegistryEntry(this.hass, entity, { @@ -460,8 +460,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { text: this.hass.localize( "ui.panel.config.entities.picker.remove_selected.confirm_text" ), - 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: () => { removeableEntities.forEach((entity) => removeEntityRegistryEntry(this.hass, entity) diff --git a/src/panels/config/integrations/config-entry/ha-config-entry-page.ts b/src/panels/config/integrations/config-entry/ha-config-entry-page.ts index 3dc2dbb3b6..bc2923aed4 100755 --- a/src/panels/config/integrations/config-entry/ha-config-entry-page.ts +++ b/src/panels/config/integrations/config-entry/ha-config-entry-page.ts @@ -17,7 +17,10 @@ import { DeviceRegistryEntry } from "../../../../data/device_registry"; import { AreaRegistryEntry } from "../../../../data/area_registry"; import { fireEvent } from "../../../../common/dom/fire_event"; import { showConfigEntrySystemOptionsDialog } from "../../../../dialogs/config-entry-system-options/show-dialog-config-entry-system-options"; -import { showConfirmationDialog } from "../../../../dialogs/confirmation/show-dialog-confirmation"; +import { + showAlertDialog, + showConfirmationDialog, +} from "../../../../dialogs/generic/show-dialog-box"; class HaConfigEntryPage extends LitElement { @property() public hass!: HomeAssistant; @@ -177,11 +180,11 @@ class HaConfigEntryPage extends LitElement { deleteConfigEntry(this.hass, this.configEntryId).then((result) => { fireEvent(this, "hass-reload-entries"); if (result.require_restart) { - alert( - this.hass.localize( + showAlertDialog(this, { + text: this.hass.localize( "ui.panel.config.integrations.config_entry.restart_confirm" - ) - ); + ), + }); } navigate(this, "/config/integrations/dashboard", true); }); diff --git a/src/panels/config/integrations/ha-config-entries-dashboard.ts b/src/panels/config/integrations/ha-config-entries-dashboard.ts index 66fcb0a940..c846648e96 100644 --- a/src/panels/config/integrations/ha-config-entries-dashboard.ts +++ b/src/panels/config/integrations/ha-config-entries-dashboard.ts @@ -43,7 +43,7 @@ import { ConfigEntry, deleteConfigEntry } from "../../../data/config_entries"; import { fireEvent } from "../../../common/dom/fire_event"; import { EntityRegistryEntry } from "../../../data/entity_registry"; import { DataEntryFlowProgress } from "../../../data/data_entry_flow"; -import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialog-confirmation"; +import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; @customElement("ha-config-entries-dashboard") export class HaConfigManagerDashboard extends LitElement { @@ -277,7 +277,7 @@ export class HaConfigManagerDashboard extends LitElement { text: this.hass!.localize( "ui.panel.config.integrations.ignore.confirm_ignore" ), - confirmBtnText: this.hass!.localize( + confirmText: this.hass!.localize( "ui.panel.config.integrations.ignore.ignore" ), confirm: () => { @@ -302,7 +302,7 @@ export class HaConfigManagerDashboard extends LitElement { text: this.hass!.localize( "ui.panel.config.integrations.ignore.confirm_delete_ignore" ), - confirmBtnText: this.hass!.localize( + confirmText: this.hass!.localize( "ui.panel.config.integrations.ignore.stop_ignore" ), confirm: async () => { diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index 9e1e232a72..02536b87a6 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -54,7 +54,7 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import memoizeOne from "memoize-one"; import { computeDomain } from "../../../common/entity/compute_domain"; import { HassEvent } from "home-assistant-js-websocket"; -import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialog-confirmation"; +import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; interface DeviceEntities { id: string; @@ -560,8 +560,8 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { text: this.hass!.localize( "ui.panel.config.scene.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: () => this._goBack(), }); } else { @@ -577,8 +577,8 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { private _deleteTapped(): void { showConfirmationDialog(this, { text: this.hass!.localize("ui.panel.config.scene.picker.delete_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: () => this._delete(), }); } diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 9787783706..bdf8e7a92b 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -22,7 +22,7 @@ import { ScriptConfig, deleteScript, } from "../../../data/script"; -import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialog-confirmation"; +import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; import "../../../layouts/ha-app-layout"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; @@ -61,7 +61,7 @@ export class HaScriptEditor extends LitElement { "ui.panel.config.script.editor.delete_script" )}" icon="hass:delete" - @click=${this._delete} + @click=${this._deleteConfirm} > `} @@ -228,8 +228,8 @@ export class HaScriptEditor extends LitElement { text: this.hass!.localize( "ui.panel.config.common.editor.confirm_unsaved" ), - 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 { @@ -237,14 +237,16 @@ export class HaScriptEditor extends LitElement { } } + private async _deleteConfirm() { + showConfirmationDialog(this, { + text: this.hass.localize("ui.panel.config.script.editor.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.script.editor.delete_confirm") - ) - ) { - return; - } await deleteScript(this.hass, computeObjectId(this.script.entity_id)); history.back(); } diff --git a/src/panels/config/users/ha-user-editor.ts b/src/panels/config/users/ha-user-editor.ts index f45f8a08c5..344a5a462e 100644 --- a/src/panels/config/users/ha-user-editor.ts +++ b/src/panels/config/users/ha-user-editor.ts @@ -24,6 +24,11 @@ import { SYSTEM_GROUP_ID_ADMIN, } from "../../../data/user"; import { showSaveSuccessToast } from "../../../util/toast-saved-success"; +import { + showAlertDialog, + showConfirmationDialog, + showPromptDialog, +} from "../../../dialogs/generic/show-dialog-box"; declare global { interface HASSDomEvents { @@ -106,12 +111,12 @@ class HaUserEditor extends LitElement {
- + ${hass.localize("ui.panel.config.users.editor.rename_user")} ${hass.localize("ui.panel.config.users.editor.delete_user")} @@ -137,12 +142,7 @@ class HaUserEditor extends LitElement { ); } - private async _handleRenameUser(ev): Promise { - ev.currentTarget.blur(); - const newName = prompt( - this.hass!.localize("ui.panel.config.users.editor.enter_new_name"), - this.user!.name - ); + private async _handleRenameUser(newName?: string) { if (newName === null || newName === this.user!.name) { return; } @@ -153,14 +153,24 @@ class HaUserEditor extends LitElement { }); fireEvent(this, "reload-users"); } catch (err) { - alert( - `${this.hass!.localize( + showAlertDialog(this, { + text: `${this.hass!.localize( "ui.panel.config.users.editor.user_rename_failed" - )} ${err.message}` - ); + )} ${err.message}`, + }); } } + private async _handlePromptRenameUser(ev): Promise { + ev.currentTarget.blur(); + showPromptDialog(this, { + title: this.hass!.localize("ui.panel.config.users.editor.enter_new_name"), + defaultValue: this.user!.name, + inputLabel: this.hass!.localize("ui.panel.config.users.add_user.name"), + confirm: (text) => this._handleRenameUser(text), + }); + } + private async _handleGroupChange(ev): Promise { const selectEl = ev.currentTarget as HTMLSelectElement; const newGroup = selectEl.value; @@ -171,38 +181,39 @@ class HaUserEditor extends LitElement { showSaveSuccessToast(this, this.hass!); fireEvent(this, "reload-users"); } catch (err) { - alert( - `${this.hass!.localize( + showAlertDialog(this, { + text: `${this.hass!.localize( "ui.panel.config.users.editor.group_update_failed" - )} ${err.message}` - ); + )} ${err.message}`, + }); selectEl.value = this.user!.group_ids[0]; } } - private async _deleteUser(ev): Promise { - if ( - !confirm( - this.hass!.localize( - "ui.panel.config.users.editor.confirm_user_deletion", - "name", - this._name - ) - ) - ) { - ev.target.blur(); - return; - } + private async _deleteUser() { try { await deleteUser(this.hass!, this.user!.id); } catch (err) { - alert(err.code); + showAlertDialog(this, { + text: err.code, + }); return; } fireEvent(this, "reload-users"); navigate(this, "/config/users"); } + private async _promptDeleteUser(_ev): Promise { + showConfirmationDialog(this, { + text: this.hass!.localize( + "ui.panel.config.users.editor.confirm_user_deletion", + "name", + this._name + ), + confirm: () => this._deleteUser(), + }); + } + static get styles(): CSSResultArray { return [ haStyle, diff --git a/src/panels/developer-tools/event/developer-tools-event.js b/src/panels/developer-tools/event/developer-tools-event.js index 074fcb6851..5ec02485da 100644 --- a/src/panels/developer-tools/event/developer-tools-event.js +++ b/src/panels/developer-tools/event/developer-tools-event.js @@ -12,6 +12,7 @@ import "./events-list"; import "./event-subscribe-card"; import { EventsMixin } from "../../../mixins/events-mixin"; import LocalizeMixin from "../../../mixins/localize-mixin"; +import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; const ERROR_SENTINEL = {}; /* @@ -154,11 +155,11 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) { fireEvent() { if (!this.eventType) { - alert( - this.hass.localize( + showAlertDialog(this, { + text: this.hass.localize( "ui.panel.developer-tools.tabs.events.alert_event_type" - ) - ); + ), + }); return; } this.hass.callApi("POST", "events/" + this.eventType, this.parsedJSON).then( diff --git a/src/panels/developer-tools/service/developer-tools-service.js b/src/panels/developer-tools/service/developer-tools-service.js index b9bb843422..f4a057f910 100644 --- a/src/panels/developer-tools/service/developer-tools-service.js +++ b/src/panels/developer-tools/service/developer-tools-service.js @@ -11,6 +11,7 @@ import "../../../components/ha-service-picker"; import "../../../resources/ha-style"; import "../../../util/app-localstorage-document"; import LocalizeMixin from "../../../mixins/localize-mixin"; +import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; const ERROR_SENTINEL = {}; /* @@ -290,14 +291,13 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) { _callService() { if (this.parsedJSON === ERROR_SENTINEL) { - // eslint-disable-next-line - alert( - this.hass.localize( + showAlertDialog(this, { + text: this.hass.localize( "ui.panel.developer-tools.tabs.services.alert_parsing_yaml", "data", this.serviceData - ) - ); + ), + }); return; } diff --git a/src/panels/developer-tools/state/developer-tools-state.js b/src/panels/developer-tools/state/developer-tools-state.js index 8312f15e34..9cc5fb6bc8 100644 --- a/src/panels/developer-tools/state/developer-tools-state.js +++ b/src/panels/developer-tools/state/developer-tools-state.js @@ -11,6 +11,7 @@ import "../../../components/ha-code-editor"; import "../../../resources/ha-style"; import { EventsMixin } from "../../../mixins/events-mixin"; import LocalizeMixin from "../../../mixins/localize-mixin"; +import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; const ERROR_SENTINEL = {}; /* @@ -257,11 +258,11 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) { handleSetState() { if (!this._entityId) { - alert( - this.hass.localize( + showAlertDialog(this, { + text: this.hass.localize( "ui.panel.developer-tools.tabs.states.alert_entity_field" - ) - ); + ), + }); return; } this.hass.callApi("POST", "states/" + this._entityId, { diff --git a/src/panels/lovelace/editor/delete-card.ts b/src/panels/lovelace/editor/delete-card.ts index 0a84fb542a..0d7baad0f5 100644 --- a/src/panels/lovelace/editor/delete-card.ts +++ b/src/panels/lovelace/editor/delete-card.ts @@ -1,6 +1,9 @@ import { Lovelace } from "../types"; import { deleteCard } from "./config-util"; -import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialog-confirmation"; +import { + showAlertDialog, + showConfirmationDialog, +} from "../../../dialogs/generic/show-dialog-box"; import { HomeAssistant } from "../../../types"; export async function confDeleteCard( @@ -15,7 +18,9 @@ export async function confDeleteCard( try { await lovelace.saveConfig(deleteCard(lovelace.config, path)); } catch (err) { - alert(`Deleting failed: ${err.message}`); + showAlertDialog(element, { + text: `Deleting failed: ${err.message}`, + }); } }, }); diff --git a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts index 223d9fd0c8..b8d6cfdda1 100644 --- a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts +++ b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts @@ -34,7 +34,10 @@ import { processEditorEntities } from "../process-editor-entities"; import { navigate } from "../../../../common/navigate"; import { Lovelace } from "../../types"; import { deleteView, addView, replaceView } from "../config-util"; -import { showConfirmationDialog } from "../../../../dialogs/confirmation/show-dialog-confirmation"; +import { + showAlertDialog, + showConfirmationDialog, +} from "../../../../dialogs/generic/show-dialog-box"; @customElement("hui-edit-view") export class HuiEditView extends LitElement { @@ -179,13 +182,17 @@ export class HuiEditView extends LitElement { this._closeDialog(); navigate(this, `/lovelace/0`); } catch (err) { - alert(`Deleting failed: ${err.message}`); + showAlertDialog(this, { + text: `Deleting failed: ${err.message}`, + }); } } private _deleteConfirm(): void { if (this._cards && this._cards.length > 0) { - alert(this.hass!.localize("ui.panel.lovelace.views.existing_cards")); + showAlertDialog(this, { + text: this.hass!.localize("ui.panel.lovelace.views.existing_cards"), + }); return; } @@ -243,7 +250,9 @@ export class HuiEditView extends LitElement { ); this._closeDialog(); } catch (err) { - alert(`Saving failed: ${err.message}`); + showAlertDialog(this, { + text: `Saving failed: ${err.message}`, + }); } finally { this._saving = false; } diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts index a82154550b..a226240285 100644 --- a/src/panels/lovelace/hui-editor.ts +++ b/src/panels/lovelace/hui-editor.ts @@ -29,7 +29,10 @@ import { HaCodeEditor } from "../../components/ha-code-editor"; import { HomeAssistant } from "../../types"; import { computeRTL } from "../../common/util/compute_rtl"; import { LovelaceConfig } from "../../data/lovelace"; -import { showConfirmationDialog } from "../../dialogs/confirmation/show-dialog-confirmation"; +import { + showAlertDialog, + showConfirmationDialog, +} from "../../dialogs/generic/show-dialog-box"; const lovelaceStruct = struct.interface({ title: "string?", @@ -213,8 +216,8 @@ class LovelaceFullConfigEditor extends LitElement { text: this.hass.localize( "ui.panel.lovelace.editor.raw_editor.confirm_remove_config_text" ), - 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: () => this._removeConfig(), }); return; @@ -236,38 +239,38 @@ class LovelaceFullConfigEditor extends LitElement { try { config = safeLoad(value); } catch (err) { - alert( - this.hass.localize( + showAlertDialog(this, { + text: this.hass.localize( "ui.panel.lovelace.editor.raw_editor.error_parse_yaml", "error", err - ) - ); + ), + }); this._saving = false; return; } try { config = lovelaceStruct(config); } catch (err) { - alert( - this.hass.localize( + showAlertDialog(this, { + text: this.hass.localize( "ui.panel.lovelace.editor.raw_editor.error_invalid_config", "error", err - ) - ); + ), + }); return; } try { await this.lovelace!.saveConfig(config); } catch (err) { - alert( - this.hass.localize( + showAlertDialog(this, { + text: this.hass.localize( "ui.panel.lovelace.editor.raw_editor.error_save_yaml", "error", err - ) - ); + ), + }); } this._generation = this.yamlEditor .codemirror!.getDoc() diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index c59b17a4f4..296c86c57f 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -50,6 +50,7 @@ import { computeRTLDirection } from "../../common/util/compute_rtl"; import { loadLovelaceResources } from "./common/load-resources"; import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog"; import { isComponentLoaded } from "../../common/config/is_component_loaded"; +import { showAlertDialog } from "../../dialogs/generic/show-dialog-box"; import memoizeOne from "memoize-one"; class HUIRoot extends LitElement { @@ -580,7 +581,9 @@ class HUIRoot extends LitElement { private _editModeEnable(): void { if (this._yamlMode) { - window.alert("The edit UI is not available when in YAML mode."); + showAlertDialog(this, { + text: "The edit UI is not available when in YAML mode.", + }); return; } this.lovelace!.setEditMode(true); diff --git a/src/panels/profile/ha-long-lived-access-tokens-card.js b/src/panels/profile/ha-long-lived-access-tokens-card.js index fb41469405..68244c8d36 100644 --- a/src/panels/profile/ha-long-lived-access-tokens-card.js +++ b/src/panels/profile/ha-long-lived-access-tokens-card.js @@ -10,6 +10,7 @@ import "../../components/ha-card"; import "../../resources/ha-style"; import "./ha-settings-row"; +import { showAlertDialog } from "../../dialogs/generic/show-dialog-box"; /* * @appliesMixin EventsMixin @@ -121,9 +122,11 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) { } catch (err) { // eslint-disable-next-line console.error(err); - alert( - this.localize("ui.panel.profile.long_lived_access_tokens.create_failed") - ); + showAlertDialog(this, { + text: this.localize( + "ui.panel.profile.long_lived_access_tokens.create_failed" + ), + }); } } @@ -148,9 +151,11 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) { } catch (err) { // eslint-disable-next-line console.error(err); - alert( - this.localize("ui.panel.profile.long_lived_access_tokens.delete_failed") - ); + showAlertDialog(this, { + text: this.localize( + "ui.panel.profile.long_lived_access_tokens.delete_failed" + ), + }); } } } diff --git a/src/panels/profile/ha-panel-profile.ts b/src/panels/profile/ha-panel-profile.ts index 69a6d85c74..11597415d9 100644 --- a/src/panels/profile/ha-panel-profile.ts +++ b/src/panels/profile/ha-panel-profile.ts @@ -35,7 +35,7 @@ import { haStyle } from "../../resources/styles"; import { HomeAssistant } from "../../types"; import { fireEvent } from "../../common/dom/fire_event"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { showConfirmationDialog } from "../../dialogs/confirmation/show-dialog-confirmation"; +import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box"; class HaPanelProfile extends LitElement { @property() public hass!: HomeAssistant; @@ -175,7 +175,7 @@ class HaPanelProfile extends LitElement { showConfirmationDialog(this, { title: this.hass.localize("ui.panel.profile.logout_title"), text: this.hass.localize("ui.panel.profile.logout_text"), - confirmBtnText: this.hass.localize("ui.panel.profile.logout"), + confirmText: this.hass.localize("ui.panel.profile.logout"), confirm: () => fireEvent(this, "hass-logout"), }); } diff --git a/src/translations/en.json b/src/translations/en.json index d0ed95965e..a12d2c0944 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -577,10 +577,10 @@ "label": "Type a question and press 'Enter'", "label_voice": "Type and press 'Enter' or tap the microphone to speak" }, - "confirmation": { + "generic": { "cancel": "Cancel", "ok": "OK", - "title": "Are you sure?" + "default_confirmation_title": "Are you sure?" }, "more_info_control": { "dismiss": "Dismiss dialog",