<commit_before>import React from 'react';
import shallowCompare from 'react-addons-shallow-compare';

import Spinner from '../../shared/Spinner';
import Chooser from '../../shared/Chooser';
import Media from '../../shared/Media';
import Dropdown from '../../shared/Dropdown';

class MemberRole extends React.Component {
  static displayName = "Team.Pipelines.Role";

  static propTypes = {
    teamMember: React.PropTypes.shape({
      admin: React.PropTypes.bool.isRequired
    }).isRequired,
    onRoleChange: React.PropTypes.func.isRequired,
    savingNewRole: React.PropTypes.string
  };

  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

  render() {
    const label = this.props.teamMember.admin ? "Team Admin" : "Member";
    const role = this.props.teamMember.admin ? "admin" : "member";
    const nib = this.props.teamMember.admin ? 3 : 15;

    return (
      <Dropdown width={270} nibOffset={nib}>
        <div style={{ width: 87 }} className="right-align">
          <div className="underline-dotted cursor-pointer inline-block regular">{label}</div>
        </div>

        <Chooser selected={role} onSelect={this.props.onRoleChange}>
          <Chooser.Option value="admin" className="btn block hover-bg-silver">
            <Media align="top">
              <Media.Image>{this.renderIcon(role, "admin")}</Media.Image>
              <Media.Description>
                <span className="semi-bold block">Team Admin</span>
                <small className="regular dark-gray">Manage members and pipelines with unrestricted access</small>
              </Media.Description>
            </Media>
          </Chooser.Option>

          <Chooser.Option value="member" className="btn block hover-bg-silver">
            <Media align="top">
              <Media.Image>{this.renderIcon(role, "member")}</Media.Image>
              <Media.Description>
                <span className="semi-bold block">Member</span>
                <small className="regular dark-gray">Create and access pipelines based on each pipeline’s permissions</small>
              </Media.Description>
            </Media>
          </Chooser.Option>
        </Chooser>
      </Dropdown>
    );
  }

  renderIcon(currentRole, roleOption) {
    const width = 25;

    if (this.props.savingNewRole === roleOption) {
      return (
        <div style={{ width: width }}>
          <Spinner className="fit absolute" size={16} style={{ marginTop: 3 }} color={false} />
        </div>
      );
    } else if (currentRole === roleOption) {
      return (<commit_msg>Remove Media from MemberRole<commit_after>import React from 'react';
import shallowCompare from 'react-addons-shallow-compare';

import Spinner from '../../shared/Spinner';
import Chooser from '../../shared/Chooser';
import Dropdown from '../../shared/Dropdown';

class MemberRole extends React.Component {
  static displayName = "Team.Pipelines.Role";

  static propTypes = {
    teamMember: React.PropTypes.shape({
      admin: React.PropTypes.bool.isRequired
    }).isRequired,
    onRoleChange: React.PropTypes.func.isRequired,
    savingNewRole: React.PropTypes.string
  };

  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

  render() {
    const label = this.props.teamMember.admin ? "Team Admin" : "Member";
    const role = this.props.teamMember.admin ? "admin" : "member";
    const nib = this.props.teamMember.admin ? 3 : 15;

    return (
      <Dropdown width={270} nibOffset={nib}>
        <div style={{ width: 87 }} className="right-align">
          <div className="underline-dotted cursor-pointer inline-block regular">{label}</div>
        </div>

        <Chooser selected={role} onSelect={this.props.onRoleChange}>
          <Chooser.Option value="admin" className="btn block hover-bg-silver">
            <div className="flex items-top">
              <div className="flex-none">{this.renderIcon(role, "admin")}</div>
              <div>
                <span className="semi-bold block">Team Admin</span>
                <small className="regular dark-gray">Manage members and pipelines with unrestricted access</small>
              </div>
            </div>
          </Chooser.Option>

          <Chooser.Option value="member" className="btn block hover-bg-silver">
            <div className="flex items-top">
              <div className="flex-none">{this.renderIcon(role, "member")}</div>
              <div>
                <span className="semi-bold block">Member</span>
                <small className="regular dark-gray">Create and access pipelines based on each pipeline’s permissions</small>
              </div>
            </div>
          </Chooser.Option>
        </Chooser>
      </Dropdown>
    );
  }

  renderIcon(currentRole, roleOption) {
    const width = 25;

    if (this.props.savingNewRole === roleOption) {
      return (
        <div style={{ width: width }}>
          <Spinner className="fit absolute" size={16} style={{ marginTop: 3 }} color={false} />
        </div>
      );
    } else if (currentRole === roleOption) {
      return (
{'fraction_non_alphanumeric': 0.13994169096209913, 'fraction_numerical': 0.005053449951409135, 'mean_word_length': 2.6011196641007697, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 73, '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': '3292598', 'n_tokens_mistral': 1478, 'n_tokens_neox': 1413, 'n_words': 333}