<commit_before>import * as React from "react";
import {DataList, DataListCell, DataListCheck, DataListContent, DataListItem, Title} from "@patternfly/react-core";
import {FieldEnum} from "./fields/field-enum";
import {InputProps} from "../../core/types";

interface Field {
  id: string;
  name: string;
  description: string;
  required: boolean;
  values?: Array<{ id: string, name: string }>
  type: string;
  default?: string
}

export interface CapabilityItem {
  id: string;
  name: string;
  description: string;
  category: string;
  fields?: Field[];
  icon?: string;
  disabled?: boolean;
}

export interface CapabilityValue {
  id: string;
  selected: boolean;
  data?: any;
}

type CapabilityItemProps = CapabilityItem & InputProps<CapabilityValue>

export const defaultCapabilitiesPickerValue = [
  { id: 'welcome', selected: true },
];


function CapabilityItem(props: CapabilityItemProps) {
  const onChangeSelected = (selected) => {
    props.onChange({...props.value, selected})
  };

  const onChangeData = (data) => {
    props.onChange({...props.value, data})
  };
  const elId = `toggle-capability-props-form-${props.id}`;
  const fields = (props.fields || []).filter(f => f.type === 'enum');
  return (
    <DataListItem aria-labelledby={props.id} isExpanded={props.value.selected}>
      <DataListCheck aria-labelledby={elId} name="Selection item check" onChange={onChangeSelected}
                     checked={props.value.selected} isDisabled={props.disabled}/>
      <DataListCell width={1} style={{flex: 'none'}}><img src={props.icon}/></DataListCell>
      <DataListCell width={1}><Title size="lg">{props.name}</Title></DataListCell>
      <DataListCell width={3}>{props.description}</DataListCell>
      {fields.length > 0 && props.value.selected && (
        <DataListContent isHidden={!props.value.selected} aria-label={`capability-props-form-${props.id}`}>
          {fields.map(f => {
            const selectedValue = (props.value.data && props.value.data[f.id]) || f.default;
            const onFieldChange = (v) => {
              const newData = {...props.value.data, [f.id]: v};
              onChangeData(newData);
            };
            return (
              <FieldEnum key={f.id} parent={props.id} id={f.id} name={f.name} description={f.description}
                         values={f.values!}
                         required={f.required} value={selectedValue}<commit_msg>fix: added onclick on entire "row"<commit_after>import * as React from "react";
import {DataList, DataListCell, DataListCheck, DataListContent, DataListItem, Title} from "@patternfly/react-core";
import {FieldEnum} from "./fields/field-enum";
import {InputProps} from "../../core/types";

interface Field {
  id: string;
  name: string;
  description: string;
  required: boolean;
  values?: Array<{ id: string, name: string }>
  type: string;
  default?: string
}

export interface CapabilityItem {
  id: string;
  name: string;
  description: string;
  category: string;
  fields?: Field[];
  icon?: string;
  disabled?: boolean;
}

export interface CapabilityValue {
  id: string;
  selected: boolean;
  data?: any;
}

type CapabilityItemProps = CapabilityItem & InputProps<CapabilityValue>

export const defaultCapabilitiesPickerValue = [
  { id: 'welcome', selected: true },
];


function CapabilityItem(props: CapabilityItemProps) {
  const onChangeSelected = (selected) => {
    props.onChange({...props.value, selected})
  };

  const onChangeData = (data) => {
    props.onChange({...props.value, data})
  };
  const elId = `toggle-capability-props-form-${props.id}`;
  const fields = (props.fields || []).filter(f => f.type === 'enum');
  return (
    <DataListItem aria-labelledby={props.id} isExpanded={props.value.selected} onClick={() => onChangeSelected(!props.value.selected)}>
      <DataListCheck aria-labelledby={elId} name="Selection item check" onChange={onChangeSelected}
                     checked={props.value.selected} isDisabled={props.disabled}/>
      <DataListCell width={1} style={{flex: 'none'}}><img src={props.icon}/></DataListCell>
      <DataListCell width={1}><Title size="lg">{props.name}</Title></DataListCell>
      <DataListCell width={3}>{props.description}</DataListCell>
      {fields.length > 0 && props.value.selected && (
        <DataListContent isHidden={!props.value.selected} aria-label={`capability-props-form-${props.id}`}>
          {fields.map(f => {
            const selectedValue = (props.value.data && props.value.data[f.id]) || f.default;
            const onFieldChange = (v) => {
              const newData = {...props.value.data, [f.id]: v};
              onChangeData(newData);
            };
            return (
              <FieldEnum key={f.id} parent={props.id} id={f.id} name={f.name} description={f.description}
                         values={f.values!}
                         required={f.required} value={selectedValue}
{'fraction_non_alphanumeric': 0.15836552144744867, 'fraction_numerical': 0.0016263468184590363, 'mean_word_length': 3.3889384478144513, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 44, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1083565', 'n_tokens_mistral': 1474, 'n_tokens_neox': 1472, 'n_words': 314}