Add support for sections in filters (#21157)

src/components/ha-service-control.ts

@@ -65,6 +65,8 @@ interface ExtHassService extends Omit<HassService, "fields"> {
     Omit<HassService["fields"][string], "selector"> & {
       key: string;
       selector?: Selector;
+      fields?: Record<string, Omit<HassService["fields"][string], "selector">>;
+      collapsed?: boolean;
     }
   >;
   hasSelector: string[];
@@ -247,20 +249,7 @@ export class HaServiceControl extends LitElement {
     }
   );
 
-  private _filterFields = memoizeOne(
+  private _getTargetedEntities = memoizeOne((target, value) => {
-    (serviceData: ExtHassService | undefined, value: this["value"]) =>
-      serviceData?.fields?.filter(
-        (field) =>
-          !field.filter ||
-          this._filterField(serviceData.target, field.filter, value)
-      )
-  );
-
-  private _filterField(
-    target: ExtHassService["target"],
-    filter: ExtHassService["fields"][number]["filter"],
-    value: this["value"]
-  ) {
     const targetSelector = target ? { target } : { target: {} };
     const targetEntities =
       ensureArray(
@@ -330,6 +319,13 @@ export class HaServiceControl extends LitElement {
         );
       });
     }
+    return targetEntities;
+  });
+
+  private _filterField(
+    filter: ExtHassService["fields"][number]["filter"],
+    targetEntities: string[]
+  ) {
     if (!targetEntities.length) {
       return false;
     }
@@ -391,7 +387,10 @@ export class HaServiceControl extends LitElement {
         serviceData?.fields.some((field) => showOptionalToggle(field))
     );
 
-    const filteredFields = this._filterFields(serviceData, this._value);
+    const targetEntities = this._getTargetedEntities(
+      serviceData?.target,
+      this._value
+    );
 
     const domain = this._value?.service
       ? computeDomain(this._value.service)
@@ -485,12 +484,54 @@ export class HaServiceControl extends LitElement {
           .defaultValue=${this._value?.data}
           @value-changed=${this._dataChanged}
         ></ha-yaml-editor>`
-      : filteredFields?.map((dataField) => {
+      : serviceData?.fields.map((dataField) =>
+          dataField.fields
+            ? html`<ha-expansion-panel
+                leftChevron
+                .expanded=${!dataField.collapsed}
+                .header=${this.hass.localize(
+                  `component.${domain}.services.${serviceName}.sections.${dataField.key}.name`
+                ) ||
+                dataField.name ||
+                dataField.key}
+              >
+                ${Object.entries(dataField.fields).map(([key, field]) =>
+                  this._renderField(
+                    { key, ...field },
+                    hasOptional,
+                    domain,
+                    serviceName,
+                    targetEntities
+                  )
+                )}
+              </ha-expansion-panel>`
+            : this._renderField(
+                dataField,
+                hasOptional,
+                domain,
+                serviceName,
+                targetEntities
+              )
+        )} `;
+  }
+
+  private _renderField = (
+    dataField: ExtHassService["fields"][number],
+    hasOptional: boolean,
+    domain: string | undefined,
+    serviceName: string | undefined,
+    targetEntities: string[]
+  ) => {
+    if (
+      dataField.filter &&
+      !this._filterField(dataField.filter, targetEntities)
+    ) {
+      return nothing;
+    }
+
     const selector = dataField?.selector ?? { text: undefined };
     const type = Object.keys(selector)[0];
-          const enhancedSelector = ["action", "condition", "trigger"].includes(
+    const enhancedSelector = ["action", "condition", "trigger"].includes(type)
-            type
-          )
       ? {
           [type]: {
             ...selector[type],
@@ -504,8 +545,7 @@ export class HaServiceControl extends LitElement {
     return dataField.selector &&
       (!dataField.advanced ||
         this.showAdvanced ||
-              (this._value?.data &&
+        (this._value?.data && this._value.data[dataField.key] !== undefined))
-                this._value.data[dataField.key] !== undefined))
       ? html`<ha-settings-row .narrow=${this.narrow}>
           ${!showOptional
             ? hasOptional
@@ -551,8 +591,7 @@ export class HaServiceControl extends LitElement {
           ></ha-selector>
         </ha-settings-row>`
       : "";
-        })} `;
+  };
-  }
 
   private _localizeValueCallback = (key: string) => {
     if (!this._value?.service) {
@@ -839,6 +878,11 @@ export class HaServiceControl extends LitElement {
       .description p {
         direction: ltr;
       }
+      ha-expansion-panel {
+        --ha-card-border-radius: 0;
+        --expansion-panel-summary-padding: 0 16px;
+        --expansion-panel-content-padding: 0;
+      }
     `;
   }
 }