Make unavailable elements disabled (#5386)

* Make unavailable elements disabled

* Unused

* Add checks for unknown

* Update hui-weather-entity-row.ts

src/components/entity/ha-entity-toggle.ts

@@ -18,9 +18,12 @@ import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 
 import "../ha-switch";
+import { UNAVAILABLE_STATES } from "../../data/entity";
 
 const isOn = (stateObj?: HassEntity) =>
-  stateObj !== undefined && !STATES_OFF.includes(stateObj.state);
+  stateObj !== undefined &&
+  !STATES_OFF.includes(stateObj.state) &&
+  !UNAVAILABLE_STATES.includes(stateObj.state);
 
 class HaEntityToggle extends LitElement {
   // hass is not a property so that we only re-render on stateObj changes
@@ -40,12 +43,14 @@ class HaEntityToggle extends LitElement {
         <paper-icon-button
           aria-label=${`Turn ${computeStateName(this.stateObj)} off`}
           icon="hass:flash-off"
+          .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
           @click=${this._turnOff}
           ?state-active=${!this._isOn}
         ></paper-icon-button>
         <paper-icon-button
           aria-label=${`Turn ${computeStateName(this.stateObj)} on`}
           icon="hass:flash"
+          .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
           @click=${this._turnOn}
           ?state-active=${this._isOn}
         ></paper-icon-button>
@@ -58,6 +63,7 @@ class HaEntityToggle extends LitElement {
           this._isOn ? "off" : "on"
         }`}
         .checked=${this._isOn}
+        .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
         @change=${this._toggleChanged}
       ></ha-switch>
     `;

src/components/ha-cover-controls.js

@@ -3,6 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import CoverEntity from "../util/cover-model";
+import { UNAVAILABLE_STATES } from "../data/entity";
 
 class HaCoverControls extends PolymerElement {
   static get template() {
@@ -81,11 +82,17 @@ class HaCoverControls extends PolymerElement {
   }
 
   computeOpenDisabled(stateObj, entityObj) {
+    if (UNAVAILABLE_STATES.includes(stateObj.state)) {
+      return true;
+    }
     var assumedState = stateObj.attributes.assumed_state === true;
     return (entityObj.isFullyOpen || entityObj.isOpening) && !assumedState;
   }
 
   computeClosedDisabled(stateObj, entityObj) {
+    if (UNAVAILABLE_STATES.includes(stateObj.state)) {
+      return true;
+    }
     var assumedState = stateObj.attributes.assumed_state === true;
     return (entityObj.isFullyClosed || entityObj.isClosing) && !assumedState;
   }

src/components/ha-cover-tilt-controls.js

@@ -4,6 +4,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import CoverEntity from "../util/cover-model";
+import { UNAVAILABLE_STATES } from "../data/entity";
 
 class HaCoverTiltControls extends PolymerElement {
   static get template() {
@@ -63,11 +64,17 @@ class HaCoverTiltControls extends PolymerElement {
   }
 
   computeOpenDisabled(stateObj, entityObj) {
+    if (UNAVAILABLE_STATES.includes(stateObj.state)) {
+      return true;
+    }
     var assumedState = stateObj.attributes.assumed_state === true;
     return entityObj.isFullyOpenTilt && !assumedState;
   }
 
   computeClosedDisabled(stateObj, entityObj) {
+    if (UNAVAILABLE_STATES.includes(stateObj.state)) {
+      return true;
+    }
     var assumedState = stateObj.attributes.assumed_state === true;
     return entityObj.isFullyClosedTilt && !assumedState;
   }

src/data/entity.ts

@@ -1,6 +1,8 @@
 export const UNAVAILABLE = "unavailable";
 export const UNKNOWN = "unknown";
 
+export const UNAVAILABLE_STATES = [UNAVAILABLE, UNKNOWN];
+
 export const ENTITY_COMPONENT_DOMAINS = [
   "air_quality",
   "alarm_control_panel",

src/panels/lovelace/cards/hui-entity-card.ts

@@ -30,7 +30,7 @@ import { actionHandler } from "../common/directives/action-handler-directive";
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import { findEntities } from "../common/find-entites";
 import { createHeaderFooterElement } from "../create-element/create-header-footer-element";
-import { UNKNOWN, UNAVAILABLE } from "../../../data/entity";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { HuiErrorCard } from "./hui-error-card";
 
 @customElement("hui-entity-card")
@@ -105,7 +105,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
 
     const showUnit = this._config.attribute
       ? this._config.attribute in stateObj.attributes
-      : stateObj.state !== UNKNOWN && stateObj.state !== UNAVAILABLE;
+      : !UNAVAILABLE_STATES.includes(stateObj.state);
 
     return html`
       <ha-card>

src/panels/lovelace/cards/hui-glance-card.ts

@@ -30,7 +30,7 @@ import { hasAction } from "../common/has-action";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { handleAction } from "../common/handle-action";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { UNAVAILABLE, UNKNOWN } from "../../../data/entity";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { findEntities } from "../common/find-entites";
 
 @customElement("hui-glance-card")
@@ -263,8 +263,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
               <div>
                 ${computeDomain(entityConf.entity) === "sensor" &&
                 stateObj.attributes.device_class === "timestamp" &&
-                stateObj.state !== UNAVAILABLE &&
+                !UNAVAILABLE_STATES.includes(stateObj.state)
-                stateObj.state !== UNKNOWN
                   ? html`
                       <hui-timestamp-display
                         .hass=${this.hass}

src/panels/lovelace/cards/hui-light-card.ts

@@ -19,7 +19,6 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen
 
 import "../../../components/ha-card";
 import "../components/hui-warning";
-import "../components/hui-unavailable";
 
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant, LightEntity } from "../../../types";
@@ -29,7 +28,7 @@ import { LightCardConfig } from "./types";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { SUPPORT_BRIGHTNESS } from "../../../data/light";
 import { findEntities } from "../common/find-entites";
-import { UNAVAILABLE } from "../../../data/entity";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { hasAction } from "../common/has-action";
 import { ActionHandlerEvent } from "../../../data/lovelace";
@@ -107,14 +106,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
 
     return html`
       <ha-card>
-        ${stateObj.state === UNAVAILABLE
-          ? html`
-              <hui-unavailable
-                .text=${this.hass.localize("state.default.unavailable")}
-                @click=${this._handleMoreInfo}
-              ></hui-unavailable>
-            `
-          : ""}
         <paper-icon-button
           icon="hass:dots-vertical"
           class="more-info"
@@ -128,6 +119,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
               <round-slider
                 min="0"
                 .value=${brightness}
+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
                 @value-changing=${this._dragEvent}
                 @value-changed=${this._setBrightness}
                 style=${styleMap({
@@ -145,6 +137,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
                   "state-on": stateObj.state === "on",
                   "state-unavailable": stateObj.state === "unavailable",
                 })}"
+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
                 .icon=${this._config.icon || stateIcon(stateObj)}
                 style=${styleMap({
                   filter: this._computeBrightness(stateObj),
@@ -161,9 +154,18 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
           </div>
 
           <div id="info">
+            ${UNAVAILABLE_STATES.includes(stateObj.state)
+              ? html`
+                  <div>
+                    ${this.hass.localize(`state.default.${stateObj.state}`) ||
+                      stateObj.state}
+                  </div>
+                `
+              : html`
                   <div class="brightness">
                     %
                   </div>
+                `}
             ${this._config.name || computeStateName(stateObj)}
           </div>
         </div>
@@ -267,10 +269,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         display: block;
       }
 
-      hui-unavailable {
-        cursor: pointer;
-      }
-
       ha-card {
         height: 100%;
         box-sizing: border-box;
@@ -353,9 +351,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         transition: opacity 0.5s ease-in-out;
         -moz-transition: opacity 0.5s ease-in-out;
         -webkit-transition: opacity 0.5s ease-in-out;
-        cursor: pointer;
-        pointer-events: none;
-        padding-left: 0.5em;
       }
 
       .show_brightness {

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -30,7 +30,7 @@ import { stateIcon } from "../../../common/entity/state_icon";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { contrast } from "../common/color/contrast";
 import { findEntities } from "../common/find-entites";
-import { UNAVAILABLE, UNKNOWN } from "../../../data/entity";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 import {
   SUPPORT_PAUSE,
   SUPPORT_TURN_ON,
@@ -285,8 +285,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
     const isOffState = state === "off";
     const isUnavailable =
-      state === UNAVAILABLE ||
+      UNAVAILABLE_STATES.includes(state) ||
-      state === UNKNOWN ||
       (state === "off" && !supportsFeature(stateObj, SUPPORT_TURN_ON));
     const hasNoImage = !this._image;
     const controls = this._getControls();
@@ -501,7 +500,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
     const state = stateObj.state;
 
-    if (state === UNAVAILABLE || state === UNKNOWN) {
+    if (UNAVAILABLE_STATES.includes(state)) {
       return undefined;
     }
 

src/panels/lovelace/cards/hui-picture-entity-card.ts

@@ -21,7 +21,7 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
-import { UNAVAILABLE } from "../../../data/entity";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { PictureEntityCardConfig } from "./types";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
@@ -178,7 +178,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
               : undefined
           )}
           class=${classMap({
-            clickable: stateObj.state !== UNAVAILABLE,
+            clickable: !UNAVAILABLE_STATES.includes(stateObj.state),
           })}
         ></hui-image>
         ${footer}

src/panels/lovelace/cards/hui-thermostat-card.ts

@@ -15,7 +15,6 @@ import "@thomasloven/round-slider";
 
 import "../../../components/ha-card";
 import "../components/hui-warning";
-import "../components/hui-unavailable";
 
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -35,7 +34,7 @@ import {
 import { HassEntity } from "home-assistant-js-websocket";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entites";
-import { UNAVAILABLE } from "../../../data/entity";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 
 const modeIcons: { [mode in HvacMode]: string } = {
   auto: "hass:calendar-repeat",
@@ -127,8 +126,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         ? stateObj.attributes.temperature
         : stateObj.attributes.min_temp;
 
-    const slider =
+    const slider = UNAVAILABLE_STATES.includes(stateObj.state)
-      stateObj.state === "unavailable"
       ? html`
           <round-slider disabled="true"></round-slider>
         `
@@ -224,14 +222,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
           [mode]: true,
         })}
       >
-        ${stateObj.state === UNAVAILABLE
-          ? html`
-              <hui-unavailable
-                .text="${this.hass.localize("state.default.unavailable")}"
-                @click=${this._handleMoreInfo}
-              ></hui-unavailable>
-            `
-          : ""}
         <paper-icon-button
           icon="hass:dots-vertical"
           class="more-info"
@@ -333,7 +323,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
   }
 
   private _getSetTemp(stateObj: HassEntity) {
-    if (stateObj.state === "unavailable") {
+    if (UNAVAILABLE_STATES.includes(stateObj.state)) {
       return this.hass!.localize("state.default.unavailable");
     }
 
@@ -420,10 +410,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         display: block;
       }
 
-      hui-unavailable {
-        cursor: pointer;
-      }
-
       ha-card {
         height: 100%;
         position: relative;

src/panels/lovelace/components/hui-unavailable.ts

@@ -1,57 +0,0 @@
-import {
-  html,
-  LitElement,
-  TemplateResult,
-  CSSResult,
-  css,
-  customElement,
-  property,
-} from "lit-element";
-
-@customElement("hui-unavailable")
-export class HuiUnavailable extends LitElement {
-  @property() public text?: string;
-
-  protected render(): TemplateResult {
-    return html`
-      <div class="disabled-overlay"></div>
-      <div class="disabled-overlay-text">${this.text}</div>
-    `;
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      .disabled-overlay {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: var(--state-icon-unavailable-color);
-        opacity: 0.6;
-        z-index: 50;
-      }
-
-      .disabled-overlay-text {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        font-size: 24px;
-        text-align: center;
-        color: var(--primary-text-color);
-        transform: translate(-50%, -50%);
-        -ms-transform: translate(-50%, -50%);
-        z-index: 50;
-        opacity: 0.7;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-unavailable": HuiUnavailable;
-  }
-}

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -22,7 +22,7 @@ import {
   computeUsedEntities,
   calcUnusedEntities,
 } from "../../common/compute-unused-entities";
-import { UNKNOWN, UNAVAILABLE } from "../../../../data/entity";
+import { UNAVAILABLE_STATES } from "../../../../data/entity";
 import {
   customCards,
   getCustomCardEntry,
@@ -168,14 +168,12 @@ export class HuiCardPicker extends LitElement {
     this._usedEntities = [...usedEntities].filter(
       (eid) =>
         this.hass!.states[eid] &&
-        this.hass!.states[eid].state !== UNKNOWN &&
+        !UNAVAILABLE_STATES.includes(this.hass!.states[eid].state)
-        this.hass!.states[eid].state !== UNAVAILABLE
     );
     this._unusedEntities = [...unusedEntities].filter(
       (eid) =>
         this.hass!.states[eid] &&
-        this.hass!.states[eid].state !== UNKNOWN &&
+        !UNAVAILABLE_STATES.includes(this.hass!.states[eid].state)
-        this.hass!.states[eid].state !== UNAVAILABLE
     );
 
     this.requestUpdate();

src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts

@@ -19,6 +19,7 @@ import { HomeAssistant } from "../../../types";
 import { LovelaceRow, EntityConfig } from "./types";
 import { setInputDateTimeValue } from "../../../data/input_datetime";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 
 @customElement("hui-input-datetime-entity-row")
 class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
@@ -60,6 +61,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
         ${stateObj.attributes.has_date
           ? html`
               <ha-date-input
+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
                 .year=${stateObj.attributes.year}
                 .month=${("0" + stateObj.attributes.month).slice(-2)}
                 .day=${("0" + stateObj.attributes.day).slice(-2)}
@@ -72,6 +74,7 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
         ${stateObj.attributes.has_time
           ? html`
               <paper-time-input
+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
                 .hour=${stateObj.state === "unknown"
                   ? ""
                   : ("0" + stateObj.attributes.hour).slice(-2)}

src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts

@@ -18,6 +18,7 @@ import { LovelaceRow, EntityConfig } from "./types";
 import { HomeAssistant } from "../../../types";
 import { setValue } from "../../../data/input_text";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 
 @customElement("hui-input-number-entity-row")
 class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
@@ -79,6 +80,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
           ? html`
               <div class="flex">
                 <ha-slider
+                  .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
                   .dir="${computeRTLDirection(this.hass!)}"
                   .step="${Number(stateObj.attributes.step)}"
                   .min="${Number(stateObj.attributes.min)}"
@@ -99,6 +101,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
               <paper-input
                 no-label-float
                 auto-validate
+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
                 .pattern="[0-9]+([\\.][0-9]+)?"
                 .step="${Number(stateObj.attributes.step)}"
                 .min="${Number(stateObj.attributes.min)}"

src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts

@@ -32,8 +32,7 @@ import { actionHandler } from "../common/directives/action-handler-directive";
 import { hasAction } from "../common/has-action";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { handleAction } from "../common/handle-action";
-import { UNAVAILABLE } from "../../../data/entity";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
-import { fireEvent } from "../../../common/dom/fire_event";
 
 @customElement("hui-input-select-entity-row")
 class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
@@ -80,14 +79,6 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
         !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this._config.entity)));
 
     return html`
-      ${stateObj.state === UNAVAILABLE
-        ? html`
-            <hui-unavailable
-              .text=${this.hass.localize("state.default.unavailable")}
-              @click=${this._showMoreInfo}
-            ></hui-unavailable>
-          `
-        : ""}
       <state-badge
         .stateObj=${stateObj}
         .stateColor=${this._config.state_color}
@@ -106,6 +97,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
       <ha-paper-dropdown-menu
         .label=${this._config.name || computeStateName(stateObj)}
         .value=${stateObj.state}
+        .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
         @iron-select=${this._selectedChanged}
         @click=${stopPropagation}
       >
@@ -149,10 +141,6 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
     handleAction(this, this.hass!, this._config!, ev.detail.action!);
   }
 
-  private _showMoreInfo() {
-    fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
-  }
-
   static get styles(): CSSResult {
     return css`
       :host {
@@ -175,9 +163,6 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
         background: var(--divider-color);
         border-radius: 100%;
       }
-      hui-unavailable {
-        cursor: pointer;
-      }
     `;
   }
 

src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts

@@ -15,6 +15,7 @@ import { HomeAssistant } from "../../../types";
 import { LovelaceRow, EntityConfig } from "./types";
 import { setValue } from "../../../data/input_text";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 
 @customElement("hui-input-text-entity-row")
 class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
@@ -56,6 +57,7 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         <paper-input
           no-label-float
+          .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
           .value="${stateObj.state}"
           .minlength="${stateObj.attributes.min}"
           .maxlength="${stateObj.attributes.max}"

src/panels/lovelace/entity-rows/hui-lock-entity-row.ts

@@ -15,6 +15,7 @@ import "../components/hui-warning";
 import { HomeAssistant } from "../../../types";
 import { LovelaceRow, EntityConfig } from "./types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 
 @customElement("hui-lock-entity-row")
 class HuiLockEntityRow extends LitElement implements LovelaceRow {
@@ -54,7 +55,11 @@ class HuiLockEntityRow extends LitElement implements LovelaceRow {
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <mwc-button @click="${this._callService}" class="text-content">
+        <mwc-button
+          @click="${this._callService}"
+          .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
+          class="text-content"
+        >
           ${stateObj.state === "locked"
             ? this.hass!.localize("ui.card.lock.unlock")
             : this.hass!.localize("ui.card.lock.lock")}

src/panels/lovelace/entity-rows/hui-scene-entity-row.ts

@@ -17,6 +17,7 @@ import { HomeAssistant } from "../../../types";
 import { LovelaceRow, ActionRowConfig } from "./types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { activateScene } from "../../../data/scene";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 
 @customElement("hui-scene-entity-row")
 class HuiSceneEntityRow extends LitElement implements LovelaceRow {
@@ -56,7 +57,11 @@ class HuiSceneEntityRow extends LitElement implements LovelaceRow {
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <mwc-button @click="${this._callService}" class="text-content">
+        <mwc-button
+          @click="${this._callService}"
+          .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
+          class="text-content"
+        >
           ${this._config.action_name ||
             this.hass!.localize("ui.card.scene.activate")}
         </mwc-button>

src/panels/lovelace/entity-rows/hui-script-entity-row.ts

@@ -16,6 +16,7 @@ import "../components/hui-warning";
 import { HomeAssistant } from "../../../types";
 import { LovelaceRow, ActionRowConfig } from "./types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 
 @customElement("hui-script-entity-row")
 class HuiScriptEntityRow extends LitElement implements LovelaceRow {
@@ -58,12 +59,17 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
         ${stateObj.attributes.can_cancel
           ? html`
               <ha-entity-toggle
+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
                 .hass=${this.hass}
                 .stateObj=${stateObj}
               ></ha-entity-toggle>
             `
           : html`
-              <mwc-button @click=${this._callService} class="text-content">
+              <mwc-button
+                @click=${this._callService}
+                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
+                class="text-content"
+              >
                 ${this._config.action_name ||
                   this.hass!.localize("ui.card.script.execute")}
               </mwc-button>

src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts

@@ -15,6 +15,7 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa
 import { HomeAssistant } from "../../../types";
 import { LovelaceRow, EntityConfig } from "./types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 
 @customElement("hui-toggle-entity-row")
 class HuiToggleEntityRow extends LitElement implements LovelaceRow {
@@ -54,7 +55,9 @@ class HuiToggleEntityRow extends LitElement implements LovelaceRow {
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        ${stateObj.state === "on" || stateObj.state === "off"
+        ${stateObj.state === "on" ||
+        stateObj.state === "off" ||
+        UNAVAILABLE_STATES.includes(stateObj.state)
           ? html`
               <ha-entity-toggle
                 .hass=${this.hass}

src/panels/lovelace/entity-rows/hui-weather-entity-row.ts

@@ -22,6 +22,8 @@ import {
   weatherImages,
 } from "../../../data/weather";
 
+import { UNAVAILABLE_STATES } from "../../../data/entity";
+
 @customElement("hui-weather-entity-row")
 class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
   @property() public hass?: HomeAssistant;
@@ -68,11 +70,18 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
       <hui-generic-entity-row .hass=${this.hass} .config=${weatherRowConfig}>
         <div class="attributes">
           <div>
+            ${UNAVAILABLE_STATES.includes(stateObj.state)
+              ? this.hass.localize(`state.default.${stateObj.state}`) ||
+                stateObj.state
+              : html`
                   ${stateObj.attributes.temperature}
                   ${getWeatherUnit(this.hass, "temperature")}
+                `}
           </div>
           <div class="secondary">
-            ${this._getSecondaryAttribute(stateObj)}
+            ${!UNAVAILABLE_STATES.includes(stateObj.state)
+              ? this._getSecondaryAttribute(stateObj)
+              : ""}
           </div>
         </div>
       </hui-generic-entity-row>