Add a docs icon to the config flow dialog

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import { mdiClose } from "@mdi/js";
+import { mdiClose, mdiHelpCircleOutline } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
@@ -33,6 +33,7 @@ import {
 } from "../../data/device_registry";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import { documentationUrl } from "../../util/documentation-url";
 import { showAlertDialog } from "../generic/show-dialog-box";
 import {
   DataEntryFlowDialogParams,
@@ -231,6 +232,24 @@ class DataEntryFlowDialog extends LitElement {
               // to reset the element.
               ""
             : html`
+                <div class="dialog-actions">
+                  ${this._step
+                    ? html`
+                        <a
+                          href=${documentationUrl(
+                            this.hass,
+                            `/integrations/${this._step.handler}`
+                          )}
+                          target="_blank"
+                          rel="noreferrer noopener"
+                          ><ha-icon-button
+                            .label=${"Help"}
+                            .path=${mdiHelpCircleOutline}
+                            ?rtl=${computeRTL(this.hass)}
+                          ></ha-icon-button
+                        ></a>
+                      `
+                    : ""}
                   <ha-icon-button
                     .label=${this.hass.localize(
                       "ui.panel.config.integrations.config_flow.dismiss"
@@ -239,6 +258,7 @@ class DataEntryFlowDialog extends LitElement {
                     dialogAction="close"
                     ?rtl=${computeRTL(this.hass)}
                   ></ha-icon-button>
+                </div>
                 ${this._step === null
                   ? this._handler
                     ? html`<step-flow-pick-flow
@@ -452,16 +472,19 @@ class DataEntryFlowDialog extends LitElement {
         ha-dialog {
           --dialog-content-padding: 0;
         }
-        ha-icon-button {
+        .dialog-actions {
           padding: 16px;
           position: absolute;
           top: 0;
           right: 0;
         }
-        ha-icon-button[rtl] {
+        .dialog-actions[rtl] {
           right: auto;
           left: 0;
         }
+        .dialog-actions > * {
+          color: var(--secondary-text-color);
+        }
       `,
     ];
   }