feat(composite): improve composite exposes

Author: Koen Kanters

src/components/features/composite/Feature.tsx

@@ -23,6 +23,7 @@ interface FeatureProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onCha
     feature: CompositeFeature | GenericExposedFeature;
     deviceState: DeviceState;
     device: Device;
+    depth: number;
     stepsConfiguration?: Record<string, unknown>;
     onChange(endpoint: Endpoint, value: Record<string, unknown>): void;
     onRead(endpoint: Endpoint, value: Record<string, unknown>): void;
@@ -32,7 +33,7 @@ interface FeatureProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onCha
 
 export const Feature = (props: FeatureProps): JSX.Element => {
 
-    const { feature, device, deviceState, stepsConfiguration, onRead, onChange, featureWrapperClass: FeatureWrapper, minimal } = props;
+    const { feature, device, deviceState, stepsConfiguration, onRead, onChange, featureWrapperClass: FeatureWrapper, minimal, depth } = props;
 
     const genericParams = { key: JSON.stringify(feature), device, deviceState, onChange, onRead, featureWrapperClass: FeatureWrapper, minimal };
     const wrapperParams = { key: JSON.stringify(feature), feature, onRead, deviceState };
@@ -77,7 +78,7 @@ export const Feature = (props: FeatureProps): JSX.Element => {
         return <Fan feature={feature} {...genericParams} />
     } else if (isCompositeFeature(feature)) {
         return <FeatureWrapper {...wrapperParams}>
-            <Composite type="composite" feature={feature} {...genericParams} deviceState={(deviceState[feature.property] ?? {}) as DeviceState} />
+            <Composite type="composite" feature={feature} {...genericParams} depth={depth} deviceState={(deviceState[feature.property] ?? {}) as DeviceState} />
         </FeatureWrapper>
     }
     return (<FeatureWrapper {...wrapperParams}>

src/components/features/composite/composite.tsx

@@ -12,6 +12,7 @@ type CompositeType = "composite" | "light" | "switch" | "cover" | "lock" | "fan"
 
 interface CompositeProps extends BaseFeatureProps<CompositeFeature> {
     type: CompositeType;
+    depth?: number;
     stepsConfiguration?: Record<string, unknown>;
     minimal?: boolean;
     showEndpointLabels?: boolean;
@@ -68,6 +69,7 @@ export class Composite extends Component<CompositeProps & WithTranslation<"compo
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { t, showEndpointLabels = false, feature, device, deviceState, onRead: _onRead, onChange: _onChange, featureWrapperClass, minimal } = this.props;
         const { features = [] } = feature;
+        const depth = this.props.depth ?? 0;
         const { state } = this;
         const isThisACompositeFeature = isCompositeFeature(feature)
         const isMoreThanOneFeature = features.length > 1;
@@ -83,6 +85,7 @@ export class Composite extends Component<CompositeProps & WithTranslation<"compo
                     feature={f}
                     device={device}
                     deviceState={combinedState}
+                    depth={depth + 1}
                     onChange={this.onChange}
                     onRead={this.onRead}
                     featureWrapperClass={featureWrapperClass}
@@ -97,6 +100,7 @@ export class Composite extends Component<CompositeProps & WithTranslation<"compo
                     feature={f}
                     device={device}
                     deviceState={combinedState}
+                    depth={depth + 1}
                     onChange={this.onChange}
                     onRead={this.onRead}
                     featureWrapperClass={featureWrapperClass}
@@ -108,6 +112,7 @@ export class Composite extends Component<CompositeProps & WithTranslation<"compo
                 key={JSON.stringify(f)}
                 feature={f}
                 device={device}
+                depth={depth + 1}
                 deviceState={combinedState}
                 onChange={this.onChange}
                 onRead={this.onRead}
@@ -118,7 +123,7 @@ export class Composite extends Component<CompositeProps & WithTranslation<"compo
         }
 
 
-        if (isThisACompositeFeature && isMoreThanOneFeature) {
+        if (isThisACompositeFeature && isMoreThanOneFeature && depth === 1) {
             result.push(<div key={feature.name + 'apply'}>
                 <Button disabled={!this.allInnerFeaturesHaveValues()} className={cx('btn btn-primary float-end', { 'btn-sm': minimal })} onClick={this.onCompositeFeatureApply}>{t('common:apply')}</Button>
             </div>)