Call a service: Split remaining service_data's into data and target (#21440)

* service_data into data and target

* Add other possible targets

src/components/buttons/ha-call-service-button.ts

@@ -1,5 +1,6 @@
 import { LitElement, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators";
+import { HassServiceTarget } from "home-assistant-js-websocket";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import "./ha-progress-button";
 import { HomeAssistant } from "../../types";
@@ -17,7 +18,9 @@ class HaCallServiceButton extends LitElement {
 
   @property() public service!: string;
 
-  @property({ type: Object }) public serviceData = {};
+  @property({ type: Object }) public target!: HassServiceTarget;
+
+  @property({ type: Object }) public data = {};
 
   @property() public confirmation?;
 
@@ -39,7 +42,8 @@ class HaCallServiceButton extends LitElement {
     const eventData = {
       domain: this.domain,
       service: this.service,
-      serviceData: this.serviceData,
+      data: this.data,
+      target: this.target,
       success: false,
     };
 
@@ -47,7 +51,12 @@ class HaCallServiceButton extends LitElement {
       this.shadowRoot!.querySelector("ha-progress-button")!;
 
     try {
-      await this.hass.callService(this.domain, this.service, this.serviceData);
+      await this.hass.callService(
+        this.domain,
+        this.service,
+        this.data,
+        this.target
+      );
       this.progress = false;
       progressElement.actionSuccess();
       eventData.success = true;
@@ -85,7 +94,8 @@ declare global {
     "hass-service-called": {
       domain: string;
       service: string;
-      serviceData: object;
+      target: HassServiceTarget;
+      data: object;
       success: boolean;
     };
   }

src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts

@@ -134,7 +134,7 @@ export class ZHAClusterAttributes extends LitElement {
           .hass=${this.hass}
           domain="zha"
           service="set_zigbee_cluster_attribute"
-          .serviceData=${this._setAttributeServiceData}
+          .data=${this._setAttributeServiceData}
         >
           ${this.hass!.localize(
             "ui.panel.config.zha.cluster_attributes.write_zigbee_attribute"

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -115,7 +115,7 @@ export class ZHAClusterCommands extends LitElement {
                   .hass=${this.hass}
                   domain="zha"
                   service="issue_zigbee_cluster_command"
-                  .serviceData=${this._issueClusterCommandServiceData}
+                  .data=${this._issueClusterCommandServiceData}
                   .disabled=${!this._canIssueCommand}
                 >
                   ${this.hass!.localize(

src/panels/config/integrations/integration-panels/zha/zha-device-card.ts

@@ -6,7 +6,6 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeStateName } from "../../../../../common/entity/compute_state_name";
 import { stringCompare } from "../../../../../common/string/compare";
 import { slugify } from "../../../../../common/string/slugify";
-import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/entity/state-badge";
 import "../../../../../components/ha-area-picker";
 import "../../../../../components/ha-card";

src/panels/lovelace/elements/hui-service-button-element.ts

@@ -40,12 +40,23 @@ export class HuiServiceButtonElement
       return nothing;
     }
 
+    const { entity_id, label_id, floor_id, device_id, area_id } =
+      this._config.service_data ?? {};
+    const updatedTarget = this._config.target ?? {
+      entity_id,
+      label_id,
+      floor_id,
+      device_id,
+      area_id,
+    };
+
     return html`
       <ha-call-service-button
         .hass=${this.hass}
         .domain=${this._domain}
         .service=${this._service}
-        .serviceData=${this._config.service_data}
+        .data=${this._config.data ?? this._config.service_data}
+        .target=${updatedTarget}
         >${this._config.title}</ha-call-service-button
       >
     `;

src/panels/lovelace/elements/types.ts

@@ -1,3 +1,4 @@
+import { HassServiceTarget } from "home-assistant-js-websocket";
 import { ActionConfig } from "../../../data/lovelace/config/action";
 import { HomeAssistant } from "../../../types";
 import { Condition } from "../common/validate-condition";
@@ -56,7 +57,10 @@ export interface ImageElementConfig extends LovelaceElementConfigBase {
 export interface ServiceButtonElementConfig extends LovelaceElementConfigBase {
   title?: string;
   service?: string;
+  target?: HassServiceTarget;
+  // "service_data" is kept for backwards compatibility. Replaced by "data".
   service_data?: Record<string, unknown>;
+  data?: Record<string, unknown>;
 }
 
 export interface StateBadgeElementConfig extends LovelaceElementConfigBase {