Add an application credentials display name (#12720)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
Co-authored-by: Paulus Schoutsen <paulus@home-assistant.io>

src/data/application_credential.ts

@@ -9,6 +9,7 @@ export interface ApplicationCredential {
   domain: string;
   client_id: string;
   client_secret: string;
+  name: string;
 }
 
 export const fetchApplicationCredentialsConfig = async (hass: HomeAssistant) =>
@@ -25,13 +26,15 @@ export const createApplicationCredential = async (
   hass: HomeAssistant,
   domain: string,
   clientId: string,
-  clientSecret: string
+  clientSecret: string,
+  name?: string
 ) =>
   hass.callWS<ApplicationCredential>({
     type: "application_credentials/create",
     domain,
     client_id: clientId,
     client_secret: clientSecret,
+    name,
   });
 
 export const deleteApplicationCredential = async (

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

@@ -41,6 +41,8 @@ export class DialogAddApplicationCredential extends LitElement {
 
   @state() private _domain?: string;
 
+  @state() private _name?: string;
+
   @state() private _clientId?: string;
 
   @state() private _clientSecret?: string;
@@ -50,6 +52,7 @@ export class DialogAddApplicationCredential extends LitElement {
   public showDialog(params: AddApplicationCredentialDialogParams) {
     this._params = params;
     this._domain = "";
+    this._name = "";
     this._clientId = "";
     this._clientSecret = "";
     this._error = undefined;
@@ -99,6 +102,18 @@ export class DialogAddApplicationCredential extends LitElement {
             required
             @value-changed=${this._handleDomainPicked}
           ></ha-combo-box>
+          <ha-textfield
+            class="name"
+            name="name"
+            .label=${this.hass.localize(
+              "ui.panel.config.application_credentials.editor.name"
+            )}
+            .value=${this._name}
+            required
+            @input=${this._handleValueChanged}
+            error-message=${this.hass.localize("ui.common.error_required")}
+            dialogInitialFocus
+          ></ha-textfield>
           <ha-textfield
             class="clientId"
             name="clientId"
@@ -181,7 +196,8 @@ export class DialogAddApplicationCredential extends LitElement {
         this.hass,
         this._domain,
         this._clientId,
-        this._clientSecret
+        this._clientSecret,
+        this._name
       );
     } catch (err: any) {
       this._loading = false;

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -49,13 +49,22 @@ export class HaConfigApplicationCredentials extends LitElement {
   private _columns = memoizeOne(
     (narrow: boolean, localize: LocalizeFunc): DataTableColumnContainer => {
       const columns: DataTableColumnContainer<ApplicationCredential> = {
+        name: {
+          title: localize(
+            "ui.panel.config.application_credentials.picker.headers.name"
+          ),
+          width: "40%",
+          direction: "asc",
+          grows: true,
+          template: (_, entry: ApplicationCredential) => html`${entry.name}`,
+        },
         clientId: {
           title: localize(
             "ui.panel.config.application_credentials.picker.headers.client_id"
           ),
-          width: "25%",
+          width: "30%",
           direction: "asc",
-          grows: true,
+          hidden: narrow,
           template: (_, entry: ApplicationCredential) =>
             html`${entry.client_id}`,
         },
@@ -64,9 +73,8 @@ export class HaConfigApplicationCredentials extends LitElement {
             "ui.panel.config.application_credentials.picker.headers.application"
           ),
           sortable: true,
-          width: "20%",
+          width: "30%",
           direction: "asc",
-          hidden: narrow,
           template: (_, entry) => html`${domainToName(localize, entry.domain)}`,
         },
       };

src/translations/en.json

@@ -2883,12 +2883,14 @@
             "caption": "Add Application Credential",
             "create": "Create",
             "domain": "Integration",
+            "name": "Name",
             "client_id": "OAuth Client ID",
             "client_secret": "OAuth Client Secret"
           },
           "picker": {
             "add_application_credential": "Add Application Credential",
             "headers": {
+              "name": "Name",
               "client_id": "OAuth Client ID",
               "application": "Integration"
             },