From fb8312110b3c4a42ba22032c6e89bf43f6f25f82 Mon Sep 17 00:00:00 2001
From: Charles Garwood <cgarwood@gmail.com>
Date: Fri, 12 Apr 2024 09:49:07 -0400
Subject: [PATCH] Add support for setting label description (#20421)

* Add support for setting label description
---
 gallery/src/pages/components/ha-selector.ts    |  2 ++
 src/components/ha-label-picker.ts              |  2 ++
 src/data/label_registry.ts                     |  2 ++
 .../config/labels/dialog-label-detail.ts       | 18 +++++++++++++++++-
 src/panels/config/labels/ha-config-labels.ts   |  6 ++++++
 5 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts
index 3824d9bb18..0fb6d83263 100644
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -161,12 +161,14 @@ const LABELS: LabelRegistryEntry[] = [
     name: "Energy",
     icon: null,
     color: "yellow",
+    description: null,
   },
   {
     label_id: "entertainment",
     name: "Entertainment",
     icon: "mdi:popcorn",
     color: "blue",
+    description: null,
   },
 ];
 
diff --git a/src/components/ha-label-picker.ts b/src/components/ha-label-picker.ts
index 289b7ba269..fd0239d176 100644
--- a/src/components/ha-label-picker.ts
+++ b/src/components/ha-label-picker.ts
@@ -302,6 +302,7 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
             name: this.hass.localize("ui.components.label-picker.no_match"),
             icon: null,
             color: null,
+            description: null,
           },
         ];
       }
@@ -315,6 +316,7 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
               name: this.hass.localize("ui.components.label-picker.add_new"),
               icon: "mdi:plus",
               color: null,
+              description: null,
             },
           ];
     }
diff --git a/src/data/label_registry.ts b/src/data/label_registry.ts
index ca3512cd93..cc6b318354 100644
--- a/src/data/label_registry.ts
+++ b/src/data/label_registry.ts
@@ -9,12 +9,14 @@ export interface LabelRegistryEntry {
   name: string;
   icon: string | null;
   color: string | null;
+  description: string | null;
 }
 
 export interface LabelRegistryEntryMutableParams {
   name: string;
   icon?: string | null;
   color?: string | null;
+  description?: string | null;
 }
 
 export const fetchLabelRegistry = (conn: Connection) =>
diff --git a/src/panels/config/labels/dialog-label-detail.ts b/src/panels/config/labels/dialog-label-detail.ts
index b0e0638627..bffc5d79c0 100644
--- a/src/panels/config/labels/dialog-label-detail.ts
+++ b/src/panels/config/labels/dialog-label-detail.ts
@@ -7,6 +7,7 @@ import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
 import "../../../components/ha-switch";
 import "../../../components/ha-textfield";
+import "../../../components/ha-textarea";
 import "../../../components/ha-icon-picker";
 import "../../../components/ha-color-picker";
 import { HassDialog } from "../../../dialogs/make-dialog-manager";
@@ -31,6 +32,8 @@ class DialogLabelDetail
 
   @state() private _color!: string;
 
+  @state() private _description!: string;
+
   @state() private _error?: string;
 
   @state() private _params?: LabelDetailDialogParams;
@@ -44,10 +47,12 @@ class DialogLabelDetail
       this._name = this._params.entry.name || "";
       this._icon = this._params.entry.icon || "";
       this._color = this._params.entry.color || "";
+      this._description = this._params.entry.description || "";
     } else {
       this._name = this._params.suggestedName || "";
       this._icon = "";
       this._color = "";
+      this._description = "";
     }
     document.body.addEventListener("keydown", this._handleKeyPress);
   }
@@ -118,6 +123,14 @@ class DialogLabelDetail
                 "ui.panel.config.labels.detail.color"
               )}
             ></ha-color-picker>
+            <ha-textarea
+              .value=${this._description}
+              .configValue=${"description"}
+              @input=${this._input}
+              .label=${this.hass!.localize(
+                "ui.panel.config.labels.detail.description"
+              )}
+            ></ha-textarea>
           </div>
         </div>
         ${this._params.entry && this._params.removeEntry
@@ -169,6 +182,7 @@ class DialogLabelDetail
         name: this._name.trim(),
         icon: this._icon.trim() || null,
         color: this._color.trim() || null,
+        description: this._description.trim() || null,
       };
       if (this._params!.entry) {
         newValue = await this._params!.updateEntry!(values);
@@ -202,12 +216,14 @@ class DialogLabelDetail
         a {
           color: var(--primary-color);
         }
+        ha-textarea,
         ha-textfield,
         ha-icon-picker,
         ha-color-picker {
           display: block;
         }
-        ha-color-picker {
+        ha-color-picker,
+        ha-textarea {
           margin-top: 16px;
         }
       `,
diff --git a/src/panels/config/labels/ha-config-labels.ts b/src/panels/config/labels/ha-config-labels.ts
index f8396ada5e..5e05b468ae 100644
--- a/src/panels/config/labels/ha-config-labels.ts
+++ b/src/panels/config/labels/ha-config-labels.ts
@@ -79,6 +79,12 @@ export class HaConfigLabels extends LitElement {
         sortable: true,
         filterable: true,
         grows: true,
+        template: (label) => html`
+          <div>${label.name}</div>
+          ${label.description
+            ? html`<div class="secondary">${label.description}</div>`
+            : nothing}
+        `,
       },
       actions: {
         title: "",