Add area to automation, scene, script tables (#20366)

* Add area to automation, scene, script tables

* typing

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

@@ -103,6 +103,7 @@ import { showNewAutomationDialog } from "./show-dialog-new-automation";
 
 type AutomationItem = AutomationEntity & {
   name: string;
+  area: string | undefined;
   last_triggered?: string | undefined;
   formatted_state: string;
   category: string | undefined;
@@ -152,6 +153,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     (
       automations: AutomationEntity[],
       entityReg: EntityRegistryEntry[],
+      areas: HomeAssistant["areas"],
       categoryReg?: CategoryRegistryEntry[],
       labelReg?: LabelRegistryEntry[],
       filteredAutomations?: string[] | null
@@ -174,6 +176,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         return {
           ...automation,
           name: computeStateName(automation),
+          area: entityRegEntry?.area_id
+            ? areas[entityRegEntry?.area_id]?.name
+            : undefined,
           last_triggered: automation.attributes.last_triggered || undefined,
           formatted_state: this.hass.formatEntityState(automation),
           category: category
@@ -242,6 +247,13 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
             `;
           },
         },
+        area: {
+          title: localize("ui.panel.config.automation.picker.headers.area"),
+          hidden: true,
+          groupable: true,
+          filterable: true,
+          sortable: true,
+        },
         category: {
           title: localize("ui.panel.config.automation.picker.headers.category"),
           hidden: true,
@@ -256,8 +268,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           template: (automation) =>
             automation.labels.map((lbl) => lbl.name).join(" "),
         },
-      };
+        last_triggered: {
-      columns.last_triggered = {
           sortable: true,
           width: "130px",
           title: localize("ui.card.automation.last_triggered"),
@@ -275,15 +286,14 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
                 : relativeTime(date, locale)}
             `;
           },
-      };
+        },
-
+        formatted_state: {
-      if (!this.narrow) {
-        columns.formatted_state = {
           width: "82px",
           sortable: true,
           groupable: true,
           title: "",
           type: "overflow",
+          hidden: narrow,
           label: this.hass.localize("ui.panel.config.automation.picker.state"),
           template: (automation) => html`
             <ha-entity-toggle
@@ -291,10 +301,8 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
               .hass=${this.hass}
             ></ha-entity-toggle>
           `,
-        };
+        },
-      }
+        actions: {
-
-      columns.actions = {
           title: "",
           width: "64px",
           type: "icon-button",
@@ -306,6 +314,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
               @click=${this._showOverflowMenu}
             ></ha-icon-button>
           `,
+        },
       };
       return columns;
     }
@@ -401,6 +410,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         .data=${this._automations(
           this.automations,
           this._entityReg,
+          this.hass.areas,
           this._categories,
           this._labels,
           this._filteredAutomations

src/panels/config/scene/ha-scene-dashboard.ts

@@ -91,6 +91,7 @@ import { computeCssColor } from "../../../common/color/compute-color";
 
 type SceneItem = SceneEntity & {
   name: string;
+  area: string | undefined;
   category: string | undefined;
   labels: LabelRegistryEntry[];
 };
@@ -136,6 +137,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
     (
       scenes: SceneEntity[],
       entityReg: EntityRegistryEntry[],
+      areas: HomeAssistant["areas"],
       categoryReg?: CategoryRegistryEntry[],
       labelReg?: LabelRegistryEntry[],
       filteredScenes?: string[] | null
@@ -156,6 +158,9 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         return {
           ...scene,
           name: computeStateName(scene),
+          area: entityRegEntry?.area_id
+            ? areas[entityRegEntry?.area_id]?.name
+            : undefined,
           category: category
             ? categoryReg?.find((cat) => cat.category_id === category)?.name
             : undefined,
@@ -198,6 +203,13 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
               : nothing}
           `,
         },
+        area: {
+          title: localize("ui.panel.config.scene.picker.headers.area"),
+          hidden: true,
+          groupable: true,
+          filterable: true,
+          sortable: true,
+        },
         category: {
           title: localize("ui.panel.config.scene.picker.headers.category"),
           hidden: true,
@@ -211,14 +223,13 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           filterable: true,
           template: (scene) => scene.labels.map((lbl) => lbl.name).join(" "),
         },
-      };
+        state: {
-      if (!narrow) {
-        columns.state = {
           title: localize(
             "ui.panel.config.scene.picker.headers.last_activated"
           ),
           sortable: true,
           width: "30%",
+          hidden: narrow,
           template: (scene) => {
             const lastActivated = scene.state;
             if (!lastActivated || isUnavailableState(lastActivated)) {
@@ -233,9 +244,8 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                 : relativeTime(date, this.hass.locale)}
             `;
           },
-        };
+        },
-      }
+        only_editable: {
-      columns.only_editable = {
           title: "",
           width: "56px",
           template: (scene) =>
@@ -252,8 +262,8 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                   ></ha-svg-icon>
                 `
               : "",
-      };
+        },
-      columns.actions = {
+        actions: {
           title: "",
           width: "64px",
           type: "overflow-menu",
@@ -307,6 +317,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
             >
             </ha-icon-overflow-menu>
           `,
+        },
       };
 
       return columns;
@@ -386,6 +397,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         .data=${this._scenes(
           this.scenes,
           this._entityReg,
+          this.hass.areas,
           this._categories,
           this._labels,
           this._filteredScenes

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

@@ -93,6 +93,7 @@ import { computeCssColor } from "../../../common/color/compute-color";
 
 type ScriptItem = ScriptEntity & {
   name: string;
+  area: string | undefined;
   category: string | undefined;
   labels: LabelRegistryEntry[];
 };
@@ -140,6 +141,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     (
       scripts: ScriptEntity[],
       entityReg: EntityRegistryEntry[],
+      areas: HomeAssistant["areas"],
       categoryReg?: CategoryRegistryEntry[],
       labelReg?: LabelRegistryEntry[],
       filteredScripts?: string[] | null
@@ -162,6 +164,9 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         return {
           ...script,
           name: computeStateName(script),
+          area: entityRegEntry?.area_id
+            ? areas[entityRegEntry?.area_id]?.name
+            : undefined,
           last_triggered: script.attributes.last_triggered || undefined,
           category: category
             ? categoryReg?.find((cat) => cat.category_id === category)?.name
@@ -227,6 +232,13 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
             `;
           },
         },
+        area: {
+          title: localize("ui.panel.config.script.picker.headers.area"),
+          hidden: true,
+          groupable: true,
+          filterable: true,
+          sortable: true,
+        },
         category: {
           title: localize("ui.panel.config.script.picker.headers.category"),
           hidden: true,
@@ -240,9 +252,8 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           filterable: true,
           template: (script) => script.labels.map((lbl) => lbl.name).join(" "),
         },
-      };
+        last_triggered: {
-      if (!narrow) {
+          hidden: narrow,
-        columns.last_triggered = {
           sortable: true,
           width: "40%",
           title: localize("ui.card.automation.last_triggered"),
@@ -262,10 +273,8 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                 : this.hass.localize("ui.components.relative_time.never")}
             `;
           },
-        };
+        },
-      }
+        actions: {
-
-      columns.actions = {
           title: "",
           width: "64px",
           type: "overflow-menu",
@@ -290,7 +299,9 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                 },
                 {
                   path: mdiPlay,
-                label: this.hass.localize("ui.panel.config.script.picker.run"),
+                  label: this.hass.localize(
+                    "ui.panel.config.script.picker.run"
+                  ),
                   action: () => this._runScript(script),
                 },
                 {
@@ -322,6 +333,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
             >
             </ha-icon-overflow-menu>
           `,
+        },
       };
 
       return columns;
@@ -401,6 +413,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         .data=${this._scripts(
           this.scripts,
           this._entityReg,
+          this.hass.areas,
           this._categories,
           this._labels,
           this._filteredScripts

src/translations/en.json

@@ -2686,7 +2686,8 @@
               "trigger": "Trigger",
               "actions": "Actions",
               "state": "State",
-              "category": "Category"
+              "category": "Category",
+              "area": "Area"
             },
             "bulk_action": "Action",
             "bulk_actions": {
@@ -3560,7 +3561,8 @@
             "headers": {
               "name": "Name",
               "state": "State",
-              "category": "Category"
+              "category": "Category",
+              "area": "Area"
             },
             "edit_category": "[%key:ui::panel::config::automation::picker::edit_category%]",
             "assign_category": "[%key:ui::panel::config::automation::picker::assign_category%]",
@@ -3669,7 +3671,8 @@
               "state": "State",
               "name": "Name",
               "last_activated": "Last activated",
-              "category": "Category"
+              "category": "Category",
+              "area": "Area"
             },
             "edit_category": "[%key:ui::panel::config::automation::picker::edit_category%]",
             "assign_category": "[%key:ui::panel::config::automation::picker::assign_category%]",