From 16bd1f5883a567171e0d922c6e6d61bf9c4d05fc Mon Sep 17 00:00:00 2001
From: "David F. Mulcahey" <david.mulcahey@me.com>
Date: Wed, 26 Oct 2022 07:19:48 -0400
Subject: [PATCH] Update ZHA manage device dialog to use a form for cluster
 command arguments (#14052)

---
 .../buttons/ha-call-service-button.js         |  5 ++
 src/data/zha.ts                               |  1 +
 .../integration-panels/zha/types.ts           |  1 +
 .../zha/zha-cluster-commands.ts               | 47 +++++++++++++++++--
 4 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/src/components/buttons/ha-call-service-button.js b/src/components/buttons/ha-call-service-button.js
index 6695ea7b0d..aa53eec5ac 100644
--- a/src/components/buttons/ha-call-service-button.js
+++ b/src/components/buttons/ha-call-service-button.js
@@ -14,6 +14,7 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) {
       <ha-progress-button
         id="progress"
         progress="[[progress]]"
+        disabled="[[disabled]]"
         on-click="buttonTapped"
         tabindex="0"
         ><slot></slot
@@ -48,6 +49,10 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) {
       confirmation: {
         type: String,
       },
+
+      disabled: {
+        type: Boolean,
+      },
     };
   }
 
diff --git a/src/data/zha.ts b/src/data/zha.ts
index 55bf16d7c4..f2e1d6363f 100644
--- a/src/data/zha.ts
+++ b/src/data/zha.ts
@@ -106,6 +106,7 @@ export interface Command {
   name: string;
   id: number;
   type: string;
+  schema: HaFormSchema[];
 }
 
 export interface ReadAttributeServiceData {
diff --git a/src/panels/config/integrations/integration-panels/zha/types.ts b/src/panels/config/integrations/integration-panels/zha/types.ts
index 3e9af96a18..17ab772798 100644
--- a/src/panels/config/integrations/integration-panels/zha/types.ts
+++ b/src/panels/config/integrations/integration-panels/zha/types.ts
@@ -35,6 +35,7 @@ export interface IssueCommandServiceData {
   cluster_type: string;
   command: number;
   command_type: string;
+  params?: any;
 }
 
 export interface ZHADeviceSelectedParams {
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
index 129e42e74f..31298a5e0a 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
@@ -13,6 +13,7 @@ import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-select";
+import "../../../../../components/ha-form/ha-form";
 import {
   Cluster,
   Command,
@@ -42,6 +43,12 @@ export class ZHAClusterCommands extends LitElement {
   @state()
   private _issueClusterCommandServiceData?: IssueCommandServiceData;
 
+  @state()
+  private _canIssueCommand = false;
+
+  @state()
+  private _commandData: Record<string, any> = {};
+
   protected updated(changedProperties: PropertyValues): void {
     if (changedProperties.has("selectedCluster")) {
       this._commands = undefined;
@@ -93,12 +100,23 @@ export class ZHAClusterCommands extends LitElement {
                   )}
                 ></paper-input>
               </div>
+              <div class="command-form">
+                <ha-form
+                  .hass=${this.hass}
+                  .schema=${this._commands.find(
+                    (command) => command.id === this._selectedCommandId
+                  )!.schema}
+                  @value-changed=${this._commandDataChanged}
+                  .data=${this._commandData}
+                ></ha-form>
+              </div>
               <div class="card-actions">
                 <ha-call-service-button
                   .hass=${this.hass}
                   domain="zha"
                   service="issue_zigbee_cluster_command"
                   .serviceData=${this._issueClusterCommandServiceData}
+                  .disabled=${!this._canIssueCommand}
                 >
                   ${this.hass!.localize(
                     "ui.panel.config.zha.cluster_commands.issue_zigbee_command"
@@ -133,18 +151,35 @@ export class ZHAClusterCommands extends LitElement {
     if (!this.device || !this.selectedCluster || !this._commands) {
       return undefined;
     }
+    const selectedCommand = this._commands.find(
+      (command) => command.id === this._selectedCommandId
+    );
+
+    this._canIssueCommand =
+      this._commandData &&
+      selectedCommand!.schema.every(
+        (field) =>
+          !field.required ||
+          !["", undefined].includes(this._commandData![field.name])
+      );
+
     return {
       ieee: this.device!.ieee,
       endpoint_id: this.selectedCluster!.endpoint_id,
       cluster_id: this.selectedCluster!.id,
       cluster_type: this.selectedCluster!.type,
       command: this._selectedCommandId!,
-      command_type: this._commands.find(
-        (command) => command.id === this._selectedCommandId
-      )!.type,
+      command_type: selectedCommand!.type,
+      params: this._commandData,
     };
   }
 
+  private async _commandDataChanged(ev: CustomEvent): Promise<void> {
+    this._commandData = ev.detail.value;
+    this._issueClusterCommandServiceData =
+      this._computeIssueClusterCommandServiceData();
+  }
+
   private _onManufacturerCodeOverrideChanged(value: ChangeEvent): void {
     this._manufacturerCodeOverride = value.detail!.value;
     this._issueClusterCommandServiceData =
@@ -185,6 +220,12 @@ export class ZHAClusterCommands extends LitElement {
           padding-bottom: 10px;
         }
 
+        .command-form {
+          padding-left: 28px;
+          padding-right: 28px;
+          padding-bottom: 10px;
+        }
+
         .header {
           flex-grow: 1;
         }