<commit_before>import React, {Component} from 'react'
import PropTypes from 'prop-types'

import ConfirmOrCancel from 'shared/components/ConfirmOrCancel'
import {QUERIES_TABLE} from 'src/admin/constants/tableSizing'

class QueryRow extends Component {
  constructor(props) {
    super(props)

    this.state = {
      confirmingKill: false,
    }
  }

  handleInitiateKill = () => {
    this.setState({confirmingKill: true})
  }

  handleFinishHim = () => {
    this.props.onKill(this.props.query.id)
  }

  handleShowMercy = () => {
    this.setState({confirmingKill: false})
  }

  render() {
    const {query: {database, query, duration}} = this.props

    return (
      <tr>
        <td
          style={{width: `${QUERIES_TABLE.colDatabase}px`}}
          className="monotype"
        >
          {database}
        </td>
        <td>
          <code>{query}</code>
        </td>
        <td
          style={{width: `${QUERIES_TABLE.colRunning}px`}}
          className="monotype"
        >
          {duration}
        </td>
        <td
          style={{width: `${QUERIES_TABLE.colKillQuery}px`}}
          className="text-right"
        >
          {this.state.confirmingKill ? (
            <ConfirmOrCancel
              onConfirm={this.handleFinishHim}
              onCancel={this.handleShowMercy}
              buttonSize="btn-xs"
            />
          ) : (
            <button
              className="btn btn-xs btn-danger table--show-on-row-hover"
              onClick={this.handleInitiateKill}
            >
              Kill
            </button>
          )}
        </td>
      </tr>
    )
  }
}

const {func, shape} = PropTypes

QueryRow.propTypes = {
  query: shape().isRequired,
  onKill: func.isRequired,
}

export default QueryRow<commit_msg>Refactor Query Row to use ConfirmButton<commit_after>import React from 'react'
import PropTypes from 'prop-types'

import ConfirmButton from 'shared/components/ConfirmButton'
import {QUERIES_TABLE} from 'src/admin/constants/tableSizing'

const QueryRow = ({query, onKill}) => {
  const {database, duration} = query
  const wrappedKill = () => {
    onKill(query.id)
  }

  return (
    <tr>
      <td
        style={{width: `${QUERIES_TABLE.colDatabase}px`}}
        className="monotype"
      >
        {database}
      </td>
      <td>
        <code>{query.query}</code>
      </td>
      <td style={{width: `${QUERIES_TABLE.colRunning}px`}} className="monotype">
        {duration}
      </td>
      <td
        style={{width: `${QUERIES_TABLE.colKillQuery}px`}}
        className="text-right"
      >
        <ConfirmButton
          text="Kill"
          confirmAction={wrappedKill}
          size="btn-xs"
          type="btn-danger"
          customClass="table--show-on-row-hover"
        />
      </td>
    </tr>
  )
}

const {func, shape} = PropTypes

QueryRow.propTypes = {
  query: shape().isRequired,
  onKill: func.isRequired,
}

export default QueryRow
{'fraction_non_alphanumeric': 0.13664174031271245, 'fraction_numerical': 0.0, 'mean_word_length': 2.101159114857745, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 36, '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': '2997862', 'n_tokens_mistral': 931, 'n_tokens_neox': 923, 'n_words': 161}