[SDC-29] Amdocs OnBoard 1707 initial commit.

Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370
Signed-off-by: AviZi <avi.ziv@amdocs.com>

3 files changed, 79 insertions, 0 deletions

diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
new file mode 100644
index 0000000000..06cb98bbe8
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import uuid from 'uuid-js';
+
+export default class SelectActionTable extends React.Component {
+
+	render() {
+		let {columns, onAdd, isReadOnlyMode, children, onAddItem} = this.props;
+		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>}
+					<SVGIcon name='trash-o' 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>)}
+						<SVGIcon name='trash-o' className='dummy-icon' />
+						<SVGIcon name='trash-o' 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
new file mode 100644
index 0000000000..2664c8e944
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx
@@ -0,0 +1,20 @@
+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>
+	);
+};
+
+export default SelectActionTableCell;
diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
new file mode 100644
index 0000000000..17d8a17c09
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import SVGIcon from '../icon/SVGIcon.jsx';
+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>
+	);
+};
+
+const IconWithOverlay = ({overlayMsg}) => (
+	<OverlayTrigger placement='bottom' overlay={tooltip(overlayMsg)}>
+		<SVGIcon name='error-circle'/>
+	</OverlayTrigger>
+);
+
+const SelectActionTableRow = ({children, onDelete, hasError, overlayMsg}) => (
+	<div className='select-action-table-row-wrapper'>
+		<div className={`select-action-table-row ${hasError ? 'has-error' : ''}`}>
+			{children}
+		</div>
+		{onDelete ? <SVGIcon name='trash-o' data-test-id='select-action-table-delete' onClick={onDelete} /> : <SVGIcon name='angle-left' className='dummy-icon' />}		
+		{hasError ? overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> :  <SVGIcon name='error-circle'/>
+					: hasError === undefined ? <SVGIcon name='angle-left' className='dummy-icon'/> : <SVGIcon name='check-circle'/>}		
+		
+	</div>
+);
+
+export default SelectActionTableRow;