Rename experimental UI to lovelace (#1307)

* Rename experimental UI to lovelace

* Lint

src/layouts/partial-panel-resolver.js

@@ -50,8 +50,8 @@ function ensureLoaded(panel) {
       imported = import(/* webpackChunkName: "panel-dev-template" */ '../panels/dev-template/ha-panel-dev-template.js');
       break;
 
-    case 'experimental-ui':
-      imported = import(/* webpackChunkName: "panel-experimental-ui" */ '../panels/experimental-ui/ha-panel-experimental-ui.js');
+    case 'lovelace':
+      imported = import(/* webpackChunkName: "panel-lovelace" */ '../panels/lovelace/ha-panel-lovelace.js');
       break;
 
     case 'history':
@@ -180,7 +180,7 @@ class PartialPanelResolver extends NavigateMixin(PolymerElement) {
     }
 
     if (loadingProm === null) {
-      this.panelLoadError(panel);
+      this._state = 'error';
       return;
     }
 
@@ -199,10 +199,6 @@ class PartialPanelResolver extends NavigateMixin(PolymerElement) {
     );
   }
 
-  panelLoadError(panel) {
-    alert(`Failed to resolve panel ${panel.component_name}`);
-  }
-
   updateAttributes() {
     var customEl = dom(this.$.panel).lastChild;
     if (!customEl) return;

src/panels/dev-info/ha-panel-dev-info.js

@@ -141,7 +141,7 @@ class HaPanelDevInfo extends PolymerElement {
           <p>
             Built using
             <a href='https://www.python.org'>Python 3</a>,
-            <a href='https://www.polymer-project.org' target='_blank'>Polymer [[polymerVersion]]</a>,
+            <a href='https://www.polymer-project.org' target='_blank'>Polymer</a>,
             Icons by <a href='https://www.google.com/design/icons/' target='_blank'>Google</a> and <a href='https://MaterialDesignIcons.com' target='_blank'>MaterialDesignIcons.com</a>.
           </p>
           <p>
@@ -157,6 +157,7 @@ class HaPanelDevInfo extends PolymerElement {
               </div>
             </template>
           </p>
+          <p><a href='/lovelace'>Try out the new Lovelace UI (experimental)</a></p>
         </div>
 
         <div class="system-log-intro">
@@ -233,11 +234,6 @@ class HaPanelDevInfo extends PolymerElement {
         value: false,
       },
 
-      polymerVersion: {
-        type: String,
-        value: Polymer.version,
-      },
-
       errorLog: {
         type: String,
         value: '',

src/panels/lovelace/ha-panel-lovelace.js

@@ -10,18 +10,28 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../layouts/hass-loading-screen.js';
+import '../../layouts/hass-error-screen.js';
 import './hui-root.js';
 
-class ExperimentalUI extends PolymerElement {
+class Lovelace extends PolymerElement {
   static get template() {
     return html`
-      <template is='dom-if' if='[[!_config]]' restamp>
+      <template is='dom-if' if='[[_equal(_state, "loading")]]' restamp>
         <hass-loading-screen
+          title='Lovelace'
           narrow="[[narrow]]"
           show-menu="[[showMenu]]"
         ></hass-loading-screen>
       </template>
-      <template is='dom-if' if='[[_config]]' restamp>
+      <template is='dom-if' if='[[_equal(_state, "error")]]' restamp>
+        <hass-error-screen
+          title='Lovelace'
+          error='[[_errorMsg]]'
+          narrow="[[narrow]]"
+          show-menu="[[showMenu]]"
+        ></hass-error-screen>
+      </template>
+      <template is='dom-if' if='[[_equal(_state, "loaded")]]' restamp>
         <hui-root
           hass='[[hass]]'
           config='[[_config]]'
@@ -51,6 +61,13 @@ class ExperimentalUI extends PolymerElement {
         value: 1,
       },
 
+      _state: {
+        type: String,
+        value: 'loading',
+      },
+
+      _errorMsg: String,
+
       _config: {
         type: Object,
         value: null,
@@ -77,9 +94,22 @@ class ExperimentalUI extends PolymerElement {
   }
 
   _fetchConfig() {
-    this.hass.connection.sendMessagePromise({ type: 'frontend/experimental_ui' })
-      .then((conf) => { this._config = conf.result; });
+    this.hass.connection.sendMessagePromise({ type: 'frontend/lovelace_config' })
+      .then(
+        conf => this.setProperties({
+          _config: conf.result,
+          _state: 'loaded',
+        }),
+        err => this.setProperties({
+          _state: 'error',
+          _errorMsg: err.message,
+        })
+      );
+  }
+
+  _equal(a, b) {
+    return a === b;
   }
 }
 
-customElements.define('ha-panel-experimental-ui', ExperimentalUI);
+customElements.define('ha-panel-lovelace', Lovelace);

src/panels/lovelace/hui-root.js

@@ -31,12 +31,18 @@ class HUIRoot extends EventsMixin(PolymerElement) {
         --paper-tabs-selection-bar-color: var(--text-primary-color, #FFF);
         text-transform: uppercase;
       }
+      app-toolbar a {
+        color: var(--text-primary-color, white);
+      }
     </style>
     <ha-app-layout id="layout">
       <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
           <div main-title>[[_computeTitle(config)]]</div>
+          <a href='https://developers.home-assistant.io/docs/en/lovelace_index.html' tabindex='-1' target='_blank'>
+            <paper-icon-button icon='hass:help-circle-outline'></paper-icon-button>
+          </a>
           <paper-icon-button icon='hass:refresh' on-click='_handleRefresh'></paper-icon-button>
         </app-toolbar>