Convert script config panel to router

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.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}