<commit_before>import React from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import JPadEditor from './JPadEditor/JPadEditor';
import JPadTextEditor from './JPadTextEditor/JPadTextEditor';
import Mutator from '../../../../../../utils/mutator';
import wrapComponentWithClass from '../../../../../../hoc/wrap-component-with-class';
import { compose, pure, lifecycle } from 'recompose';
import style from './KeyRulesEditor.css';
import { types } from '../../../../../../services/TypesService';
import editorRulesValuesConverter from '../../../../../../services/editor-rules-values-converter';

const MutatorFor = (propName) => (Comp) =>
  class extends React.Component {
    constructor() {
      super();
      this.state = {};
    }
    componentWillMount() {
      this.state.mutator = Mutator.stateless(() => this.props[propName], this.props.onMutation);
    }
    render() {
      const {[propName]: _, ...otherProps } = this.props;
      return <Comp mutate={this.state.mutator} {...otherProps} />;
    }
  };

const KeyRulesEditor = ({ keyDef, mutate, schema, onMutation }) => {

  return (
    <div className={style['key-rules-editor-container']}>
      <Tabs className={style['tab-container']}>
        <TabList>
          <Tab className={style['tab-header']}>
            <label className={style['key-definition-tab-icon']}>&#xE904; </label>
            <label className={style['tab-title']}>Rules</label>
          </Tab>
          <Tab className={style['tab-header']}>
            <label className={style['key-source-tab-icon']}>&#xE901; </label>
            <label className={style['tab-title']}>Source</label>
          </Tab>
        </TabList>
        <TabPanel className={style['tab-content']}>
          <JPadEditor
            jpadSource={keyDef.source}
            mutate={mutate}
            schema={schema}
            valueType={keyDef.valueType}
          />
        </TabPanel>
        <TabPanel className={style['tab-content']}>
          <JPadTextEditor
            source={keyDef.source}
            onChange={x => onMutation(JSON.parse(x))} />
          <pre style={{"display": "none"}}>
            {JSON.stringify(JSON.parse(keyDef.source), null, 4)}
          </pre>
        </TabPanel>
      </Tabs>
    </div>
  );
};

function getTypedValue(value, valueType) {
  return editorRulesValuesConverter(value, valueType === types.bool.type ? '' : '' + value, valueType).value;
}

export default compose(
  MutatorFor('sourceTree'),
  wrapComponentWithClass,
  pure,
  lifecycle({<commit_msg>Fix for e2e tests<commit_after>import React from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import JPadEditor from './JPadEditor/JPadEditor';
import JPadTextEditor from './JPadTextEditor/JPadTextEditor';
import Mutator from '../../../../../../utils/mutator';
import wrapComponentWithClass from '../../../../../../hoc/wrap-component-with-class';
import { compose, pure, lifecycle } from 'recompose';
import style from './KeyRulesEditor.css';
import { types } from '../../../../../../services/TypesService';
import editorRulesValuesConverter from '../../../../../../services/editor-rules-values-converter';

const MutatorFor = (propName) => (Comp) =>
  class extends React.Component {
    constructor() {
      super();
      this.state = {};
    }
    componentWillMount() {
      this.state.mutator = Mutator.stateless(() => this.props[propName], this.props.onMutation);
    }
    render() {
      const {[propName]: _, ...otherProps } = this.props;
      return <Comp mutate={this.state.mutator} {...otherProps} />;
    }
  };

const KeyRulesEditor = ({ keyDef, mutate, schema, onMutation }) => {

  return (
    <div className={style['key-rules-editor-container']}>
      <Tabs className={style['tab-container']}>
        <TabList>
          <Tab className={style['tab-header']}>
            <label className={style['key-definition-tab-icon']}>&#xE904; </label>
            <label className={style['tab-title']}>Rules</label>
          </Tab>
          <Tab className={style['tab-header']}>
            <label className={style['key-source-tab-icon']}>&#xE901; </label>
            <label className={style['tab-title']}>Source</label>
          </Tab>
        </TabList>
        <TabPanel className={style['tab-content']}>
          <JPadEditor
            jpadSource={keyDef.source}
            mutate={mutate}
            schema={schema}
            valueType={keyDef.valueType}
          />
        </TabPanel>
        <TabPanel className={style['tab-content']}>
          <JPadTextEditor
            source={keyDef.source}
            onChange={x => onMutation(JSON.parse(x))} />
          <pre className={style['key-def-json']} style={{"display": "none"}}>
            {JSON.stringify(JSON.parse(keyDef.source), null, 4)}
          </pre>
        </TabPanel>
      </Tabs>
    </div>
  );
};

function getTypedValue(value, valueType) {
  return editorRulesValuesConverter(value, valueType === types.bool.type ? '' : '' + value, valueType).value;
}

export default compose(
  MutatorFor('sourceTree'),
  wrapComponentWithClass,
  pure,
  lifecycle({
{'fraction_non_alphanumeric': 0.1845703125, 'fraction_numerical': 0.0029296875, 'mean_word_length': 2.6500356379187457, 'pattern_counts': {'":': 2, '<': 57, '<?xml version=': 0, '>': 67, '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': '3441547', 'n_tokens_mistral': 1507, 'n_tokens_neox': 1500, 'n_words': 279}