Add aliases editor for helpers (#14951)

src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts

@@ -57,7 +57,13 @@ export class EntityRegistrySettingsHelper extends LitElement {
     super.updated(changedProperties);
     if (changedProperties.has("entry")) {
       this._error = undefined;
-      this._item = undefined;
+      if (
+        this.entry.unique_id !==
+        (changedProperties.get("entry") as ExtEntityRegistryEntry)?.unique_id
+      ) {
+        this._item = undefined;
+      }
+
       this._getItem();
     }
   }

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

@@ -1,7 +1,11 @@
 import "@material/mwc-formfield/mwc-formfield";
+import "@material/mwc-list/mwc-list";
+import "@material/mwc-list/mwc-list-item";
+import { mdiPencil } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 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 "../../../components/ha-area-picker";
 import "../../../components/ha-expansion-panel";
@@ -21,6 +25,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";
 
 @customElement("ha-registry-basic-editor")
 export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
@@ -44,6 +49,20 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
 
   @state() private _submitting = false;
 
+  private _openAliasesSettings() {
+    showEntityAliasesDialog(this, {
+      entity: this.entry!,
+      updateEntry: async (updates) => {
+        const result = await updateEntityRegistryEntry(
+          this.hass,
+          this.entry.entity_id,
+          updates
+        );
+        fireEvent(this, "entity-entry-updated", result.entity_entry);
+      },
+    });
+  }
+
   public async updateEntry(): Promise<void> {
     this._submitting = true;
     const params: Partial<EntityRegistryEntryUpdateParams> = {
@@ -247,6 +266,37 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
               </div>
             `
           : ""}
+
+        <div class="label">
+          ${this.hass.localize(
+            "ui.dialogs.entity_registry.editor.aliases_section"
+          )}
+        </div>
+        <mwc-list class="aliases">
+          <mwc-list-item
+            .twoline=${this.entry.aliases.length > 0}
+            hasMeta
+            @click=${this._openAliasesSettings}
+          >
+            <span>
+              ${this.entry.aliases.length > 0
+                ? this.hass.localize(
+                    "ui.dialogs.entity_registry.editor.configured_aliases",
+                    { count: this.entry.aliases.length }
+                  )
+                : this.hass.localize(
+                    "ui.dialogs.entity_registry.editor.no_aliases"
+                  )}
+            </span>
+            <span slot="secondary">${this.entry.aliases.join(", ")}</span>
+            <ha-svg-icon slot="meta" .path=${mdiPencil}></ha-svg-icon>
+          </mwc-list-item>
+        </mwc-list>
+        <div class="secondary">
+          ${this.hass.localize(
+            "ui.dialogs.entity_registry.editor.aliases.description"
+          )}
+        </div>
       </ha-expansion-panel>
     `;
   }
@@ -300,6 +350,13 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
       .label {
         margin-top: 16px;
       }
+      .aliases {
+        border-radius: 4px;
+        margin-top: 4px;
+        margin-bottom: 4px;
+        --mdc-icon-button-size: 24px;
+        overflow: hidden;
+      }
     `;
   }
 }