Config panel for Config Entries (#861)

* Initial implementation

* Update UI

* Update

* Address comments

* More comments

* Lint

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

@@ -0,0 +1,175 @@
+<link rel="import" href='../../../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../../../bower_components/paper-button/paper-button.html'>
+<link rel='import' href='../../../bower_components/paper-card/paper-card.html'>
+<link rel='import' href='../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
+
+<link rel='import' href='../../../src/util/hass-mixins.html'>
+<link rel='import' href='../../../src/resources/ha-style.html'>
+<link rel='import' href='../../../src/layouts/hass-subpage.html'>
+
+<link rel='import' href='./ha-config-flow.html'>
+
+<dom-module id="ha-config-entries">
+  <template>
+    <style include='iron-flex ha-style'>
+      .content {
+        padding: 8px;
+      }
+      .entries {
+        margin: 0 -4px;
+      }
+      .entries paper-card {
+        margin: 4px;
+      }
+    </style>
+    <hass-subpage title='Integrations'>
+      <div class='content'>
+        <h1>Configured</h1>
+        <template is='dom-if' if='[[!_entries.length]]'>
+          <i>Nothing configured.</i>
+        </template>
+        <div class='entries layout horizontal wrap'>
+          <template is='dom-repeat' items='[[_entries]]'>
+            <paper-card heading='[[item.title]]'>
+              <div class='card-content'>
+                Integration: [[item.domain]]<br>
+                State: [[item.state]]<br>
+                Added by: [[item.source]]
+              </div>
+              <div class="card-actions">
+                <paper-button on-tap='_removeEntry'>Remove</paper-button>
+              </div>
+            </paper-card>
+          </template>
+        </div>
+
+        <template is='dom-if' if='[[_progress.length]]'>
+          <h1>To be finished</h1>
+          <div class='entries layout horizontal wrap'>
+            <template is='dom-repeat' items='[[_progress]]'>
+              <paper-card heading='[[item.domain]]'>
+                <div class="card-actions">
+                  <paper-button on-tap='_continueFlow'>Configure</paper-button>
+                </div>
+              </paper-card>
+            </template>
+          </div>
+        </template>
+
+        <h1>Add integration</h1>
+        <div class='entries layout horizontal wrap'>
+          <template is='dom-repeat' items='[[handlers]]'>
+            <paper-card heading='[[item]]'>
+              <!-- <div class="card-content">Some content</div> -->
+              <div class="card-actions">
+                <paper-button on-tap='_createFlow'>Configure</paper-button>
+              </div>
+            </paper-card>
+          </template>
+        </div>
+      </div>
+    </hass-subpage>
+
+    <ha-config-flow
+      hass='[[hass]]'
+      flow-id='[[flowId]]'
+      on-flow-closed='_flowClose'
+    ></ha-config-flow>
+  </template>
+</dom-module>
+
+<script>
+{
+  class HaConfigManager extends window.hassMixins.NavigateMixin(Polymer.Element) {
+    static get is() { return 'ha-config-entries'; }
+
+    static get properties() {
+      return {
+        hass: Object,
+
+        flowId: {
+          type: String,
+          value: null,
+        },
+        userCreatedFlow: Boolean,
+
+        /**
+         * Existing entries.
+         */
+        _entries: Array,
+
+        /**
+         * Current flows that are in progress and have not been started by a user.
+         * For example, can be discovered devices that require more config.
+         */
+        _progress: Array,
+
+        handlers: Array,
+      };
+    }
+
+    ready() {
+      super.ready();
+      this._loadData();
+    }
+
+    _createFlow(ev) {
+      this.hass.callApi('post', 'config/config_entries/flow', { domain: ev.model.item })
+        .then((flow) => {
+          this.userCreatedFlow = true;
+          this.flowId = flow.flow_id;
+        });
+    }
+
+    _continueFlow(ev) {
+      this.flowId = ev.model.item.flow_id;
+    }
+
+    _removeEntry(ev) {
+      if (!confirm('Are you sure you want to delete this integration?')) return;
+
+      const entryId = ev.model.item.entry_id;
+
+      this.hass.callApi('delete', `config/config_entries/entry/${entryId}`)
+        .then((result) => {
+          this._entries = this._entries.filter(entry => entry.entry_id !== entryId);
+          if (result.require_restart) {
+            alert('Restart Home Assistant to finish removing this integration');
+          }
+        });
+    }
+
+    _flowClose(ev) {
+      // Was the flow completed?
+      if (ev.detail.flowFinished) {
+        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}`);
+      }
+      this.flowId = null;
+      this.userCreatedFlow = false;
+    }
+
+    _loadData() {
+      this._loadEntries();
+      this._loadDiscovery();
+      this.hass.callApi('get', 'config/config_entries/flow_handlers')
+        .then((handlers) => { this.handlers = handlers; });
+    }
+
+    _loadEntries() {
+      this.hass.callApi('get', 'config/config_entries/entry')
+        .then((entries) => { this._entries = entries; });
+    }
+
+    _loadDiscovery() {
+      this.hass.callApi('get', 'config/config_entries/flow')
+        .then((progress) => { this._progress = progress; });
+    }
+  }
+
+  customElements.define(HaConfigManager.is, HaConfigManager);
+}
+</script>

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

@@ -0,0 +1,158 @@
+<link rel="import" href='../../../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../../../bower_components/paper-dialog/paper-dialog.html'>
+<link rel='import' href='../../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html'>
+<link rel="import" href='../../../bower_components/paper-button/paper-button.html'>
+
+<link rel='import' href='../../../src/util/hass-mixins.html'>
+<link rel="import" href='../../../src/components/ha-markdown.html'>
+<link rel='import' href='../../../src/resources/ha-style.html'>
+<link rel="import" href='./ha-form.html'>
+
+<dom-module id="ha-config-flow">
+  <template>
+    <style include='ha-style-dialog'>
+      .error {
+        color: red;
+      }
+      paper-dialog {
+        max-width: 500px;
+      }
+      ha-markdown img:first-child:last-child {
+        display: block;
+        margin: 0 auto;
+      }
+    </style>
+    <paper-dialog
+      id='dialog'
+      with-backdrop
+      opened='[[flowId]]'
+      on-opened-changed='_openedChanged'
+    >
+      <h2>
+        <template is='dom-if' if='[[_equals(step.type, "abort")]]'>
+          Aborted
+        </template>
+        <template is='dom-if' if='[[_equals(step.type, "create_entry")]]'>
+          Success!
+        </template>
+        <template is='dom-if' if='[[_equals(step.type, "form")]]'>
+          [[step.title]]
+        </template>
+      </h2>
+      <paper-dialog-scrollable>
+        <template is='dom-if' if='[[!step]]'>
+          Loading flow.
+        </template>
+        <template is='dom-if' if='[[step]]'>
+          <template is='dom-if' if='[[_equals(step.type, "abort")]]'>
+            <p>[[step.reason]]</p>
+          </template>
+
+          <template is='dom-if' if='[[_equals(step.type, "create_entry")]]'>
+            <p>Created config for [[step.title]]</p>
+          </template>
+
+          <template is='dom-if' if='[[_equals(step.type, "form")]]'>
+            <template is='dom-if' if='[[step.description]]'>
+              <ha-markdown content='[[step.description]]'></ha-markdown>
+            </template>
+
+            <template is='dom-if' if='[[step.errors.base]]'>
+              <div class='error'>[[step.errors.base]]</div>
+            </template>
+
+            <ha-form
+              data='{{stepData}}'
+              schema='[[step.data_schema]]'
+              error='[[step.errors]]'
+            ></ha-form>
+          </template>
+        </template>
+      </paper-dialog-scrollable>
+      <div class='buttons'>
+        <template is='dom-if' if='[[_equals(step.type, "abort")]]'>
+          <paper-button on-tap='_flowDone'>Close</paper-button>
+        </template>
+        <template is='dom-if' if='[[_equals(step.type, "create_entry")]]'>
+          <paper-button on-tap='_flowDone'>Close</paper-button>
+        </template>
+        <template is='dom-if' if='[[_equals(step.type, "form")]]'>
+          <paper-button on-tap='_submitStep'>Submit</paper-button>
+        </template>
+      </div>
+    </paper-dialog>
+  </template>
+</dom-module>
+
+<script>
+class HaConfigFlow extends window.hassMixins.EventsMixin(Polymer.Element) {
+  static get is() { return 'ha-config-flow'; }
+
+  static get properties() {
+    return {
+      hass: Object,
+      step: Object,
+      flowId: {
+        type: String,
+        observer: '_flowIdChanged'
+      },
+      stepData: Object,
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.addEventListener('keypress', (ev) => {
+      if (ev.keyCode === 13) {
+        this._submitStep();
+      }
+    });
+  }
+
+  _flowIdChanged(flowId) {
+    if (!flowId) return;
+    this.hass.callApi('get', `config/config_entries/flow/${flowId}`)
+      .then((step) => {
+        this._processStep(step);
+        // When the flow changes, center the dialog.
+        // Don't do it on each step or else the dialog keeps bouncing.
+        setTimeout(() => this.$.dialog.center(), 0);
+      });
+  }
+
+  _submitStep() {
+    this.hass.callApi('post', `config/config_entries/flow/${this.flowId}`, this.stepData)
+      .then(step => this._processStep(step));
+  }
+
+  _processStep(step) {
+    if (!step.errors) step.errors = {};
+    this.step = step;
+    // We got a new form if there are no errors.
+    if (Object.keys(step.errors).length === 0) {
+      this.stepData = {};
+    }
+  }
+
+  _flowDone() {
+    this.fire('flow-closed', {
+      flowFinished: true
+    });
+  }
+
+  _equals(a, b) {
+    return a === b;
+  }
+
+  _openedChanged(ev) {
+    // Closed dialog by clicking on the overlay
+    if (!ev.detail.value) {
+      this.fire('flow-closed', {
+        flowFinished: ['success', 'abort'].includes(this.step.type)
+      });
+    }
+  }
+}
+
+customElements.define(HaConfigFlow.is, HaConfigFlow);
+</script>

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

@@ -0,0 +1,120 @@
+<link rel="import" href='../../../bower_components/polymer/polymer-element.html'>
+
+<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'>
+
+<dom-module id="ha-form">
+  <template>
+    <style>
+      .error {
+        color: red;
+      }
+    </style>
+    <template is='dom-if' if='[[_isArray(schema)]]' restamp>
+      <template is='dom-repeat' items='[[schema]]'>
+        <ha-form
+          data='[[_getValue(data, item)]]'
+          schema='[[item]]'
+          error='[[_getValue(error, item)]]'
+          on-data-changed='_valueChanged'
+        ></ha-form>
+      </template>
+    </template>
+    <template is='dom-if' if='[[!_isArray(schema)]]' restamp>
+      <template is='dom-if' if='[[error]]'>
+        <div class='error'>[[error]]</div>
+      </template>
+
+      <template is='dom-if' if='[[_equals(schema.type, "string")]]' restamp>
+        <paper-input
+          label='[[schema.name]]'
+          value='{{data}}'
+        ></paper-input>
+      </template>
+
+      <template is='dom-if' if='[[_equals(schema.type, "integer")]]' restamp>
+        <template is='dom-if' if='[[_isRange(schema)]]' restamp>
+          <div>
+            [[schema.name]]
+            <paper-slider
+              pin
+              value='{{data}}'
+              min='[[schema.value-min]]'
+              max='[[schema.value-max]]'
+            ></paper-slider>
+          </div>
+        </template>
+        <template is='dom-if' if='[[!_isRange(schema)]]' restamp>
+          <paper-input
+            label='[[schema.name]]'
+            value='{{data}}'
+            type='number'
+          ></paper-input>
+        </template>
+      </template>
+
+      <template is='dom-if' if='[[_equals(schema.type, "float")]]' restamp>
+        <!--TODO-->
+        <paper-input
+          label='[[schema.name]]'
+          value='{{data}}'
+        ></paper-input>
+      </template>
+
+      <template is='dom-if' if='[[_equals(schema.type, "boolean")]]' restamp>
+        <paper-checkbox
+          checked='{{data}}'
+        >[[schema.name]]</paper-checkbox>
+      </template>
+
+      <template is='dom-if' if='[[_equals(schema.type, "select")]]' restamp>
+        <!--TODO-->
+        <paper-input
+          label='[[schema.name]]'
+          value='{{data}}'
+        ></paper-input>
+      </template>
+
+    </template>
+  </template>
+</dom-module>
+
+<script>
+class HaForm extends window.hassMixins.EventsMixin(Polymer.Element) {
+  static get is() { return 'ha-form'; }
+
+  static get properties() {
+    return {
+      data: {
+        type: Object,
+        notify: true,
+      },
+      schema: Object,
+      error: Object,
+    };
+  }
+
+  _isArray(val) {
+    return Array.isArray(val);
+  }
+
+  _isRange(schema) {
+    return ('value-min' in schema) && ('value-max' in schema);
+  }
+
+  _equals(a, b) {
+    return a === b;
+  }
+
+  _getValue(obj, item) {
+    return obj[item.name];
+  }
+
+  _valueChanged(ev) {
+    this.set(['data', ev.model.item.name], ev.detail.value);
+  }
+}
+
+customElements.define(HaForm.is, HaForm);
+</script>

panels/config/dashboard/ha-config-dashboard.html

@@ -9,6 +9,7 @@
 
 <link rel="import" href="./ha-config-navigation.html">
 <link rel="import" href="./ha-config-cloud-menu.html">
+<link rel="import" href="./ha-config-entries-menu.html">
 
 
 <dom-module id="ha-config-dashboard">
@@ -34,13 +35,19 @@
           <span slot='header'>[[localize('ui.panel.config.header')]]</span>
           <span slot='introduction'>[[localize('ui.panel.config.introduction')]]</span>
 
-          <template is='dom-if' if='[[computeIsCloudLoaded(hass)]]'>
+          <template is='dom-if' if='[[computeIsLoaded(hass, "cloud")]]'>
             <ha-config-cloud-menu
               hass='[[hass]]'
               account='[[account]]'
             ></ha-config-cloud-menu>
           </template>
 
+          <template is='dom-if' if='[[computeIsLoaded(hass, "config.config_entries")]]'>
+            <ha-config-entries-menu
+              hass='[[hass]]'
+            ></ha-config-entries-menu>
+          </template>
+
           <ha-config-navigation
             hass='[[hass]]'
           ></ha-config-navigation>
@@ -67,8 +74,8 @@ class HaConfigDashboard extends window.hassMixins.LocalizeMixin(Polymer.Element)
     };
   }
 
-  computeIsCloudLoaded(hass) {
+  computeIsLoaded(hass, component) {
-    return window.hassUtil.isComponentLoaded(hass, 'cloud');
+    return window.hassUtil.isComponentLoaded(hass, component);
   }
 }
 

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

@@ -0,0 +1,49 @@
+<link rel="import" href='../../../bower_components/polymer/polymer-element.html'>
+<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
+<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
+
+<link rel="import" href="../../../src/util/hass-mixins.html">
+
+<dom-module id="ha-config-entries-menu">
+  <template>
+    <style include="iron-flex">
+      paper-card {
+        display: block;
+      }
+      paper-item {
+        cursor: pointer;
+      }
+    </style>
+    <paper-card>
+      <paper-item on-tap='_navigate'>
+        <paper-item-body two-line>
+          Integrations
+          <div secondary>EXPERIMENTAL – Manage connected devices and services</div>
+        </paper-item-body>
+        <iron-icon icon='mdi:chevron-right'></iron-icon>
+      </paper-item>
+    </paper-card>
+  </template>
+</dom-module>
+
+<script>
+class HaConfigEntriesMenu extends window.hassMixins.NavigateMixin(Polymer.Element) {
+  static get is() { return 'ha-config-entries-menu'; }
+
+  static get properties() {
+    return {
+      hass: Object,
+      isWide: Boolean,
+      account: Object,
+    };
+  }
+
+  _navigate() {
+    this.navigate('/config/integrations');
+  }
+}
+
+customElements.define(HaConfigEntriesMenu.is, HaConfigEntriesMenu);
+</script>

panels/config/ha-panel-config.html

@@ -13,6 +13,7 @@
 <link rel="import" href="./script/ha-config-script.html">
 <link rel="import" href="./zwave/ha-config-zwave.html">
 <link rel="import" href="./customize/ha-config-customize.html">
+<link rel="import" href="./config-entries/ha-config-entries.html">
 
 <dom-module id="ha-panel-config">
   <template>
@@ -87,6 +88,11 @@
         is-wide='[[isWide]]'
       ></ha-config-customize>
 
+      <ha-config-entries
+        page-name='integrations'
+        hass='[[hass]]'
+      ></ha-config-entries>
+
       <hass-error-screen
         page-name='not-found'
         error='Page not found.'

src/components/ha-markdown.html

@@ -34,6 +34,7 @@ class HaMarkdown extends window.hassMixins.EventsMixin(HTMLElement) {
       if (this._scriptLoaded === 1) {
         const converter = window.Markdown.getSanitizingConverter();
         this.innerHTML = converter.makeHtml(this._content);
+        this._resize();
 
         const walker = document.createTreeWalker(this, 1 /* SHOW_ELEMENT */, null, false);
 

src/dialogs/more-info-dialog.html

@@ -7,10 +7,11 @@
 <link rel="import" href="../more-infos/more-info-content.html">
 <link rel="import" href="../state-summary/state-card-content.html">
 <link rel='import' href='../util/hass-mixins.html'>
+<link rel='import' href='../resources/ha-style.html'>
 
 <dom-module id="more-info-dialog">
   <template>
-    <style>
+    <style include="ha-style-dialog">
       paper-dialog {
         font-size: 14px;
         width: 365px;
@@ -42,25 +43,6 @@
         margin-bottom: 24px;
         font-size: 14px;
       }
-
-      @media all and (max-width: 450px), all and (max-height: 500px) {
-        paper-dialog {
-          margin: 0;
-          width: 100%;
-          max-height: calc(100% - 64px);
-
-          position: fixed !important;
-          bottom: 0px;
-          left: 0px;
-          right: 0px;
-          overflow: scroll;
-          border-bottom-left-radius: 0px;
-          border-bottom-right-radius: 0px;
-        }
-        paper-dialog[data-domain=history_graph] {
-          width: 100%;
-        }
-      }
     </style>
 
     <!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->

src/resources/ha-style.html

@@ -135,3 +135,26 @@
     </style>
   </template>
 </dom-module>
+
+
+<dom-module id='ha-style-dialog'>
+  <template>
+    <style>
+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        paper-dialog {
+          margin: 0;
+          width: 100% !important;
+          max-height: calc(100% - 64px);
+
+          position: fixed !important;
+          bottom: 0px;
+          left: 0px;
+          right: 0px;
+          overflow: scroll;
+          border-bottom-left-radius: 0px;
+          border-bottom-right-radius: 0px;
+        }
+      }
+    </style>
+  </template>
+</dom-module>