Display aliases in cloud page (#14989)

* Display aliases in cloud page

* Fixes ellipsis

* Improve sort

* Separate alias list and button

* Remove alexa changes

* Apply suggestions

src/data/entity_registry.ts

@@ -111,6 +111,15 @@ export const getExtendedEntityRegistryEntry = (
     entity_id: entityId,
   });
 
+export const getExtendedEntityRegistryEntries = (
+  hass: HomeAssistant,
+  entityIds: string[]
+): Promise<Record<string, ExtEntityRegistryEntry>> =>
+  hass.callWS({
+    type: "config/entity_registry/get_entries",
+    entity_ids: entityIds,
+  });
+
 export const updateEntityRegistryEntry = (
   hass: HomeAssistant,
   entityId: string,

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

@@ -40,7 +40,8 @@ import {
 } from "../../../../data/cloud";
 import {
   EntityRegistryEntry,
-  getExtendedEntityRegistryEntry,
+  ExtEntityRegistryEntry,
+  getExtendedEntityRegistryEntries,
   updateEntityRegistryEntry,
 } from "../../../../data/entity_registry";
 import {
@@ -68,6 +69,8 @@ class CloudGoogleAssistant extends LitElement {
 
   @state() private _entities?: GoogleEntity[];
 
+  @state() private _entries?: { [id: string]: ExtEntityRegistryEntry };
+
   @state() private _syncing = false;
 
   @state()
@@ -164,6 +167,8 @@ class CloudGoogleAssistant extends LitElement {
           : mdiCloseBoxMultiple}
       ></ha-icon-button>`;
 
+      const aliases = this._entries?.[entity.entity_id]?.aliases;
+
       target.push(html`
         <ha-card outlined>
           <div class="card-content">
@@ -174,17 +179,51 @@ class CloudGoogleAssistant extends LitElement {
                 secondary-line
                 @click=${this._showMoreInfo}
               >
-                ${entity.entity_id in this.hass.entities
+                ${aliases
-                  ? html`<button
+                  ? html`
-                      class="link"
+                      <span>
-                      .entityId=${entity.entity_id}
+                        ${aliases.length > 0
-                      @click=${this._openAliasesSettings}
+                          ? [...aliases]
-                    >
+                              .sort((a, b) =>
-                      ${this.hass.localize(
+                                stringCompare(a, b, this.hass.locale.language)
-                        "ui.panel.config.cloud.google.manage_aliases"
+                              )
-                      )}
+                              .join(", ")
-                    </button>`
+                          : this.hass.localize(
-                  : ""}
+                              "ui.panel.config.cloud.google.no_aliases"
+                            )}
+                      </span>
+                      <br />
+                      <button
+                        class="link"
+                        .entityId=${entity.entity_id}
+                        @click=${this._openAliasesSettings}
+                      >
+                        ${this.hass.localize(
+                          `ui.panel.config.cloud.google.${
+                            aliases.length > 0
+                              ? "manage_aliases"
+                              : "add_aliases"
+                          }`
+                        )}
+                      </button>
+                    `
+                  : html`
+                      <span>
+                        ${this.hass.localize(
+                          "ui.panel.config.cloud.google.aliases_not_available"
+                        )}
+                      </span>
+                      <br />
+                      <button
+                        class="link"
+                        .stateObj=${stateObj}
+                        @click=${this._showMoreInfoSettings}
+                      >
+                        ${this.hass.localize(
+                          "ui.panel.config.cloud.google.aliases_not_available_learn_more"
+                        )}
+                      </button>
+                    `}
               </state-info>
               ${!emptyFilter
                 ? html`${iconButton}`
@@ -379,14 +418,19 @@ class CloudGoogleAssistant extends LitElement {
   private async _openAliasesSettings(ev) {
     ev.stopPropagation();
     const entityId = ev.target.entityId;
-    const entry = await getExtendedEntityRegistryEntry(this.hass, entityId);
+    const entry = this._entries![entityId];
     if (!entry) {
       return;
     }
     showEntityAliasesDialog(this, {
       entity: entry,
       updateEntry: async (updates) => {
-        await updateEntityRegistryEntry(this.hass, entry.entity_id, updates);
+        const { entity_entry } = await updateEntityRegistryEntry(
+          this.hass,
+          entry.entity_id,
+          updates
+        );
+        this._entries![entity_entry.entity_id] = entity_entry;
       },
     });
   }
@@ -415,6 +459,13 @@ class CloudGoogleAssistant extends LitElement {
 
   private async _fetchData() {
     const entities = await fetchCloudGoogleEntities(this.hass);
+    this._entries = await getExtendedEntityRegistryEntries(
+      this.hass,
+      entities
+        .filter((ent) => this.hass.entities[ent.entity_id])
+        .map((e) => e.entity_id)
+    );
+
     entities.sort((a, b) => {
       const stateA = this.hass.states[a.entity_id];
       const stateB = this.hass.states[b.entity_id];
@@ -429,7 +480,14 @@ class CloudGoogleAssistant extends LitElement {
 
   private _showMoreInfo(ev) {
     const entityId = ev.currentTarget.stateObj.entity_id;
-    fireEvent(this, "hass-more-info", { entityId });
+    const moreInfoTab = ev.currentTarget.moreInfoTab;
+    fireEvent(this, "hass-more-info", { entityId, tab: moreInfoTab });
+  }
+
+  private _showMoreInfoSettings(ev) {
+    ev.stopPropagation();
+    const entityId = ev.currentTarget.stateObj.entity_id;
+    fireEvent(this, "hass-more-info", { entityId, tab: "settings" });
   }
 
   private async _exposeChanged(ev: CustomEvent<ActionDetail>) {

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

@@ -30,7 +30,7 @@ class DialogEntityAliases extends LitElement {
     this._error = undefined;
     this._aliases =
       this._params.entity.aliases?.length > 0
-        ? this._params.entity.aliases
+        ? [...this._params.entity.aliases].sort()
         : [""];
     await this.updateComplete;
   }

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 { stringCompare } from "../../../common/string/compare";
 import "../../../components/ha-area-picker";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-radio";
@@ -285,7 +286,11 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
                     "ui.dialogs.entity_registry.editor.no_aliases"
                   )}
             </span>
-            <span slot="secondary">${this.entry.aliases.join(", ")}</span>
+            <span slot="secondary">
+              ${[...this.entry.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>

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

@@ -819,7 +819,13 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
                       "ui.dialogs.entity_registry.editor.no_aliases"
                     )}
               </span>
-              <span slot="secondary">${this.entry.aliases.join(", ")}</span>
+              <span slot="secondary">
+                ${[...this.entry.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>

src/translations/en.json

@@ -2740,6 +2740,10 @@
             "exposed": "{selected} exposed",
             "not_exposed": "{selected} not exposed",
             "manage_aliases": "Manage aliases",
+            "add_aliases": "Add aliases",
+            "no_aliases": "No aliases",
+            "aliases_not_available": "Aliases not available",
+            "aliases_not_available_learn_more": "Learn more",
             "sync_to_google": "Synchronizing changes to Google.",
             "sync_entities": "Synchronize entities",
             "sync_entities_error": "Failed to sync entities:",