Open Application Credentials from integration configuration flow (#12708)

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

@@ -309,7 +309,7 @@ class DataEntryFlowDialog extends LitElement {
                   : this._step.type === "abort"
                   ? html`
                       <step-flow-abort
-                        .flowConfig=${this._params.flowConfig}
+                        .params=${this._params}
                         .step=${this._step}
                         .hass=${this.hass}
                         .domain=${this._step.handler}

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

@@ -131,6 +131,7 @@ export interface DataEntryFlowDialogParams {
   }) => void;
   flowConfig: FlowConfig;
   showAdvanced?: boolean;
+  dialogParentElement?: HTMLElement;
 }
 
 export const loadDataEntryFlowDialog = () => import("./dialog-data-entry-flow");
@@ -146,6 +147,7 @@ export const showFlowDialog = (
     dialogParams: {
       ...dialogParams,
       flowConfig,
+      dialogParentElement: element,
     },
   });
 };

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

@@ -1,15 +1,25 @@
 import "@material/mwc-button";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  CSSResultGroup,
+  html,
+  LitElement,
+  TemplateResult,
+  PropertyValues,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { DataEntryFlowStepAbort } from "../../data/data_entry_flow";
 import { HomeAssistant } from "../../types";
-import { FlowConfig } from "./show-dialog-data-entry-flow";
+import { showAddApplicationCredentialDialog } from "../../panels/config/application_credentials/show-dialog-add-application-credential";
 import { configFlowContentStyles } from "./styles";
+import { showConfirmationDialog } from "../generic/show-dialog-box";
+import { domainToName } from "../../data/integration";
+import { DataEntryFlowDialogParams } from "./show-dialog-data-entry-flow";
+import { showConfigFlowDialog } from "./show-dialog-config-flow";
 
 @customElement("step-flow-abort")
 class StepFlowAbort extends LitElement {
-  @property({ attribute: false }) public flowConfig!: FlowConfig;
+  @property({ attribute: false }) public params!: DataEntryFlowDialogParams;
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -17,11 +27,21 @@ class StepFlowAbort extends LitElement {
 
   @property({ attribute: false }) public domain!: string;
 
+  protected firstUpdated(changed: PropertyValues) {
+    super.firstUpdated(changed);
+    if (this.step.reason === "missing_credentials") {
+      this._handleMissingCreds();
+    }
+  }
+
   protected render(): TemplateResult {
+    if (this.step.reason === "missing_credentials") {
+      return html``;
+    }
     return html`
       <h2>${this.hass.localize(`component.${this.domain}.title`)}</h2>
       <div class="content">
-        ${this.flowConfig.renderAbortDescription(this.hass, this.step)}
+        ${this.params.flowConfig.renderAbortDescription(this.hass, this.step)}
       </div>
       <div class="buttons">
         <mwc-button @click=${this._flowDone}
@@ -33,6 +53,32 @@ class StepFlowAbort extends LitElement {
     `;
   }
 
+  private async _handleMissingCreds() {
+    const confirm = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.integrations.config_flow.missing_credentials",
+        {
+          integration: domainToName(this.hass.localize, this.domain),
+        }
+      ),
+    });
+    this._flowDone();
+    if (!confirm) {
+      return;
+    }
+    // Prompt to enter credentials and restart integration setup
+    showAddApplicationCredentialDialog(this.params.dialogParentElement!, {
+      selectedDomain: this.domain,
+      applicationCredentialAddedCallback: () => {
+        showConfigFlowDialog(this.params.dialogParentElement!, {
+          dialogClosedCallback: this.params.dialogClosedCallback,
+          startFlowHandler: this.domain,
+          showAdvanced: this.hass.userData?.showAdvanced,
+        });
+      },
+    });
+  }
+
   private _flowDone(): void {
     fireEvent(this, "flow-update", { step: undefined });
   }

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -51,7 +51,8 @@ export class DialogAddApplicationCredential extends LitElement {
 
   public showDialog(params: AddApplicationCredentialDialogParams) {
     this._params = params;
-    this._domain = "";
+    this._domain =
+      params.selectedDomain !== undefined ? params.selectedDomain : "";
     this._name = "";
     this._clientId = "";
     this._clientSecret = "";
@@ -75,7 +76,7 @@ export class DialogAddApplicationCredential extends LitElement {
     return html`
       <ha-dialog
         open
-        @closed=${this.closeDialog}
+        @closed=${this._abortDialog}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(
@@ -90,6 +91,7 @@ export class DialogAddApplicationCredential extends LitElement {
           <ha-combo-box
             name="domain"
             .hass=${this.hass}
+            .disabled=${!!this._params.selectedDomain}
             .label=${this.hass.localize(
               "ui.panel.config.application_credentials.editor.domain"
             )}
@@ -181,6 +183,13 @@ export class DialogAddApplicationCredential extends LitElement {
     this[`_${name}`] = value;
   }
 
+  private _abortDialog() {
+    if (this._params && this._params.dialogAbortedCallback) {
+      this._params.dialogAbortedCallback();
+    }
+    this.closeDialog();
+  }
+
   private async _createApplicationCredential(ev) {
     ev.preventDefault();
     if (!this._domain || !this._clientId || !this._clientSecret) {

src/panels/config/application_credentials/show-dialog-add-application-credential.ts

@@ -5,6 +5,8 @@ export interface AddApplicationCredentialDialogParams {
   applicationCredentialAddedCallback: (
     applicationCredential: ApplicationCredential
   ) => void;
+  dialogAbortedCallback?: () => void;
+  selectedDomain?: string;
 }
 
 export const loadAddApplicationCredentialDialog = () =>

src/translations/en.json

@@ -2825,7 +2825,8 @@
             },
             "error": "Error",
             "could_not_load": "Config flow could not be loaded",
-            "not_loaded": "The integration could not be loaded, try to restart Home Assistant."
+            "not_loaded": "The integration could not be loaded, try to restart Home Assistant.",
+            "missing_credentials": "Setting up {integration} requires configuring application credentials. Do you want to do that now?"
           }
         },
         "users": {