make debug mode better visible, improve disabling device (#25910)

src/panels/config/integrations/ha-config-entry-device-row.ts

@@ -8,10 +8,16 @@ import {
 } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name";
 import { getDeviceContext } from "../../../common/entity/context/get_device_context";
 import { navigate } from "../../../common/navigate";
-import type { ConfigEntry } from "../../../data/config_entries";
+import {
+  disableConfigEntry,
+  type ConfigEntry,
+  type DisableConfigEntryResult,
+} from "../../../data/config_entries";
 import {
   removeConfigEntryFromDevice,
   updateDeviceRegistryEntry,
@@ -26,7 +32,6 @@ import {
 } from "../../lovelace/custom-card-helpers";
 import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail";
 import "./ha-config-sub-entry-row";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 
 @customElement("ha-config-entry-device-row")
 class HaConfigEntryDeviceRow extends LitElement {
@@ -52,7 +57,7 @@ class HaConfigEntryDeviceRow extends LitElement {
       area ? area.name : undefined,
     ].filter(Boolean);
 
-    return html`<ha-md-list-item @click=${this.narrow ? this._handleNavigateToDevice : undefined}>
+    return html`<ha-md-list-item @click=${this.narrow ? this._handleNavigateToDevice : undefined} class=${classMap({ disabled: Boolean(device.disabled_by) })}>
       <ha-svg-icon .path=${mdiDevices} slot="start"></ha-svg-icon>
       <div slot="headline"></div>${computeDeviceNameDisplay(device, this.hass)}</div>
       <span slot="supporting-text"
@@ -175,8 +180,70 @@ class HaConfigEntryDeviceRow extends LitElement {
   }
 
   private async _handleDisableDevice() {
+    const disable = this.device.disabled_by === null;
+
+    if (disable) {
+      if (
+        !Object.values(this.hass.devices).some(
+          (dvc) =>
+            dvc.id !== this.device.id &&
+            dvc.config_entries.includes(this.entry.entry_id)
+        )
+      ) {
+        const config_entry = this.entry;
+        if (
+          config_entry &&
+          !config_entry.disabled_by &&
+          (await showConfirmationDialog(this, {
+            title: this.hass.localize(
+              "ui.panel.config.devices.confirm_disable_config_entry",
+              { entry_name: config_entry.title }
+            ),
+            confirmText: this.hass.localize("ui.common.yes"),
+            dismissText: this.hass.localize("ui.common.no"),
+          }))
+        ) {
+          let result: DisableConfigEntryResult;
+          try {
+            result = await disableConfigEntry(this.hass, this.entry.entry_id);
+          } catch (err: any) {
+            showAlertDialog(this, {
+              title: this.hass.localize(
+                "ui.panel.config.integrations.config_entry.disable_error"
+              ),
+              text: err.message,
+            });
+            return;
+          }
+          if (result.require_restart) {
+            showAlertDialog(this, {
+              text: this.hass.localize(
+                "ui.panel.config.integrations.config_entry.disable_restart_confirm"
+              ),
+            });
+          }
+          return;
+        }
+      }
+    }
+
+    if (disable) {
+      const confirm = await showConfirmationDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.integrations.config_entry.device.confirm_disable",
+          { name: computeDeviceNameDisplay(this.device, this.hass) }
+        ),
+        confirmText: this.hass.localize("ui.common.yes"),
+        dismissText: this.hass.localize("ui.common.no"),
+      });
+
+      if (!confirm) {
+        return;
+      }
+    }
+
     await updateDeviceRegistryEntry(this.hass, this.device.id, {
-      disabled_by: this.device.disabled_by === "user" ? null : "user",
+      disabled_by: disable ? "user" : null,
     });
   }
 
@@ -220,6 +287,9 @@ class HaConfigEntryDeviceRow extends LitElement {
       ha-md-list-item {
         --md-list-item-leading-space: 56px;
       }
+      .disabled {
+        opacity: 0.5;
+      }
       :host([narrow]) ha-md-list-item {
         --md-list-item-leading-space: 16px;
       }

src/panels/config/integrations/ha-config-integration-page.ts

@@ -403,14 +403,6 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
                         </a>
                       </div>`
                     : nothing}
-                  ${this._logInfo?.level === LogSeverity.DEBUG
-                    ? html`<div class="integration-info">
-                        <ha-svg-icon .path=${mdiBugPlay}></ha-svg-icon>
-                        ${this.hass.localize(
-                          "ui.panel.config.integrations.config_entry.debug_logging_enabled"
-                        )}
-                      </div>`
-                    : nothing}
                   ${this._manifest?.iot_class?.startsWith("cloud_")
                     ? html`<div class="integration-info">
                         <ha-svg-icon .path=${mdiWeb}></ha-svg-icon>
@@ -539,6 +531,21 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
             </div>
           </div>
 
+          ${this._logInfo?.level === LogSeverity.DEBUG
+            ? html`<div class="section">
+                <ha-alert alert-type="warning">
+                  <ha-svg-icon slot="icon" .path=${mdiBugPlay}></ha-svg-icon>
+                  ${this.hass.localize(
+                    "ui.panel.config.integrations.config_entry.debug_logging_enabled"
+                  )}
+                  <ha-button
+                    slot="action"
+                    @click=${this._handleDisableDebugLogging}
+                    >${this.hass.localize("ui.common.disable")}</ha-button
+                  >
+                </ha-alert>
+              </div>`
+            : nothing}
           ${discoveryFlows.length
             ? html`
                 <div class="section">

src/translations/en.json

@@ -5379,6 +5379,7 @@
             "device": {
               "enable": "Enable device",
               "disable": "Disable device",
+              "confirm_disable": "Are you sure you want to disable {name}?",
               "configure": "Configure device",
               "delete": "Remove device"
             },