Move trigger ID to overflow menu (#11136)

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

@@ -87,6 +87,8 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   @state() private _yamlMode = false;
 
+  @state() private _requestShowId = false;
+
   private _processedTypes = memoizeOne(
     (localize: LocalizeFunc): [string, string][] =>
       OPTIONS.map(
@@ -103,6 +105,7 @@ export default class HaAutomationTriggerRow extends LitElement {
   protected render() {
     const selected = OPTIONS.indexOf(this.trigger.platform);
     const yamlMode = this._yamlMode || selected === -1;
+    const showId = "id" in this.trigger || this._requestShowId;
 
     return html`
       <ha-card>
@@ -114,6 +117,11 @@ export default class HaAutomationTriggerRow extends LitElement {
                 .label=${this.hass.localize("ui.common.menu")}
                 .path=${mdiDotsVertical}
               ></ha-icon-button>
+              <mwc-list-item>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.triggers.edit_id"
+                )}
+              </mwc-list-item>
               <mwc-list-item .disabled=${selected === -1}>
                 ${yamlMode
                   ? this.hass.localize(
@@ -189,14 +197,18 @@ export default class HaAutomationTriggerRow extends LitElement {
                   )}
                 </mwc-select>
 
-                <paper-input
-                  .label=${this.hass.localize(
-                    "ui.panel.config.automation.editor.triggers.id"
-                  )}
-                  .value=${this.trigger.id}
-                  @value-changed=${this._idChanged}
-                >
-                </paper-input>
+                ${showId
+                  ? html`
+                      <paper-input
+                        .label=${this.hass.localize(
+                          "ui.panel.config.automation.editor.triggers.id"
+                        )}
+                        .value=${this.trigger.id}
+                        @value-changed=${this._idChanged}
+                      >
+                      </paper-input>
+                    `
+                  : ""}
                 <div @ui-mode-not-available=${this._handleUiModeNotAvailable}>
                   ${dynamicElement(
                     `ha-automation-trigger-${this.trigger.platform}`,
@@ -219,12 +231,15 @@ export default class HaAutomationTriggerRow extends LitElement {
   private _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
-        this._switchYamlMode();
+        this._requestShowId = true;
         break;
       case 1:
-        fireEvent(this, "duplicate");
+        this._switchYamlMode();
         break;
       case 2:
+        fireEvent(this, "duplicate");
+        break;
+      case 3:
         this._onDelete();
         break;
     }
@@ -275,6 +290,7 @@ export default class HaAutomationTriggerRow extends LitElement {
     if (newId === (this.trigger.id ?? "")) {
       return;
     }
+    this._requestShowId = true;
     const value = { ...this.trigger };
     if (!newId) {
       delete value.id;

src/translations/en.json

@@ -1558,7 +1558,8 @@
               "introduction": "Triggers are what starts the processing of an automation rule. It is possible to specify multiple triggers for the same rule. Once a trigger starts, Home Assistant will validate the conditions, if any, and call the action.",
               "learn_more": "Learn more about triggers",
               "add": "Add trigger",
-              "id": "Trigger ID (used by the trigger condition)",
+              "id": "Trigger ID",
+              "edit_id": "Edit trigger ID",
               "duplicate": "Duplicate",
               "delete": "[%key:ui::panel::mailbox::delete_button%]",
               "delete_confirm": "Are you sure you want to delete this?",