aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/table
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/nfvo-components/table')
-rw-r--r--openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx75
-rw-r--r--openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx36
-rw-r--r--openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx77
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;