[SDC-29] Amdocs OnBoard 1707 initial commit.

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

9 files changed, 291 insertions, 253 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
index 5c3a8dae01..66926ce4b3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
@@ -1,30 +1,27 @@
-/*-
- * ============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 i18n from 'nfvo-utils/i18n/i18n.js';
+import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
 import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 
 import SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper.js';
 import SoftwareProductProcessesView from './SoftwareProductProcessesView.jsx';
 
-const mapStateToProps = ({softwareProduct}) => {
+export const mapStateToProps = ({softwareProduct}) => {
 	let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductProcesses: {processesList, processesEditor}} = softwareProduct;
 	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
 	let {data} = processesEditor;
@@ -42,7 +39,14 @@ const mapActionsToProps = (dispatch, {softwareProductId}) => {
 	return {
 		onAddProcess: () => SoftwareProductProcessesActionHelper.openEditor(dispatch),
 		onEditProcess: (process) => SoftwareProductProcessesActionHelper.openEditor(dispatch, process),
-		onDeleteProcess: (process) => SoftwareProductProcessesActionHelper.openDeleteProcessesConfirm(dispatch, {process, softwareProductId})
+		onDeleteProcess: (process, version) => dispatch({
+			type: modalActionTypes.GLOBAL_MODAL_WARNING,
+			data:{
+				msg: i18n('Are you sure you want to delete "{name}"?', {name: process.name}),
+				onConfirmed: ()=> SoftwareProductProcessesActionHelper.deleteProcess(dispatch,
+					{process, softwareProductId, version})
+			}
+		})
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
index df5d08ffe5..8fd370b6cc 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
@@ -1,62 +1,57 @@
-/*-
- * ============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} from './SoftwareProductProcessesConstants.js';
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 
-function baseUrl(svpId) {
+function baseUrl(vspId, version) {
+	let {id: versionId} = version;
 	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${svpId}/processes`;
+	return `${restPrefix}/v1.0/vendor-software-products/${vspId}/versions/${versionId}/processes`;
 }
 
-function putProcess(softwareProductId, process) {
-	return RestAPIUtil.save(`${baseUrl(softwareProductId)}/${process.id}`, {
+function putProcess(softwareProductId, version, process) {
+	return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${process.id}`, {
 		name: process.name,
-		description: process.description
+		description: process.description,
+		type: process.type === '' ? null : process.type
 	});
 }
 
-function postProcess(softwareProductId, process) {
-	return RestAPIUtil.create(`${baseUrl(softwareProductId)}`, {
+function postProcess(softwareProductId, version, process) {
+	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
 		name: process.name,
-		description: process.description
+		description: process.description,
+		type: process.type === '' ? null : process.type
 	});
 }
 
-function deleteProcess(softwareProductId, processId) {
-	return RestAPIUtil.destroy(`${baseUrl(softwareProductId)}/${processId}`);
+function deleteProcess(softwareProductId, version, processId) {
+	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${processId}`);
 }
 
-function uploadFileToProcess(softwareProductId, processId, formData)
+function uploadFileToProcess(softwareProductId, version, processId, formData)
 {
-	return RestAPIUtil.create(`${baseUrl(softwareProductId)}/${processId}/upload`, formData);
+	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}/${processId}/upload`, formData);
 }
 
 function fetchProcesses(softwareProductId, version) {
-	let versionQuery = version ? `?version=${version}` : '';
-	return RestAPIUtil.fetch(`${baseUrl(softwareProductId)}${versionQuery}`);
+	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
 }
 
-
-
 const SoftwareProductActionHelper = {
 
 	fetchProcessesList(dispatch, {softwareProductId, version}) {
@@ -80,8 +75,8 @@ const SoftwareProductActionHelper = {
 		});
 	},
 
-	deleteProcess(dispatch, {process, softwareProductId}) {
-		return deleteProcess(softwareProductId, process.id).then(() => {
+	deleteProcess(dispatch, {process, softwareProductId, version}) {
+		return deleteProcess(softwareProductId, version, process.id).then(() => {
 			dispatch({
 				type: actionTypes.DELETE_SOFTWARE_PRODUCT_PROCESS,
 				processId: process.id
@@ -96,18 +91,11 @@ const SoftwareProductActionHelper = {
 		});
 	},
 
-	processEditorDataChanged(dispatch, {deltaData}) {
-		dispatch({
-			type: actionTypes.processEditor.DATA_CHANGED,
-			deltaData
-		});
-	},
-
-	saveProcess(dispatch, {softwareProductId, previousProcess, process}) {
+	saveProcess(dispatch, {softwareProductId, version, previousProcess, process}) {
 		if (previousProcess) {
-			return putProcess(softwareProductId, process).then(() => {
+			return putProcess(softwareProductId, version, process).then(() => {
 				if (process.formData){
-					uploadFileToProcess(softwareProductId, process.id, process.formData);
+					uploadFileToProcess(softwareProductId, version, process.id, process.formData);
 				}
 				dispatch({
 					type: actionTypes.EDIT_SOFTWARE_PRODUCT_PROCESS,
@@ -116,9 +104,9 @@ const SoftwareProductActionHelper = {
 			});
 		}
 		else {
-			return postProcess(softwareProductId, process).then(response => {
+			return postProcess(softwareProductId, version, process).then(response => {
 				if (process.formData) {
-					uploadFileToProcess(softwareProductId, response.value, process.formData);
+					uploadFileToProcess(softwareProductId, version, response.value, process.formData);
 				}
 				dispatch({
 					type: actionTypes.ADD_SOFTWARE_PRODUCT_PROCESS,
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConfirmationModal.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConfirmationModal.jsx
deleted file mode 100644
index 0159352dae..0000000000
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConfirmationModal.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import {connect} from 'react-redux';
-import i18n from 'nfvo-utils/i18n/i18n.js';
-import ConfirmationModalView from 'nfvo-components/confirmations/ConfirmationModalView.jsx';
-import SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper.js';
-
-function renderMsg(processToDelete) {
-	let name = processToDelete ? processToDelete.name : '';
-	let msg = i18n('Are you sure you want to delete "{name}"?', {name});
-	return (
-		<div>
-			<p>{msg}</p>
-		</div>
-	);
-};
-
-const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor, softwareProductProcesses} = softwareProduct;
-	let {processToDelete} = softwareProductProcesses;
-	let softwareProductId = softwareProductEditor.data.id;
-
-	const show = processToDelete !== false;
-	return {
-		show,
-		title: i18n('Warning!'),
-		type: 'warning',
-		msg: renderMsg(processToDelete),
-		confirmationDetails: {processToDelete, softwareProductId}
-	};
-};
-
-const mapActionsToProps = (dispatch) => {
-	return {
-		onConfirmed: ({processToDelete, softwareProductId}) => {
-			SoftwareProductProcessesActionHelper.deleteProcess(dispatch, {process: processToDelete, softwareProductId});
-			SoftwareProductProcessesActionHelper.hideDeleteConfirm(dispatch);
-		},
-		onDeclined: () => {
-			SoftwareProductProcessesActionHelper.hideDeleteConfirm(dispatch);
-		}
-	};
-};
-
-export default connect(mapStateToProps, mapActionsToProps)(ConfirmationModalView);
-
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js
index 63f3067a89..6eee24cdde 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesConstants.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 keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
@@ -27,8 +22,14 @@ export const actionTypes = keyMirror({
 	SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN: null,
 	SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE: null,
 	FETCH_SOFTWARE_PRODUCT_PROCESSES: null,
-	SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM: null,
-	processEditor: {
-		DATA_CHANGED: null
-	}
+	SOFTWARE_PRODUCT_PROCESS_DELETE_CONFIRM: null
 });
+
+export const optionsInputValues = {
+	PROCESS_TYPE: [
+		{title: 'Select...', enum: ''},
+		{title: 'Other', enum: 'Other'}
+	]
+};
+
+export const VSP_PROCESS_FORM = 'VSPPROCESSFORM';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
index 8dc48c50b1..ff787c357e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor.js
@@ -1,31 +1,28 @@
-/*-
- * ============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 ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import SoftwareProductProcessesActionHelper from './SoftwareProductProcessesActionHelper';
 import SoftwareProductProcessesEditorView from './SoftwareProductProcessesEditorView.jsx';
+import {VSP_PROCESS_FORM} from './SoftwareProductProcessesConstants.js';
 
-const mapStateToProps = ({softwareProduct}) => {
+export const mapStateToProps = ({softwareProduct}) => {
 	let {softwareProductProcesses: {processesList, processesEditor}} = softwareProduct;
-	let {data} = processesEditor;
-
+	let {data, genericFieldInfo, formReady} = processesEditor;
+	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 	let previousData;
 	const processId = data ? data.id : null;
 	if(processId) {
@@ -34,18 +31,22 @@ const mapStateToProps = ({softwareProduct}) => {
 
 	return {
 		data,
-		previousData
+		genericFieldInfo,
+		previousData,
+		isFormValid,
+		formReady
 	};
 };
 
-const mapActionsToProps = (dispatch, {softwareProductId}) => {
+const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
 	return {
-		onDataChanged: deltaData => SoftwareProductProcessesActionHelper.processEditorDataChanged(dispatch, {deltaData}),
+		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: VSP_PROCESS_FORM}),
 		onSubmit: ({previousProcess, process}) => {
 			SoftwareProductProcessesActionHelper.closeEditor(dispatch);
-			SoftwareProductProcessesActionHelper.saveProcess(dispatch, {softwareProductId, previousProcess, process});
+			SoftwareProductProcessesActionHelper.saveProcess(dispatch, {softwareProductId, version, previousProcess, process});
 		},
-		onClose: () => SoftwareProductProcessesActionHelper.closeEditor(dispatch)
+		onClose: () => SoftwareProductProcessesActionHelper.closeEditor(dispatch),
+		onValidateForm: () => ValidationHelper.validateForm(dispatch, VSP_PROCESS_FORM)
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
index cae25e2c89..11b89b17c2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorReducer.js
@@ -1,43 +1,54 @@
-/*-
- * ============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} from './SoftwareProductProcessesConstants.js';
+import {actionTypes, VSP_PROCESS_FORM} from './SoftwareProductProcessesConstants.js';
 
 export default (state = {}, action) => {
 	switch (action.type) {
 		case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN:
 			return {
 				...state,
+				formReady: null,
+				formName: VSP_PROCESS_FORM,
+				genericFieldInfo: {
+					'name' : {
+						isValid: true,
+						errorText: '',
+						validations: [{type: 'required', data: true}, {type: 'maxLength', data: 120}]
+					},
+					'description' : {
+						isValid: true,
+						errorText: '',
+						validations: [{type: 'maxLength', data: 1000}]
+					},
+					'artifactName' : {
+						isValid: true,
+						errorText: '',
+						validations: []
+					},
+					'type' : {
+						isValid: true,
+						errorText: '',
+						validations: []
+					}
+				},
 				data: action.process
 			};
 		case actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE:
 			return {};
 
-		case actionTypes.processEditor.DATA_CHANGED:
-			return {
-				...state,
-				data: {
-					...state.data,
-					...action.deltaData
-				}
-			};
 		default:
 			return state;
 	}
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 c2c4aff382..137e4a2b4e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
@@ -1,18 +1,50 @@
+/*!
+ * 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 Dropzone from 'react-dropzone';
 import classnames from 'classnames';
 
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
-import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
+import  {optionsInputValues as ProcessesOptionsInputValues} from './SoftwareProductProcessesConstants.js';
+import Form from 'nfvo-components/input/validation/Form.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
+import GridSection from 'nfvo-components/grid/GridSection.jsx';
+import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
 const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
 	id: React.PropTypes.string,
 	name: React.PropTypes.string,
 	description: React.PropTypes.string,
-	artifactName: React.PropTypes.string
+	artifactName: React.PropTypes.string,
+	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 {
 
 	state = {
@@ -30,63 +62,89 @@ class SoftwareProductProcessesEditorView extends React.Component {
 	};
 
 	render() {
-		let {data = {}, isReadOnlyMode, onDataChanged, onClose} = this.props;
-		let {name, description, artifactName} = data;
+		let {data = {}, isReadOnlyMode, onDataChanged, onClose, genericFieldInfo} = this.props;
+		let {name, description, artifactName, type} = data;
+
 		return (
-			<ValidationForm
-				ref='validationForm'
-				hasButtons={true}
-				labledButtons={true}
-				isReadOnlyMode={isReadOnlyMode}
-				onSubmit={ () => this.submit() }
-				onReset={ () => onClose() }
-				className='vsp-processes-editor'>
-				<div className={classnames('vsp-processes-editor-data', {'disabled': isReadOnlyMode})}>
-					<Dropzone
-						className={classnames('vsp-process-dropzone-view', {'active-dragging': this.state.dragging})}
-						onDrop={files => this.handleImportSubmit(files)}
-						onDragEnter={() => this.setState({dragging: true})}
-						onDragLeave={() => this.setState({dragging: false})}
-						multiple={false}
-						disableClick={true}
-						ref='processEditorFileInput'
-						name='processEditorFileInput'
-						accept='*.*'>
-						<div className='row'>
-							<div className='col-md-6'>
-								<ValidationInput
-									onChange={name => onDataChanged({name})}
-									label={i18n('Name')}
-									value={name}
-									validations={{validateName: true, maxLength: 120, required: true}}
-									type='text'/>
-								<ValidationInput
-									label={i18n('Artifacts')}
-									value={artifactName}
-									type='text'
-									disabled/>
-							</div>
-							<div className='col-md-6'>
-								<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={() => this.refs.processEditorFileInput.open()}>
-										<span className='primary-btn-text'>{i18n('Select file')}</span>
-									</div>
-								</div>
-							</div>
-						</div>
-						<ValidationInput
-							onChange={description => onDataChanged({description})}
-							label={i18n('Notes')}
-							value={description}
-							name='vsp-process-description'
-							className='vsp-process-description'
-							validations={{maxLength: 1000}}
-							type='textarea'/>
-					</Dropzone>
-				</div>
-			</ValidationForm>
+			<div>
+				{genericFieldInfo && <Form
+					ref='validationForm'
+					hasButtons={true}
+					labledButtons={true}
+					isReadOnlyMode={isReadOnlyMode}
+					onSubmit={ () => this.submit() }
+					onReset={ () => onClose() }
+					isValid={this.props.isFormValid}
+					formReady={this.props.formReady}
+					onValidateForm={() => this.props.onValidateForm() }
+					className='vsp-processes-editor'>
+					<div className={classnames('vsp-processes-editor-data', {'disabled': isReadOnlyMode})}>
+						<Dropzone
+							className={classnames('vsp-process-dropzone-view', {'active-dragging': this.state.dragging})}
+							onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)}
+							onDragEnter={() => this.setState({dragging: true})}
+							onDragLeave={() => this.setState({dragging: false})}
+							multiple={false}
+							disableClick={true}
+							ref='processEditorFileInput'
+							name='processEditorFileInput'>
+							<GridSection>
+								<GridItem colSpan={2}>
+									<Input
+										onChange={name => onDataChanged({name})}
+										isValid={genericFieldInfo.name.isValid}
+										isRequired={true}
+										data-test-id='name'
+										errorText={genericFieldInfo.name.errorText}
+										label={i18n('Name')}
+										value={name}
+										type='text'/>
+								</GridItem>
+								<GridItem colSpan={2}>
+									<FileUploadBox onClick={() => this.refs.processEditorFileInput.open()}/>
+								</GridItem>
+							</GridSection>
+							<GridSection>
+								<GridItem colSpan={2}>
+									<Input
+										name='vsp-process-description'
+										groupClassName='vsp-process-description'
+										onChange={description => onDataChanged({description})}
+										isValid={genericFieldInfo.description.isValid}
+										errorText={genericFieldInfo.description.errorText}
+										label={i18n('Notes')}
+										value={description}
+										data-test-id='vsp-process-description'
+										type='textarea'/>
+								</GridItem>
+								<GridItem colSpan={2}>
+									<Input
+										label={i18n('Artifacts')}
+										value={artifactName}
+										type='text'
+										disabled/>
+									<Input
+										onChange={e => {
+											// setting the unit to the correct value
+											const selectedIndex = e.target.selectedIndex;
+											const val = e.target.options[selectedIndex].value;
+											onDataChanged({type: val});}
+										}
+										value={type}
+										label={i18n('Process Type')}
+										data-test-id='process-type'
+										isValid={genericFieldInfo.type.isValid}
+										errorText={genericFieldInfo.type.errorText}
+										type='select'>
+										{ProcessesOptionsInputValues.PROCESS_TYPE.map(mtype =>
+											<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
+									</Input>
+								</GridItem>
+							</GridSection>
+						</Dropzone>
+					</div>
+				</Form>}
+			</div>
 		);
 	}
 
@@ -108,14 +166,24 @@ class SoftwareProductProcessesEditorView extends React.Component {
 	}
 
 
-	handleImportSubmit(files) {
-		let {onDataChanged} = this.props;
-		this.setState({
-			dragging: false,
-			complete: '0',
-			files
-		});
-		onDataChanged({artifactName: files[0].name});
+	handleImportSubmit(files, rejectedFiles) {
+		if (files.length > 0) {
+			let {onDataChanged} = this.props;
+			this.setState({
+				dragging: false,
+				complete: '0',
+				files
+			});
+			onDataChanged({artifactName: files[0].name});
+		}
+		else if (rejectedFiles.length > 0) {
+			this.setState({
+				dragging: false
+			});
+			if (DEBUG) {
+				console.log('file was rejected.' + rejectedFiles[0].name);
+			}
+		}
 	}
 }
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js
index 619a2dba0f..20390d1f60 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesListReducer.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} from './SoftwareProductProcessesConstants.js';
 
 export default (state = [], action) => {
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
index a2aa3d414e..8f52434042 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
@@ -1,3 +1,18 @@
+/*!
+ * 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';
@@ -6,7 +21,7 @@ import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 
 import SoftwareProductProcessesEditor from './SoftwareProductProcessesEditor.js';
-import SoftwareProductProcessesConfirmationModal  from './SoftwareProductProcessesConfirmationModal.jsx';
+
 
 
 class SoftwareProductProcessesView extends React.Component {
@@ -20,30 +35,29 @@ class SoftwareProductProcessesView extends React.Component {
 		onEditProcess: React.PropTypes.func.isRequired,
 		onDeleteProcess: React.PropTypes.func.isRequired,
 		isDisplayEditor: React.PropTypes.bool.isRequired,
-		isReadOnlyMode: React.PropTypes.bool.isRequired
+		isReadOnlyMode: React.PropTypes.bool.isRequired,
+		currentSoftwareProduct:React.PropTypes.object
 	};
 
 	render() {
-		let { currentSoftwareProduct} = this.props;
 		return (
 			<div className='software-product-landing-view-right-side vsp-processes-page'>
 				{this.renderEditor()}
 				{this.renderProcessList()}
-				<SoftwareProductProcessesConfirmationModal softwareProductId={currentSoftwareProduct.id}/>
 			</div>
 		);
 	}
 
 	renderEditor() {
-		let {currentSoftwareProduct: {id}, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props;
+		let {currentSoftwareProduct: {id, version}, isModalInEditMode, isReadOnlyMode, isDisplayEditor} = this.props;
 		return (
 
-			<Modal show={isDisplayEditor} bsSize='large' animation={true}>
+			<Modal show={isDisplayEditor} bsSize='large' animation={true} className='onborading-modal'>
 				<Modal.Header>
 					<Modal.Title>{isModalInEditMode ? i18n('Edit Process Details') : i18n('Create New Process Details')}</Modal.Title>
 				</Modal.Header>
 				<Modal.Body className='edit-process-modal'>
-					<SoftwareProductProcessesEditor softwareProductId={id} isReadOnlyMode={isReadOnlyMode}/>
+					<SoftwareProductProcessesEditor softwareProductId={id} version={version} isReadOnlyMode={isReadOnlyMode}/>
 				</Modal.Body>
 			</Modal>
 		);
@@ -60,7 +74,8 @@ class SoftwareProductProcessesView extends React.Component {
 				placeholder={i18n('Filter Process')}
 				onAdd={onAddProcess}
 				isReadOnlyMode={isReadOnlyMode}
-				onFilter={filter => this.setState({localFilter: filter})}>
+				title={i18n('Process Details')}
+				onFilter={value => this.setState({localFilter: value})}>
 				{this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))}
 			</ListEditorView>
 		);
@@ -68,14 +83,14 @@ class SoftwareProductProcessesView extends React.Component {
 
 	renderProcessListItem(process, isReadOnlyMode) {
 		let {id, name, description, artifactName = ''} = process;
-		let {onEditProcess, onDeleteProcess} =  this.props;
+		let {currentSoftwareProduct: {version}, onEditProcess, onDeleteProcess} =  this.props;
 		return (
 			<ListEditorItemView
 				key={id}
 				className='list-editor-item-view'
 				isReadOnlyMode={isReadOnlyMode}
 				onSelect={() => onEditProcess(process)}
-				onDelete={() => onDeleteProcess(process)}>
+				onDelete={() => onDeleteProcess(process, version)}>
 
 				<div className='list-editor-item-view-field'>
 					<div className='title'>{i18n('Name')}</div>