Add delete button to MQTT devices' config page (#5117)

* Add delete button to MQTT devices' config page

* Move delete button to its own card

* Fix review comments

* Fix review comments

* Fix review comments

* Use haStyle instead of haStyleDialog

src/data/mqtt.ts

@@ -17,3 +17,12 @@ export const subscribeMQTTTopic = (
     topic,
   });
 };
+
+export const removeMQTTDeviceEntry = (
+  hass: HomeAssistant,
+  deviceId: string
+): Promise<void> =>
+  hass.callWS({
+    type: "mqtt/device/remove",
+    device_id: deviceId,
+  });

src/panels/config/devices/device-detail/ha-device-card-mqtt.ts

@@ -0,0 +1,43 @@
+import { DeviceRegistryEntry } from "../../../../data/device_registry";
+import { removeMQTTDeviceEntry } from "../../../../data/mqtt";
+import {
+  LitElement,
+  html,
+  customElement,
+  property,
+  TemplateResult,
+  CSSResult,
+} from "lit-element";
+import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
+import { HomeAssistant } from "../../../../types";
+import { haStyle } from "../../../../resources/styles";
+
+@customElement("ha-device-card-mqtt")
+export class HaDeviceCardMqtt extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public device!: DeviceRegistryEntry;
+
+  protected render(): TemplateResult {
+    return html`
+      <mwc-button class="warning" @click="${this._confirmDeleteEntry}">
+        ${this.hass.localize("ui.panel.config.devices.delete")}
+      </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 removeMQTTDeviceEntry(this.hass!, this.device.id);
+  }
+
+  static get styles(): CSSResult {
+    return haStyle;
+  }
+}

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

@@ -16,6 +16,7 @@ import "../../../layouts/hass-error-screen";
 import "../ha-config-section";
 
 import "./device-detail/ha-device-card";
+import "./device-detail/ha-device-card-mqtt";
 import "./device-detail/ha-device-entities-card";
 import { HomeAssistant, Route } from "../../../types";
 import { ConfigEntry } from "../../../data/config_entries";
@@ -70,6 +71,13 @@ export class HaConfigDevicePage extends LitElement {
       devices ? devices.find((device) => device.id === deviceId) : undefined
   );
 
+  private _integrations = memoizeOne(
+    (device: DeviceRegistryEntry, entries: ConfigEntry[]): string[] =>
+      entries
+        .filter((entry) => device.config_entries.includes(entry.entry_id))
+        .map((entry) => entry.domain)
+  );
+
   private _entities = memoizeOne(
     (
       deviceId: string,
@@ -113,6 +121,7 @@ export class HaConfigDevicePage extends LitElement {
       `;
     }
 
+    const integrations = this._integrations(device, this.entries);
     const entities = this._entities(this.deviceId, this.entities);
 
     return html`
@@ -154,6 +163,16 @@ export class HaConfigDevicePage extends LitElement {
                 .devices=${this.devices}
                 .device=${device}
               ></ha-device-card>
+              ${
+                integrations.includes("mqtt")
+                  ? html`
+                      <ha-device-card-mqtt
+                        .hass=${this.hass}
+                        .device=${device}
+                      ></ha-device-card-mqtt>
+                    `
+                  : html``
+              }
             </div>
 
             ${

src/translations/en.json

@@ -652,9 +652,9 @@
           "enabled_label": "Enable entity",
           "enabled_cause": "Disabled by {cause}.",
           "enabled_description": "Disabled entities will not be added to Home Assistant.",
-          "delete": "DELETE",
+          "delete": "Delete",
           "confirm_delete": "Are you sure you want to delete this entry?",
-          "update": "UPDATE",
+          "update": "Update",
           "note": "Note: this might not work yet with all integrations."
         }
       },
@@ -789,13 +789,13 @@
             "introduction2": "To place devices in an area, use the link below to navigate to the integrations page and then click on a configured integration to get to the device cards.",
             "integrations_page": "Integrations page",
             "no_areas": "Looks like you have no areas yet!",
-            "create_area": "CREATE AREA"
+            "create_area": "Create Area"
           },
           "editor": {
             "default_name": "New Area",
-            "delete": "DELETE",
-            "update": "UPDATE",
-            "create": "CREATE"
+            "delete": "Delete",
+            "update": "Update",
+            "create": "Create"
           },
           "delete": {
             "confirmation_title": "Are you sure you want to delete this area?",
@@ -1483,7 +1483,9 @@
             "integration": "Integration",
             "battery": "Battery",
             "no_devices": "No devices"
-          }
+          },
+          "delete": "Delete",
+          "confirm_delete": "Are you sure you want to delete this device?"
         },
         "entities": {
           "caption": "Entities",