Restore trigger id in overflow menu for trigger (#27702)

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

@@ -3,6 +3,7 @@ import {
   mdiContentCopy,
   mdiContentCut,
   mdiDelete,
+  mdiIdentifier,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
   mdiPlusCircleMultipleOutline,
@@ -40,6 +41,8 @@ export default class HaAutomationSidebarTrigger extends LitElement {
   @property({ type: Number, attribute: "sidebar-key" })
   public sidebarKey?: number;
 
+  @state() private _requestShowId = false;
+
   @state() private _warnings?: string[];
 
   @query(".sidebar-editor")
@@ -47,6 +50,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
 
   protected willUpdate(changedProperties) {
     if (changedProperties.has("config")) {
+      this._requestShowId = false;
       this._warnings = undefined;
       if (this.config) {
         this.yamlMode = this.config.yamlMode;
@@ -101,6 +105,24 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           </div>
         </ha-md-menu-item>
 
+        ${!this.yamlMode &&
+        !("id" in this.config.config) &&
+        !this._requestShowId
+          ? html`<ha-md-menu-item
+              slot="menu-items"
+              .clickAction=${this._showTriggerId}
+              .disabled=${this.disabled || type === "list"}
+            >
+              <ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
+              <div class="overflow-label">
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.triggers.edit_id"
+                )}
+                <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+              </div>
+            </ha-md-menu-item>`
+          : nothing}
+
         <ha-md-divider
           slot="menu-items"
           role="separator"
@@ -250,6 +272,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
             @value-changed=${this._valueChangedSidebar}
             @yaml-changed=${this._yamlChangedSidebar}
             .uiSupported=${this.config.uiSupported}
+            .showId=${this._requestShowId}
             .yamlMode=${this.yamlMode}
             .disabled=${this.disabled}
             @ui-mode-not-available=${this._handleUiModeNotAvailable}
@@ -292,6 +315,10 @@ export default class HaAutomationSidebarTrigger extends LitElement {
     fireEvent(this, "toggle-yaml-mode");
   };
 
+  private _showTriggerId = () => {
+    this._requestShowId = true;
+  };
+
   static styles = [sidebarEditorStyles, overflowStyles];
 }
 

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

@@ -29,6 +29,8 @@ export default class HaAutomationTriggerEditor extends LitElement {
 
   @property({ type: Boolean, attribute: "sidebar" }) public inSidebar = false;
 
+  @property({ type: Boolean, attribute: "show-id" }) public showId = false;
+
   @query("ha-yaml-editor") public yamlEditor?: HaYamlEditor;
 
   protected render() {
@@ -36,6 +38,8 @@ export default class HaAutomationTriggerEditor extends LitElement {
 
     const yamlMode = this.yamlMode || !this.uiSupported;
 
+    const showId = "id" in this.trigger || this.showId;
+
     return html`
       <div
         class=${classMap({
@@ -70,20 +74,15 @@ export default class HaAutomationTriggerEditor extends LitElement {
               ></ha-yaml-editor>
             `
           : html`
-              ${!isTriggerList(this.trigger)
+              ${showId && !isTriggerList(this.trigger)
                 ? html`
                     <ha-textfield
-                      .label=${`${this.hass.localize(
+                      .label=${this.hass.localize(
                         "ui.panel.config.automation.editor.triggers.id"
-                      )} (${this.hass.localize(
+                      )}
-                        "ui.panel.config.automation.editor.triggers.optional"
-                      )})`}
                       .value=${this.trigger.id || ""}
                       .disabled=${this.disabled}
                       @change=${this._idChanged}
-                      .helper=${this.hass.localize(
-                        "ui.panel.config.automation.editor.triggers.id_helper"
-                      )}
                     ></ha-textfield>
                   `
                 : nothing}

src/translations/en.json

@@ -3945,7 +3945,6 @@
               "add": "Add trigger",
               "empty_search": "No triggers found for {term}",
               "id": "Trigger ID",
-              "id_helper": "Helps identify each run based on which trigger fired.",
               "optional": "Optional",
               "edit_id": "Edit ID",
               "duplicate": "[%key:ui::common::duplicate%]",