diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components')
14 files changed, 97 insertions, 36 deletions
diff --git a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx index 5fe592a663..1488c6c0bb 100644 --- a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx +++ b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx @@ -17,7 +17,6 @@ import React, {Component} from 'react'; import ListGroupItem from 'react-bootstrap/lib/ListGroupItem.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; -import Icon from 'nfvo-components/icon/Icon.jsx'; import {Collapse} from 'react-bootstrap'; /** * parsing and showing the following Java Response object @@ -145,8 +144,7 @@ class ErrorBlock extends React.Component { const ErrorHeader = ({errorType, collapsed, onClick}) => { return( <div onClick={onClick} className='error-block-header'> - <SVGIcon iconClassName={collapsed ? '' : 'right' } name='chevronDown'/> - {errorType} + <SVGIcon iconClassName={collapsed ? '' : 'collapse-right' } name='chevronDown' label={errorType} labelPosition='right'/> </div> ); }; @@ -154,7 +152,7 @@ const ErrorHeader = ({errorType, collapsed, onClick}) => { const ErrorMessage = ({error, warning}) => { return ( <ListGroupItem className='error-code-list-item'> - <Icon image={warning ? 'warning' : 'error'} label={error}/> + <SVGIcon name={warning ? 'warning' : 'error'} label={error} labelPosition='right' color={warning ? 'warning' : 'negative'} labelClassName='icon-label'/> </ListGroupItem> ); }; diff --git a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx index cd39376bda..f4673c1c93 100644 --- a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx +++ b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx @@ -17,10 +17,10 @@ class CustomInput extends React.Component { const text = date ? date : placeholderText; const textStyle = date ? '' : 'placeholder'; return ( - <div ref={inputRef} className='datepicker-custom-input'> - <div onClick={onClick} className={`datepicker-text ${textStyle}`}>{text}</div> - <div onClick={onClear} className='clear-input'/> - <SVGIcon onClick={onClick} name='calendar'/> + <div onClick={onClick} ref={inputRef} className='datepicker-custom-input'> + <div className={`datepicker-text ${textStyle}`}>{text}</div> + {date && <SVGIcon onClick={e => {e.stopPropagation(); onClear();}} name='close' className='clear-input'/>} + <SVGIcon name='calendar'/> </div> ); } diff --git a/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx b/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx new file mode 100644 index 0000000000..629b9449a2 --- /dev/null +++ b/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx @@ -0,0 +1,46 @@ +/*! + * 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. + */ +/** + * The HTML structure here is aligned with bootstrap HTML structure for form elements. + * In this way we have proper styling and it is aligned with other form elements on screen. + * + * Select and MultiSelect options: + * + * label - the label to be shown which paired with the input + * + * all other "react-select" props - as documented on + * http://jedwatson.github.io/react-select/ + * or + * https://github.com/JedWatson/react-select + */ +import React, {Component} from 'react'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import Button from 'sdc-ui/lib/react/Button.js'; + +class DraggableUploadFileBox extends Component { + render() { + let {className, onClick, dataTestId, isReadOnlyMode} = this.props; + return ( + <div + className={`${className}${isReadOnlyMode ? ' disabled' : ''}`}> + <div className={`${'drag-text'}${isReadOnlyMode ? ' disabled' : ''}`}>{i18n('Drag & drop for upload')}</div> + <div className='or-text'>{i18n('or')}</div> + <Button type='button' data-test-id={dataTestId} btnType='outline' onClick={onClick} disabled={isReadOnlyMode === true}>{i18n('Select File')}</Button> + </div> + ); + } +} +export default DraggableUploadFileBox; diff --git a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx index 7bbafa3696..23af72a26a 100644 --- a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx +++ b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx @@ -41,6 +41,7 @@ class ToggleInput extends React.Component { render() { let {label, disabled} = this.props; let checked = this.status() === 'on'; + //TODO check onclick return ( <div className='toggle-input-wrapper form-group' onClick={!disabled && this.click}> <div className='toggle-input-label'>{label}</div> diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx index 6e54254eb0..9b11d27c2b 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx @@ -64,7 +64,8 @@ class InputOptions extends React.Component { const dataTestId = this.props['data-test-id'] ? {'data-test-id': this.props['data-test-id']} : {}; let currentMultiSelectedEnum = []; let currentSelectedEnum = ''; - let {otherInputDisabled} = this.state; + let otherInputDisabled = (isMultiSelect && (multiSelectedEnum === undefined || multiSelectedEnum.length === 0 || multiSelectedEnum[0] !== other.OTHER)) + || (!isMultiSelect && (selectedEnum === undefined || selectedEnum !== other.OTHER)); if (isMultiSelect) { currentMultiSelectedEnum = multiSelectedEnum; if(!otherInputDisabled) { diff --git a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx index 95144b1468..6f33536b04 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx @@ -15,7 +15,7 @@ */ import React from 'react'; import ReactDOM from 'react-dom'; -import {default as BTabs} from 'react-bootstrap/lib/Tabs.js'; +import {default as SDCTabs} from 'sdc-ui/lib/react/Tabs.js'; import Overlay from 'react-bootstrap/lib/Overlay.js'; import Tooltip from 'react-bootstrap/lib/Tooltip.js'; @@ -33,15 +33,15 @@ class Tabs extends React.Component { return React.cloneElement( element, { - key: element.props.eventKey, - tabClassName: invalidTabs.indexOf(element.props.eventKey) > -1 ? 'invalid-tab' : 'valid-tab' + key: element.props.tabId, + className: invalidTabs.indexOf(element.props.tabId) > -1 ? 'invalid-tab' : 'valid-tab' } ); } showTabsError() { const {invalidTabs} = this.props; - const showError = ((invalidTabs.length === 1 && invalidTabs[0] !== this.props.activeKey) || (invalidTabs.length > 1)); + const showError = ((invalidTabs.length === 1 && invalidTabs[0] !== this.props.activeTab) || (invalidTabs.length > 1)); return showError; } @@ -50,21 +50,20 @@ class Tabs extends React.Component { let {invalidTabs, ...tabProps} = this.props; return ( <div> - <BTabs {...tabProps} ref='tabsList' id='tabsList' > + <SDCTabs {...tabProps} ref='tabsList' id='tabsList' > {this.props.children.map(element => this.cloneTab(element))} - </BTabs> + </SDCTabs> <Overlay animation={false} show={this.showTabsError()} placement='bottom' - containerPadding={50} target={() => { - let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.active):nth-of-type(n)'); + let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)'); return target && target.offsetParent ? target : undefined; } } container={() => { - let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.active):nth-of-type(n)'); + let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)'); return target && target.offsetParent ? target.offsetParent : this; }}> <Tooltip diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx index 8d7c63f567..bed304b756 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx +++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx @@ -39,7 +39,7 @@ class ListEditorItem extends React.Component { </div> {(onEdit || onDelete) && <div className='list-editor-item-view-controller'> {onEdit && <SVGIcon name='sliders' onClick={() => this.onClickedItem(onEdit)}/>} - {onDelete && isAbilityToDelete && <SVGIcon name='trashO' onClick={() => this.onClickedItem(onDelete)}/>} + {onDelete && isAbilityToDelete && <SVGIcon name='trashO' data-test-id='delete-list-item' onClick={() => this.onClickedItem(onDelete)}/>} </div>} </div> ); diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx index cc805e9ada..df7d69b4ff 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx +++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import Button from 'sdc-ui/lib/react/Button.js'; import classnames from 'classnames'; import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx'; @@ -21,11 +22,9 @@ const ListEditorHeader = ({onAdd, isReadOnlyMode, title, plusButtonTitle}) => { return ( <div className='list-editor-view-header'> {title && <div className='list-editor-view-title'>{title}</div>} - <div className={`list-editor-view-add-controller${isReadOnlyMode ? ' disabled' : ''}`}> + <div> { onAdd && - <div className='list-editor-view-add-title' data-test-id='add-button' onClick={onAdd}> - <span>{`+ ${plusButtonTitle}`}</span> - </div> + <Button data-test-id='add-button' iconName='plusThin' btnType='link' onClick={onAdd} disabled={isReadOnlyMode === true}>{plusButtonTitle}</Button> } </div> </div> diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js index 825cc609a8..e05c2ac616 100644 --- a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js +++ b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js @@ -31,21 +31,35 @@ const typeClass = { success: 'positive' }; +const type2HeaderColor = { + 'default': 'primary', + error: 'danger', + warning: 'warning', + success: 'success' +}; + -const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) => +const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) => { + let myPropsForNoConfirmed = {}; + if (onConfirmed) { + myPropsForNoConfirmed.btnType = 'outline'; + } + return ( <Modal.Footer> <div className='sdc-modal-footer'> {onConfirmed && <Button color={typeClass[type]} onClick={() => { onConfirmed(); onClose(); }}>{confirmationButtonText}</Button>} - <Button btnType='outline' color={typeClass[type]} onClick={onDeclined ? () => { + <Button {...myPropsForNoConfirmed} color={typeClass[type]} onClick={onDeclined ? () => { onDeclined(); onClose();} : () => onClose()}> {cancelButtonText} </Button> </div> - </Modal.Footer>; + </Modal.Footer> + ); +}; ModalFooter.defaultProps = { type: 'default', @@ -93,7 +107,7 @@ export class GlobalModalView extends React.Component { modalClassName, msg, onConfirmed, onDeclined, confirmationButtonText, cancelButtonText, onClose} = this.props; const ComponentToRender = modalContentComponents[modalComponentName]; return ( - <Modal show={show} bsSize={modalComponentProps && modalComponentProps.size} className={`onborading-modal ${modalClassName || ''} ${typeClass[type]}`}> + <Modal show={show} bsSize={modalComponentProps && modalComponentProps.size} className={`onborading-modal ${modalClassName || ''} ${type2HeaderColor[type]}`}> <Modal.Header> <Modal.Title>{title}</Modal.Title> </Modal.Header> diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx index 3b89137090..fb3b71f0c8 100644 --- a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx +++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx @@ -109,6 +109,7 @@ function NavigationMenuItem(props) { function NavigationLink(props) { const {item, activeItemId, onClick} = props; + // todo should this be button return ( <div key={'navAction_' + item.id} diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx index ecfe7df116..922db05282 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx +++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx @@ -154,7 +154,7 @@ function VCButton({name, tooltipText, isDisabled, onClick, dataTestId}) { 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}/> + <SVGIcon data-test-id={dataTestId} disabled={isDisabled} onClick={onClickAction ? onClickAction : undefined} name={name}/> </div> </OverlayTrigger> ); diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js index 9af142433c..c2548e4fb4 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js +++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js @@ -33,7 +33,7 @@ export const statusEnum = keyMirror({ export const statusBarTextMap = keyMirror({ 'Locked': 'Checked Out', - 'LockedByUser': '', + 'LockedByUser': 'Locked', 'Available': 'Checked In', 'Final': 'Submitted', 'READ ONLY': 'Locked' diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx index 6c04ad74fd..3f8dbba53a 100644 --- a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx @@ -1,6 +1,7 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; +import Button from 'sdc-ui/lib/react/Button.js'; import uuid from 'uuid-js'; export default class SelectActionTable extends React.Component { @@ -10,13 +11,14 @@ export default class SelectActionTable extends React.Component { return ( <div className={`select-action-table-view ${isReadOnlyMode ? 'disabled' : ''}`}> <div className='select-action-table-controllers'> - {onAdd && onAddItem && <div data-test-id='select-action-table-add' onClick={onAdd}>{onAddItem}</div>} + {onAdd && onAddItem && + <Button btnType='link' disabled={isReadOnlyMode === true} color='primary' iconName='plus' data-test-id='select-action-table-add' onClick={onAdd}>{onAddItem}</Button>} <SVGIcon name='trashO' className='dummy-icon' /> </div> <div className='select-action-table'> <div className='select-action-table-headers'> {columns.map(column => <div key={uuid.create()} className='select-action-table-header'>{i18n(column)}</div>)} - {Array(numOfIcons).fill().map(() => <SVGIcon name='trashO' className='dummy-icon' />)} + {Array(numOfIcons).fill().map((e, i) => <SVGIcon name='trash-o' key={i} className='dummy-icon' />)} </div> <div className='select-action-table-body'> {children} diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx index a711b42918..a03f8441a4 100644 --- a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx @@ -11,7 +11,7 @@ function tooltip (msg) { const IconWithOverlay = ({overlayMsg}) => ( <OverlayTrigger placement='bottom' overlay={tooltip(overlayMsg)}> - <SVGIcon name='errorCircle'/> + <SVGIcon name='errorCircle' color='negative'/> </OverlayTrigger> ); @@ -21,18 +21,18 @@ function renderErrorOrCheck({hasError, overlayMsg}) { } if (hasError) { - return overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> : <SVGIcon name='errorCircle'/>; + return overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> : <SVGIcon color='negative' name='errorCircle'/>; } - return <SVGIcon name='checkCircle'/>; + return <SVGIcon name='checkCircle' color='positive'/>; } -const SelectActionTableRow = ({children, onDelete, hasError, hasErrorIndication, overlayMsg}) => ( +const SelectActionTableRow = ({children, onDelete, hasError, hasErrorIndication, overlayMsg, showDelete}) => ( <div className='select-action-table-row-wrapper'> <div className={`select-action-table-row ${hasError ? 'has-error' : ''}`}> {children} </div> - {onDelete && <SVGIcon name='trashO' data-test-id='select-action-table-delete' onClick={onDelete} />} + {onDelete && <SVGIcon color='secondary' name='trashO' data-test-id='select-action-table-delete' onClick={onDelete} iconClassName={(showDelete) ? '' : 'hideDelete'}/>} {hasErrorIndication && renderErrorOrCheck({hasError, overlayMsg})} </div> ); |