[SDC] Onboarding 1710 rebase.

Change-Id: If3b6b81d221fde13908f1e8160db6f7d9433c535
Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>

22 files changed, 210 insertions, 405 deletions

diff --git a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
index 0759f2c28d..5fe592a663 100644
--- a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
+++ b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
@@ -16,7 +16,7 @@
 import React, {Component} from 'react';
 import ListGroupItem from 'react-bootstrap/lib/ListGroupItem.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import Icon from 'nfvo-components/icon/Icon.jsx';
 import {Collapse} from 'react-bootstrap';
 /**
@@ -145,7 +145,7 @@ class ErrorBlock extends React.Component {
 const ErrorHeader = ({errorType, collapsed, onClick}) => {
 	return(
 		<div onClick={onClick} className='error-block-header'>
-			<SVGIcon iconClassName={collapsed ? '' : 'right' } name='chevron-down'/>
+			<SVGIcon iconClassName={collapsed ? '' : 'right' } name='chevronDown'/>
 			{errorType}
 		</div>
 	);
diff --git a/openecomp-ui/src/nfvo-components/activity-log/ActivityLog.js b/openecomp-ui/src/nfvo-components/activity-log/ActivityLog.js
deleted file mode 100644
index f7354f96e2..0000000000
--- a/openecomp-ui/src/nfvo-components/activity-log/ActivityLog.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/*!
- * 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 {connect} from 'react-redux';
-import ActivityLogView from './ActivityLogView.jsx';
-
-export const mapStateToProps = ({licenseModel: {activityLog}}) => {
-
-	let activities = activityLog;
-	return {
-		activities
-	};
-};
-
-export default connect(mapStateToProps, undefined, null, {withRef: true})(ActivityLogView);
diff --git a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogActionHelper.js b/openecomp-ui/src/nfvo-components/activity-log/ActivityLogActionHelper.js
deleted file mode 100644
index 01a27abbc5..0000000000
--- a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogActionHelper.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/*!
- * 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 RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
-import Configuration from 'sdc-app/config/Configuration.js';
-import ActivityLogConstants from './ActivityLogConstants.js';
-
-
-function baseUrl(itemId, versionId) {
-	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/activity-logs/${itemId}/versions/${versionId}`;
-}
-
-export default {
-
-	fetchActivityLog(dispatch, {itemId, versionId}){
-		return RestAPIUtil.fetch(baseUrl(itemId, versionId)).then(response => dispatch({type: ActivityLogConstants.ACTIVITY_LOG_UPDATED, response}));
-	}
-};
diff --git a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogConstants.js b/openecomp-ui/src/nfvo-components/activity-log/ActivityLogConstants.js
deleted file mode 100644
index 69faf7cbb6..0000000000
--- a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogConstants.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*!
- * 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 keyMirror from 'nfvo-utils/KeyMirror.js';
-
-export default keyMirror({
-
-	ACTIVITY_LOG_UPDATED: null
-
-});
-
diff --git a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogReducer.js b/openecomp-ui/src/nfvo-components/activity-log/ActivityLogReducer.js
deleted file mode 100644
index fc3dfa1515..0000000000
--- a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogReducer.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/*!
- * 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 ActivityLogConstants from './ActivityLogConstants.js';
-
-export default (state = [], action) => {
-	switch (action.type) {
-		case ActivityLogConstants.ACTIVITY_LOG_UPDATED:
-			return [...action.response.results];
-	}
-
-	return state;
-};
diff --git a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogView.jsx b/openecomp-ui/src/nfvo-components/activity-log/ActivityLogView.jsx
deleted file mode 100644
index 6ff3c806a8..0000000000
--- a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogView.jsx
+++ /dev/null
@@ -1,124 +0,0 @@
-/*!
- * 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, {Component} from 'react';
-import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
-import Tooltip from 'react-bootstrap/lib/Tooltip.js';
-import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
-import i18n from 'nfvo-utils/i18n/i18n.js';
-
-function ActivityLogSortableCellHeader({isHeader, data, isDes, onSort}) {
-	if (isHeader) {
-		return (
-			<span className='date-header' onClick={onSort}>
-				<span>{data}</span>
-				<span className={`header-sort-arrow ${isDes ? 'up' : 'down'}`}></span>
-			</span>
-		);
-	}
-	return (
-		<span className='date-cell'>
-			<span>{i18n.dateNormal(data, {
-				year: 'numeric', month: 'numeric', day: 'numeric'
-			})}</span>
-			<span>{i18n.dateNormal(data, {
-				hour: 'numeric', minute: 'numeric',
-				hour12: true
-			})}</span>
-		</span>
-	);
-}
-
-function ActivityLogStatus({status, isHeader}) {
-	if (isHeader) {
-		return <span>{status}</span>;
-	}
-	let {message, success} = status;
-	return (
-		<span>
-			<span className={`status-icon ${success}`}>{`${success ? i18n('Success') : i18n('Failure')}`}</span>
-			{success && <SVGIcon name='check-circle'/>}
-			{!success && <OverlayTrigger placement='bottom' overlay={<Tooltip className='activity-log-message-tooltip' id={'activity-log-message-tooltip'}>
-				<div className='message-block'>{message}</div>
-			</Tooltip>}>
-				<span className='message-further-info-icon'>{'?'}</span>
-			</OverlayTrigger>}
-		</span>
-	);
-}
-
-export function ActivityListItem({activity, isHeader, isDes, onSort}) {
-	let {type, timestamp, comment, user, status} = activity;
-	return (
-		<li className={`activity-list-item ${isHeader ? 'header' : ''}`} data-test-id='activity-list-item'>
-			<div className='table-cell activity-date' data-test-id='activity-date'><ActivityLogSortableCellHeader isHeader={isHeader} data={timestamp} isDes={isDes} onSort={onSort}/></div>
-			<div className='table-cell activity-action' data-test-id='activity-action'>{type}</div>
-			<div className='table-cell activity-comment' title={comment} data-test-id='activity-comment'><span>{comment}</span></div>
-			<div className='table-cell activity-username' data-test-id='activity-username'>{user}</div>
-			<div className='table-cell activity-status' data-test-id='activity-status'><ActivityLogStatus isHeader={isHeader} status={status}/></div>
-		</li>
-	);
-}
-
-class ActivityLogView extends Component {
-
-	state = {
-		localFilter: '',
-		sortDescending: true
-	};
-
-	render() {
-		return (
-			<div className='activity-log-view'>
-				<ListEditorView
-					title={i18n('Activity Log')}
-					filterValue={this.state.localFilter}
-					onFilter={filter => this.setState({localFilter: filter})}>
-					<ActivityListItem
-						isHeader={true}
-						activity={{timestamp: 'Date', type: 'Action', comment: 'Comment', user: 'Username', status: 'Status'}}
-						isDes={this.state.sortDescending}
-						onSort={() => this.setState({sortDescending: !this.state.sortDescending})}/>
-					{this.sortActivities(this.filterActivities(), this.state.sortDescending).map(activity => <ActivityListItem key={activity.id} activity={activity}/>)}
-				</ListEditorView>
-			</div>
-		);
-	}
-
-	filterActivities() {
-		let {activities} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return activities.filter(({user = '', comment = '', type = ''}) => escape(user).match(filter) || escape(comment).match(filter) || escape(type).match(filter));
-		}
-		else {
-			return activities;
-		}
-	}
-
-	sortActivities(activities) {
-		if (this.state.sortDescending) {
-			return activities.sort((a, b) => a.timestamp - b.timestamp);
-		}
-		else {
-			return activities.reverse();
-		}
-	}
-
-}
-
-export default ActivityLogView;
diff --git a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
new file mode 100644
index 0000000000..cd39376bda
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import DatePicker from 'react-datepicker';
+import moment from 'moment';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
+
+class CustomInput extends React.Component {
+
+	static propTypes = {
+		placeHolderText: React.PropTypes.string,
+		onChange: React.PropTypes.func,
+		onClick: React.PropTypes.func,
+		value: React.PropTypes.string
+	};
+
+	render() {
+		const {placeholderText, onClick, onClear, inputRef, value: date} = this.props;
+		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>
+		);
+	}
+};
+
+const parseDate = (date, format) => {
+	return typeof date === 'number' ? moment.unix(date) : moment(date, format);
+};
+
+class Datepicker extends React.Component {
+	static propTypes = {
+		date: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
+		format: React.PropTypes.string,
+		onChange: React.PropTypes.func,
+		selectsStart: React.PropTypes.bool,
+		selectsEnd: React.PropTypes.bool,
+		startDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
+		endDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
+		disabled: React.PropTypes.bool,
+		label: React.PropTypes.string,
+		isRequired: React.PropTypes.bool
+	}
+	render() {
+		let {date,  format, onChange, selectsStart = false, startDate = null, endDate = null, selectsEnd = false,
+			disabled = false, inputRef} = this.props;
+		const placeholderText =  'Enter a date';
+		const props = {
+			format,
+			onChange,
+			disabled,
+			selected: date ? parseDate(date, format) : date,
+			selectsStart,
+			selectsEnd,
+			placeholderText,
+			startDate: startDate ? parseDate(startDate, format) : startDate,
+			endDate: endDate ? parseDate(endDate, format) : endDate
+		};
+
+		return (
+			<div className='customized-date-picker'>
+				<DatePicker
+					calendarClassName='customized-date-picker-calendar'
+					customInput={<CustomInput inputRef={inputRef} onClear={() => onChange(undefined)} placeholderText={placeholderText}/>}
+					minDate={selectsEnd && props.startDate}
+					maxDate={selectsStart && props.endDate}
+					{...props}/>
+			</div>
+		);
+	}
+}
+
+export default Datepicker;
diff --git a/openecomp-ui/src/nfvo-components/grid/GridSection.jsx b/openecomp-ui/src/nfvo-components/grid/GridSection.jsx
index 175b3ee082..de8a4f3e64 100644
--- a/openecomp-ui/src/nfvo-components/grid/GridSection.jsx
+++ b/openecomp-ui/src/nfvo-components/grid/GridSection.jsx
@@ -14,10 +14,11 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import classnames from 'classnames';
 
-const GridSection = ({title, children, titleClassName}) => {
+const GridSection = ({title, children, className, titleClassName}) => {
 	return (
-		<div className='grid-section'>
+		<div className={classnames('grid-section', className)}>
 			{title && <div className={`section-title ${titleClassName || ''}`}>{title}</div>}
 			<div className='grid-items'>
 				{children}
diff --git a/openecomp-ui/src/nfvo-components/icon/SVGIcon.jsx b/openecomp-ui/src/nfvo-components/icon/SVGIcon.jsx
deleted file mode 100644
index dd165fb52c..0000000000
--- a/openecomp-ui/src/nfvo-components/icon/SVGIcon.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/*!
- * 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, {PropTypes} from 'react';
-import Configuration from 'sdc-app/config/Configuration.js';
-
-export default class SVGIcon extends React.Component {
-
-	static propTypes = {
-		name: PropTypes.string.isRequired,
-		onClick: PropTypes.func,
-		label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-		labelPosition: PropTypes.string,
-		className: PropTypes.string,
-		iconClassName: PropTypes.string,
-		labelClassName: PropTypes.string
-	};
-
-	static defaultProps = {
-		name: '',
-		label: '',
-		className: '',
-		iconClassName: '',
-		labelClassName: '',
-		labelPosition: 'bottom'
-	};
-
-	render() {
-		let {name, onClick, label, className, iconClassName, labelClassName, labelPosition, ...other} = this.props;
-		let classes = `svg-icon-wrapper ${className} ${onClick ? 'clickable' : ''} ${labelPosition}`;
-
-		return (
-			<div {...other} onClick={onClick} className={classes}>
-				<svg className={`svg-icon ${name} ${iconClassName}`}  >
-					<use href={Configuration.get('appContextPath') + '/resources/images/svg/' + this.props.name + '.svg#' + this.props.name + '_icon' }
-						 xlinkHref={Configuration.get('appContextPath') + '/resources/images/svg/' + this.props.name + '.svg#' + this.props.name + '_icon' } />
-				</svg>
-				{label && <span className={`svg-icon-label ${labelClassName}`}>{label}</span>}
-			</div>
-		);
-	}
-}
diff --git a/openecomp-ui/src/nfvo-components/icon/SVGIcon.stories.js b/openecomp-ui/src/nfvo-components/icon/SVGIcon.stories.js
deleted file mode 100644
index 6675670cea..0000000000
--- a/openecomp-ui/src/nfvo-components/icon/SVGIcon.stories.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import {storiesOf, action} from '@kadira/storybook';
-import {select, text, withKnobs} from '@kadira/storybook-addon-knobs';
-import SVGIcon from './SVGIcon.jsx';
-
-const stories = storiesOf('SVGIcon', module);
-
-const iconNames = ['locked',
-    'pencil',
-    'plus-circle',
-    'plus',
-    'search',
-    'sliders',
-    'trash-o',
-    'unlocked',
-    'vendor',
-    'version-controller-lock-closed',
-    'version-controller-lock-open',
-    'version-controller-revert',
-    'version-controller-save',
-    'version-controller-submit',
-    'vlm',
-    'vsp' ];
-
-function colorChanger() {
-    return {fill: text('Color', '')};
-}
-
-function iconName() {
-    return select('Icon name' , iconNames, iconNames[0]);
-}
-
-stories.addDecorator(withKnobs);
-
-stories
-    .add('icon', () => {
-        return (
-            <SVGIcon name={iconName()} style={colorChanger()}/>
-        );
-    })
-    .add('icon with label', () => {
-        return (
-            <SVGIcon name={iconName()} label={iconName()} style={colorChanger()}/>
-        );
-    })
-    .add('locked clickable', () => {
-        return (
-            <SVGIcon name={iconName()} onClick={action('clicked')} style={colorChanger()}/>
-        );
-    });
\ No newline at end of file
diff --git a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
index e2ee40fcd2..eab1d45ef4 100644
--- a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
@@ -15,11 +15,11 @@
  */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
 
 const ExpandableInputClosed = ({iconType, onClick}) => (
-	<SVGIcon className='expandable-input-wrapper closed' name={iconType} onClick={onClick} />
+	<SVGIcon className='expandable-input-wrapper closed'  data-test-id='expandable-input-closed' name={iconType} onClick={onClick} />
 );
 
 class ExpandableInputOpened extends React.Component {
@@ -58,6 +58,7 @@ class ExpandableInputOpened extends React.Component {
 				<div className='expandable-input-wrapper opened' key='expandable'>
 					<Input
 						type='text'
+						data-test-id='expandable-input-opened'
 						value={value}
 						ref={(input) => this.searchInputNode = input}
 						className='expandable-active'
@@ -65,7 +66,7 @@ class ExpandableInputOpened extends React.Component {
 						onChange={e => onChange(e)}
 						onKeyDown={e => this.handleKeyDown(e)}
 						onBlur={handleBlur}/>
-					{value && <SVGIcon onClick={() => this.handleClose()} name='close' />}
+					{value && <SVGIcon data-test-id='expandable-input-close-btn' onClick={() => this.handleClose()} name='close' />}
 					{!value && <SVGIcon name={iconType} onClick={handleBlur}/>}
 				</div>
 		);
diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
index c60d6f777e..a3be363ba4 100644
--- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
+++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
@@ -14,7 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
 
 class DualListboxView extends React.Component {
@@ -118,10 +118,10 @@ class DualListboxView extends React.Component {
 	renderOperationsBar(isReadOnlyMode) {
 		return (
 			<div className={`dual-list-options-bar${isReadOnlyMode ? ' disabled' : ''}`}>
-				{this.renderOperationBarButton(() => this.addToSelectedList(), 'angle-right')}
-				{this.renderOperationBarButton(() => this.removeFromSelectedList(), 'angle-left')}
-				{this.renderOperationBarButton(() => this.addAllToSelectedList(), 'angle-double-right')}
-				{this.renderOperationBarButton(() => this.removeAllFromSelectedList(), 'angle-double-left')}
+				{this.renderOperationBarButton(() => this.addToSelectedList(), 'angleRight')}
+				{this.renderOperationBarButton(() => this.removeFromSelectedList(), 'angleLeft')}
+				{this.renderOperationBarButton(() => this.addAllToSelectedList(), 'angleDoubleRight')}
+				{this.renderOperationBarButton(() => this.removeAllFromSelectedList(), 'angleDoubleLeft')}
 			</div>
 		);
 	}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
index 98810d1c0d..8d53322587 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
@@ -25,7 +25,9 @@ class Form extends React.Component {
 		onReset :  null,
 		labledButtons: true,
 		onValidChange :  null,
-		isValid: true
+		isValid: true,
+		submitButtonText: null,
+		cancelButtonText: null
 	};
 
 	static propTypes = {
@@ -36,6 +38,8 @@ class Form extends React.Component {
 		onSubmit : React.PropTypes.func,
 		onReset : React.PropTypes.func,
 		labledButtons: React.PropTypes.bool,
+		submitButtonText: React.PropTypes.string,
+		cancelButtonText: React.PropTypes.string,
 		onValidChange : React.PropTypes.func,
 		onValidityChanged: React.PropTypes.func,
 		onValidateForm: React.PropTypes.func
@@ -48,7 +52,8 @@ class Form extends React.Component {
 
 	render() {
 		// eslint-disable-next-line no-unused-vars
-		let {isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children, ...formProps} = this.props;
+		let {isValid, onValidChange, onValidityChanged, onDataChanged, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, submitButtonText,
+			 cancelButtonText, children, ...formProps} = this.props;
 		return (
 			<form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
 				<div className='validation-form-content'>
@@ -56,7 +61,13 @@ class Form extends React.Component {
 						{children}
 					</fieldset>
 				</div>
-				{hasButtons && <ValidationButtons labledButtons={labledButtons} ref={(buttons) => this.buttons = buttons} isReadOnlyMode={isReadOnlyMode}/>}
+				{hasButtons && 
+					<ValidationButtons 
+						labledButtons={labledButtons} 
+						submitButtonText={submitButtonText} 
+						cancelButtonText={cancelButtonText} 
+						ref={(buttons) => this.buttons = buttons} 
+						isReadOnlyMode={isReadOnlyMode}/>}
 			</form>
 		);
 	}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
index 59c35d7993..eef8fee1ce 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
@@ -22,6 +22,7 @@ import FormGroup from 'react-bootstrap/lib/FormGroup.js';
 import FormControl from 'react-bootstrap/lib/FormControl.js';
 import Overlay from 'react-bootstrap/lib/Overlay.js';
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
+import Datepicker from 'nfvo-components/datepicker/Datepicker.jsx';
 
 class Input extends React.Component {
 
@@ -29,13 +30,14 @@ class Input extends React.Component {
 		value: this.props.value,
 		checked: this.props.checked,
 		selectedValues: []
-	}
+	};
 
 	render() {
 		const {label, isReadOnlyMode, value, onBlur, onKeyDown, type, disabled, checked, name} = this.props;
 		// eslint-disable-next-line no-unused-vars
-		const {groupClassName, isValid = true, errorText, isRequired,  ...inputProps} = this.props;
-		let wrapperClassName = (type !== 'radio') ? 'validation-input-wrapper' : 'form-group';
+		const {groupClassName, isValid = true, errorText, isRequired,  overlayPos, ...inputProps} = this.props;
+		const {dateFormat, startDate, endDate, selectsStart, selectsEnd} = this.props; // Date Props
+		let wrapperClassName = (type !== 'radio') ? 'validation-input-wrapper' : 'validation-radio-wrapper';
 		if (disabled) {
 			wrapperClassName += ' disabled';
 		}
@@ -43,7 +45,7 @@ class Input extends React.Component {
 			<div className={wrapperClassName}>
 				<FormGroup className={classNames('form-group', [groupClassName], {'required' : isRequired , 'has-error' : !isValid})} >
 					{(label && (type !== 'checkbox' && type !== 'radio')) && <label className='control-label'>{label}</label>}
-					{(type === 'text' || type === 'number') &&
+					{type === 'text'  &&
 					<FormControl
 						bsClass={'form-control input-options-other'}
 						onChange={(e) => this.onChange(e)}
@@ -54,6 +56,17 @@ class Input extends React.Component {
 						inputRef={(input) => this.input = input}
 						type={type}
 						data-test-id={this.props['data-test-id']}/>}
+					{type === 'number' &&
+					<FormControl
+						bsClass={'form-control input-options-other'}
+						onChange={(e) => this.onChange(e)}
+						disabled={isReadOnlyMode || Boolean(disabled)}
+						onBlur={onBlur}
+						onKeyDown={onKeyDown}
+						value={(value !== undefined) ? value : ''}
+						inputRef={(input) => this.input = input}
+						type={type}
+						data-test-id={this.props['data-test-id']}/>}
 
 					{type === 'textarea' &&
 					<FormControl
@@ -81,6 +94,7 @@ class Input extends React.Component {
 						   disabled={isReadOnlyMode || Boolean(disabled)}
 						   value={value}
 						   onChange={(e)=>this.onChangeRadio(e)}
+						   inputRef={(input) => this.input = input}
 						   data-test-id={this.props['data-test-id']}>{label}</Radio>}
 					{type === 'select' &&
 					<FormControl onClick={ (e) => this.optionSelect(e) }
@@ -88,6 +102,18 @@ class Input extends React.Component {
 						 inputRef={(input) => this.input = input}
 						 name={name} {...inputProps}
 						 data-test-id={this.props['data-test-id']}/>}
+					{type === 'date' && 
+					<Datepicker 
+						date={value}
+						format={dateFormat}
+						startDate={startDate}
+						endDate={endDate}
+						inputRef={(input) => this.input = input}
+						onChange={this.props.onChange}
+						disabled={isReadOnlyMode || Boolean(disabled)}
+						data-test-id={this.props['data-test-id']}
+						selectsStart={selectsStart}
+						selectsEnd={selectsEnd} />}
 				</FormGroup>
 				{ this.renderErrorOverlay() }
 			</div>
@@ -116,7 +142,11 @@ class Input extends React.Component {
 		const {onChange, type} = this.props;
 		let value = e.target.value;
 		if (type === 'number') {
-			value = Number(value);
+			if (value === '') {
+				value = undefined;
+			} else {
+				value = Number(value);
+			}
 		}
 		this.setState({
 			value
@@ -154,7 +184,9 @@ class Input extends React.Component {
 		else if (type === 'text'
 			|| type === 'email'
 			|| type === 'number'
-			|| type === 'password') {
+			|| type === 'radio'
+			|| type === 'password'
+			|| type === 'date') {
 			position = 'bottom';
 		}
 
diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
index 5ca716cc20..6c8115deee 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
@@ -71,6 +71,7 @@ class InputWrapper extends React.Component {
 						checked={checked}
 						disabled={isReadOnlyMode || Boolean(disabled)}
 						value={value}
+						ref={(input) => this.inputWrapper = input}
 						onChange={(e)=>this.onChangeRadio(e)}
 						data-test-id={this.props['data-test-id']}>{label}</Radio>}
 				{type === 'select' &&
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
index ebb1473c04..c3808dd2c3 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
@@ -22,14 +22,16 @@
  */
 import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import Button from 'react-bootstrap/lib/Button.js';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import Button from 'sdc-ui/lib/react/Button.js';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 
 class ValidationButtons extends React.Component {
 
 	static propTypes = {
 		labledButtons: React.PropTypes.bool.isRequired,
-		isReadOnlyMode: React.PropTypes.bool
+		isReadOnlyMode: React.PropTypes.bool,
+		submitButtonText: React.PropTypes.string,
+		cancelButtonText: React.PropTypes.string
 	};
 
 	state = {
@@ -37,16 +39,16 @@ class ValidationButtons extends React.Component {
 	};
 
 	render() {
-		var submitBtn = this.props.labledButtons ? i18n('Save') : <SVGIcon className='check' name='check'/>;
-		var closeBtn = this.props.labledButtons ? i18n('Cancel') : <SVGIcon className='close' name='close'/>;
+		let submitBtn = this.props.labledButtons ? this.props.submitButtonText ? this.props.submitButtonText : i18n('Save') : <SVGIcon className='check' name='check'/>;
+		let closeBtn = this.props.labledButtons ? this.props.cancelButtonText ? this.props.cancelButtonText : i18n('Cancel') : <SVGIcon className='close' name='close'/>;
 		return (
 			<div className='validation-buttons'>
 				{!this.props.isReadOnlyMode ?
 					<div>
-						<Button  bsStyle='primary' ref='submitbutton' type='submit' disabled={!this.state.isValid}>{submitBtn}</Button>
-						<Button  type='reset'>{closeBtn}</Button>
+						<Button type='submit' disabled={!this.state.isValid}>{submitBtn}</Button>
+						<Button btnType='outline' type='reset'>{closeBtn}</Button>
 					</div>
-					: <Button  type='reset'>{i18n('Close')}</Button>
+					: <Button btnType='outline' type='reset'>{i18n('Close')}</Button>
 				}
 			</div>
 		);
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
index f6c906b56b..8d7c63f567 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
@@ -16,18 +16,18 @@
 import React from 'react';
 import classnames from 'classnames';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import store from 'sdc-app/AppStore.js';
 import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
 
 class ListEditorItem extends React.Component {
 	static propTypes = {
-		onSelect: React.PropTypes.func,
-		onDelete: React.PropTypes.func,
-		onEdit: React.PropTypes.func,
+		onSelect:  React.PropTypes.oneOfType([React.PropTypes.func, React.PropTypes.bool]),
+		onDelete:  React.PropTypes.oneOfType([React.PropTypes.func, React.PropTypes.bool]),
+		onEdit:  React.PropTypes.oneOfType([React.PropTypes.func, React.PropTypes.bool]),
 		children: React.PropTypes.node,
 		isReadOnlyMode: React.PropTypes.bool
-	}
+	};
 
 	render() {
 		let {onDelete, onSelect, onEdit, children, isReadOnlyMode} = this.props;
@@ -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='trash-o' onClick={() => this.onClickedItem(onDelete)}/>}
+					{onDelete && isAbilityToDelete && <SVGIcon name='trashO' onClick={() => this.onClickedItem(onDelete)}/>}
 				</div>}
 			</div>
 		);
@@ -52,8 +52,8 @@ class ListEditorItem extends React.Component {
 				store.dispatch({
 					type: modalActionTypes.GLOBAL_MODAL_WARNING,
 					data: {
-						title: i18n('Error'), 
-						msg: i18n('This item is checkedin/submitted, Click Check Out to continue')						
+						title: i18n('Error'),
+						msg: i18n('This item is checkedin/submitted, Click Check Out to continue')
 					}
 				});
 			}
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
index 65a1ad683b..825cc609a8 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
@@ -18,31 +18,33 @@ import React from 'react';
 import {connect} from 'react-redux';
 
 import Modal from 'nfvo-components/modal/Modal.jsx';
-import Button from 'react-bootstrap/lib/Button.js';
+import Button from 'sdc-ui/lib/react/Button.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import {modalContentComponents} from 'sdc-app/common/modal/ModalContentMapper.js';
 import {actionTypes, typeEnum} from './GlobalModalConstants.js';
 
 
 const typeClass = {
-	'default': 'primary',
-	error: 'danger',
+	'default': 'default',
+	error: 'negative',
 	warning: 'warning',
-	success: 'success'
+	success: 'positive'
 };
 
 
-const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) => 
+const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) =>
 		<Modal.Footer>
-			<Button bsStyle={typeClass[type]} onClick={onDeclined ? () => {
-				onDeclined(); 
-				onClose();} : () => onClose()}>
-				{cancelButtonText}
+			<div className='sdc-modal-footer'>
+				{onConfirmed && <Button color={typeClass[type]} onClick={() => {
+					onConfirmed();
+					onClose();
+				}}>{confirmationButtonText}</Button>}
+				<Button btnType='outline' color={typeClass[type]} onClick={onDeclined ? () => {
+					onDeclined();
+					onClose();} : () => onClose()}>
+					{cancelButtonText}
 				</Button>
-			{onConfirmed && <Button bsStyle={typeClass[type]} onClick={() => {
-				onConfirmed();
-				onClose();
-			}}>{confirmationButtonText}</Button>}
+			</div>
 		</Modal.Footer>;
 
 ModalFooter.defaultProps = {
@@ -87,7 +89,7 @@ export class  GlobalModalView extends React.Component {
 	};
 
 	render() {
-		let {title, type, show, modalComponentName, modalComponentProps, 
+		let {title, type, show, modalComponentName, modalComponentProps,
 		modalClassName, msg, onConfirmed, onDeclined, confirmationButtonText, cancelButtonText, onClose} = this.props;
 		const  ComponentToRender = modalContentComponents[modalComponentName];
 		return (
@@ -96,7 +98,7 @@ export class  GlobalModalView extends React.Component {
 					<Modal.Title>{title}</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
-					{ComponentToRender ? <ComponentToRender {...modalComponentProps}/> :  msg}				
+					{ComponentToRender ? <ComponentToRender {...modalComponentProps}/> :  msg}
 				</Modal.Body>
 				{(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) &&
 						<ModalFooter
@@ -114,7 +116,7 @@ export class  GlobalModalView extends React.Component {
 		if (this.props.timeout) {
 			setTimeout(this.props.onClose, this.props.timeout);
 		}
-	}	
+	}
 };
 
 export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(GlobalModalView);
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
index 0a0ed1fd71..3e5545371a 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
@@ -31,3 +31,8 @@ export const typeEnum = {
 	WARNING: 'warning',
 	SUCCESS: 'success'
 };
+
+export const modalSizes  = {
+	LARGE: 'large',
+	SMALL: 'small'	
+};
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
index 6d900dd0bb..ecfe7df116 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
@@ -17,7 +17,7 @@ import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 import {actionsEnum, statusEnum, statusBarTextMap } from './VersionControllerConstants.js';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
 
@@ -115,8 +115,8 @@ class ActionButtons extends React.Component {
 	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')];
+			['versionControllerLockOpen', i18n('Check In')] :
+			['versionControllerLockClosed', i18n('Check Out')];
 		const disabled = (isLatestVersion && onCheckinCheckout && status !== statusEnum.LOCK_STATUS) ? false : true;
 		return (
 			<div className='action-buttons'>
@@ -125,14 +125,14 @@ class ActionButtons extends React.Component {
 				{onSubmit && onRevert &&
 					<div className='version-control-buttons'>
 						<VCButton dataTestId='vc-submit-btn' onClick={onSubmit}  isDisabled={!isCheckedIn || !isLatestVersion}
-							name='version-controller-submit' tooltipText={i18n('Submit')}/>
+							name='versionControllerSubmit' tooltipText={i18n('Submit')}/>
 						<VCButton dataTestId='vc-revert-btn' onClick={onRevert} isDisabled={!isCheckedOut || version.label === '0.1' || !isLatestVersion}
-							name='version-controller-revert' tooltipText={i18n('Revert')}/>
+							name='versionControllerRevert' tooltipText={i18n('Revert')}/>
 					</div>
 				}
 				{onSave &&
 					<VCButton dataTestId='vc-save-btn' onClick={() => onSave()} isDisabled={!isCheckedOut || !isFormDataValid || !isLatestVersion}
-						name='version-controller-save'  tooltipText={i18n('Save')}/>
+						name='versionControllerSave'  tooltipText={i18n('Save')}/>
 				}
 			</div>
 		);
diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
index 06cb98bbe8..6c04ad74fd 100644
--- a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
@@ -1,23 +1,22 @@
 import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import uuid from 'uuid-js';
 
 export default class SelectActionTable extends React.Component {
 
 	render() {
-		let {columns, onAdd, isReadOnlyMode, children, onAddItem} = this.props;
+		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 && <div data-test-id='select-action-table-add' onClick={onAdd}>{onAddItem}</div>}
-					<SVGIcon name='trash-o' className='dummy-icon' />
+					<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>)}
-						<SVGIcon name='trash-o' className='dummy-icon' />
-						<SVGIcon name='trash-o' className='dummy-icon' />
+						{Array(numOfIcons).fill().map(() => <SVGIcon name='trashO' 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 17d8a17c09..a711b42918 100644
--- a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import SVGIcon from '../icon/SVGIcon.jsx';
+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';
 
@@ -11,19 +11,29 @@ function tooltip (msg)  {
 
 const IconWithOverlay = ({overlayMsg}) => (
 	<OverlayTrigger placement='bottom' overlay={tooltip(overlayMsg)}>
-		<SVGIcon name='error-circle'/>
+		<SVGIcon name='errorCircle'/>
 	</OverlayTrigger>
 );
 
-const SelectActionTableRow = ({children, onDelete, hasError, overlayMsg}) => (
+function renderErrorOrCheck({hasError, overlayMsg}) {
+	if (hasError === undefined) {
+		return <SVGIcon name='angleRight' className='dummy-icon' />;
+	}
+
+	if (hasError) {
+		return overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> :  <SVGIcon name='errorCircle'/>;
+	}
+
+	return <SVGIcon name='checkCircle'/>;
+}
+
+const SelectActionTableRow = ({children, onDelete, hasError, hasErrorIndication, 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'/>}		
-		
+		{onDelete && <SVGIcon name='trashO' data-test-id='select-action-table-delete' onClick={onDelete} />}
+		{hasErrorIndication && renderErrorOrCheck({hasError, overlayMsg})}
 	</div>
 );