Use undo notification when deleting a card or badge (#22414)

* Use undo notification instead of confirmation dialog for cards and badges

* Fix notifications

* Improve deletion functions

* Fix errors

* Fix startup notifications

* Add translation and simplify delete method

* Apply suggestions from code review

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

* Prettier

* Update src/panels/lovelace/editor/delete-badge.ts

---------

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

cast/src/receiver/layout/hc-lovelace.ts

@@ -45,6 +45,7 @@ class HcLovelace extends LitElement {
       saveConfig: async () => undefined,
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,
+      showToast: () => undefined,
     };
     return html`
       <hui-view

src/managers/notification-manager.ts

@@ -1,13 +1,15 @@
-import { html, LitElement, nothing } from "lit";
-import { property, state, query } from "lit/decorators";
 import { mdiClose } from "@mdi/js";
+import { html, LitElement, nothing } from "lit";
+import { property, query, state } from "lit/decorators";
 import { computeRTL } from "../common/util/compute_rtl";
+import "../components/ha-button";
 import "../components/ha-toast";
 import type { HaToast } from "../components/ha-toast";
 import type { HomeAssistant } from "../types";
-import "../components/ha-button";
 
 export interface ShowToastParams {
+  // Unique ID for the toast. If a new toast is shown with the same ID as the previous toast, it will be replaced to avoid flickering.
+  id?: string;
   message: string;
   action?: ToastActionParams;
   duration?: number;
@@ -27,12 +29,12 @@ class NotificationManager extends LitElement {
   @query("ha-toast") private _toast!: HaToast | undefined;
 
   public async showDialog(parameters: ShowToastParams) {
-    if (this._parameters && this._parameters.message !== parameters.message) {
-      this._parameters = undefined;
-      await this.updateComplete;
+    if (!parameters.id || this._parameters?.id !== parameters.id) {
+      this._toast?.close();
     }
 
     if (!parameters || parameters.duration === 0) {
+      this._parameters = undefined;
       return;
     }
 
@@ -44,10 +46,9 @@ class NotificationManager extends LitElement {
     ) {
       this._parameters.duration = 4000;
     }
-  }
 
-  public shouldUpdate(changedProperties) {
-    return !this._toast || changedProperties.has("_parameters");
+    await this.updateComplete;
+    this._toast?.show();
   }
 
   private _toastClosed() {
@@ -61,7 +62,6 @@ class NotificationManager extends LitElement {
     return html`
       <ha-toast
         leading
-        open
         dir=${computeRTL(this.hass) ? "rtl" : "ltr"}
         .labelText=${this._parameters.message}
         .timeoutMs=${this._parameters.duration!}
@@ -77,12 +77,14 @@ class NotificationManager extends LitElement {
             `
           : nothing}
         ${this._parameters?.dismissable
-          ? html`<ha-icon-button
-              .label=${this.hass.localize("ui.common.close")}
-              .path=${mdiClose}
-              dialogAction="close"
-              slot="dismiss"
-            ></ha-icon-button>`
+          ? html`
+              <ha-icon-button
+                .label=${this.hass.localize("ui.common.close")}
+                .path=${mdiClose}
+                dialogAction="close"
+                slot="dismiss"
+              ></ha-icon-button>
+            `
           : nothing}
       </ha-toast>
     `;

src/panels/energy/ha-panel-energy.ts

@@ -131,6 +131,7 @@ class PanelEnergy extends LitElement {
       saveConfig: async () => undefined,
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,
+      showToast: () => undefined,
     };
   }
 

src/panels/lovelace/components/hui-badge-edit-mode.ts

@@ -206,7 +206,7 @@ export class HuiBadgeEditMode extends LitElement {
 
   private _cutBadge(): void {
     this._copyBadge();
-    this._deleteBadge();
+    fireEvent(this, "ll-delete-badge", { path: this.path!, silent: true });
   }
 
   private _copyBadge(): void {
@@ -232,7 +232,7 @@ export class HuiBadgeEditMode extends LitElement {
   }
 
   private _deleteBadge(): void {
-    fireEvent(this, "ll-delete-badge", { path: this.path! });
+    fireEvent(this, "ll-delete-badge", { path: this.path!, silent: false });
   }
 
   static get styles(): CSSResultGroup {

src/panels/lovelace/components/hui-card-edit-mode.ts

@@ -199,7 +199,7 @@ export class HuiCardEditMode extends LitElement {
         this._cutCard();
         break;
       case 4:
-        this._deleteCard(true);
+        this._deleteCard();
         break;
     }
   }
@@ -222,7 +222,7 @@ export class HuiCardEditMode extends LitElement {
 
   private _cutCard(): void {
     this._copyCard();
-    this._deleteCard(false);
+    fireEvent(this, "ll-delete-card", { path: this.path!, silent: true });
   }
 
   private _copyCard(): void {
@@ -231,8 +231,8 @@ export class HuiCardEditMode extends LitElement {
     this._clipboard = deepClone(cardConfig);
   }
 
-  private _deleteCard(confirm: boolean): void {
-    fireEvent(this, "ll-delete-card", { path: this.path!, confirm });
+  private _deleteCard(): void {
+    fireEvent(this, "ll-delete-card", { path: this.path!, silent: false });
   }
 
   static get styles(): CSSResultGroup {

src/panels/lovelace/components/hui-card-options.ts

@@ -274,7 +274,7 @@ export class HuiCardOptions extends LitElement {
         this._cutCard();
         break;
       case 4:
-        this._deleteCard(true);
+        this._deleteCard({ silent: false });
         break;
     }
   }
@@ -297,7 +297,7 @@ export class HuiCardOptions extends LitElement {
 
   private _cutCard(): void {
     this._copyCard();
-    this._deleteCard(false);
+    this._deleteCard({ silent: true });
   }
 
   private _copyCard(): void {
@@ -395,8 +395,8 @@ export class HuiCardOptions extends LitElement {
     });
   }
 
-  private _deleteCard(confirm: boolean): void {
-    fireEvent(this, "ll-delete-card", { path: this.path!, confirm });
+  private _deleteCard({ silent }: { silent: boolean }): void {
+    fireEvent(this, "ll-delete-card", { path: this.path!, silent });
   }
 }
 

src/panels/lovelace/editor/delete-badge.ts

@@ -0,0 +1,39 @@
+import type { HomeAssistant } from "../../../types";
+import { Lovelace } from "../types";
+import { deleteBadge } from "./config-util";
+import type { LovelaceCardPath } from "./lovelace-path";
+
+export type DeleteBadgeParams = { path: LovelaceCardPath; silent: boolean };
+
+export async function performDeleteBadge(
+  hass: HomeAssistant,
+  lovelace: Lovelace,
+  params: DeleteBadgeParams
+): Promise<void> {
+  try {
+    const { path, silent } = params;
+    const oldConfig = lovelace.config;
+    const newConfig = deleteBadge(oldConfig, path);
+    await lovelace.saveConfig(newConfig);
+
+    if (silent) {
+      return;
+    }
+
+    const action = async () => {
+      lovelace.saveConfig(oldConfig);
+    };
+
+    lovelace.showToast({
+      message: hass.localize("ui.common.successfully_deleted"),
+      duration: 8000,
+      action: { action, text: hass.localize("ui.common.undo") },
+    });
+  } catch (err: any) {
+    // eslint-disable-next-line no-console
+    console.error(err);
+    lovelace.showToast({
+      message: hass.localize("ui.common.deleting_failed"),
+    });
+  }
+}

src/panels/lovelace/editor/delete-card.ts

@@ -1,44 +1,39 @@
-import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../../../types";
-import { showDeleteSuccessToast } from "../../../util/toast-deleted-success";
 import { Lovelace } from "../types";
-import { showDeleteCardDialog } from "./card-editor/show-delete-card-dialog";
-import { deleteCard, insertCard } from "./config-util";
-import {
-  LovelaceCardPath,
-  findLovelaceContainer,
-  getLovelaceContainerPath,
-  parseLovelaceCardPath,
-} from "./lovelace-path";
+import { deleteCard } from "./config-util";
+import type { LovelaceCardPath } from "./lovelace-path";
 
-export async function confDeleteCard(
-  element: HTMLElement,
+export type DeleteCardParams = { path: LovelaceCardPath; silent: boolean };
+
+export async function performDeleteCard(
   hass: HomeAssistant,
   lovelace: Lovelace,
-  path: LovelaceCardPath
+  params: DeleteCardParams
 ): Promise<void> {
-  const containerPath = getLovelaceContainerPath(path);
-  const { cardIndex } = parseLovelaceCardPath(path);
-  const containerConfig = findLovelaceContainer(lovelace.config, containerPath);
-  if ("strategy" in containerConfig) {
-    throw new Error("Deleting cards in a strategy is not supported.");
+  try {
+    const { path, silent } = params;
+    const oldConfig = lovelace.config;
+    const newConfig = deleteCard(oldConfig, path);
+    await lovelace.saveConfig(newConfig);
+
+    if (silent) {
+      return;
+    }
+
+    const action = async () => {
+      lovelace.saveConfig(oldConfig);
+    };
+
+    lovelace.showToast({
+      message: hass.localize("ui.common.successfully_deleted"),
+      duration: 8000,
+      action: { action, text: hass.localize("ui.common.undo") },
+    });
+  } catch (err: any) {
+    // eslint-disable-next-line no-console
+    console.error(err);
+    lovelace.showToast({
+      message: hass.localize("ui.common.deleting_failed"),
+    });
   }
-  const cardConfig = containerConfig.cards![cardIndex];
-  showDeleteCardDialog(element, {
-    cardConfig,
-    deleteCard: async () => {
-      try {
-        const newLovelace = deleteCard(lovelace.config, path);
-        await lovelace.saveConfig(newLovelace);
-        const action = async () => {
-          await lovelace.saveConfig(insertCard(newLovelace, path, cardConfig));
-        };
-        showDeleteSuccessToast(element, hass!, action);
-      } catch (err: any) {
-        showAlertDialog(element, {
-          text: `Deleting failed: ${err.message}`,
-        });
-      }
-    },
-  });
 }

src/panels/lovelace/ha-panel-lovelace.ts

@@ -23,10 +23,11 @@ import { fetchResources } from "../../data/lovelace/resource";
 import { WindowWithPreloads } from "../../data/preloads";
 import "../../layouts/hass-error-screen";
 import "../../layouts/hass-loading-screen";
+import type { ShowToastParams } from "../../managers/notification-manager";
 import { HomeAssistant, PanelInfo, Route } from "../../types";
 import { showToast } from "../../util/toast";
-import { loadLovelaceResources } from "./common/load-resources";
 import { checkLovelaceConfig } from "./common/check-lovelace-config";
+import { loadLovelaceResources } from "./common/load-resources";
 import { showSaveDialog } from "./editor/show-save-config-dialog";
 import "./hui-root";
 import { generateLovelaceDashboardStrategy } from "./strategies/get-strategy";
@@ -434,6 +435,7 @@ export class LovelacePanel extends LitElement {
           throw err;
         }
       },
+      showToast: (params: ShowToastParams) => showToast(this, params),
     };
   }
 

src/panels/lovelace/sections/hui-section.ts

@@ -20,8 +20,7 @@ import {
 import { createSectionElement } from "../create-element/create-section-element";
 import { showCreateCardDialog } from "../editor/card-editor/show-create-card-dialog";
 import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
-import { deleteCard } from "../editor/config-util";
-import { confDeleteCard } from "../editor/delete-card";
+import { performDeleteCard } from "../editor/delete-card";
 import { parseLovelaceCardPath } from "../editor/lovelace-path";
 import { generateLovelaceSectionStrategy } from "../strategies/get-strategy";
 import type { Lovelace } from "../types";
@@ -257,12 +256,7 @@ export class HuiSection extends ReactiveElement {
     this._layoutElement.addEventListener("ll-delete-card", (ev) => {
       ev.stopPropagation();
       if (!this.lovelace) return;
-      if (ev.detail.confirm) {
-        confDeleteCard(this, this.hass!, this.lovelace!, ev.detail.path);
-      } else {
-        const newLovelace = deleteCard(this.lovelace!.config, ev.detail.path);
-        this.lovelace.saveConfig(newLovelace);
-      }
+      performDeleteCard(this.hass, this.lovelace, ev.detail);
     });
   }
 

src/panels/lovelace/types.ts

@@ -14,6 +14,7 @@ import { LovelaceHeaderFooterConfig } from "./header-footer/types";
 import { LovelaceCardFeatureConfig } from "./card-features/types";
 import { LovelaceElement, LovelaceElementConfig } from "./elements/types";
 import { LovelaceHeadingBadgeConfig } from "./heading-badges/types";
+import type { ShowToastParams } from "../../managers/notification-manager";
 
 declare global {
   // eslint-disable-next-line
@@ -35,6 +36,7 @@ export interface Lovelace {
   setEditMode: (editMode: boolean) => void;
   saveConfig: (newConfig: LovelaceRawConfig) => Promise<void>;
   deleteConfig: () => Promise<void>;
+  showToast: (params: ShowToastParams) => void;
 }
 
 export interface LovelaceBadge extends HTMLElement {

src/panels/lovelace/views/hui-view.ts

@@ -25,8 +25,14 @@ import { showCreateBadgeDialog } from "../editor/badge-editor/show-create-badge-
 import { showEditBadgeDialog } from "../editor/badge-editor/show-edit-badge-dialog";
 import { showCreateCardDialog } from "../editor/card-editor/show-create-card-dialog";
 import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
-import { deleteBadge, deleteCard } from "../editor/config-util";
-import { confDeleteCard } from "../editor/delete-card";
+import {
+  type DeleteBadgeParams,
+  performDeleteBadge,
+} from "../editor/delete-badge";
+import {
+  type DeleteCardParams,
+  performDeleteCard,
+} from "../editor/delete-card";
 import {
   LovelaceCardPath,
   parseLovelaceCardPath,
@@ -43,10 +49,10 @@ declare global {
   interface HASSDomEvents {
     "ll-create-card": { suggested?: string[] } | undefined;
     "ll-edit-card": { path: LovelaceCardPath };
-    "ll-delete-card": { path: LovelaceCardPath; confirm: boolean };
+    "ll-delete-card": DeleteCardParams;
     "ll-create-badge": undefined;
     "ll-edit-badge": { path: LovelaceCardPath };
-    "ll-delete-badge": { path: LovelaceCardPath };
+    "ll-delete-badge": DeleteBadgeParams;
   }
   interface HTMLElementEventMap {
     "ll-create-card": HASSDomEvent<HASSDomEvents["ll-create-card"]>;
@@ -322,12 +328,8 @@ export class HUIView extends ReactiveElement {
       });
     });
     this._layoutElement.addEventListener("ll-delete-card", (ev) => {
-      if (ev.detail.confirm) {
-        confDeleteCard(this, this.hass!, this.lovelace!, ev.detail.path);
-      } else {
-        const newLovelace = deleteCard(this.lovelace!.config, ev.detail.path);
-        this.lovelace.saveConfig(newLovelace);
-      }
+      if (!this.lovelace) return;
+      performDeleteCard(this.hass, this.lovelace, ev.detail);
     });
     this._layoutElement.addEventListener("ll-create-badge", async () => {
       showCreateBadgeDialog(this, {
@@ -345,9 +347,9 @@ export class HUIView extends ReactiveElement {
         badgeIndex: cardIndex,
       });
     });
-    this._layoutElement.addEventListener("ll-delete-badge", (ev) => {
-      const newLovelace = deleteBadge(this.lovelace!.config, ev.detail.path);
-      this.lovelace.saveConfig(newLovelace);
+    this._layoutElement.addEventListener("ll-delete-badge", async (ev) => {
+      if (!this.lovelace) return;
+      performDeleteBadge(this.hass, this.lovelace, ev.detail);
     });
   }
 

src/state/disconnect-toast-mixin.ts

@@ -143,6 +143,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       )[0][0];
 
       showToast(this, {
+        id: "integration_starting",
         message:
           this.hass!.localize("ui.notification_toast.integration_starting", {
             integration: domainToName(this.hass!.localize, integration),

src/translations/en.json

@@ -362,6 +362,7 @@
       "help": "Help",
       "successfully_saved": "Successfully saved",
       "successfully_deleted": "Successfully deleted",
+      "deleting_failed": "Deleting failed",
       "error_required": "Required",
       "copied": "Copied",
       "copied_clipboard": "Copied to clipboard",

src/util/toast-deleted-success.ts

@@ -1,19 +0,0 @@
-import { ShowToastParams } from "../managers/notification-manager";
-import { HomeAssistant } from "../types";
-import { showToast } from "./toast";
-
-export const showDeleteSuccessToast = (
-  el: HTMLElement,
-  hass: HomeAssistant,
-  action?: () => void
-) => {
-  const toastParams: ShowToastParams = {
-    message: hass!.localize("ui.common.successfully_deleted"),
-  };
-
-  if (action) {
-    toastParams.action = { action, text: hass!.localize("ui.common.undo") };
-  }
-
-  showToast(el, toastParams);
-};