Add more device disabled ui (#7874)

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

@@ -8,7 +8,6 @@ import {
   html,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -31,7 +30,7 @@ export class HaDeviceEntitiesCard extends LitElement {
 
   @property() public entities!: EntityRegistryStateEntry[];
 
-  @internalProperty() private _showDisabled = false;
+  @property() public showDisabled = false;
 
   private _entityRows: Array<LovelaceRow | HuiErrorCard> = [];
 
@@ -68,7 +67,7 @@ export class HaDeviceEntitiesCard extends LitElement {
                 })}
               </div>
               ${disabledEntities.length
-                ? !this._showDisabled
+                ? !this.showDisabled
                   ? html`
                       <button
                         class="show-more"
@@ -119,7 +118,7 @@ export class HaDeviceEntitiesCard extends LitElement {
   }
 
   private _toggleShowDisabled() {
-    this._showDisabled = !this._showDisabled;
+    this.showDisabled = !this.showDisabled;
   }
 
   private _renderEntity(entry: EntityRegistryStateEntry): TemplateResult {
@@ -227,3 +226,9 @@ export class HaDeviceEntitiesCard extends LitElement {
     `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-device-entities-card": HaDeviceEntitiesCard;
+  }
+}

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

@@ -46,6 +46,7 @@ import "./device-detail/ha-device-entities-card";
 import "./device-detail/ha-device-info-card";
 import { showDeviceAutomationDialog } from "./device-detail/show-dialog-device-automation";
 import { brandsUrl } from "../../../util/brands-url";
+import { haStyle } from "../../../resources/styles";
 
 export interface EntityRegistryStateEntry extends EntityRegistryEntry {
   stateName?: string | null;
@@ -250,16 +251,18 @@ export class HaConfigDevicePage extends LitElement {
                 device.disabled_by
                   ? html`
                       <div>
-                        <p>
+                        <p class="warning">
                           ${this.hass.localize(
                             "ui.panel.config.devices.enabled_cause",
                             "cause",
-                            device.disabled_by
+                            this.hass.localize(
+                              `ui.panel.config.devices.disabled_by.${device.disabled_by}`
+                            )
                           )}
                         </p>
                       </div>
                       <div class="card-actions" slot="actions">
-                        <mwc-button @click=${this._enableDevice}>
+                        <mwc-button unelevated @click=${this._enableDevice}>
                           ${this.hass.localize("ui.common.enable")}
                         </mwc-button>
                       </div>
@@ -275,6 +278,7 @@ export class HaConfigDevicePage extends LitElement {
                     <ha-device-entities-card
                       .hass=${this.hass}
                       .entities=${entities}
+                      .showDisabled=${device.disabled_by !== null}
                     >
                     </ha-device-entities-card>
                   `
@@ -675,8 +679,10 @@ export class HaConfigDevicePage extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
-    return css`
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
         .container {
           display: flex;
           flex-wrap: wrap;
@@ -797,6 +803,7 @@ export class HaConfigDevicePage extends LitElement {
         ha-card a {
           color: var(--primary-text-color);
         }
-    `;
+      `,
+    ];
   }
 }

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -1,5 +1,6 @@
-import { mdiPlus, mdiFilterVariant } from "@mdi/js";
+import { mdiPlus, mdiFilterVariant, mdiCancel } from "@mdi/js";
 import "@material/mwc-list/mwc-list-item";
+import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
   CSSResult,
@@ -214,11 +215,13 @@ export class HaConfigDeviceDashboard extends LitElement {
   );
 
   private _columns = memoizeOne(
-    (narrow: boolean): DataTableColumnContainer => {
+    (narrow: boolean, showDisabled: boolean): DataTableColumnContainer => {
       const columns: DataTableColumnContainer = narrow
         ? {
             name: {
-              title: "Device",
+              title: this.hass.localize(
+                "ui.panel.config.devices.data_table.device"
+              ),
               sortable: true,
               filterable: true,
               direction: "asc",
@@ -304,6 +307,24 @@ export class HaConfigDeviceDashboard extends LitElement {
             : html` - `;
         },
       };
+      if (showDisabled) {
+        columns.disabled_by = {
+          title: "",
+          type: "icon",
+          template: (disabled_by) =>
+            disabled_by
+              ? html`<div
+                  tabindex="0"
+                  style="display:inline-block; position: relative;"
+                >
+                  <ha-svg-icon .path=${mdiCancel}></ha-svg-icon>
+                  <paper-tooltip animation-delay="0" position="left">
+                    ${this.hass.localize("ui.panel.config.devices.disabled")}
+                  </paper-tooltip>
+                </div>`
+              : "",
+        };
+      }
       return columns;
     }
   );
@@ -448,7 +469,7 @@ export class HaConfigDeviceDashboard extends LitElement {
           : "/config"}
         .tabs=${configSections.integrations}
         .route=${this.route}
-        .columns=${this._columns(this.narrow)}
+        .columns=${this._columns(this.narrow, this._showDisabled)}
         .data=${devicesOutput}
         .filter=${this._filter}
         @row-click=${this._handleRowClicked}

src/panels/config/entities/entity-registry-settings.ts

@@ -111,10 +111,19 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     return html`
       ${!stateObj
         ? html`
-            <div class="container">
+            <div class="container warning">
               ${this.hass!.localize(
                 "ui.dialogs.entity_registry.editor.unavailable"
               )}
+              ${this._device?.disabled_by
+                ? html`<br />${this.hass!.localize(
+                      "ui.dialogs.entity_registry.editor.device_disabled"
+                    )}<br /><mwc-button @click=${this._openDeviceSettings}>
+                      ${this.hass!.localize(
+                        "ui.dialogs.entity_registry.editor.open_device_settings"
+                      )}
+                    </mwc-button>`
+                : ""}
             </div>
           `
         : ""}
@@ -161,6 +170,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
         <div class="row">
           <ha-switch
             .checked=${!this._disabledBy}
+            .disabled=${this._device?.disabled_by}
             @change=${this._disabledByChanged}
           >
           </ha-switch>

src/translations/en.json

@@ -623,6 +623,8 @@
           "unavailable": "This entity is not currently available.",
           "enabled_label": "Enable entity",
           "enabled_cause": "Disabled by {cause}.",
+          "device_disabled": "The device of this entity is disabled.",
+          "open_device_settings": "Open device settings",
           "enabled_description": "Disabled entities will not be added to Home Assistant.",
           "enabled_delay_confirm": "The enabled entities will be added to Home Assistant in {delay} seconds",
           "enabled_restart_confirm": "Restart Home Assistant to finish enabling the entities",
@@ -1757,7 +1759,12 @@
           "update": "Update",
           "no_devices": "No devices",
           "enabled_label": "Enable device",
-          "enabled_cause": "Disabled by {cause}.",
+          "enabled_cause": "The device is disabled by {cause}.",
+          "disabled_by": {
+            "user": "User",
+            "integration": "Integration",
+            "config_entry": "Config Entry"
+          },
           "enabled_description": "Disabled devices will not be shown and entities belonging to the device will be disabled and not added to Home Assistant.",
           "automation": {
             "automations": "Automations",
@@ -1807,6 +1814,7 @@
           "scenes": "Scenes",
           "confirm_rename_entity_ids": "Do you also want to rename the entity IDs of your entities?",
           "confirm_rename_entity_ids_warning": "This will not change any configuration (like automations, scripts, scenes, dashboards) that is currently using these entities! You will have to update them yourself to use the new entity IDs!",
+          "disabled": "Disabled",
           "data_table": {
             "device": "Device",
             "manufacturer": "Manufacturer",