Disable resource panel in safe mode (#18437)

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

@@ -1,5 +1,12 @@
 import { mdiPlus } from "@mdi/js";
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoize from "memoize-one";
 import { stringCompare } from "../../../../common/string/compare";
@@ -7,6 +14,7 @@ import {
   DataTableColumnContainer,
   RowClickedEvent,
 } from "../../../../components/data-table/ha-data-table";
+import "../../../../components/ha-card";
 import "../../../../components/ha-fab";
 import "../../../../components/ha-svg-icon";
 import {
@@ -21,7 +29,9 @@ import {
   showConfirmationDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import "../../../../layouts/hass-loading-screen";
+import "../../../../layouts/hass-subpage";
 import "../../../../layouts/hass-tabs-subpage-data-table";
+import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant, Route } from "../../../../types";
 import { loadLovelaceResources } from "../../../lovelace/common/load-resources";
 import { lovelaceTabs } from "../ha-config-lovelace";
@@ -72,6 +82,36 @@ export class HaConfigLovelaceRescources extends LitElement {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
 
+    if (this.hass.config.safe_mode) {
+      return html`
+        <hass-subpage
+          .hass=${this.hass}
+          .narrow=${this.narrow}
+          back-path="/config"
+          .header=${this.hass.localize(
+            "ui.panel.config.lovelace.resources.caption"
+          )}
+        >
+          <div class="content">
+            <ha-card outlined>
+              <div class="card-content">
+                <h2>
+                  ${this.hass.localize(
+                    "ui.panel.config.lovelace.resources.unavailable"
+                  )}
+                </h2>
+                <p>
+                  ${this.hass.localize(
+                    "ui.panel.config.lovelace.resources.unavailable_safe_mode"
+                  )}
+                </p>
+              </div>
+            </ha-card>
+          </div>
+        </hass-subpage>
+      `;
+    }
+
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -192,4 +232,24 @@ export class HaConfigLovelaceRescources extends LitElement {
       },
     });
   }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .content {
+          padding: 28px 20px 0;
+          max-width: 1040px;
+          margin: 0 auto;
+        }
+        h2 {
+          margin-top: 0;
+          margin-bottom: 12px;
+        }
+        p {
+          margin: 0;
+        }
+      `,
+    ];
+  }
 }

src/panels/lovelace/common/load-resources.ts

@@ -10,11 +10,6 @@ export const loadLovelaceResources = (
   resources: NonNullable<LovelaceResource[]>,
   hass: HomeAssistant
 ) => {
-  // Don't load ressources on safe mode
-  // Sometimes, hass.config is null but it should not.
-  if (hass.config?.safe_mode) {
-    return;
-  }
   resources.forEach((resource) => {
     const normalizedUrl = new URL(
       resource.url,

src/translations/en.json

@@ -2140,6 +2140,8 @@
               "js": "JavaScript file (deprecated)",
               "module": "JavaScript module"
             },
+            "unavailable": "Resources unavailable",
+            "unavailable_safe_mode": "Resources are not available in safe mode",
             "picker": {
               "headers": {
                 "url": "URL",