Hide fields section when all fields inside are filtered (#22277)

Hide field section when all fields inside are filtered

src/components/ha-service-control.ts

@@ -499,8 +499,23 @@ export class HaServiceControl extends LitElement {
           .defaultValue=${this._value?.data}
           @value-changed=${this._dataChanged}
         ></ha-yaml-editor>`
-      : serviceData?.fields.map((dataField) =>
+      : serviceData?.fields.map((dataField) => {
-          dataField.fields
+          if (!dataField.fields) {
+            return this._renderField(
+              dataField,
+              hasOptional,
+              domain,
+              serviceName,
+              targetEntities
+            );
+          }
+
+          const fields = Object.entries(dataField.fields).map(
+            ([key, field]) => ({ key, ...field })
+          );
+
+          return fields.length &&
+            this._hasFilteredFields(fields, targetEntities)
             ? html`<ha-expansion-panel
                 leftChevron
                 .expanded=${!dataField.collapsed}
@@ -531,14 +546,8 @@ export class HaServiceControl extends LitElement {
                   )
                 )}
               </ha-expansion-panel>`
-            : this._renderField(
+            : nothing;
-                dataField,
+        })} `;
-                hasOptional,
-                domain,
-                serviceName,
-                targetEntities
-              )
-        )} `;
   }
 
   private _getSectionDescription(
@@ -551,6 +560,16 @@ export class HaServiceControl extends LitElement {
     );
   }
 
+  private _hasFilteredFields(
+    dataFields: ExtHassService["fields"],
+    targetEntities: string[]
+  ) {
+    return dataFields.some(
+      (dataField) =>
+        !dataField.filter || this._filterField(dataField.filter, targetEntities)
+    );
+  }
+
   private _renderField = (
     dataField: ExtHassService["fields"][number],
     hasOptional: boolean,