[SDC-29] Amdocs OnBoard 1707 initial commit.

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

9 files changed, 322 insertions, 431 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js
index 9616b60b76..efc4fb758f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js
@@ -1,41 +1,36 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * 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
- * 
+ *
+ * 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.
- * ============LICENSE_END=========================================================
+ * 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 {actionTypes as licenseAgreementActionTypes} from './LicenseAgreementConstants.js';
 import FeatureGroupsActionHelper from 'sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js';
 import LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js';
 
-function baseUrl(licenseModelId) {
+function baseUrl(licenseModelId, version) {
 	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/license-agreements`;
+	const {id: versionId} = version;
+	return `${restPrefix}/v1.0/vendor-license-models/${licenseModelId}/versions/${versionId}/license-agreements`;
 }
 
 function fetchLicenseAgreementList(licenseModelId, version) {
-	let versionQuery = version ? `?version=${version}` : '';
-	return RestAPIUtil.fetch(`${baseUrl(licenseModelId)}${versionQuery}`);
+	return RestAPIUtil.fetch(`${baseUrl(licenseModelId, version)}`);
 }
 
-function postLicenseAgreement(licenseModelId, licenseAgreement) {
-	return RestAPIUtil.create(baseUrl(licenseModelId), {
+function postLicenseAgreement(licenseModelId, licenseAgreement, version) {
+	return RestAPIUtil.post(baseUrl(licenseModelId, version), {
 		name: licenseAgreement.name,
 		description: licenseAgreement.description,
 		licenseTerm: licenseAgreement.licenseTerm,
@@ -44,10 +39,10 @@ function postLicenseAgreement(licenseModelId, licenseAgreement) {
 	});
 }
 
-function putLicenseAgreement(licenseModelId, previousLicenseAgreement, licenseAgreement) {
+function putLicenseAgreement(licenseModelId, previousLicenseAgreement, licenseAgreement, version) {
 	const {featureGroupsIds = []} = licenseAgreement;
 	const {featureGroupsIds: prevFeatureGroupsIds = []} = previousLicenseAgreement;
-	return RestAPIUtil.save(`${baseUrl(licenseModelId)}/${licenseAgreement.id}`, {
+	return RestAPIUtil.put(`${baseUrl(licenseModelId, version)}/${licenseAgreement.id}`, {
 		name: licenseAgreement.name,
 		description: licenseAgreement.description,
 		licenseTerm: licenseAgreement.licenseTerm,
@@ -57,8 +52,8 @@ function putLicenseAgreement(licenseModelId, previousLicenseAgreement, licenseAg
 	});
 }
 
-function deleteLicenseAgreement(licenseModelId, licenseAgreementId) {
-	return RestAPIUtil.destroy(`${baseUrl(licenseModelId)}/${licenseAgreementId}`);
+function deleteLicenseAgreement(licenseModelId, licenseAgreementId, version) {
+	return RestAPIUtil.destroy(`${baseUrl(licenseModelId, version)}/${licenseAgreementId}`);
 }
 
 export default {
@@ -70,21 +65,14 @@ export default {
 		}));
 	},
 
-	openLicenseAgreementEditor(dispatch, {licenseModelId, licenseAgreement}) {
-		FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId});
+	openLicenseAgreementEditor(dispatch, {licenseModelId, licenseAgreement, version}) {
+		FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {licenseModelId, version});
 		dispatch({
 			type: licenseAgreementActionTypes.licenseAgreementEditor.OPEN,
 			licenseAgreement
 		});
 	},
 
-	licenseAgreementEditorDataChanged(dispatch, {deltaData}) {
-		dispatch({
-			type: licenseAgreementActionTypes.licenseAgreementEditor.DATA_CHANGED,
-			deltaData
-		});
-	},
-
 	closeLicenseAgreementEditor(dispatch) {
 		dispatch({
 			type: licenseAgreementActionTypes.licenseAgreementEditor.CLOSE
@@ -92,9 +80,9 @@ export default {
 	},
 
 
-	saveLicenseAgreement(dispatch, {licenseModelId, previousLicenseAgreement, licenseAgreement}) {
+	saveLicenseAgreement(dispatch, {licenseModelId, previousLicenseAgreement, licenseAgreement, version}) {
 		if (previousLicenseAgreement) {
-			return putLicenseAgreement(licenseModelId, previousLicenseAgreement, licenseAgreement).then(() => {
+			return putLicenseAgreement(licenseModelId, previousLicenseAgreement, licenseAgreement, version).then(() => {
 				dispatch({
 					type: licenseAgreementActionTypes.EDIT_LICENSE_AGREEMENT,
 					licenseAgreement
@@ -102,7 +90,7 @@ export default {
 			});
 		}
 		else {
-			return postLicenseAgreement(licenseModelId, licenseAgreement).then(response => {
+			return postLicenseAgreement(licenseModelId, licenseAgreement, version).then(response => {
 				dispatch({
 					type: licenseAgreementActionTypes.ADD_LICENSE_AGREEMENT,
 					licenseAgreement: {
@@ -114,8 +102,8 @@ export default {
 		}
 	},
 
-	deleteLicenseAgreement(dispatch, {licenseModelId, licenseAgreementId}) {
-		return deleteLicenseAgreement(licenseModelId, licenseAgreementId).then(() => {
+	deleteLicenseAgreement(dispatch, {licenseModelId, licenseAgreementId, version}) {
+		return deleteLicenseAgreement(licenseModelId, licenseAgreementId, version).then(() => {
 			dispatch({
 				type: licenseAgreementActionTypes.DELETE_LICENSE_AGREEMENT,
 				licenseAgreementId
@@ -130,31 +118,9 @@ export default {
 		});
 	},
 
-	selectLicenseAgreementEditorFeatureGroupsButtonTab(dispatch, {buttonTab}) {
-		dispatch({
-			type: licenseAgreementActionTypes.licenseAgreementEditor.SELECT_FEATURE_GROUPS_BUTTONTAB,
-			buttonTab
-		});
-	},
-
-	hideDeleteConfirm(dispatch) {
-		dispatch({
-			type: licenseAgreementActionTypes.LICENSE_AGREEMENT_DELETE_CONFIRM,
-			licenseAgreementToDelete: false
-		});
-	},
-
-	openDeleteLicenseAgreementConfirm(dispatch, {licenseAgreement} ) {
-		dispatch({
-			type: licenseAgreementActionTypes.LICENSE_AGREEMENT_DELETE_CONFIRM,
-			licenseAgreementToDelete: licenseAgreement
-		});
-	},
-
 	switchVersion(dispatch, {licenseModelId, version}) {
 		LicenseModelActionHelper.fetchLicenseModelById(dispatch, {licenseModelId, version}).then(() => {
 			this.fetchLicenseAgreementList(dispatch, {licenseModelId, version});
 		});
 	}
 };
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConfirmationModal.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConfirmationModal.jsx
deleted file mode 100644
index 42f2407696..0000000000
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConfirmationModal.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import {connect} from 'react-redux';
-import ConfirmationModalView from 'nfvo-components/confirmations/ConfirmationModalView.jsx';
-import LicenseAgreementActionHelper from './LicenseAgreementActionHelper.js';
-import i18n from 'nfvo-utils/i18n/i18n.js';
-
-function renderMsg(licenseAgreementToDelete) {
-	let name = licenseAgreementToDelete ? licenseAgreementToDelete.name : '';
-	let msg = i18n('Are you sure you want to delete "{name}"?', {name});
-	return(
-		<div>
-			<p>{msg}</p>
-		</div>
-	);
-};
-
-const mapStateToProps = ({licenseModel: {licenseAgreement}}, {licenseModelId}) => {
-	let {licenseAgreementToDelete} = licenseAgreement;
-	const show = licenseAgreementToDelete !== false;
-	return {
-		show,
-		title: 'Warning!',
-		type: 'warning',
-		msg: renderMsg(licenseAgreementToDelete),
-		confirmationDetails: {licenseAgreementToDelete, licenseModelId}
-	};
-};
-
-const mapActionsToProps = (dispatch) => {
-	return {
-		onConfirmed: ({licenseAgreementToDelete, licenseModelId}) => {
-
-			LicenseAgreementActionHelper.deleteLicenseAgreement(dispatch, {licenseModelId, licenseAgreementId: licenseAgreementToDelete.id});
-			LicenseAgreementActionHelper.hideDeleteConfirm(dispatch);
-		},
-		onDeclined: () => {
-			LicenseAgreementActionHelper.hideDeleteConfirm(dispatch);
-		}
-	};
-};
-
-export default connect(mapStateToProps, mapActionsToProps)(ConfirmationModalView);
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js
index af5c454e22..998d5f0e8d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js
@@ -1,52 +1,43 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * 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
- * 
+ *
+ * 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.
- * ============LICENSE_END=========================================================
+ * 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';
 import i18n from 'nfvo-utils/i18n/i18n.js';
+import InputOptions, {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx';
 
 export const actionTypes = keyMirror({
 	LICENSE_AGREEMENT_LIST_LOADED: null,
 	ADD_LICENSE_AGREEMENT: null,
 	EDIT_LICENSE_AGREEMENT: null,
 	DELETE_LICENSE_AGREEMENT: null,
-	LICENSE_AGREEMENT_DELETE_CONFIRM: null,
 
 	licenseAgreementEditor: {
 		OPEN: null,
 		CLOSE: null,
 		DATA_CHANGED: null,
-		SELECT_TAB: null,
-		SELECT_FEATURE_GROUPS_BUTTONTAB: null,
+		SELECT_TAB: null
 	}
 
 });
 
+export const LA_EDITOR_FORM = 'LA_EDITOR_FORM';
+
 export const enums = keyMirror({
 	SELECTED_LICENSE_AGREEMENT_TAB: {
 		GENERAL: 1,
 		FEATURE_GROUPS: 2
-	},
-
-	SELECTED_FEATURE_GROUPS_BUTTONTAB: {
-		ASSOCIATED_FEATURE_GROUPS: 1,
-		AVAILABLE_FEATURE_GROUPS: 2
 	}
 });
 
@@ -64,3 +55,11 @@ export const optionsInputValues = {
 		{enum: 'Unlimited', title: 'Unlimited'}
 	]
 };
+
+export const extractValue = (item) => {
+	if (item === undefined) {
+		return '';
+	} //TODO fix it later
+
+	return item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : '';
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js
index 6a3e4dbc73..aada8ddca1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor.js
@@ -1,31 +1,29 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * 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
- * 
+ *
+ * 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.
- * ============LICENSE_END=========================================================
+ * 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 LicenseAgreementActionHelper from './LicenseAgreementActionHelper.js';
 import LicenseAgreementEditorView from './LicenseAgreementEditorView.jsx';
+import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
 export const mapStateToProps = ({licenseModel: {licenseAgreement, featureGroup}}) => {
 
 
-	let {data, selectedTab, selectedFeatureGroupsButtonTab} = licenseAgreement.licenseAgreementEditor;
+	let {data, selectedTab, genericFieldInfo, formReady} = licenseAgreement.licenseAgreementEditor;
+	const list = licenseAgreement.licenseAgreementList;
+	const LANames = {};
 
 	let previousData;
 	const licenseAgreementId = data ? data.id : null;
@@ -33,27 +31,47 @@ export const mapStateToProps = ({licenseModel: {licenseAgreement, featureGroup}}
 		previousData = licenseAgreement.licenseAgreementList.find(licenseAgreement => licenseAgreement.id === licenseAgreementId);
 	}
 
+	for (let i = 0; i < list.length; i++) {
+		LANames[list[i].name] = list[i].id;
+	}
+
 	const {featureGroupsList = []} = featureGroup;
 
+	let isFormValid = true;
+	let invalidTabs = [];
+	for (let field in genericFieldInfo) {
+		if (!genericFieldInfo[field].isValid) {
+			isFormValid = false;
+			let tabId = genericFieldInfo[field].tabId;
+			if (invalidTabs.indexOf(tabId) === -1) {
+				invalidTabs[invalidTabs.length] = genericFieldInfo[field].tabId;
+			}
+		}
+	}
+
 	return {
 		data,
 		previousData,
 		selectedTab,
-		selectedFeatureGroupsButtonTab,
-		featureGroupsList
+		featureGroupsList,
+		LANames,
+		genericFieldInfo,
+		isFormValid,
+		formReady,
+		invalidTabs
 	};
 };
 
-export const mapActionsToProps = (dispatch, {licenseModelId}) => {
+export const mapActionsToProps = (dispatch, {licenseModelId, version}) => {
 	return {
-		onDataChanged: deltaData => LicenseAgreementActionHelper.licenseAgreementEditorDataChanged(dispatch, {deltaData}),
+		onDataChanged: (deltaData, formName, customValidations) => ValidationHelper.dataChanged(dispatch, {deltaData, formName, customValidations}),
 		onTabSelect: tab => LicenseAgreementActionHelper.selectLicenseAgreementEditorTab(dispatch, {tab}),
-		onFeatureGroupsButtonTabSelect: buttonTab => LicenseAgreementActionHelper.selectLicenseAgreementEditorFeatureGroupsButtonTab(dispatch, {buttonTab}),
 		onCancel: () => LicenseAgreementActionHelper.closeLicenseAgreementEditor(dispatch),
 		onSubmit: ({previousLicenseAgreement, licenseAgreement}) => {
 			LicenseAgreementActionHelper.closeLicenseAgreementEditor(dispatch);
-			LicenseAgreementActionHelper.saveLicenseAgreement(dispatch, {licenseModelId, previousLicenseAgreement, licenseAgreement});
-		}
+			LicenseAgreementActionHelper.saveLicenseAgreement(dispatch, {licenseModelId, previousLicenseAgreement, licenseAgreement, version});
+		},
+		onValidateForm: (formName) => ValidationHelper.validateForm(dispatch, formName)
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js
index 74e2f6e8c1..e02935c579 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorReducer.js
@@ -1,40 +1,55 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * 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
- * 
+ *
+ * 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.
- * ============LICENSE_END=========================================================
+ * 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 {actionTypes, defaultState} from './LicenseAgreementConstants.js';
+import {actionTypes, defaultState, LA_EDITOR_FORM, enums as LicenseAgreementEnums} from './LicenseAgreementConstants.js';
 
 export default (state = {}, action) => {
 	switch (action.type) {
 		case actionTypes.licenseAgreementEditor.OPEN:
 			return {
 				...state,
+				formReady: null,
+				formName: LA_EDITOR_FORM,
+				genericFieldInfo: {
+					'description' : {
+						isValid: true,
+						errorText: '',
+						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 1000}],
+						tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
+					},
+					'requirementsAndConstrains' : {
+						isValid: true,
+						errorText: '',
+						validations: [{type: 'maxLength', data: 1000}],
+						tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
+					},
+					'licenseTerm' : {
+						isValid: true,
+						errorText: '',
+						validations: [],
+						tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
+					},
+					'name' : {
+						isValid: true,
+						errorText: '',
+						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 25}],
+						tabId: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL
+					}
+				},
 				data: action.licenseAgreement ? { ...action.licenseAgreement } : defaultState.LICENSE_AGREEMENT_EDITOR_DATA
 			};
-		case actionTypes.licenseAgreementEditor.DATA_CHANGED:
-			return {
-				...state,
-				data: {
-					...state.data,
-					...action.deltaData
-				}
-			};
 		case actionTypes.licenseAgreementEditor.CLOSE:
 			return {};
 		case actionTypes.licenseAgreementEditor.SELECT_TAB:
@@ -42,11 +57,6 @@ export default (state = {}, action) => {
 				...state,
 				selectedTab: action.tab
 			};
-		case actionTypes.licenseAgreementEditor.SELECT_FEATURE_GROUPS_BUTTONTAB:
-			return {
-				...state,
-				selectedFeatureGroupsButtonTab: action.buttonTab
-			};
 		default:
 			return state;
 	}
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx
index b21f943fed..67a3333a3a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx
@@ -1,17 +1,36 @@
+/*!
+ * 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 from 'react';
-import ButtonGroup from 'react-bootstrap/lib/ButtonGroup.js';
-import Button from 'react-bootstrap/lib/Button.js';
-import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
-import ValidationTabs from 'nfvo-components/input/validation/ValidationTabs.jsx';
-import ValidationTab from 'nfvo-components/input/validation/ValidationTab.jsx';
-import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
+
+import GridSection from 'nfvo-components/grid/GridSection.jsx';
+import GridItem from 'nfvo-components/grid/GridItem.jsx';
+import Form from 'nfvo-components/input/validation/Form.jsx';
+import Tabs from 'nfvo-components/input/validation/Tabs.jsx';
+import Tab from 'react-bootstrap/lib/Tab.js';
+import Input from 'nfvo-components/input/validation/Input.jsx';
 import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx';
-import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
-import ListEditorViewItem from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
+import Validator from 'nfvo-utils/Validator.js';
 
-import {enums as LicenseAgreementEnums, optionsInputValues as LicenseAgreementOptionsInputValues} from './LicenseAgreementConstants.js';
+import {enums as LicenseAgreementEnums, optionsInputValues as LicenseAgreementOptionsInputValues, LA_EDITOR_FORM} from './LicenseAgreementConstants.js';
 
+const dualBoxFilterTitle = {
+	left: i18n('Available Feature Groups'),
+	right: i18n('Selected Feature Groups')
+};
 
 const LicenseAgreementPropType = React.PropTypes.shape({
 	id: React.PropTypes.string,
@@ -19,14 +38,77 @@ const LicenseAgreementPropType = React.PropTypes.shape({
 	description: React.PropTypes.string,
 	requirementsAndConstrains: React.PropTypes.string,
 	licenseTerm: React.PropTypes.object,
-	featureGroupsIds: React.PropTypes.arrayOf(React.PropTypes.string)
+	featureGroupsIds: React.PropTypes.arrayOf(React.PropTypes.string),
+	version: React.PropTypes.object
 });
 
+
+const GeneralTabContent = ({data, genericFieldInfo, onDataChanged, validateName, validateLTChoice}) => {
+	let {name, description, requirementsAndConstrains, licenseTerm} = data;
+	return (
+		<GridSection>
+			<GridItem colSpan={2}>
+				<Input
+					isValid={genericFieldInfo.name.isValid}
+					errorText={genericFieldInfo.name.errorText}
+					onChange={name => onDataChanged({name}, LA_EDITOR_FORM, { name: validateName })}
+					label={i18n('Name')}
+					value={name}
+					data-test-id='create-la-name'
+					name='license-agreement-name'
+					isRequired={true}
+					type='text'/>
+				<Input
+					isValid={genericFieldInfo.requirementsAndConstrains.isValid}
+					errorText={genericFieldInfo.requirementsAndConstrains.errorText}
+					onChange={requirementsAndConstrains => onDataChanged({requirementsAndConstrains}, LA_EDITOR_FORM)}
+					label={i18n('Requirements and Constraints')}
+					value={requirementsAndConstrains}
+					data-test-id='create-la-requirements-constants'
+					name='license-agreement-requirements-and-constraints'
+					type='textarea'/>
+				<Input
+					label={i18n('License Term')}
+					type='select'
+					value={licenseTerm && licenseTerm.choice}
+					isRequired={true}
+					onChange={e => {
+						const selectedIndex = e.target.selectedIndex;
+						const licenseTerm = e.target.options[selectedIndex].value;
+						onDataChanged({licenseTerm:{choice: licenseTerm, other: ''}}, LA_EDITOR_FORM, { licenseTerm: validateLTChoice });
+					}}
+					isValid={genericFieldInfo.licenseTerm.isValid}
+					errorText={genericFieldInfo.licenseTerm.errorText}
+					className='input-options-select'
+					groupClassName='bootstrap-input-options'
+					data-test-id='create-la-license-term' >
+					{LicenseAgreementOptionsInputValues.LICENSE_MODEL_TYPE.map(mtype =>
+						<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
+				</Input>
+			</GridItem>
+			<GridItem colSpan={2} stretch>
+				<Input
+					isValid={genericFieldInfo.description.isValid}
+					errorText={genericFieldInfo.description.errorText}
+					onChange={description => onDataChanged({description}, LA_EDITOR_FORM)}
+					label={i18n('Description')}
+					value={description}
+					overlayPos='bottom'
+					data-test-id='create-la-description'
+					name='license-agreement-description'
+					isRequired={true}
+					type='textarea'/>
+			</GridItem>
+		</GridSection>
+	);
+};
+
 class LicenseAgreementEditorView extends React.Component {
 
 	static propTypes = {
 		data: LicenseAgreementPropType,
 		previousData: LicenseAgreementPropType,
+		LANames: React.PropTypes.object,
 		isReadOnlyMode: React.PropTypes.bool,
 		onDataChanged: React.PropTypes.func.isRequired,
 		onSubmit: React.PropTypes.func.isRequired,
@@ -42,7 +124,6 @@ class LicenseAgreementEditorView extends React.Component {
 
 	static defaultProps = {
 		selectedTab: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL,
-		selectedFeatureGroupsButtonTab: LicenseAgreementEnums.SELECTED_FEATURE_GROUPS_BUTTONTAB.AVAILABLE_FEATURE_GROUPS,
 		data: {}
 	};
 
@@ -51,21 +132,44 @@ class LicenseAgreementEditorView extends React.Component {
 	};
 
 	render() {
-		let {selectedTab, onTabSelect, isReadOnlyMode} = this.props;
+		let {selectedTab, onTabSelect, isReadOnlyMode, featureGroupsList, data, onDataChanged, genericFieldInfo} = this.props;
 		return (
-			<ValidationForm
-				ref='validationForm'
-				hasButtons={true}
-				onSubmit={ () => this.submit() }
-				onReset={ () => this.props.onCancel() }
-				labledButtons={true}
-				isReadOnlyMode={isReadOnlyMode}
-				className='license-agreement-form'>
-				<ValidationTabs activeKey={onTabSelect ? selectedTab : undefined} onSelect={onTabSelect}>
-					{this.renderGeneralTab()}
-					{this.renderFeatureGroupsTab()}
-				</ValidationTabs>
-			</ValidationForm>
+			<div>
+				{genericFieldInfo && <Form
+					ref='validationForm'
+					hasButtons={true}
+					onSubmit={ () => this.submit() }
+					onReset={ () => this.props.onCancel() }
+					labledButtons={true}
+					isReadOnlyMode={isReadOnlyMode}
+					isValid={this.props.isFormValid}
+					formReady={this.props.formReady}
+					onValidateForm={() => this.props.onValidateForm(LA_EDITOR_FORM) }
+					className='license-agreement-form'>
+					<Tabs activeKey={onTabSelect ? selectedTab : undefined} onSelect={onTabSelect} invalidTabs={this.props.invalidTabs} >
+						<Tab
+							eventKey={LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL}
+							data-test-id='general-tab'
+							title={i18n('General')}>
+								<GeneralTabContent data={data} genericFieldInfo={genericFieldInfo} onDataChanged={onDataChanged} validateLTChoice={(value)=>this.validateLTChoice(value)}
+									validateName={(value)=>this.validateName(value)}/>
+						</Tab>
+						<Tab
+							eventKey={LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.FEATURE_GROUPS}
+							data-test-id='feature-group-tab'
+							title={i18n('Feature Groups')}>
+							{featureGroupsList.length > 0 ?
+								<DualListboxView
+									isReadOnlyMode={isReadOnlyMode}
+									filterTitle={dualBoxFilterTitle}
+									selectedValuesList={data.featureGroupsIds}
+									availableList={featureGroupsList}
+									onChange={ selectedValuesList => onDataChanged( { featureGroupsIds: selectedValuesList }, LA_EDITOR_FORM )}/> :
+								<p>{i18n('There is no available feature groups')}</p>}
+						</Tab>
+					</Tabs>
+				</Form>}
+			</div>
 		);
 	}
 
@@ -74,173 +178,19 @@ class LicenseAgreementEditorView extends React.Component {
 		this.props.onSubmit({licenseAgreement, previousLicenseAgreement});
 	}
 
-	renderGeneralTab() {
-		let {data = {}, onDataChanged} = this.props;
-		let {name, description, requirementsAndConstrains, licenseTerm} = data;
-		return (
-			<ValidationTab
-				eventKey={LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL}
-				title={i18n('General')}>
-				<div className='license-agreement-form-row'>
-					<div className='license-agreement-form-col'>
-						<ValidationInput
-							onChange={name => onDataChanged({name})}
-							label={i18n('Name')}
-							value={name}
-							name='license-agreement-name'
-							validations={{maxLength: 25, required: true}}
-							type='text'/>
-						<ValidationInput
-							onChange={requirementsAndConstrains => onDataChanged({requirementsAndConstrains})}
-							label={i18n('Requirements and Constraints')}
-							value={requirementsAndConstrains}
-							name='license-agreement-requirements-and-constraints'
-							validations={{maxLength: 1000}}
-							type='textarea'/>
-					</div>
-					<ValidationInput
-						onChange={description => onDataChanged({description})}
-						label={i18n('Description')}
-						value={description}
-						name='license-agreement-description'
-						validations={{maxLength: 1000, required: true}}
-						type='textarea'/>
-				</div>
-				<div className='license-agreement-form-row'>
-					<ValidationInput
-						onEnumChange={licenseTerm => onDataChanged({licenseTerm:{choice: licenseTerm, other: ''}})}
-						selectedEnum={licenseTerm && licenseTerm.choice}
-						validations={{required: true}}
-						type='select'
-						label={i18n('License Term')}
-						values={LicenseAgreementOptionsInputValues.LICENSE_MODEL_TYPE}/>
-				</div>
-			</ValidationTab>
-		);
-	}
-
-	renderFeatureGroupsTab() {
-		let {onFeatureGroupsButtonTabSelect, selectedFeatureGroupsButtonTab, featureGroupsList} = this.props;
-		if (featureGroupsList.length > 0) {
-			return (
-				<ValidationTab
-					eventKey={LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.FEATURE_GROUPS}
-					title={i18n('Feature Groups')}>
-					<ButtonGroup>
-						{
-							this.renderFeatureGroupsButtonTab(
-								LicenseAgreementEnums.SELECTED_FEATURE_GROUPS_BUTTONTAB.ASSOCIATED_FEATURE_GROUPS,
-								selectedFeatureGroupsButtonTab,
-								i18n('Associated Feature Groups'),
-								onFeatureGroupsButtonTabSelect
-							)
-						}
-						{
-							this.renderFeatureGroupsButtonTab(
-								LicenseAgreementEnums.SELECTED_FEATURE_GROUPS_BUTTONTAB.AVAILABLE_FEATURE_GROUPS,
-								selectedFeatureGroupsButtonTab,
-								i18n('Available Feature Groups'),
-								onFeatureGroupsButtonTabSelect
-							)
-						}
-					</ButtonGroup>
-					{this.renderFeatureGroupsButtonTabContent(selectedFeatureGroupsButtonTab)}
-				</ValidationTab>
-			);
-		} else {
-			return (
-				<ValidationTab
-					eventKey={LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.FEATURE_GROUPS}
-					title={i18n('Feature Groups')}>
-					<p>{i18n('There is no available feature groups')}</p>
-				</ValidationTab>
-			);
+	validateLTChoice(value) {
+		if (!value.choice) {
+			return {isValid: false, errorText: i18n('Field is required')};
 		}
+		return {isValid: true, errorText: ''};
 	}
 
-	renderFeatureGroupsButtonTabContent(selectedFeatureGroupsButtonTab) {
-		const {featureGroupsList = [], data: {featureGroupsIds = []}} = this.props;
-		const {localFeatureGroupsListFilter} = this.state;
-		let selectedFeatureGroups = featureGroupsIds.map(featureGroupId => featureGroupsList.find(featureGroup => featureGroup.id === featureGroupId));
-
-		const dualBoxFilterTitle = {
-			left: i18n('Available Feature Groups'),
-			right: i18n('Selected Feature Groups')
-		};
-
-		switch (selectedFeatureGroupsButtonTab) {
-			case LicenseAgreementEnums.SELECTED_FEATURE_GROUPS_BUTTONTAB.ASSOCIATED_FEATURE_GROUPS:
-				if (!selectedFeatureGroups.length) {
-					return (
-						<div className='no-items-msg'>
-							{i18n('There are currently no feature groups associated with this license agreement. Click "Available Feature Groups" to associate.')}
-						</div>
-					);
-				}
-				if (featureGroupsList.length) {
-					return (
-						<ListEditorView
-							className='thinner-list'
-							filterValue={localFeatureGroupsListFilter}
-							onFilter={localFeatureGroupsListFilter => this.setState({localFeatureGroupsListFilter})}>
-							{this.filterAssociatedFeatureGroupsList(selectedFeatureGroups).map(featureGroup => this.renderAssociatedFeatureGroupListItem(featureGroup))}
-						</ListEditorView>
-					);
-				}
-				return;
-			case LicenseAgreementEnums.SELECTED_FEATURE_GROUPS_BUTTONTAB.AVAILABLE_FEATURE_GROUPS:
-				return (
-					<DualListboxView
-						filterTitle={dualBoxFilterTitle}
-						selectedValuesList={this.props.data.featureGroupsIds}
-						availableList={this.props.featureGroupsList}
-						onChange={ selectedValuesList => this.props.onDataChanged( { featureGroupsIds: selectedValuesList } )}/>
-				);
-		}
-	}
+	validateName(value) {
+		const {data: {id}, LANames} = this.props;
+		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: LANames});
 
-	renderFeatureGroupsButtonTab(buttonTab, selectedButtonTab, title, onClick) {
-		const isSelected = buttonTab === selectedButtonTab;
-		return (
-			<Button
-				className='button-tab'
-				active={isSelected}
-				onClick={() => !isSelected && onClick(buttonTab)}>
-				{ title }
-			</Button>
-		);
-	}
-
-	renderAssociatedFeatureGroupListItem({id, name, entitlementPoolsIds = [], licenseKeyGroupsIds = []}) {
-		const {onDataChanged, data: {featureGroupsIds}, isReadOnlyMode} = this.props;
-		return (
-			<ListEditorViewItem
-				key={id}
-				onDelete={() => onDataChanged({featureGroupsIds: featureGroupsIds.filter(featureGroupId => featureGroupId !== id)})}
-				isReadOnlyMode={isReadOnlyMode}>
-				<div className='name'>{name}</div>
-				<div className='inner-objects-count'>{
-					i18n(
-						'Entitlement Pools({entitlementPoolsCounter}), License Key Groups({licenseKeyGroupsCount})',
-						{
-							entitlementPoolsCounter: entitlementPoolsIds.length,
-							licenseKeyGroupsCount: licenseKeyGroupsIds.length
-						}
-					)
-				}</div>
-			</ListEditorViewItem>
-		);
-	}
-
-	filterAssociatedFeatureGroupsList(featureGroupsList) {
-		let {localFeatureGroupsListFilter} = this.state;
-		if (localFeatureGroupsListFilter) {
-			const filter = new RegExp(escape(localFeatureGroupsListFilter), 'i');
-			return featureGroupsList.filter(({name}) => name.match(filter));
-		}
-		else {
-			return featureGroupsList;
-		}
+		return !isExists ?  {isValid: true, errorText: ''} :
+			{isValid: false, errorText: i18n('License Agreement by the name \'' + value + '\' already exists. License agreement name must be unique')};
 	}
 }
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js
index ca18bfab79..373694f2bf 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js
@@ -1,39 +1,35 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * 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
- * 
+ *
+ * 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.
- * ============LICENSE_END=========================================================
+ * 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 LicenseModelActionHelper from 'sdc-app/onboarding/licenseModel/LicenseModelActionHelper.js';
+import i18n from 'nfvo-utils/i18n/i18n.js';
 import LicenseAgreementActionHelper from './LicenseAgreementActionHelper.js';
 import LicenseAgreementListEditorView from './LicenseAgreementListEditorView.jsx';
 import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
-import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
+import {actionTypes as globalMoadlActions}  from 'nfvo-components/modal/GlobalModalConstants.js';
 
 const mapStateToProps = ({licenseModel: {licenseAgreement, licenseModelEditor}}) => {
 	let {licenseAgreementList} = licenseAgreement;
 	let {data} = licenseAgreement.licenseAgreementEditor;
-	let {vendorName} = licenseModelEditor.data;
+	let {vendorName, version} = licenseModelEditor.data;
 
 	let isReadOnlyMode = VersionControllerUtils.isReadOnly(licenseModelEditor.data);
 
 	return {
 		vendorName,
+		version,
 		licenseAgreementList,
 		isReadOnlyMode,
 		isDisplayModal: Boolean(data),
@@ -43,16 +39,16 @@ const mapStateToProps = ({licenseModel: {licenseAgreement, licenseModelEditor}})
 
 const mapActionsToProps = (dispatch, {licenseModelId}) => {
 	return {
-		onAddLicenseAgreementClick: () => LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId}),
-		onEditLicenseAgreementClick: licenseAgreement => LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId, licenseAgreement}),
-		onDeleteLicenseAgreement: licenseAgreement => LicenseAgreementActionHelper.openDeleteLicenseAgreementConfirm(dispatch, {licenseAgreement}),
-		onCallVCAction: action => {
-			LicenseModelActionHelper.performVCAction(dispatch, {licenseModelId, action}).then(() => {
-				LicenseAgreementActionHelper.fetchLicenseAgreementList(dispatch, {licenseModelId});
-			});
-		},
-		switchLicenseModelVersion: version => LicenseAgreementActionHelper.switchVersion(dispatch, {licenseModelId, version}),
-		onClose: () => OnboardingActionHelper.navigateToOnboardingCatalog(dispatch)
+		onAddLicenseAgreementClick: (version) => LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId, version}),
+		onEditLicenseAgreementClick: (licenseAgreement, version) => LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {licenseModelId, licenseAgreement, version}),
+		onDeleteLicenseAgreement: (licenseAgreement, version) => dispatch({
+			type: globalMoadlActions.GLOBAL_MODAL_WARNING,
+			data:{
+				msg: i18n('Are you sure you want to delete "{name}"?', {name: licenseAgreement.name}),
+				title: i18n('Warning'),
+				onConfirmed: ()=>LicenseAgreementActionHelper.deleteLicenseAgreement(dispatch, {licenseModelId, licenseAgreementId: licenseAgreement.id, version})
+			}
+		})
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx
index 4d7e704ba3..776b04b8eb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx
@@ -1,15 +1,26 @@
+/*!
+ * 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 from 'react';
-
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Modal from 'nfvo-components/modal/Modal.jsx';
 
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 import LicenseAgreementEditor from './LicenseAgreementEditor.js';
-import InputOptions, {other as optionInputOther} from 'nfvo-components/input/inputOptions/InputOptions.jsx';
-import {optionsInputValues} from './LicenseAgreementConstants';
-import LicenseAgreementConfirmationModal from './LicenseAgreementConfirmationModal.jsx';
-
+import {extractValue} from './LicenseAgreementConstants';
 
 class LicenseAgreementListEditorView extends React.Component {
 	static propTypes = {
@@ -22,7 +33,6 @@ class LicenseAgreementListEditorView extends React.Component {
 		onAddLicenseAgreementClick: React.PropTypes.func,
 		onEditLicenseAgreementClick: React.PropTypes.func,
 		onDeleteLicenseAgreement: React.PropTypes.func,
-		onCallVCAction: React.PropTypes.func
 	};
 
 	static defaultProps = {
@@ -34,35 +44,33 @@ class LicenseAgreementListEditorView extends React.Component {
 	};
 
 	render() {
-		const {licenseModelId, vendorName, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props;
+		const {licenseModelId, vendorName, isReadOnlyMode, isDisplayModal, isModalInEditMode, version} = this.props;
 		const {onAddLicenseAgreementClick} = this.props;
 		const {localFilter} = this.state;
 
 		return (
 			<div className='license-agreement-list-editor'>
-					<ListEditorView
-						title={i18n('License Agreements for {vendorName} License Model', {vendorName})}
-						plusButtonTitle={i18n('Add License Agreement')}
-						onAdd={onAddLicenseAgreementClick}
-						filterValue={localFilter}
-						onFilter={filter => this.setState({localFilter: filter})}
-						isReadOnlyMode={isReadOnlyMode}>
-						{this.filterList().map(licenseAgreement => this.renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode))}
-					</ListEditorView>
-				<Modal show={isDisplayModal} bsSize='large' animation={true} className='license-agreement-modal'>
+				<ListEditorView
+					title={i18n('License Agreements', {vendorName})}
+					plusButtonTitle={i18n('Add License Agreement')}
+					onAdd={() => onAddLicenseAgreementClick(version)}
+					filterValue={localFilter}
+					onFilter={value => this.setState({localFilter: value})}
+					isReadOnlyMode={isReadOnlyMode}>
+					{this.filterList().map(licenseAgreement => this.renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode, version))}
+				</ListEditorView>
+				<Modal show={isDisplayModal} bsSize='large' animation={true} className='onborading-modal license-agreement-modal'>
 					<Modal.Header>
 						<Modal.Title>{`${isModalInEditMode ? i18n('Edit License Agreement') : i18n('Create New License Agreement')}`}</Modal.Title>
 					</Modal.Header>
 					<Modal.Body>
 						{
 							isDisplayModal && (
-								<LicenseAgreementEditor licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode} />
+								<LicenseAgreementEditor version={version} licenseModelId={licenseModelId} isReadOnlyMode={isReadOnlyMode} />
 							)
 						}
 					</Modal.Body>
 				</Modal>
-				<LicenseAgreementConfirmationModal licenseModelId={licenseModelId}/>
-
 			</div>
 		);
 	}
@@ -73,7 +81,7 @@ class LicenseAgreementListEditorView extends React.Component {
 		if (localFilter.trim()) {
 			const filter = new RegExp(escape(localFilter), 'i');
 			return licenseAgreementList.filter(({name = '', description = '', licenseTerm = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter) || escape(this.extractValue(licenseTerm)).match(filter);
+				return escape(name).match(filter) || escape(description).match(filter) || escape(extractValue(licenseTerm)).match(filter);
 			});
 		}
 		else {
@@ -81,14 +89,14 @@ class LicenseAgreementListEditorView extends React.Component {
 		}
 	}
 
-	renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode) {
+	renderLicenseAgreementListItem(licenseAgreement, isReadOnlyMode, version) {
 		let {id, name, description, licenseTerm, featureGroupsIds = []} = licenseAgreement;
 		let {onEditLicenseAgreementClick, onDeleteLicenseAgreement} = this.props;
 		return (
 			<ListEditorItemView
 				key={id}
-				onSelect={() => onEditLicenseAgreementClick(licenseAgreement)}
-				onDelete={() => onDeleteLicenseAgreement(licenseAgreement)}
+				onSelect={() => onEditLicenseAgreementClick(licenseAgreement, version)}
+				onDelete={() => onDeleteLicenseAgreement(licenseAgreement, version)}
 				className='list-editor-item-view'
 				isReadOnlyMode={isReadOnlyMode}>
 				<div className='list-editor-item-view-field'>
@@ -98,7 +106,7 @@ class LicenseAgreementListEditorView extends React.Component {
 				<div className='list-editor-item-view-field'>
 					<div className='list-editor-item-view-field-tight'>
 						<div className='title'>{i18n('Type')}</div>
-						<div className='text type'>{this.extractValue(licenseTerm)}</div>
+						<div className='text type'>{extractValue(licenseTerm)}</div>
 					</div>
 					<div className='list-editor-item-view-field-tight'>
 						<div className='title'>{i18n('Feature')}</div>
@@ -113,14 +121,6 @@ class LicenseAgreementListEditorView extends React.Component {
 			</ListEditorItemView>
 		);
 	}
-
-	extractValue(item) {
-		if (item === undefined) {
-			return '';
-		} //TODO fix it later
-
-		return item ? item.choice === optionInputOther.OTHER ? item.other : InputOptions.getTitleByName(optionsInputValues, item.choice) : '';
-	}
 }
 
 export default LicenseAgreementListEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js
index 5b5fa00df1..e6a8f34b58 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListReducer.js
@@ -1,23 +1,18 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * 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
- * 
+ *
+ * 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.
- * ============LICENSE_END=========================================================
+ * 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 {actionTypes as licenseAgreementActionTypes} from './LicenseAgreementConstants';
 
 export default (state = [], action) => {