diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/panel')
5 files changed, 258 insertions, 289 deletions
diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx index feb0f813ea..3b89137090 100644 --- a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx +++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx @@ -1,9 +1,23 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ import React from 'react'; import classnames from 'classnames'; import Collapse from 'react-bootstrap/lib/Collapse.js'; class NavigationSideBar extends React.Component { - static PropTypes = { activeItemId: React.PropTypes.string.isRequired, onSelect: React.PropTypes.func, @@ -11,51 +25,26 @@ class NavigationSideBar extends React.Component { groups: React.PropTypes.array }; + constructor(props) { + super(props); + this.state = { + activeItemId: null + }; + this.handleItemClicked = this.handleItemClicked.bind(this); + } + render() { let {groups, activeItemId} = this.props; return ( <div className='navigation-side-content'> {groups.map(group => ( - <div className='navigation-group' key={group.id}> - <div className='group-name'>{group.name}</div> - <div className='navigation-group-items'> - { - group.items && group.items.map(item => this.renderGroupItem(item, activeItemId)) - } - </div> - </div> + <NavigationMenu menu={group} activeItemId={activeItemId} onNavigationItemClick={this.handleItemClicked} key={'menu_' + group.id} /> ))} </div> ); } - renderGroupItem(item, activeItemId) { - let isGroup = item.items && item.items.length > 0; - return ( - <div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})}> - <div - key={item.id} - className={classnames('navigation-group-item-name', { - 'selected': item.id === activeItemId, - 'disabled': item.disabled, - 'bold-name': item.expanded, - 'hidden': item.hidden - })} - onClick={(event) => this.handleItemClicked(event, item)}> - {item.name} - </div> - {isGroup && - <Collapse in={item.expanded}> - <div> - {item.items.map(item => this.renderGroupItem(item, activeItemId))} - </div> - </Collapse> - } - </div> - ); - } - handleItemClicked(event, item) { event.stopPropagation(); if(this.props.onToggle) { @@ -70,4 +59,70 @@ class NavigationSideBar extends React.Component { } } +class NavigationMenu extends React.Component { + static PropTypes = { + activeItemId: React.PropTypes.string.isRequired, + onNavigationItemClick: React.PropTypes.func, + menu: React.PropTypes.array + }; + + render() { + const {menu, activeItemId, onNavigationItemClick} = this.props; + return ( + <div className='navigation-group' key={menu.id}> + <NavigationMenuHeader title={menu.name} /> + <NavigationMenuItems items={menu.items} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} /> + </div>); + } +} + +function NavigationMenuHeader(props) { + return <div className='group-name' data-test-id='navbar-group-name'>{props.title}</div>; +} + +function NavigationMenuItems(props) { + const {items, activeItemId, onNavigationItemClick} = props; + return ( + <div className='navigation-group-items'> + { + items && items.map(item => (<NavigationMenuItem key={'menuItem_' + item.id} item={item} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />)) + } + </div> + ); +} + +function NavigationMenuItem(props) { + const {onNavigationItemClick, item, activeItemId} = props; + const isGroup = item.items && item.items.length > 0; + return ( + <div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})} key={'item_' + item.id}> + <NavigationLink item={item} activeItemId={activeItemId} onClick={onNavigationItemClick} /> + {isGroup && <Collapse in={item.expanded} data-test-id={'navigation-group-' + item.id}> + <div> + {item.items.map(subItem => (<NavigationMenuItem key={'menuItem_' + subItem.id} item={subItem} onNavigationItemClick={onNavigationItemClick} activeItemId={activeItemId} />)) } + </div> + </Collapse> + } + </div> + ); +} + +function NavigationLink(props) { + const {item, activeItemId, onClick} = props; + return ( + <div + key={'navAction_' + item.id} + className={classnames('navigation-group-item-name', { + 'selected': item.id === activeItemId, + 'disabled': item.disabled, + 'bold-name': item.expanded, + 'hidden': item.hidden + })} + onClick={(event) => onClick(event, item)} + data-test-id={'navbar-group-item-' + item.id}> + {item.name} + </div> + ); +} + export default NavigationSideBar; diff --git a/openecomp-ui/src/nfvo-components/panel/SlidePanel.jsx b/openecomp-ui/src/nfvo-components/panel/SlidePanel.jsx deleted file mode 100644 index 10c5326300..0000000000 --- a/openecomp-ui/src/nfvo-components/panel/SlidePanel.jsx +++ /dev/null @@ -1,109 +0,0 @@ -import React from 'react'; -import FontAwesome from 'react-fontawesome'; -import ReactDOM from 'react-dom'; - -class SlidePanel extends React.Component { - - static PropTypes = { - direction: React.PropTypes.string.isRequired, - className: React.PropTypes.string, - title: React.PropTypes.string, - isOpen: React.PropTypes.bool - }; - - static defaultProps = { - title: '', - className: '', - isOpen: true - }; - - state = { - isOpen: this.props.isOpen, - direction: this.props.direction, - width: 0, - arrowWidth: 0 - }; - - componentDidMount() { - this.setSliderPosition(); - } - - componentDidUpdate() { - this.setSliderPosition(); - } - - render() { - - let {children, className} = this.props; - let {isOpen} = this.state; - - return ( - <div className={ `slide-panel ${className}`}> - {this.renderHeader(isOpen)} - <div className={'slide-panel-content ' + (isOpen ? 'opened' : 'closed')}>{children}</div> - </div> - ); - } - - renderHeader(isOpen) { - let {direction: initialDirection, title} = this.props; - let {direction: currentDirection} = this.state; - - let iconName = currentDirection === 'right' ? 'angle-double-right collapse-double-icon' : 'angle-double-left collapse-double-icon'; - - let awestyle = {padding: '5px'}; - - if (!isOpen && initialDirection === 'right') { - awestyle.marginLeft = '-1px'; - } - return ( - <div className='slide-panel-header'> - { initialDirection === 'left' && <span className='slide-panel-header-title'>{title}</span>} - <FontAwesome - ref='arrowIcon' - style={awestyle} - onClick={this.handleClick} - className='pull-right' - name={iconName} - size='2x'/> - { initialDirection === 'right' && <span className='slide-panel-header-title'>{title}</span>} - </div> - ); - } - - handleClick = () => { - this.setState({ - isOpen: !this.state.isOpen, - direction: this.state.direction === 'left' ? 'right' : 'left' - }); - } - - setSliderPosition = () => { - - let el = ReactDOM.findDOMNode(this); - let {style} = el; - - let {direction: initialDirection} = this.props; - let arrowIconSize = Math.floor(ReactDOM.findDOMNode(this.refs.arrowIcon).getBoundingClientRect().width) * 2; - if (!this.state.isOpen) { - if (this.props.direction === 'left') { - style.left = arrowIconSize - el.getBoundingClientRect().width + 'px'; - } - if (initialDirection === 'right') { - style.right = arrowIconSize - el.getBoundingClientRect().width + 'px'; - } - } - else { - if (initialDirection === 'left') { - style.left = '0px'; - } - - if (this.props.direction === 'right') { - style.right = '0px'; - } - } - } - -} - -export default SlidePanel;
\ No newline at end of file diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx index 78525f84c6..6d900dd0bb 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx +++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx @@ -1,17 +1,31 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ import React from 'react'; -import classnames from 'classnames'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import Navbar from 'react-bootstrap/lib/Navbar.js'; -import Nav from 'react-bootstrap/lib/Nav.js'; -import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx'; -import {actionsEnum, statusEnum} from './VersionControllerConstants.js'; +import {actionsEnum, statusEnum, statusBarTextMap } from './VersionControllerConstants.js'; +import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; +import Tooltip from 'react-bootstrap/lib/Tooltip.js'; +import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; class VersionController extends React.Component { static propTypes = { - version: React.PropTypes.string, + version: React.PropTypes.object, viewableVersions: React.PropTypes.array, onVersionSwitching: React.PropTypes.func, isCheckedOut: React.PropTypes.bool.isRequired, @@ -23,143 +37,146 @@ class VersionController extends React.Component { }; render() { - let {status, isCheckedOut, version = '', viewableVersions = [], onVersionSwitching, callVCAction, onSave, isFormDataValid, onClose} = this.props; + let {status, isCheckedOut, version = {}, viewableVersions = [], onVersionSwitching, callVCAction, onSave, isFormDataValid, onClose} = this.props; let isCheckedIn = Boolean(status === statusEnum.CHECK_IN_STATUS); - let isLatestVersion = Boolean(version === viewableVersions[viewableVersions.length - 1]); + let isLatestVersion = Boolean(version.id === viewableVersions[viewableVersions.length - 1].id); if (!isLatestVersion) { status = statusEnum.PREVIOUS_VERSION; } - return ( <div className='version-controller-bar'> - <Navbar inverse className='navbar'> - <Navbar.Collapse> - <Nav className='items-in-left'> - <div className='version-section'> - <ValidationInput - type='select' - selectedEnum={version} - onEnumChange={value => onVersionSwitching && onVersionSwitching(value)}> - {viewableVersions && viewableVersions.map(viewVersion => { - return ( - <option key={viewVersion} value={viewVersion}>{`V ${viewVersion}`}</option> - ); - }) - } - {!viewableVersions.includes(version) && - <option key={version} value={version}>{`V ${version}`}</option>} - </ValidationInput> - </div> - <div className='vc-status'> - <div className='onboarding-status-icon'></div> - <div className='status-text'> {i18n('ONBOARDING')} - <div className='status-text-dash'> -</div> - </div> - {this.renderStatus(status)} - </div> - </Nav> - <Nav pullRight> - <div className='items-in-right'> - <div className='action-buttons'> - {callVCAction && - <div className='version-control-buttons'> - <div - className={classnames('vc-nav-item-button button-submit', {'disabled': !isCheckedIn || !isLatestVersion})} - onClick={() => this.submit(callVCAction)}> - {i18n('Submit')} - </div> - <div - className={classnames('vc-nav-item-button button-checkin-checkout', {'disabled': status === statusEnum.LOCK_STATUS || !isLatestVersion})} - onClick={() => this.checkinCheckoutVersion(callVCAction)}> - {`${isCheckedOut ? i18n('Check In') : i18n('Check Out')}`} - </div> - <div - className={classnames('sprite-new revert-btn ng-scope ng-isolate-scope', {'disabled': !isCheckedOut || version === '0.1' || !isLatestVersion})} - onClick={() => this.revertCheckout(callVCAction)}> - </div> - </div> - } - {onSave && - <div - className={classnames('sprite-new save-btn ng-scope ng-isolate-scope', {'disabled': !isCheckedOut || !isFormDataValid || !isLatestVersion})} - onClick={() => onSave()}> - </div> - } - </div> - <div className='vc-nav-item-close' onClick={() => onClose && onClose()}> X</div> - </div> - </Nav> - </Navbar.Collapse> - </Navbar> + <div className='vc-container'> + <div className='version-status-container'> + <VersionSelector viewableVersions={viewableVersions} version={version} onVersionSwitching={onVersionSwitching} /> + <StatusBarUpdates status={status}/> + </div> + <div className='save-submit-cancel-container'> + <ActionButtons onSubmit={callVCAction ? () => this.submit(callVCAction, version) : undefined} + onRevert={callVCAction ? () => this.revertCheckout(callVCAction, version) : undefined} + status={status} + onCheckinCheckout={callVCAction ? () => this.checkinCheckoutVersion(callVCAction, version) : undefined} + onSave={onSave ? () => onSave() : undefined} + isLatestVersion={isLatestVersion} + isCheckedOut={isCheckedOut} + isCheckedIn={isCheckedIn} isFormDataValid={isFormDataValid} version={version}/> + {onClose && <div className='vc-nav-item-close' onClick={() => onClose()} data-test-id='vc-cancel-btn'> X</div>} + </div> + </div> </div> ); } - renderStatus(status) { - switch (status) { - case statusEnum.CHECK_OUT_STATUS: - return ( - <div className='checkout-status-icon'> - <div className='catalog-tile-check-in-status sprite-new checkout-editable-status-icon'></div> - <div className='status-text'> {i18n('CHECKED OUT')} </div> - </div> - ); - case statusEnum.LOCK_STATUS: - return ( - <div className='status-text'> {i18n('LOCKED')} </div> - ); - case statusEnum.CHECK_IN_STATUS: - return ( - <div className='status-text'> {i18n('CHECKED IN')} </div> - ); - case statusEnum.SUBMIT_STATUS: - return ( - <div className='status-text'> {i18n('SUBMITTED')} </div> - ); - default: - return ( - <div className='status-text'> {i18n(status)} </div> - ); - } + submit(callVCAction, version) { + const action = actionsEnum.SUBMIT; + callVCAction(action, version); + } + + revertCheckout(callVCAction, version) { + const action = actionsEnum.UNDO_CHECK_OUT; + callVCAction(action, version); } - checkinCheckoutVersion(callVCAction) { + checkinCheckoutVersion(callVCAction, version) { if (this.props.isCheckedOut) { - this.checkin(callVCAction); + this.checkin(callVCAction, version); } else { - this.checkout(callVCAction); + this.checkout(callVCAction, version); } } - - checkin(callVCAction) { - + checkin(callVCAction, version) { const action = actionsEnum.CHECK_IN; - if (this.props.onSave) { this.props.onSave().then(()=>{ - callVCAction(action); - }); + callVCAction(action, version); + }); }else{ - callVCAction(action); + callVCAction(action, version); } } - - checkout(callVCAction) { + checkout(callVCAction, version) { const action = actionsEnum.CHECK_OUT; - callVCAction(action); + callVCAction(action, version); } +} - submit(callVCAction) { - const action = actionsEnum.SUBMIT; - callVCAction(action); +class ActionButtons extends React.Component { + static propTypes = { + version: React.PropTypes.object, + onSubmit: React.PropTypes.func, + onRevert: React.PropTypes.func, + onSave: React.PropTypes.func, + isLatestVersion: React.PropTypes.bool, + isCheckedIn: React.PropTypes.bool, + isCheckedOut: React.PropTypes.bool, + isFormDataValid: React.PropTypes.bool + }; + render() { + const {onSubmit, onRevert, onSave, isLatestVersion, isCheckedIn, isCheckedOut, isFormDataValid, version, status, onCheckinCheckout} = this.props; + const [checkinBtnIconSvg, checkinCheckoutBtnTitle] = status === statusEnum.CHECK_OUT_STATUS ? + ['version-controller-lock-open', i18n('Check In')] : + ['version-controller-lock-closed', i18n('Check Out')]; + const disabled = (isLatestVersion && onCheckinCheckout && status !== statusEnum.LOCK_STATUS) ? false : true; + return ( + <div className='action-buttons'> + <VCButton dataTestId='vc-checkout-btn' onClick={onCheckinCheckout} isDisabled={disabled} + name={checkinBtnIconSvg} tooltipText={checkinCheckoutBtnTitle}/> + {onSubmit && onRevert && + <div className='version-control-buttons'> + <VCButton dataTestId='vc-submit-btn' onClick={onSubmit} isDisabled={!isCheckedIn || !isLatestVersion} + name='version-controller-submit' tooltipText={i18n('Submit')}/> + <VCButton dataTestId='vc-revert-btn' onClick={onRevert} isDisabled={!isCheckedOut || version.label === '0.1' || !isLatestVersion} + name='version-controller-revert' tooltipText={i18n('Revert')}/> + </div> + } + {onSave && + <VCButton dataTestId='vc-save-btn' onClick={() => onSave()} isDisabled={!isCheckedOut || !isFormDataValid || !isLatestVersion} + name='version-controller-save' tooltipText={i18n('Save')}/> + } + </div> + ); } +} - revertCheckout(callVCAction) { - const action = actionsEnum.UNDO_CHECK_OUT; - callVCAction(action); - } +function StatusBarUpdates({status}) { + return ( + <div className='vc-status'> + <span className='status-text'>{i18n(statusBarTextMap[status])}</span> + </div> + ); +} + +function VCButton({name, tooltipText, isDisabled, onClick, dataTestId}) { + let onClickAction = isDisabled ? ()=>{} : onClick; + let disabled = isDisabled ? 'disabled' : ''; + + return ( + <OverlayTrigger placement='top' overlay={<Tooltip id='vc-tooltip'>{tooltipText}</Tooltip>}> + <div disabled={disabled} className='action-buttons-svg'> + <SVGIcon data-test-id={dataTestId} iconClassName={disabled} onClick={onClickAction ? onClickAction : undefined} name={name}/> + </div> + </OverlayTrigger> + ); +} + +function VersionSelector(props) { + let {version = {}, 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({id: ev.target.value, label: ev.target.value})} + value={version.label}> + {viewableVersions && viewableVersions.map(viewVersion => { + return ( + <option key={viewVersion.id} value={viewVersion.id} data-test-id='vc-version-option'>{`V ${viewVersion.label}`}</option> + ); + }) + } + {!includedVersions.length && + <option key={version.id} value={version.id}>{`V ${version.label}`}</option>} + </select> + </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 9251fd12c4..9af142433c 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js +++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js @@ -1,23 +1,18 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ + * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * + * + * http://www.apache.org/licenses/LICENSE-2.0 + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. */ - import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionsEnum = keyMirror({ @@ -36,3 +31,11 @@ export const statusEnum = keyMirror({ PREVIOUS_VERSION: 'READ ONLY' }); +export const statusBarTextMap = keyMirror({ + 'Locked': 'Checked Out', + 'LockedByUser': '', + 'Available': 'Checked In', + 'Final': 'Submitted', + 'READ ONLY': 'Locked' +}); + diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerUtils.js b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerUtils.js index de9914454c..e8c12abec3 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerUtils.js +++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerUtils.js @@ -1,23 +1,18 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ +/*! * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ + * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * + * + * http://www.apache.org/licenses/LICENSE-2.0 + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. */ - import Configuration from 'sdc-app/config/Configuration.js'; import {statusEnum} from './VersionControllerConstants.js'; @@ -25,24 +20,32 @@ import {statusEnum} from './VersionControllerConstants.js'; const VersionControllerUtils = { getCheckOutStatusKindByUserID(status, lockingUser) { - let currentLoginUserID = Configuration.get('ATTUserID'); - let isCheckedOut = currentLoginUserID === lockingUser; + let returnStatus; + let isCheckedOut; + let currentLoginUserID = Configuration.get('UserID'); + if (lockingUser) { + isCheckedOut = currentLoginUserID === lockingUser; + returnStatus = isCheckedOut ? status : statusEnum.LOCK_STATUS; + } else { + isCheckedOut = false; + returnStatus = status; + } return { - status: isCheckedOut ? status : statusEnum.LOCK_STATUS, + status: returnStatus, isCheckedOut }; }, isCheckedOutByCurrentUser(resource) { - let currentLoginUserID = Configuration.get('ATTUserID'); + let currentLoginUserID = Configuration.get('UserID'); return resource.lockingUser !== undefined && resource.lockingUser === currentLoginUserID; }, isReadOnly(resource) { const {version, viewableVersions = []} = resource; const latestVersion = viewableVersions[viewableVersions.length - 1]; - return version !== latestVersion || !VersionControllerUtils.isCheckedOutByCurrentUser(resource); + return version.id !== latestVersion.id || !VersionControllerUtils.isCheckedOutByCurrentUser(resource); } }; |