Merge pull request #11651 from home-assistant/add-docs-icon-config-flow

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

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import { mdiClose } from "@mdi/js";
+import { mdiClose, mdiHelpCircle } 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,
@@ -236,14 +237,33 @@ class DataEntryFlowDialog extends LitElement {
               // to reset the element.
               ""
             : html`
-                <ha-icon-button
+                <div class="dialog-actions">
-                  .label=${this.hass.localize(
+                  ${this._step
-                    "ui.panel.config.integrations.config_flow.dismiss"
+                    ? html`
-                  )}
+                        <a
-                  .path=${mdiClose}
+                          href=${documentationUrl(
-                  dialogAction="close"
+                            this.hass,
-                  ?rtl=${computeRTL(this.hass)}
+                            `/integrations/${this._step.handler}`
-                ></ha-icon-button>
+                          )}
+                          target="_blank"
+                          rel="noreferrer noopener"
+                          ><ha-icon-button
+                            .label=${this.hass.localize("ui.common.help")}
+                            .path=${mdiHelpCircle}
+                            ?rtl=${computeRTL(this.hass)}
+                          ></ha-icon-button
+                        ></a>
+                      `
+                    : ""}
+                  <ha-icon-button
+                    .label=${this.hass.localize(
+                      "ui.panel.config.integrations.config_flow.dismiss"
+                    )}
+                    .path=${mdiClose}
+                    dialogAction="close"
+                    ?rtl=${computeRTL(this.hass)}
+                  ></ha-icon-button>
+                </div>
                 ${this._step === null
                   ? this._handler
                     ? html`<step-flow-pick-flow
@@ -472,16 +492,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);
+        }
       `,
     ];
   }