Show an error screen when panel cannot be resolved (#1303)

* Show an error screen when panel cannot be resolved

* Lint

src/layouts/partial-panel-resolver.js

@@ -4,6 +4,7 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import './hass-loading-screen.js';
+import './hass-error-screen.js';
 import { importHref } from '../resources/html-import/import-href';
 
 import dynamicContentUpdater from '../common/dom/dynamic_content_updater.js';
@@ -109,11 +110,19 @@ class PartialPanelResolver extends NavigateMixin(PolymerElement) {
     </style>
     <app-route route="{{route}}" pattern="/:panel" data="{{routeData}}" tail="{{routeTail}}"></app-route>
 
-    <template is="dom-if" if="[[!resolved]]">
+    <template is="dom-if" if="[[_equal(_state, 'loading')]]">
       <hass-loading-screen narrow="[[narrow]]" show-menu="[[showMenu]]"></hass-loading-screen>
     </template>
+    <template is="dom-if" if="[[_equal(_state, 'error')]]">
+      <hass-error-screen
+        title=''
+        error="Error while loading this panel."
+        narrow="[[narrow]]"
+        show-menu="[[showMenu]]"
+      ></hass-error-screen>
+    </template>
 
-    <span id="panel" hidden$="[[!resolved]]"></span>
+    <span id="panel" hidden$="[[!_equal(_state, 'loaded')]]"></span>
 `;
   }
 
@@ -141,9 +150,9 @@ class PartialPanelResolver extends NavigateMixin(PolymerElement) {
         type: Object,
         observer: 'updateAttributes',
       },
-      resolved: {
-        type: Boolean,
-        value: false,
+      _state: {
+        type: String,
+        value: 'loading',
       },
       panel: {
         type: Object,
@@ -161,7 +170,7 @@ class PartialPanelResolver extends NavigateMixin(PolymerElement) {
       return;
     }
 
-    this.resolved = false;
+    this._state = 'loading';
 
     let loadingProm;
     if (panel.url) {
@@ -184,17 +193,9 @@ class PartialPanelResolver extends NavigateMixin(PolymerElement) {
           route: this.routeTail,
           panel: panel,
         });
-        this.resolved = true;
-      },
-
-      (err) => {
-        /* eslint-disable-next-line */
-        console.error('Error loading panel', err);
-        // a single retry of importHref in the error callback fixes a webkit refresh issue
-        if (!this.retrySetPanelForWebkit(panel)) {
-          this.panelLoadError(panel);
-        }
+        this._state = 'loaded';
       },
+      () => { this._state = 'error'; },
     );
   }
 
@@ -202,14 +203,6 @@ class PartialPanelResolver extends NavigateMixin(PolymerElement) {
     alert(`Failed to resolve panel ${panel.component_name}`);
   }
 
-  retrySetPanelForWebkit(panel) {
-    if (this._retryingPanelChanged) {
-      return false;
-    }
-    this._retryingPanelChanged = true;
-    return this.panelChanged(panel);
-  }
-
   updateAttributes() {
     var customEl = dom(this.$.panel).lastChild;
     if (!customEl) return;
@@ -222,6 +215,10 @@ class PartialPanelResolver extends NavigateMixin(PolymerElement) {
   computeCurrentPanel(hass) {
     return hass.panels[hass.panelUrl];
   }
+
+  _equal(a, b) {
+    return a === b;
+  }
 }
 
 customElements.define('partial-panel-resolver', PartialPanelResolver);