Fixes for flow help icon (#12224)

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

@@ -29,6 +29,7 @@ import {
   DeviceRegistryEntry,
   subscribeDeviceRegistry,
 } from "../../data/device_registry";
+import { fetchIntegrationManifest } from "../../data/integration";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
@@ -43,10 +44,10 @@ import "./step-flow-create-entry";
 import "./step-flow-external";
 import "./step-flow-form";
 import "./step-flow-loading";
+import "./step-flow-menu";
 import "./step-flow-pick-flow";
 import "./step-flow-pick-handler";
 import "./step-flow-progress";
-import "./step-flow-menu";
 
 let instance = 0;
 
@@ -237,22 +238,32 @@ class DataEntryFlowDialog extends LitElement {
               ""
             : html`
                 <div class="dialog-actions">
-                  ${["form", "menu", "external"].includes(
-                    this._step?.type as any
-                  )
+                  ${([
+                    "form",
+                    "menu",
+                    "external",
+                    "progress",
+                    "data_entry_flow_progressed",
+                  ].includes(this._step?.type as any) &&
+                    this._params.manifest?.is_built_in) ||
+                  this._params.manifest?.documentation
                     ? html`
                         <a
-                          href=${documentationUrl(
-                            this.hass,
-                            `/integrations/${this._step!.handler}`
-                          )}
+                          href=${this._params.manifest.is_built_in
+                            ? documentationUrl(
+                                this.hass,
+                                `/integrations/${this._params.manifest.domain}`
+                              )
+                            : this._params?.manifest?.documentation}
                           target="_blank"
                           rel="noreferrer noopener"
-                          ><ha-icon-button
+                        >
+                          <ha-icon-button
                             .label=${this.hass.localize("ui.common.help")}
                             .path=${mdiHelpCircle}
                             ?rtl=${computeRTL(this.hass)}
-                          ></ha-icon-button
+                          >
+                          </ha-icon-button
                         ></a>
                       `
                     : ""}
@@ -427,6 +438,17 @@ class DataEntryFlowDialog extends LitElement {
         this._handler = undefined;
       }
       this._processStep(step);
+      if (this._params!.manifest === undefined) {
+        try {
+          this._params!.manifest = await fetchIntegrationManifest(
+            this.hass,
+            this._params?.domain || step.handler
+          );
+        } catch (_) {
+          // No manifest
+          this._params!.manifest = null;
+        }
+      }
     } else {
       this._step = null;
       this._flowsInProgress = flowsInProgress;

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

@@ -10,6 +10,7 @@ import {
   DataEntryFlowStepMenu,
   DataEntryFlowStepProgress,
 } from "../../data/data_entry_flow";
+import { IntegrationManifest } from "../../data/integration";
 import { HomeAssistant } from "../../types";
 
 export interface FlowHandlers {
@@ -122,6 +123,8 @@ export interface DataEntryFlowDialogParams {
   startFlowHandler?: string;
   searchQuery?: string;
   continueFlowId?: string;
+  manifest?: IntegrationManifest | null;
+  domain?: string;
   dialogClosedCallback?: (params: {
     flowFinished: boolean;
     entryId?: string;

src/dialogs/config-flow/show-dialog-options-flow.ts

@@ -1,6 +1,6 @@
 import { html } from "lit";
 import { ConfigEntry } from "../../data/config_entries";
-import { domainToName } from "../../data/integration";
+import { domainToName, IntegrationManifest } from "../../data/integration";
 import {
   createOptionsFlow,
   deleteOptionsFlow,
@@ -16,12 +16,15 @@ export const loadOptionsFlowDialog = loadDataEntryFlowDialog;
 
 export const showOptionsFlowDialog = (
   element: HTMLElement,
-  configEntry: ConfigEntry
+  configEntry: ConfigEntry,
+  manifest?: IntegrationManifest | null
 ): void =>
   showFlowDialog(
     element,
     {
       startFlowHandler: configEntry.entry_id,
+      domain: configEntry.domain,
+      manifest,
     },
     {
       loadDevicesAndAreas: false,

src/dialogs/config-flow/step-flow-form.ts

@@ -190,6 +190,10 @@ class StepFlowForm extends LitElement {
           margin-top: 24px;
           display: block;
         }
+        h2 {
+          word-break: break-word;
+          padding-right: 72px;
+        }
       `,
     ];
   }

src/panels/config/entities/entity-registry-settings.ts

@@ -730,7 +730,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
   }
 
   private async _showOptionsFlow() {
-    showOptionsFlowDialog(this, this._helperConfigEntry!);
+    showOptionsFlowDialog(this, this._helperConfigEntry!, null);
   }
 
   private _switchAsDomainsSorted = memoizeOne(

src/panels/config/integrations/ha-config-integrations.ts

@@ -700,6 +700,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
         this._handleFlowUpdated();
       },
       startFlowHandler: domain,
+      manifest: this._manifests[domain],
       showAdvanced: this.hass.userData?.showAdvanced,
     });
   }

src/panels/config/integrations/ha-integration-card.ts

@@ -482,7 +482,11 @@ export class HaIntegrationCard extends LitElement {
   );
 
   private _showOptions(ev) {
-    showOptionsFlowDialog(this, ev.target.closest("ha-card").configEntry);
+    showOptionsFlowDialog(
+      this,
+      ev.target.closest("ha-card").configEntry,
+      this.manifest
+    );
   }
 
   private _handleRename(ev: CustomEvent<RequestSelectedDetail>): void {