Use new automation dialog for new scripts (#16933)

src/panels/config/automation/dialog-new-automation.ts

@@ -18,8 +18,10 @@ import "../../../components/ha-icon-next";
 import "../../../components/ha-list-item";
 import "../../../components/ha-tip";
 import { showAutomationEditor } from "../../../data/automation";
+import { showScriptEditor } from "../../../data/script";
 import {
   Blueprint,
+  BlueprintDomain,
   Blueprints,
   BlueprintSourceType,
   fetchBlueprints,
@@ -29,6 +31,7 @@ import { HassDialog } from "../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
+import type { NewAutomationDialogParams } from "./show-dialog-new-automation";
 
 const SOURCE_TYPE_ICONS: Record<BlueprintSourceType, string> = {
   local: mdiFile,
@@ -42,11 +45,15 @@ class DialogNewAutomation extends LitElement implements HassDialog {
 
   @state() private _opened = false;
 
+  @state() private _mode: BlueprintDomain = "automation";
+
   @state() public blueprints?: Blueprints;
 
-  public showDialog(): void {
+  public showDialog(params: NewAutomationDialogParams): void {
     this._opened = true;
-    fetchBlueprints(this.hass!, "automation").then((blueprints) => {
+    this._mode = params?.mode || "automation";
+
+    fetchBlueprints(this.hass!, this._mode).then((blueprints) => {
       this.blueprints = blueprints;
     });
   }
@@ -92,14 +99,14 @@ class DialogNewAutomation extends LitElement implements HassDialog {
         @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,
-          this.hass.localize("ui.panel.config.automation.dialog_new.header")
+          this.hass.localize(`ui.panel.config.${this._mode}.dialog_new.header`)
         )}
       >
         <mwc-list
           innerRole="listbox"
           itemRoles="option"
           innerAriaLabel=${this.hass.localize(
-            "ui.panel.config.automation.dialog_new.header"
+            `ui.panel.config.${this._mode}.dialog_new.header`
           )}
           rootTabbable
           dialogInitialFocus
@@ -112,11 +119,11 @@ class DialogNewAutomation extends LitElement implements HassDialog {
           >
             <ha-svg-icon slot="graphic" .path=${mdiPencilOutline}></ha-svg-icon>
             ${this.hass.localize(
-              "ui.panel.config.automation.dialog_new.create_empty"
+              `ui.panel.config.${this._mode}.dialog_new.create_empty`
             )}
             <span slot="secondary">
               ${this.hass.localize(
-                "ui.panel.config.automation.dialog_new.create_empty_description"
+                `ui.panel.config.${this._mode}.dialog_new.create_empty_description`
               )}
             </span>
             <ha-icon-next slot="meta"></ha-icon-next>
@@ -139,11 +146,11 @@ class DialogNewAutomation extends LitElement implements HassDialog {
                 <span slot="secondary">
                   ${blueprint.author
                     ? this.hass.localize(
-                        `ui.panel.config.automation.dialog_new.blueprint_source.author`,
+                        `ui.panel.config.${this._mode}.dialog_new.blueprint_source.author`,
                         { author: blueprint.author }
                       )
                     : this.hass.localize(
-                        `ui.panel.config.automation.dialog_new.blueprint_source.${blueprint.sourceType}`
+                        `ui.panel.config.${this._mode}.dialog_new.blueprint_source.${blueprint.sourceType}`
                       )}
                 </span>
                 <ha-icon-next slot="meta"></ha-icon-next>
@@ -161,11 +168,11 @@ class DialogNewAutomation extends LitElement implements HassDialog {
                   <ha-list-item hasmeta twoline graphic="icon">
                     <ha-svg-icon slot="graphic" .path=${mdiWeb}></ha-svg-icon>
                     ${this.hass.localize(
-                      "ui.panel.config.automation.dialog_new.create_blueprint"
+                      `ui.panel.config.${this._mode}.dialog_new.create_blueprint`
                     )}
                     <span slot="secondary">
                       ${this.hass.localize(
-                        "ui.panel.config.automation.dialog_new.create_blueprint_description"
+                        `ui.panel.config.${this._mode}.dialog_new.create_blueprint_description`
                       )}
                     </span>
                     <ha-svg-icon slot="meta" path=${mdiOpenInNew}></ha-svg-icon>
@@ -180,7 +187,7 @@ class DialogNewAutomation extends LitElement implements HassDialog {
                     rel="noreferrer noopener"
                   >
                     ${this.hass.localize(
-                      "ui.panel.config.automation.dialog_new.discover_blueprint_tip"
+                      `ui.panel.config.${this._mode}.dialog_new.discover_blueprint_tip`
                     )}
                   </a>
                 </ha-tip>
@@ -196,7 +203,11 @@ class DialogNewAutomation extends LitElement implements HassDialog {
     }
     const path = (ev.currentTarget! as any).path;
     this.closeDialog();
-    showAutomationEditor({ use_blueprint: { path } });
+    if (this._mode === "script") {
+      showScriptEditor({ use_blueprint: { path } });
+    } else {
+      showAutomationEditor({ use_blueprint: { path } });
+    }
   }
 
   private async _blank(ev) {
@@ -204,7 +215,11 @@ class DialogNewAutomation extends LitElement implements HassDialog {
       return;
     }
     this.closeDialog();
-    showAutomationEditor();
+    if (this._mode === "script") {
+      showScriptEditor();
+    } else {
+      showAutomationEditor();
+    }
   }
 
   static get styles(): CSSResultGroup {

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

@@ -486,7 +486,7 @@ class HaAutomationPicker extends LitElement {
 
   private _createNew() {
     if (isComponentLoaded(this.hass, "blueprint")) {
-      showNewAutomationDialog(this);
+      showNewAutomationDialog(this, { mode: "automation" });
     } else {
       navigate("/config/automation/edit/new");
     }

src/panels/config/automation/show-dialog-new-automation.ts

@@ -1,11 +1,18 @@
 import { fireEvent } from "../../../common/dom/fire_event";
 
+export interface NewAutomationDialogParams {
+  mode: "script" | "automation";
+}
+
 export const loadNewAutomationDialog = () => import("./dialog-new-automation");
 
-export const showNewAutomationDialog = (element: HTMLElement): void => {
+export const showNewAutomationDialog = (
+  element: HTMLElement,
+  newAutomationDialogParams: NewAutomationDialogParams
+): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "ha-dialog-new-automation",
     dialogImport: loadNewAutomationDialog,
-    dialogParams: {},
+    dialogParams: newAutomationDialogParams,
   });
 };

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

@@ -12,6 +12,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { differenceInDays } from "date-fns/esm";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatShortDateTime } from "../../../common/datetime/format_date_time";
 import { relativeTime } from "../../../common/datetime/relative_time";
 import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
@@ -44,6 +45,7 @@ import { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import { configSections } from "../ha-panel-config";
+import { showNewAutomationDialog } from "../automation/show-dialog-new-automation";
 import { EntityRegistryEntry } from "../../../data/entity_registry";
 import { findRelated } from "../../../data/search";
 import { fetchBlueprints } from "../../../data/blueprint";
@@ -242,19 +244,19 @@ class HaScriptPicker extends LitElement {
           @related-changed=${this._relatedFilterChanged}
         >
         </ha-button-related-filter-menu>
-        <a href="/config/script/edit/new" slot="fab">
+        <ha-fab
-          <ha-fab
+          slot="fab"
-            ?is-wide=${this.isWide}
+          ?is-wide=${this.isWide}
-            ?narrow=${this.narrow}
+          ?narrow=${this.narrow}
-            .label=${this.hass.localize(
+          .label=${this.hass.localize(
-              "ui.panel.config.script.picker.add_script"
+            "ui.panel.config.script.picker.add_script"
-            )}
+          )}
-            extended
+          extended
-            ?rtl=${computeRTL(this.hass)}
+          ?rtl=${computeRTL(this.hass)}
-          >
+          @click=${this._createNew}
-            <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+        >
-          </ha-fab>
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-        </a>
+        </ha-fab>
       </hass-tabs-subpage-data-table>
     `;
   }
@@ -312,6 +314,14 @@ class HaScriptPicker extends LitElement {
     }
   }
 
+  private _createNew() {
+    if (isComponentLoaded(this.hass, "blueprint")) {
+      showNewAutomationDialog(this, { mode: "script" });
+    } else {
+      navigate("/config/script/edit/new");
+    }
+  }
+
   private _runScript = async (script: any) => {
     const entry = this.entityRegistry.find(
       (e) => e.entity_id === script.entity_id

src/translations/en.json

@@ -2699,6 +2699,21 @@
             "delete": "[%key:ui::common::delete%]",
             "duplicate": "[%key:ui::common::duplicate%]"
           },
+          "dialog_new": {
+            "header": "Create script",
+            "create_empty": "Create new script",
+            "create_empty_description": "Start with an empty script from scratch",
+            "create_blueprint": "[%key:ui::panel::config::automation::dialog_new::create_blueprint%]",
+            "create_blueprint_description": "[%key:ui::panel::config::automation::dialog_new::create_blueprint_description%]",
+            "blueprint_source": {
+              "author": "[%key:ui::panel::config::automation::dialog_new::blueprint_source::author%]",
+              "local": "[%key:ui::panel::config::automation::dialog_new::blueprint_source::local%]",
+              "community": "[%key:ui::panel::config::automation::dialog_new::blueprint_source::community%]",
+              "homeassistant": "[%key:ui::panel::config::automation::dialog_new::blueprint_source::homeassistant%]"
+            },
+            "discover_blueprint_tip": "[%key:ui::panel::config::automation::dialog_new::discover_blueprint_tip%]"
+          },
+
           "editor": {
             "alias": "Name",
             "icon": "Icon",