Add flow for "progress" step (#7592)

src/data/data_entry_flow.ts

@@ -58,8 +58,18 @@ export interface DataEntryFlowStepAbort {
   description_placeholders: { [key: string]: string };
 }
 
+export interface DataEntryFlowStepProgress {
+  type: "progress";
+  flow_id: string;
+  handler: string;
+  step_id: string;
+  progress_action: string;
+  description_placeholders: { [key: string]: string };
+}
+
 export type DataEntryFlowStep =
   | DataEntryFlowStepForm
   | DataEntryFlowStepExternal
   | DataEntryFlowStepCreateEntry
-  | DataEntryFlowStepAbort;
+  | DataEntryFlowStepAbort
+  | DataEntryFlowStepProgress;

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

@@ -36,6 +36,7 @@ import "./step-flow-external";
 import "./step-flow-form";
 import "./step-flow-loading";
 import "./step-flow-pick-handler";
+import "./step-flow-progress";
 
 let instance = 0;
 
@@ -195,6 +196,14 @@ class DataEntryFlowDialog extends LitElement {
                         .hass=${this.hass}
                       ></step-flow-abort>
                     `
+                  : this._step.type === "progress"
+                  ? html`
+                      <step-flow-progress
+                        .flowConfig=${this._params.flowConfig}
+                        .step=${this._step}
+                        .hass=${this.hass}
+                      ></step-flow-progress>
+                    `
                   : this._devices === undefined || this._areas === undefined
                   ? // When it's a create entry result, we will fetch device & area registry
                     html` <step-flow-loading></step-flow-loading> `

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

@@ -160,4 +160,21 @@ export const showConfigFlowDialog = (
         </p>
       `;
     },
+
+    renderShowFormProgressHeader(hass, step) {
+      return hass.localize(`component.${step.handler}.title`);
+    },
+
+    renderShowFormProgressDescription(hass, step) {
+      const description = localizeKey(
+        hass.localize,
+        `component.${step.handler}.config.progress.${step.progress_action}`,
+        step.description_placeholders
+      );
+      return description
+        ? html`
+            <ha-markdown allowsvg breaks .content=${description}></ha-markdown>
+          `
+        : "";
+    },
   });

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

@@ -7,6 +7,7 @@ import {
   DataEntryFlowStepCreateEntry,
   DataEntryFlowStepExternal,
   DataEntryFlowStepForm,
+  DataEntryFlowStepProgress,
 } from "../../data/data_entry_flow";
 import { HomeAssistant } from "../../types";
 
@@ -68,6 +69,16 @@ export interface FlowConfig {
     hass: HomeAssistant,
     step: DataEntryFlowStepCreateEntry
   ): TemplateResult | "";
+
+  renderShowFormProgressHeader(
+    hass: HomeAssistant,
+    step: DataEntryFlowStepProgress
+  ): string;
+
+  renderShowFormProgressDescription(
+    hass: HomeAssistant,
+    step: DataEntryFlowStepProgress
+  ): TemplateResult | "";
 }
 
 export interface DataEntryFlowDialogParams {

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

@@ -110,5 +110,13 @@ export const showOptionsFlowDialog = (
           <p>${hass.localize(`ui.dialogs.options_flow.success.description`)}</p>
         `;
       },
+
+      renderShowFormProgressHeader(_hass, _step) {
+        return "";
+      },
+
+      renderShowFormProgressDescription(_hass, _step) {
+        return "";
+      },
     }
   );

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

@@ -0,0 +1,82 @@
+import "@material/mwc-button";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-circular-progress";
+import {
+  DataEntryFlowProgressedEvent,
+  DataEntryFlowStepProgress,
+} from "../../data/data_entry_flow";
+import { HomeAssistant } from "../../types";
+import { FlowConfig } from "./show-dialog-data-entry-flow";
+import { configFlowContentStyles } from "./styles";
+
+@customElement("step-flow-progress")
+class StepFlowProgress extends LitElement {
+  public flowConfig!: FlowConfig;
+
+  @property({ attribute: false })
+  public hass!: HomeAssistant;
+
+  @property({ attribute: false })
+  private step!: DataEntryFlowStepProgress;
+
+  protected render(): TemplateResult {
+    return html`
+      <h2>
+        ${this.flowConfig.renderShowFormProgressHeader(this.hass, this.step)}
+      </h2>
+      <div class="content">
+        <ha-circular-progress active></ha-circular-progress>
+        ${this.flowConfig.renderShowFormProgressDescription(
+          this.hass,
+          this.step
+        )}
+      </div>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    this.hass.connection.subscribeEvents<DataEntryFlowProgressedEvent>(
+      async (ev) => {
+        if (ev.data.flow_id !== this.step.flow_id) {
+          return;
+        }
+
+        fireEvent(this, "flow-update", {
+          stepPromise: this.flowConfig.fetchFlow(this.hass, this.step.flow_id),
+        });
+      },
+      "data_entry_flow_progressed"
+    );
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      configFlowContentStyles,
+      css`
+        .content {
+          padding: 50px 100px;
+          text-align: center;
+        }
+        ha-circular-progress {
+          margin-bottom: 16px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "step-flow-progress": StepFlowProgress;
+  }
+}