Add link to integration docs from service control (#8290)

* Add link to integration help to dev tool services

* Adjust to new service control

* Update src/translations/en.json

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

* Make icon less noticable + correct translation

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

src/components/ha-service-control.ts

@@ -1,3 +1,4 @@
+import { mdiHelpCircle } from "@mdi/js";
 import { HassService, HassServiceTarget } from "home-assistant-js-websocket";
 import {
   css,
@@ -18,11 +19,12 @@ import { ENTITY_COMPONENT_DOMAINS } from "../data/entity";
 import { Selector } from "../data/selector";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
+import { documentationUrl } from "../util/documentation-url";
+import "./ha-checkbox";
 import "./ha-selector/ha-selector";
 import "./ha-service-picker";
 import "./ha-settings-row";
 import "./ha-yaml-editor";
-import "./ha-checkbox";
 import type { HaYamlEditor } from "./ha-yaml-editor";
 
 interface ExtHassService extends Omit<HassService, "fields"> {
@@ -178,7 +180,29 @@ export class HaServiceControl extends LitElement {
         .value=${this._value?.service}
         @value-changed=${this._serviceChanged}
       ></ha-service-picker>
-      <p>${serviceData?.description}</p>
+      <div class="description">
+        <p>${serviceData?.description}</p>
+        ${this.value?.service
+          ? html` <a
+              href="${documentationUrl(
+                this.hass,
+                "/integrations/" + computeDomain(this.value?.service)
+              )}"
+              title="${this.hass.localize(
+                "ui.components.service-control.integration_doc"
+              )}"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <mwc-icon-button>
+                <ha-svg-icon
+                  path=${mdiHelpCircle}
+                  class="help-icon"
+                ></ha-svg-icon>
+              </mwc-icon-button>
+            </a>`
+          : ""}
+      </div>
       ${serviceData && "target" in serviceData
         ? html`<ha-settings-row .narrow=${this.narrow}>
             ${hasOptional
@@ -410,6 +434,15 @@ export class HaServiceControl extends LitElement {
       ha-checkbox {
         margin-left: -16px;
       }
+      .help-icon {
+        color: var(--secondary-text-color);
+      }
+      .description {
+        justify-content: space-between;
+        display: flex;
+        align-items: center;
+        padding-right: 2px;
+      }
     `;
   }
 }

src/panels/developer-tools/service/developer-tools-service.ts

@@ -1,3 +1,4 @@
+import { mdiHelpCircle } from "@mdi/js";
 import { ERR_CONNECTION_LOST } from "home-assistant-js-websocket";
 import { safeLoad } from "js-yaml";
 import {
@@ -23,8 +24,8 @@ import "../../../components/ha-service-control";
 import "../../../components/ha-service-picker";
 import "../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
-import { ServiceAction } from "../../../data/script";
 import { forwardHaptic } from "../../../data/haptics";
+import { ServiceAction } from "../../../data/script";
 import {
   callExecuteScript,
   serviceCallWillDisconnect,
@@ -33,6 +34,7 @@ import { haStyle } from "../../../resources/styles";
 import "../../../styles/polymer-ha-style";
 import { HomeAssistant } from "../../../types";
 import "../../../util/app-localstorage-document";
+import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 
 class HaPanelDevService extends LitElement {
@@ -162,12 +164,39 @@ class HaPanelDevService extends LitElement {
               outlined
               .expanded=${this._yamlMode}
             >
-              ${this._yamlMode && target
+              ${this._yamlMode
-                ? html`<h3>
+                ? html` <div class="description">
-                    ${this.hass.localize(
+                    <h3>
-                      "ui.panel.developer-tools.tabs.services.accepts_target"
+                      ${target
-                    )}
+                        ? html`
-                  </h3>`
+                            ${this.hass.localize(
+                              "ui.panel.developer-tools.tabs.services.accepts_target"
+                            )}
+                          `
+                        : ""}
+                    </h3>
+                    ${this._serviceData?.service
+                      ? html` <a
+                          href="${documentationUrl(
+                            this.hass,
+                            "/integrations/" +
+                              computeDomain(this._serviceData?.service)
+                          )}"
+                          title="${this.hass.localize(
+                            "ui.components.service-control.integration_doc"
+                          )}"
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          <mwc-icon-button>
+                            <ha-svg-icon
+                              path=${mdiHelpCircle}
+                              class="help-icon"
+                            ></ha-svg-icon>
+                          </mwc-icon-button>
+                        </a>`
+                      : ""}
+                  </div>`
                 : ""}
               <table class="attributes">
                 <tr>
@@ -419,6 +448,15 @@ class HaPanelDevService extends LitElement {
           padding: 4px;
           vertical-align: middle;
         }
+
+        .help-icon {
+          color: var(--secondary-text-color);
+        }
+        .description {
+          justify-content: space-between;
+          display: flex;
+          align-items: center;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -452,7 +452,8 @@
         "required": "This field is required",
         "target": "Targets",
         "target_description": "What should this service use as targeted areas, devices or entities.",
-        "service_data": "Service data"
+        "service_data": "Service data",
+        "integration_doc": "Integration documentation"
       },
       "related-items": {
         "no_related_found": "No related items found.",