<commit_before>import * as React from 'react'
import { ButtonGroup } from '../lib/button-group'
import { Button } from '../lib/button'
import { Ref } from '../lib/ref'
import { Octicon, OcticonSymbol } from '../octicons'
import { Branch } from '../../models/branch'

interface INewCommitsBannerProps {
  readonly numCommits: number
  readonly branch: Branch
}

export class NewCommitsBanner extends React.Component<
  INewCommitsBannerProps,
  {}
> {
  public render() {
    return (
      <div className="notification-banner diverge-banner">
        <div className="notification-banner-content">
          <p>
            Your branch is <strong>{this.props.numCommits} commits</strong>{' '}
            behind <Ref>{this.props.branch.name}</Ref>
          </p>

          <a className="close" aria-label="Dismiss banner">
            <Octicon symbol={OcticonSymbol.x} />
          </a>
        </div>

        <ButtonGroup>
          <Button type="submit" onClick={this.noOp}>
            Compare
          </Button>

          <Button onClick={this.noOp}>Merge...</Button>
        </ButtonGroup>
      </div>
    )
  }

  private noOp = () => {}
}<commit_msg>Pass event handlers as props<commit_after>import * as React from 'react'
import { ButtonGroup } from '../lib/button-group'
import { Button } from '../lib/button'
import { Ref } from '../lib/ref'
import { Octicon, OcticonSymbol } from '../octicons'
import { Branch } from '../../models/branch'

interface INewCommitsBannerProps {
  readonly numCommits: number
  readonly branch: Branch
  readonly onCompareClicked: () => void
  readonly onMergeClicked: () => void
}

export class NewCommitsBanner extends React.Component<
  INewCommitsBannerProps,
  {}
> {
  public render() {
    return (
      <div className="notification-banner diverge-banner">
        <div className="notification-banner-content">
          <p>
            Your branch is <strong>{this.props.numCommits} commits</strong>{' '}
            behind <Ref>{this.props.branch.name}</Ref>
          </p>

          <a className="close" aria-label="Dismiss banner">
            <Octicon symbol={OcticonSymbol.x} />
          </a>
        </div>

        <ButtonGroup>
          <Button type="submit" onClick={this.props.onCompareClicked}>
            Compare
          </Button>

          <Button onClick={this.props.onMergeClicked}>Merge...</Button>
        </ButtonGroup>
      </div>
    )
  }
}
{'fraction_non_alphanumeric': 0.14327002477291495, 'fraction_numerical': 0.0, 'mean_word_length': 2.4713467048710602, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 46, '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': '4220981', 'n_tokens_mistral': 712, 'n_tokens_neox': 700, 'n_words': 162}