Add support for removing config entry from a device

src/data/config_entries.ts

@@ -13,6 +13,7 @@ export interface ConfigEntry {
     | "not_loaded"
     | "failed_unload";
   supports_options: boolean;
+  supports_remove_device: boolean;
   supports_unload: boolean;
   pref_disable_new_entities: boolean;
   pref_disable_polling: boolean;

src/data/device_registry.ts

@@ -77,6 +77,17 @@ export const updateDeviceRegistryEntry = (
     ...updates,
   });
 
+export const removeConfigEntryFromDevice = (
+  hass: HomeAssistant,
+  deviceId: string,
+  configEntryId: string,
+) =>
+  hass.callWS<DeviceRegistryEntry>({
+    type: "config/device_registry/remove_config_entry",
+    device_id: deviceId,
+    config_entry_id: configEntryId,
+  });
+
 export const fetchDeviceRegistry = (conn) =>
   conn.sendMessagePromise({
     type: "config/device_registry/list",

src/panels/config/devices/ha-config-device-page.ts

@@ -27,6 +27,7 @@ import {
   computeDeviceName,
   DeviceRegistryEntry,
   updateDeviceRegistryEntry,
+  removeConfigEntryFromDevice,
 } from "../../../data/device_registry";
 import {
   fetchDiagnosticHandler,
@@ -95,6 +96,8 @@ export class HaConfigDevicePage extends LitElement {
     | number
     | (TemplateResult | string)[];
 
+  @state() private _deleteButtons?: (TemplateResult | string)[];
+
   private _device = memoizeOne(
     (
       deviceId: string,
@@ -186,10 +189,11 @@ export class HaConfigDevicePage extends LitElement {
       changedProps.has("entries")
     ) {
       this._diagnosticDownloadLinks = undefined;
+      this._deleteButtons = undefined;
     }
 
     if (
-      this._diagnosticDownloadLinks ||
+      (this._diagnosticDownloadLinks && this._deleteButtons) ||
       !this.devices ||
       !this.deviceId ||
       !this.entries
@@ -198,7 +202,9 @@ export class HaConfigDevicePage extends LitElement {
     }
 
     this._diagnosticDownloadLinks = Math.random();
+    this._deleteButtons = [".."];
     this._renderDiagnosticButtons(this._diagnosticDownloadLinks);
+    this._renderDeleteButtons();
   }
 
   private async _renderDiagnosticButtons(requestId: number): Promise<void> {
@@ -263,6 +269,65 @@ export class HaConfigDevicePage extends LitElement {
     }
   }
 
+  private _renderDeleteButtons() {
+    console.log("Hello!")
+    const device = this._device(this.deviceId, this.devices);
+
+    if (!device) {
+      return;
+    }
+
+  let buttons = this._integrations(device, this.entries).map((entry) => {
+      console.log("Hello!")
+      console.log(entry.supports_remove_device)
+      if (entry.state !== "loaded" || !entry.supports_remove_device) {
+        return false;
+      }
+      return {
+        entry_id: entry.entry_id,
+        domain: entry.domain,
+      };
+    });
+
+    buttons = buttons.filter(Boolean);
+
+    if (buttons.length > 0) {
+      this._deleteButtons = (
+        buttons as { entry_id: string; domain: string }[]
+      ).map(
+        (button) => html`
+          <mwc-button class="warning" @click=${this._confirmDeleteEntry}>
+            ${buttons.length > 1
+              ? this.hass.localize(
+                  `ui.panel.config.devices.delete_device_integration`,
+                  {
+                    integration: domainToName(
+                      this.hass.localize,
+                      button.domain
+                    ),
+                  }
+                )
+              : this.hass.localize(
+                  `ui.panel.config.devices.delete_device`
+                )}
+          </mwc-button>
+        `
+      );
+    }
+  }
+
+  private async _confirmDeleteEntry(): Promise<void> {
+    const confirmed = await showConfirmationDialog(this, {
+      text: this.hass.localize("ui.panel.config.devices.confirm_delete"),
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    await removeConfigEntryFromDevice(this.hass!, this.deviceId, "blabla");
+  }
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     loadDeviceRegistryDetailDialog();
@@ -375,6 +440,9 @@ export class HaConfigDevicePage extends LitElement {
     if (Array.isArray(this._diagnosticDownloadLinks)) {
       deviceActions.push(...this._diagnosticDownloadLinks);
     }
+    if (Array.isArray(this._deleteButtons)) {
+      deviceActions.push(...this._deleteButtons);
+    }
 
     return html`
       <hass-tabs-subpage

src/translations/en.json

@@ -2257,6 +2257,8 @@
           "open_configuration_url_service": "Visit service",
           "download_diagnostics": "Download diagnostics",
           "download_diagnostics_integration": "Download {integration} diagnostics",
+          "delete_device": "Delete device",
+          "delete_device_integration": "Remove {integration} from device",
           "type": {
             "device_heading": "Device",
             "device": "device",