Add support for renaming actions, conditions and triggers (#13444)

src/data/automation_i18n.ts

@@ -3,8 +3,8 @@ import { computeStateName } from "../common/entity/compute_state_name";
 import type { HomeAssistant } from "../types";
 import { Condition, Trigger } from "./automation";
 
-export const describeTrigger = (trigger: Trigger) => {
+export const describeTrigger = (trigger: Trigger, ignoreAlias = false) => {
-  if (trigger.alias) {
+  if (trigger.alias && !ignoreAlias) {
     return trigger.alias;
   }
   return `${trigger.platform || "Unknown"} trigger`;
@@ -12,9 +12,10 @@ export const describeTrigger = (trigger: Trigger) => {
 
 export const describeCondition = (
   condition: Condition,
-  hass: HomeAssistant
+  hass: HomeAssistant,
+  ignoreAlias = false
 ) => {
-  if (condition.alias) {
+  if (condition.alias && !ignoreAlias) {
     return condition.alias;
   }
 

src/data/script_i18n.ts

@@ -26,9 +26,10 @@ import {
 export const describeAction = <T extends ActionType>(
   hass: HomeAssistant,
   action: ActionTypes[T],
-  actionType?: T
+  actionType?: T,
+  ignoreAlias = false
 ): string => {
-  if (action.alias) {
+  if (action.alias && !ignoreAlias) {
     return action.alias;
   }
   if (!actionType) {

src/dialogs/generic/dialog-box.ts

@@ -73,6 +73,7 @@ class DialogBox extends LitElement {
                 <ha-textfield
                   dialogInitialFocus
                   value=${ifDefined(this._params.defaultValue)}
+                  .placeholder=${ifDefined(this._params.placeholder)}
                   .label=${this._params.inputLabel
                     ? this._params.inputLabel
                     : ""}
@@ -158,6 +159,14 @@ class DialogBox extends LitElement {
         /* Place above other dialogs */
         --dialog-z-index: 104;
       }
+      @media all and (min-width: 600px) {
+        ha-dialog {
+          --mdc-dialog-min-width: 400px;
+        }
+      }
+      ha-textfield {
+        width: 100%;
+      }
     `;
   }
 }

src/dialogs/generic/show-dialog-box.ts

@@ -22,6 +22,7 @@ export interface PromptDialogParams extends BaseDialogBoxParams {
   inputLabel?: string;
   inputType?: string;
   defaultValue?: string;
+  placeholder?: string;
   confirm?: (out?: string) => void;
 }
 

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -20,6 +20,7 @@ import { callExecuteScript } from "../../../../data/service";
 import {
   showAlertDialog,
   showConfirmationDialog,
+  showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
@@ -200,6 +201,11 @@ export default class HaAutomationActionRow extends LitElement {
                     "ui.panel.config.automation.editor.edit_yaml"
                   )}
             </mwc-list-item>
+            <mwc-list-item>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.rename"
+              )}
+            </mwc-list-item>
             <mwc-list-item>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.actions.duplicate"
@@ -298,7 +304,7 @@ export default class HaAutomationActionRow extends LitElement {
     fireEvent(this, "move-action", { direction: "down" });
   }
 
-  private _handleAction(ev: CustomEvent<ActionDetail>) {
+  private async _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
         this._runAction();
@@ -308,12 +314,15 @@ export default class HaAutomationActionRow extends LitElement {
         this.expand();
         break;
       case 2:
-        fireEvent(this, "duplicate");
+        await this._renameAction();
         break;
       case 3:
-        this._onDisable();
+        fireEvent(this, "duplicate");
         break;
       case 4:
+        this._onDisable();
+        break;
+      case 5:
         this._onDelete();
         break;
     }
@@ -388,6 +397,35 @@ export default class HaAutomationActionRow extends LitElement {
     this._yamlMode = !this._yamlMode;
   }
 
+  private async _renameAction(): Promise<void> {
+    const alias = await showPromptDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.automation.editor.actions.change_alias"
+      ),
+      inputLabel: this.hass.localize(
+        "ui.panel.config.automation.editor.actions.alias"
+      ),
+      inputType: "string",
+      placeholder: capitalizeFirstLetter(
+        describeAction(this.hass, this.action, undefined, true)
+      ),
+      defaultValue: this.action.alias,
+      confirmText: this.hass.localize("ui.common.submit"),
+    });
+    const value = { ...this.action };
+    if (!alias) {
+      delete value.alias;
+    } else {
+      value.alias = alias;
+    }
+    fireEvent(this, "value-changed", {
+      value,
+    });
+    if (this._yamlMode) {
+      this._yamlEditor?.setValue(value);
+    }
+  }
+
   public expand() {
     this.updateComplete.then(() => {
       this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = true;

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -19,6 +19,7 @@ import { validateConfig } from "../../../../data/config";
 import {
   showAlertDialog,
   showConfirmationDialog,
+  showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -112,6 +113,11 @@ export default class HaAutomationConditionRow extends LitElement {
                     "ui.panel.config.automation.editor.edit_yaml"
                   )}
             </mwc-list-item>
+            <mwc-list-item>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.conditions.rename"
+              )}
+            </mwc-list-item>
             <mwc-list-item>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.actions.duplicate"
@@ -187,19 +193,22 @@ export default class HaAutomationConditionRow extends LitElement {
     }
   }
 
-  private _handleAction(ev: CustomEvent<ActionDetail>) {
+  private async _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
         this._switchYamlMode();
         this.expand();
         break;
       case 1:
-        fireEvent(this, "duplicate");
+        await this._renameCondition();
         break;
       case 2:
-        this._onDisable();
+        fireEvent(this, "duplicate");
         break;
       case 3:
+        this._onDisable();
+        break;
+      case 4:
         this._onDelete();
         break;
     }
@@ -288,6 +297,33 @@ export default class HaAutomationConditionRow extends LitElement {
     }
   }
 
+  private async _renameCondition(): Promise<void> {
+    const alias = await showPromptDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.automation.editor.conditions.change_alias"
+      ),
+      inputLabel: this.hass.localize(
+        "ui.panel.config.automation.editor.conditions.alias"
+      ),
+      inputType: "string",
+      placeholder: capitalizeFirstLetter(
+        describeCondition(this.condition, this.hass, true)
+      ),
+      defaultValue: this.condition.alias,
+      confirmText: this.hass.localize("ui.common.submit"),
+    });
+
+    const value = { ...this.condition };
+    if (!alias) {
+      delete value.alias;
+    } else {
+      value.alias = alias;
+    }
+    fireEvent(this, "value-changed", {
+      value,
+    });
+  }
+
   public expand() {
     this.updateComplete.then(() => {
       this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = true;

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -21,6 +21,7 @@ import { validateConfig } from "../../../../data/config";
 import {
   showAlertDialog,
   showConfirmationDialog,
+  showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
@@ -139,6 +140,11 @@ export default class HaAutomationTriggerRow extends LitElement {
                     "ui.panel.config.automation.editor.edit_yaml"
                   )}
             </mwc-list-item>
+            <mwc-list-item>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.rename"
+              )}
+            </mwc-list-item>
             <mwc-list-item>
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.actions.duplicate"
@@ -325,7 +331,7 @@ export default class HaAutomationTriggerRow extends LitElement {
     }
   }
 
-  private _handleAction(ev: CustomEvent<ActionDetail>) {
+  private async _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
         this._requestShowId = true;
@@ -336,12 +342,15 @@ export default class HaAutomationTriggerRow extends LitElement {
         this.expand();
         break;
       case 2:
-        fireEvent(this, "duplicate");
+        await this._renameTrigger();
         break;
       case 3:
-        this._onDisable();
+        fireEvent(this, "duplicate");
         break;
       case 4:
+        this._onDisable();
+        break;
+      case 5:
         this._onDelete();
         break;
     }
@@ -412,6 +421,34 @@ export default class HaAutomationTriggerRow extends LitElement {
     });
   }
 
+  private async _renameTrigger(): Promise<void> {
+    const alias = await showPromptDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.automation.editor.triggers.change_alias"
+      ),
+      inputLabel: this.hass.localize(
+        "ui.panel.config.automation.editor.triggers.alias"
+      ),
+      inputType: "string",
+      placeholder: capitalizeFirstLetter(describeTrigger(this.trigger, true)),
+      defaultValue: this.trigger.alias,
+      confirmText: this.hass.localize("ui.common.submit"),
+    });
+
+    const value = { ...this.trigger };
+    if (!alias) {
+      delete value.alias;
+    } else {
+      value.alias = alias;
+    }
+    fireEvent(this, "value-changed", {
+      value,
+    });
+    if (this._yamlMode) {
+      this._yamlEditor?.setValue(value);
+    }
+  }
+
   public expand() {
     this.updateComplete.then(() => {
       this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = true;

src/translations/en.json

@@ -1858,6 +1858,9 @@
               "id": "Trigger ID",
               "edit_id": "Edit trigger ID",
               "duplicate": "Duplicate",
+              "rename": "Rename",
+              "change_alias": "Rename trigger",
+              "alias": "Trigger name",
               "delete": "[%key:ui::panel::mailbox::delete_button%]",
               "delete_confirm": "Are you sure you want to delete this?",
               "unsupported_platform": "No visual editor support for platform: {platform}",
@@ -1973,6 +1976,9 @@
               "invalid_condition": "Invalid condition configuration",
               "test_failed": "Error occurred while testing condition",
               "duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",
+              "rename": "[%key:ui::panel::config::automation::editor::triggers::rename%]",
+              "change_alias": "Rename condition",
+              "alias": "Condition name",
               "delete": "[%key:ui::panel::mailbox::delete_button%]",
               "delete_confirm": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm%]",
               "unsupported_condition": "No visual editor support for condition: {condition}",
@@ -2061,6 +2067,9 @@
               "run_action_error": "Error running action",
               "run_action_success": "Action run successfully",
               "duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",
+              "rename": "[%key:ui::panel::config::automation::editor::triggers::rename%]",
+              "change_alias": "Rename action",
+              "alias": "Action name",
               "enable": "Enable",
               "disable": "Disable",
               "disabled": "Disabled",