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,128 +679,131 @@ export class HaConfigDevicePage extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResult[] {
-    return css`
+    return [
-      .container {
+      haStyle,
-        display: flex;
+      css`
-        flex-wrap: wrap;
+        .container {
-        margin: auto;
+          display: flex;
-        max-width: 1000px;
+          flex-wrap: wrap;
-        margin-top: 32px;
+          margin: auto;
-        margin-bottom: 32px;
+          max-width: 1000px;
-      }
+          margin-top: 32px;
+          margin-bottom: 32px;
+        }
 
-      .card-header {
+        .card-header {
-        display: flex;
+          display: flex;
-        align-items: center;
+          align-items: center;
-        justify-content: space-between;
+          justify-content: space-between;
-      }
+        }
 
-      .card-header ha-icon-button {
+        .card-header ha-icon-button {
-        margin-right: -8px;
+          margin-right: -8px;
-        color: var(--primary-color);
+          color: var(--primary-color);
-        height: auto;
+          height: auto;
-      }
+        }
 
-      .device-info {
+        .device-info {
-        padding: 16px;
+          padding: 16px;
-      }
+        }
 
-      .show-more {
+        .show-more {
-      }
+        }
 
-      h1 {
+        h1 {
-        margin: 0;
+          margin: 0;
-        font-family: var(--paper-font-headline_-_font-family);
+          font-family: var(--paper-font-headline_-_font-family);
-        -webkit-font-smoothing: var(
+          -webkit-font-smoothing: var(
-          --paper-font-headline_-_-webkit-font-smoothing
+            --paper-font-headline_-_-webkit-font-smoothing
-        );
+          );
-        font-size: var(--paper-font-headline_-_font-size);
+          font-size: var(--paper-font-headline_-_font-size);
-        font-weight: var(--paper-font-headline_-_font-weight);
+          font-weight: var(--paper-font-headline_-_font-weight);
-        letter-spacing: var(--paper-font-headline_-_letter-spacing);
+          letter-spacing: var(--paper-font-headline_-_letter-spacing);
-        line-height: var(--paper-font-headline_-_line-height);
+          line-height: var(--paper-font-headline_-_line-height);
-        opacity: var(--dark-primary-opacity);
+          opacity: var(--dark-primary-opacity);
-      }
+        }
 
-      .header {
+        .header {
-        display: flex;
+          display: flex;
-        justify-content: space-between;
+          justify-content: space-between;
-      }
+        }
 
-      .column,
+        .column,
-      .fullwidth {
+        .fullwidth {
-        padding: 8px;
+          padding: 8px;
-        box-sizing: border-box;
+          box-sizing: border-box;
-      }
+        }
-      .column {
+        .column {
-        width: 33%;
+          width: 33%;
-        flex-grow: 1;
+          flex-grow: 1;
-      }
+        }
-      .fullwidth {
+        .fullwidth {
-        width: 100%;
+          width: 100%;
-        flex-grow: 1;
+          flex-grow: 1;
-      }
+        }
 
-      .header-right {
+        .header-right {
-        align-self: center;
+          align-self: center;
-      }
+        }
 
-      .header-right img {
+        .header-right img {
-        height: 30px;
+          height: 30px;
-      }
+        }
 
-      .header-right {
+        .header-right {
-        display: flex;
+          display: flex;
-      }
+        }
 
-      .header-right:first-child {
+        .header-right:first-child {
-        width: 100%;
+          width: 100%;
-        justify-content: flex-end;
+          justify-content: flex-end;
-      }
+        }
 
-      .header-right > *:not(:first-child) {
+        .header-right > *:not(:first-child) {
-        margin-left: 16px;
+          margin-left: 16px;
-      }
+        }
 
-      .battery {
+        .battery {
-        align-self: center;
+          align-self: center;
-        align-items: center;
+          align-items: center;
-        display: flex;
+          display: flex;
-      }
+        }
 
-      .column > *:not(:first-child) {
+        .column > *:not(:first-child) {
-        margin-top: 16px;
+          margin-top: 16px;
-      }
+        }
 
-      :host([narrow]) .column {
+        :host([narrow]) .column {
-        width: 100%;
+          width: 100%;
-      }
+        }
 
-      :host([narrow]) .container {
+        :host([narrow]) .container {
-        margin-top: 0;
+          margin-top: 0;
-      }
+        }
 
-      paper-item {
+        paper-item {
-        cursor: pointer;
+          cursor: pointer;
-        font-size: var(--paper-font-body1_-_font-size);
+          font-size: var(--paper-font-body1_-_font-size);
-      }
+        }
 
-      paper-item.no-link {
+        paper-item.no-link {
-        cursor: default;
+          cursor: default;
-      }
+        }
 
-      a {
+        a {
-        text-decoration: none;
+          text-decoration: none;
-        color: var(--primary-color);
+          color: var(--primary-color);
-      }
+        }
 
-      ha-card {
+        ha-card {
-        padding-bottom: 8px;
+          padding-bottom: 8px;
-      }
+        }
 
-      ha-card a {
+        ha-card a {
-        color: var(--primary-text-color);
+          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",