Script change icon (#20885)

* Add icon to rename dialog

* Check in entity registry

* Only use icon for script

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

@@ -4,12 +4,18 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
 import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-domain-icon";
+import "../../../../components/ha-icon-picker";
 import "../../../../components/ha-textarea";
 import "../../../../components/ha-textfield";
+
 import { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-import type { AutomationRenameDialog } from "./show-dialog-automation-rename";
+import type {
+  AutomationRenameDialogParams,
+  ScriptRenameDialogParams,
+} from "./show-dialog-automation-rename";
 
 @customElement("ha-dialog-automation-rename")
 class DialogAutomationRename extends LitElement implements HassDialog {
@@ -19,15 +25,20 @@ class DialogAutomationRename extends LitElement implements HassDialog {
 
   @state() private _error?: string;
 
-  private _params!: AutomationRenameDialog;
+  private _params!: AutomationRenameDialogParams | ScriptRenameDialogParams;
 
   private _newName?: string;
 
+  private _newIcon?: string;
+
   private _newDescription?: string;
 
-  public showDialog(params: AutomationRenameDialog): void {
+  public showDialog(
+    params: AutomationRenameDialogParams | ScriptRenameDialogParams
+  ): void {
     this._opened = true;
     this._params = params;
+    this._newIcon = "icon" in params.config ? params.config.icon : undefined;
     this._newName =
       params.config.alias ||
       this.hass.localize("ui.panel.config.automation.editor.default_name");
@@ -82,6 +93,25 @@ class DialogAutomationRename extends LitElement implements HassDialog {
           @input=${this._valueChanged}
         ></ha-textfield>
 
+        ${this._params.domain === "script"
+          ? html`
+              <ha-icon-picker
+                .hass=${this.hass}
+                .label=${this.hass.localize(
+                  "ui.panel.config.automation.editor.icon"
+                )}
+                .value=${this._newIcon}
+                @value-changed=${this._iconChanged}
+              >
+                <ha-domain-icon
+                  slot="fallback"
+                  domain=${this._params.domain}
+                  .hass=${this.hass}
+                >
+                </ha-domain-icon>
+              </ha-icon-picker>
+            `
+          : nothing}
         <ha-textarea
           .label=${this.hass.localize(
             "ui.panel.config.automation.editor.description.label"
@@ -109,6 +139,11 @@ class DialogAutomationRename extends LitElement implements HassDialog {
     `;
   }
 
+  private _iconChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    this._newIcon = ev.detail.value || undefined;
+  }
+
   private _valueChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const target = ev.target as any;
@@ -124,11 +159,21 @@ class DialogAutomationRename extends LitElement implements HassDialog {
       this._error = "Name is required";
       return;
     }
-    this._params.updateConfig({
-      ...this._params.config,
-      alias: this._newName,
-      description: this._newDescription,
-    });
+    if (this._params.domain === "script") {
+      this._params.updateConfig({
+        ...this._params.config,
+        alias: this._newName,
+        description: this._newDescription,
+        icon: this._newIcon,
+      });
+    } else {
+      this._params.updateConfig({
+        ...this._params.config,
+        alias: this._newName,
+        description: this._newDescription,
+      });
+    }
+
     this.closeDialog();
   }
 
@@ -138,9 +183,13 @@ class DialogAutomationRename extends LitElement implements HassDialog {
       haStyleDialog,
       css`
         ha-textfield,
-        ha-textarea {
+        ha-textarea,
+        ha-icon-picker {
           display: block;
         }
+        ha-icon-picker {
+          margin-top: 16px;
+        }
         ha-alert {
           display: block;
           margin-bottom: 16px;

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

@@ -5,21 +5,23 @@ import type { ScriptConfig } from "../../../../data/script";
 export const loadAutomationRenameDialog = () =>
   import("./dialog-automation-rename");
 
-export interface AutomationRenameDialog {
+export interface AutomationRenameDialogParams {
   config: AutomationConfig;
+  domain: "automation";
   updateConfig: (config: AutomationConfig) => void;
   onClose: () => void;
 }
 
-export interface ScriptRenameDialog {
+export interface ScriptRenameDialogParams {
   config: ScriptConfig;
+  domain: "script";
   updateConfig: (config: ScriptConfig) => void;
   onClose: () => void;
 }
 
 export const showAutomationRenameDialog = (
   element: HTMLElement,
-  dialogParams: AutomationRenameDialog | ScriptRenameDialog
+  dialogParams: AutomationRenameDialogParams | ScriptRenameDialogParams
 ): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "ha-dialog-automation-rename",

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

@@ -32,10 +32,11 @@ import { computeRTL } from "../../../common/util/compute_rtl";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-fab";
+import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-list-item";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
-import "../../../components/ha-list-item";
 import {
   AutomationConfig,
   AutomationEntity,
@@ -688,6 +689,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     return new Promise((resolve) => {
       showAutomationRenameDialog(this, {
         config: this._config!,
+        domain: "automation",
         updateConfig: (config) => {
           this._config = config;
           this._dirty = true;

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

@@ -33,9 +33,9 @@ import "../../../components/ha-button-menu";
 import "../../../components/ha-fab";
 
 import "../../../components/ha-icon-button";
+import "../../../components/ha-list-item";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
-import "../../../components/ha-list-item";
 import { validateConfig } from "../../../data/config";
 import { UNAVAILABLE } from "../../../data/entity";
 import { EntityRegistryEntry } from "../../../data/entity_registry";
@@ -50,6 +50,7 @@ import {
   triggerScript,
 } from "../../../data/script";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { haStyle } from "../../../resources/styles";
@@ -60,7 +61,6 @@ import { showAutomationRenameDialog } from "../automation/automation-rename-dial
 import "./blueprint-script-editor";
 import "./manual-script-editor";
 import type { HaManualScriptEditor } from "./manual-script-editor";
-import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 
 export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -654,6 +654,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     return new Promise((resolve) => {
       showAutomationRenameDialog(this, {
         config: this._config!,
+        domain: "script",
         updateConfig: (config) => {
           this._config = config;
           this._dirty = true;

src/translations/en.json

@@ -2768,6 +2768,7 @@
               "placeholder": "Optional description",
               "add": "Add description"
             },
+            "icon": "Icon",
             "blueprint": {
               "header": "Blueprint",
               "blueprint_to_use": "Blueprint to use",