Use MWC components for ha-form (#10120)

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

@@ -11,9 +11,11 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-circular-progress";
+import { computeInitialHaFormData } from "../../components/ha-form/compute-initial-ha-form-data";
+import type { HaFormSchema } from "../../components/ha-form/types";
 import "../../components/ha-form/ha-form";
-import type { HaFormSchema } from "../../components/ha-form/ha-form";
 import "../../components/ha-markdown";
+import "../../components/ha-alert";
 import type { DataEntryFlowStepForm } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
@@ -37,24 +39,13 @@ class StepFlowForm extends LitElement {
     const step = this.step;
     const stepData = this._stepDataProcessed;
 
-    const allRequiredInfoFilledIn =
-      stepData === undefined
-        ? // If no data filled in, just check that any field is required
-          step.data_schema.find((field) => !field.optional) === undefined
-        : // If data is filled in, make sure all required fields are
-          stepData &&
-          step.data_schema.every(
-            (field) =>
-              field.optional || !["", undefined].includes(stepData![field.name])
-          );
-
     return html`
       <h2>${this.flowConfig.renderShowFormStepHeader(this.hass, this.step)}</h2>
       <div class="content">
-        ${this._errorMsg
-          ? html` <div class="error">${this._errorMsg}</div> `
-          : ""}
         ${this.flowConfig.renderShowFormStepDescription(this.hass, this.step)}
+        ${this._errorMsg
+          ? html`<ha-alert alert-type="error">${this._errorMsg}</ha-alert>`
+          : ""}
         <ha-form
           .data=${stepData}
           @value-changed=${this._stepDataChanged}
@@ -73,25 +64,13 @@ class StepFlowForm extends LitElement {
             `
           : html`
               <div>
-                <mwc-button
-                  @click=${this._submitStep}
-                  .disabled=${!allRequiredInfoFilledIn}
-                  >${this.hass.localize(
+                <mwc-button @click=${this._submitStep}>
+                  ${this.hass.localize(
                     `ui.panel.config.integrations.config_flow.${
                       this.step.last_step === false ? "next" : "submit"
                     }`
                   )}
                 </mwc-button>
-
-                ${!allRequiredInfoFilledIn
-                  ? html`
-                      <paper-tooltip animation-delay="0" position="left"
-                        >${this.hass.localize(
-                          "ui.panel.config.integrations.config_flow.not_all_required_fields"
-                        )}
-                      </paper-tooltip>
-                    `
-                  : html``}
               </div>
             `}
       </div>
@@ -113,25 +92,35 @@ class StepFlowForm extends LitElement {
       return this._stepData;
     }
 
-    const data = {};
-    this.step.data_schema.forEach((field) => {
-      if (field.description?.suggested_value) {
-        data[field.name] = field.description.suggested_value;
-      } else if ("default" in field) {
-        data[field.name] = field.default;
-      }
-    });
-
-    this._stepData = data;
-    return data;
+    this._stepData = computeInitialHaFormData(this.step.data_schema);
+    return this._stepData;
   }
 
   private async _submitStep(): Promise<void> {
+    const stepData = this._stepData || {};
+
+    const allRequiredInfoFilledIn =
+      stepData === undefined
+        ? // If no data filled in, just check that any field is required
+          this.step.data_schema.find((field) => !field.optional) === undefined
+        : // If data is filled in, make sure all required fields are
+          stepData &&
+          this.step.data_schema.every(
+            (field) =>
+              field.optional || !["", undefined].includes(stepData![field.name])
+          );
+
+    if (!allRequiredInfoFilledIn) {
+      this._errorMsg = this.hass.localize(
+        "ui.panel.config.integrations.config_flow.not_all_required_fields"
+      );
+      return;
+    }
+
     this._loading = true;
     this._errorMsg = undefined;
 
     const flowId = this.step.flow_id;
-    const stepData = this._stepData || {};
 
     const toSendData = {};
     Object.keys(stepData).forEach((key) => {
@@ -188,6 +177,12 @@ class StepFlowForm extends LitElement {
         .submit-spinner {
           margin-right: 16px;
         }
+
+        ha-alert,
+        ha-form {
+          margin-top: 24px;
+          display: block;
+        }
       `,
     ];
   }