Add UI for reload resources service (#5229)

* Add UI for reload resources service

* Update hui-root.ts

* Check for config of main panel

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -154,14 +154,14 @@ export class HaConfigLovelaceRescources extends LitElement {
         this._resources = this._resources!.concat(created).sort((res1, res2) =>
           compare(res1.url, res2.url)
         );
-        loadLovelaceResources(this._resources, this.hass!.auth.data.hassUrl);
+        loadLovelaceResources([created], this.hass!.auth.data.hassUrl);
       },
       updateResource: async (values) => {
         const updated = await updateResource(this.hass!, resource!.id, values);
         this._resources = this._resources!.map((res) =>
           res === resource ? updated : res
         );
-        loadLovelaceResources(this._resources, this.hass!.auth.data.hassUrl);
+        loadLovelaceResources([updated], this.hass!.auth.data.hassUrl);
       },
       removeResource: async () => {
         if (

src/panels/lovelace/hui-root.ts

@@ -29,7 +29,7 @@ import "../../components/ha-paper-icon-button-arrow-prev";
 import "../../components/ha-icon";
 import { debounce } from "../../common/util/debounce";
 import { HomeAssistant } from "../../types";
-import { LovelaceConfig } from "../../data/lovelace";
+import { LovelaceConfig, LovelacePanelConfig } from "../../data/lovelace";
 import { navigate } from "../../common/navigate";
 import { fireEvent } from "../../common/dom/fire_event";
 import { swapView } from "./editor/config-util";
@@ -49,7 +49,10 @@ import { haStyle } from "../../resources/styles";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
-import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../dialogs/generic/show-dialog-box";
 import memoizeOne from "memoize-one";
 
 class HUIRoot extends LitElement {
@@ -225,6 +228,21 @@ class HUIRoot extends LitElement {
                             </paper-item>
                           `
                         : ""}
+                      ${(this.hass.panels.lovelace
+                        ?.config as LovelacePanelConfig)?.mode === "yaml"
+                        ? html`
+                            <paper-item
+                              aria-label=${this.hass!.localize(
+                                "ui.panel.lovelace.menu.reload_resources"
+                              )}
+                              @tap="${this._handleReloadResources}"
+                            >
+                              ${this.hass!.localize(
+                                "ui.panel.lovelace.menu.reload_resources"
+                              )}
+                            </paper-item>
+                          `
+                        : ""}
                       ${this.hass!.user!.is_admin &&
                       !this.hass!.config.safe_mode
                         ? html`
@@ -550,6 +568,19 @@ class HUIRoot extends LitElement {
     fireEvent(this, "config-refresh");
   }
 
+  private _handleReloadResources(): void {
+    this.hass.callService("lovelace", "reload_resources");
+    showConfirmationDialog(this, {
+      title: this.hass!.localize(
+        "ui.panel.lovelace.reload_resources.refresh_header"
+      ),
+      text: this.hass!.localize(
+        "ui.panel.lovelace.reload_resources.refresh_body"
+      ),
+      confirm: () => location.reload(),
+    });
+  }
+
   private _handleUnusedEntities(): void {
     navigate(this, `${this.route?.prefix}/hass-unused-entities`);
   }

src/translations/en.json

@@ -1891,9 +1891,14 @@
           "configure_ui": "Configure UI",
           "help": "Help",
           "refresh": "Refresh",
+          "reload_resources": "Reload resources",
           "exit_edit_mode": "Exit UI edit mode",
           "close": "Close"
         },
+        "reload_resources": {
+          "refresh_header": "Do you want to refresh?",
+          "refresh_body": "You have to refresh the page to complete the reload, do you want to refresh now?"
+        },
         "editor": {
           "header": "Edit UI",
           "menu": {