<commit_before>import React, {PropTypes} from 'react';
import ReactTooltip from 'react-tooltip';
import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';

export const RuleHeader = React.createClass({
  propTypes: {
    onSave: PropTypes.func.isRequired,
    rule: PropTypes.shape({}).isRequired,
    actions: PropTypes.shape({
      updateRuleName: PropTypes.func.isRequired,
    }).isRequired,
    validationError: PropTypes.string.isRequired,
    onChooseTimeRange: PropTypes.func.isRequired,
    timeRange: PropTypes.shape({}).isRequired,
  },

  getInitialState() {
    return {
      isEditingName: false,
    };
  },

  handleEditName(e, rule) {
    if (e.key === 'Enter') {
      const {updateRuleName} = this.props.actions;
      const name = this.ruleName.value;
      updateRuleName(rule.id, name);
      this.toggleEditName();
    }

    if (e.key === 'Escape') {
      this.toggleEditName();
    }
  },

  handleEditNameBlur(rule) {
    const {updateRuleName} = this.props.actions;
    const name = this.ruleName.value;
    updateRuleName(rule.id, name);
    this.toggleEditName();
  },

  toggleEditName() {
    this.setState({isEditingName: !this.state.isEditingName});
  },

  render() {
    return (
      <div className="page-header">
        <div className="page-header__container">
          {this.renderEditName()}
          {this.renderSave()}
        </div>
      </div>
    );
  },

  renderSave() {
    const {validationError, onSave, timeRange, onChooseTimeRange} = this.props;
    const saveButton = validationError ?
      <button className="btn btn-sm btn-default disabled" data-for="save-kapacitor-tooltip" data-tip={validationError}>
        Save Rule
      </button> :
      <button className="btn btn-success btn-sm" onClick={onSave}>Save Rule</button>;

    return (
      <div className="page-header__right">
        <TimeRangeDropdown onChooseTimeRange={onChooseTimeRange} selected={timeRange.inputValue} />
        {saveButton}
        <ReactTooltip id="save-kapacitor-tooltip" effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip kapacitor-tooltip place-bottom" />
      </div>
    );
  },

  renderEditName() {
    const {rule} = this.props;
    const {isEditingName} = this.state;
<commit_msg>Make rule page save button always "success" style<commit_after>import React, {PropTypes} from 'react';
import ReactTooltip from 'react-tooltip';
import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';

export const RuleHeader = React.createClass({
  propTypes: {
    onSave: PropTypes.func.isRequired,
    rule: PropTypes.shape({}).isRequired,
    actions: PropTypes.shape({
      updateRuleName: PropTypes.func.isRequired,
    }).isRequired,
    validationError: PropTypes.string.isRequired,
    onChooseTimeRange: PropTypes.func.isRequired,
    timeRange: PropTypes.shape({}).isRequired,
  },

  getInitialState() {
    return {
      isEditingName: false,
    };
  },

  handleEditName(e, rule) {
    if (e.key === 'Enter') {
      const {updateRuleName} = this.props.actions;
      const name = this.ruleName.value;
      updateRuleName(rule.id, name);
      this.toggleEditName();
    }

    if (e.key === 'Escape') {
      this.toggleEditName();
    }
  },

  handleEditNameBlur(rule) {
    const {updateRuleName} = this.props.actions;
    const name = this.ruleName.value;
    updateRuleName(rule.id, name);
    this.toggleEditName();
  },

  toggleEditName() {
    this.setState({isEditingName: !this.state.isEditingName});
  },

  render() {
    return (
      <div className="page-header">
        <div className="page-header__container">
          {this.renderEditName()}
          {this.renderSave()}
        </div>
      </div>
    );
  },

  renderSave() {
    const {validationError, onSave, timeRange, onChooseTimeRange} = this.props;
    const saveButton = validationError ?
      <button className="btn btn-success btn-sm disabled" data-for="save-kapacitor-tooltip" data-tip={validationError}>
        Save Rule
      </button> :
      <button className="btn btn-success btn-sm" onClick={onSave}>Save Rule</button>;

    return (
      <div className="page-header__right">
        <TimeRangeDropdown onChooseTimeRange={onChooseTimeRange} selected={timeRange.inputValue} />
        {saveButton}
        <ReactTooltip id="save-kapacitor-tooltip" effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip kapacitor-tooltip place-bottom" />
      </div>
    );
  },

  renderEditName() {
    const {rule} = this.props;
    const {isEditingName} = this.state;

{'fraction_non_alphanumeric': 0.14055700609225413, 'fraction_numerical': 0.0004351610095735422, 'mean_word_length': 3.2564814814814813, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, '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': '4811844', 'n_tokens_mistral': 1410, 'n_tokens_neox': 1411, 'n_words': 265}