diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/panel/versionController')
5 files changed, 485 insertions, 268 deletions
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx index 57fa86f561..c9c5789622 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx +++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx @@ -17,125 +17,224 @@ import React from 'react'; import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {actionsEnum} from './VersionControllerConstants.js'; +import { actionsEnum } from './VersionControllerConstants.js'; import ActionButtons from './components/ActionButtons.jsx'; import NotificationsView from 'sdc-app/onboarding/userNotifications/NotificationsView.jsx'; - class VersionController extends React.Component { - - static propTypes = { - version: PropTypes.object, - viewableVersions: PropTypes.array, - onVersionSwitching: PropTypes.func, - callVCAction: PropTypes.func, - onSave: PropTypes.func, - onClose: PropTypes.func, - isFormDataValid: PropTypes.bool, - onOpenCommentCommitModal: PropTypes.func, - isReadOnlyMode: PropTypes.bool - }; - - state = { - showPermissions: false, - showRevisions: false - }; - - render() { - let {version = {}, viewableVersions = [], onVersionSwitching, onMoreVersionsClick, callVCAction, onSave, isReadOnlyMode, itemPermission, - isFormDataValid, onClose, onManagePermissions, permissions = {}, userInfo, usersList, itemName, - onOpenCommentCommitModal, onOpenRevisionsModal, isManual, candidateInProcess, isArchived} = this.props; - return ( - <div className='version-controller-bar'> - <div className={`vc-container ${candidateInProcess ? 'disabled' : ''}`}> - <div className='version-status-container'> - <VersionSelector - viewableVersions={viewableVersions} - version={version} - onVersionSwitching={onVersionSwitching} - onMoreVersionsClick={() => onMoreVersionsClick({itemName, users: usersList})}/> - {isArchived && <div className='depricated-item-status'>{i18n('Archived')}</div>} - </div> - <div className='save-submit-cancel-container'> - <ActionButtons onSubmit={callVCAction ? () => this.submit(callVCAction, version) : undefined} - onRevert={callVCAction ? () => this.revert(callVCAction, version) : undefined} - onOpenRevisionsModal={onOpenRevisionsModal} - onSave={onSave ? () => onSave() : undefined} - permissions={permissions} - userInfo={userInfo} - onManagePermissions={onManagePermissions} - showPermissions={this.state.showPermissions} - onClosePermissions={()=>this.setState({showPermissions: false})} - onClickPermissions={() => this.onClickPermissions()} - onSync={callVCAction ? () => this.sync(callVCAction, version) : undefined} - onOpenCommentCommitModal={onOpenCommentCommitModal} - onCommit={callVCAction ? (comment) => this.commit(callVCAction, version, comment) : undefined} - isFormDataValid={isFormDataValid} - itemPermissions={itemPermission} - isArchived={isArchived} - isReadOnlyMode={isReadOnlyMode || candidateInProcess} - isManual={isManual} /> - <div className='vc-separator'></div> - <NotificationsView /> - {onClose && <div className='vc-nav-item-close' onClick={() => onClose()} data-test-id='vc-cancel-btn'> X</div>} - </div> - </div> - </div> - ); - } - - onClickPermissions() { - let {onOpenPermissions, usersList} = this.props; - let {showPermissions} = this.state; - let promise = showPermissions ? Promise.resolve() : onOpenPermissions({users: usersList}); - promise.then(() => this.setState({showPermissions: !showPermissions})); - } - - - submit(callVCAction, version) { - const action = actionsEnum.SUBMIT; - callVCAction(action, version); - } - - revert(callVCAction, version) { - const action = actionsEnum.REVERT; - callVCAction(action, version); - } - - sync(callVCAction, version) { - const action = actionsEnum.SYNC; - callVCAction(action, version); - } - - commit(callVCAction, version, comment) { - const action = actionsEnum.COMMIT; - callVCAction(action, version, comment); - } - - permissions() { - - } + static propTypes = { + version: PropTypes.object, + viewableVersions: PropTypes.array, + onVersionSwitching: PropTypes.func, + callVCAction: PropTypes.func, + onSave: PropTypes.func, + onClose: PropTypes.func, + isFormDataValid: PropTypes.bool, + onOpenCommentCommitModal: PropTypes.func, + isReadOnlyMode: PropTypes.bool + }; + + state = { + showPermissions: false, + showRevisions: false + }; + + render() { + let { + version = {}, + viewableVersions = [], + onVersionSwitching, + onMoreVersionsClick, + callVCAction, + onSave, + isReadOnlyMode, + itemPermission, + isFormDataValid, + onClose, + onManagePermissions, + permissions = {}, + userInfo, + usersList, + itemName, + onOpenCommentCommitModal, + onOpenRevisionsModal, + isManual, + candidateInProcess, + isArchived + } = this.props; + return ( + <div className="version-controller-bar"> + <div + className={`vc-container ${ + candidateInProcess ? 'disabled' : '' + }`}> + <div className="version-status-container"> + <VersionSelector + viewableVersions={viewableVersions} + version={version} + onVersionSwitching={onVersionSwitching} + onMoreVersionsClick={() => + onMoreVersionsClick({ + itemName, + users: usersList + }) + } + /> + {isArchived && ( + <div className="depricated-item-status"> + {i18n('Archived')} + </div> + )} + </div> + <div className="save-submit-cancel-container"> + <ActionButtons + onSubmit={ + callVCAction + ? () => this.submit(callVCAction, version) + : undefined + } + onRevert={ + callVCAction + ? () => this.revert(callVCAction, version) + : undefined + } + onOpenRevisionsModal={onOpenRevisionsModal} + onSave={onSave ? () => onSave() : undefined} + permissions={permissions} + userInfo={userInfo} + onManagePermissions={onManagePermissions} + showPermissions={this.state.showPermissions} + onClosePermissions={() => + this.setState({ showPermissions: false }) + } + onClickPermissions={() => this.onClickPermissions()} + onSync={ + callVCAction + ? () => this.sync(callVCAction, version) + : undefined + } + onOpenCommentCommitModal={onOpenCommentCommitModal} + onCommit={ + callVCAction + ? comment => + this.commit( + callVCAction, + version, + comment + ) + : undefined + } + isFormDataValid={isFormDataValid} + itemPermissions={itemPermission} + isArchived={isArchived} + isReadOnlyMode={ + isReadOnlyMode || candidateInProcess + } + isManual={isManual} + /> + <div className="vc-separator" /> + <NotificationsView /> + {onClose && ( + <div + className="vc-nav-item-close" + onClick={() => onClose()} + data-test-id="vc-cancel-btn"> + {' '} + X + </div> + )} + </div> + </div> + </div> + ); + } + + onClickPermissions() { + let { onOpenPermissions, usersList } = this.props; + let { showPermissions } = this.state; + let promise = showPermissions + ? Promise.resolve() + : onOpenPermissions({ users: usersList }); + promise.then(() => + this.setState({ showPermissions: !showPermissions }) + ); + } + + submit(callVCAction, version) { + const action = actionsEnum.SUBMIT; + callVCAction(action, version); + } + + revert(callVCAction, version) { + const action = actionsEnum.REVERT; + callVCAction(action, version); + } + + sync(callVCAction, version) { + const action = actionsEnum.SYNC; + callVCAction(action, version); + } + + commit(callVCAction, version, comment) { + const action = actionsEnum.COMMIT; + callVCAction(action, version, comment); + } + + permissions() {} } function VersionSelector(props) { - let {version = {}, onMoreVersionsClick, viewableVersions = [], onVersionSwitching} = props; - const includedVersions = viewableVersions.filter(ver => {return ver.id === version.id;}); - return (<div className='version-section-wrapper'> - <select className='version-selector' - onChange={ev => onVersionSwitching && onVersionSwitching(viewableVersions.find(version => version.id === ev.target.value))} - value={version.id} - data-test-id='vc-versions-select-box'> - {viewableVersions && viewableVersions.map(viewVersion => { - return ( - <option key={viewVersion.id} value={viewVersion.id} data-test-id='vc-version-option'>{`V ${viewVersion.name} ${viewVersion.status}`}</option> - ); - }) - } - {!includedVersions.length && - <option key={version.id} value={version.id} data-test-id='vc-selected-version-option'>{`V ${version.name} ${version.status}`}</option>} - </select> - <span onClick={onMoreVersionsClick} className='version-selector-more-versions' data-test-id='vc-versions-page-link'>{i18n('Versions Page')}</span> - </div>); + let { + version = {}, + onMoreVersionsClick, + viewableVersions = [], + onVersionSwitching + } = props; + const includedVersions = viewableVersions.filter(ver => { + return ver.id === version.id; + }); + return ( + <div className="version-section-wrapper"> + <select + className="version-selector" + onChange={ev => + onVersionSwitching && + onVersionSwitching( + viewableVersions.find( + version => version.id === ev.target.value + ) + ) + } + value={version.id} + data-test-id="vc-versions-select-box"> + {viewableVersions && + viewableVersions.map(viewVersion => { + return ( + <option + key={viewVersion.id} + value={viewVersion.id} + data-test-id="vc-version-option">{`V ${ + viewVersion.name + } ${viewVersion.status}`}</option> + ); + })} + {!includedVersions.length && ( + <option + key={version.id} + value={version.id} + data-test-id="vc-selected-version-option">{`V ${ + version.name + } ${version.status}`}</option> + )} + </select> + <span + onClick={onMoreVersionsClick} + className="version-selector-more-versions" + data-test-id="vc-versions-page-link"> + {i18n('Versions Page')} + </span> + </div> + ); } export default VersionController; diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js index ddb428a1e9..54f10c1acf 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js +++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js @@ -16,9 +16,9 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionsEnum = keyMirror({ - REVERT: 'Revert', - SYNC: 'Sync', - SUBMIT: 'Submit', - COMMIT: 'Commit', - CREATE_PACKAGE: 'Create_Package' + REVERT: 'Revert', + SYNC: 'Sync', + SUBMIT: 'Submit', + COMMIT: 'Commit', + CREATE_PACKAGE: 'Create_Package' }); diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx index b5750817ba..4dfa117803 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx +++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx @@ -13,7 +13,7 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import enhanceWithClickOutside from 'react-click-outside'; import i18n from 'nfvo-utils/i18n/i18n.js'; @@ -22,88 +22,171 @@ import Overlay from 'nfvo-components/overlay/Overlay.jsx'; import Permissions from './Permissions.jsx'; class ClickOutsideWrapper extends Component { - handleClickOutside() { - this.props.onClose(); - } - render() { - return <div>{this.props.children}</div>; - } + handleClickOutside() { + this.props.onClose(); + } + render() { + return <div>{this.props.children}</div>; + } } -const EnhancedClickOutsideWrapper = enhanceWithClickOutside(ClickOutsideWrapper); +const EnhancedClickOutsideWrapper = enhanceWithClickOutside( + ClickOutsideWrapper +); -const VCButton = ({name, tooltipText, disabled, onClick, dataTestId}) => { - let onClickAction = disabled ? ()=>{} : onClick; - return ( - <div className={`action-button-wrapper ${disabled ? 'disabled' : 'clickable'}`} onClick={onClickAction}> - <div className='action-buttons-svg'> - <SVGIcon label={tooltipText} labelPosition='bottom' labelClassName='action-button-label' - data-test-id={dataTestId} name={name} disabled={disabled}/> - </div> - </div> - ); +const VCButton = ({ name, tooltipText, disabled, onClick, dataTestId }) => { + let onClickAction = disabled ? () => {} : onClick; + return ( + <div + className={`action-button-wrapper ${ + disabled ? 'disabled' : 'clickable' + }`} + onClick={onClickAction}> + <div className="action-buttons-svg"> + <SVGIcon + label={tooltipText} + labelPosition="bottom" + labelClassName="action-button-label" + data-test-id={dataTestId} + name={name} + disabled={disabled} + /> + </div> + </div> + ); }; -const Separator = () => (<div className='vc-separator'></div>); +const Separator = () => <div className="vc-separator" />; -const SubmitButton = ({onClick, disabled}) => ( - <div onClick={()=>onClick()} data-test-id='vc-submit-btn' className={`vc-submit-button ${disabled ? 'disabled' : ''}`}> - <SVGIcon name='check' iconClassName='vc-v-submit' disabled={disabled} /> - {i18n('Submit')} - </div> +const SubmitButton = ({ onClick, disabled }) => ( + <div + onClick={() => onClick()} + data-test-id="vc-submit-btn" + className={`vc-submit-button ${disabled ? 'disabled' : ''}`}> + <SVGIcon name="check" iconClassName="vc-v-submit" disabled={disabled} /> + {i18n('Submit')} + </div> ); - -const ActionButtons = ({isReadOnlyMode, onSubmit, onRevert, onSave, isFormDataValid, onClickPermissions, onSync, onCommit, isArchived, - onOpenCommentCommitModal, showPermissions, onClosePermissions, permissions, onManagePermissions, userInfo, onOpenRevisionsModal, isManual, - itemPermissions: {isCertified, isCollaborator, isDirty, isOutOfSync, isUpToDate}}) => ( - <div className='action-buttons'> - <EnhancedClickOutsideWrapper onClose={onClosePermissions}> - <VCButton disabled={isManual} dataTestId='vc-permission-btn' onClick={onClickPermissions} - name='version-controller-permissions' tooltipText={i18n('Permissons')} /> - {showPermissions && - <Overlay> - <Permissions userInfo={userInfo} onManagePermissions={onManagePermissions} permissions={permissions} onClosePermissions={onClosePermissions}/> - </Overlay> - } - </EnhancedClickOutsideWrapper> - {isCollaborator && !isArchived && <div className='collaborator-action-buttons'> - <Separator /> - {onSave && <div className='vc-save-section'> - <VCButton dataTestId='vc-save-btn' onClick={() => onSave()} - name='version-controller-save' tooltipText={i18n('Save')} disabled={isReadOnlyMode || !isFormDataValid} /> - <Separator /> - </div> - } - <VCButton dataTestId='vc-sync-btn' onClick={onSync} - name='version-controller-sync' tooltipText={i18n('Sync')} disabled={!isCollaborator || isUpToDate || isCertified} /> - <VCButton dataTestId='vc-commit-btn' onClick={() => onOpenCommentCommitModal({onCommit, title: i18n('Commit')})} - name='version-controller-commit' tooltipText={i18n('Share')} disabled={isReadOnlyMode || !isDirty || isOutOfSync} /> - {onRevert && - <VCButton dataTestId='vc-revert-btn' onClick={onOpenRevisionsModal} - name='version-controller-revert' tooltipText={i18n('Revert')} disabled={isReadOnlyMode || isOutOfSync} /> - } - {onSubmit && - <div className='vc-submit-section'> - <Separator /> - <SubmitButton onClick={onSubmit} - disabled={isReadOnlyMode || isOutOfSync || !isUpToDate || isCertified} /> - </div> - } - </div>} - </div> +const ActionButtons = ({ + isReadOnlyMode, + onSubmit, + onRevert, + onSave, + isFormDataValid, + onClickPermissions, + onSync, + onCommit, + isArchived, + onOpenCommentCommitModal, + showPermissions, + onClosePermissions, + permissions, + onManagePermissions, + userInfo, + onOpenRevisionsModal, + isManual, + itemPermissions: { + isCertified, + isCollaborator, + isDirty, + isOutOfSync, + isUpToDate + } +}) => ( + <div className="action-buttons"> + <EnhancedClickOutsideWrapper onClose={onClosePermissions}> + <VCButton + disabled={isManual} + dataTestId="vc-permission-btn" + onClick={onClickPermissions} + name="version-controller-permissions" + tooltipText={i18n('Permissons')} + /> + {showPermissions && ( + <Overlay> + <Permissions + userInfo={userInfo} + onManagePermissions={onManagePermissions} + permissions={permissions} + onClosePermissions={onClosePermissions} + /> + </Overlay> + )} + </EnhancedClickOutsideWrapper> + {isCollaborator && + !isArchived && ( + <div className="collaborator-action-buttons"> + <Separator /> + {onSave && ( + <div className="vc-save-section"> + <VCButton + dataTestId="vc-save-btn" + onClick={() => onSave()} + name="version-controller-save" + tooltipText={i18n('Save')} + disabled={isReadOnlyMode || !isFormDataValid} + /> + <Separator /> + </div> + )} + <VCButton + dataTestId="vc-sync-btn" + onClick={onSync} + name="version-controller-sync" + tooltipText={i18n('Sync')} + disabled={!isCollaborator || isUpToDate || isCertified} + /> + <VCButton + dataTestId="vc-commit-btn" + onClick={() => + onOpenCommentCommitModal({ + onCommit, + title: i18n('Commit') + }) + } + name="version-controller-commit" + tooltipText={i18n('Share')} + disabled={isReadOnlyMode || !isDirty || isOutOfSync} + /> + {onRevert && ( + <VCButton + dataTestId="vc-revert-btn" + onClick={onOpenRevisionsModal} + name="version-controller-revert" + tooltipText={i18n('Revert')} + disabled={isReadOnlyMode || isOutOfSync} + /> + )} + {onSubmit && ( + <div className="vc-submit-section"> + <Separator /> + <SubmitButton + onClick={onSubmit} + disabled={ + isReadOnlyMode || + isOutOfSync || + !isUpToDate || + isCertified + } + /> + </div> + )} + </div> + )} + </div> ); ActionButtons.propTypes = { - version: PropTypes.object, - onSubmit: PropTypes.func, - onRevert: PropTypes.func, - onSave: PropTypes.func, - isLatestVersion: PropTypes.bool, - isCheckedIn: PropTypes.bool, - isCheckedOut: PropTypes.bool, - isFormDataValid: PropTypes.bool, - isReadOnlyMode: PropTypes.bool + version: PropTypes.object, + onSubmit: PropTypes.func, + onRevert: PropTypes.func, + onSave: PropTypes.func, + isLatestVersion: PropTypes.bool, + isCheckedIn: PropTypes.bool, + isCheckedOut: PropTypes.bool, + isFormDataValid: PropTypes.bool, + isReadOnlyMode: PropTypes.bool }; export default ActionButtons; diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx index 600eaeefaa..ae0913f3a9 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx +++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx @@ -15,59 +15,66 @@ */ import React from 'react'; -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Form from 'nfvo-components/input/validation/Form.jsx'; import Input from 'nfvo-components/input/validation/Input.jsx'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; import keyMirror from 'nfvo-utils/KeyMirror.js'; export const CommitModalType = keyMirror({ - COMMIT: null, - COMMIT_SUBMIT: null - + COMMIT: null, + COMMIT_SUBMIT: null }); -export const mapActionToProps = (dispatch) => { - return { - onClose: () => dispatch({ - type: modalActionTypes.GLOBAL_MODAL_CLOSE - }) - }; +export const mapActionToProps = dispatch => { + return { + onClose: () => + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_CLOSE + }) + }; }; class CommitCommentModal extends React.Component { + state = { + comment: '' + }; - state = { - comment: '' - }; - - render() { - const {onCommit, onClose, type} = this.props; - const [commitButtonText, descriptionText] = type === CommitModalType.COMMIT ? - [i18n('Commit'), i18n('You are about to commit your version')] : - [i18n('Commit & Submit'), i18n('You must commit your changes before the submit')]; + render() { + const { onCommit, onClose, type } = this.props; + const [commitButtonText, descriptionText] = + type === CommitModalType.COMMIT + ? [i18n('Commit'), i18n('You are about to commit your version')] + : [ + i18n('Commit & Submit'), + i18n('You must commit your changes before the submit') + ]; - return ( - <Form - ref='validationForm' - hasButtons={true} - onSubmit={ () => {onCommit(this.state.comment); onClose();} } - onReset={onClose} - submitButtonText={commitButtonText} - labledButtons={true} - isValid={true} - className='comment-commit-form'> - <div className='commit-modal-text'>{descriptionText}</div> - <Input - data-test-id='commit-comment-text' - onChange={comment => this.setState({comment: comment})} - label={i18n('Enter Commit Comment:')} - value={this.state.comment} - type='textarea'/> - </Form> - ); - } + return ( + <Form + ref="validationForm" + hasButtons={true} + onSubmit={() => { + onCommit(this.state.comment); + onClose(); + }} + onReset={onClose} + submitButtonText={commitButtonText} + labledButtons={true} + isValid={true} + className="comment-commit-form"> + <div className="commit-modal-text">{descriptionText}</div> + <Input + data-test-id="commit-comment-text" + onChange={comment => this.setState({ comment: comment })} + label={i18n('Enter Commit Comment:')} + value={this.state.comment} + type="textarea" + /> + </Form> + ); + } } export default connect(null, mapActionToProps)(CommitCommentModal); diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx index 952bd4fb58..6e0ae8187b 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx +++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx @@ -18,48 +18,76 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; -const Contributor = ({name, role, id, userInfo}) => { +const Contributor = ({ name, role, id, userInfo }) => { + const selected = id === userInfo.userId ? 'selected' : ''; - const selected = id === userInfo.userId ? 'selected' : ''; - - return( - <div className='contributor'> - <div className='contributor-content'> - <div className={`contributor-icon-circle ${selected}`}> - <div className={`contributer-icon ${selected}`}> - <SVGIcon name='user'/> - </div> - </div> - <div className='contributer-info'> - <div className='contributer-name'>{name}</div> - <div className='contributer-role'><p>{role}</p></div> - </div> - </div> - </div> - ); + return ( + <div className="contributor"> + <div className="contributor-content"> + <div className={`contributor-icon-circle ${selected}`}> + <div className={`contributer-icon ${selected}`}> + <SVGIcon name="user" /> + </div> + </div> + <div className="contributer-info"> + <div className="contributer-name">{name}</div> + <div className="contributer-role"> + <p>{role}</p> + </div> + </div> + </div> + </div> + ); }; -const Permissions = ({permissions: {owner, contributors}, onManagePermissions, userInfo, onClosePermissions}) => { - - return ( - <div className='permissions-overlay'> - <div className='permissions-overlay-header'> - <h4 className='permissions-overlay-header-title'>{i18n('PERMISSIONS')}</h4> - </div> - <div className='permissions-overlay-content'> - <Contributor userInfo={userInfo} id={owner.userId} key={owner.fullName} name={owner.fullName} role={owner.role}/> - {contributors.map(item => item.userId !== owner.userId && <Contributor userInfo={userInfo} id={item.userId} key={item.fullName} name={item.fullName} role={item.role}/>)} - </div> - <div className='permissions-overlay-footer'> - { - owner.userId === userInfo.userId && - <div onClick={() => { onClosePermissions(); onManagePermissions(); }} className='manage-permissions-btn'> - {i18n('Manage Permissions')} - </div> - } - </div> - </div> - ); +const Permissions = ({ + permissions: { owner, contributors }, + onManagePermissions, + userInfo, + onClosePermissions +}) => { + return ( + <div className="permissions-overlay"> + <div className="permissions-overlay-header"> + <h4 className="permissions-overlay-header-title"> + {i18n('PERMISSIONS')} + </h4> + </div> + <div className="permissions-overlay-content"> + <Contributor + userInfo={userInfo} + id={owner.userId} + key={owner.fullName} + name={owner.fullName} + role={owner.role} + /> + {contributors.map( + item => + item.userId !== owner.userId && ( + <Contributor + userInfo={userInfo} + id={item.userId} + key={item.fullName} + name={item.fullName} + role={item.role} + /> + ) + )} + </div> + <div className="permissions-overlay-footer"> + {owner.userId === userInfo.userId && ( + <div + onClick={() => { + onClosePermissions(); + onManagePermissions(); + }} + className="manage-permissions-btn"> + {i18n('Manage Permissions')} + </div> + )} + </div> + </div> + ); }; export default Permissions; |