From 5e75f6a6c27ef94bf3bbb47aca8537eccae25ed2 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Fri, 2 Aug 2024 03:28:37 -0700
Subject: [PATCH] Add a destructive confirmation when deleting a
 picture-elements element (#21541)

---
 .../hui-picture-elements-card-row-editor.ts   | 30 +++++++++++++++----
 src/translations/en.json                      |  1 +
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts b/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts
index 8c3d20e772..baebcbbc19 100644
--- a/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts
+++ b/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts
@@ -8,6 +8,7 @@ import "../../../components/ha-svg-icon";
 import { HomeAssistant } from "../../../types";
 import "../../../components/ha-select";
 import type { HaSelect } from "../../../components/ha-select";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import {
   ConditionalElementConfig,
   IconElementConfig,
@@ -77,7 +78,7 @@ export class HuiPictureElementsCardRowEditor extends LitElement {
                   `
                 : nothing}
               <ha-icon-button
-                .label=${this.hass!.localize("ui.common.clear")}
+                .label=${this.hass!.localize("ui.common.delete")}
                 .path=${mdiClose}
                 class="remove-icon"
                 .index=${index}
@@ -187,11 +188,28 @@ export class HuiPictureElementsCardRowEditor extends LitElement {
 
   private _removeRow(ev: CustomEvent): void {
     const index = (ev.currentTarget as any).index;
-    const newElements = this.elements!.concat();
-
-    newElements.splice(index, 1);
-
-    fireEvent(this, "elements-changed", { elements: newElements });
+    const element = this.elements?.[index];
+    if (!element) {
+      return;
+    }
+    showConfirmationDialog(this, {
+      text: this.hass!.localize(
+        "ui.panel.lovelace.editor.card.picture-elements.confirm_delete_element",
+        {
+          type:
+            this.hass!.localize(
+              `ui.panel.lovelace.editor.card.picture-elements.element_types.${element.type}`
+            ) || element.type,
+        }
+      ),
+      confirmText: this.hass!.localize("ui.common.delete"),
+      destructive: true,
+      confirm: () => {
+        const newElements = this.elements!.concat();
+        newElements.splice(index, 1);
+        fireEvent(this, "elements-changed", { elements: newElements });
+      },
+    });
   }
 
   private _editRow(ev: CustomEvent): void {
diff --git a/src/translations/en.json b/src/translations/en.json
index 135f06cfea..4adab28703 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -5990,6 +5990,7 @@
               "card_options": "Card Options",
               "elements": "Elements",
               "new_element": "Add new element",
+              "confirm_delete_element": "Are you sure you want to delete the {type} element?",
               "dark_mode_image": "Dark mode image path",
               "state_filter": "State filter",
               "dark_mode_filter": "Dark mode state filter",