Translated config flow form and steps (#4140)

* Translated config flow form and steps

* Moved translation from config_entry to config_flow

* Renamed translation key from not_all_fields_required to not_all_required_fields

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

@@ -122,7 +122,13 @@ export const showConfigFlowDialog = (
               <ha-markdown allowsvg .content=${description}></ha-markdown>
             `
           : ""}
-        <p>Created config for ${step.title}.</p>
+        <p>
+          ${hass.localize(
+            "ui.panel.config.integrations.config_flow.created_config",
+            "name",
+            step.title
+          )}
+        </p>
       `;
     },
   });

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

@@ -26,12 +26,20 @@ class StepFlowAbort extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      <h2>Aborted</h2>
+      <h2>
+        ${this.hass.localize(
+          "ui.panel.config.integrations.config_flow.aborted"
+        )}
+      </h2>
       <div class="content">
         ${this.flowConfig.renderAbortDescription(this.hass, this.step)}
       </div>
       <div class="buttons">
-        <mwc-button @click="${this._flowDone}">Close</mwc-button>
+        <mwc-button @click="${this._flowDone}"
+          >${this.hass.localize(
+            "ui.panel.config.integrations.config_flow.close"
+          )}</mwc-button
+        >
       </div>
     `;
   }

src/dialogs/config-flow/step-flow-create-entry.ts

@@ -63,7 +63,9 @@ class StepFlowCreateEntry extends LitElement {
                           ${device.model} (${device.manufacturer})
                         </div>
                         <paper-dropdown-menu-light
-                          label="Area"
+                          label="${localize(
+                            "ui.panel.config.integrations.config_flow.area_picker_label"
+                          )}"
                           .device=${device.id}
                           @selected-item-changed=${this._handleAreaChanged}
                         >
@@ -91,11 +93,19 @@ class StepFlowCreateEntry extends LitElement {
       <div class="buttons">
         ${this.devices.length > 0
           ? html`
-              <mwc-button @click="${this._addArea}">Add Area</mwc-button>
+              <mwc-button @click="${this._addArea}"
+                >${localize(
+                  "ui.panel.config.integrations.config_flow.add_area"
+                )}</mwc-button
+              >
             `
           : ""}
 
-        <mwc-button @click="${this._flowDone}">Finish</mwc-button>
+        <mwc-button @click="${this._flowDone}"
+          >${localize(
+            "ui.panel.config.integrations.config_flow.finish"
+          )}</mwc-button
+        >
       </div>
     `;
   }
@@ -105,7 +115,11 @@ class StepFlowCreateEntry extends LitElement {
   }
 
   private async _addArea() {
-    const name = prompt("Name of the new area?");
+    const name = prompt(
+      this.hass.localize(
+        "ui.panel.config.integrations.config_flow.name_new_area"
+      )
+    );
     if (!name) {
       return;
     }
@@ -115,7 +129,11 @@ class StepFlowCreateEntry extends LitElement {
       });
       this.areas = [...this.areas, area];
     } catch (err) {
-      alert("Failed to create area.");
+      alert(
+        this.hass.localize(
+          "ui.panel.config.integrations.config_flow.failed_create_area"
+        )
+      );
     }
   }
 
@@ -134,7 +152,13 @@ class StepFlowCreateEntry extends LitElement {
         area_id: area,
       });
     } catch (err) {
-      alert(`Error saving area: ${err.message}`);
+      alert(
+        this.hass.localize(
+          "ui.panel.config.integrations.config_flow.error_saving_area",
+          "error",
+          "err.message"
+        )
+      );
       dropdown.value = null;
     }
   }

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

@@ -87,14 +87,17 @@ class StepFlowForm extends LitElement {
                 <mwc-button
                   @click=${this._submitStep}
                   .disabled=${!allRequiredInfoFilledIn}
-                >
-                  Submit
+                  >${this.hass.localize(
+                    "ui.panel.config.integrations.config_flow.submit"
+                  )}
                 </mwc-button>
 
                 ${!allRequiredInfoFilledIn
                   ? html`
-                      <paper-tooltip position="left">
-                        Not all required fields are filled in.
+                      <paper-tooltip position="left"
+                        >${this.hass.localize(
+                          "ui.panel.config.integrations.config_flow.not_all_required_fields"
+                        )}
                       </paper-tooltip>
                     `
                   : html``}

src/translations/en.json

@@ -1269,6 +1269,17 @@
             "no_area": "No Area"
           },
           "config_flow": {
+            "aborted": "Aborted",
+            "close": "Close",
+            "finish": "Finish",
+            "submit": "Submit",
+            "not_all_required_fields": "Not all required fields are filled in.",
+            "add_area": "Add Area",
+            "area_picker_label": "Area",
+            "failed_create_area": "Failed to create area.",
+            "error_saving_area": "Error saving area: {error}",
+            "name_new_area": "Name of the new area?",
+            "created_config": "Created config for {name}.",
             "external_step": {
               "description": "This step requires you to visit an external website to be completed.",
               "open_site": "Open website"