diff --git a/src/panels/config/integrations/ha-config-entry-row.ts b/src/panels/config/integrations/ha-config-entry-row.ts index 37b1020096..d0aa4b48c0 100644 --- a/src/panels/config/integrations/ha-config-entry-row.ts +++ b/src/panels/config/integrations/ha-config-entry-row.ts @@ -22,6 +22,8 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import memoizeOne from "memoize-one"; +import { caseInsensitiveStringCompare } from "../../../common/string/compare"; +import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name"; import { isDevVersion } from "../../../common/config/version"; import { deleteApplicationCredential, @@ -491,18 +493,34 @@ class HaConfigEntryRow extends LitElement { ); private _getDevices = (): DeviceRegistryEntry[] => - Object.values(this.hass.devices).filter( - (device) => - device.config_entries.includes(this.entry.entry_id) && - device.entry_type !== "service" - ); + Object.values(this.hass.devices) + .filter( + (device) => + device.config_entries.includes(this.entry.entry_id) && + device.entry_type !== "service" + ) + .sort((a, b) => + caseInsensitiveStringCompare( + computeDeviceNameDisplay(a, this.hass), + computeDeviceNameDisplay(b, this.hass), + this.hass.locale.language + ) + ); private _getServices = (): DeviceRegistryEntry[] => - Object.values(this.hass.devices).filter( - (device) => - device.config_entries.includes(this.entry.entry_id) && - device.entry_type === "service" - ); + Object.values(this.hass.devices) + .filter( + (device) => + device.config_entries.includes(this.entry.entry_id) && + device.entry_type === "service" + ) + .sort((a, b) => + caseInsensitiveStringCompare( + computeDeviceNameDisplay(a, this.hass), + computeDeviceNameDisplay(b, this.hass), + this.hass.locale.language + ) + ); private _toggleExpand() { this._expanded = !this._expanded;