[SDC] OnBoard with enabled tests and features

Change-Id: I4c1bbf6e1c854cf97a3561c736f83da44b58b7c0
Signed-off-by: az2497 <avi.ziv@amdocs.com>

[SDC] OnBoard with enabled tests and features.

Change-Id: Icd52f039aee4dd393a1404d530bb9fdd0b20e604
Signed-off-by: az2497 <avi.ziv@amdocs.com>

31 files changed, 342 insertions, 244 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js
index dad930127b..24ba05e303 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js
@@ -275,6 +275,13 @@ export default {
 			version
 		});
 		setCurrentScreen(dispatch, enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES, {softwareProductId, version, componentId});
+	},
+
+	updateCurrentScreenVersion(dispatch, version) {
+		dispatch({
+			type: actionTypes.SET_CURRENT_SCREEN_VERSION,
+			version
+		});
 	}
 
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js
index 0fff513cc5..1ce8605b63 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingConstants.js
@@ -19,7 +19,8 @@ export const DATE_FORMAT = 'MM/DD/YYYY';
 
 export const actionTypes = keyMirror({
 	SET_CURRENT_SCREEN: null,
-	SET_CURRENT_LICENSE_MODEL: null
+	SET_CURRENT_LICENSE_MODEL: null,
+	SET_CURRENT_SCREEN_VERSION: null,
 });
 
 export const enums = keyMirror({
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js
index 46fc58db95..e63bcb16af 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingReducers.js
@@ -16,9 +16,19 @@
 import {actionTypes, enums} from './OnboardingConstants.js';
 
 export const currentScreenReducer = (state = {forceBreadCrumbsUpdate: false, screen: enums.SCREEN.ONBOARDING_CATALOG, props: {}}, action) => {
-	if (action.type === actionTypes.SET_CURRENT_SCREEN) {
-		return action.currentScreen;
-	}
-	return state;
+	switch (action.type) {
+		case actionTypes.SET_CURRENT_SCREEN: 
+			return action.currentScreen;
+		case actionTypes.SET_CURRENT_SCREEN_VERSION:
+			return {
+				...state,
+				props: {
+					...state.props,
+					version: action.version
+				}
+			};	
+		default:
+			return state;
+	}	
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js
index 186f1cbc7b..788528fd75 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js
@@ -23,6 +23,7 @@ import LicenseAgreementActionHelper from './licenseAgreement/LicenseAgreementAct
 import FeatureGroupsActionHelper from './featureGroups/FeatureGroupsActionHelper.js';
 import EntitlementPoolsActionHelper from './entitlementPools/EntitlementPoolsActionHelper.js';
 import LicenseKeyGroupsActionHelper from './licenseKeyGroups/LicenseKeyGroupsActionHelper.js';
+import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
 
 function baseUrl() {
 	const restPrefix = Configuration.get('restPrefix');
@@ -140,6 +141,8 @@ const LicenseModelActionHelper = {
 					newVersionId = adjustMajorVersion(version.label, 1);
 			}
 
+			OnboardingActionHelper.updateCurrentScreenVersion(dispatch, {label: newVersionId, id: newVersionId});
+
 			LicenseModelActionHelper.fetchLicenseModelById(dispatch, {licenseModelId, version:{id: newVersionId, label: newVersionId}});
 			return Promise.resolve({id: newVersionId, label: newVersionId});
 		});
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js
index a371d5635e..ce4327d810 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js
@@ -18,7 +18,7 @@ import Configuration from 'sdc-app/config/Configuration.js';
 import {actionTypes as entitlementPoolsActionTypes } from './EntitlementPoolsConstants.js';
 import LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js';
 import {actionTypes as limitEditorActions} from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
-import getValue from 'nfvo-utils/getValue.js';
+import {default as getValue, getStrValue} from 'nfvo-utils/getValue.js';
 
 function baseUrl(licenseModelId, version) {
 	const restPrefix = Configuration.get('restPrefix');
@@ -26,17 +26,16 @@ function baseUrl(licenseModelId, version) {
 	return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/entitlement-pools`;
 }
 
-function fetchEntitlementPoolsList(licenseModelId, version) {	
+function fetchEntitlementPoolsList(licenseModelId, version) {
 	return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
 }
 
-function postEntitlementPool(licenseModelId, entitlementPool, version) {	
+function postEntitlementPool(licenseModelId, entitlementPool, version) {
 	return RestAPIUtil.post(baseUrl(licenseModelId, version), {
 		name: entitlementPool.name,
 		description: entitlementPool.description,
 		thresholdValue: entitlementPool.thresholdValue,
 		thresholdUnits: getValue(entitlementPool.thresholdUnits),
-		entitlementMetric: entitlementPool.entitlementMetric,
 		increments: entitlementPool.increments,
 		operationalScope: getValue(entitlementPool.operationalScope),
 		time: entitlementPool.time,
@@ -47,13 +46,12 @@ function postEntitlementPool(licenseModelId, entitlementPool, version) {
 
 
 function putEntitlementPool(licenseModelId, previousEntitlementPool, entitlementPool, version) {
-	
+
 	return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${entitlementPool.id}`, {
 		name: entitlementPool.name,
 		description: entitlementPool.description,
 		thresholdValue: entitlementPool.thresholdValue,
 		thresholdUnits: getValue(entitlementPool.thresholdUnits),
-		entitlementMetric: entitlementPool.entitlementMetric,
 		increments: entitlementPool.increments,
 		operationalScope: getValue(entitlementPool.operationalScope),
 		time: entitlementPool.time,
@@ -66,39 +64,39 @@ function deleteEntitlementPool(licenseModelId, entitlementPoolId, version) {
 	return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}`);
 }
 
-function fetchLimitsList(licenseModelId, entitlementPoolId, version) {	
+function fetchLimitsList(licenseModelId, entitlementPoolId, version) {
 	return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`);
 }
 
-function deleteLimit(licenseModelId, entitlementPoolId, version, limitId) {	
+function deleteLimit(licenseModelId, entitlementPoolId, version, limitId) {
 	return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits/${limitId}`);
 }
 
-function postLimit(licenseModelId, entitlementPoolId, version, limit) {	
+function postLimit(licenseModelId, entitlementPoolId, version, limit) {
 	return RestAPIUtil.post(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits`, {
 		name: limit.name,
 		type: limit.type,
 		description: limit.description,
-		metric: limit.metric,
+		metric: getStrValue(limit.metric),
 		value: limit.value,
-		unit: limit.unit,
+		unit: getStrValue(limit.unit),
 		aggregationFunction: getValue(limit.aggregationFunction),
 		time: getValue(limit.time)
 	});
 }
 
 function putLimit(licenseModelId, entitlementPoolId, version, limit) {
-	
+
 	return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${entitlementPoolId}/limits/${limit.id}`, {
 		name: limit.name,
 		type: limit.type,
 		description: limit.description,
-		metric: limit.metric,
+		metric: getStrValue(limit.metric),
 		value: limit.value,
-		unit: limit.unit,
+		unit: getStrValue(limit.unit),
 		aggregationFunction: getValue(limit.aggregationFunction),
 		time: getValue(limit.time)
-	});	
+	});
 }
 
 export default {
@@ -191,10 +189,10 @@ export default {
 				type: entitlementPoolsActionTypes.entitlementPoolsEditor.LIMITS_LIST_LOADED,
 				response
 			});
-		});		
+		});
 	},
 
-	submitLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) {	
+	submitLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) {
 		const propmise  =  limit.id ? putLimit(licenseModelId,entitlementPool.id, version, limit)
 			: postLimit(licenseModelId,entitlementPool.id, version, limit);
 		return propmise.then(() => {
@@ -202,12 +200,12 @@ export default {
 				type: limitEditorActions.CLOSE
 			});
 			this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool});
-		});		
+		});
 	},
 
-	deleteLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) {				
+	deleteLimit(dispatch, {licenseModelId, version, entitlementPool, limit}) {
 		return  deleteLimit(licenseModelId,entitlementPool.id, version, limit.id).then(() => {
-			this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool});		
-		});				
+			this.fetchLimits(dispatch, {licenseModelId, version, entitlementPool});
+		});
 	}
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx
index 9844290a25..497c29d14c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx
@@ -97,24 +97,23 @@ class FeatureGroupListEditorView extends React.Component {
 					<div className='text name'>{name}</div>
 				</div>
 
-				<div className='list-editor-item-view-field'>
+				<div className='list-editor-item-view-field smaller-field'>
 					<div className='feature-groups-count-field'>
-						<div className='title'>{i18n('Entitlement')}</div>
-						<div className='title'>{i18n('Pools')}</div>
+						<div className='title'>{i18n('EP')}</div>
 						<div className='feature-groups-count-ep'>{entitlementPoolsIds.length || 0}</div>
 					</div>
+				</div>
+				<div className='list-editor-item-view-field smaller-field'>
 					<div className='feature-groups-count-field'>
-						<div className='title'>{i18n('License key')}</div>
-						<div className='title'>{i18n('Groups')}</div>
+						<div className='title'>{i18n('LKG')}</div>
 						<div className='feature-groups-count-lk'>{licenseKeyGroupsIds.length || 0}</div>
 					</div>
 				</div>
 
 				<div className='list-editor-item-view-field'>
 					<div className='feature-groups-count-field'>
-						<div className='title'>{i18n('Manufacturer Reference')}</div>
-						<div className='title'>{i18n('Number')}</div>
-						<div className='feature-groups-count-ep'>{manufacturerReferenceNumber}</div>
+						<div className='title title-no-wrap'>{i18n('Manufacturer Reference Number')}</div>
+						<div className='feature-groups-mrn-ep'>{manufacturerReferenceNumber}</div>
 					</div>
 				</div>
 
@@ -122,8 +121,8 @@ class FeatureGroupListEditorView extends React.Component {
 					<div className='title'>{i18n('Description')}</div>
 					<div className='text description'>{description}</div>
 				</div>
-				
-				
+
+
 
 			</ListEditorItemView>
 		);
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
index f5017f6d7a..f22080a75c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
@@ -18,7 +18,7 @@ import Configuration from 'sdc-app/config/Configuration.js';
 import {actionTypes as licenseKeyGroupsConstants} from './LicenseKeyGroupsConstants.js';
 import LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js';
 import {actionTypes as limitEditorActions} from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
-import getValue from 'nfvo-utils/getValue.js';
+import {default as getValue, getStrValue} from 'nfvo-utils/getValue.js';
 
 function baseUrl(licenseModelId, version) {
 	const restPrefix = Configuration.get('restPrefix');
@@ -75,9 +75,9 @@ function postLimit(licenseModelId, licenseKeyGroupId, version, limit) {
 		name: limit.name,
 		type: limit.type,
 		description: limit.description,
-		metric: limit.metric,
+		metric: getStrValue(limit.metric),
 		value: limit.value,
-		unit: limit.unit,
+		unit: getStrValue(limit.unit),
 		aggregationFunction: getValue(limit.aggregationFunction),
 		time: getValue(limit.time)
 	});
@@ -89,9 +89,9 @@ function putLimit(licenseModelId, licenseKeyGroupId, version, limit) {
 		name: limit.name,
 		type: limit.type,
 		description: limit.description,
-		metric: limit.metric,
+		metric: getStrValue(limit.metric),
 		value: limit.value,
-		unit: limit.unit,
+		unit: getStrValue(limit.unit),
 		aggregationFunction: getValue(limit.aggregationFunction),
 		time: getValue(limit.time)
 	});
@@ -181,8 +181,8 @@ export default {
 			dispatch({
 				type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.LIMITS_LIST_LOADED,
 				response
-			});	
-		});									
+			});
+		});
 	},
 
 	submitLimit(dispatch, {licenseModelId, version, licenseKeyGroup, limit}) {
@@ -193,13 +193,13 @@ export default {
 				type: limitEditorActions.CLOSE
 			});
 			this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup});
-		});	  			
+		});
 	},
 
 	deleteLimit(dispatch, {licenseModelId, version, licenseKeyGroup, limit}) {
 		return deleteLimit(licenseModelId,licenseKeyGroup.id, version, limit.id).then(() => {
 			this.fetchLimits(dispatch, {licenseModelId, version, licenseKeyGroup});
-		});		
+		});
 	}
 
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
index f70f917725..5c4e50d673 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditor.jsx
@@ -7,16 +7,24 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx';
 import {LIMITS_FORM_NAME, selectValues} from './LimitEditorConstants.js';
 import Button from 'sdc-ui/lib/react/Button.js';
 import Validator from 'nfvo-utils/Validator.js';
+import {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx';
+import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
 
 const LimitPropType = React.PropTypes.shape({
 	id: React.PropTypes.string,
 	name: React.PropTypes.string,
 	description: React.PropTypes.string,
-	metric: React.PropTypes.string,
-	value: React.PropTypes.number,
+	metric: React.PropTypes.shape({
+		choice: React.PropTypes.string,
+		other: React.PropTypes.string
+	}),
+	value: React.PropTypes.string,
 	aggregationFunction: React.PropTypes.string,
 	time: React.PropTypes.string,
-	unit: React.PropTypes.number
+	unit: React.PropTypes.shape({
+		choice: React.PropTypes.string,
+		other: React.PropTypes.string
+	})
 });
 
 class LimitEditor extends React.Component {
@@ -33,8 +41,8 @@ class LimitEditor extends React.Component {
 		onCancel: React.PropTypes.func.isRequired
 	};
 
-	componentDidUpdate(prevProps) {				
-		if (this.props.formReady && this.props.formReady !== prevProps.formReady) { 
+	componentDidUpdate(prevProps) {
+		if (this.props.formReady && this.props.formReady !== prevProps.formReady) {
 			this.submit();
 		}
 	}
@@ -44,21 +52,21 @@ class LimitEditor extends React.Component {
 		let {name, description, metric, value, aggregationFunction, time, unit} = data;
 		return (
 			<div className='limit-editor'>
-			{!data.id && 
+			{!data.id &&
 			<div className='limit-editor-title'>
 				{data.name ? data.name : i18n('NEW LIMIT')}
 			</div>}
 			{
-				genericFieldInfo && 
+				genericFieldInfo &&
 				<Form
 					ref='validationForm'
-					hasButtons={false}				
+					hasButtons={false}
 					isValid={isFormValid}
 					formReady={formReady}
 					onValidateForm={() => onValidateForm(LIMITS_FORM_NAME) }
 					labledButtons={false}
 					isReadOnlyMode={isReadOnlyMode}
-					className='limit-editor-form'>					
+					className='limit-editor-form'>
 					<GridSection className='limit-editor-form-grid-section'>
 						<GridItem colSpan={2}>
 							<Input
@@ -83,24 +91,23 @@ class LimitEditor extends React.Component {
 								type='text'/>
 						</GridItem>
 						<GridItem colSpan={2}>
-							<Input
-								onChange={e => {									
-									const selectedIndex = e.target.selectedIndex;
-									const val = e.target.options[selectedIndex].value;
-									onDataChanged({metric: val}, LIMITS_FORM_NAME);}
-								}
+							<InputOptions
+								onInputChange={()=>{}}
+								isMultiSelect={false}
 								isRequired={true}
-								value={metric}
+								onEnumChange={metric => onDataChanged({metric:{choice: metric, other: ''}},
+									LIMITS_FORM_NAME, {metric: this.validateChoiceWithOther})}
+								onOtherChange={metric => onDataChanged({metric:{choice: optionInputOther.OTHER,
+									other: metric}}, LIMITS_FORM_NAME, {metric: this.validateChoiceWithOther})}
 								label={i18n('Metric')}
 								data-test-id='limit-editor-metric'
+								type='select'
+								required={true}
+								selectedEnum={metric && metric.choice}
+								otherValue={metric && metric.other}
+								values={selectValues.METRIC}
 								isValid={genericFieldInfo.metric.isValid}
-								errorText={genericFieldInfo.metric.errorText}
-								groupClassName='bootstrap-input-options'
-								className='input-options-select'
-								type='select' >
-								{selectValues.METRIC.map(mtype =>
-									<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-							</Input>
+								errorText={genericFieldInfo.metric.errorText} />
 						</GridItem>
 						<GridItem>
 							<Input
@@ -111,22 +118,30 @@ class LimitEditor extends React.Component {
 								isValid={genericFieldInfo.value.isValid}
 								errorText={genericFieldInfo.value.errorText}
 								isRequired={true}
-								type='number'/>
+								type='text'/>
 						</GridItem>
 						<GridItem>
-							<Input
-								onChange={unit => onDataChanged({unit}, LIMITS_FORM_NAME)}
+							<InputOptions
+								onInputChange={()=>{}}
+								isMultiSelect={false}
+								isRequired={false}
+								onEnumChange={unit => onDataChanged({unit:{choice: unit, other: ''}},
+									LIMITS_FORM_NAME)}
+								onOtherChange={unit => onDataChanged({unit:{choice: optionInputOther.OTHER,
+									other: unit}}, LIMITS_FORM_NAME)}
 								label={i18n('Units')}
 								data-test-id='limit-editor-units'
-								value={unit}
+								type='select'
+								required={false}
+								selectedEnum={unit && unit.choice}
+								otherValue={unit && unit.other}
+								values={selectValues.UNIT}
 								isValid={genericFieldInfo.unit.isValid}
-								errorText={genericFieldInfo.unit.errorText}
-								isRequired={false}
-								type='number'/>
+								errorText={genericFieldInfo.unit.errorText} />
 						</GridItem>
 						<GridItem colSpan={2}>
 							<Input
-								onChange={e => {									
+								onChange={e => {
 									const selectedIndex = e.target.selectedIndex;
 									const val = e.target.options[selectedIndex].value;
 									onDataChanged({aggregationFunction: val}, LIMITS_FORM_NAME);}
@@ -145,7 +160,7 @@ class LimitEditor extends React.Component {
 						</GridItem>
 						<GridItem>
 							<Input
-								onChange={e => {									
+								onChange={e => {
 									const selectedIndex = e.target.selectedIndex;
 									const val = e.target.options[selectedIndex].value;
 									onDataChanged({time: val}, LIMITS_FORM_NAME);}
@@ -160,15 +175,15 @@ class LimitEditor extends React.Component {
 								type='select' >
 								{selectValues.TIME.map(mtype =>
 									<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
-							</Input>							
+							</Input>
 						</GridItem>
 					</GridSection>
 					<GridSection className='limit-editor-buttons'>
-						<Button btnType='outline'  disabled={!isFormValid} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button>	
+						<Button btnType='outline'  disabled={!isFormValid} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button>
 						<Button btnType='outline' color='gray' onClick={onCancel} type='reset'>{i18n('Cancel')}</Button>
-					</GridSection>						
-				</Form>	
-			}	
+					</GridSection>
+				</Form>
+			}
 			</div>
 		);
 	}
@@ -181,6 +196,24 @@ class LimitEditor extends React.Component {
 		{isValid: false, errorText: i18n('Limit by the name \'' + value + '\' already exists. Limit name must be unique')};
 	}
 
+	validateChoiceWithOther(value) {
+		let chosen = value.choice;
+		// if we have an empty multiple select we have a problem since it's required
+		if (value.choices) {
+			if (value.choices.length === 0) {
+				return  Validator.validate('field', '', [{type: 'required', data: true}]);
+			} else {
+				// continuing validation with the first chosen value in case we have the 'Other' field
+				chosen = value.choices[0];
+			}
+		}
+		if (chosen !== optionInputOther.OTHER) {
+			return  Validator.validate('field', chosen, [{type: 'required', data: true}]);
+		} else { // when 'Other' was chosen, validate other value
+			return  Validator.validate('field', value.other, [{type: 'required', data: true}]);
+		}
+	}
+
 	submit() {
 		if (!this.props.formReady) {
 			this.props.onValidateForm(LIMITS_FORM_NAME);
@@ -190,4 +223,4 @@ class LimitEditor extends React.Component {
 	}
 }
 
-export default LimitEditor;
\ No newline at end of file
+export default LimitEditor;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
index 09c64ada62..8ac845a1a7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorActionHelper.js
@@ -14,17 +14,41 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes} from './LimitEditorConstants.js';
+import {actionTypes, selectValues} from './LimitEditorConstants.js';
+import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
 
 
 const LimitEditorActionHelper = {
 	openLimitsEditor(dispatch, {limit}) {
-		dispatch({type: actionTypes.OPEN, limitItem: limit});
+		let modifiedLimit = {...limit};
+		if (limit && limit.metric) {
+			modifiedLimit.metric = LimitEditorActionHelper.createChoiceObject(modifiedLimit.metric, selectValues.METRIC);
+		}
+		if (limit && limit.unit) {
+			modifiedLimit.unit = LimitEditorActionHelper.createChoiceObject(modifiedLimit.unit, selectValues.UNIT);
+		}
+		dispatch({type: actionTypes.OPEN, limitItem: modifiedLimit});
 	},
 
 	closeLimitsEditor(dispatch) {
 		dispatch({type: actionTypes.CLOSE});
+	},
+
+	createChoiceObject(value, optionsList) {
+		let option = optionsList.find(function(item) { return item.enum === value; });
+		if (!option) {
+			return {
+				choice: optionInputOther.OTHER,
+				other: value
+			};
+		}
+		else {
+			return {
+				choice: value,
+				other: ''
+			};
+		}
 	}
 };
 
-export default LimitEditorActionHelper;
\ No newline at end of file
+export default LimitEditorActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
index 1bef286442..9829e696c3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js
@@ -13,18 +13,25 @@ export const LIMITS_FORM_NAME = 'LIMITSFORM';
 export const selectValues = {
 	METRIC: [
 		{enum: '', title: i18n('please select…')},
-		{enum: 'Software_Instances_Count', title: 'Software Instances'},
-		{enum: 'Core', title: 'Core'},
-		{enum: 'CPU', title: 'CPU'},
-		{enum: 'Trunks', title: 'Trunks'},
-		{enum: 'User', title: 'User'},
-		{enum: 'Subscribers', title: 'Subscribers'},
-		{enum: 'Tenants', title: 'Tenants'},
-		{enum: 'Tokens', title: 'Tokens'},
-		{enum: 'Seats', title: 'Seats'},
-		{enum: 'Units_TB', title: 'Units-TB'},
-		{enum: 'Units_GB', title: 'Units-GB'},
-		{enum: 'Units_MB', title: 'Units-MB'}
+		{enum: 'BWTH', title: 'BWTH'},
+		{enum: 'Country', title: 'Country'},
+		{enum: 'Session', title: 'Session'},
+		{enum: 'LoB', title: 'LoB'},
+		{enum: 'Site', title: 'Site'},
+		{enum: 'Usage', title: 'Usage'}
+	],
+	UNIT: [
+		{enum: '', title: i18n('please select…')},
+		{enum: 'trunk', title: 'Trunks'},
+		{enum: 'user', title: 'Users'},
+		{enum: 'subscriber', title: 'Subscribers'},
+		{enum: 'session', title: 'Sessions'},
+		{enum: 'tenant', title: 'Tenants'},
+		{enum: 'token', title: 'Tokens'},
+		{enum: 'seats', title: 'Seats'},
+		{enum: 'TB', title: 'TB'},
+		{enum: 'GB', title: 'GB'},
+		{enum: 'MB', title: 'MB'}
 	],
 	AGGREGATION_FUNCTION: [
 		{enum: '', title: i18n('please select…')},
@@ -33,11 +40,14 @@ export const selectValues = {
 	],
 	TIME: [
 		{enum: '', title: i18n('please select…')},
-		{enum: 'Hour', title: 'Hour'},
 		{enum: 'Day', title: 'Day'},
-		{enum: 'Month', title: 'Month'}
+		{enum: 'Month', title: 'Month'},
+		{enum: 'Hour', title: 'Hour'},
+		{enum: 'Minute', title: 'Minute'},
+		{enum: 'Second', title: 'Second'},
+		{enum: 'Milli-Second', title: 'Milli-Second'}
 	]
-	
+
 };
 
 export const limitType = {
@@ -46,7 +56,9 @@ export const limitType = {
 };
 
 export const defaultState = {
-	LIMITS_EDITOR_DATA: {}
+	LIMITS_EDITOR_DATA: {
+		metric: {choice: '', other: ''},
+	}
 };
 
-export const NEW_LIMIT_TEMP_ID = 'NEW_LIMIT_TEMP_ID';
\ No newline at end of file
+export const NEW_LIMIT_TEMP_ID = 'NEW_LIMIT_TEMP_ID';
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
index 2499093af2..de9e7c8c38 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/LimitEditorReducer.js
@@ -20,7 +20,7 @@ export default (state = {}, action) => {
 	switch (action.type) {
 		case actionTypes.OPEN:
 			return {
-				...state,				
+				...state,
 				data: action.limitItem ? {...action.limitItem} : defaultState.LIMITS_EDITOR_DATA,
 				formReady: null,
 				formName: LIMITS_FORM_NAME,
@@ -38,17 +38,17 @@ export default (state = {}, action) => {
 					'metric' : {
 						isValid: true,
 						errorText: '',
-						validations: [{type: 'required', data: true}]
+						validations: []
 					},
 					'value' : {
 						isValid: true,
 						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'numeric', data: true}, {type: 'minimum', data: 0}]
+						validations: [{type: 'required', data: true}]
 					},
 					'unit' : {
 						isValid: true,
 						errorText: '',
-						validations: [{type: 'numeric', data: true}]
+						validations: []
 					},
 					'aggregationFunction' : {
 						isValid: true,
@@ -67,4 +67,4 @@ export default (state = {}, action) => {
 		default:
 			return state;
 	}
-};
\ No newline at end of file
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
index ec5a1dff72..b144f63968 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/limits/Limits.jsx
@@ -17,40 +17,43 @@ import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
-import LimitEditor from './LimitEditor.js'; 
+import LimitEditor from './LimitEditor.js';
 import {NEW_LIMIT_TEMP_ID, selectValues} from './LimitEditorConstants.js';
 
 const LimitItem = ({isReadOnlyMode, limit, onDelete, onSelect}) => {
-	const {name, description, metric,  value, aggregationFunction = '', time = ''} = limit;
+	const {name, description, value, metric, aggregationFunction = '', time = ''} = limit;
 	const timeLabel = time ? `per ${time}` : '';
+	let metricOption = selectValues.METRIC.find(item => item.enum === metric);
+	metricOption = metricOption ? metricOption.title : metric;
+
 	return (
-		<ListEditorItemView			
+		<ListEditorItemView
 			onDelete={onDelete}
 			onSelect={onSelect}
 			isReadOnlyMode={isReadOnlyMode}>
-			<div className='list-editor-item-view-field limit-name'>				
+			<div className='list-editor-item-view-field limit-name'>
 				<div className='text name'>{name}</div>
 			</div>
 
-			<div className='list-editor-item-view-field limit-description'>				
+			<div className='list-editor-item-view-field limit-description'>
 				<div className='text description'>{description}</div>
 			</div>
 
-			<div className='list-editor-item-view-field limit-metric-details'>			
-				<div className='text description'>{`${selectValues.METRIC.find(item => item.enum === metric).title} ${value} ${aggregationFunction} ${timeLabel}`}</div>
-			</div>			
+			<div className='list-editor-item-view-field limit-metric-details'>
+				<div className='text description'>{`${metricOption} ${value} ${aggregationFunction} ${timeLabel}`}</div>
+			</div>
 		</ListEditorItemView>
 	);
 };
 
 class Limits extends React.Component {
 
-	
+
 	state = {
 		localFilter: ''
 	};
 
-	render() {		
+	render() {
 		const {isReadOnlyMode = false, limitEditor, limitsList = [], onCloseLimitEditor, selectedLimit} = this.props;
 		let limitsNames = {};
 		for (let i = 0; i < limitsList.length; i++) {
@@ -66,26 +69,26 @@ class Limits extends React.Component {
 					{limitsList.length === 0 && !limitEditor.data && <div className='no-limits-text'>{i18n('There are no limits')}</div>}
 					{limitsList.map(limit =>
 					<div key={limit.id}  className='limit-item-wrapper'>
-						<LimitItem 
-							onDelete={() => this.delete(limit)} 
+						<LimitItem
+							onDelete={() => this.deleteLimit(limit)}
 							onSelect={selectedLimit ? undefined : () => this.props.onSelectLimit(limit)}
-							clickable={!selectedLimit} 
-							isReadOnlyMode={isReadOnlyMode} 
+							clickable={!selectedLimit}
+							isReadOnlyMode={isReadOnlyMode}
 							limit={limit}/>
 						{limit.id === selectedLimit &&  limitEditor.data && <LimitEditor limitsNames={limitsNames} onCancel={onCloseLimitEditor} onSubmit={ () => this.submit()}/>}
 					</div> )}
 				</ListEditorView>
-				
+
 			</div>
 		);
 	}
 
 	submit() {
-		let {onSubmit, onCloseLimitEditor, parent, limitEditor, licenseModelId, version, limitType} = this.props;			
+		let {onSubmit, onCloseLimitEditor, parent, limitEditor, licenseModelId, version, limitType} = this.props;
 		onSubmit({type: limitType, ...limitEditor.data}, parent, licenseModelId, version).then(() => onCloseLimitEditor());
 	}
 
-	delete(limit) {
+	deleteLimit(limit) {
 		let {onDelete, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit} = this.props;
 		onDelete({limit, parent, licenseModelId, version, onCloseLimitEditor, selectedLimit});
 	}
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx
index 0c0103fc10..9232402b75 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/LicenseModelDescriptionEdit.jsx
@@ -18,6 +18,7 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 
 class LicenseModelDescriptionEdit extends React.Component {
 	render() {
+		//TODO check if buttons
 		let {onDataChanged, description, genericFieldInfo} = this.props;
 		let saveButtonClassName = (genericFieldInfo.description.isValid) ? 'description-save' : 'description-save disabled';
 		return(
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx
index 66f2cc6838..6ec84e16ca 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountItem.jsx
@@ -14,15 +14,17 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 
 function  SummaryCountItem ({name, counter, onAdd, onNavigate, isReadOnlyMode}) {
+	//TODO check for buttons
 	return(
 		<div className='summary-count-item'>
 			<div className='summary-name-and-count' onClick={onNavigate}>
 				<span className='item-name' onClick={onNavigate}>{name}</span>
 				<span className='item-count' onClick={onNavigate} data-test-id={'vlm-summary-vendor-counter-' + name.toLowerCase().replace(/\s/g,'-')}>({counter})</span>
 			</div>
-			<div className={isReadOnlyMode ? 'add-button disabled' : 'add-button'}   onClick={onAdd} data-test-id={'vlm-summary-vendor-add-btn-' + name.toLowerCase().replace(/\s/g,'-')}/>
+			<SVGIcon name='plusCircle' disabled={isReadOnlyMode} color='secondary' onClick={onAdd} data-test-id={'vlm-summary-vendor-add-btn-' + name.toLowerCase().replace(/\s/g,'-')}/>
 		</div>
 	);
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
index 87559901b3..deb4550347 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/VendorDataView.js
@@ -18,6 +18,7 @@ import {connect} from 'react-redux';
 
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import licenseModelOverviewActionHelper from '../licenseModelOverviewActionHelper.js';
 import LicenseModelActionHelper from '../../LicenseModelActionHelper.js';
@@ -70,6 +71,7 @@ export class VendorDataView extends Component {
 				{this.renderOverlay(
 					<div className='description-data' data-test-id='vlm-summary-vendor-description'>
 						{description}
+						<SVGIcon name='pencil'/>
 					</div>
 				)}
 			</div>
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
index 51702e6d36..7664f6abaa 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
@@ -40,6 +40,7 @@ const CatalogList = ({children, onAddVLM, onAddVSP, vendorPageOptions}) => (
 );
 
 const CreateItemTile = ({onClick, dataTestId, title, className = ''}) => {
+	//TODO check for buttons
 	return (
 			<div className={'create-catalog-item tile ' + className} onClick={() => onClick()} data-test-id={dataTestId}>
 				<div className='create-item-plus-icon'><SVGIcon name='plus' /></div>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
index 90a2bb8f2e..d4bee0a876 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
@@ -409,6 +409,7 @@ const SoftwareProductActionHelper = {
 						}
 					});
 					const newVersionId = adjustMajorVersion(version.label, 1);
+					OnboardingActionHelper.updateCurrentScreenVersion(dispatch, {label: newVersionId, id: newVersionId});
 					SoftwareProductActionHelper.fetchSoftwareProduct(dispatch,{softwareProductId, version: {id: newVersionId}});
 					return Promise.resolve({newVersion: {id: newVersionId}});
 				});
@@ -438,6 +439,7 @@ const SoftwareProductActionHelper = {
 						newVersionId = adjustMinorVersion(version.label, -1);
 						break;
 				}
+				OnboardingActionHelper.updateCurrentScreenVersion(dispatch, {label: newVersionId, id: newVersionId});
 				SoftwareProductActionHelper.fetchSoftwareProduct(dispatch,{softwareProductId, version:{id: newVersionId}});
 				return Promise.resolve({newVersion: {id: newVersionId}});
 			});
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
index ef4aecf568..3da26cc20f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
@@ -18,7 +18,7 @@ import Tabs from 'react-bootstrap/lib/Tabs.js';
 import Tab from 'react-bootstrap/lib/Tab.js';
 import {tabsMapping} from './SoftwareProductAttachmentsConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import Icon from 'nfvo-components/icon/Icon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import HeatValidation from './validation/HeatValidation.js';
 
 class HeatScreenView extends Component {
@@ -38,27 +38,32 @@ class HeatScreenView extends Component {
 			<div className='vsp-attachments-view'>
 				<div className='attachments-view-controllers'>
 					{(this.state.activeTab === tabsMapping.SETUP) &&
-						<Icon
-							iconClassName={heatDataExist ? '' : 'disabled'}
-							className={heatDataExist ? '' : 'disabled'}
-							image='download'
+						<SVGIcon
+							disabled={heatDataExist ? false : true}
+							name='download'
+							className='icon-component'
 							label={i18n('Download HEAT')}
+							labelPosition='right'
+							color='secondary'
 							onClick={heatDataExist ? () => onDownload({heatCandidate: heatSetup, isReadOnlyMode, version}) : undefined}
 							data-test-id='download-heat'/>}
 					{(this.state.activeTab === tabsMapping.VALIDATION && softwareProductId) &&
-						<Icon
-							iconClassName={this.props.goToOverview ? '' : 'disabled'}
-							className={`go-to-overview-icon ${this.props.goToOverview ? '' : 'disabled'}`}
-							labelClassName='go-to-overview-label'
+						<SVGIcon
+							disabled={this.props.goToOverview !== true}
 							onClick={this.props.goToOverview ? () => onGoToOverview({version}) : undefined}
-							image='go-to-overview'
+							name='proceedToOverview'
+							className='icon-component'
 							label={i18n('Go to Overview')}
+							labelPosition='right'
+							color={this.props.goToOverview ? 'primary' : 'secondary'}
 							data-test-id='go-to-overview'/>}
-					<Icon
-						image='upload'
+					<SVGIcon
+						name='upload'
+						className='icon-component'
 						label={i18n('Upload New HEAT')}
-						className={isReadOnlyMode ? 'disabled' : ''}
-						iconClassName={isReadOnlyMode ? 'disabled' : ''}
+						labelPosition='right'
+						color='secondary'
+						disabled={isReadOnlyMode}
 						onClick={evt => {this.refs.hiddenImportFileInput.click(evt);}}
 						data-test-id='upload-heat'/>
 					<input
@@ -87,9 +92,9 @@ class HeatScreenView extends Component {
 	}
 
 	handleTabPress(key) {
-		let {heatSetup, heatSetupCache, onProcessAndValidate, isReadOnlyMode, version} = this.props;		
+		let {heatSetup, heatSetupCache, onProcessAndValidate, isReadOnlyMode, version} = this.props;
 		switch (key) {
-			case tabsMapping.VALIDATION:				
+			case tabsMapping.VALIDATION:
 				onProcessAndValidate({heatData: heatSetup, heatDataCache: heatSetupCache, isReadOnlyMode, version}).then(
 					() => this.setState({activeTab: tabsMapping.VALIDATION})
 				);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
index 901a583e24..17b3179d01 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
@@ -20,7 +20,6 @@ import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
 import FormControl from 'react-bootstrap/lib/FormControl.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import SelectInput from 'nfvo-components/input/SelectInput.jsx';
-import Icon from 'nfvo-components/icon/Icon.jsx';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import {fileTypes} from './HeatSetupConstants.js';
 import {tabsMapping} from '../SoftwareProductAttachmentsConstants.js';
@@ -52,7 +51,7 @@ class SortableModuleFileList extends Component {
 
 	render() {
 
-		let {unassigned, onModuleRename, onModuleDelete, onModuleAdd, onBaseAdd, onModuleFileTypeChange, isBaseExist} = this.props;
+		let {unassigned, onModuleRename, onModuleDelete, onModuleAdd, onBaseAdd, onModuleFileTypeChange, isBaseExist, isReadOnlyMode} = this.props;
 		const childProps = module => ({
 			module,
 			onModuleRename,
@@ -68,19 +67,17 @@ class SortableModuleFileList extends Component {
 					items={this.state.data}
 					draggingIndex={this.state.draggingIndex}
 					sortId={i}
-					outline='list'><ModuleFile {...childProps(item)} /></SortableListItem>
+					outline='list'><ModuleFile {...childProps(item)} isReadOnlyMode={this.props.isReadOnlyMode} /></SortableListItem>
 			);
 		}, this);
 
 		return (
-			<div className='modules-list-wrapper'>
+			<div className={`modules-list-wrapper ${(listItems.length > 0) ? 'modules-list-wrapper-divider' : ''}`}>
 				<div className='modules-list-header'>
-					<div className='modules-list-controllers'>
-						{!isBaseExist && <Button btnType='link' onClick={onBaseAdd} disabled={unassigned.length === 0}>{i18n('Add Base')}</Button>}
-						<Button btnType='link' onClick={onModuleAdd} disabled={unassigned.length === 0}>{i18n('Add Module')}</Button>
-					</div>
+					{!isBaseExist && <div><Button btnType='link' onClick={onBaseAdd} disabled={isReadOnlyMode || unassigned.length === 0}>{i18n('Add Base')}</Button></div>}
+					<div><Button btnType='link' onClick={onModuleAdd} disabled={isReadOnlyMode || unassigned.length === 0}>{i18n('Add Module')}</Button></div>
 				</div>
-				<ul>{listItems}</ul>
+				{(listItems.length > 0) && <ul>{listItems}</ul>}
 			</div>
 		);
 	}
@@ -89,20 +86,24 @@ class SortableModuleFileList extends Component {
 const tooltip = (name) => <Tooltip id='tooltip-bottom'>{name}</Tooltip>;
 const UnassignedFileList = (props) => {
 	return (
-		<div className='unassigned-files'>
+		<div>
+			<div className='modules-list-header'/>
+				<div className='unassigned-files'>
 			<div className='unassigned-files-title'>{i18n('UNASSIGNED FILES')}</div>
 			<div className='unassigned-files-list'>{props.children}</div>
+			</div>
 		</div>
 	);
 };
 
 const EmptyListContent = props => {
-	let {onClick, heatDataExist} = props;
+	let {onClick, heatDataExist, isReadOnlyMode} = props;
 	let displayText = heatDataExist ? 'All Files Are Assigned' : '';
 	return (
 		<div className='go-to-validation-button-wrapper'>
 			<div className='all-files-assigned'>{i18n(displayText)}</div>
-			{heatDataExist && <div className={'link'} onClick={onClick} data-test-id='go-to-validation'>{i18n('Proceed To Validation')}<SVGIcon name='angleRight'/></div>}
+			{heatDataExist && <SVGIcon disabled={isReadOnlyMode} name='angleRight' onClick={onClick}
+				data-test-id='go-to-validation' label={i18n('Proceed To Validation')} labelPosition='left' color='primary'/>}
 		</div>
 	);
 };
@@ -112,14 +113,11 @@ const UnassignedFile = (props) => (
 	</OverlayTrigger>
 );
 
-const AddOrDeleteVolumeFiels = ({add = true, onAdd, onDelete}) => {
+const AddOrDeleteVolumeFiles = ({add = true, onAdd, onDelete, isReadOnlyMode}) => {
 	const displayText = add ? 'Add Volume Files' : 'Delete Volume Files';
 	const action = add ? onAdd : onDelete;
 	return (
-		<div className='add-or-delete-volumes' onClick={action}>
-			<SVGIcon name={add ? 'plus' : 'close'} />
-			<span>{i18n(displayText)}</span>
-		</div>
+		<Button disabled={isReadOnlyMode} onClick={action} btnType='link' className='add-or-delete-volumes' iconName={add ? 'plus' : 'close'}>{i18n(displayText)}</Button>
 	);
 };
 
@@ -195,14 +193,14 @@ class ModuleFile extends Component {
 	}
 
 	render() {
-		const {module: {name, isBase, yaml, env, vol, volEnv}, onModuleDelete, files, onModuleFileTypeChange} = this.props;
+		const {module: {name, isBase, yaml, env, vol, volEnv}, onModuleDelete, files, onModuleFileTypeChange, isReadOnlyMode} = this.props;
 		const {displayVolumes} = this.state;
 		const moduleType = isBase ? 'BASE' : 'MODULE';
 		return (
 			<div className='modules-list-item' data-test-id='module-item'>
 				<div className='modules-list-item-controllers'>
 					<div className='modules-list-item-filename'>
-						<Icon image={isBase ? 'base' : 'module'} iconClassName='heat-setup-module-icon' />
+						<SVGIcon name={isBase ? 'base' : 'module'} color='primary' iconClassName='heat-setup-module-icon' />
 						<span className='module-title-by-type'>{`${moduleType}: `}</span>
 						<div className={`text-and-icon ${this.state.isInNameEdit ? 'in-edit' : ''}`}>
 							{this.renderNameAccordingToEditState()}
@@ -235,7 +233,7 @@ class ModuleFile extends Component {
 						files={files}
 						selected={volEnv}
 						onChange={onModuleFileTypeChange}/>}
-					<AddOrDeleteVolumeFiels onAdd={() => this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/>
+					<AddOrDeleteVolumeFiles isReadOnlyMode={isReadOnlyMode} onAdd={() => this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/>
 				</div>
 			</div>
 		);
@@ -245,15 +243,15 @@ class ModuleFile extends Component {
 class ArtifactOrNestedFileList extends Component {
 
 	render() {
-		let {type, title, selected, options, onSelectChanged, onAddAllUnassigned} = this.props;
+		let {type, title, selected, options, onSelectChanged, onAddAllUnassigned, isReadOnlyMode, headerClassName} = this.props;
 		return (
-			<div className={`artifact-files ${type === 'nested' ? 'nested' : ''}`}>
+			<div className={`artifact-files ${type === 'nested' ? 'nested' : ''} ${headerClassName} `}>
 				<div className='artifact-files-header'>
 					<span>
-						{type === 'artifact' && (<Icon image='artifacts' iconClassName='heat-setup-module-icon' />)}
+						{type === 'artifact' && (<SVGIcon color='primary' name='artifacts' iconClassName='heat-setup-module-icon' />)}
 						{`${title}`}
 					</span>
-					{type === 'artifact' && <span className='add-all-unassigned' onClick={onAddAllUnassigned}>{i18n('Add All Unassigned Files')}</span>}
+					{type === 'artifact' && <Button disabled={isReadOnlyMode} btnType='link' className='add-all-unassigned' onClick={onAddAllUnassigned}>{i18n('Add All Unassigned Files')}</Button>}
 				</div>
 				{type === 'nested' ? (
 					<ul className='nested-list'>{selected.map(nested =>
@@ -294,6 +292,7 @@ class SoftwareProductHeatSetupView extends Component {
 				<div className='heat-setup-view-modules-and-artifacts'>
 					<SortableModuleFileList
 						{...this.props}
+						isReadOnlyMode={this.props.isReadOnlyMode}
 						artifacts={formattedArtifacts}
 						unassigned={formattedUnassigned}/>
 					<ArtifactOrNestedFileList
@@ -302,11 +301,14 @@ class SoftwareProductHeatSetupView extends Component {
 						options={formattedUnassigned}
 						selected={formattedArtifacts}
 						onSelectChanged={onArtifactListChange}
+						isReadOnlyMode={this.props.isReadOnlyMode}
+						headerClassName={(modules && modules.length > 0) ? 'with-list-items' : ''}
 						onAddAllUnassigned={onAddAllUnassigned}/>
 					<ArtifactOrNestedFileList
 						type={'nested'}
 						title={i18n('NESTED HEAT FILES')}
 						options={[]}
+						isReadOnlyMode={this.props.isReadOnlyMode}
 						selected={nested}/>
 				</div>
 				<UnassignedFileList>
@@ -316,6 +318,7 @@ class SoftwareProductHeatSetupView extends Component {
 						:
 						(<EmptyListContent
 							heatDataExist={heatDataExist}
+							isReadOnlyMode={this.props.isReadOnlyMode}
 							onClick={() => this.processAndValidateHeat({modules, unassigned, artifacts, nested}, heatSetupCache)}/>)
 					}
 				</UnassignedFileList>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
index f2d5de4dff..62dcb82db1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
@@ -16,19 +16,18 @@
 import React, {Component, PropTypes} from 'react';
 import classNames from 'classnames';
 import Collapse from 'react-bootstrap/lib/Collapse.js';
-import Icon from 'nfvo-components/icon/Icon.jsx';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import {mouseActions, errorLevels, nodeFilters} from './HeatValidationConstants.js';
 
 const leftPanelWidth = 250;
 const typeToIcon = Object.freeze({
-	heat: 'heat',
-	volume: 'volume',
+	heat: 'nestedHeat',
+	volume: 'base',
 	network: 'network',
-	artifact: 'validation-artifacts',
+	artifact: 'artifacts',
 	env: 'env',
-	other: 'validation-other'
+	other: 'other'
 });
 
 
@@ -74,7 +73,7 @@ function HeatFileTreeRow(props) {
 				{
 
 					<span className='tree-node-icon'>
-						<Icon image={typeToIcon[node.type]} iconClassName={selectedNode === node.name ? 'selected' : ''}/>
+						<SVGIcon name={typeToIcon[node.type]} color={selectedNode === node.name ? 'primary' : 'secondary'}/>
 					</span>
 				}
 				{
@@ -94,7 +93,7 @@ function HeatFileTreeHeader(props) {
 		<div onClick={() => props.selectNode(nodeFilters.ALL)} className={classNames({'attachments-tree-header': true,
 			'header-selected' : props.selectedNode === nodeFilters.ALL})} data-test-id='validation-tree-header'>
 			<div className='tree-header-title' >
-				<Icon image='zip' iconClassName={classNames(props.selectedNode === nodeFilters.ALL ? 'selected' : '', 'header-icon')} />
+				<SVGIcon name='zip' color={props.selectedNode === nodeFilters.ALL ? 'primary' : ''}  iconClassName='header-icon' />
 				<span className={classNames({'tree-header-title-text' : true,
 					'tree-header-title-selected' : props.selectedNode === nodeFilters.ALL})}>{i18n(`HEAT${hasErrors ? ' (Draft)' : ''}`)}</span>
 			</div>
@@ -200,12 +199,13 @@ class HeatMessageBoard extends Component {
 	}
 	renderError(error) {
 		let rand = Math.random() * (3000 - 1) + 1;
+		console.log(this.props.selectedNode );
 		return (
 			<div
 				key={error.name + error.errorMessage + error.parentName + rand}
 				className='error-item' data-test-id='validation-error'>
 				{error.level === errorLevels.WARNING ?
-					<SVGIcon name='exclamationTriangleLine' iconClassName='large' /> : <Icon image='error-lg' /> }
+					<SVGIcon name='exclamationTriangleLine' iconClassName='large' color='warning' /> : <SVGIcon iconClassName='large' color='negative' /> }
 				<span className='error-item-file-type'>
 				{
 					(this.props.selectedNode === nodeFilters.ALL) ?
@@ -217,7 +217,7 @@ class HeatMessageBoard extends Component {
 								{i18n(error.errorMessage)}
 							</span>
 						</span> :
-						i18n(error.errorMesage)
+						i18n(error.errorMessage)
 				}
 				</span>
 			</div>
@@ -234,18 +234,14 @@ class ErrorsAndWarningsCount extends Component {
 		if (!errors) {
 			return null;
 		}
-		let errIcon = 'error';
 		let {size} = this.props;
-		if (size && size === 'large') {
-			errIcon += '-lg';
-		}
 		return (<div className='counters'>
 			{(errors.errorCount > 0) && <div className='counter'>
-				<Icon image={errIcon} iconClassName='counter-icon'/>
-				<div className={'error-text ' + (size ? size : '')} data-test-id='validation-error-count'>{errors.errorCount}</div>
+				<SVGIcon name='error' color='negative' iconClassName={size}/>
+				<div className={'error-text ' + (size ? size : '')} data-test-id='validation-error-count'>={errors.errorCount}</div>
 			</div>}
 			{(errors.warningCount > 0) && <div className='counter'>
-				<SVGIcon name='exclamationTriangleLine' iconClassName={size} />
+				<SVGIcon name='exclamationTriangleLine' iconClassName={size} color='warning'/>
 				<div className={'warning-text ' + (size ? size : '')} data-test-id='validation-warning-count'>{errors.warningCount}</div>
 			</div>}
 		</div>);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
new file mode 100644
index 0000000000..2483d0aaa2
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
@@ -0,0 +1,6 @@
+
+import Validator from 'nfvo-utils/Validator.js';
+
+export  const imageCustomValidations = {
+	'version': value => Validator.validate('version', value, [{type: 'required', data: true}])
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
index 49d891c9df..5c81f05e80 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
@@ -54,9 +54,12 @@ const mapActionsToProps = (dispatch, {softwareProductId, componentId, version})
 		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.IMAGE_EDIT_FORM}),
 		onSubmit: ({data, qdata}) => SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}),
 		onCancel: () => SoftwareProductComponentsImageActionHelper.closeImageEditor(dispatch),
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM),
-		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
-			qName: IMAGE_QUESTIONNAIRE}),
+		onValidateForm: customValidations => {
+			ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM);
+			ValidationHelper.qValidateForm(dispatch, IMAGE_QUESTIONNAIRE, customValidations);
+		},
+		onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData,
+			qName: IMAGE_QUESTIONNAIRE, customValidations}),
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
index 0ab785a97f..7c357429e5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
@@ -30,7 +30,7 @@ export default (state = {}, action) => {
 					'fileName' : {
 						isValid: true,
 						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'validateName', data: true}]
+						validations: [{type: 'required', data: true}]
 					}
 				},
 				formName: forms.IMAGE_EDIT_FORM
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
index 300f8edcc3..7c1a3f5b55 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
@@ -20,6 +20,7 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 
 import FileDetails from './imagesEditorComponents/FileDetails.jsx';
 import ImageDetails from './imagesEditorComponents/ImageDetails.jsx';
+import {imageCustomValidations} from './ImageValidations.js';
 
 class SoftwareProductComponentsImageEditorView extends React.Component {
 	static propTypes = {
@@ -44,7 +45,7 @@ class SoftwareProductComponentsImageEditorView extends React.Component {
 					isValid={isFormValid}
 					formReady={formReady}
 					submitButtonText={editingMode ? i18n('Save') : i18n('Create')}
-					onValidateForm={() => onValidateForm() }
+					onValidateForm={() => onValidateForm(imageCustomValidations) }
 					className='vsp-components-image-editor'>
 					<div className='editor-data'>
 						<FileDetails
@@ -56,7 +57,7 @@ class SoftwareProductComponentsImageEditorView extends React.Component {
 							isManual={isManual}
 							dataMap={dataMap}
 							onQDataChanged={onQDataChanged}/>
-						{editingMode && <ImageDetails dataMap={dataMap}qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
+						{editingMode && <ImageDetails dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
 					</div>
 				</Form>}
 			</div>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
index ca58b697a2..2e9ab417d8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
@@ -40,6 +40,7 @@ const FileDetails = ({editingMode, fileName, onDataChanged, isManual, dataMap, o
 					type='text'
 					className='image-filename'/>
 			</GridItem>
+			{!editingMode && <div className='note-text'>{i18n('After image creation you must go to Edit Image and add File Version')}</div>}
 			{editingMode && <Version isManual={isManual} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
 			{editingMode && <Format isManual={isManual} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>}
 		</GridSection>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
index 3cac9a51b8..7dd577b8c9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
@@ -17,6 +17,7 @@ import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
+import {imageCustomValidations} from '../ImageValidations.js';
 
 
 const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
@@ -28,7 +29,8 @@ const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
 				type='text'
 				className='image-version'
 				label={i18n('Version')}
-				onChange={(version) => onQDataChanged({'version' : version})}
+				isRequired={true}
+				onChange={(version) => onQDataChanged({'version' : version}, {'version' : imageCustomValidations['version']})}
 				isValid={qgenericFieldInfo['version'].isValid}
 				errorText={qgenericFieldInfo['version'].errorText}
 				value={dataMap['version']}/>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
index 9ae9e359b0..8a82f54901 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
@@ -50,6 +50,7 @@ const pointers = [
 		added: 'Please describe.'
 	}
 ];
+//TODO check for buttons
 
 const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDataChanged}) => (
 		<GridItem colSpan={3} key={item.key} >
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
index 36c1728ef3..2d5a965c40 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
@@ -15,10 +15,8 @@
  */
 import React, {Component, PropTypes} from 'react';
 import Dropzone from 'react-dropzone';
-import ButtonGroup from 'react-bootstrap/lib/ButtonGroup.js';
-import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar.js';
-import Button from 'react-bootstrap/lib/Button.js';
-import i18n from 'nfvo-utils/i18n/i18n.js';
+import Button from 'sdc-ui/lib/react/Button.js';
+import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
 import {fileTypes, type2Title, type2Name} from './SoftwareProductComponentsMonitoringConstants.js';
 
 
@@ -59,7 +57,7 @@ class SoftwareProductComponentsMonitoringView extends Component {
 		let typeDisplayName = type2Title[type];
 		return (
 			<Dropzone
-				className={`snmp-dropzone ${this.state.dragging ? 'active-dragging' : ''}`}
+				className={`dropzone ${this.state.dragging ? 'active-dragging' : ''}`}
 				onDrop={(acceptedFiles, rejectedFiles) => this.handleImport(acceptedFiles, rejectedFiles, {isReadOnlyMode, type, refAndName})}
 				onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)}
 				onDragLeave={() => this.setState({dragging:false})}
@@ -71,7 +69,7 @@ class SoftwareProductComponentsMonitoringView extends Component {
 				disabled>
 				<div className='draggable-wrapper'>
 					<div className='section-title'>{typeDisplayName}</div>
-					{fileName ? this.renderUploadedFileName(fileName, type) : this.renderUploadButton(refAndName)}
+					{fileName ? this.renderUploadedFileName(fileName, type, isReadOnlyMode) : this.renderUploadButton(refAndName)}
 				</div>
 			</Dropzone>
 		);
@@ -80,25 +78,32 @@ class SoftwareProductComponentsMonitoringView extends Component {
 	renderUploadButton(refAndName) {
 		let {isReadOnlyMode} = this.props;
 		return (
-			<div
-				className={`software-product-landing-view-top-block-col-upl${isReadOnlyMode ? ' disabled' : ''}`}>
-				<div className='drag-text'>{i18n('Drag & drop for upload')}</div>
-				<div className='or-text'>{i18n('or')}</div>
-				<div className='upload-btn primary-btn' data-test-id={`monitoring-upload-${refAndName}`} onClick={() => this.refs[refAndName].open()}>
-					<span className='primary-btn-text'>{i18n('Select file')}</span>
-				</div>
-			</div>
+			<DraggableUploadFileBox
+				dataTestId={`monitoring-upload-${refAndName}`}
+				className='software-product-landing-view-top-block-col-upl'
+				isReadOnlyMode={isReadOnlyMode}
+				onClick={() => this.refs[refAndName].open()}/>
 		);
 	}
 
-	renderUploadedFileName(filename, type) {
+	renderUploadedFileName(filename, type, isReadOnlyMode) {
 		return (
-			<ButtonToolbar>
-				<ButtonGroup>
-					<Button disabled>{filename}</Button>
-					<Button data-test-id={`monitoring-delete-${type}`} className='delete-button' onClick={()=>this.props.onDeleteFile(type)}>X</Button>
-				</ButtonGroup>
-			</ButtonToolbar>
+				<div className='monitoring-file'>
+					<Button
+						color='white'
+						disabled={true}
+						className='filename'>
+						{filename}
+					</Button>
+
+					<Button
+						color='gray'
+						data-test-id={`monitoring-delete-${type}`}
+						disabled={isReadOnlyMode}
+						onClick={()=>this.props.onDeleteFile(type)}
+						iconName='close'
+						className='delete'/>
+				</div>
 		);
 	}
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
index 18f2ee129c..87abaf4978 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
@@ -17,6 +17,7 @@ import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Dropzone from 'react-dropzone';
 
+import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
 import  {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.js';
 import Form from 'nfvo-components/input/validation/Form.jsx';
 import Input from 'nfvo-components/input/validation/Input.jsx';
@@ -31,17 +32,6 @@ const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
 	type: React.PropTypes.string
 });
 
-const FileUploadBox = ({onClick}) => {
-	return (
-		<div className='file-upload-box'>
-			<div className='drag-text'>{i18n('Drag & drop for upload')}</div>
-			<div className='or-text'>{i18n('or')}</div>
-			<div className='upload-btn primary-btn' onClick={onClick}>
-				<span className='primary-btn-text'>{i18n('Select file')}</span>
-			</div>
-		</div>
-	);
-};
 
 class SoftwareProductProcessesEditorView extends React.Component {
 
@@ -99,7 +89,7 @@ class SoftwareProductProcessesEditorView extends React.Component {
 										type='text'/>
 								</GridItem>
 								<GridItem colSpan={2}>
-									<FileUploadBox onClick={() => this.refs.processEditorFileInput.open()} />
+									<DraggableUploadFileBox isReadOnlyMode={isReadOnlyMode} className='file-upload-box' onClick={() => this.refs.processEditorFileInput.open()} />
 								</GridItem>
 							</GridSection>
 							<GridSection>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
index d3738e3ea4..7ffbeda4dc 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
@@ -19,7 +19,7 @@ import Dropzone from 'react-dropzone';
 
 
 import i18n from 'nfvo-utils/i18n/i18n.js';
-
+import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
 
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import SoftwareProductComponentsList from '../components/SoftwareProductComponentsList.js';
@@ -128,14 +128,11 @@ class SoftwareProductLandingPageView extends React.Component {
 							</div>
 						</div>
 					</div>
-					<div
-						className={classnames('software-product-landing-view-top-block-col-upl', {'disabled': isReadOnlyMode})}>
-						<div className='drag-text'>{i18n('Drag & drop for upload')}</div>
-						<div className='or-text'>{i18n('or')}</div>
-						<div data-test-id='upload-btn' className='upload-btn primary-btn' onClick={() => this.refs.fileInput.open()}>
-							<span className='primary-btn-text'>{i18n('Select file')}</span>
-						</div>
-					</div>
+					<DraggableUploadFileBox
+						dataTestId='upload-btn'
+						isReadOnlyMode={isReadOnlyMode}
+						className={classnames('software-product-landing-view-top-block-col-upl', {'disabled': isReadOnlyMode})}
+						onClick={() => this.refs.fileInput.open()}/>
 				</div>
 			</div>
 		);
@@ -229,7 +226,7 @@ const ProductSummary = ({currentSoftwareProduct, onDetailsSelect}) => {
 
 const LicenseAgreement = ({licenseAgreementName}) => {
 	if (!licenseAgreementName) {
-		return (<div className='missing-license'><SVGIcon name='exclamationTriangleFull'/><div className='warning-text'>{i18n('Missing')}</div></div>);
+		return (<div className='missing-license'><SVGIcon color='warning' name='exclamationTriangleFull'/><div className='warning-text'>{i18n('Missing')}</div></div>);
 	}
 	return <div>{licenseAgreementName}</div>;
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
index 137e4a2b4e..0df36cf65d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
@@ -17,6 +17,7 @@ import React from 'react';
 import Dropzone from 'react-dropzone';
 import classnames from 'classnames';
 
+import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import  {optionsInputValues as ProcessesOptionsInputValues} from './SoftwareProductProcessesConstants.js';
 import Form from 'nfvo-components/input/validation/Form.jsx';
@@ -32,17 +33,6 @@ const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
 	type: React.PropTypes.string
 });
 
-const FileUploadBox = ({onClick}) => {
-	return (
-		<div className='file-upload-box'>
-			<div className='drag-text'>{i18n('Drag & drop for upload')}</div>
-			<div className='or-text'>{i18n('or')}</div>
-			<div className='upload-btn primary-btn' onClick={onClick}>
-				<span className='primary-btn-text'>{i18n('Select file')}</span>
-			</div>
-		</div>
-	);
-};
 
 
 class SoftwareProductProcessesEditorView extends React.Component {
@@ -101,7 +91,7 @@ class SoftwareProductProcessesEditorView extends React.Component {
 										type='text'/>
 								</GridItem>
 								<GridItem colSpan={2}>
-									<FileUploadBox onClick={() => this.refs.processEditorFileInput.open()}/>
+									<DraggableUploadFileBox isReadOnlyMode={isReadOnlyMode} className='file-upload-box' onClick={() => this.refs.processEditorFileInput.open()}/>
 								</GridItem>
 							</GridSection>
 							<GridSection>