Config entry tweaks (#960)

* Add support for picking an option to ha-form

* Fix overlay of paper-dialog inside app-layout

* Handle flows that finish/abort straight away

* Lint

* Remove alerts

* Remove userCreatedFlow from properties

* Don't use setProperties for 1 property

panels/config/config-entries/ha-config-entries.html

@@ -58,7 +58,7 @@
 
         <h1>Add integration</h1>
         <div class='entries layout horizontal wrap'>
-          <template is='dom-repeat' items='[[handlers]]'>
+          <template is='dom-repeat' items='[[_handlers]]'>
             <paper-card heading='[[item]]'>
               <!-- <div class="card-content">Some content</div> -->
               <div class="card-actions">
@@ -72,7 +72,8 @@
 
     <ha-config-flow
       hass='[[hass]]'
-      flow-id='[[flowId]]'
+      flow-id='[[_flowId]]'
+      step='{{_flowStep}}'
       on-flow-closed='_flowClose'
     ></ha-config-flow>
   </template>
@@ -87,11 +88,14 @@
       return {
         hass: Object,
 
-        flowId: {
+        _flowId: {
           type: String,
           value: null,
         },
-        userCreatedFlow: Boolean,
+        /*
+         * The step of the current selected flow, if available.
+         */
+        _flowStep: Object,
 
         /**
          * Existing entries.
@@ -104,7 +108,7 @@
          */
         _progress: Array,
 
-        handlers: Array,
+        _handlers: Array,
       };
     }
 
@@ -116,13 +120,20 @@
     _createFlow(ev) {
       this.hass.callApi('post', 'config/config_entries/flow', { domain: ev.model.item })
         .then((flow) => {
-          this.userCreatedFlow = true;
-          this.flowId = flow.flow_id;
+          this._userCreatedFlow = true;
+          this.setProperties({
+            _flowStep: flow,
+            _flowId: flow.flow_id,
+          });
         });
     }
 
     _continueFlow(ev) {
-      this.flowId = ev.model.item.flow_id;
+      this._userCreatedFlow = false;
+      this.setProperties({
+        _flowId: ev.model.item.flow_id,
+        _flowStep: null,
+      });
     }
 
     _removeEntry(ev) {
@@ -145,18 +156,18 @@
         this._loadData();
 
       // Remove a flow if it was not finished and was started by the user
-      } else if (this.userCreatedFlow) {
-        this.hass.callApi('delete', `config/config_entries/flow/${this.flowId}`);
+      } else if (this._userCreatedFlow) {
+        this.hass.callApi('delete', `config/config_entries/flow/${this._flowId}`);
       }
-      this.flowId = null;
-      this.userCreatedFlow = false;
+
+      this._flowId = null;
     }
 
     _loadData() {
       this._loadEntries();
       this._loadDiscovery();
       this.hass.callApi('get', 'config/config_entries/flow_handlers')
-        .then((handlers) => { this.handlers = handlers; });
+        .then((handlers) => { this._handlers = handlers; });
     }
 
     _loadEntries() {

panels/config/config-entries/ha-config-flow.html

@@ -25,7 +25,7 @@
     <paper-dialog
       id='dialog'
       with-backdrop
-      opened='[[flowId]]'
+      opened='[[step]]'
       on-opened-changed='_openedChanged'
     >
       <h2>
@@ -91,11 +91,17 @@ class HaConfigFlow extends window.hassMixins.EventsMixin(Polymer.Element) {
   static get properties() {
     return {
       hass: Object,
-      step: Object,
+      step: {
+        type: Object,
+        notify: true,
+      },
       flowId: {
         type: String,
         observer: '_flowIdChanged'
       },
+      /*
+       * Store user entered data.
+       */
       stepData: Object,
     };
   }
@@ -107,10 +113,28 @@ class HaConfigFlow extends window.hassMixins.EventsMixin(Polymer.Element) {
         this._submitStep();
       }
     });
+    // Fix for overlay showing on top of dialog.
+    this.$.dialog.addEventListener('iron-overlay-opened', (ev) => {
+      if (ev.target.withBackdrop) {
+        ev.target.parentNode.insertBefore(ev.target.backdropElement, ev.target);
+      }
+    });
   }
 
   _flowIdChanged(flowId) {
-    if (!flowId) return;
+    if (!flowId) {
+      this.setProperties({
+        step: null,
+        stepData: {},
+      });
+      return;
+
+    // Check if parent passed in step data to use.
+    } else if (this.step) {
+      this._processStep(this.step);
+      return;
+    }
+
     this.hass.callApi('get', `config/config_entries/flow/${flowId}`)
       .then((step) => {
         this._processStep(step);
@@ -146,7 +170,7 @@ class HaConfigFlow extends window.hassMixins.EventsMixin(Polymer.Element) {
 
   _openedChanged(ev) {
     // Closed dialog by clicking on the overlay
-    if (!ev.detail.value) {
+    if (this.step && !ev.detail.value) {
       this.fire('flow-closed', {
         flowFinished: ['success', 'abort'].includes(this.step.type)
       });

panels/config/config-entries/ha-form.html

@@ -3,6 +3,9 @@
 <link rel="import" href='../../../bower_components/paper-input/paper-input.html'>
 <link rel="import" href='../../../bower_components/paper-slider/paper-slider.html'>
 <link rel="import" href='../../../bower_components/paper-checkbox/paper-checkbox.html'>
+<link rel='import' href='../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
+<link rel='import' href='../../../bower_components/paper-listbox/paper-listbox.html'>
+<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
 
 <dom-module id="ha-form">
   <template>
@@ -69,11 +72,18 @@
       </template>
 
       <template is='dom-if' if='[[_equals(schema.type, "select")]]' restamp>
-        <!--TODO-->
-        <paper-input
-          label='[[schema.name]]'
-          value='{{data}}'
-        ></paper-input>
+        <paper-dropdown-menu label='[[schema.name]]'>
+          <paper-listbox
+            slot="dropdown-content"
+            attr-for-selected="item-name"
+            selected="{{data}}"
+          >
+            <template is='dom-repeat'
+                      items='[[schema.options]]'>
+              <paper-item item-name='[[item]]'>[[item]]</paper-item>
+            </template>
+          </paper-listbox>
+        </paper-dropdown-menu>
       </template>
 
     </template>