From 1f8f6f52bc289e1db22364243e1dd9fa0c11bed8 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Wed, 20 Jun 2018 14:18:18 -0400
Subject: [PATCH] Rename experimental UI to lovelace (#1307)

* Rename experimental UI to lovelace

* Lint
---
 src/layouts/partial-panel-resolver.js         | 10 ++---
 src/panels/dev-info/ha-panel-dev-info.js      |  8 +---
 .../ha-panel-lovelace.js}                     | 42 ++++++++++++++++---
 .../hui-camera-preview-card.js                |  0
 .../hui-entities-card.js                      |  0
 .../hui-entity-filter-card.js                 |  0
 .../hui-error-card.js                         |  0
 .../hui-history-graph-card.js                 |  0
 .../hui-media-control-card.js                 |  0
 .../hui-plant-status-card.js                  |  0
 .../{experimental-ui => lovelace}/hui-root.js |  6 +++
 .../{experimental-ui => lovelace}/hui-view.js |  0
 .../hui-weather-forecast-card.js              |  0
 13 files changed, 47 insertions(+), 19 deletions(-)
 rename src/panels/{experimental-ui/ha-panel-experimental-ui.js => lovelace/ha-panel-lovelace.js} (65%)
 rename src/panels/{experimental-ui => lovelace}/hui-camera-preview-card.js (100%)
 rename src/panels/{experimental-ui => lovelace}/hui-entities-card.js (100%)
 rename src/panels/{experimental-ui => lovelace}/hui-entity-filter-card.js (100%)
 rename src/panels/{experimental-ui => lovelace}/hui-error-card.js (100%)
 rename src/panels/{experimental-ui => lovelace}/hui-history-graph-card.js (100%)
 rename src/panels/{experimental-ui => lovelace}/hui-media-control-card.js (100%)
 rename src/panels/{experimental-ui => lovelace}/hui-plant-status-card.js (100%)
 rename src/panels/{experimental-ui => lovelace}/hui-root.js (94%)
 rename src/panels/{experimental-ui => lovelace}/hui-view.js (100%)
 rename src/panels/{experimental-ui => lovelace}/hui-weather-forecast-card.js (100%)

diff --git a/src/layouts/partial-panel-resolver.js b/src/layouts/partial-panel-resolver.js
index 229aeaa1ca..295db3db1a 100644
--- a/src/layouts/partial-panel-resolver.js
+++ b/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;
diff --git a/src/panels/dev-info/ha-panel-dev-info.js b/src/panels/dev-info/ha-panel-dev-info.js
index 6984dd8232..edefaa11cc 100644
--- a/src/panels/dev-info/ha-panel-dev-info.js
+++ b/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: '',
diff --git a/src/panels/experimental-ui/ha-panel-experimental-ui.js b/src/panels/lovelace/ha-panel-lovelace.js
similarity index 65%
rename from src/panels/experimental-ui/ha-panel-experimental-ui.js
rename to src/panels/lovelace/ha-panel-lovelace.js
index dcac9784dc..1d5c82d717 100644
--- a/src/panels/experimental-ui/ha-panel-experimental-ui.js
+++ b/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);
diff --git a/src/panels/experimental-ui/hui-camera-preview-card.js b/src/panels/lovelace/hui-camera-preview-card.js
similarity index 100%
rename from src/panels/experimental-ui/hui-camera-preview-card.js
rename to src/panels/lovelace/hui-camera-preview-card.js
diff --git a/src/panels/experimental-ui/hui-entities-card.js b/src/panels/lovelace/hui-entities-card.js
similarity index 100%
rename from src/panels/experimental-ui/hui-entities-card.js
rename to src/panels/lovelace/hui-entities-card.js
diff --git a/src/panels/experimental-ui/hui-entity-filter-card.js b/src/panels/lovelace/hui-entity-filter-card.js
similarity index 100%
rename from src/panels/experimental-ui/hui-entity-filter-card.js
rename to src/panels/lovelace/hui-entity-filter-card.js
diff --git a/src/panels/experimental-ui/hui-error-card.js b/src/panels/lovelace/hui-error-card.js
similarity index 100%
rename from src/panels/experimental-ui/hui-error-card.js
rename to src/panels/lovelace/hui-error-card.js
diff --git a/src/panels/experimental-ui/hui-history-graph-card.js b/src/panels/lovelace/hui-history-graph-card.js
similarity index 100%
rename from src/panels/experimental-ui/hui-history-graph-card.js
rename to src/panels/lovelace/hui-history-graph-card.js
diff --git a/src/panels/experimental-ui/hui-media-control-card.js b/src/panels/lovelace/hui-media-control-card.js
similarity index 100%
rename from src/panels/experimental-ui/hui-media-control-card.js
rename to src/panels/lovelace/hui-media-control-card.js
diff --git a/src/panels/experimental-ui/hui-plant-status-card.js b/src/panels/lovelace/hui-plant-status-card.js
similarity index 100%
rename from src/panels/experimental-ui/hui-plant-status-card.js
rename to src/panels/lovelace/hui-plant-status-card.js
diff --git a/src/panels/experimental-ui/hui-root.js b/src/panels/lovelace/hui-root.js
similarity index 94%
rename from src/panels/experimental-ui/hui-root.js
rename to src/panels/lovelace/hui-root.js
index 9769f97c7a..685de280b3 100644
--- a/src/panels/experimental-ui/hui-root.js
+++ b/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>
 
diff --git a/src/panels/experimental-ui/hui-view.js b/src/panels/lovelace/hui-view.js
similarity index 100%
rename from src/panels/experimental-ui/hui-view.js
rename to src/panels/lovelace/hui-view.js
diff --git a/src/panels/experimental-ui/hui-weather-forecast-card.js b/src/panels/lovelace/hui-weather-forecast-card.js
similarity index 100%
rename from src/panels/experimental-ui/hui-weather-forecast-card.js
rename to src/panels/lovelace/hui-weather-forecast-card.js