Improve rename automation dialog (#13601)

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

@@ -8,6 +8,7 @@ import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { AutomationRenameDialog } from "./show-dialog-automation-rename";
 import "../../../../components/ha-textarea";
+import "../../../../components/ha-alert";
 import "../../../../components/ha-textfield";
 
 @customElement("ha-dialog-automation-rename")
@@ -16,6 +17,8 @@ class DialogAutomationRename extends LitElement implements HassDialog {
 
   @state() private _opened = false;
 
+  @state() private _error?: string;
+
   private _params!: AutomationRenameDialog;
 
   private _newName?: string;
@@ -25,7 +28,9 @@ class DialogAutomationRename extends LitElement implements HassDialog {
   public showDialog(params: AutomationRenameDialog): void {
     this._opened = true;
     this._params = params;
-    this._newName = params.config.alias || "";
+    this._newName =
+      params.config.alias ||
+      this.hass.localize("ui.panel.config.automation.editor.default_name");
     this._newDescription = params.config.description || "";
   }
 
@@ -49,9 +54,20 @@ class DialogAutomationRename extends LitElement implements HassDialog {
         @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,
-          this.hass.localize("ui.panel.config.automation.editor.rename")
+          this.hass.localize(
+            this._params.config.alias
+              ? "ui.panel.config.automation.editor.rename"
+              : "ui.panel.config.automation.editor.save"
+          )
         )}
       >
+        ${this._error
+          ? html`<ha-alert alert-type="error"
+              >${this.hass.localize(
+                "ui.panel.config.automation.editor.missing_name"
+              )}</ha-alert
+            >`
+          : ""}
         <ha-textfield
           dialogInitialFocus
           .value=${this._newName}
@@ -61,6 +77,7 @@ class DialogAutomationRename extends LitElement implements HassDialog {
           .label=${this.hass.localize(
             "ui.panel.config.automation.editor.alias"
           )}
+          required
           type="string"
           @change=${this._valueChanged}
         ></ha-textfield>
@@ -82,7 +99,11 @@ class DialogAutomationRename extends LitElement implements HassDialog {
           ${this.hass.localize("ui.dialogs.generic.cancel")}
         </mwc-button>
         <mwc-button @click=${this._save} slot="primaryAction">
-          ${this.hass.localize("ui.panel.config.automation.editor.rename")}
+          ${this.hass.localize(
+            this._params.config.alias
+              ? "ui.panel.config.automation.editor.rename"
+              : "ui.panel.config.automation.editor.save"
+          )}
         </mwc-button>
       </ha-dialog>
     `;
@@ -99,6 +120,10 @@ class DialogAutomationRename extends LitElement implements HassDialog {
   }
 
   private _save(): void {
+    if (!this._newName) {
+      this._error = "Name is required";
+      return;
+    }
     this._params.updateAutomation({
       ...this._params.config,
       alias: this._newName,
@@ -116,6 +141,10 @@ class DialogAutomationRename extends LitElement implements HassDialog {
         ha-textarea {
           display: block;
         }
+        ha-alert {
+          display: block;
+          margin-bottom: 16px;
+        }
       `,
     ];
   }

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

@@ -298,7 +298,9 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                 @subscribe-automation-config=${this._subscribeAutomationConfig}
               >
                 ${this._errors
-                  ? html`<div class="errors">${this._errors}</div>`
+                  ? html`<ha-alert alert-type="error">
+                      ${this._errors}
+                    </ha-alert>`
                   : ""}
                 ${this._mode === "gui"
                   ? "use_blueprint" in this._config
@@ -629,14 +631,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     const id = this.automationId || String(Date.now());
     if (!this.automationId) {
       await this._promptAutomationAlias();
-      if (!this._config!.alias) {
-        showAlertDialog(this, {
-          text: this.hass.localize(
-            "ui.panel.config.automation.editor.missing_name"
-          ),
-        });
-        return;
-      }
     }
 
     this.hass!.callApi(
@@ -681,11 +675,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         ha-card {
           overflow: hidden;
         }
-        .errors {
-          padding: 20px;
-          font-weight: bold;
-          color: var(--error-color);
-        }
         .content {
           padding-bottom: 20px;
         }