Convert script config panel to router (#5512)

* Convert script config panel to router

* Update script.ts

* Update ha-config-script.ts

src/data/script.ts

@@ -74,7 +74,7 @@ export const showScriptEditor = (
   data?: Partial<ScriptConfig>
 ) => {
   inititialScriptEditorData = data;
-  navigate(el, "/config/script/new");
+  navigate(el, "/config/script/edit/new");
 };
 
 export const getScriptEditorInitData = () => {

src/panels/config/script/ha-config-script.js

@@ -1,113 +0,0 @@
-import "@polymer/app-route/app-route";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "./ha-script-editor";
-import "./ha-script-picker";
-
-import { computeStateDomain } from "../../../common/entity/compute_state_domain";
-
-class HaConfigScript extends PolymerElement {
-  static get template() {
-    return html`
-      <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
-          hass="[[hass]]"
-          scripts="[[scripts]]"
-          is-wide="[[isWide]]"
-          narrow="[[narrow]]"
-          route="[[route]]"
-        ></ha-script-picker>
-      </template>
-
-      <template is="dom-if" if="[[showEditor]]" restamp="">
-        <ha-script-editor
-          hass="[[hass]]"
-          script="[[script]]"
-          is-wide="[[isWide]]"
-          narrow="[[narrow]]"
-          route="[[route]]"
-          creating-new="[[_creatingNew]]"
-        ></ha-script-editor>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      route: Object,
-      isWide: Boolean,
-      narrow: 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(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(hass) {
-    var scripts = [];
-
-    Object.keys(hass.states).forEach(function(key) {
-      var entity = hass.states[key];
-
-      if (computeStateDomain(entity) === "script") {
-        scripts.push(entity);
-      }
-    });
-
-    return scripts;
-  }
-
-  computeShowEditor(_edittingScript, _creatingNew) {
-    return _creatingNew || _edittingScript;
-  }
-}
-
-customElements.define("ha-config-script", HaConfigScript);

src/panels/config/script/ha-config-script.ts

@@ -0,0 +1,77 @@
+import { HassEntities, HassEntity } from "home-assistant-js-websocket";
+import { customElement, property, PropertyValues } from "lit-element";
+import memoizeOne from "memoize-one";
+import { computeStateDomain } from "../../../common/entity/compute_state_domain";
+import {
+  HassRouterPage,
+  RouterOptions,
+} from "../../../layouts/hass-router-page";
+import { HomeAssistant } from "../../../types";
+import "./ha-script-editor";
+import "./ha-script-picker";
+
+@customElement("ha-config-script")
+class HaConfigScript extends HassRouterPage {
+  @property() public hass!: HomeAssistant;
+  @property() public narrow!: boolean;
+  @property() public isWide!: boolean;
+  @property() public showAdvanced!: boolean;
+  @property() public scripts: HassEntity[] = [];
+
+  protected routerOptions: RouterOptions = {
+    defaultPage: "dashboard",
+    routes: {
+      dashboard: {
+        tag: "ha-script-picker",
+        cache: true,
+      },
+      edit: {
+        tag: "ha-script-editor",
+      },
+    },
+  };
+
+  private _computeScripts = memoizeOne((states: HassEntities) => {
+    const scripts: HassEntity[] = [];
+    Object.values(states).forEach((state) => {
+      if (computeStateDomain(state) === "script" && !state.attributes.hidden) {
+        scripts.push(state);
+      }
+    });
+
+    return scripts;
+  });
+
+  protected updatePageEl(pageEl, changedProps: PropertyValues) {
+    pageEl.hass = this.hass;
+    pageEl.narrow = this.narrow;
+    pageEl.isWide = this.isWide;
+    pageEl.route = this.routeTail;
+    pageEl.showAdvanced = this.showAdvanced;
+
+    if (this.hass) {
+      pageEl.scripts = this._computeScripts(this.hass.states);
+    }
+
+    if (
+      (!changedProps || changedProps.has("route")) &&
+      this._currentPage === "edit"
+    ) {
+      pageEl.creatingNew = undefined;
+      const scriptEntityId = this.routeTail.path.substr(1);
+      pageEl.creatingNew = scriptEntityId === "new" ? true : false;
+      pageEl.script =
+        scriptEntityId === "new"
+          ? undefined
+          : pageEl.scripts.find(
+              (entity: HassEntity) => entity.entity_id === scriptEntityId
+            );
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-script": HaConfigScript;
+  }
+}

src/panels/config/script/ha-script-picker.ts

@@ -134,7 +134,7 @@ class HaScriptPicker extends LitElement {
           @click=${this._showHelp}
         ></paper-icon-button>
       </hass-tabs-subpage-data-table>
-      <a href="/config/script/new">
+      <a href="/config/script/edit/new">
         <ha-fab
           ?is-wide=${this.isWide}
           ?narrow=${this.narrow}