{"size": 3395, "ext": "js", "max_stars_repo_path": "dashboard/app/components/IamPrincipalPermissionsFieldSet/IamPrincipalPermissionsFieldSet.js", "max_stars_repo_name": "seclib/cerberus_scripts", "max_stars_repo_stars_event_min_datetime": "2018-04-14T00:07:35.000Z", "max_stars_repo_stars_event_max_datetime": "2018-04-15T05:55:57.000Z", "max_issues_repo_path": "dashboard/app/components/IamPrincipalPermissionsFieldSet/IamPrincipalPermissionsFieldSet.js", "max_issues_repo_name": "seclib/cerberus_scripts", "max_issues_repo_issues_event_min_datetime": "2018-09-06T00:46:18.000Z", "max_issues_repo_issues_event_max_datetime": "2018-09-06T23:12:45.000Z", "max_forks_repo_path": "dashboard/app/components/IamPrincipalPermissionsFieldSet/IamPrincipalPermissionsFieldSet.js", "max_forks_repo_name": "seclib/cerberus_scripts", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": 27, "max_forks_count": null, "avg_line_length": 52.2307692308, "max_line_length": 188, "alphanum_fraction": 0.5351988218}
import React from 'react'
import { Component } from 'react'
import PropTypes from 'prop-types'
import RoleSelect from '../RoleSelect/RoleSelect'
import Buttons from '../Buttons/Buttons'
import AddButton from '../AddButton/AddButton'
import { touch } from 'redux-form'
import './IamPrincipalPermissionsFieldSet.scss'

/**
 * Component for displaying User Group Permissions form field set
 * @prop iamPrincipalPermissions is the Redux form field for the array of IAM role permission objects (Group -> Role)
 * @prop dispatch from the store to dispatch touch events for the drop downs
 * @prop formName The redux form name for touch events in the drop downs
 * @props roles The list of roles that a user can select for the permission
 */
export default class IamPrincipalPermissionsFieldSet extends Component {
    static propTypes = {
        iamPrincipalPermissions: PropTypes.array.isRequired,
        dispatch: PropTypes.func.isRequired,
        formName: PropTypes.string.isRequired,
        roles: PropTypes.array.isRequired
    }

    render() {
        const {iamPrincipalPermissions, dispatch, formName, roles} = this.props

        return (
            <div className='iam-principal-permissions'>
                <div className='iam-principal-permissions-label ncss-label'>IAM Principal Permissions</div>
                <div className="iam-principal-permissions-perms-container">
                    <div className="iam-principal-permissions-perms-container">
                    {iamPrincipalPermissions.map((permission, index) =>
                        <div key={index}>
                            <div className='iam-principal-permissions-permission'>

                                <div className='role-perm-principal-arn'>
                                    <div className={((permission.iamPrincipalArn.touched && permission.iamPrincipalArn.error) ? 'ncss-input-container error' : 'ncss-input-container')}>
                                        <input {...permission.iamPrincipalArn}
                                            type='text'
                                            className='ncss-input pt2-sm pr4-sm pb2-sm pl4-sm'
                                            placeholder='IAM Principal ARN' />
                                        {permission.iamPrincipalArn.touched && permission.iamPrincipalArn.error && <div className='ncss-error-msg'>{permission.iamPrincipalArn.error}</div>}
                                    </div>
                                </div>

                                <RoleSelect {...permission.roleId}
                                    roles={roles.filter((role => role.name.toLowerCase() != 'owner'))}
                                    handleBeingTouched={() => {
                                                    dispatch(touch(formName, permission.roleId.name))
                                            }} />

                                <Buttons handleRemoveClicked={() => {
                                                     iamPrincipalPermissions.removeField(index)
                                                 }} />
                            </div>
                        </div>
                    )}
                    </div>
                </div>
                <AddButton handleClick={iamPrincipalPermissions.addField} message="Add new permission" />
            </div>
        )
    }
}