Prompt user to remove application credentials when deleting the integration configuration (#13159)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/data/application_credential.ts

@@ -8,6 +8,10 @@ export interface ApplicationCredentialsConfig {
   integrations: Record<string, ApplicationCredentialsDomainConfig>;
 }
 
+export interface ApplicationCredentialsConfigEntry {
+  application_credentials_id?: string;
+}
+
 export interface ApplicationCredential {
   id: string;
   domain: string;
@@ -21,6 +25,15 @@ export const fetchApplicationCredentialsConfig = async (hass: HomeAssistant) =>
     type: "application_credentials/config",
   });
 
+export const fetchApplicationCredentialsConfigEntry = async (
+  hass: HomeAssistant,
+  configEntryId: string
+) =>
+  hass.callWS<ApplicationCredentialsConfigEntry>({
+    type: "application_credentials/config_entry",
+    config_entry_id: configEntryId,
+  });
+
 export const fetchApplicationCredentials = async (hass: HomeAssistant) =>
   hass.callWS<ApplicationCredential[]>({
     type: "application_credentials/list",

src/panels/config/integrations/ha-integration-card.ts

@@ -31,6 +31,10 @@ import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-svg-icon";
+import {
+  fetchApplicationCredentialsConfigEntry,
+  deleteApplicationCredential,
+} from "../../../data/application_credential";
 import { getSignedPath } from "../../../data/auth";
 import {
   ConfigEntry,
@@ -698,6 +702,10 @@ export class HaIntegrationCard extends LitElement {
   private async _removeIntegration(configEntry: ConfigEntry) {
     const entryId = configEntry.entry_id;
 
+    const applicationCredentialsId = await this._applicationCredentialForRemove(
+      entryId
+    );
+
     const confirmed = await showConfirmationDialog(this, {
       title: this.hass.localize(
         "ui.panel.config.integrations.config_entry.delete_confirm_title",
@@ -723,6 +731,70 @@ export class HaIntegrationCard extends LitElement {
         ),
       });
     }
+    if (applicationCredentialsId) {
+      this._removeApplicationCredential(applicationCredentialsId);
+    }
+  }
+
+  // Return an application credentials id for this config entry to prompt the
+  // user for removal. This is best effort so we don't stop overall removal
+  // if the integration isn't loaded or there is some other error.
+  private async _applicationCredentialForRemove(entryId: string) {
+    try {
+      return (await fetchApplicationCredentialsConfigEntry(this.hass, entryId))
+        .application_credentials_id;
+    } catch (err: any) {
+      // We won't prompt the user to remove credentials
+      return null;
+    }
+  }
+
+  private async _removeApplicationCredential(applicationCredentialsId: string) {
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.integrations.config_entry.application_credentials.delete_title"
+      ),
+      text: html`${this.hass.localize(
+          "ui.panel.config.integrations.config_entry.application_credentials.delete_prompt"
+        )},
+        <br />
+        <br />
+        ${this.hass.localize(
+          "ui.panel.config.integrations.config_entry.application_credentials.delete_detail"
+        )}
+        <br />
+        <br />
+        <a
+          href=${documentationUrl(
+            this.hass,
+            "/integrations/application_credentials/"
+          )}
+          target="_blank"
+          rel="noreferrer"
+        >
+          ${this.hass.localize(
+            "ui.panel.config.integrations.config_entry.application_credentials.learn_more"
+          )}
+        </a>`,
+      destructive: true,
+      confirmText: this.hass.localize("ui.common.remove"),
+      dismissText: this.hass.localize(
+        "ui.panel.config.integrations.config_entry.application_credentials.dismiss"
+      ),
+    });
+    if (!confirmed) {
+      return;
+    }
+    try {
+      await deleteApplicationCredential(this.hass, applicationCredentialsId);
+    } catch (err: any) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.integrations.config_entry.application_credentials.delete_error_title"
+        ),
+        text: err.message,
+      });
+    }
   }
 
   private async _reloadIntegration(configEntry: ConfigEntry) {

src/translations/en.json

@@ -2855,6 +2855,14 @@
             "stop_ignore": "Stop ignoring"
           },
           "config_entry": {
+            "application_credentials": {
+              "delete_title": "Application Credentials",
+              "delete_prompt": "Would you like to also remove Application Credentials for this integration?",
+              "delete_detail": "If you remove them, you will need to enter credentials when setting up the integration again. If you keep them, they will be used automatically when setting up the integration again or may be acccessed from the Application Credentials menu.",
+              "delete_error_title": "Removing Application Credential failed",
+              "dismiss": "Keep",
+              "learn_more": "Learn more about Application Credentials"
+            },
             "devices": "{count} {count, plural,\n  one {device}\n  other {devices}\n}",
             "entities": "{count} {count, plural,\n  one {entity}\n  other {entities}\n}",
             "services": "{count} {count, plural,\n  one {service}\n  other {services}\n}",