Don't show features settings if none is compatible (#24419)

src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts

@@ -151,6 +151,38 @@ customCardFeatures.forEach((feature) => {
   CUSTOM_FEATURE_ENTRIES[feature.type] = feature;
 });
 
+export const getSupportedFeaturesType = (
+  stateObj: HassEntity,
+  featuresTypes?: string[]
+) => {
+  const filteredFeaturesTypes = UI_FEATURE_TYPES.filter(
+    (type) => !featuresTypes || featuresTypes.includes(type)
+  ) as string[];
+
+  const customFeaturesTypes = customCardFeatures.map(
+    (feature) => `${CUSTOM_TYPE_PREFIX}${feature.type}`
+  );
+  return filteredFeaturesTypes
+    .concat(customFeaturesTypes)
+    .filter((type) => supportsFeaturesType(stateObj, type));
+};
+
+export const supportsFeaturesType = (stateObj: HassEntity, type: string) => {
+  if (isCustomType(type)) {
+    const customType = stripCustomPrefix(type);
+    const customFeatureEntry = CUSTOM_FEATURE_ENTRIES[customType];
+    if (!customFeatureEntry?.supported) return true;
+    try {
+      return customFeatureEntry.supported(stateObj);
+    } catch {
+      return false;
+    }
+  }
+
+  const supportsFeature = SUPPORTS_FEATURE_TYPES[type];
+  return !supportsFeature || supportsFeature(stateObj);
+};
+
 declare global {
   interface HASSDomEvents {
     "features-changed": {
@@ -178,20 +210,12 @@ export class HuiCardFeaturesEditor extends LitElement {
 
   private _supportsFeatureType(type: string): boolean {
     if (!this.stateObj) return false;
+    return supportsFeaturesType(this.stateObj, type);
+  }
 
-    if (isCustomType(type)) {
+  private _getSupportedFeaturesType() {
-      const customType = stripCustomPrefix(type);
+    if (!this.stateObj) return [];
-      const customFeatureEntry = CUSTOM_FEATURE_ENTRIES[customType];
+    return getSupportedFeaturesType(this.stateObj, this.featuresTypes);
-      if (!customFeatureEntry?.supported) return true;
-      try {
-        return customFeatureEntry.supported(this.stateObj);
-      } catch {
-        return false;
-      }
-    }
-
-    const supportsFeature = SUPPORTS_FEATURE_TYPES[type];
-    return !supportsFeature || supportsFeature(this.stateObj);
   }
 
   private _isFeatureTypeEditable(type: string) {
@@ -225,18 +249,6 @@ export class HuiCardFeaturesEditor extends LitElement {
     return this._featuresKeys.get(feature)!;
   }
 
-  private _getSupportedFeaturesType() {
-    const featuresTypes = UI_FEATURE_TYPES.filter(
-      (type) => !this.featuresTypes || this.featuresTypes.includes(type)
-    ) as readonly string[];
-    const customFeaturesTypes = customCardFeatures.map(
-      (feature) => `${CUSTOM_TYPE_PREFIX}${feature.type}`
-    );
-    return featuresTypes
-      .concat(customFeaturesTypes)
-      .filter((type) => this._supportsFeatureType(type));
-  }
-
   protected render() {
     if (!this.features || !this.hass) {
       return nothing;

src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts

@@ -14,6 +14,7 @@ import {
   string,
   union,
 } from "superstruct";
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
@@ -36,7 +37,7 @@ import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import type { EditDetailElementEvent, EditSubElementEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import "./hui-card-features-editor";
+import { getSupportedFeaturesType } from "./hui-card-features-editor";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -262,6 +263,10 @@ export class HuiTileCardEditor
       ] as const satisfies readonly HaFormSchema[]
   );
 
+  private _hasCompatibleFeatures = memoizeOne(
+    (stateObj: HassEntity) => getSupportedFeaturesType(stateObj).length > 0
+  );
+
   protected render() {
     if (!this.hass || !this._config) {
       return nothing;
@@ -292,6 +297,9 @@ export class HuiTileCardEditor
       data.features_position = "bottom";
     }
 
+    const hasCompatibleFeatures =
+      (stateObj && this._hasCompatibleFeatures(stateObj)) || false;
+
     return html`
       <ha-form
         .hass=${this.hass}
@@ -309,15 +317,19 @@ export class HuiTileCardEditor
           )}
         </h3>
         <div class="content">
-          <ha-form
+          ${hasCompatibleFeatures
-            class="features-form"
+            ? html`
-            .hass=${this.hass}
+                <ha-form
-            .data=${data}
+                  class="features-form"
-            .schema=${featuresSchema}
+                  .hass=${this.hass}
-            .computeLabel=${this._computeLabelCallback}
+                  .data=${data}
-            .computeHelper=${this._computeHelperCallback}
+                  .schema=${featuresSchema}
-            @value-changed=${this._valueChanged}
+                  .computeLabel=${this._computeLabelCallback}
-          ></ha-form>
+                  .computeHelper=${this._computeHelperCallback}
+                  @value-changed=${this._valueChanged}
+                ></ha-form>
+              `
+            : nothing}
           <hui-card-features-editor
             .hass=${this.hass}
             .stateObj=${stateObj}