render()

in app/addons/permissions/components/PermissionsSection.js [110:175]

• 56 lines of code
• 1 McCabe index (conditional complexity)

  render() {

    const { section } = this.props;

    return (
      <div id={"permissions__" + section}>
        <header className="page-header">
          <h3>{section}</h3>
          <p className="help">
            {this.getHelp()}
            <a className="help-link" data-bypass="true" href={getDocUrl('DB_PERMISSION')} target="_blank" rel="noopener noreferrer">
              <i className="fonticon-help-circled"></i>
            </a>
          </p>
        </header>

        <div className="row mt-2">
          <div className="col-lg-6">
            <header>
              <h4>Users</h4>
              <p>Specify users who will have {this.props.section} access to this database.</p>
            </header>

            <form onSubmit={this.addNames} id="form-users-permissions">
              <InputGroup>
                <Form.Control
                  placeholder="Username"
                  onChange={this.nameChange}
                  aria-label="Username"
                  type="text" />

                <Button type="submit" variant="cf-primary" aria-label="Add username"><i className="fonticon-plus-circled" />Add User</Button>
              </InputGroup>
            </form>

            <ul className="list-unstyled permission-items">
              {this.getNames()}
            </ul>
          </div>
          <div className="col-lg-6">
            <header>
              <h4>Roles</h4>
              <p>Users with any of the following role(s) will have {this.props.section} access.</p>
            </header>

            <form onSubmit={this.addRoles}>
              <InputGroup>
                <Form.Control
                  placeholder="Role"
                  value={this.state.newRole}
                  onChange={this.roleChange}
                  aria-label="Role"
                  type="text" />

                <Button type="submit" variant="cf-primary" aria-label="Add role"><i className="fonticon-plus-circled" />Add Role</Button>
              </InputGroup>
            </form>

            <ul className="list-unstyled permission-items">
              {this.getRoles()}
            </ul>
          </div>
        </div>
      </div>
    );
  }