<commit_before>import * as React from 'react';
import { connect, Dispatch } from 'react-redux';
import { Layout, AccountConnection } from '@shopify/polaris';
import {
  connectAccountRequest,
  ConnectAccountRequest
} from '../../actions/connectAccount';

export interface Handlers {
  readonly onConnect: () => void;
}

class DisconnectedAccount extends React.PureComponent<Handlers, never> {
  public render() {
    return (
      <Layout.AnnotatedSection
        title="Account"
        description="Connect Mturk Engine to your Amazon MTurk account."
      >
        <AccountConnection
          action={{
            content: 'Connect',
            onAction: this.props.onConnect
          }}
          details="No account connected"
          termsOfService={
            <p>
              By clicking Connect, you are accepting Sample’s terms and
              conditions.
            </p>
          }
        />
      </Layout.AnnotatedSection>
    );
  }
}

const mapDispatch = (dispatch: Dispatch<ConnectAccountRequest>): Handlers => ({
  onConnect: () => dispatch(connectAccountRequest())
});

export default connect(null, mapDispatch)(DisconnectedAccount);<commit_msg>DisconnectedAccount is now a NonIdealState.<commit_after>import * as React from 'react';
import { connect, Dispatch } from 'react-redux';
import { NonIdealState, Button } from '@blueprintjs/core';
import {
  connectAccountRequest,
  ConnectAccountRequest
} from '../../actions/connectAccount';

export interface Handlers {
  readonly onConnect: () => void;
}

class DisconnectedAccount extends React.PureComponent<Handlers, never> {
  public render() {
    return (
      <NonIdealState
        title="You can connect Mturk Engine to your Amazon MTurk account."
        description={`Connecting your account let's you track your work. 
        You will need to already be signed in to Mturk through Amazon for it to 
        work, however, because Mturk Engine does not store your log in 
        credentials and cannot log in for you.`}
        visual="user"
        action={<Button onClick={this.props.onConnect}>Connect Account</Button>}
      />
    );
  }
}

const mapDispatch = (dispatch: Dispatch<ConnectAccountRequest>): Handlers => ({
  onConnect: () => dispatch(connectAccountRequest())
});

export default connect(null, mapDispatch)(DisconnectedAccount);
{'fraction_non_alphanumeric': 0.10533049040511727, 'fraction_numerical': 0.0, 'mean_word_length': 3.152212389380531, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 21, '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': '1682883', 'n_tokens_mistral': 620, 'n_tokens_neox': 612, 'n_words': 183}