Add script editor (#393)

* Add script editor

* Cleanup

gulp/tasks/rollup.js

@@ -6,7 +6,8 @@ gulp.task('run_rollup', () => {
   return gulp.src([
     'js/core.js',
     'js/compatibility.js',
-    'js/editor/editor.js',
+    'js/automation-editor/automation-editor.js',
+    'js/script-editor/script-editor.js',
     'demo_data/demo_data.js',
   ])
   .pipe(rollupEach(rollupConfig))

js/automation-editor/automation.js

@@ -1,8 +1,8 @@
 import { h, Component } from 'preact';
 
 import Trigger from './trigger';
-import Condition from './condition';
-import Script from './script';
+import Condition from '../common/component/condition';
+import Script from '../common/component/script';
 
 export default class Automation extends Component {
   constructor() {

js/automation-editor/trigger/event.js

@@ -1,8 +1,8 @@
 import { h, Component } from 'preact';
 
-import JSONTextArea from '../json_textarea';
+import JSONTextArea from '../../common/component/json_textarea';
 
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../common/util/event';
 
 export default class EventTrigger extends Component {
   constructor() {

js/automation-editor/trigger/mqtt.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../common/util/event';
 
 export default class MQTTTrigger extends Component {
   constructor() {

js/automation-editor/trigger/numeric_state.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../common/util/event';
 
 export default class NumericStateTrigger extends Component {
   constructor() {

js/automation-editor/trigger/state.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../common/util/event';
 
 export default class StateTrigger extends Component {
   constructor() {

js/automation-editor/trigger/sun.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../common/util/event';
 
 export default class SunTrigger extends Component {
   constructor() {

js/automation-editor/trigger/template.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../common/util/event';
 
 export default class TemplateTrigger extends Component {
   constructor() {

js/automation-editor/trigger/time.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../common/util/event';
 
 export default class TimeTrigger extends Component {
   constructor() {

js/automation-editor/trigger/zone.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../common/util/event';
 
 export default class ZoneTrigger extends Component {
   constructor() {

js/common/component/condition/numeric_state.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../util/event';
 
 export default class NumericStateCondition extends Component {
   constructor() {

js/common/component/condition/state.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../util/event';
 
 export default class StateCondition extends Component {
   constructor() {

js/common/component/condition/sun.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../util/event';
 
 export default class SunCondition extends Component {
   constructor() {

js/common/component/condition/template.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../util/event';
 
 export default class TemplateCondition extends Component {
   constructor() {

js/common/component/condition/time.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../util/event';
 
 export default class StateCondition extends Component {
   constructor() {

js/common/component/condition/zone.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../util/event';
 
 export default class ZoneCondition extends Component {
   constructor() {

js/common/component/script/call_service.js

@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 
 import JSONTextArea from '../json_textarea';
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../util/event';
 
 export default class CallServiceAction extends Component {
   constructor() {

js/common/component/script/delay.js

@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../util/event';
 
 export default class DelayAction extends Component {
   constructor() {

js/common/component/script/event.js

@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 
 import JSONTextArea from '../json_textarea';
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../util/event';
 
 export default class EventAction extends Component {
   constructor() {

js/common/component/script/wait.js

@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import { onChangeEvent } from '../util';
+import { onChangeEvent } from '../../util/event';
 
 export default class WaitAction extends Component {
   constructor() {

js/common/util/entity.js

@@ -0,0 +1,3 @@
+export function validEntityId(entityId) {
+  return /^(\w+)\.(\w+)$/.test(entityId);
+}

js/common/util/event.js

@@ -1,7 +1,3 @@
-export function validEntityId(entityId) {
-  return /^(\w+)\.(\w+)$/.test(entityId);
-}
-
 export function onChangeEvent(prop, ev) {
   const data = { ...this.props[prop] };
 

js/script-editor/script-editor.js

@@ -0,0 +1,10 @@
+import { h, render } from 'preact';
+import Script from './script';
+
+window.ScriptEditor = function (mountEl, props, mergeEl) {
+  return render(h(Script, props), mountEl, mergeEl);
+};
+
+window.unmountPreact = function (mountEl, mergeEl) {
+  render(() => null, mountEl, mergeEl);
+};

js/script-editor/script.js

@@ -0,0 +1,62 @@
+import { h, Component } from 'preact';
+
+import Script from '../common/component/script';
+
+export default class ScriptEditor extends Component {
+  constructor() {
+    super();
+
+    this.onChange = this.onChange.bind(this);
+    this.sequenceChanged = this.sequenceChanged.bind(this);
+  }
+
+  onChange(ev) {
+    this.props.onChange({
+      ...this.props.script,
+      [ev.target.name]: ev.target.value,
+    });
+  }
+
+  sequenceChanged(sequence) {
+    this.props.onChange({
+      ...this.props.script,
+      sequence,
+    });
+  }
+
+  render({ script, isWide }) {
+    const { alias, sequence } = script;
+
+    return (
+      <div>
+        <ha-config-section is-wide={isWide}>
+          <span slot='header'>{alias}</span>
+          <span slot='introduction'>
+            Use scripts to execute a sequence of actions.
+          </span>
+          <paper-card>
+            <div class='card-content'>
+              <paper-input
+                label="Name"
+                name="alias"
+                value={alias}
+                onChange={this.onChange}
+              />
+            </div>
+          </paper-card>
+        </ha-config-section>
+
+        <ha-config-section is-wide={isWide}>
+          <span slot='header'>Sequence</span>
+          <span slot='introduction'>
+            The sequence of actions of this script.
+            <p><a href="https://home-assistant.io/docs/scripts/" target="_blank">
+              Learn more about available actions.
+            </a></p>
+          </span>
+          <Script script={sequence} onChange={this.sequenceChanged} />
+        </ha-config-section>
+      </div>
+    );
+  }
+}

panels/config/automation/ha-automation-editor.html

@@ -18,7 +18,7 @@
 
 <link rel="import" href="../ha-config-section.html">
 
-<script src='../../../build-temp/editor.js'></script>
+<script src='../../../build-temp/automation-editor.js'></script>
 
 <dom-module id="ha-automation-editor">
   <template>

panels/config/automation/ha-config-automation.html

@@ -16,7 +16,7 @@
       route='[[route]]'
       pattern='/edit/:automation'
       data="{{_routeData}}"
-      active="{{_edittingAddon}}"
+      active="{{_edittingAutomation}}"
     ></app-route>
     <app-route
       route='[[route]]'
@@ -57,7 +57,7 @@ Polymer({
     _routeData: Object,
     _routeMatches: Boolean,
     _creatingNew: Boolean,
-    _edittingAddon: Boolean,
+    _edittingAutomation: Boolean,
 
     automations: {
       type: Array,
@@ -66,12 +66,12 @@ Polymer({
 
     automation: {
       type: Object,
-      computed: 'computeAutomation(automations, _edittingAddon, _routeData)',
+      computed: 'computeAutomation(automations, _edittingAutomation, _routeData)',
     },
 
     showEditor: {
       type: Boolean,
-      computed: 'computeShowEditor(_edittingAddon, _creatingNew)',
+      computed: 'computeShowEditor(_edittingAutomation, _creatingNew)',
     }
   },
 
@@ -115,8 +115,8 @@ Polymer({
     });
   },
 
-  computeShowEditor: function (_edittingAddon, _creatingNew) {
-    return _creatingNew || _edittingAddon;
+  computeShowEditor: function (_edittingAutomation, _creatingNew) {
+    return _creatingNew || _edittingAutomation;
   },
 });
 </script>

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

@@ -34,27 +34,10 @@
       </app-header>
 
       <div class$='[[computeClasses(isWide)]]'>
-        <!--
-          Sortable.js doesn't work in Polymer 2 making this panel useless.
-          Disabling for now.
-        <ha-config-section-group
-          is-wide='[[isWide]]'
-          hass='[[hass]]'
-        ></ha-config-section-group>
-        -->
-
         <ha-config-navigation
           is-wide='[[isWide]]'
           hass='[[hass]]'
         ></ha-config-navigation>
-
-        <!-- <template is='dom-if' if='[[computeIsZwaveLoaded(hass)]]'>
-          <div class='border'></div>
-          <ha-config-section-zwave
-            is-wide='[[isWide]]'
-            hass='[[hass]]'
-          ></ha-config-section-zwave>
-        </template> -->
       </div>
     </app-header-layout>
   </template>

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

@@ -57,16 +57,21 @@ Polymer({
     pages: {
       type: Array,
       value: [
+        {
+          domain: 'core',
+          caption: 'General',
+          description: 'Validate your configuration file and control the server.',
+          loaded: true,
+        },
         {
           domain: 'automation',
           caption: 'Automation',
           description: 'Create and edit automations.',
         },
         {
-          domain: 'core',
-          caption: 'Configuration.yaml',
-          description: 'Manage your configuration file and the server.',
-          loaded: true,
+          domain: 'script',
+          caption: 'Script',
+          description: 'Create and edit scripts.',
         },
         {
           domain: 'zwave',

panels/config/ha-panel-config.html

@@ -8,6 +8,7 @@
 <link rel="import" href="./dashboard/ha-config-dashboard.html">
 <link rel="import" href="./core/ha-config-core.html">
 <link rel="import" href="./automation/ha-config-automation.html">
+<link rel="import" href="./script/ha-config-script.html">
 <link rel="import" href="./zwave/ha-config-zwave.html">
 
 <dom-module id="ha-panel-config">
@@ -48,6 +49,13 @@
         is-wide='[[isWide]]'
       ></ha-config-automation>
 
+      <ha-config-script
+        page-name='script'
+        route='[[_routeTail]]'
+        hass='[[hass]]'
+        is-wide='[[isWide]]'
+      ></ha-config-script>
+
       <ha-config-zwave
         page-name='zwave'
         hass='[[hass]]'

panels/config/script/ha-config-script.html

@@ -0,0 +1,119 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel='import' href='../../../bower_components/app-route/app-route.html'>
+
+<link rel="import" href="./ha-script-picker.html">
+<link rel="import" href="./ha-script-editor.html">
+
+<dom-module id="ha-config-script">
+  <template>
+    <style>
+      ha-script-picker,
+      ha-script-editor {
+        height: 100%;
+      }
+    </style>
+    <app-route
+      route='[[route]]'
+      pattern='/edit/:script'
+      data="{{_routeData}}"
+      active="{{_edittingScript}}"
+    ></app-route>
+    <app-route
+      route='[[route]]'
+      pattern='/new'
+      active="{{_creatingNew}}"
+    ></app-route>
+
+    <template is='dom-if' if='[[!showEditor]]'>
+      <ha-script-picker
+        narrow='[[narrow]]'
+        show-menu='[[showMenu]]'
+        scripts='[[scripts]]'
+        is-wide='[[isWide]]'
+      ></ha-script-picker>
+    </template>
+
+    <template is='dom-if' if='[[showEditor]]' restamp>
+      <ha-script-editor
+        hass='[[hass]]'
+        script='[[script]]'
+        is-wide='[[isWide]]'
+        creating-new='[[_creatingNew]]'
+      ></ha-script-editor>
+    </template>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-config-script',
+
+  properties: {
+    hass: Object,
+    narrow: Boolean,
+    showMenu: Boolean,
+    route: Object,
+    isWide: Boolean,
+    _routeData: Object,
+    _routeMatches: Boolean,
+    _creatingNew: Boolean,
+    _edittingScript: Boolean,
+
+    scripts: {
+      type: Array,
+      computed: 'computeScripts(hass)',
+    },
+
+    script: {
+      type: Object,
+      computed: 'computeScript(scripts, _edittingScript, _routeData)',
+    },
+
+    showEditor: {
+      type: Boolean,
+      computed: 'computeShowEditor(_edittingScript, _creatingNew)',
+    }
+  },
+
+  computeScript: function (scripts, edittingAddon, routeData) {
+    if (!scripts || !edittingAddon) {
+      return null;
+    }
+    for (var i = 0; i < scripts.length; i++) {
+      if (scripts[i].entity_id === routeData.script) {
+        return scripts[i];
+      }
+    }
+    return null;
+  },
+
+  computeScripts: function (hass) {
+    var scripts = [];
+
+    Object.keys(hass.states).forEach(function (key) {
+      var entity = hass.states[key];
+
+      if (window.hassUtil.computeDomain(entity) === 'script') {
+        scripts.push(entity);
+      }
+    });
+
+    return scripts.sort(function entitySortBy(entityA, entityB) {
+      var nameA = window.hassUtil.computeStateName(entityA);
+      var nameB = window.hassUtil.computeStateName(entityB);
+
+      if (nameA < nameB) {
+        return -1;
+      }
+      if (nameA > nameB) {
+        return 1;
+      }
+      return 0;
+    });
+  },
+
+  computeShowEditor: function (_edittingScript, _creatingNew) {
+    return _creatingNew || _edittingScript;
+  },
+});
+</script>

panels/config/script/ha-script-editor.html

@@ -0,0 +1,265 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.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/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../../../bower_components/paper-input/paper-textarea.html">
+<link rel="import" href="../../../bower_components/paper-radio-button/paper-radio-button.html">
+<link rel="import" href="../../../bower_components/paper-radio-group/paper-radio-group.html">
+<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html">
+<link rel="import" href="../../../bower_components/paper-listbox/paper-listbox.html">
+<link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
+<link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
+<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
+
+<link rel="import" href="../ha-config-section.html">
+
+<script src='../../../build-temp/script-editor.js'></script>
+
+<dom-module id="ha-script-editor">
+  <template>
+    <style include="ha-style">
+      .errors {
+        padding: 20px;
+        font-weight: bold;
+        color: var(--google-red-500);
+      }
+      .content {
+        padding-bottom: 20px;
+      }
+      paper-card {
+        display: block;
+      }
+      .triggers,
+      .script {
+        margin-top: -16px;
+      }
+      .triggers paper-card,
+      .script paper-card {
+        margin-top: 16px;
+      }
+      .add-card paper-button {
+        display: block;
+        text-align: center;
+      }
+      .card-menu {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 1;
+        color: var(--primary-text-color);
+      }
+      .card-menu paper-item {
+        cursor: pointer;
+      }
+      span[slot=introduction] a {
+        color: var(--primary-color);
+      }
+      paper-fab {
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        z-index: 1;
+        margin-bottom: -80px;
+        transition: margin-bottom .3s;
+      }
+
+      paper-fab[is-wide] {
+        bottom: 24px;
+        right: 24px;
+      }
+
+      paper-fab[dirty] {
+        margin-bottom: 0;
+      }
+    </style>
+
+    <app-header-layout has-scrolling-region>
+      <app-header slot="header" fixed>
+        <app-toolbar>
+          <paper-icon-button
+            icon='mdi:arrow-left'
+            on-tap='backTapped'
+          ></paper-icon-button>
+          <div main-title>Script [[name]]</div>
+        </app-toolbar>
+      </app-header>
+
+      <div class='content'>
+        <template is='dom-if' if='[[errors]]'>
+          <div class='errors'>[[errors]]</div>
+        </template>
+        <div id='root'></div>
+        <paper-fab
+          is-wide$='[[isWide]]'
+          dirty$='[[dirty]]'
+          icon='mdi:content-save'
+          title='Save'
+          on-tap='saveScript'
+        ></paper-fab>
+      </div>
+    </app-header-layout>
+
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-script-editor',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    narrow: {
+      type: Boolean,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    errors: {
+      type: Object,
+      value: null,
+    },
+
+    dirty: {
+      type: Boolean,
+      value: false,
+    },
+
+    config: {
+      type: Object,
+      value: null,
+    },
+
+    script: {
+      type: Object,
+      observer: 'scriptChanged',
+    },
+
+    creatingNew: {
+      type: Boolean,
+      observer: 'creatingNewChanged',
+    },
+
+    name: {
+      type: String,
+      computed: 'computeName(script)'
+    },
+
+    isWide: {
+      type: Boolean,
+      observer: 'isWideChanged',
+    },
+  },
+
+  created: function () {
+    this.configChanged = this.configChanged.bind(this);
+    this._rendered = null;
+  },
+
+  detached: function () {
+    if (this._rendered) {
+      window.unmountPreact(this._rendered);
+    }
+  },
+
+  configChanged: function (config) {
+    // onChange gets called a lot during initial rendering causing recursing calls.
+    if (this._rendered === null) return;
+    this.config = config;
+    this.errors = null;
+    this.dirty = true;
+    this._updateComponent(config);
+  },
+
+  scriptChanged: function (newVal, oldVal) {
+    if (!newVal) return;
+    if (!this.hass) {
+      setTimeout(this.scriptChanged.bind(this, newVal, oldVal), 0);
+      return;
+    }
+    if (oldVal && oldVal.entity_id === newVal.entity_id) {
+      return;
+    }
+    this.hass.callApi('get', 'config/script/config/' + window.hassUtil.computeObjectId(newVal))
+      .then(function (config) {
+        // Normalize data: ensure sequence is a list
+        // Happens when people copy paste their scripts into the config
+        var value = config.sequence;
+        if (value && !Array.isArray(value)) {
+          config.sequence = [value];
+        }
+
+        this.dirty = false;
+        this.config = config;
+        this._updateComponent();
+      }.bind(this));
+  },
+
+  creatingNewChanged: function (newVal) {
+    if (!newVal) {
+      return;
+    }
+    this.dirty = false;
+    this.config = {
+      alias: 'New Script',
+      sequence: [
+        { service: '', data: {} },
+      ],
+    };
+    this._updateComponent();
+  },
+
+  isWideChanged: function () {
+    if (this.config === null) return;
+    this._updateComponent();
+  },
+
+  backTapped: function () {
+    if (this.dirty &&
+        // eslint-disable-next-line
+        !confirm('You have unsaved changes. Are you sure you want to leave?')) {
+      return;
+    }
+    history.back();
+  },
+
+  _updateComponent: function () {
+    this._rendered = window.ScriptEditor(
+      this.$.root, {
+        script: this.config,
+        onChange: this.configChanged,
+        isWide: this.isWide,
+      }, this._rendered);
+  },
+
+  saveScript: function () {
+    var id = this.creatingNew ? '' + Date.now() : window.hassUtil.computeObjectId(this.script);
+    this.hass.callApi(
+      'post', 'config/script/config/' + id, this.config).then(function () {
+        this.dirty = false;
+
+        if (this.creatingNew) {
+          history.replaceState(null, null, '/config/script/edit/' + id);
+          this.fire('location-changed');
+        }
+      }.bind(this), function (errors) {
+        this.errors = errors.body.message;
+        throw errors;
+      }.bind(this));
+  },
+
+  computeName: function (script) {
+    return script && window.hassUtil.computeStateName(script);
+  },
+});
+</script>

panels/config/script/ha-script-picker.html

@@ -0,0 +1,142 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.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/paper-fab/paper-fab.html">
+<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+
+<link rel="import" href="../ha-config-section.html">
+
+<dom-module id="ha-script-picker">
+  <template>
+    <style include="ha-style">
+      :host {
+        display: block;
+      }
+
+      paper-item {
+        cursor: pointer;
+      }
+
+      paper-fab {
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        z-index: 1;
+      }
+
+      paper-fab[is-wide] {
+        bottom: 24px;
+        right: 24px;
+      }
+
+      a {
+        color: var(--primary-color);
+      }
+    </style>
+
+    <app-header-layout has-scrolling-region>
+      <app-header slot="header" fixed>
+        <app-toolbar>
+          <paper-icon-button
+            icon='mdi:arrow-left'
+            on-tap='_backTapped'
+          ></paper-icon-button>
+          <div main-title>Scripts</div>
+        </app-toolbar>
+      </app-header>
+
+      <ha-config-section
+        is-wide='[[isWide]]'
+      >
+        <div slot='header'>Script editor</div>
+        <div slot='introduction'>
+          The script editor allows you to create and edit scripts.
+          Please read <a href='https://home-assistant.io/docs/script/editor/' target='_blank'>the instructions</a> to make sure that you have configured Home Assistant correctly.
+        </div>
+
+        <paper-card heading='Pick script to edit'>
+          <template is='dom-if' if='[[!scripts.length]]'>
+            <div class='card-content'>
+              <p>We couldn't find any editable scripts.</p>
+            </div>
+          </template>
+          <template is='dom-repeat' items='[[scripts]]' as='script'>
+            <paper-item>
+              <paper-item-body two-line on-tap='scriptTapped'>
+                <div>[[computeName(script)]]</div>
+                <div secondary>[[computeDescription(script)]]</div>
+              </paper-item-body>
+              <iron-icon icon='mdi:chevron-right'></iron-icon>
+            </paper-item>
+          </template>
+        </paper-card>
+      </ha-config-section>
+
+      <paper-fab
+        is-wide$='[[isWide]]'
+        icon='mdi:plus'
+        title='Add Script'
+        on-tap='addScript'
+      ></paper-fab>
+    </app-header-layout>
+
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-script-picker',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    narrow: {
+      type: Boolean,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    scripts: {
+      type: Array,
+    },
+
+    isWide: {
+      type: Boolean,
+    },
+  },
+
+  scriptTapped: function (ev) {
+    history.pushState(
+      null, null, '/config/script/edit/' + this.scripts[ev.model.index].entity_id);
+    this.fire('location-changed');
+  },
+
+  addScript: function () {
+    history.pushState(null, null, '/config/script/new');
+    this.fire('location-changed');
+  },
+
+  computeName: function (script) {
+    return window.hassUtil.computeStateName(script);
+  },
+
+  // Still thinking of something to add here.
+  // eslint-disable-next-line
+  computeDescription: function (script) {
+    return '';
+  },
+
+  _backTapped: function () {
+    history.back();
+  },
+});
+</script>

src/util/hass-util.html

@@ -430,6 +430,14 @@ window.hassUtil.computeDomain = function (stateObj) {
   return stateObj._domain;
 };
 
+window.hassUtil.computeObjectId = function (stateObj) {
+  if (!stateObj._object_id) {
+    stateObj._object_id = window.HAWS.extractObjectId(stateObj.entity_id);
+  }
+
+  return stateObj._object_id;
+};
+
 window.hassUtil.computeStateName = function (stateObj) {
   if (stateObj._entityDisplay === undefined) {
     stateObj._entityDisplay = (