From e7a749ef7db5a0449c41411ff2886602e0fd7715 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Mon, 8 Jul 2024 05:13:29 -0700
Subject: [PATCH] Add `title` to stack editor UI (#21328)

Add title to stack editor UI
---
 .../config-elements/hui-grid-card-editor.ts   | 34 +++++--------------
 .../config-elements/hui-stack-card-editor.ts  | 33 ++++++++++++++++++
 src/translations/en.json                      |  2 ++
 3 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-grid-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-grid-card-editor.ts
index 6105a3fa167e..52122938183d 100644
--- a/src/panels/lovelace/editor/config-elements/hui-grid-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-grid-card-editor.ts
@@ -1,4 +1,3 @@
-import { html, nothing } from "lit";
 import { customElement } from "lit/decorators";
 import {
   any,
@@ -11,8 +10,10 @@ import {
   optional,
   string,
 } from "superstruct";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import type { SchemaUnion } from "../../../../components/ha-form/types";
+import type {
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../components/ha-form/types";
 import type { GridCardConfig } from "../../cards/types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { HuiStackCardEditor } from "./hui-stack-card-editor";
@@ -49,35 +50,18 @@ const SCHEMA = [
 
 @customElement("hui-grid-card-editor")
 export class HuiGridCardEditor extends HuiStackCardEditor {
+  protected _schema: readonly HaFormSchema[] = SCHEMA;
+
   public setConfig(config: Readonly<GridCardConfig>): void {
     assert(config, cardConfigStruct);
     this._config = config;
   }
 
-  protected render() {
-    if (!this.hass || !this._config) {
-      return nothing;
-    }
-
-    const data = { square: true, ...this._config };
-
-    return html`
-      <ha-form
-        .hass=${this.hass}
-        .data=${data}
-        .schema=${SCHEMA}
-        .computeLabel=${this._computeLabelCallback}
-        @value-changed=${this._valueChanged}
-      ></ha-form>
-      ${super.render()}
-    `;
-  }
-
-  private _valueChanged(ev: CustomEvent): void {
-    fireEvent(this, "config-changed", { config: ev.detail.value });
+  protected formData(): object {
+    return { square: true, ...this._config };
   }
 
-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) =>
+  protected _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) =>
     this.hass!.localize(`ui.panel.lovelace.editor.card.grid.${schema.name}`);
 }
 
diff --git a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
index 0655f6dddb8b..c5e81164e134 100644
--- a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
@@ -20,6 +20,10 @@ import {
   optional,
   string,
 } from "superstruct";
+import type {
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../components/ha-form/types";
 import { storage } from "../../../../common/decorators/storage";
 import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-button";
@@ -46,6 +50,13 @@ const cardConfigStruct = assign(
   })
 );
 
+const SCHEMA = [
+  {
+    name: "title",
+    selector: { text: {} },
+  },
+] as const;
+
 @customElement("hui-stack-card-editor")
 export class HuiStackCardEditor
   extends LitElement
@@ -71,6 +82,8 @@ export class HuiStackCardEditor
 
   @state() protected _guiModeAvailable? = true;
 
+  protected _schema: readonly HaFormSchema[] = SCHEMA;
+
   @query("hui-card-element-editor")
   protected _cardEditorEl?: HuiCardElementEditor;
 
@@ -83,6 +96,10 @@ export class HuiStackCardEditor
     this._cardEditorEl?.focusYamlEditor();
   }
 
+  protected formData(): object {
+    return this._config!;
+  }
+
   protected render() {
     if (!this.hass || !this._config) {
       return nothing;
@@ -93,6 +110,13 @@ export class HuiStackCardEditor
     const isGuiMode = !this._cardEditorEl || this._GUImode;
 
     return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${this.formData()}
+        .schema=${this._schema}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
       <div class="card-config">
         <div class="toolbar">
           <paper-tabs
@@ -285,6 +309,15 @@ export class HuiStackCardEditor
     }
   }
 
+  protected _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
+  }
+
+  protected _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) =>
+    this.hass!.localize(
+      `ui.panel.lovelace.editor.card.${this._config!.type}.${schema.name}`
+    );
+
   static get styles(): CSSResultGroup {
     return [
       configElementStyle,
diff --git a/src/translations/en.json b/src/translations/en.json
index f73378c16bf4..eb7e855219cc 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -5852,6 +5852,7 @@
             },
             "horizontal-stack": {
               "name": "Horizontal stack",
+              "title": "[%key:ui::panel::lovelace::editor::card::grid::title%]",
               "description": "The Horizontal stack card allows you to stack together multiple cards, so they always sit next to each other in the space of one column."
             },
             "humidifier": {
@@ -5988,6 +5989,7 @@
             },
             "vertical-stack": {
               "name": "Vertical stack",
+              "title": "[%key:ui::panel::lovelace::editor::card::grid::title%]",
               "description": "The Vertical stack card allows you to group multiple cards so they always sit in the same column."
             },
             "weather-forecast": {