Add menu with remove option to application credentials

home-assistant · Jun 23, 2024 · e3ab2cb · e3ab2cb
1 parent 8272bef
commit e3ab2cb
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/src/panels/config/application_credentials/ha-config-application-credentials.ts b/src/panels/config/application_credentials/ha-config-application-credentials.ts
@@ -11,6 +11,7 @@ import {
 import "../../../components/ha-fab";
 import "../../../components/ha-help-tooltip";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-icon-overflow-menu";
 import {
   ApplicationCredential,
   deleteApplicationCredential,
@@ -70,6 +71,28 @@ export class HaConfigApplicationCredentials extends LitElement {
           width: "30%",
           direction: "asc",
         },
+        actions: {
+          title: "",
+          width: "64px",
+          type: "overflow-menu",
+          template: (credential) => html`
+            <ha-icon-overflow-menu
+              .hass=${this.hass}
+              narrow
+              .items=${[
+                {
+                  path: mdiDelete,
+                  warning: true,
+                  label: this.hass.localize(
+                    "ui.panel.config.application_credentials.picker.remove.button"
+                  ),
+                  action: () => this._removeCredential(credential),
+                },
+              ]}
+            >
+            </ha-icon-overflow-menu>
+          `,
+        },
       };
 
       return columns;
@@ -153,6 +176,24 @@ export class HaConfigApplicationCredentials extends LitElement {
     this._selected = ev.detail.value;
   }
 
+  private _removeCredential = async (credential) => {
+    const confirm = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        `ui.panel.config.application_credentials.picker.remove.confirm_title`
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.application_credentials.picker.remove_selected.confirm_text"
+      ),
+      confirmText: this.hass.localize("ui.common.remove"),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      destructive: true,
+    });
+    if (!confirm) {
+      return;
+    }
+    await deleteApplicationCredential(this.hass, credential.id);
+  };
+
   private _removeSelected() {
     showConfirmationDialog(this, {
       title: this.hass.localize(
@@ -164,6 +205,7 @@ export class HaConfigApplicationCredentials extends LitElement {
       ),
       confirmText: this.hass.localize("ui.common.remove"),
       dismissText: this.hass.localize("ui.common.cancel"),
+      destructive: true,
       confirm: async () => {
         try {
           await Promise.all(

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -4441,6 +4441,10 @@
               "client_id": "OAuth client ID",
               "application": "Integration"
             },
+            "remove": {
+              "button": "Remove application credential",
+              "confirm_title": "Remove application credential?"
+            },
             "remove_selected": {
               "button": "Remove selected",
               "confirm_title": "Do you want to remove {number} {number, plural,\n  one {credential}\n  other {credentials}\n}?",