Add external step (#3183)

* Add external step

* Automatically open external step

src/data/config_entries.ts

@@ -3,6 +3,15 @@ import { createCollection } from "home-assistant-js-websocket";
 import { debounce } from "../common/util/debounce";
 import { LocalizeFunc } from "../common/translations/localize";
 
+export interface DataEntryFlowProgressedEvent {
+  type: "data_entry_flow_progressed";
+  data: {
+    handler: string;
+    flow_id: string;
+    refresh: boolean;
+  };
+}
+
 export interface ConfigEntry {
   entry_id: string;
   domain: string;
@@ -38,6 +47,15 @@ export interface ConfigFlowStepForm {
   description_placeholders: { [key: string]: string };
 }
 
+export interface ConfigFlowStepExternal {
+  type: "external";
+  flow_id: string;
+  handler: string;
+  step_id: string;
+  url: string;
+  description_placeholders: { [key: string]: string };
+}
+
 export interface ConfigFlowStepCreateEntry {
   type: "create_entry";
   version: number;
@@ -60,6 +78,7 @@ export interface ConfigFlowStepAbort {
 
 export type ConfigFlowStep =
   | ConfigFlowStepForm
+  | ConfigFlowStepExternal
   | ConfigFlowStepCreateEntry
   | ConfigFlowStepAbort;
 

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

@@ -34,6 +34,7 @@ import { HaConfigFlowParams } from "./show-dialog-config-flow";
 import "./step-flow-pick-handler";
 import "./step-flow-loading";
 import "./step-flow-form";
+import "./step-flow-external";
 import "./step-flow-abort";
 import "./step-flow-create-entry";
 import {
@@ -155,6 +156,13 @@ class ConfigFlowDialog extends LitElement {
                 .hass=${this.hass}
               ></step-flow-form>
             `
+          : this._step.type === "external"
+          ? html`
+              <step-flow-external
+                .step=${this._step}
+                .hass=${this.hass}
+              ></step-flow-external>
+            `
           : this._step.type === "abort"
           ? html`
               <step-flow-abort
@@ -251,7 +259,7 @@ class ConfigFlowDialog extends LitElement {
       return;
     }
     const flowFinished = Boolean(
-      this._step && ["success", "abort"].includes(this._step.type)
+      this._step && ["create_entry", "abort"].includes(this._step.type)
     );
 
     // If we created this flow, delete it now.

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

@@ -0,0 +1,106 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  customElement,
+  property,
+  CSSResultArray,
+  css,
+} from "lit-element";
+import "@material/mwc-button";
+
+import {
+  ConfigFlowStepExternal,
+  DataEntryFlowProgressedEvent,
+  fetchConfigFlow,
+} from "../../data/config_entries";
+import { HomeAssistant } from "../../types";
+import { localizeKey } from "../../common/translations/localize";
+import { fireEvent } from "../../common/dom/fire_event";
+import { configFlowContentStyles } from "./styles";
+
+@customElement("step-flow-external")
+class StepFlowExternal extends LitElement {
+  @property()
+  public hass!: HomeAssistant;
+
+  @property()
+  private step!: ConfigFlowStepExternal;
+
+  protected render(): TemplateResult | void {
+    const localize = this.hass.localize;
+    const step = this.step;
+
+    const description = localizeKey(
+      localize,
+      `component.${step.handler}.config.${step.step_id}.description`,
+      step.description_placeholders
+    );
+
+    return html`
+      <h2>
+        ${localize(
+          `component.${step.handler}.config.step.${step.step_id}.title`
+        )}
+      </h2>
+      <div class="content">
+        <p>
+          ${localize(
+            "ui.panel.config.integrations.config_flow.external_step.description"
+          )}
+        </p>
+        ${description
+          ? html`
+              <ha-markdown .content=${description} allow-svg></ha-markdown>
+            `
+          : ""}
+        <div class="open-button">
+          <a href=${this.step.url} target="_blank">
+            <mwc-button raised>
+              ${localize(
+                "ui.panel.config.integrations.config_flow.external_step.open_site"
+              )}
+            </mwc-button>
+          </a>
+        </div>
+      </div>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    this.hass.connection.subscribeEvents<DataEntryFlowProgressedEvent>(
+      async (ev) => {
+        if (ev.data.flow_id !== this.step.flow_id) {
+          return;
+        }
+
+        const step = await fetchConfigFlow(this.hass, this.step.flow_id);
+        fireEvent(this, "flow-update", { step });
+      },
+      "data_entry_flow_progressed"
+    );
+    window.open(this.step.url);
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      configFlowContentStyles,
+      css`
+        .open-button {
+          text-align: center;
+          padding: 24px 0;
+        }
+        .open-button a {
+          text-decoration: none;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "step-flow-external": StepFlowExternal;
+  }
+}

src/translations/en.json

@@ -850,6 +850,12 @@
             "device_unavailable": "device unavailable",
             "entity_unavailable": "entity unavailable",
             "no_area": "No Area"
+          },
+          "config_flow": {
+            "external_step": {
+              "description": "This step requires you to visit an external website to be completed.",
+              "open_site": "Open website"
+            }
           }
         },
         "users": {