<commit_before>import React, {PropTypes, Component} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'

import OnClickOutside from 'react-onclickoutside'

import Dropdown from 'shared/components/Dropdown'
import DeleteConfirmButtons from 'shared/components/DeleteConfirmButtons'
import TemplateQueryBuilder
  from 'src/dashboards/components/TemplateQueryBuilder'

import {
  runTemplateVariableQuery as runTemplateVariableQueryAJAX,
} from 'src/dashboards/apis'

import parsers from 'shared/parsing'

import {TEMPLATE_TYPES} from 'src/dashboards/constants'
import generateTemplateVariableQuery
  from 'src/dashboards/utils/templateVariableQueryGenerator'

import {publishAutoDismissingNotification} from 'shared/dispatchers'

const RowValues = ({
  selectedType,
  values = [],
  isEditing,
  onStartEdit,
  autoFocusTarget,
}) => {
  const _values = values.map(({value}) => value).join(', ')

  if (selectedType === 'csv') {
    return (
      <TableInput
        name="values"
        defaultValue={_values}
        isEditing={isEditing}
        onStartEdit={onStartEdit}
        autoFocusTarget={autoFocusTarget}
      />
    )
  }
  return values.length
    ? <span>{_values}</span>
    : <span>(No values to display)</span>
}

const RowButtons = ({
  onStartEdit,
  isEditing,
  onCancelEdit,
  onDelete,
  id,
  selectedType,
}) => {
  if (isEditing) {
    return (
      <div>
        <button className="btn btn-sm btn-success" type="submit">
          {selectedType === 'csv' ? 'Save Values' : 'Get Values'}
        </button>
        <button
          className="btn btn-sm btn-primary"
          type="button"
          onClick={onCancelEdit}
        >
          Cancel
        </button>
      </div>
    )
  }
  return (
    <div>
      <button
        className="btn btn-sm btn-info"
        type="button"
        onClick={e => {
          // prevent subsequent 'onSubmit' that is caused by an unknown source,
          // possible onClickOutside, after 'onClick'. this allows
          // us to enter 'isEditing' mode
          e.preventDefault()
          onStartEdit('tempVar')
        }}
      >
        Edit
      </button>
      <DeleteConfirmButtons onDelete={() => onDelete(id)} />
    </div>
  )
}

const TemplateVariableRow = ({
  template: {id, tempVar, values},
  isEditing,
  selectedType,
  selectedDatabase,
  selectedMeasurement,
  onSelectType,
  onSelectDatabase,
  onSelectMeasurement,
  selectedTagKey,
  onSelectTagKey,
  onStartEdit,
  onCancelEdit,
  autoFocusTarget,
  onSubmit,
  onDelete,
}) => (
  <form
    className="tr"
    onSubmit={onSubmit({
      selectedType,
      selectedDatabase,
      selectedMeasurement,
      selectedTagKey,
    })}
  >
    <TableInput
      name="tempVar"
      defaultValue={tempVar}
      isEditing={isEditing}
      onStartEdit={onStartEdit}
      autoFocusTarget={autoFocusTarget}
    />
    <div className="td">
      <Dropdown
        items={TEMPLATE_TYPES}
        onChoose={onSelectType}
        onClick={() => onStartEdit(null)}
        selected={TEMPLATE_TYPES.find(t => t.type === selectedType).text}
        className={'template-variable--dropdown'}
      />
    </div>
    <div className="td">
      <TemplateQueryBuilder
        onSelectDatabase={onSelectDatabase}
        selectedType={selectedType}
        selectedDatabase={selectedDatabase}
        onSelectMeasurement={onSelectMeasurement}
        selectedMeasurement={selectedMeasurement}
        selectedTagKey={selectedTagKey}
        onSelectTagKey={onSelectTagKey}
        onStartEdit={onStartEdit}
      />
    </div>
    <div className="td">
      <RowValues
        selectedType={selectedType}
        values={values}
        isEditing={isEditing}
        onStartEdit={onStartEdit}
        autoFocusTarget={autoFocusTarget}
      />
    </div>
    <div className="td" style={{display: 'flex'}}>
      <RowButtons
        onStartEdit={onStartEdit}
        isEditing={isEditing}
        onCancelEdit={onCancelEdit}
        onDelete={onDelete}
        id={id}<commit_msg>Fix styling on RowValues component<commit_after>import React, {PropTypes, Component} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'

import OnClickOutside from 'react-onclickoutside'

import Dropdown from 'shared/components/Dropdown'
import DeleteConfirmButtons from 'shared/components/DeleteConfirmButtons'
import TemplateQueryBuilder
  from 'src/dashboards/components/TemplateQueryBuilder'

import {
  runTemplateVariableQuery as runTemplateVariableQueryAJAX,
} from 'src/dashboards/apis'

import parsers from 'shared/parsing'

import {TEMPLATE_TYPES} from 'src/dashboards/constants'
import generateTemplateVariableQuery
  from 'src/dashboards/utils/templateVariableQueryGenerator'

import {publishAutoDismissingNotification} from 'shared/dispatchers'

const RowValues = ({
  selectedType,
  values = [],
  isEditing,
  onStartEdit,
  autoFocusTarget,
}) => {
  const _values = values.map(({value}) => value).join(', ')

  if (selectedType === 'csv') {
    return (
      <TableInput
        name="values"
        defaultValue={_values}
        isEditing={isEditing}
        onStartEdit={onStartEdit}
        autoFocusTarget={autoFocusTarget}
      />
    )
  }
  return (
    <div className="td">
      {values.length
        ? <span>{_values}</span>
        : <span>(No values to display)</span>}
    </div>
  )
}

const RowButtons = ({
  onStartEdit,
  isEditing,
  onCancelEdit,
  onDelete,
  id,
  selectedType,
}) => {
  if (isEditing) {
    return (
      <div>
        <button className="btn btn-sm btn-success" type="submit">
          {selectedType === 'csv' ? 'Save Values' : 'Get Values'}
        </button>
        <button
          className="btn btn-sm btn-primary"
          type="button"
          onClick={onCancelEdit}
        >
          Cancel
        </button>
      </div>
    )
  }
  return (
    <div>
      <button
        className="btn btn-sm btn-info"
        type="button"
        onClick={e => {
          // prevent subsequent 'onSubmit' that is caused by an unknown source,
          // possible onClickOutside, after 'onClick'. this allows
          // us to enter 'isEditing' mode
          e.preventDefault()
          onStartEdit('tempVar')
        }}
      >
        Edit
      </button>
      <DeleteConfirmButtons onDelete={() => onDelete(id)} />
    </div>
  )
}

const TemplateVariableRow = ({
  template: {id, tempVar, values},
  isEditing,
  selectedType,
  selectedDatabase,
  selectedMeasurement,
  onSelectType,
  onSelectDatabase,
  onSelectMeasurement,
  selectedTagKey,
  onSelectTagKey,
  onStartEdit,
  onCancelEdit,
  autoFocusTarget,
  onSubmit,
  onDelete,
}) => (
  <form
    className="tr"
    onSubmit={onSubmit({
      selectedType,
      selectedDatabase,
      selectedMeasurement,
      selectedTagKey,
    })}
  >
    <TableInput
      name="tempVar"
      defaultValue={tempVar}
      isEditing={isEditing}
      onStartEdit={onStartEdit}
      autoFocusTarget={autoFocusTarget}
    />
    <div className="td">
      <Dropdown
        items={TEMPLATE_TYPES}
        onChoose={onSelectType}
        onClick={() => onStartEdit(null)}
        selected={TEMPLATE_TYPES.find(t => t.type === selectedType).text}
        className={'template-variable--dropdown'}
      />
    </div>
    <div className="td">
      <TemplateQueryBuilder
        onSelectDatabase={onSelectDatabase}
        selectedType={selectedType}
        selectedDatabase={selectedDatabase}
        onSelectMeasurement={onSelectMeasurement}
        selectedMeasurement={selectedMeasurement}
        selectedTagKey={selectedTagKey}
        onSelectTagKey={onSelectTagKey}
        onStartEdit={onStartEdit}
      />
    </div>
    <RowValues
      selectedType={selectedType}
      values={values}
      isEditing={isEditing}
      onStartEdit={onStartEdit}
      autoFocusTarget={autoFocusTarget}
    />
    <div className="td" style={{display: 'flex'}}>
      <RowButtons
        onStartEdit={onStartEdit}
        isEditing={isEditing}
        onCancelEdit={onCancelEdit}
        onDelete={onDelete}
        id={id}
{'fraction_non_alphanumeric': 0.11521926053310404, 'fraction_numerical': 0.0, 'mean_word_length': 2.831529411764706, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 75, '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': '3866001', 'n_tokens_mistral': 2415, 'n_tokens_neox': 2426, 'n_words': 455}