Automatically add section to empty section view and improve delete wording (#19892)

* Automatically add section to empty section view and improve delete wording

* Update delete dialog

* Update delete dialog

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -4,16 +4,16 @@ import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js";
 import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
-  nothing,
   PropertyValues,
+  css,
+  html,
+  nothing,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { navigate } from "../../../../common/navigate";
 import { deepEqual } from "../../../../common/util/deep-equal";
@@ -23,6 +23,11 @@ import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
+import { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
+import {
+  LovelaceViewConfig,
+  isStrategyView,
+} from "../../../../data/lovelace/config/view";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -33,6 +38,7 @@ import "../../components/hui-entity-editor";
 import {
   DEFAULT_VIEW_LAYOUT,
   PANEL_VIEW_LAYOUT,
+  SECTION_VIEW_LAYOUT,
   VIEWS_NO_BADGE_SUPPORT,
 } from "../../views/const";
 import { addView, deleteView, replaceView } from "../config-util";
@@ -46,12 +52,6 @@ import {
 import "./hui-view-editor";
 import "./hui-view-visibility-editor";
 import { EditViewDialogParams } from "./show-edit-view-dialog";
-import {
-  LovelaceViewConfig,
-  isStrategyView,
-} from "../../../../data/lovelace/config/view";
-import { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
-import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 
 @customElement("hui-dialog-edit-view")
 export class HuiDialogEditView extends LitElement {
@@ -63,8 +63,6 @@ export class HuiDialogEditView extends LitElement {
 
   @state() private _badges?: LovelaceBadgeConfig[];
 
-  @state() private _cards?: LovelaceCardConfig[];
-
   @state() private _saving = false;
 
   @state() private _curTab?: string;
@@ -102,7 +100,6 @@ export class HuiDialogEditView extends LitElement {
     if (this._params.viewIndex === undefined) {
       this._config = {};
       this._badges = [];
-      this._cards = [];
       this._dirty = false;
       return;
     }
@@ -112,13 +109,11 @@ export class HuiDialogEditView extends LitElement {
       const { strategy, ...viewConfig } = view;
       this._config = viewConfig;
       this._badges = [];
-      this._cards = [];
       return;
     }
-    const { cards, badges, ...viewConfig } = view;
+    const { badges, ...viewConfig } = view;
     this._config = viewConfig;
     this._badges = badges ? processEditorEntities(badges) : [];
-    this._cards = cards;
   }
 
   public closeDialog(): void {
@@ -181,7 +176,7 @@ export class HuiDialogEditView extends LitElement {
                           )}
                         </ha-alert>
                       `
-                    : ""}
+                    : nothing}
                   <div class="preview-badges">
                     ${this._badges.map(
                       (badgeConfig) => html`
@@ -193,7 +188,7 @@ export class HuiDialogEditView extends LitElement {
                     )}
                   </div>
                 `
-              : ""}
+              : nothing}
             <hui-entity-editor
               .hass=${this.hass}
               .entities=${this._badges}
@@ -297,7 +292,7 @@ export class HuiDialogEditView extends LitElement {
                   )}</paper-tab
                 >
               </paper-tabs>`
-            : ""}
+            : nothing}
         </ha-dialog-header>
         ${content}
         ${this._params.viewIndex !== undefined
@@ -312,7 +307,7 @@ export class HuiDialogEditView extends LitElement {
                 )}
               </mwc-button>
             `
-          : ""}
+          : nothing}
         <mwc-button
           slot="primaryAction"
           ?disabled=${!this._config || this._saving || !this._dirty}
@@ -324,7 +319,7 @@ export class HuiDialogEditView extends LitElement {
                 size="small"
                 aria-label="Saving"
               ></ha-circular-progress>`
-            : ""}
+            : nothing}
           ${this.hass!.localize("ui.common.save")}</mwc-button
         >
       </ha-dialog>
@@ -361,24 +356,28 @@ export class HuiDialogEditView extends LitElement {
     }
   }
 
-  private _deleteConfirm(): void {
+  private async _deleteConfirm() {
-    showConfirmationDialog(this, {
+    const type = this._config?.sections?.length
-      title: this.hass!.localize(
+      ? "sections"
-        `ui.panel.lovelace.views.confirm_delete${
+      : this._config?.cards?.length
-          this._cards?.length ? `_existing_cards` : ""
+        ? "cards"
-        }`
+        : "only";
-      ),
+
+    const named = this._config?.title ? "named" : "unnamed";
+
+    const confirm = await showConfirmationDialog(this, {
+      title: this.hass!.localize("ui.panel.lovelace.views.delete_title"),
       text: this.hass!.localize(
-        `ui.panel.lovelace.views.confirm_delete${
+        `ui.panel.lovelace.views.delete_${named}_view_${type}`,
-          this._cards?.length ? "_existing_cards" : ""
+        { name: this._config?.title }
-        }_text`,
-        {
-          name: this._config?.title || "Unnamed view",
-          number: this._cards?.length || 0,
-        }
       ),
-      confirm: () => this._delete(),
+      confirmText: this.hass!.localize("ui.common.delete"),
+      destructive: true,
     });
+
+    if (!confirm) return;
+
+    this._delete();
   }
 
   private _handleTabSelected(ev: CustomEvent): void {
@@ -402,9 +401,18 @@ export class HuiDialogEditView extends LitElement {
     const viewConf: LovelaceViewConfig = {
       ...this._config,
       badges: this._badges,
-      cards: this._cards,
     };
 
+    if (viewConf.type === SECTION_VIEW_LAYOUT && !viewConf.sections?.length) {
+      viewConf.sections = [{ cards: [] }];
+    } else if (!viewConf.cards?.length) {
+      viewConf.cards = [];
+    }
+
+    if (!viewConf.badges?.length) {
+      delete viewConf.badges;
+    }
+
     const lovelace = this._params.lovelace!;
 
     try {
@@ -469,7 +477,7 @@ export class HuiDialogEditView extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    const { badges = [], ...config } = ev.detail.value;
+    const { badges, ...config } = ev.detail.value;
     this._config = config;
     this._badges = badges;
     this._dirty = true;

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

@@ -180,38 +180,21 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       path
     ) as LovelaceRawSectionConfig;
 
-    const title = section.title;
+    const title = section.title?.trim();
     const cardCount = section.cards?.length;
 
     if (title || cardCount) {
-      const sectionName = title?.trim()
+      const named = title ? "named" : "unnamed";
-        ? this.hass.localize(
+      const type = cardCount ? "cards" : "only";
-            "ui.panel.lovelace.editor.delete_section.named_section",
-            { name: title }
-          )
-        : this.hass.localize(
-            "ui.panel.lovelace.editor.delete_section.unnamed_section"
-          );
-
-      const content = cardCount
-        ? this.hass.localize(
-            "ui.panel.lovelace.editor.delete_section.text_section_and_cards",
-            {
-              section: sectionName,
-            }
-          )
-        : this.hass.localize(
-            "ui.panel.lovelace.editor.delete_section.text_section_only",
-            {
-              section: sectionName,
-            }
-          );
 
       const confirm = await showConfirmationDialog(this, {
         title: this.hass.localize(
           "ui.panel.lovelace.editor.delete_section.title"
         ),
-        text: content,
+        text: this.hass.localize(
+          `ui.panel.lovelace.editor.delete_section.text_${named}_section_${type}`,
+          { name: title }
+        ),
         confirmText: this.hass.localize("ui.common.delete"),
         destructive: true,
       });

src/translations/en.json

@@ -5026,10 +5026,13 @@
           "saving_failed": "Saving dashboard configuration failed."
         },
         "views": {
-          "confirm_delete": "Delete view?",
+          "delete_title": "Delete view",
-          "confirm_delete_text": "Are you sure you want to delete your ''{name}'' view?",
+          "delete_named_view_only": "''{name}'' view will be deleted.",
-          "confirm_delete_existing_cards": "Deleting this view will also remove the cards",
+          "delete_unnamed_view_only": "This view will be deleted.",
-          "confirm_delete_existing_cards_text": "Are you sure you want to delete your ''{name}'' view? The view contains {number} cards that will be deleted. This action cannot be undone."
+          "delete_named_view_cards": "''{name}'' view and all its cards will be deleted.",
+          "delete_unnamed_view_cards": "This view and all its cards will be deleted.",
+          "delete_named_view_sections": "''{name}'' view and all its sections will be deleted.",
+          "delete_unnamed_view_sections": "This view and all its sections will be deleted."
         },
         "menu": {
           "configure_ui": "Edit dashboard",
@@ -5162,10 +5165,10 @@
           },
           "delete_section": {
             "title": "Delete section",
-            "named_section": "\"{name}\" section",
+            "text_named_section_only": "''{name}'' section will be deleted.",
-            "unnamed_section": "This section",
+            "text_unnamed_section_only": "This section will be deleted.",
-            "text_section_only": "{section} will be deleted.",
+            "text_named_section_cards": "''{name}'' section and all its cards will be deleted.",
-            "text_section_and_cards": "{section} and all its cards will be deleted."
+            "text_unnamed_section_cards": "This section and all its cards will be deleted."
           },
           "edit_section_title": {
             "title": "Edit name",