<commit_before>import _ from 'lodash';
// We have to remove node_modules/react to avoid having multiple copies loaded.
// eslint-disable-next-line import/no-unresolved
import React, { PropTypes } from 'react';
import { Row, Col, Dropdown } from 'react-bootstrap';
import DropdownMenu from '@folio/stripes-components/lib/DropdownMenu';
import Button from '@folio/stripes-components/lib/Button';
import Icon from '@folio/stripes-components/lib/Icon';
import List from '@folio/stripes-components/lib/List';
import IfPermission from '@folio/stripes-components/lib/IfPermission';

import PermissionList from '../PermissionList';
import css from './RenderPermissions.css';

class RenderPermissions extends React.Component {
  static propTypes = {
    heading: PropTypes.string.isRequired,
    permToRead: PropTypes.string.isRequired,
    permToDelete: PropTypes.string.isRequired,
    permToModify: PropTypes.string.isRequired,
    availablePermissions: PropTypes.arrayOf(PropTypes.object),
    listedPermissions: PropTypes.arrayOf(PropTypes.object),
    addPermission: PropTypes.func.isRequired,
    removePermission: PropTypes.func.isRequired,
    stripes: PropTypes.shape({
      hasPerm: PropTypes.func.isRequired,
    }).isRequired,
  };

  constructor(props) {
    super(props);

    this.state = {
      addPermissionOpen: false,
      searchTerm: '',
    };

    this.onChangeSearch = this.onChangeSearch.bind(this);
    this.onToggleAddPermDD = this.onToggleAddPermDD.bind(this);
    this.isPermAvailable = this.isPermAvailable.bind(this);
    this.addPermissionHandler = this.addPermissionHandler.bind(this);
  }

  onChangeSearch(e) {
    const searchTerm = e.target.value;
    this.setState({ searchTerm });
  }

  onToggleAddPermDD() {
    const isOpen = this.state.addPermissionOpen;
    this.setState({
      addPermissionOpen: !isOpen,
    });
  }

  addPermissionHandler(perm) {
    this.props.addPermission(perm);
    this.onToggleAddPermDD();
  }

  isPermAvailable(perm) {
    if ((this.props.listedPermissions || []).some(x => x.permissionName === perm.permissionName))
      return false;

    return _.includes(perm.displayName || perm.permissionName,
                      this.state.searchTerm.toLowerCase());
  }

  render() {
    if (!this.props.stripes.hasPerm(this.props.permToRead))
      return null;

    const permissionsDD = (
      <PermissionList
        items={_.filter(this.props.availablePermissions, this.isPermAvailable)}
        onClickItem={this.addPermissionHandler}
        onChangeSearch={this.onChangeSearch}
        stripes={this.props.stripes}
      />
    );

    const listFormatter = item => (
      <li key={item.permissionName} >
        {item.displayName || item.permissionName}
        <Button
          buttonStyle="fieldControl"
          align="end"
          type="button"
          onClick={() => this.props.removePermission(item)}
          aria-label={`Remove Permission: ${item.permissionName}`}
          title="Remove Permission"
        >
          <IfPermission {...this.props} perm={this.props.permToDelete}>
            <Icon icon="hollowX" iconClassName={css.removePermissionIcon} iconRootClass={css.removePermissionButton} />
          </IfPermission>
        </Button>
      </li>
    );

    return (
      <div style={{ marginBottom: '1rem' }}>
        <hr />
        <Row>
          <Col xs={5}>
            <h3 className="marginTop0">{this.props.heading}</h3>
          </Col>
          {/* <Col xs={4} sm={3}>
            <TextField
              rounded
              endControl={<Button buttonStyle="fieldControl"><Icon icon='clearX'/></Button>}
              startControl={<Icon icon='search'/>}
              placeholder="Search"
              fullWidth
              />
          </Col>*/}
          <Col xs={7}>
            <IfPermission {...this.props} perm={this.props.permToModify}>
              <Dropdown open={this.state ? this.state.addPermissionOpen : false} pullRight onToggle={this.onToggleAddPermDD} id="AddPermissionDropdown" style={{ float: 'right' }}>
                <Button align="end" bottomMargin0 bsRole="toggle" aria-haspopup="true">&#43; Add Permission</Button>
                <DropdownMenu bsRole="menu" onToggle={this.onToggleAddPermDD} aria-label="available permissions" width="40em">{permissionsDD}</DropdownMenu>
              </Dropdown>
            </IfPermission>
          </Col>
        </Row>
        <br />
        <List itemFormatter={listFormatter} items={this.props.listedPermissions || []} isEmptyMessage="This user has no permissions applied." />
      </div>
    );
  }
}

export default RenderPermissions;
<commit_msg>IfPermission now wraps entire Button, not just contained Icon<commit_after>import _ from 'lodash';
// We have to remove node_modules/react to avoid having multiple copies loaded.
// eslint-disable-next-line import/no-unresolved
import React, { PropTypes } from 'react';
import { Row, Col, Dropdown } from 'react-bootstrap';
import DropdownMenu from '@folio/stripes-components/lib/DropdownMenu';
import Button from '@folio/stripes-components/lib/Button';
import Icon from '@folio/stripes-components/lib/Icon';
import List from '@folio/stripes-components/lib/List';
import IfPermission from '@folio/stripes-components/lib/IfPermission';

import PermissionList from '../PermissionList';
import css from './RenderPermissions.css';

class RenderPermissions extends React.Component {
  static propTypes = {
    heading: PropTypes.string.isRequired,
    permToRead: PropTypes.string.isRequired,
    permToDelete: PropTypes.string.isRequired,
    permToModify: PropTypes.string.isRequired,
    availablePermissions: PropTypes.arrayOf(PropTypes.object),
    listedPermissions: PropTypes.arrayOf(PropTypes.object),
    addPermission: PropTypes.func.isRequired,
    removePermission: PropTypes.func.isRequired,
    stripes: PropTypes.shape({
      hasPerm: PropTypes.func.isRequired,
    }).isRequired,
  };

  constructor(props) {
    super(props);

    this.state = {
      addPermissionOpen: false,
      searchTerm: '',
    };

    this.onChangeSearch = this.onChangeSearch.bind(this);
    this.onToggleAddPermDD = this.onToggleAddPermDD.bind(this);
    this.isPermAvailable = this.isPermAvailable.bind(this);
    this.addPermissionHandler = this.addPermissionHandler.bind(this);
  }

  onChangeSearch(e) {
    const searchTerm = e.target.value;
    this.setState({ searchTerm });
  }

  onToggleAddPermDD() {
    const isOpen = this.state.addPermissionOpen;
    this.setState({
      addPermissionOpen: !isOpen,
    });
  }

  addPermissionHandler(perm) {
    this.props.addPermission(perm);
    this.onToggleAddPermDD();
  }

  isPermAvailable(perm) {
    if ((this.props.listedPermissions || []).some(x => x.permissionName === perm.permissionName))
      return false;

    return _.includes(perm.displayName || perm.permissionName,
                      this.state.searchTerm.toLowerCase());
  }

  render() {
    if (!this.props.stripes.hasPerm(this.props.permToRead))
      return null;

    const permissionsDD = (
      <PermissionList
        items={_.filter(this.props.availablePermissions, this.isPermAvailable)}
        onClickItem={this.addPermissionHandler}
        onChangeSearch={this.onChangeSearch}
        stripes={this.props.stripes}
      />
    );

    const listFormatter = item => (
      <li key={item.permissionName} >
        {item.displayName || item.permissionName}
        <IfPermission {...this.props} perm={this.props.permToDelete}>
          <Button
            buttonStyle="fieldControl"
            align="end"
            type="button"
            onClick={() => this.props.removePermission(item)}
            aria-label={`Remove Permission: ${item.permissionName}`}
            title="Remove Permission"
          >
            <Icon icon="hollowX" iconClassName={css.removePermissionIcon} iconRootClass={css.removePermissionButton} />
          </Button>
        </IfPermission>
      </li>
    );

    return (
      <div style={{ marginBottom: '1rem' }}>
        <hr />
        <Row>
          <Col xs={5}>
            <h3 className="marginTop0">{this.props.heading}</h3>
          </Col>
          {/* <Col xs={4} sm={3}>
            <TextField
              rounded
              endControl={<Button buttonStyle="fieldControl"><Icon icon='clearX'/></Button>}
              startControl={<Icon icon='search'/>}
              placeholder="Search"
              fullWidth
              />
          </Col>*/}
          <Col xs={7}>
            <IfPermission {...this.props} perm={this.props.permToModify}>
              <Dropdown open={this.state ? this.state.addPermissionOpen : false} pullRight onToggle={this.onToggleAddPermDD} id="AddPermissionDropdown" style={{ float: 'right' }}>
                <Button align="end" bottomMargin0 bsRole="toggle" aria-haspopup="true">&#43; Add Permission</Button>
                <DropdownMenu bsRole="menu" onToggle={this.onToggleAddPermDD} aria-label="available permissions" width="40em">{permissionsDD}</DropdownMenu>
              </Dropdown>
            </IfPermission>
          </Col>
        </Row>
        <br />
        <List itemFormatter={listFormatter} items={this.props.listedPermissions || []} isEmptyMessage="This user has no permissions applied." />
      </div>
    );
  }
}

export default RenderPermissions;

{'fraction_non_alphanumeric': 0.13056983718937445, 'fraction_numerical': 0.002784918594687232, 'mean_word_length': 2.9148846960167716, 'pattern_counts': {'":': 0, '<': 75, '<?xml version=': 0, '>': 81, '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': '5000507', 'n_tokens_mistral': 2626, 'n_tokens_neox': 2640, 'n_words': 480}