From 8e8557dd6c4b1e0501461bb301a72ab2ca59a8ce Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Sat, 27 Feb 2021 21:00:22 +0100
Subject: [PATCH 1/2] Service dev tools: Add service picker to YAML mode

---
 .../service/developer-tools-service.ts        | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/panels/developer-tools/service/developer-tools-service.ts b/src/panels/developer-tools/service/developer-tools-service.ts
index aba167cf5a75..8a9494b63720 100644
--- a/src/panels/developer-tools/service/developer-tools-service.ts
+++ b/src/panels/developer-tools/service/developer-tools-service.ts
@@ -86,10 +86,15 @@ class HaPanelDevService extends LitElement {
         </p>
 
         ${this._yamlMode
-          ? html`<ha-yaml-editor
-              .defaultValue=${this._serviceData}
-              @value-changed=${this._yamlChanged}
-            ></ha-yaml-editor>`
+          ? html`<ha-service-picker
+                .hass=${this.hass}
+                .value=${this._serviceData?.service}
+                @value-changed=${this._serviceChanged}
+              ></ha-service-picker>
+              <ha-yaml-editor
+                .defaultValue=${this._serviceData}
+                @value-changed=${this._yamlChanged}
+              ></ha-yaml-editor>`
           : html`<ha-card
               ><div>
                 <ha-service-control
@@ -97,7 +102,7 @@ class HaPanelDevService extends LitElement {
                   .value=${this._serviceData}
                   .narrow=${this.narrow}
                   showAdvanced
-                  @value-changed=${this._serviceChanged}
+                  @value-changed=${this._serviceControlChanged}
                 ></ha-service-control></div
             ></ha-card>`}
       </div>
@@ -266,13 +271,19 @@ class HaPanelDevService extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    this._serviceChanged(ev);
+    this._serviceControlChanged(ev);
   }
 
-  private _serviceChanged(ev) {
+  private _serviceControlChanged(ev) {
     this._serviceData = ev.detail.value;
   }
 
+  private _serviceChanged(ev) {
+    ev.stopPropagation();
+    this._serviceData = { service: ev.detail.value || "", data: {} };
+    this._yamlEditor?.setValue(this._serviceData);
+  }
+
   private _fillExampleData() {
     const { fields } = this._fields(
       this.hass.services,

From 35976434b230912f586ae4373263ab224b74c6d9 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Sat, 27 Feb 2021 21:01:51 +0100
Subject: [PATCH 2/2] Update developer-tools-service.ts

---
 .../developer-tools/service/developer-tools-service.ts      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/panels/developer-tools/service/developer-tools-service.ts b/src/panels/developer-tools/service/developer-tools-service.ts
index 8a9494b63720..8488b93c0d94 100644
--- a/src/panels/developer-tools/service/developer-tools-service.ts
+++ b/src/panels/developer-tools/service/developer-tools-service.ts
@@ -102,7 +102,7 @@ class HaPanelDevService extends LitElement {
                   .value=${this._serviceData}
                   .narrow=${this.narrow}
                   showAdvanced
-                  @value-changed=${this._serviceControlChanged}
+                  @value-changed=${this._serviceDataChanged}
                 ></ha-service-control></div
             ></ha-card>`}
       </div>
@@ -271,10 +271,10 @@ class HaPanelDevService extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    this._serviceControlChanged(ev);
+    this._serviceDataChanged(ev);
   }
 
-  private _serviceControlChanged(ev) {
+  private _serviceDataChanged(ev) {
     this._serviceData = ev.detail.value;
   }