diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/table')
3 files changed, 127 insertions, 61 deletions
diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx index 3f8dbba53a..ee8a9dca45 100644 --- a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx @@ -5,26 +5,57 @@ import Button from 'sdc-ui/lib/react/Button.js'; import uuid from 'uuid-js'; export default class SelectActionTable extends React.Component { - - render() { - let {columns, onAdd, isReadOnlyMode, children, onAddItem, numOfIcons} = this.props; - return ( - <div className={`select-action-table-view ${isReadOnlyMode ? 'disabled' : ''}`}> - <div className='select-action-table-controllers'> - {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((e, i) => <SVGIcon name='trash-o' key={i} className='dummy-icon' />)} - </div> - <div className='select-action-table-body'> - {children} - </div> - </div> - </div> - ); - } + render() { + let { + columns, + onAdd, + isReadOnlyMode, + children, + onAddItem, + numOfIcons + } = this.props; + return ( + <div + className={`select-action-table-view ${ + isReadOnlyMode ? 'disabled' : '' + }`}> + <div className="select-action-table-controllers"> + {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((e, i) => ( + <SVGIcon + name="trash-o" + key={i} + className="dummy-icon" + /> + ))} + </div> + <div className="select-action-table-body">{children}</div> + </div> + </div> + ); + } } diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx index 2664c8e944..20e4f2413c 100644 --- a/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx @@ -1,20 +1,28 @@ import React from 'react'; import SelectInput from 'nfvo-components/input/SelectInput.jsx'; -const SelectActionTableCell = ({options, selected, disabled, onChange, clearable = true, placeholder}) => { - return ( - <div className='select-action-table-cell'> - <SelectInput - placeholder={placeholder} - type='select' - value={selected} - data-test-id='select-action-table-dropdown' - disabled={disabled} - onChange={option => onChange(option ? option.value : null)} - clearable={clearable} - options={options} /> - </div> - ); +const SelectActionTableCell = ({ + options, + selected, + disabled, + onChange, + clearable = true, + placeholder +}) => { + return ( + <div className="select-action-table-cell"> + <SelectInput + placeholder={placeholder} + type="select" + value={selected} + data-test-id="select-action-table-dropdown" + disabled={disabled} + onChange={option => onChange(option ? option.value : null)} + clearable={clearable} + options={options} + /> + </div> + ); }; export default SelectActionTableCell; diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx index 260d39d31c..1c2c1529f2 100644 --- a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx @@ -3,38 +3,65 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; import Tooltip from 'react-bootstrap/lib/Tooltip.js'; -function tooltip (msg) { - return ( - <Tooltip className='select-action-table-error-tooltip' id='error-tooltip'>{msg}</Tooltip> - ); -}; +function tooltip(msg) { + return ( + <Tooltip + className="select-action-table-error-tooltip" + id="error-tooltip"> + {msg} + </Tooltip> + ); +} -const IconWithOverlay = ({overlayMsg}) => ( - <OverlayTrigger placement='bottom' overlay={tooltip(overlayMsg)}> - <SVGIcon name='errorCircle' color='negative'/> - </OverlayTrigger> +const IconWithOverlay = ({ overlayMsg }) => ( + <OverlayTrigger placement="bottom" overlay={tooltip(overlayMsg)}> + <SVGIcon name="errorCircle" color="negative" /> + </OverlayTrigger> ); -function renderErrorOrCheck({hasError, overlayMsg}) { - if (hasError === undefined) { - return <SVGIcon name='angleRight' className='dummy-icon' />; - } +function renderErrorOrCheck({ hasError, overlayMsg }) { + if (hasError === undefined) { + return <SVGIcon name="angleRight" className="dummy-icon" />; + } - if (hasError) { - return overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> : <SVGIcon color='negative' name='errorCircle'/>; - } + if (hasError) { + return overlayMsg ? ( + <IconWithOverlay overlayMsg={overlayMsg} /> + ) : ( + <SVGIcon color="negative" name="errorCircle" /> + ); + } - return <SVGIcon name='checkCircle' color='positive'/>; + return <SVGIcon name="checkCircle" color="positive" />; } -const SelectActionTableRow = ({children, actionIcon, onAction, showAction, hasError, hasErrorIndication, overlayMsg}) => ( - <div className='select-action-table-row-wrapper'> - <div className={`select-action-table-row ${hasError ? 'has-error' : ''}`}> - {children} - </div> - {onAction && <SVGIcon color='secondary' name={actionIcon} data-test-id={`select-action-table-${actionIcon}`} onClick={onAction} iconClassName={(showAction) ? '' : 'hideDelete'}/>} - {hasErrorIndication && renderErrorOrCheck({hasError, overlayMsg})} - </div> +const SelectActionTableRow = ({ + children, + actionIcon, + onAction, + showAction, + hasError, + hasErrorIndication, + overlayMsg +}) => ( + <div className="select-action-table-row-wrapper"> + <div + className={`select-action-table-row ${ + hasError ? 'has-error' : '' + }`}> + {children} + </div> + {onAction && ( + <SVGIcon + color="secondary" + name={actionIcon} + data-test-id={`select-action-table-${actionIcon}`} + onClick={onAction} + iconClassName={showAction ? '' : 'hideDelete'} + /> + )} + {hasErrorIndication && renderErrorOrCheck({ hasError, overlayMsg })} + </div> ); export default SelectActionTableRow; |