♻️ change call-service row to button row (#4744)

* ♻️ change call-service row to button row

* address comments

* cleanup

* address comments

* remove unused function

* address comments

* super

* Add CallServiceConfig back in

* Update types.ts

* Update types.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/lovelace/common/call-service.ts

@@ -1,12 +0,0 @@
-import { HomeAssistant } from "../../../types";
-import { CallServiceConfig } from "../entity-rows/types";
-
-export const callService = (
-  config: CallServiceConfig,
-  hass: HomeAssistant
-): void => {
-  const entityId = config.entity;
-  const [domain, service] = config.service.split(".", 2);
-  const serviceData = { entity_id: entityId, ...config.service_data };
-  hass.callService(domain, service, serviceData);
-};

src/panels/lovelace/create-element/create-row-element.ts

@@ -4,6 +4,7 @@ import "../entity-rows/hui-script-entity-row";
 import "../entity-rows/hui-sensor-entity-row";
 import "../entity-rows/hui-text-entity-row";
 import "../entity-rows/hui-toggle-entity-row";
+import "../special-rows/hui-button-row";
 import "../special-rows/hui-attribute-row";
 import "../special-rows/hui-call-service-row";
 import { EntityConfig } from "../entity-rows/types";
@@ -16,6 +17,7 @@ const ALWAYS_LOADED_TYPES = new Set([
   "sensor-entity",
   "text-entity",
   "toggle-entity",
+  "button",
   "call-service",
 ]);
 const LAZY_LOAD_TYPES = {

src/panels/lovelace/entity-rows/types.ts

@@ -1,5 +1,6 @@
 import { HomeAssistant } from "../../../types";
 import { Condition } from "../common/validate-condition";
+import { ActionConfig } from "../../../data/lovelace";
 
 export interface EntityConfig {
   entity: string;
@@ -30,9 +31,16 @@ export interface WeblinkConfig {
 }
 export interface CallServiceConfig extends EntityConfig {
   type: "call-service";
-  action_name?: string;
   service: string;
   service_data?: { [key: string]: any };
+  action_name?: string;
+}
+export interface ButtonRowConfig extends EntityConfig {
+  type: "button";
+  action_name?: string;
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
+  double_tap_action?: ActionConfig;
 }
 export interface CastConfig {
   type: "cast";
@@ -54,6 +62,7 @@ export type LovelaceRowConfig =
   | WeblinkConfig
   | CallServiceConfig
   | CastConfig
+  | ButtonRowConfig
   | ButtonsRowConfig
   | ConditionalRowConfig
   | AttributeRowConfig;

src/panels/lovelace/special-rows/hui-button-row.ts

@@ -0,0 +1,103 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
+} from "lit-element";
+import "@material/mwc-button";
+
+import "../../../components/ha-icon";
+
+import { LovelaceRow, ButtonRowConfig } from "../entity-rows/types";
+import { HomeAssistant } from "../../../types";
+import { actionHandler } from "../common/directives/action-handler-directive";
+import { hasAction } from "../common/has-action";
+import { ActionHandlerEvent } from "../../../data/lovelace";
+import { handleAction } from "../common/handle-action";
+
+@customElement("hui-button-row")
+export class HuiButtonRow extends LitElement implements LovelaceRow {
+  public hass?: HomeAssistant;
+  @property() private _config?: ButtonRowConfig;
+
+  public setConfig(config: ButtonRowConfig): void {
+    if (!config) {
+      throw new Error("Error in card configuration.");
+    }
+
+    if (!config.name) {
+      throw new Error("Error in card configuration. No name specified.");
+    }
+
+    if (!config.tap_action) {
+      throw new Error("Error in card configuration. No action specified.");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    return html`
+      <ha-icon .icon=${this._config.icon || "hass:remote"}></ha-icon>
+      <div class="flex">
+        <div>${this._config.name}</div>
+        <mwc-button
+          @action=${this._handleAction}
+          .actionHandler=${actionHandler({
+            hasHold: hasAction(this._config!.hold_action),
+            hasDoubleClick: hasAction(this._config!.double_tap_action),
+          })}
+          >${this._config.action_name
+            ? this._config.action_name
+            : this.hass!.localize("ui.card.service.run")}</mwc-button
+        >
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      ha-icon {
+        padding: 8px;
+        color: var(--paper-item-icon-color);
+      }
+      .flex {
+        flex: 1;
+        overflow: hidden;
+        margin-left: 16px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .flex div {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      mwc-button {
+        margin-right: -0.57em;
+      }
+    `;
+  }
+
+  private _handleAction(ev: ActionHandlerEvent) {
+    handleAction(this, this.hass!, this._config!, ev.detail.action!);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-button-row": HuiButtonRow;
+  }
+}

src/panels/lovelace/special-rows/hui-call-service-row.ts

@@ -1,83 +1,34 @@
-import {
+import { customElement } from "lit-element";
-  html,
-  LitElement,
-  TemplateResult,
-  customElement,
-  property,
-  css,
-  CSSResult,
-} from "lit-element";
-import "@material/mwc-button";
 
-import "../../../components/ha-icon";
+import { CallServiceConfig } from "../entity-rows/types";
-
+import { HuiButtonRow } from "./hui-button-row";
-import { callService } from "../common/call-service";
-import { LovelaceRow, CallServiceConfig } from "../entity-rows/types";
-import { HomeAssistant } from "../../../types";
 
 @customElement("hui-call-service-row")
-class HuiCallServiceRow extends LitElement implements LovelaceRow {
+export class HuiCallServiceRow extends HuiButtonRow {
-  public hass?: HomeAssistant;
+  public setConfig(config: any): void {
+    const callServiceConfig: CallServiceConfig = config;
 
-  @property() private _config?: CallServiceConfig;
+    if (!callServiceConfig) {
-
-  public setConfig(config: CallServiceConfig): void {
-    if (!config || !config.name || !config.service) {
       throw new Error("Error in card configuration.");
     }
 
-    this._config = { icon: "hass:remote", ...config };
+    if (!callServiceConfig.name) {
+      throw new Error("Error in card configuration. No name specified.");
     }
 
-  protected render(): TemplateResult {
+    if (!callServiceConfig.service) {
-    if (!this._config) {
+      throw new Error("Error in card configuration. No service specified.");
-      return html``;
     }
 
-    return html`
+    super.setConfig({
-      <ha-icon .icon="${this._config.icon}"></ha-icon>
+      tap_action: {
-      <div class="flex">
+        action: "call-service",
-        <div>${this._config.name}</div>
+        service: callServiceConfig.service,
-        <mwc-button @click="${this._callService}"
+        service_data: callServiceConfig.service_data,
-          >${this._config.action_name
+      },
-            ? this._config.action_name
+      ...callServiceConfig,
-            : this.hass!.localize("ui.card.service.run")}</mwc-button
+      type: "button",
-        >
+    });
-      </div>
-    `;
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      :host {
-        display: flex;
-        align-items: center;
-      }
-      ha-icon {
-        padding: 8px;
-        color: var(--paper-item-icon-color);
-      }
-      .flex {
-        flex: 1;
-        overflow: hidden;
-        margin-left: 16px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-      .flex div {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      mwc-button {
-        margin-right: -0.57em;
-      }
-    `;
-  }
-
-  private _callService() {
-    callService(this._config!, this.hass!);
   }
 }