<commit_before>import PropTypes from 'prop-types';
import track from 'react-tracking';
import classNames from 'classnames/bind';
import { connect } from 'react-redux';
import { showModalAction } from 'controllers/modal';
import { injectIntl, defineMessages, intlShape } from 'react-intl';
import { reduxForm } from 'redux-form';
import { activeProjectRoleSelector, userAccountRoleSelector } from 'controllers/user';
import { canInviteInternalUser } from 'common/utils/permissions';
import { GhostButton } from 'components/buttons/ghostButton';
import { FieldProvider } from 'components/fields/fieldProvider';
import { InputSearch } from 'components/inputs/inputSearch';
import { MEMBERS_PAGE_EVENTS } from 'components/main/analytics/events';
import PermissionMapIcon from 'common/img/permission-inline.svg';
import InviteUserIcon from 'common/img/invite-inline.svg';
import styles from './membersPageToolbar.scss';

const cx = classNames.bind(styles);

const messages = defineMessages({
  permissionMap: {
    id: 'MembersPageToolbar.permissionMap',
    defaultMessage: 'Permission map',
  },
  inviteUser: {
    id: 'MembersPageToolbar.inviteUser',
    defaultMessage: 'Invite user',
  },
  searchInputPlaceholder: {
    id: 'MembersPageToolbar.searchByName',
    defaultMessage: 'Search by name',
  },
});
@connect(
  (state) => ({
    projectRole: activeProjectRoleSelector(state),
    accountRole: userAccountRoleSelector(state),
  }),
  {
    showModalAction,
  },
)
@reduxForm({
  form: 'filterSearch',
  enableReinitialize: true,
})
@injectIntl
@track()
export class MembersPageToolbar extends React.Component {
  static propTypes = {
    intl: intlShape,
    showModalAction: PropTypes.func.isRequired,
    onInvite: PropTypes.func,
    projectRole: PropTypes.string,
    accountRole: PropTypes.string,
    tracking: PropTypes.shape({
      trackEvent: PropTypes.func,
      getTrackingData: PropTypes.func,
    }).isRequired,
  };

  static defaultProps = {
    intl: {},
    onInvite: () => {},
    projectRole: '',
    accountRole: '',
  };

  showInviteUserModal = () => {
    this.props.tracking.trackEvent(MEMBERS_PAGE_EVENTS.INVITE_USER_CLICK);
    this.props.showModalAction({ id: 'inviteUserModal', data: { onInvite: this.props.onInvite } });
  };

  showPermissionMapModal = () => {
    this.props.tracking.trackEvent(MEMBERS_PAGE_EVENTS.PERMISSION_MAP_CLICK);
    this.props.showModalAction({ id: 'permissionMapModal' });
  };

  render() {
    return (
      <div className={cx('members-page-toolbar')}>
        <div className={cx('search-input')}>
          <FieldProvider name="filter">
            <InputSearch<commit_msg>EPMRPP-40414: React. Members. Restriction for search field is 256 instead of 128 symbols<commit_after>import PropTypes from 'prop-types';
import track from 'react-tracking';
import classNames from 'classnames/bind';
import { connect } from 'react-redux';
import { showModalAction } from 'controllers/modal';
import { injectIntl, defineMessages, intlShape } from 'react-intl';
import { reduxForm } from 'redux-form';
import { activeProjectRoleSelector, userAccountRoleSelector } from 'controllers/user';
import { canInviteInternalUser } from 'common/utils/permissions';
import { GhostButton } from 'components/buttons/ghostButton';
import { FieldProvider } from 'components/fields/fieldProvider';
import { InputSearch } from 'components/inputs/inputSearch';
import { MEMBERS_PAGE_EVENTS } from 'components/main/analytics/events';
import PermissionMapIcon from 'common/img/permission-inline.svg';
import InviteUserIcon from 'common/img/invite-inline.svg';
import styles from './membersPageToolbar.scss';

const cx = classNames.bind(styles);

const messages = defineMessages({
  permissionMap: {
    id: 'MembersPageToolbar.permissionMap',
    defaultMessage: 'Permission map',
  },
  inviteUser: {
    id: 'MembersPageToolbar.inviteUser',
    defaultMessage: 'Invite user',
  },
  searchInputPlaceholder: {
    id: 'MembersPageToolbar.searchByName',
    defaultMessage: 'Search by name',
  },
});
@connect(
  (state) => ({
    projectRole: activeProjectRoleSelector(state),
    accountRole: userAccountRoleSelector(state),
  }),
  {
    showModalAction,
  },
)
@reduxForm({
  form: 'filterSearch',
  enableReinitialize: true,
})
@injectIntl
@track()
export class MembersPageToolbar extends React.Component {
  static propTypes = {
    intl: intlShape,
    showModalAction: PropTypes.func.isRequired,
    onInvite: PropTypes.func,
    projectRole: PropTypes.string,
    accountRole: PropTypes.string,
    tracking: PropTypes.shape({
      trackEvent: PropTypes.func,
      getTrackingData: PropTypes.func,
    }).isRequired,
  };

  static defaultProps = {
    intl: {},
    onInvite: () => {},
    projectRole: '',
    accountRole: '',
  };

  showInviteUserModal = () => {
    this.props.tracking.trackEvent(MEMBERS_PAGE_EVENTS.INVITE_USER_CLICK);
    this.props.showModalAction({ id: 'inviteUserModal', data: { onInvite: this.props.onInvite } });
  };

  showPermissionMapModal = () => {
    this.props.tracking.trackEvent(MEMBERS_PAGE_EVENTS.PERMISSION_MAP_CLICK);
    this.props.showModalAction({ id: 'permissionMapModal' });
  };

  render() {
    return (
      <div className={cx('members-page-toolbar')}>
        <div className={cx('search-input')}>
          <FieldProvider name="filter">
            <InputSearch
              maxLength="128"
{'fraction_non_alphanumeric': 0.1273401297497683, 'fraction_numerical': 0.0025949953660797036, 'mean_word_length': 4.456016177957533, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 17, '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': '3438501', 'n_tokens_mistral': 1626, 'n_tokens_neox': 1630, 'n_words': 328}