Add new code new version

Change-Id: Ic02a76313503b526f17c3df29eb387a29fe6a42a
Signed-off-by: Michael Lando <ml636r@att.com>

9 files changed, 662 insertions, 0 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
new file mode 100644
index 0000000000..d535a34a82
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
@@ -0,0 +1,145 @@
+/*-
+ * ============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
+ * 
+ * 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=========================================================
+ */
+
+import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
+import Configuration from 'sdc-app/config/Configuration.js';
+import {actionTypes} from './SoftwareProductComponentProcessesConstants.js';
+
+function baseUrl(softwareProductId, componentId) {
+	const restPrefix = Configuration.get('restPrefix');
+	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/components/${componentId}/processes`;
+}
+
+function fetchProcessesList({softwareProductId, componentId, version}) {
+	let versionQuery = version ? `?version=${version}` : '';
+	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, componentId)}${versionQuery}`);
+}
+
+function deleteProcess({softwareProductId, componentId, processId}) {
+	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, componentId)}/${processId}`);
+}
+
+function putProcess({softwareProductId, componentId, process}) {
+	return RestAPIUtil.save(`${baseUrl(softwareProductId, componentId)}/${process.id}`, {
+		name: process.name,
+		description: process.description
+	});
+}
+
+function postProcess({softwareProductId,componentId, process}) {
+	return RestAPIUtil.create(`${baseUrl(softwareProductId, componentId)}`, {
+		name: process.name,
+		description: process.description
+	});
+}
+
+function uploadFileToProcess({softwareProductId, processId, componentId, formData}) {
+	return RestAPIUtil.create(`${baseUrl(softwareProductId, componentId)}/${processId}/upload`, formData);
+}
+
+
+
+const SoftwareProductComponentProcessesActionHelper = {
+	fetchProcessesList(dispatch, {softwareProductId, componentId, version}) {
+		dispatch({
+			type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
+			processesList: []
+		});
+
+		return fetchProcessesList({softwareProductId, componentId, version}).then(response => {
+			dispatch({
+				type: actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES,
+				processesList: response.results
+			});
+		});
+	},
+
+	deleteProcess(dispatch, {process, softwareProductId, componentId}) {
+		return deleteProcess({softwareProductId, processId:process.id, componentId}).then(() => {
+			dispatch({
+				type: actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
+				processId: process.id
+			});
+		});
+
+	},
+
+	saveProcess(dispatch, {softwareProductId, componentId, previousProcess, process}) {
+		if (previousProcess) {
+			return putProcess({softwareProductId,componentId,  process}).then(() => {
+				if (process.formData && process.formData.name !== previousProcess.artifactName){
+					uploadFileToProcess({softwareProductId, processId: process.id, formData: process.formData, componentId});
+				}
+				dispatch({
+					type: actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
+					process
+				});
+			});
+		}
+		else {
+			return postProcess({softwareProductId, componentId, process}).then(response => {
+				if (process.formData) {
+					uploadFileToProcess({softwareProductId, processId: response.value, formData: process.formData, componentId});
+				}
+				dispatch({
+					type: actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS,
+					process: {
+						...process,
+						id: response.value
+					}
+				});
+			});
+		}
+	},
+
+	hideDeleteConfirm(dispatch) {
+		dispatch({
+			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM,
+			processToDelete: false
+		});
+	},
+
+	openDeleteProcessesConfirm(dispatch, {process} ) {
+		dispatch({
+			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM,
+			processToDelete: process
+		});
+	},
+
+	openEditor(dispatch, process = {}) {
+		dispatch({
+			type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN,
+			process
+		});
+	},
+	closeEditor(dispatch) {
+		dispatch({
+			type:actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE
+		});
+	},
+	processEditorDataChanged(dispatch, {deltaData}) {
+		dispatch({
+			type: actionTypes.processEditor.DATA_CHANGED,
+			deltaData
+		});
+	}
+};
+
+export default SoftwareProductComponentProcessesActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js
new file mode 100644
index 0000000000..78a111a426
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js
@@ -0,0 +1,34 @@
+/*-
+ * ============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
+ * 
+ * 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=========================================================
+ */
+
+import keyMirror from 'nfvo-utils/KeyMirror.js';
+
+export const actionTypes = keyMirror({
+	ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
+	EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
+	DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS: null,
+	SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN: null,
+	SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE: null,
+	FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES: null,
+	SOFTWARE_PRODUCT_PROCESS_DELETE_COMPONENTS_CONFIRM: null,
+	processEditor: {
+		DATA_CHANGED: null
+	}
+});
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js
new file mode 100644
index 0000000000..0138023c30
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor.js
@@ -0,0 +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
+ * 
+ * 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=========================================================
+ */
+
+import {connect} from 'react-redux';
+import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper';
+import SoftwareProductComponentProcessesEditorView from './SoftwareProductComponentProcessesEditorView.jsx';
+
+const mapStateToProps = ({softwareProduct}) => {
+	let {softwareProductComponents: {componentProcesses = {}}} = softwareProduct;
+	let {processesList = [], processesEditor = {}} = componentProcesses;
+	let {data} = processesEditor;
+
+	let previousData;
+	const processId = data ? data.id : null;
+	if(processId) {
+		previousData = processesList.find(process => process.id === processId);
+	}
+
+	return {
+		data,
+		previousData
+	};
+};
+
+const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => {
+
+	return {
+		onDataChanged: deltaData => SoftwareProductComponentProcessesActionHelper.processEditorDataChanged(dispatch, {deltaData}),
+		onCancel: () => SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch),
+		onSubmit: ({previousProcess, process}) => {
+			SoftwareProductComponentProcessesActionHelper.closeEditor(dispatch);
+			SoftwareProductComponentProcessesActionHelper.saveProcess(dispatch, {softwareProductId, previousProcess, componentId, process});
+		}
+	};
+};
+
+export default connect(mapStateToProps, mapActionsToProps)(SoftwareProductComponentProcessesEditorView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js
new file mode 100644
index 0000000000..f859f690e8
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorReducer.js
@@ -0,0 +1,44 @@
+/*-
+ * ============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
+ * 
+ * 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=========================================================
+ */
+
+import {actionTypes} from './SoftwareProductComponentProcessesConstants.js';
+
+export default (state = {}, action) => {
+	switch (action.type) {
+		case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN:
+			return {
+				...state,
+				data: action.process
+			};
+		case actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_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/components/processes/SoftwareProductComponentProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
new file mode 100644
index 0000000000..ca6d843af7
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import Dropzone from 'react-dropzone';
+
+
+import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
+import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
+
+const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
+	id: React.PropTypes.string,
+	name: React.PropTypes.string,
+	description: React.PropTypes.string,
+	artifactName: React.PropTypes.string
+});
+
+class SoftwareProductProcessesEditorView extends React.Component {
+
+	state = {
+		dragging: false,
+		files: []
+	};
+
+	static propTypes = {
+		data: SoftwareProductProcessEditorPropType,
+		previousData: SoftwareProductProcessEditorPropType,
+		isReadOnlyMode: React.PropTypes.bool,
+		onDataChanged: React.PropTypes.func,
+		onSubmit: React.PropTypes.func,
+		onCancel: React.PropTypes.func
+	};
+
+	render() {
+		let {isReadOnlyMode, onCancel, onDataChanged, data = {}} = this.props;
+		let {name, description, artifactName} = data;
+
+		return (
+			<div>
+				<ValidationForm
+					ref='validationForm'
+					isReadOnlyMode={isReadOnlyMode}
+					hasButtons={true}
+					labledButtons={true}
+					onSubmit={ () => this.submit() }
+					onReset={ () => onCancel() }
+					className='vsp-processes-editor'>
+				<div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}>
+					<Dropzone
+						className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-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>
+		);
+	}
+
+	submit() {
+		const {data: process, previousData: previousProcess} = this.props;
+		let {files} = this.state;
+		let formData = new FormData();
+		if (files.length) {
+			let file = files[0];
+			formData.append('upload', file);
+		}
+
+		let updatedProcess = {
+			...process,
+			formData: files.length ? formData : false
+		};
+		this.props.onSubmit({process: updatedProcess, previousProcess});
+	}
+
+
+	handleImportSubmit(files) {
+		let {onDataChanged} = this.props;
+		this.setState({
+			dragging: false,
+			complete: '0',
+			files
+		});
+		onDataChanged({artifactName: files[0].name});
+	}
+}
+
+export default SoftwareProductProcessesEditorView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
new file mode 100644
index 0000000000..5f6932897e
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
@@ -0,0 +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
+ * 
+ * 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=========================================================
+ */
+
+import {connect} from 'react-redux';
+import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
+import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper.js';
+
+import SoftwareProductComponentsProcessesListView from './SoftwareProductComponentsProcessesListView.jsx';
+
+const mapStateToProps = ({softwareProduct}) => {
+
+	let {softwareProductEditor: {data:currentSoftwareProduct = {},  isValidityData = true}, softwareProductComponents: {componentProcesses = {}}} = softwareProduct;
+	let{processesList = [], processesEditor = {}} = componentProcesses;
+	let {data} = processesEditor;
+	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
+
+	return {
+		currentSoftwareProduct,
+		isValidityData,
+		processesList,
+		isDisplayModal: Boolean(data),
+		isModalInEditMode: Boolean(data && data.id),
+		isReadOnlyMode
+	};
+
+};
+
+const mapActionsToProps = (dispatch, {softwareProductId}) => {
+
+	return {
+		onAddProcess: () => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch),
+		onEditProcessClick: (process) => SoftwareProductComponentProcessesActionHelper.openEditor(dispatch, process),
+		onDeleteProcessClick: (process) => SoftwareProductComponentProcessesActionHelper.openDeleteProcessesConfirm(dispatch, {process, softwareProductId})
+	};
+};
+
+export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(SoftwareProductComponentsProcessesListView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js
new file mode 100644
index 0000000000..4bb124d52f
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesListReducer.js
@@ -0,0 +1,37 @@
+/*-
+ * ============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
+ * 
+ * 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=========================================================
+ */
+
+import {actionTypes} from './SoftwareProductComponentProcessesConstants.js';
+
+export default (state = [], action) => {
+	switch (action.type) {
+		case actionTypes.FETCH_SOFTWARE_PRODUCT_COMPONENTS_PROCESSES:
+			return [...action.processesList];
+		case actionTypes.EDIT_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
+			const indexForEdit = state.findIndex(process => process.id === action.process.id);
+			return [...state.slice(0, indexForEdit), action.process, ...state.slice(indexForEdit + 1)];
+		case actionTypes.ADD_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
+			return [...state, action.process];
+		case actionTypes.DELETE_SOFTWARE_PRODUCT_COMPONENTS_PROCESS:
+			return state.filter(process => process.id !== action.processId);
+		default:
+			return state;
+	}
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesConfirmationModal.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesConfirmationModal.jsx
new file mode 100644
index 0000000000..48fa862364
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesConfirmationModal.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import ConfirmationModalView from 'nfvo-components/confirmations/ConfirmationModalView.jsx';
+import SoftwareProductComponentProcessesActionHelper from './SoftwareProductComponentProcessesActionHelper.js';
+import i18n from 'nfvo-utils/i18n/i18n.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, softwareProductComponents} = softwareProduct;
+	let {componentProcesses} = softwareProductComponents;
+	let {processToDelete} = componentProcesses;
+	let softwareProductId = softwareProductEditor.data.id;
+	const show = processToDelete !== false;
+	return {
+		show,
+		title: 'Warning!',
+		type: 'warning',
+		msg: renderMsg(processToDelete),
+		confirmationDetails: {processToDelete, softwareProductId}
+	};
+};
+
+const mapActionsToProps = (dispatch,{componentId, softwareProductId}) => {
+	return {
+		onConfirmed: ({processToDelete}) => {
+			SoftwareProductComponentProcessesActionHelper.deleteProcess(dispatch, {process: processToDelete, softwareProductId, componentId});
+			SoftwareProductComponentProcessesActionHelper.hideDeleteConfirm(dispatch);
+		},
+		onDeclined: () => {
+			SoftwareProductComponentProcessesActionHelper.hideDeleteConfirm(dispatch);
+		}
+	};
+};
+
+export default connect(mapStateToProps, mapActionsToProps)(ConfirmationModalView);
+
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
new file mode 100644
index 0000000000..a8b07e9194
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
@@ -0,0 +1,125 @@
+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 SoftwareProductProcessesEditor from './SoftwareProductComponentProcessesEditor.js';
+import SoftwareProductComponentsProcessesConfirmationModal from './SoftwareProductComponentsProcessesConfirmationModal.jsx';
+
+class SoftwareProductProcessesView extends React.Component {
+
+	state = {
+		localFilter: ''
+	};
+
+	static propTypes = {
+		onAddProcess: React.PropTypes.func,
+		onEditProcessClick: React.PropTypes.func,
+		onDeleteProcessClick: React.PropTypes.func,
+		isDisplayModal: React.PropTypes.bool,
+		isModalInEditMode: React.PropTypes.bool,
+		onStorageSelect: React.PropTypes.func,
+		componentId: React.PropTypes.string,
+		softwareProductId: React.PropTypes.string
+	};
+
+	render() {
+		let { softwareProductId, componentId} = this.props;
+
+		return (
+			<div className='vsp-processes-page'>
+				<div className='software-product-view'>
+					<div className='software-product-landing-view-right-side flex-column'>
+						{this.renderEditor()}
+						{this.renderProcessList()}
+					</div>
+					<SoftwareProductComponentsProcessesConfirmationModal
+						componentId={componentId}
+						softwareProductId={softwareProductId}/>
+				</div>
+			</div>
+		);
+	}
+
+	renderEditor() {
+		let {softwareProductId, componentId, isReadOnlyMode, isDisplayModal, isModalInEditMode} = this.props;
+		return (
+			<Modal show={isDisplayModal} bsSize='large' animation={true}>
+				<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
+						componentId={componentId}
+						softwareProductId={softwareProductId}
+						isReadOnlyMode={isReadOnlyMode}/>
+				</Modal.Body>
+			</Modal>
+
+		);
+	}
+
+	renderProcessList() {
+		const {localFilter} = this.state;
+		let {onAddProcess, isReadOnlyMode} = this.props;
+		return (
+			<div className='processes-list'>
+				<ListEditorView
+					plusButtonTitle={i18n('Add Component Process Details')}
+					filterValue={localFilter}
+					placeholder={i18n('Filter Process')}
+					onAdd={onAddProcess}
+					isReadOnlyMode={isReadOnlyMode}
+					onFilter={filter => this.setState({localFilter: filter})}>
+					{this.filterList().map(processes => this.renderProcessListItem(processes, isReadOnlyMode))}
+				</ListEditorView>
+			</div>
+		);
+	}
+
+	renderProcessListItem(process, isReadOnlyMode) {
+		let {id, name, description, artifactName = ''} = process;
+		let {onEditProcessClick, onDeleteProcessClick} =  this.props;
+		return (
+			<ListEditorItemView
+				key={id}
+				className='list-editor-item-view'
+				isReadOnlyMode={isReadOnlyMode}
+				onSelect={() => onEditProcessClick(process)}
+				onDelete={() => onDeleteProcessClick(process)}>
+
+				<div className='list-editor-item-view-field'>
+					<div className='title'>{i18n('Name')}</div>
+					<div className='name'>{name}</div>
+				</div>
+				<div className='list-editor-item-view-field'>
+					<div className='title'>{i18n('Artifact name')}</div>
+					<div className='artifact-name'>{artifactName}</div>
+				</div>
+				<div className='list-editor-item-view-field'>
+					<div className='title'>{i18n('Notes')}</div>
+					<div className='description'>{description}</div>
+				</div>
+			</ListEditorItemView>
+		);
+	}
+
+
+	filterList() {
+		let {processesList} = this.props;
+		let {localFilter} = this.state;
+		if (localFilter.trim()) {
+			const filter = new RegExp(escape(localFilter), 'i');
+			return processesList.filter(({name = '', description = ''}) => {
+				return escape(name).match(filter) || escape(description).match(filter);
+			});
+		}
+		else {
+			return processesList;
+		}
+	}
+}
+
+export default SoftwareProductProcessesView;