Fixes for disabled/unavailable entities (#14451)

src/components/chart/state-history-chart-timeline.ts

@@ -21,9 +21,9 @@ let colorIndex = 0;
 
 export const getStateColorToken = (
   stateString: string,
-  entityState: HassEntity
+  entityState?: HassEntity
 ) => {
-  if (!stateActive(entityState, stateString)) {
+  if (!entityState || !stateActive(entityState, stateString)) {
     return `disabled`;
   }
   const color = stateColor(entityState, stateString);
@@ -35,8 +35,8 @@ export const getStateColorToken = (
 
 const getColor = (
   stateString: string,
-  entityState: HassEntity,
+  computedStyles: CSSStyleDeclaration,
-  computedStyles: CSSStyleDeclaration
+  entityState?: HassEntity
 ) => {
   const stateColorToken = getStateColorToken(stateString, entityState);
 
@@ -273,8 +273,8 @@ export class StateHistoryChartTimeline extends LitElement {
             label: locState,
             color: getColor(
               prevState,
-              this.hass.states[stateInfo.entity_id],
+              computedStyles,
-              computedStyles
+              this.hass.states[stateInfo.entity_id]
             ),
           });
 
@@ -291,8 +291,8 @@ export class StateHistoryChartTimeline extends LitElement {
           label: locState,
           color: getColor(
             prevState,
-            this.hass.states[stateInfo.entity_id],
+            computedStyles,
-            computedStyles
+            this.hass.states[stateInfo.entity_id]
           ),
         });
       }

src/dialogs/more-info/ha-more-info-history.ts

@@ -48,7 +48,7 @@ export class MoreInfoHistory extends LitElement {
       return html``;
     }
 
-    return html`${isComponentLoaded(this.hass, "history")
+    return html` ${isComponentLoaded(this.hass, "history")
       ? html`<div class="header">
             <div class="title">
               ${this.hass.localize("ui.dialogs.more_info_control.history")}
@@ -151,33 +151,27 @@ export class MoreInfoHistory extends LitElement {
     setTimeout(() => fireEvent(this, "close-dialog"), 500);
   }
 
-  static get styles() {
+  static styles = css`
-    return [
+    .header {
-      css`
+      display: flex;
-        .header {
+      flex-direction: row;
-          display: flex;
+      justify-content: space-between;
-          flex-direction: row;
+      align-items: center;
-          justify-content: space-between;
+      margin-bottom: 8px;
-          align-items: center;
+    }
-          margin-bottom: 8px;
+    .header > a,
-        }
+    a:visited {
-        .header > a,
+      color: var(--primary-color);
-        a:visited {
+    }
-          color: var(--primary-color);
+    .title {
-        }
+      font-family: var(--paper-font-title_-_font-family);
-        .title {
+      -webkit-font-smoothing: var(--paper-font-title_-_-webkit-font-smoothing);
-          font-family: var(--paper-font-title_-_font-family);
+      font-size: var(--paper-font-subhead_-_font-size);
-          -webkit-font-smoothing: var(
+      font-weight: var(--paper-font-title_-_font-weight);
-            --paper-font-title_-_-webkit-font-smoothing
+      letter-spacing: var(--paper-font-title_-_letter-spacing);
-          );
+      line-height: var(--paper-font-title_-_line-height);
-          font-size: var(--paper-font-subhead_-_font-size);
+    }
-          font-weight: var(--paper-font-title_-_font-weight);
+  `;
-          letter-spacing: var(--paper-font-title_-_letter-spacing);
-          line-height: var(--paper-font-title_-_line-height);
-        }
-      `,
-    ];
-  }
 }
 
 declare global {

src/dialogs/more-info/ha-more-info-info.ts

@@ -30,7 +30,14 @@ export class MoreInfoInfo extends LitElement {
     const domain = computeDomain(entityId);
 
     return html`
-      ${stateObj.attributes.restored && this._entityEntry
+      ${!stateObj
+        ? html`<ha-alert alert-type="warning">
+            ${this.hass.localize(
+              "ui.dialogs.entity_registry.editor.unavailable"
+            )}
+          </ha-alert>`
+        : ""}
+      ${stateObj?.attributes.restored && this._entityEntry
         ? html`<ha-alert alert-type="warning">
             ${this.hass.localize(
               "ui.dialogs.more_info_control.restored.no_longer_provided",

src/dialogs/more-info/ha-more-info-settings.ts

@@ -54,11 +54,13 @@ export class HaMoreInfoSettings extends LitElement {
     }
 
     return html`
-      ${dynamicElement(this._settingsElementTag, {
+      <div @entity-entry-updated=${this._entryUpdated}>
-        hass: this.hass,
+        ${dynamicElement(this._settingsElementTag, {
-        entry: this._entry,
+          hass: this.hass,
-        entityId: this.entityId,
+          entry: this._entry,
-      })}
+          entityId: this.entityId,
+        })}
+      </div>
     `;
   }
 
@@ -84,6 +86,10 @@ export class HaMoreInfoSettings extends LitElement {
     }
   }
 
+  private _entryUpdated(ev: CustomEvent<ExtEntityRegistryEntry>) {
+    this._entry = ev.detail;
+  }
+
   private async _loadPlatformSettingTabs(): Promise<void> {
     if (!this._entry) {
       return;

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -80,6 +80,7 @@ class DialogDeviceRegistryDetail extends LitElement {
             <div class="row">
               <ha-switch
                 .checked=${!this._disabledBy}
+                .disabled=${this._params.device.disabled_by === "config_entry"}
                 @change=${this._disabledByChanged}
               >
               </ha-switch>

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

@@ -299,20 +299,35 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     return html`
       ${!stateObj
         ? html`
-            <div class="container warning">
+            <ha-alert alert-type="warning">
-              ${this.hass!.localize(
-                "ui.dialogs.entity_registry.editor.unavailable"
-              )}
               ${this._device?.disabled_by
-                ? html`<br />${this.hass!.localize(
+                ? html`${this.hass!.localize(
                       "ui.dialogs.entity_registry.editor.device_disabled"
-                    )}<br /><mwc-button @click=${this._openDeviceSettings}>
+                    )}<mwc-button
+                      @click=${this._openDeviceSettings}
+                      slot="action"
+                    >
                       ${this.hass!.localize(
                         "ui.dialogs.entity_registry.editor.open_device_settings"
                       )}
                     </mwc-button>`
-                : ""}
+                : this.entry.disabled_by
-            </div>
+                ? html`${this.hass!.localize(
+                    "ui.dialogs.entity_registry.editor.entity_disabled"
+                  )}${["user", "integration"].includes(this._disabledBy!)
+                    ? html`<mwc-button
+                        slot="action"
+                        @click=${this._enableEntry}
+                      >
+                        ${this.hass!.localize(
+                          "ui.dialogs.entity_registry.editor.enable_entity"
+                        )}</mwc-button
+                      >`
+                    : ""}`
+                : this.hass!.localize(
+                    "ui.dialogs.entity_registry.editor.unavailable"
+                  )}
+            </ha-alert>
           `
         : ""}
       ${this._error
@@ -922,6 +937,39 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     });
   }
 
+  private async _enableEntry() {
+    this._error = undefined;
+    this._submitting = true;
+    try {
+      const result = await updateEntityRegistryEntry(
+        this.hass!,
+        this._origEntityId,
+        { disabled_by: null }
+      );
+      fireEvent(this, "entity-entry-updated", result.entity_entry);
+      if (result.require_restart) {
+        showAlertDialog(this, {
+          text: this.hass.localize(
+            "ui.dialogs.entity_registry.editor.enabled_restart_confirm"
+          ),
+        });
+      }
+      if (result.reload_delay) {
+        showAlertDialog(this, {
+          text: this.hass.localize(
+            "ui.dialogs.entity_registry.editor.enabled_delay_confirm",
+            "delay",
+            result.reload_delay
+          ),
+        });
+      }
+    } catch (err: any) {
+      this._error = err.message;
+    } finally {
+      this._submitting = false;
+    }
+  }
+
   private async _updateEntry(): Promise<void> {
     this._submitting = true;
 
@@ -1163,6 +1211,9 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
         li[divider] {
           border-bottom-color: var(--divider-color);
         }
+        ha-alert mwc-button {
+          width: max-content;
+        }
       `,
     ];
   }
@@ -1172,4 +1223,7 @@ declare global {
   interface HTMLElementTagNameMap {
     "entity-registry-settings": EntityRegistrySettings;
   }
+  interface HASSDomEvents {
+    "entity-entry-updated": ExtEntityRegistryEntry;
+  }
 }

src/translations/en.json

@@ -893,6 +893,8 @@
           "hidden_label": "Hidden",
           "hidden_cause": "Hidden by {cause}.",
           "device_disabled": "The device of this entity is disabled.",
+          "entity_disabled": "This entity is disabled.",
+          "enable_entity": "Enable",
           "open_device_settings": "Open device settings",
           "switch_as_x_confirm": "This switch will be hidden and a new {domain} will be added. Your existing configurations using the switch will continue to work.",
           "enabled_description": "Disabled entities will not be added to Home Assistant.",