From ffde39802e03152b1586af6da27e97aaf330d2a8 Mon Sep 17 00:00:00 2001
From: karwosts <karwosts@gmail.com>
Date: Thu, 23 May 2024 06:32:40 -0700
Subject: [PATCH] Sort yaml reloads on translated domain

---
 .../developer-yaml-config.ts                  | 45 ++++++++++++-------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
index d35bfa5e8c89..f08698523a04 100644
--- a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
+++ b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
@@ -15,6 +15,7 @@ import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
 import { CheckConfigResult, checkCoreConfig } from "../../../data/core";
 import { domainToName } from "../../../data/integration";
+import { stringCompare } from "../../../common/string/compare";
 import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route, TranslationDict } from "../../../types";
@@ -24,6 +25,11 @@ type ReloadableDomain = Exclude<
   "heading" | "introduction" | "reload"
 >;
 
+interface TranslatedReloadableDomain {
+  domain: ReloadableDomain;
+  name: string;
+}
+
 @customElement("developer-yaml-config")
 export class DeveloperYamlConfig extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -38,7 +44,7 @@ export class DeveloperYamlConfig extends LitElement {
 
   @state() private _validating = false;
 
-  @state() private _reloadableDomains: ReloadableDomain[] = [];
+  @state() private _reloadableDomains: TranslatedReloadableDomain[] = [];
 
   @state() private _validateResult?: CheckConfigResult;
 
@@ -51,12 +57,27 @@ export class DeveloperYamlConfig extends LitElement {
     const oldHass = changedProperties.get("hass");
     if (
       changedProperties.has("hass") &&
-      (!oldHass || oldHass.config.components !== this.hass.config.components)
+      (!oldHass ||
+        oldHass.config.components !== this.hass.config.components ||
+        oldHass.localize !== this.hass.localize)
     ) {
-      this._reloadableDomains = componentsWithService(
-        this.hass,
-        "reload"
-      ).sort() as ReloadableDomain[];
+      this._reloadableDomains = (
+        componentsWithService(this.hass, "reload") as ReloadableDomain[]
+      )
+        .map((domain) => ({
+          domain,
+          name:
+            this.hass.localize(
+              `ui.panel.developer-tools.tabs.yaml.section.reloading.${domain}`
+            ) ||
+            this.hass.localize(
+              "ui.panel.developer-tools.tabs.yaml.section.reloading.reload",
+              { domain: domainToName(this.hass.localize, domain) }
+            ),
+        }))
+        .sort((a, b) =>
+          stringCompare(a.name, b.name, this.hass.locale.language)
+        );
     }
   }
 
@@ -176,19 +197,13 @@ export class DeveloperYamlConfig extends LitElement {
             </ha-call-service-button>
           </div>
           ${this._reloadableDomains.map(
-            (domain) => html`
+            (reloadable) => html`
               <div class="card-actions">
                 <ha-call-service-button
                   .hass=${this.hass}
-                  .domain=${domain}
+                  .domain=${reloadable.domain}
                   service="reload"
-                  >${this.hass.localize(
-                    `ui.panel.developer-tools.tabs.yaml.section.reloading.${domain}`
-                  ) ||
-                  this.hass.localize(
-                    "ui.panel.developer-tools.tabs.yaml.section.reloading.reload",
-                    { domain: domainToName(this.hass.localize, domain) }
-                  )}
+                  >${reloadable.name}
                 </ha-call-service-button>
               </div>
             `