Add application credentials description placeholder (#12869)

src/data/application_credential.ts

@@ -1,7 +1,11 @@
 import { HomeAssistant } from "../types";
 
+export interface ApplicationCredentialsDomainConfig {
+  description_placeholders: string;
+}
+
 export interface ApplicationCredentialsConfig {
-  domains: string[];
+  integrations: Record<string, ApplicationCredentialsDomainConfig>;
 }
 
 export interface ApplicationCredential {

src/data/translation.ts

@@ -38,7 +38,8 @@ export type TranslationCategory =
   | "device_automation"
   | "mfa_setup"
   | "system_health"
-  | "device_class";
+  | "device_class"
+  | "application_credentials";
 
 export const fetchTranslationPreferences = (hass: HomeAssistant) =>
   fetchFrontendUserData(hass.connection, "language");

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

@@ -7,10 +7,12 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-combo-box";
 import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-markdown";
 import "../../../components/ha-textfield";
 import {
   fetchApplicationCredentialsConfig,
   createApplicationCredential,
+  ApplicationCredentialsConfig,
   ApplicationCredential,
 } from "../../../data/application_credential";
 import { domainToName } from "../../../data/integration";
@@ -42,17 +44,22 @@ export class DialogAddApplicationCredential extends LitElement {
 
   @state() private _name?: string;
 
+  @state() private _description?: string;
+
   @state() private _clientId?: string;
 
   @state() private _clientSecret?: string;
 
   @state() private _domains?: Domain[];
 
+  @state() private _config?: ApplicationCredentialsConfig;
+
   public showDialog(params: AddApplicationCredentialDialogParams) {
     this._params = params;
     this._domain =
       params.selectedDomain !== undefined ? params.selectedDomain : "";
     this._name = "";
+    this._description = "";
     this._clientId = "";
     this._clientSecret = "";
     this._error = undefined;
@@ -61,11 +68,12 @@ export class DialogAddApplicationCredential extends LitElement {
   }
 
   private async _fetchConfig() {
-    const config = await fetchApplicationCredentialsConfig(this.hass);
-    this._domains = config.domains.map((domain) => ({
+    this._config = await fetchApplicationCredentialsConfig(this.hass);
+    this._domains = Object.keys(this._config.integrations).map((domain) => ({
       id: domain,
       name: domainToName(this.hass.localize, domain),
     }));
+    this.hass.loadBackendTranslation("application_credentials");
   }
 
   protected render(): TemplateResult {
@@ -103,6 +111,12 @@ export class DialogAddApplicationCredential extends LitElement {
             required
             @value-changed=${this._handleDomainPicked}
           ></ha-combo-box>
+          ${this._description
+            ? html`<ha-markdown
+                breaks
+                .content=${this._description}
+              ></ha-markdown>`
+            : ""}
           <ha-textfield
             class="name"
             name="name"
@@ -171,6 +185,11 @@ export class DialogAddApplicationCredential extends LitElement {
   private async _handleDomainPicked(ev: CustomEvent) {
     ev.stopPropagation();
     this._domain = ev.detail.value;
+    const info = this._config!.integrations[this._domain!];
+    this._description = this.hass.localize(
+      `component.${this._domain}.application_credentials.description`,
+      info.description_placeholders
+    );
   }
 
   private _handleValueChanged(ev: CustomEvent) {