Automations & Scripts tables: show descriptions

package.json

@@ -127,6 +127,7 @@
     "punycode": "2.3.1",
     "qr-scanner": "1.4.2",
     "qrcode": "1.5.4",
+    "remove-markdown": "0.6.2",
     "roboto-fontface": "0.10.0",
     "rrule": "2.8.1",
     "sortablejs": "patch:sortablejs@npm%3A1.15.6#~/.yarn/patches/sortablejs-npm-1.15.6-3235a8f83b.patch",

src/components/data-table/ha-data-table-labels.ts

@@ -63,7 +63,7 @@ class HaDataTableLabels extends LitElement {
         @click=${clickAction ? this._labelClicked : undefined}
         @keydown=${clickAction ? this._labelClicked : undefined}
         style=${color ? `--color: ${color}` : ""}
-        .description=${label.description}
+        .description=${label.description ?? undefined}
       >
         ${label?.icon
           ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
@@ -94,14 +94,10 @@ class HaDataTableLabels extends LitElement {
   static styles = css`
     :host {
       display: block;
-      flex-grow: 1;
+      flex-shrink: 0;
       margin-top: 4px;
       height: 22px;
     }
-    ha-chip-set {
-      position: fixed;
-      flex-wrap: nowrap;
-    }
     ha-label {
       --ha-label-background-color: var(--color, var(--grey-color));
       --ha-label-background-opacity: 0.5;

src/components/data-table/ha-data-table.ts

@@ -1400,12 +1400,24 @@ export class HaDataTable extends LitElement {
         .center {
           text-align: center;
         }
+
         .secondary {
           color: var(--secondary-text-color);
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
         }
+        .labels-with-text:has(ha-data-table-labels):has(.secondary) {
+          /* used to display labels with a description */
+          display: flex;
+          align-items: center;
+        }
+        .labels-with-text:has(ha-data-table-labels) > .secondary {
+          margin-left: var(--ha-space-2);
+          margin-inline-start: var(--ha-space-2);
+          margin-inline-end: initial;
+        }
+
         .scroller {
           height: calc(100% - 57px);
           overflow: overlay !important;

src/data/entity/entity_description.ts

@@ -0,0 +1,49 @@
+import type { HomeAssistant } from "../../types";
+
+export interface EntityDescription {
+  entity_id: string;
+  description: string | undefined;
+}
+
+export const getEntityDescription = (
+  entity_id: string,
+  descriptions: EntityDescription[]
+): string | undefined => {
+  let description;
+  if (descriptions.length > 0) {
+    const entry = descriptions.find((_entry) => _entry.entity_id === entity_id);
+    if (entry) description = entry.description;
+  }
+  return description;
+};
+
+interface GetEntityConfigFuncResult {
+  config: { description: string | undefined };
+}
+
+type GetEntityConfigFunc = (
+  hass: HomeAssistant,
+  entity_id: string
+) => Promise<GetEntityConfigFuncResult | any>;
+
+export const setEntityDescription = (
+  hass: HomeAssistant,
+  entity_id: string,
+  descriptions: EntityDescription[],
+  getEntityConfigFunc: GetEntityConfigFunc
+) => {
+  getEntityConfigFunc(hass, entity_id).then((result) => {
+    let entry;
+    if (descriptions.length > 0) {
+      entry = descriptions.find((_entry) => _entry.entity_id === entity_id);
+    }
+    if (entry) {
+      entry.description = result.config.description ?? undefined;
+    } else {
+      descriptions.push({
+        entity_id: entity_id,
+        description: result.config.description ?? undefined,
+      });
+    }
+  });
+};

src/panels/config/automation/ha-automation-picker.ts

@@ -25,6 +25,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
+import removeMd from "remove-markdown";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@@ -93,6 +94,11 @@ import type {
   UpdateEntityRegistryEntryResult,
 } from "../../../data/entity/entity_registry";
 import { updateEntityRegistryEntry } from "../../../data/entity/entity_registry";
+import type { EntityDescription } from "../../../data/entity/entity_description";
+import {
+  getEntityDescription,
+  setEntityDescription,
+} from "../../../data/entity/entity_description";
 import type { LabelRegistryEntry } from "../../../data/label/label_registry";
 import {
   createLabelRegistryEntry,
@@ -210,6 +216,8 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     callback: (entries) => entries[0]?.contentRect.width,
   });
 
+  private _fetchedDescriptions: EntityDescription[] = [];
+
   private _automations = memoizeOne(
     (
       automations: AutomationEntity[],
@@ -291,13 +299,25 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           filterable: true,
           direction: "asc",
           flex: 2,
-          extraTemplate: (automation) =>
-            automation.labels.length
+          extraTemplate: (automation) => {
+            const labels = automation.labels.length
               ? html`<ha-data-table-labels
                   @label-clicked=${narrow ? undefined : this._labelClicked}
                   .labels=${automation.labels}
                 ></ha-data-table-labels>`
-              : nothing,
+              : nothing;
+            const description = html`<div class="secondary">
+              ${removeMd(
+                getEntityDescription(
+                  automation.entity_id,
+                  this._fetchedDescriptions
+                ) ?? ""
+              )}
+            </div>`;
+            return html`<div class="labels-with-text">
+              ${labels}${description}
+            </div>`;
+          },
         },
         area: {
           title: localize("ui.panel.config.automation.picker.headers.area"),
@@ -409,6 +429,11 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     ];
   }
 
+  public connectedCallback() {
+    super.connectedCallback();
+    this._fetchDescriptions();
+  }
+
   protected render(): TemplateResult {
     const categoryItems = html`${this._categories?.map(
         (category) =>
@@ -523,6 +548,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
       this._labels,
       this._filteredAutomations
     );
+
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -1213,6 +1239,17 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     }
   };
 
+  private _fetchDescriptions() {
+    this.automations.forEach((automation) =>
+      setEntityDescription(
+        this.hass,
+        automation.entity_id,
+        this._fetchedDescriptions,
+        getAutomationStateConfig
+      )
+    );
+  }
+
   private _showHelp() {
     showAlertDialog(this, {
       title: this.hass.localize("ui.panel.config.automation.caption"),

src/panels/config/script/ha-script-picker.ts

@@ -23,6 +23,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
+import removeMd from "remove-markdown";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@@ -79,6 +80,11 @@ import type {
   UpdateEntityRegistryEntryResult,
 } from "../../../data/entity/entity_registry";
 import { updateEntityRegistryEntry } from "../../../data/entity/entity_registry";
+import type { EntityDescription } from "../../../data/entity/entity_description";
+import {
+  getEntityDescription,
+  setEntityDescription,
+} from "../../../data/entity/entity_description";
 import type { LabelRegistryEntry } from "../../../data/label/label_registry";
 import {
   createLabelRegistryEntry,
@@ -204,6 +210,8 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     callback: (entries) => entries[0]?.contentRect.width,
   });
 
+  private _fetchedDescriptions: EntityDescription[] = [];
+
   private _scripts = memoizeOne(
     (
       scripts: ScriptEntity[],
@@ -273,13 +281,25 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           filterable: true,
           direction: "asc",
           flex: 2,
-          extraTemplate: (script) =>
-            script.labels.length
+          extraTemplate: (script) => {
+            const labels = script.labels.length
               ? html`<ha-data-table-labels
                   @label-clicked=${this._labelClicked}
                   .labels=${script.labels}
                 ></ha-data-table-labels>`
-              : nothing,
+              : nothing;
+            const description = html`<div class="secondary">
+              ${removeMd(
+                getEntityDescription(
+                  script.entity_id,
+                  this._fetchedDescriptions
+                ) ?? ""
+              )}
+            </div>`;
+            return html`<div class="labels-with-text">
+              ${labels}${description}
+            </div>`;
+          },
         },
         area: {
           title: localize("ui.panel.config.script.picker.headers.area"),
@@ -419,6 +439,11 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     ];
   }
 
+  public connectedCallback() {
+    super.connectedCallback();
+    this._fetchDescriptions();
+  }
+
   protected render(): TemplateResult {
     const categoryItems = html`${this._categories?.map(
         (category) =>
@@ -532,6 +557,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
       this._labels,
       this._filteredScripts
     );
+
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -1211,6 +1237,17 @@ ${rejected
     }
   }
 
+  private _fetchDescriptions() {
+    this.scripts.forEach((script) =>
+      setEntityDescription(
+        this.hass,
+        script.entity_id,
+        this._fetchedDescriptions,
+        getScriptStateConfig
+      )
+    );
+  }
+
   private _bulkCreateCategory = () => {
     showCategoryRegistryDetailDialog(this, {
       scope: "script",

yarn.lock

@@ -9147,6 +9147,7 @@ __metadata:
     punycode: "npm:2.3.1"
     qr-scanner: "npm:1.4.2"
     qrcode: "npm:1.5.4"
+    remove-markdown: "npm:0.6.2"
     roboto-fontface: "npm:0.10.0"
     rrule: "npm:2.8.1"
     rspack-manifest-plugin: "npm:5.2.0"
@@ -12233,6 +12234,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remove-markdown@npm:0.6.2":
+  version: 0.6.2
+  resolution: "remove-markdown@npm:0.6.2"
+  checksum: 10/4ee134dacb69ee768198e81130f7bfce0c8415eb7a97206b6ce67aa16c86c57b704356a8fa57cf45e384d1dbe7bee4d9d7bce3be4318904dd230b80553691c9b
+  languageName: node
+  linkType: hard
+
 "remove-trailing-separator@npm:^1.0.1, remove-trailing-separator@npm:^1.1.0":
   version: 1.1.0
   resolution: "remove-trailing-separator@npm:1.1.0"