Add aliases to areas (#15198)

* Add aliases to areas

* rename

* Update dialog-aliases.ts

gallery/src/pages/components/ha-form.ts

@@ -99,16 +99,19 @@ const AREAS = [
     area_id: "backyard",
     name: "Backyard",
     picture: null,
+    aliases: [],
   },
   {
     area_id: "bedroom",
     name: "Bedroom",
     picture: null,
+    aliases: [],
   },
   {
     area_id: "livingroom",
     name: "Livingroom",
     picture: null,
+    aliases: [],
   },
 ];
 

gallery/src/pages/components/ha-selector.ts

@@ -95,16 +95,19 @@ const AREAS = [
     area_id: "backyard",
     name: "Backyard",
     picture: null,
+    aliases: [],
   },
   {
     area_id: "bedroom",
     name: "Bedroom",
     picture: null,
+    aliases: [],
   },
   {
     area_id: "livingroom",
     name: "Livingroom",
     picture: null,
+    aliases: [],
   },
 ];
 

src/components/ha-area-picker.ts

@@ -126,6 +126,7 @@ export class HaAreaPicker extends LitElement {
             area_id: "no_areas",
             name: this.hass.localize("ui.components.area-picker.no_areas"),
             picture: null,
+            aliases: [],
           },
         ];
       }
@@ -256,6 +257,7 @@ export class HaAreaPicker extends LitElement {
             area_id: "no_areas",
             name: this.hass.localize("ui.components.area-picker.no_match"),
             picture: null,
+            aliases: [],
           },
         ];
       }
@@ -268,6 +270,7 @@ export class HaAreaPicker extends LitElement {
               area_id: "add_new",
               name: this.hass.localize("ui.components.area-picker.add_new"),
               picture: null,
+              aliases: [],
             },
           ];
     }

src/data/area_registry.ts

@@ -10,6 +10,7 @@ export interface AreaRegistryEntry {
   area_id: string;
   name: string;
   picture: string | null;
+  aliases: string[];
 }
 
 export interface AreaEntityLookup {
@@ -23,6 +24,7 @@ export interface AreaDeviceLookup {
 export interface AreaRegistryEntryMutableParams {
   name: string;
   picture?: string | null;
+  aliases?: string[];
 }
 
 export const createAreaRegistryEntry = (

src/dialogs/aliases/dialog-aliases.ts

@@ -2,35 +2,34 @@ import "@material/mwc-button/mwc-button";
 import { mdiDeleteOutline, mdiPlus } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import { fireEvent } from "../../common/dom/fire_event";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
+import "../../components/ha-alert";
-import "../../../../components/ha-alert";
+import "../../components/ha-area-picker";
-import "../../../../components/ha-area-picker";
+import "../../components/ha-dialog";
-import "../../../../components/ha-dialog";
+import "../../components/ha-textfield";
-import "../../../../components/ha-textfield";
+import type { HaTextField } from "../../components/ha-textfield";
-import type { HaTextField } from "../../../../components/ha-textfield";
+import { haStyle, haStyleDialog } from "../../resources/styles";
-import { haStyle, haStyleDialog } from "../../../../resources/styles";
+import { HomeAssistant } from "../../types";
-import { HomeAssistant } from "../../../../types";
+import { AliasesDialogParams } from "./show-dialog-aliases";
-import { EntityAliasesDialogParams } from "./show-dialog-entity-aliases";
 
-@customElement("dialog-entity-aliases")
+@customElement("dialog-aliases")
-class DialogEntityAliases extends LitElement {
+class DialogAliases extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _error?: string;
 
-  @state() private _params?: EntityAliasesDialogParams;
+  @state() private _params?: AliasesDialogParams;
 
   @state() private _aliases!: string[];
 
   @state() private _submitting = false;
 
-  public async showDialog(params: EntityAliasesDialogParams): Promise<void> {
+  public async showDialog(params: AliasesDialogParams): Promise<void> {
     this._params = params;
     this._error = undefined;
     this._aliases =
-      this._params.entity.aliases?.length > 0
+      this._params.aliases?.length > 0
-        ? [...this._params.entity.aliases].sort()
+        ? [...this._params.aliases].sort()
         : [""];
     await this.updateComplete;
   }
@@ -46,23 +45,17 @@ class DialogEntityAliases extends LitElement {
       return html``;
     }
 
-    const entityId = this._params.entity.entity_id;
-    const stateObj = entityId ? this.hass.states[entityId] : undefined;
-
-    const name = (stateObj && computeStateName(stateObj)) || entityId;
-
     return html`
       <ha-dialog
         open
         @closed=${this.closeDialog}
-        .heading=${this.hass.localize(
+        .heading=${this.hass.localize("ui.dialogs.aliases.heading", {
-          "ui.dialogs.entity_registry.editor.aliases.heading",
+          name: this._params.name,
-          { name }
+        })}
-        )}
       >
         <div>
           ${this._error
-            ? html`<ha-alert alert-type="error">${this._error}</ha-alert> `
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
           <div class="form">
             ${this._aliases.map(
@@ -73,7 +66,7 @@ class DialogEntityAliases extends LitElement {
                     .index=${index}
                     class="flex-auto"
                     .label=${this.hass!.localize(
-                      "ui.dialogs.entity_registry.editor.aliases.input_label",
+                      "ui.dialogs.aliases.input_label",
                       { number: index + 1 }
                     )}
                     .value=${alias}
@@ -85,7 +78,7 @@ class DialogEntityAliases extends LitElement {
                     .index=${index}
                     slot="navigationIcon"
                     label=${this.hass!.localize(
-                      "ui.dialogs.entity_registry.editor.aliases.remove_alias",
+                      "ui.dialogs.aliases.remove_alias",
                       { number: index + 1 }
                     )}
                     @click=${this._removeAlias}
@@ -96,9 +89,7 @@ class DialogEntityAliases extends LitElement {
             )}
             <div class="layout horizontal center-center">
               <mwc-button @click=${this._addAlias}>
-                ${this.hass!.localize(
+                ${this.hass!.localize("ui.dialogs.aliases.add_alias")}
-                  "ui.dialogs.entity_registry.editor.aliases.add_alias"
-                )}
                 <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
               </mwc-button>
             </div>
@@ -113,12 +104,10 @@ class DialogEntityAliases extends LitElement {
         </mwc-button>
         <mwc-button
           slot="primaryAction"
-          @click=${this._updateEntry}
+          @click=${this._updateAliases}
           .disabled=${this._submitting}
         >
-          ${this.hass.localize(
+          ${this.hass.localize("ui.dialogs.aliases.save")}
-            "ui.dialogs.entity_registry.editor.aliases.save"
-          )}
         </mwc-button>
       </ha-dialog>
     `;
@@ -152,23 +141,18 @@ class DialogEntityAliases extends LitElement {
     this._aliases = aliases;
   }
 
-  private async _updateEntry(): Promise<void> {
+  private async _updateAliases(): Promise<void> {
     this._submitting = true;
     const noEmptyAliases = this._aliases
       .map((alias) => alias.trim())
       .filter((alias) => alias);
 
     try {
-      await this._params!.updateEntry({
+      await this._params!.updateAliases(noEmptyAliases);
-        aliases: noEmptyAliases,
-      });
       this.closeDialog();
     } catch (err: any) {
       this._error =
-        err.message ||
+        err.message || this.hass.localize("ui.dialogs.aliases.unknown_error");
-        this.hass.localize(
-          "ui.dialogs.entity_registry.editor.aliases.unknown_error"
-        );
     } finally {
       this._submitting = false;
     }
@@ -207,6 +191,6 @@ class DialogEntityAliases extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "dialog-entity-aliases": DialogEntityAliases;
+    "dialog-aliases": DialogAliases;
   }
 }

src/dialogs/aliases/show-dialog-aliases.ts

@@ -0,0 +1,20 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+export interface AliasesDialogParams {
+  name: string;
+  aliases: string[];
+  updateAliases: (aliases: string[]) => Promise<unknown>;
+}
+
+export const loadAliasesDialog = () => import("./dialog-aliases");
+
+export const showAliasesDialog = (
+  element: HTMLElement,
+  aliasesParams: AliasesDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-aliases",
+    dialogImport: loadAliasesDialog,
+    dialogParams: aliasesParams,
+  });
+};

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -1,13 +1,17 @@
 import "@material/mwc-button";
+import "@material/mwc-list/mwc-list";
+import { mdiPencil } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { createCloseHeading } from "../../../components/ha-dialog";
+import { stringCompare } from "../../../common/string/compare";
 import "../../../components/ha-alert";
-import "../../../components/ha-textfield";
+import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-picture-upload";
 import type { HaPictureUpload } from "../../../components/ha-picture-upload";
+import "../../../components/ha-textfield";
 import { AreaRegistryEntryMutableParams } from "../../../data/area_registry";
+import { showAliasesDialog } from "../../../dialogs/aliases/show-dialog-aliases";
 import { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
 import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
@@ -26,6 +30,8 @@ class DialogAreaDetail extends LitElement {
 
   @state() private _name!: string;
 
+  @state() private _aliases!: string[];
+
   @state() private _picture!: string | null;
 
   @state() private _error?: string;
@@ -40,6 +46,7 @@ class DialogAreaDetail extends LitElement {
     this._params = params;
     this._error = undefined;
     this._name = this._params.entry ? this._params.entry.name : "";
+    this._aliases = this._params.entry ? this._params.entry.aliases : [];
     this._picture = this._params.entry?.picture || null;
     await this.updateComplete;
   }
@@ -93,6 +100,40 @@ class DialogAreaDetail extends LitElement {
               .invalid=${nameInvalid}
               dialogInitialFocus
             ></ha-textfield>
+
+            <div class="label">
+              ${this.hass.localize(
+                "ui.panel.config.areas.editor.aliases_section"
+              )}
+            </div>
+            <mwc-list class="aliases" @action=${this._handleAliasesClicked}>
+              <mwc-list-item .twoline=${this._aliases.length > 0} hasMeta>
+                <span>
+                  ${this._aliases.length > 0
+                    ? this.hass.localize(
+                        "ui.panel.config.areas.editor.configured_aliases",
+                        { count: this._aliases.length }
+                      )
+                    : this.hass.localize(
+                        "ui.panel.config.areas.editor.no_aliases"
+                      )}
+                </span>
+                <span slot="secondary">
+                  ${[...this._aliases]
+                    .sort((a, b) =>
+                      stringCompare(a, b, this.hass.locale.language)
+                    )
+                    .join(", ")}
+                </span>
+                <ha-svg-icon slot="meta" .path=${mdiPencil}></ha-svg-icon>
+              </mwc-list-item>
+            </mwc-list>
+            <div class="secondary">
+              ${this.hass.localize(
+                "ui.panel.config.areas.editor.aliases_description"
+              )}
+            </div>
+
             <ha-picture-upload
               .hass=${this.hass}
               .value=${this._picture}
@@ -127,6 +168,16 @@ class DialogAreaDetail extends LitElement {
     `;
   }
 
+  private _handleAliasesClicked() {
+    showAliasesDialog(this, {
+      name: this._name,
+      aliases: this._aliases,
+      updateAliases: async (aliases: string[]) => {
+        this._aliases = aliases;
+      },
+    });
+  }
+
   private _isNameValid() {
     return this._name.trim() !== "";
   }
@@ -147,6 +198,7 @@ class DialogAreaDetail extends LitElement {
       const values: AreaRegistryEntryMutableParams = {
         name: this._name.trim(),
         picture: this._picture,
+        aliases: this._aliases,
       };
       if (this._params!.entry) {
         await this._params!.updateEntry!(values);

src/panels/config/cloud/google-assistant/cloud-google-assistant.ts

@@ -55,7 +55,7 @@ import "../../../../layouts/hass-subpage";
 import { buttonLinkStyle, haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import { showToast } from "../../../../util/toast";
-import { showEntityAliasesDialog } from "../../entities/entity-aliases/show-dialog-entity-aliases";
+import { showAliasesDialog } from "../../../../dialogs/aliases/show-dialog-aliases";
 
 const DEFAULT_CONFIG_EXPOSE = true;
 
@@ -422,15 +422,17 @@ class CloudGoogleAssistant extends LitElement {
     if (!entry) {
       return;
     }
-    showEntityAliasesDialog(this, {
+    const stateObj = this.hass.states[entityId];
-      entity: entry,
+    const name = (stateObj && computeStateName(stateObj)) || entityId;
-      updateEntry: async (updates) => {
+
-        const { entity_entry } = await updateEntityRegistryEntry(
+    showAliasesDialog(this, {
-          this.hass,
+      name,
-          entry.entity_id,
+      aliases: entry.aliases,
-          updates
+      updateAliases: async (aliases: string[]) => {
-        );
+        const result = await updateEntityRegistryEntry(this.hass, entityId, {
-        this._entries![entity_entry.entity_id] = entity_entry;
+          aliases,
+        });
+        this._entries![entityId] = result.entity_entry;
       },
     });
   }

src/panels/config/entities/entity-aliases/show-dialog-entity-aliases.ts

@@ -1,25 +0,0 @@
-import { fireEvent } from "../../../../common/dom/fire_event";
-import {
-  EntityRegistryEntryUpdateParams,
-  ExtEntityRegistryEntry,
-} from "../../../../data/entity_registry";
-
-export interface EntityAliasesDialogParams {
-  entity: ExtEntityRegistryEntry;
-  updateEntry: (
-    updates: Partial<EntityRegistryEntryUpdateParams>
-  ) => Promise<unknown>;
-}
-
-export const loadEntityAliasesDialog = () => import("./dialog-entity-aliases");
-
-export const showEntityAliasesDialog = (
-  element: HTMLElement,
-  entityAliasesParams: EntityAliasesDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-entity-aliases",
-    dialogImport: loadEntityAliasesDialog,
-    dialogParams: entityAliasesParams,
-  });
-};

src/panels/config/entities/entity-registry-basic-editor.ts

@@ -7,6 +7,7 @@ import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
+import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stringCompare } from "../../../common/string/compare";
 import "../../../components/ha-area-picker";
 import "../../../components/ha-expansion-panel";
@@ -26,7 +27,7 @@ import {
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../types";
-import { showEntityAliasesDialog } from "./entity-aliases/show-dialog-entity-aliases";
+import { showAliasesDialog } from "../../../dialogs/aliases/show-dialog-aliases";
 
 @customElement("ha-registry-basic-editor")
 export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
@@ -52,13 +53,18 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
 
   private _handleAliasesClicked(ev: CustomEvent) {
     if (ev.detail.index !== 0) return;
-    showEntityAliasesDialog(this, {
+    const stateObj = this.hass.states[this.entry.entity_id];
-      entity: this.entry!,
+    const name =
-      updateEntry: async (updates) => {
+      (stateObj && computeStateName(stateObj)) || this.entry.entity_id;
+
+    showAliasesDialog(this, {
+      name,
+      aliases: this.entry!.aliases,
+      updateAliases: async (aliases: string[]) => {
         const result = await updateEntityRegistryEntry(
           this.hass,
           this.entry.entity_id,
-          updates
+          { aliases }
         );
         fireEvent(this, "entity-entry-updated", result.entity_entry);
       },
@@ -296,7 +302,7 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
         </mwc-list>
         <div class="secondary">
           ${this.hass.localize(
-            "ui.dialogs.entity_registry.editor.aliases.description"
+            "ui.dialogs.entity_registry.editor.aliases_description"
           )}
         </div>
       </ha-expansion-panel>

src/panels/config/entities/entity-registry-settings.ts

@@ -17,6 +17,7 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
+import { computeStateName } from "../../../common/entity/compute_state_name";
 import { domainIcon } from "../../../common/entity/domain_icon";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { stringCompare } from "../../../common/string/compare";
@@ -80,7 +81,7 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail";
-import { showEntityAliasesDialog } from "./entity-aliases/show-dialog-entity-aliases";
+import { showAliasesDialog } from "../../../dialogs/aliases/show-dialog-aliases";
 
 const OVERRIDE_DEVICE_CLASSES = {
   cover: [
@@ -861,7 +862,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
           </mwc-list>
           <div class="secondary">
             ${this.hass.localize(
-              "ui.dialogs.entity_registry.editor.aliases.description"
+              "ui.dialogs.entity_registry.editor.aliases_description"
             )}
           </div>
           ${this.entry.device_id
@@ -1055,13 +1056,19 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
 
   private _handleAliasesClicked(ev: CustomEvent) {
     if (ev.detail.index !== 0) return;
-    showEntityAliasesDialog(this, {
+
-      entity: this.entry!,
+    const stateObj = this.hass.states[this.entry.entity_id];
-      updateEntry: async (updates) => {
+    const name =
+      (stateObj && computeStateName(stateObj)) || this.entry.entity_id;
+
+    showAliasesDialog(this, {
+      name,
+      aliases: this.entry!.aliases,
+      updateAliases: async (aliases: string[]) => {
         const result = await updateEntityRegistryEntry(
           this.hass,
           this.entry.entity_id,
-          updates
+          { aliases }
         );
         fireEvent(this, "entity-entry-updated", result.entity_entry);
       },

src/translations/en.json

@@ -1016,19 +1016,19 @@
           "aliases_section": "Aliases",
           "no_aliases": "No configured aliases",
           "configured_aliases": "{count} configured {count, plural,\n  one {alias}\n  other {aliases}\n}",
-          "aliases": {
+          "aliases_description": "Aliases are alternative names used in voice assistants to refer to this entity."
-            "heading": "{name} aliases",
-            "description": "Aliases are alternative names used in voice assistants to refer to this entity.",
-            "remove_alias": "Remove alias {number}",
-            "input_label": "Alias {number}",
-            "save": "Save",
-            "add_alias": "Add alias",
-            "no_aliases": "No aliases have been added yet",
-            "update": "Update",
-            "unknown_error": "Unknown error"
-          }
         }
       },
+      "aliases": {
+        "heading": "{name} aliases",
+        "remove_alias": "Remove alias {number}",
+        "input_label": "Alias {number}",
+        "save": "Save",
+        "add_alias": "Add alias",
+        "no_aliases": "No aliases have been added yet",
+        "update": "Update",
+        "unknown_error": "Unknown error"
+      },
       "helper_settings": {
         "platform_not_loaded": "The {platform} integration is not loaded. Please add it to your configuration either by adding 'default_config:' or ''{platform}:''.",
         "yaml_not_editable": "The settings of this entity cannot be edited from the UI. Only entities set up from the UI are configurable from the UI.",
@@ -1435,7 +1435,11 @@
             "area_id": "Area ID",
             "unknown_error": "Unknown error",
             "linked_entities_caption": "Entities",
-            "no_linked_entities": "There are no entities linked to this area."
+            "no_linked_entities": "There are no entities linked to this area.",
+            "aliases_section": "Aliases",
+            "no_aliases": "No configured aliases",
+            "configured_aliases": "{count} configured {count, plural,\n  one {alias}\n  other {aliases}\n}",
+            "aliases_description": "Aliases are alternative names used in voice assistants to refer to this area."
           },
           "delete": {
             "confirmation_title": "Delete {name}?",