<commit_before>import React from 'react';
import moment from 'moment';

import PropTypes from 'prop-types';

import { AccountModal } from './AccountModal';

class ConnectedApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { modalOpen: false, detailsOpen: false };
  }

  closeModal = () => {
    this.setState({ modalOpen: false });
  };

  openModal = () => {
    this.setState({ modalOpen: true });
  };

  confirmDelete = () => {
    this.props.confirmDelete(this.props.id);
    this.closeModal();
  };

  toggleDetails = () => {
    this.setState({ detailsOpen: !this.state.detailsOpen });
  };

  render() {
    const { href, logo, title, created, grants } = this.props.attributes;
    const cssPrefix = 'va-connected-acct';
    const toggled = this.state.detailsOpen
      ? `${cssPrefix}-details-toggled`
      : '';
    const lastClass = this.props.isLast ? `${cssPrefix}-last-row` : '';
    return (
      <tr>
        <table className={`${cssPrefix}-row-table ${lastClass}`}>
          <tbody>
            <tr
              className={`${cssPrefix}-row ${toggled}`}
              onClick={this.toggleDetails}
            >
              <th scope="row">
                <a href={href} className="no-external-icon">
                  <img src={logo} alt={`${title} logo`} width="100" />
                </a>
              </th>
              <th>
                Connected on {moment(created).format('MMMM D, YYYY h:mm A')}
              </th>
              <th className={`${cssPrefix}-row-details `}>
                <a className={`${cssPrefix}-row-details-toggle`} href="#">
                  Details
                  <i
                    className={`fa fa-chevron-${
                      this.state.detailsOpen ? 'up' : 'down'
                    }`}
                  />
                </a>
                <AccountModal
                  appName={title}
                  modalOpen={this.state.modalOpen}
                  onCloseModal={this.closeModal}
                  onConfirmDelete={this.confirmDelete}
                />
              </th>
            </tr>
            {this.state.detailsOpen && (
              <tr className={`${cssPrefix}-row-details-block`}>
                <th colSpan="3">
                  <div className={`${cssPrefix}-row-details-block-wrapper`}>
                    <div className={`${cssPrefix}-row-details-block-content`}>
                      <p>
                        <a href={href}>{title}</a>
                        &nbsp;can view your:
                        <button
                          className="usa-button-primary"
                          onClick={this.openModal}
                        >
                          Disconnect
                        </button>
                      </p>
                      <ul>
                        {grants.map((a, idx) => (
                          <li key={idx}>{a.title}</li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </th>
              </tr>
            )}
          </tbody>
        </table>
      </tr>
    );
  }
}

ConnectedApp.propTypes = {<commit_msg>Add aria label to disconnect button (#9688)<commit_after>import React from 'react';
import moment from 'moment';

import PropTypes from 'prop-types';

import { AccountModal } from './AccountModal';

class ConnectedApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { modalOpen: false, detailsOpen: false };
  }

  closeModal = () => {
    this.setState({ modalOpen: false });
  };

  openModal = () => {
    this.setState({ modalOpen: true });
  };

  confirmDelete = () => {
    this.props.confirmDelete(this.props.id);
    this.closeModal();
  };

  toggleDetails = () => {
    this.setState({ detailsOpen: !this.state.detailsOpen });
  };

  render() {
    const { href, logo, title, created, grants } = this.props.attributes;
    const cssPrefix = 'va-connected-acct';
    const toggled = this.state.detailsOpen
      ? `${cssPrefix}-details-toggled`
      : '';
    const lastClass = this.props.isLast ? `${cssPrefix}-last-row` : '';
    return (
      <tr>
        <table className={`${cssPrefix}-row-table ${lastClass}`}>
          <tbody>
            <tr
              className={`${cssPrefix}-row ${toggled}`}
              onClick={this.toggleDetails}
            >
              <th scope="row">
                <a href={href} className="no-external-icon">
                  <img src={logo} alt={`${title} logo`} width="100" />
                </a>
              </th>
              <th>
                Connected on {moment(created).format('MMMM D, YYYY h:mm A')}
              </th>
              <th className={`${cssPrefix}-row-details `}>
                <a className={`${cssPrefix}-row-details-toggle`} href="#">
                  Details
                  <i
                    className={`fa fa-chevron-${
                      this.state.detailsOpen ? 'up' : 'down'
                    }`}
                  />
                </a>
                <AccountModal
                  appName={title}
                  modalOpen={this.state.modalOpen}
                  onCloseModal={this.closeModal}
                  onConfirmDelete={this.confirmDelete}
                />
              </th>
            </tr>
            {this.state.detailsOpen && (
              <tr className={`${cssPrefix}-row-details-block`}>
                <th colSpan="3">
                  <div className={`${cssPrefix}-row-details-block-wrapper`}>
                    <div className={`${cssPrefix}-row-details-block-content`}>
                      <p>
                        <a href={href}>{title}</a>
                        &nbsp;can view your:
                        <button
                          aria-label={`Disconnect ${title} from your account`}
                          className="usa-button-primary"
                          onClick={this.openModal}
                        >
                          Disconnect
                        </button>
                      </p>
                      <ul>
                        {grants.map((a, idx) => (
                          <li key={idx}>{a.title}</li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </th>
              </tr>
            )}
          </tbody>
        </table>
      </tr>
    );
  }
}

ConnectedApp.propTypes = {
{'fraction_non_alphanumeric': 0.14467823682998004, 'fraction_numerical': 0.0018430348640761788, 'mean_word_length': 1.247842595788747, 'pattern_counts': {'":': 0, '<': 81, '<?xml version=': 0, '>': 91, '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': '7062610', 'n_tokens_mistral': 1782, 'n_tokens_neox': 1710, 'n_words': 305}