20230608.0 (#16825)

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20230607.0"
+version      = "20230608.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

src/components/ha-related-items.ts

@@ -1,6 +1,10 @@
 import "@material/mwc-list/mwc-list";
-import { mdiDevices, mdiPaletteSwatch, mdiSofa } from "@mdi/js";
+import {
-import { HassEntity } from "home-assistant-js-websocket";
+  mdiAlertCircleOutline,
+  mdiDevices,
+  mdiPaletteSwatch,
+  mdiSofa,
+} from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -11,10 +15,11 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
+import { caseInsensitiveStringCompare } from "../common/string/compare";
 import { Blueprints, fetchBlueprints } from "../data/blueprint";
 import { ConfigEntry, getConfigEntries } from "../data/config_entries";
-import { SceneEntity } from "../data/scene";
 import { findRelated, ItemType, RelatedResult } from "../data/search";
 import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
@@ -72,13 +77,55 @@ export class HaRelatedItems extends LitElement {
     }
   }
 
+  private _relatedEntities = memoizeOne((entityIds: string[]) =>
+    this._toEntities(entityIds)
+  );
+
+  private _relatedAutomations = memoizeOne((automationEntityIds: string[]) =>
+    this._toEntities(automationEntityIds)
+  );
+
+  private _relatedScripts = memoizeOne((scriptEntityIds: string[]) =>
+    this._toEntities(scriptEntityIds)
+  );
+
+  private _relatedGroups = memoizeOne((groupEntityIds: string[]) =>
+    this._toEntities(groupEntityIds)
+  );
+
+  private _relatedScenes = memoizeOne((sceneEntityIds: string[]) =>
+    this._toEntities(sceneEntityIds)
+  );
+
+  private _toEntities = (entityIds: string[]) =>
+    entityIds
+      .map((entityId) => this.hass.states[entityId])
+      .filter((entity) => entity)
+      .sort((a, b) =>
+        caseInsensitiveStringCompare(
+          a.attributes.friendly_name ?? a.entity_id,
+          b.attributes.friendly_name ?? b.entity_id,
+          this.hass.language
+        )
+      );
+
   protected render() {
     if (!this._related) {
       return nothing;
     }
     if (Object.keys(this._related).length === 0) {
       return html`
-        ${this.hass.localize("ui.components.related-items.no_related_found")}
+        <mwc-list>
+          <ha-list-item hasMeta graphic="icon" noninteractive>
+            <ha-svg-icon
+              .path=${mdiAlertCircleOutline}
+              slot="graphic"
+            ></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.components.related-items.no_related_found"
+            )}
+          </ha-list-item>
+        </mwc-list>
       `;
     }
     return html`
@@ -92,7 +139,7 @@ export class HaRelatedItems extends LitElement {
                   (configEntry) => configEntry.entry_id === relatedConfigEntryId
                 );
                 if (!entry) {
-                  return "";
+                  return nothing;
                 }
                 return html`
                   <a
@@ -117,7 +164,7 @@ export class HaRelatedItems extends LitElement {
                 `;
               })}</mwc-list
             >`
-        : ""}
+        : nothing}
       ${this._related.device
         ? html`<h3>
               ${this.hass.localize("ui.components.related-items.device")}
@@ -125,7 +172,7 @@ export class HaRelatedItems extends LitElement {
             ${this._related.device.map((relatedDeviceId) => {
               const device = this.hass.devices[relatedDeviceId];
               if (!device) {
-                return "";
+                return nothing;
               }
               return html`
                 <a
@@ -144,7 +191,7 @@ export class HaRelatedItems extends LitElement {
               `;
             })}            </mwc-list>
             `
-        : ""}
+        : nothing}
       ${this._related.area
         ? html`<h3>
               ${this.hass.localize("ui.components.related-items.area")}
@@ -153,7 +200,7 @@ export class HaRelatedItems extends LitElement {
               >${this._related.area.map((relatedAreaId) => {
                 const area = this.hass.areas[relatedAreaId];
                 if (!area) {
-                  return "";
+                  return nothing;
                 }
                 return html`
                   <a
@@ -183,21 +230,16 @@ export class HaRelatedItems extends LitElement {
                 `;
               })}</mwc-list
             >`
-        : ""}
+        : nothing}
       ${this._related.entity
         ? html`
             <h3>${this.hass.localize("ui.components.related-items.entity")}</h3>
             <mwc-list>
-              ${this._related.entity.map((entityId) => {
+              ${this._relatedEntities(this._related.entity).map(
-                const entity: HassEntity | undefined =
+                (entity) => html`
-                  this.hass.states[entityId];
-                if (!entity) {
-                  return "";
-                }
-                return html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${entityId}
+                    .entityId=${entity.entity_id}
                     hasMeta
                     graphic="icon"
                   >
@@ -208,24 +250,20 @@ export class HaRelatedItems extends LitElement {
                     ${entity.attributes.friendly_name || entity.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `;
+                `
-              })}
+              )}
             </mwc-list>
           `
-        : ""}
+        : nothing}
       ${this._related.group
         ? html`
             <h3>${this.hass.localize("ui.components.related-items.group")}</h3>
             <mwc-list>
-              ${this._related.group.map((groupId) => {
+              ${this._relatedGroups(this._related.group).map(
-                const group: HassEntity | undefined = this.hass.states[groupId];
+                (group) => html`
-                if (!group) {
-                  return "";
-                }
-                return html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${groupId}
+                    .entityId=${group.entity_id}
                     hasMeta
                     graphic="icon"
                   >
@@ -236,25 +274,20 @@ export class HaRelatedItems extends LitElement {
                     ${group.attributes.friendly_name || group.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `;
+                `
-              })}
+              )}
             </mwc-list>
           `
-        : ""}
+        : nothing}
       ${this._related.scene
         ? html`
             <h3>${this.hass.localize("ui.components.related-items.scene")}</h3>
             <mwc-list>
-              ${this._related.scene.map((sceneId) => {
+              ${this._relatedScenes(this._related.scene).map(
-                const scene: SceneEntity | undefined =
+                (scene) => html`
-                  this.hass.states[sceneId];
-                if (!scene) {
-                  return "";
-                }
-                return html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${sceneId}
+                    .entityId=${scene.entity_id}
                     hasMeta
                     graphic="icon"
                   >
@@ -265,11 +298,11 @@ export class HaRelatedItems extends LitElement {
                     ${scene.attributes.friendly_name || scene.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `;
+                `
-              })}
+              )}
             </mwc-list>
           `
-        : ""}
+        : nothing}
       ${this._related.automation_blueprint
         ? html`
             <h3>
@@ -298,23 +331,18 @@ export class HaRelatedItems extends LitElement {
               })}
             </mwc-list>
           `
-        : ""}
+        : nothing}
       ${this._related.automation
         ? html`
             <h3>
               ${this.hass.localize("ui.components.related-items.automation")}
             </h3>
             <mwc-list>
-              ${this._related.automation.map((automationId) => {
+              ${this._relatedAutomations(this._related.automation).map(
-                const automation: HassEntity | undefined =
+                (automation) => html`
-                  this.hass.states[automationId];
-                if (!automation) {
-                  return "";
-                }
-                return html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${automationId}
+                    .entityId=${automation.entity_id}
                     hasMeta
                     graphic="icon"
                   >
@@ -326,11 +354,11 @@ export class HaRelatedItems extends LitElement {
                     automation.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `;
+                `
-              })}
+              )}
             </mwc-list>
           `
-        : ""}
+        : nothing}
       ${this._related.script_blueprint
         ? html`
             <h3>
@@ -359,21 +387,16 @@ export class HaRelatedItems extends LitElement {
               })}
             </mwc-list>
           `
-        : ""}
+        : nothing}
       ${this._related.script
         ? html`
             <h3>${this.hass.localize("ui.components.related-items.script")}</h3>
             <mwc-list>
-              ${this._related.script.map((scriptId) => {
+              ${this._relatedScripts(this._related.script).map(
-                const script: HassEntity | undefined =
+                (script) => html`
-                  this.hass.states[scriptId];
-                if (!script) {
-                  return "";
-                }
-                return html`
                   <ha-list-item
                     @click=${this._openMoreInfo}
-                    .entityId=${scriptId}
+                    .entityId=${script.entity_id}
                     hasMeta
                     graphic="icon"
                   >
@@ -384,11 +407,11 @@ export class HaRelatedItems extends LitElement {
                     ${script.attributes.friendly_name || script.entity_id}
                     <ha-icon-next slot="meta"></ha-icon-next>
                   </ha-list-item>
-                `;
+                `
-              })}
+              )}
             </mwc-list>
           `
-        : ""}
+        : nothing}
     `;
   }
 

src/panels/config/integrations/ha-config-integration-page.ts

@@ -266,7 +266,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                         path=${mdiPackageVariant}
                       ></ha-svg-icon>
                       ${this.hass.localize(
-                        "ui.panel.config.integrations.config_entry.provided_by_custom_integration"
+                        "ui.panel.config.integrations.config_entry.custom_integration"
                       )}</ha-alert
                     >`
                   : ""}
@@ -422,7 +422,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                           .flow=${flow}
                           @click=${this._continueFlow}
                           .label=${this.hass.localize(
-                            "config_entry.disabled_by.config_entry"
+                            "ui.panel.config.integrations.configure"
                           )}
                         ></ha-button>
                       </ha-list-item>`

src/panels/config/integrations/ha-integration-card.ts

@@ -65,28 +65,28 @@ export class HaIntegrationCard extends LitElement {
           "debug-logging": Boolean(debugLoggingEnabled),
         })}
       >
-        <ha-integration-header
+        <a href=${`/config/integrations/integration/${this.domain}`}>
-          .hass=${this.hass}
+          <ha-integration-header
-          .domain=${this.domain}
+            .hass=${this.hass}
-          .localizedDomainName=${this.items[0].localized_domain_name}
+            .domain=${this.domain}
-          .banner=${state !== "loaded"
+            .localizedDomainName=${this.items[0].localized_domain_name}
-            ? this.hass.localize(
+            .banner=${state !== "loaded"
-                `ui.panel.config.integrations.config_entry.state.${state}`
+              ? this.hass.localize(
-              )
+                  `ui.panel.config.integrations.config_entry.state.${state}`
-            : debugLoggingEnabled
+                )
-            ? this.hass.localize(
+              : debugLoggingEnabled
-                "ui.panel.config.integrations.config_entry.debug_logging_enabled"
+              ? this.hass.localize(
-              )
+                  "ui.panel.config.integrations.config_entry.debug_logging_enabled"
-            : undefined}
+                )
-          .manifest=${this.manifest}
+              : undefined}
-        >
+            .manifest=${this.manifest}
-          <a
-            href=${`/config/integrations/integration/${this.domain}`}
-            slot="header-button"
           >
-            <ha-icon-button .path=${mdiCogOutline}></ha-icon-button>
+            <ha-icon-button
-          </a>
+              slot="header-button"
-        </ha-integration-header>
+              .path=${mdiCogOutline}
+            ></ha-icon-button>
+          </ha-integration-header>
+        </a>
 
         ${this._renderSingleEntry()}
       </ha-card>
@@ -249,7 +249,7 @@ export class HaIntegrationCard extends LitElement {
         }
         a {
           text-decoration: none;
-          color: var(--primary-color);
+          color: var(--primary-text-color);
         }
         a ha-icon-button {
           color: var(--secondary-text-color);

src/panels/config/integrations/ha-integration-header.ts

@@ -50,7 +50,7 @@ export class HaIntegrationHeader extends LitElement {
         icons.push([
           mdiPackageVariant,
           this.hass.localize(
-            "ui.panel.config.integrations.config_entry.provided_by_custom_integration"
+            "ui.panel.config.integrations.config_entry.custom_integration"
           ),
         ]);
       }

src/panels/config/integrations/ha-integration-list-item.ts

@@ -84,7 +84,7 @@ export class HaIntegrationListItem extends ListItemBase {
             ><ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon
             ><simple-tooltip animation-delay="0" position="left"
               >${this.hass.localize(
-                "ui.panel.config.integrations.config_entry.provided_by_custom_integration"
+                "ui.panel.config.integrations.config_entry.custom_integration"
               )}</simple-tooltip
             ></span
           >`

src/panels/config/repairs/show-dialog-repair-flow.ts

@@ -217,7 +217,7 @@ export const showRepairsFlowDialog = (
         return hass.localize(
           `component.${issue.domain}.issues.${
             issue.translation_key || issue.issue_id
-          }.fix_flow.step.${step.step_id}.menu_issues.${option}`,
+          }.fix_flow.step.${step.step_id}.menu_options.${option}`,
           step.description_placeholders
         );
       },

src/translations/en.json

@@ -3320,7 +3320,7 @@
                 "device": "device"
               }
             },
-            "provided_by_custom_integration": "Provided by a custom integration",
+            "custom_integration": "Custom integration",
             "depends_on_cloud": "Depends on the cloud",
             "yaml_only": "Needs manual configuration",
             "disabled_polling": "Automatic polling for updated data disabled",