12 files changed, 718 insertions, 592 deletions

diff --git a/openecomp-ui/src/sdc-app/flows/FlowsActions.js b/openecomp-ui/src/sdc-app/flows/FlowsActions.js
index 61a419b314..9fb65f37d4 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsActions.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsActions.js
@@ -15,171 +15,204 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes, enums} from './FlowsConstants.js';
+import { actionTypes, enums } from './FlowsConstants.js';
 import SequenceDiagramModelHelper from './SequenceDiagramModelHelper.js';
 
-
 function baseUrl(serviceId, artifactId = '') {
-	const restCatalogPrefix = Configuration.get('restCatalogPrefix');
-	return `${restCatalogPrefix}/v1/catalog/services/${serviceId}/artifacts/${artifactId}`;
+    const restCatalogPrefix = Configuration.get('restCatalogPrefix');
+    return `${restCatalogPrefix}/v1/catalog/services/${serviceId}/artifacts/${artifactId}`;
 }
 
 function encodeDataToBase64(dataAsString) {
-	return window.btoa(dataAsString);
+    return window.btoa(dataAsString);
 }
 
 function decodeDataToBase64(encodedData) {
-	return window.atob(encodedData);
+    return window.atob(encodedData);
 }
 
 function encodeContent(flowData) {
-	let data = {
-		VERSION: {
-			major: 1,
-			minor: 0
-		},
-		description: flowData.description,
-		sequenceDiagramModel: flowData.sequenceDiagramModel
-	};
-
-	return encodeDataToBase64(JSON.stringify(data));
+    let data = {
+        VERSION: {
+            major: 1,
+            minor: 0
+        },
+        description: flowData.description,
+        sequenceDiagramModel: flowData.sequenceDiagramModel
+    };
+
+    return encodeDataToBase64(JSON.stringify(data));
 }
 
 function decodeContent(base64Contents) {
-	let description, sequenceDiagramModel;
-	let payload = JSON.parse(decodeDataToBase64(base64Contents));
-
-	if (payload.VERSION === undefined) {
-		description = payload.description || 'Please, provide description...';
-		sequenceDiagramModel = payload.data || payload;
-		sequenceDiagramModel = sequenceDiagramModel.model || sequenceDiagramModel;
-
-	}
-	else if (payload.VERSION.major === 1) {
-		description = payload.description;
-		sequenceDiagramModel = payload.sequenceDiagramModel;
-	}
-
-	return {
-		description,
-		sequenceDiagramModel
-	};
+    let description, sequenceDiagramModel;
+    let payload = JSON.parse(decodeDataToBase64(base64Contents));
+
+    if (payload.VERSION === undefined) {
+        description = payload.description || 'Please, provide description...';
+        sequenceDiagramModel = payload.data || payload;
+        sequenceDiagramModel =
+            sequenceDiagramModel.model || sequenceDiagramModel;
+    } else if (payload.VERSION.major === 1) {
+        description = payload.description;
+        sequenceDiagramModel = payload.sequenceDiagramModel;
+    }
+
+    return {
+        description,
+        sequenceDiagramModel
+    };
 }
 
 function createOrUpdate(flowData) {
-	let createOrUpdateRequest = {
-		payloadData: encodeContent(flowData),
-		artifactLabel: flowData.artifactLabel || flowData.artifactName,
-		artifactName: flowData.artifactName,
-		artifactType: flowData.artifactType,
-		artifactGroupType: enums.INFORMATIONAL,
-		description: flowData.description
-	};
-
-	return RestAPIUtil.post(
-		baseUrl(flowData.serviceID, flowData.uniqueId),
-		createOrUpdateRequest,
-		{md5: true}
-	);
+    let createOrUpdateRequest = {
+        payloadData: encodeContent(flowData),
+        artifactLabel: flowData.artifactLabel || flowData.artifactName,
+        artifactName: flowData.artifactName,
+        artifactType: flowData.artifactType,
+        artifactGroupType: enums.INFORMATIONAL,
+        description: flowData.description
+    };
+
+    return RestAPIUtil.post(
+        baseUrl(flowData.serviceID, flowData.uniqueId),
+        createOrUpdateRequest,
+        { md5: true }
+    );
 }
 
 const FlowsActions = Object.freeze({
-
-	fetchFlowArtifacts(dispatch, {artifacts, diagramType, participants, serviceID, readonly}) {
-		let results = [];
-		if (!Object.keys(artifacts).length) {
-			dispatch({type: actionTypes.FLOW_LIST_LOADED, results, participants, serviceID, diagramType, readonly});
-			if (!readonly) {
-				FlowsActions.openFlowDetailsEditor(dispatch);
-			}
-		}
-		else {
-			Object.keys(artifacts).forEach(artifact => results.push({
-				artifactType: diagramType,
-				participants,
-				serviceID,
-				...artifacts[artifact]
-			}));
-			dispatch({type: actionTypes.FLOW_LIST_LOADED, results, participants, serviceID, diagramType, readonly});
-		}
-	},
-
-	fetchArtifact(dispatch, {flow}){
-		let {serviceID, uniqueId, participants} = flow;
-		return RestAPIUtil.fetch(baseUrl(serviceID, uniqueId)).then(response => {
-
-			let {artifactName, base64Contents} = response;
-			let {sequenceDiagramModel, ...other} = decodeContent(base64Contents);
-
-			if (!sequenceDiagramModel) {
-				sequenceDiagramModel = SequenceDiagramModelHelper.createModel({
-					id: uniqueId,
-					name: artifactName,
-					lifelines: participants
-				});
-			}
-			else {
-				sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(sequenceDiagramModel, {
-					name: artifactName,
-					lifelines: participants
-				});
-			}
-
-			flow = {
-				...flow,
-				...other,
-				uniqueId,
-				artifactName,
-				sequenceDiagramModel
-			};
-
-			dispatch({type: actionTypes.ARTIFACT_LOADED, flow});
-			FlowsActions.openFlowDiagramEditor(dispatch, {flow});
-		});
-	},
-
-	createOrUpdateFlow(dispatch, {flow}, isNew) {
-		if (!isNew && flow.sequenceDiagramModel) {
-			flow.sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(flow.sequenceDiagramModel, {
-				name: flow.artifactName
-			});
-		}
-		return createOrUpdate(flow).then(response => {
-			let {uniqueId, artifactLabel} = response;
-			flow = {...flow, uniqueId, artifactLabel};
-			if (isNew) {
-				flow.sequenceDiagramModel = SequenceDiagramModelHelper.createModel({id: uniqueId, name: flow.artifactName});
-			}
-			dispatch({type: actionTypes.ADD_OR_UPDATE_FLOW, flow});
-		});
-	},
-
-	deleteFlow(dispatch, {flow}) {
-		return RestAPIUtil.destroy(baseUrl(flow.serviceID, flow.uniqueId)).then(() => dispatch({
-			type: actionTypes.DELETE_FLOW,
-			flow
-		}));
-	},
-
-	openFlowDetailsEditor(dispatch, flow) {
-		dispatch({type: actionTypes.OPEN_FLOW_DETAILS_EDITOR, flow});
-	},
-
-	closeFlowDetailsEditor(dispatch) {
-		dispatch({type: actionTypes.CLOSE_FLOW_DETAILS_EDITOR});
-	},
-
-	openFlowDiagramEditor(dispatch, {flow}) {
-		dispatch({type: actionTypes.OPEN_FLOW_DIAGRAM_EDITOR, flow});
-	},
-
-	closeFlowDiagramEditor(dispatch) {
-		dispatch({type: actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR});
-	},
-
-	reset(dispatch) {
-		dispatch({type: actionTypes.RESET});
-	}
+    fetchFlowArtifacts(
+        dispatch,
+        { artifacts, diagramType, participants, serviceID, readonly }
+    ) {
+        let results = [];
+        if (!Object.keys(artifacts).length) {
+            dispatch({
+                type: actionTypes.FLOW_LIST_LOADED,
+                results,
+                participants,
+                serviceID,
+                diagramType,
+                readonly
+            });
+            if (!readonly) {
+                FlowsActions.openFlowDetailsEditor(dispatch);
+            }
+        } else {
+            Object.keys(artifacts).forEach(artifact =>
+                results.push({
+                    artifactType: diagramType,
+                    participants,
+                    serviceID,
+                    ...artifacts[artifact]
+                })
+            );
+            dispatch({
+                type: actionTypes.FLOW_LIST_LOADED,
+                results,
+                participants,
+                serviceID,
+                diagramType,
+                readonly
+            });
+        }
+    },
+
+    fetchArtifact(dispatch, { flow }) {
+        let { serviceID, uniqueId, participants } = flow;
+        return RestAPIUtil.fetch(baseUrl(serviceID, uniqueId)).then(
+            response => {
+                let { artifactName, base64Contents } = response;
+                let { sequenceDiagramModel, ...other } = decodeContent(
+                    base64Contents
+                );
+
+                if (!sequenceDiagramModel) {
+                    sequenceDiagramModel = SequenceDiagramModelHelper.createModel(
+                        {
+                            id: uniqueId,
+                            name: artifactName,
+                            lifelines: participants
+                        }
+                    );
+                } else {
+                    sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(
+                        sequenceDiagramModel,
+                        {
+                            name: artifactName,
+                            lifelines: participants
+                        }
+                    );
+                }
+
+                flow = {
+                    ...flow,
+                    ...other,
+                    uniqueId,
+                    artifactName,
+                    sequenceDiagramModel
+                };
+
+                dispatch({ type: actionTypes.ARTIFACT_LOADED, flow });
+                FlowsActions.openFlowDiagramEditor(dispatch, { flow });
+            }
+        );
+    },
+
+    createOrUpdateFlow(dispatch, { flow }, isNew) {
+        if (!isNew && flow.sequenceDiagramModel) {
+            flow.sequenceDiagramModel = SequenceDiagramModelHelper.updateModel(
+                flow.sequenceDiagramModel,
+                {
+                    name: flow.artifactName
+                }
+            );
+        }
+        return createOrUpdate(flow).then(response => {
+            let { uniqueId, artifactLabel } = response;
+            flow = { ...flow, uniqueId, artifactLabel };
+            if (isNew) {
+                flow.sequenceDiagramModel = SequenceDiagramModelHelper.createModel(
+                    {
+                        id: uniqueId,
+                        name: flow.artifactName
+                    }
+                );
+            }
+            dispatch({ type: actionTypes.ADD_OR_UPDATE_FLOW, flow });
+        });
+    },
+
+    deleteFlow(dispatch, { flow }) {
+        return RestAPIUtil.destroy(baseUrl(flow.serviceID, flow.uniqueId)).then(
+            () =>
+                dispatch({
+                    type: actionTypes.DELETE_FLOW,
+                    flow
+                })
+        );
+    },
+
+    openFlowDetailsEditor(dispatch, flow) {
+        dispatch({ type: actionTypes.OPEN_FLOW_DETAILS_EDITOR, flow });
+    },
+
+    closeFlowDetailsEditor(dispatch) {
+        dispatch({ type: actionTypes.CLOSE_FLOW_DETAILS_EDITOR });
+    },
+
+    openFlowDiagramEditor(dispatch, { flow }) {
+        dispatch({ type: actionTypes.OPEN_FLOW_DIAGRAM_EDITOR, flow });
+    },
+
+    closeFlowDiagramEditor(dispatch) {
+        dispatch({ type: actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR });
+    },
+
+    reset(dispatch) {
+        dispatch({ type: actionTypes.RESET });
+    }
 });
 
 export default FlowsActions;
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsConstants.js b/openecomp-ui/src/sdc-app/flows/FlowsConstants.js
index 2b3d86bae2..4dcd840ff3 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsConstants.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsConstants.js
@@ -16,30 +16,28 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
+    OPEN_FLOW_DETAILS_EDITOR: null,
+    CLOSE_FLOW_DETAILS_EDITOR: null,
 
-	OPEN_FLOW_DETAILS_EDITOR: null,
-	CLOSE_FLOW_DETAILS_EDITOR: null,
+    OPEN_FLOW_DIAGRAM_EDITOR: null,
+    CLOSE_FLOW_DIAGRAM_EDITOR: null,
 
-	OPEN_FLOW_DIAGRAM_EDITOR: null,
-	CLOSE_FLOW_DIAGRAM_EDITOR: null,
+    FLOW_LIST_LOADED: null,
+    ADD_OR_UPDATE_FLOW: null,
+    ARTIFACT_LOADED: null,
+    DELETE_FLOW: null,
 
-	FLOW_LIST_LOADED: null,
-	ADD_OR_UPDATE_FLOW: null,
-	ARTIFACT_LOADED: null,
-	DELETE_FLOW: null,
-
-	CURRENT_FLOW_DATA_CHANGED: null,
-
-	RESET: null
+    CURRENT_FLOW_DATA_CHANGED: null,
 
+    RESET: null
 });
 
 export const enums = {
-	WORKFLOW: 'WORKFLOW',
-	NETWORK: 'NETWORK_CALL_FLOW',
-	INFORMATIONAL: 'INFORMATIONAL',
-	INSTANTIATION_FLOWS: 'instantiationflows',
-	MESSAGE_FLOWS: 'messageflows'
+    WORKFLOW: 'WORKFLOW',
+    NETWORK: 'NETWORK_CALL_FLOW',
+    INFORMATIONAL: 'INFORMATIONAL',
+    INSTANTIATION_FLOWS: 'instantiationflows',
+    MESSAGE_FLOWS: 'messageflows'
 };
 
 export const FLOWS_EDITOR_FORM = 'FLOWS_FORM';
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js b/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js
index f9585f985f..b45a9fc54e 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js
@@ -13,44 +13,57 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import FlowsEditorModalView from './FlowsEditorModalView.jsx';
 import FlowsActions from './FlowsActions.js';
-import {FLOWS_EDITOR_FORM} from './FlowsConstants.js';
+import { FLOWS_EDITOR_FORM } from './FlowsConstants.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 
-export const mapStateToProps = ({flows}) => {
+export const mapStateToProps = ({ flows }) => {
+    let {
+        data = { artifactName: '', description: '' },
+        serviceID,
+        diagramType,
+        flowParticipants,
+        genericFieldInfo,
+        formReady
+    } = flows;
+    if (!data.serviceID) {
+        data.serviceID = serviceID;
+    }
+    if (!data.artifactType) {
+        data.artifactType = diagramType;
+    }
+    if (!data.participants) {
+        data.participants = flowParticipants;
+    }
+    let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
-	let {data = {artifactName: '', description: ''}, serviceID, diagramType, flowParticipants, genericFieldInfo, formReady} = flows;
-	if(!data.serviceID){
-		data.serviceID = serviceID;
-	}
-	if(!data.artifactType){
-		data.artifactType = diagramType;
-	}
-	if(!data.participants){
-		data.participants = flowParticipants;
-	}
-	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
-
-	return {
-		currentFlow: data,
-		genericFieldInfo,
-		isFormValid,
-		formReady
-	};
+    return {
+        currentFlow: data,
+        genericFieldInfo,
+        isFormValid,
+        formReady
+    };
 };
 
-const mapActionsToProps = (dispatch, {isNewArtifact}) => {
-	return {
-		onSubmit: flow => {
-			FlowsActions.closeFlowDetailsEditor(dispatch);
-			FlowsActions.createOrUpdateFlow(dispatch, {flow}, isNewArtifact);
-		},
-		onCancel: () => FlowsActions.closeFlowDetailsEditor(dispatch),
-		onDataChanged: deltaData => ValidationHelper.dataChanged(dispatch, {deltaData, formName: FLOWS_EDITOR_FORM}),
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, FLOWS_EDITOR_FORM)
-	};
+const mapActionsToProps = (dispatch, { isNewArtifact }) => {
+    return {
+        onSubmit: flow => {
+            FlowsActions.closeFlowDetailsEditor(dispatch);
+            FlowsActions.createOrUpdateFlow(dispatch, { flow }, isNewArtifact);
+        },
+        onCancel: () => FlowsActions.closeFlowDetailsEditor(dispatch),
+        onDataChanged: deltaData =>
+            ValidationHelper.dataChanged(dispatch, {
+                deltaData,
+                formName: FLOWS_EDITOR_FORM
+            }),
+        onValidateForm: () =>
+            ValidationHelper.validateForm(dispatch, FLOWS_EDITOR_FORM)
+    };
 };
 
-export default connect(mapStateToProps, mapActionsToProps)(FlowsEditorModalView);
+export default connect(mapStateToProps, mapActionsToProps)(
+    FlowsEditorModalView
+);
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx b/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx
index 1250a0b58e..8c805cca9c 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx
+++ b/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx
@@ -13,52 +13,73 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import Form from 'nfvo-components/input/validation/Form.jsx';
 
 class FlowsEditorModalView extends Component {
+    render() {
+        let {
+            onCancel,
+            onDataChanged,
+            currentFlow,
+            genericFieldInfo,
+            formReady,
+            isFormValid,
+            onValidateForm
+        } = this.props;
+        let { artifactName, description } = currentFlow;
+        return (
+            <div>
+                {genericFieldInfo && (
+                    <Form
+                        onSubmit={() => this.onSaveClicked()}
+                        onReset={onCancel}
+                        formReady={formReady}
+                        isValid={isFormValid}
+                        onValidateForm={() => onValidateForm()}>
+                        <Input
+                            type="text"
+                            name="name"
+                            label={i18n('Name')}
+                            isValid={genericFieldInfo['artifactName'].isValid}
+                            errorText={
+                                genericFieldInfo['artifactName'].errorText
+                            }
+                            isRequired={true}
+                            value={artifactName}
+                            onChange={artifactName =>
+                                onDataChanged({ artifactName })
+                            }
+                        />
+                        <Input
+                            type="textarea"
+                            name="description"
+                            label={i18n('Description')}
+                            isValid={genericFieldInfo['description'].isValid}
+                            errorText={
+                                genericFieldInfo['description'].errorText
+                            }
+                            isRequired={true}
+                            value={description}
+                            overlayPos="bottom"
+                            onChange={description =>
+                                onDataChanged({ description })
+                            }
+                        />
+                    </Form>
+                )}
+            </div>
+        );
+    }
 
-	render() {
-		let {onCancel, onDataChanged, currentFlow, genericFieldInfo, formReady, isFormValid, onValidateForm} = this.props;
-		let {artifactName, description} = currentFlow;
-		return (
-			<div>
-				{genericFieldInfo && <Form
-					onSubmit={() => this.onSaveClicked()}
-					onReset={onCancel} formReady={formReady} isValid={isFormValid} onValidateForm={() => onValidateForm()} >
-				<Input
-					type='text'
-					name='name'
-					label={i18n('Name')}
-					isValid={genericFieldInfo['artifactName'].isValid}
-					errorText={genericFieldInfo['artifactName'].errorText}
-					isRequired={true}
-					value={artifactName}
-					onChange={artifactName => onDataChanged({artifactName})}/>
-				<Input
-					type='textarea'
-					name='description'
-					label={i18n('Description')}
-					isValid={genericFieldInfo['description'].isValid}
-					errorText={genericFieldInfo['description'].errorText}
-					isRequired={true}
-					value={description}
-					overlayPos='bottom'
-					onChange={description => onDataChanged({description})}/>
-			</Form> }
-			</div>
-		);
-	}
-
-	onSaveClicked() {
-		let {currentFlow, onSubmit} = this.props;
-		if (onSubmit) {
-			onSubmit(currentFlow);
-		}
-	}
-
+    onSaveClicked() {
+        let { currentFlow, onSubmit } = this.props;
+        if (onSubmit) {
+            onSubmit(currentFlow);
+        }
+    }
 }
 
 export default FlowsEditorModalView;
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js b/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js
index 642c578eb7..2718c19aaa 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js
@@ -13,40 +13,50 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import FlowsActions from './FlowsActions.js';
 import FlowsListEditorView from './FlowsListEditorView.jsx';
 
-export const mapStateToProps = ({flows}) => {
-	let {flowList = [], isDisplayModal, isModalInEditMode, shouldShowWorkflowsEditor = true, data = undefined, readonly} = flows;
-	let isCheckedOut = !readonly;
-	if(data && data.readonly){
-		isCheckedOut = !data.readonly;
-	}
+export const mapStateToProps = ({ flows }) => {
+    let {
+        flowList = [],
+        isDisplayModal,
+        isModalInEditMode,
+        shouldShowWorkflowsEditor = true,
+        data = undefined,
+        readonly
+    } = flows;
+    let isCheckedOut = !readonly;
+    if (data && data.readonly) {
+        isCheckedOut = !data.readonly;
+    }
 
-	return {
-		flowList,
-		isDisplayModal,
-		isCheckedOut,
-		isModalInEditMode,
-		shouldShowWorkflowsEditor,
-		currentFlow: data,
-		readonly
-	};
+    return {
+        flowList,
+        isDisplayModal,
+        isCheckedOut,
+        isModalInEditMode,
+        shouldShowWorkflowsEditor,
+        currentFlow: data,
+        readonly
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		onAddWorkflowClick: () => FlowsActions.openFlowDetailsEditor(dispatch),
-		onEditFlowDetailsClick: flow => FlowsActions.openFlowDetailsEditor(dispatch, flow),
-		onEditFlowDiagramClick: flow => FlowsActions.fetchArtifact(dispatch, {flow}),
-		onDeleteFlowClick: flow => FlowsActions.deleteFlow(dispatch, {flow}),
-		onSequenceDiagramSaveClick: flow => {
-			FlowsActions.closeFlowDiagramEditor(dispatch);
-			FlowsActions.createOrUpdateFlow(dispatch, {flow});
-		},
-		onSequenceDiagramCloseClick: () => FlowsActions.closeFlowDiagramEditor(dispatch)
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onAddWorkflowClick: () => FlowsActions.openFlowDetailsEditor(dispatch),
+        onEditFlowDetailsClick: flow =>
+            FlowsActions.openFlowDetailsEditor(dispatch, flow),
+        onEditFlowDiagramClick: flow =>
+            FlowsActions.fetchArtifact(dispatch, { flow }),
+        onDeleteFlowClick: flow => FlowsActions.deleteFlow(dispatch, { flow }),
+        onSequenceDiagramSaveClick: flow => {
+            FlowsActions.closeFlowDiagramEditor(dispatch);
+            FlowsActions.createOrUpdateFlow(dispatch, { flow });
+        },
+        onSequenceDiagramCloseClick: () =>
+            FlowsActions.closeFlowDiagramEditor(dispatch)
+    };
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(FlowsListEditorView);
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx b/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx
index 365b7f1bdf..3b2ff0619c 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx
@@ -13,7 +13,7 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Modal from 'nfvo-components/modal/Modal.jsx';
@@ -25,125 +25,146 @@ import FlowsEditorModal from './FlowsEditorModal.js';
 import SequenceDiagram from './SequenceDiagram.jsx';
 
 class FlowsListEditorView extends Component {
-
-	static propTypes = {
-		flowList: PropTypes.array,
-		currentFlow: PropTypes.object,
-		isDisplayModal: PropTypes.bool,
-		isModalInEditMode: PropTypes.bool,
-		isCheckedOut: PropTypes.bool,
-		shouldShowWorkflowsEditor: PropTypes.bool,
-		readonly: PropTypes.bool,
-
-		onAddWorkflowClick: PropTypes.func,
-		onEditFlowDetailsClick: PropTypes.func,
-		onEditFlowDiagramClick: PropTypes.func,
-		onDeleteFlowClick: PropTypes.func,
-		onSequenceDiagramSaveClick: PropTypes.func,
-		onSequenceDiagramCloseClick: PropTypes.func
-	};
-
-	state = {
-		localFilter: ''
-	};
-
-	render() {
-		let CurrentView = null;
-		if (this.props.shouldShowWorkflowsEditor) {
-			CurrentView = this.renderWorkflowsEditor();
-		}
-		else {
-			CurrentView = this.renderSequenceDiagramTool();
-		}
-
-		return CurrentView;
-	}
-
-	renderWorkflowsEditor() {
-		let {isDisplayModal, onAddWorkflowClick, isCheckedOut} = this.props;
-		const {localFilter} = this.state;
-
-		return (
-			<div className='workflows license-agreement-list-editor'>
-				<FlowRelatedView display={localFilter}/>
-				<ListEditorView
-					plusButtonTitle={i18n('Add Workflow')}
-					onAdd={onAddWorkflowClick}
-					filterValue={localFilter}
-					onFilter={filter => this.setState({localFilter: filter})}
-					isReadOnlyMode={!isCheckedOut}>
-					{this.filterList().map(flow => this.renderWorkflowListItem(flow, isCheckedOut))}
-				</ListEditorView>
-
-				{isDisplayModal && this.renderWorkflowEditorModal()}
-
-			</div>
-		);
-	}
-
-	renderWorkflowEditorModal() {
-		let { isDisplayModal, isModalInEditMode} = this.props;
-		return (
-			<Modal show={isDisplayModal} animation={true} className='onborading-modal workflows-editor-modal'>
-				<Modal.Header>
-					<Modal.Title>
-						{`${isModalInEditMode ? i18n('Edit Workflow') : i18n('Create New Workflow')}`}
-					</Modal.Title>
-				</Modal.Header>
-				<Modal.Body>
-					<FlowsEditorModal isNewArtifact={!isModalInEditMode}/>
-				</Modal.Body>
-			</Modal>
-		);
-	}
-
-	renderSequenceDiagramTool() {
-		let {onSequenceDiagramSaveClick, onSequenceDiagramCloseClick, currentFlow} = this.props;
-		return (
-			<SequenceDiagram
-				onSave={sequenceDiagramModel => onSequenceDiagramSaveClick({...currentFlow, sequenceDiagramModel})}
-				onClose={onSequenceDiagramCloseClick}
-				model={currentFlow.sequenceDiagramModel}/>
-		);
-	}
-
-	filterList() {
-		let {flowList} = this.props;
-		let {localFilter} = this.state;
-		if (localFilter.trim()) {
-			const filter = new RegExp(escape(localFilter), 'i');
-			return flowList.filter(({name = '', description = ''}) => {
-				return escape(name).match(filter) || escape(description).match(filter);
-			});
-		}
-		else {
-			return flowList;
-		}
-	}
-
-	renderWorkflowListItem(flow, isCheckedOut) {
-		let {uniqueId, artifactName, description} = flow;
-		let {onEditFlowDetailsClick, onEditFlowDiagramClick, onDeleteFlowClick} = this.props;
-		return (
-			<ListEditorItemView
-				key={uniqueId}
-				onSelect={() => onEditFlowDetailsClick(flow)}
-				onDelete={() => onDeleteFlowClick(flow)}
-				onEdit={() => onEditFlowDiagramClick(flow)}
-				className='list-editor-item-view'
-				isCheckedOut={isCheckedOut}>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Name')}</div>
-					<div className='text name'>{artifactName}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Description')}</div>
-					<div className='text description'>{description}</div>
-				</div>
-			</ListEditorItemView>
-		);
-	}
-
+    static propTypes = {
+        flowList: PropTypes.array,
+        currentFlow: PropTypes.object,
+        isDisplayModal: PropTypes.bool,
+        isModalInEditMode: PropTypes.bool,
+        isCheckedOut: PropTypes.bool,
+        shouldShowWorkflowsEditor: PropTypes.bool,
+        readonly: PropTypes.bool,
+
+        onAddWorkflowClick: PropTypes.func,
+        onEditFlowDetailsClick: PropTypes.func,
+        onEditFlowDiagramClick: PropTypes.func,
+        onDeleteFlowClick: PropTypes.func,
+        onSequenceDiagramSaveClick: PropTypes.func,
+        onSequenceDiagramCloseClick: PropTypes.func
+    };
+
+    state = {
+        localFilter: ''
+    };
+
+    render() {
+        let CurrentView = null;
+        if (this.props.shouldShowWorkflowsEditor) {
+            CurrentView = this.renderWorkflowsEditor();
+        } else {
+            CurrentView = this.renderSequenceDiagramTool();
+        }
+
+        return CurrentView;
+    }
+
+    renderWorkflowsEditor() {
+        let { isDisplayModal, onAddWorkflowClick, isCheckedOut } = this.props;
+        const { localFilter } = this.state;
+
+        return (
+            <div className="workflows license-agreement-list-editor">
+                <FlowRelatedView display={localFilter} />
+                <ListEditorView
+                    plusButtonTitle={i18n('Add Workflow')}
+                    onAdd={onAddWorkflowClick}
+                    filterValue={localFilter}
+                    onFilter={filter => this.setState({ localFilter: filter })}
+                    isReadOnlyMode={!isCheckedOut}>
+                    {this.filterList().map(flow =>
+                        this.renderWorkflowListItem(flow, isCheckedOut)
+                    )}
+                </ListEditorView>
+
+                {isDisplayModal && this.renderWorkflowEditorModal()}
+            </div>
+        );
+    }
+
+    renderWorkflowEditorModal() {
+        let { isDisplayModal, isModalInEditMode } = this.props;
+        return (
+            <Modal
+                show={isDisplayModal}
+                animation={true}
+                className="onborading-modal workflows-editor-modal">
+                <Modal.Header>
+                    <Modal.Title>
+                        {`${
+                            isModalInEditMode
+                                ? i18n('Edit Workflow')
+                                : i18n('Create New Workflow')
+                        }`}
+                    </Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <FlowsEditorModal isNewArtifact={!isModalInEditMode} />
+                </Modal.Body>
+            </Modal>
+        );
+    }
+
+    renderSequenceDiagramTool() {
+        let {
+            onSequenceDiagramSaveClick,
+            onSequenceDiagramCloseClick,
+            currentFlow
+        } = this.props;
+        return (
+            <SequenceDiagram
+                onSave={sequenceDiagramModel =>
+                    onSequenceDiagramSaveClick({
+                        ...currentFlow,
+                        sequenceDiagramModel
+                    })
+                }
+                onClose={onSequenceDiagramCloseClick}
+                model={currentFlow.sequenceDiagramModel}
+            />
+        );
+    }
+
+    filterList() {
+        let { flowList } = this.props;
+        let { localFilter } = this.state;
+        if (localFilter.trim()) {
+            const filter = new RegExp(escape(localFilter), 'i');
+            return flowList.filter(({ name = '', description = '' }) => {
+                return (
+                    escape(name).match(filter) ||
+                    escape(description).match(filter)
+                );
+            });
+        } else {
+            return flowList;
+        }
+    }
+
+    renderWorkflowListItem(flow, isCheckedOut) {
+        let { uniqueId, artifactName, description } = flow;
+        let {
+            onEditFlowDetailsClick,
+            onEditFlowDiagramClick,
+            onDeleteFlowClick
+        } = this.props;
+        return (
+            <ListEditorItemView
+                key={uniqueId}
+                onSelect={() => onEditFlowDetailsClick(flow)}
+                onDelete={() => onDeleteFlowClick(flow)}
+                onEdit={() => onEditFlowDiagramClick(flow)}
+                className="list-editor-item-view"
+                isCheckedOut={isCheckedOut}>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Name')}</div>
+                    <div className="text name">{artifactName}</div>
+                </div>
+                <div className="list-editor-item-view-field">
+                    <div className="title">{i18n('Description')}</div>
+                    <div className="text description">{description}</div>
+                </div>
+            </ListEditorItemView>
+        );
+    }
 }
 
 export default FlowsListEditorView;
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js b/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js
index 14bf595050..0279824ac4 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js
@@ -13,87 +13,91 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, FLOWS_EDITOR_FORM} from './FlowsConstants.js';
+import { actionTypes, FLOWS_EDITOR_FORM } from './FlowsConstants.js';
 
 export default (state = {}, action) => {
-	switch (action.type) {
-		case actionTypes.FLOW_LIST_LOADED:
-			return {
-				...state,
-				flowList: action.results,
-				flowParticipants: action.participants,
-				serviceID: action.serviceID,
-				diagramType: action.diagramType,
-				readonly: action.readonly
-			};
-		case actionTypes.ADD_OR_UPDATE_FLOW:
-		case actionTypes.ARTIFACT_LOADED:
-			let flowList = state.flowList || [];
-			let index = flowList.findIndex(flow => flow.uniqueId === action.flow.uniqueId);
-			if (index === -1) {
-				index = flowList.length;
-			}
-			let flowToBeUpdated = flowList[index];
-			flowList = [
-				...flowList.slice(0, index),
-				{...flowToBeUpdated, ...action.flow},
-				...flowList.slice(index + 1)
-			];
-			return {
-				...state,
-				flowList,
-				serviceID: action.flow.serviceID,
-				diagramType: action.flow.artifactType || state.diagramType
-			};
-		case actionTypes.DELETE_FLOW:
-			return {
-				...state,
-				flowList: state.flowList.filter(flow => flow.uniqueId !== action.flow.uniqueId)
-			};
-		case actionTypes.OPEN_FLOW_DETAILS_EDITOR:
-			return {
-				...state,
-				formName: FLOWS_EDITOR_FORM,
-				formReady: null,
-				genericFieldInfo: {
-					artifactName : {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					},
-					description: {
-						isValid: true,
-						errorText: '',
-						validations: [{type: 'required', data: true}]
-					}
-				},
-				data: action.flow,
-				isDisplayModal: true,
-				isModalInEditMode: Boolean(action.flow && action.flow.uniqueId)
-			};
+    switch (action.type) {
+        case actionTypes.FLOW_LIST_LOADED:
+            return {
+                ...state,
+                flowList: action.results,
+                flowParticipants: action.participants,
+                serviceID: action.serviceID,
+                diagramType: action.diagramType,
+                readonly: action.readonly
+            };
+        case actionTypes.ADD_OR_UPDATE_FLOW:
+        case actionTypes.ARTIFACT_LOADED:
+            let flowList = state.flowList || [];
+            let index = flowList.findIndex(
+                flow => flow.uniqueId === action.flow.uniqueId
+            );
+            if (index === -1) {
+                index = flowList.length;
+            }
+            let flowToBeUpdated = flowList[index];
+            flowList = [
+                ...flowList.slice(0, index),
+                { ...flowToBeUpdated, ...action.flow },
+                ...flowList.slice(index + 1)
+            ];
+            return {
+                ...state,
+                flowList,
+                serviceID: action.flow.serviceID,
+                diagramType: action.flow.artifactType || state.diagramType
+            };
+        case actionTypes.DELETE_FLOW:
+            return {
+                ...state,
+                flowList: state.flowList.filter(
+                    flow => flow.uniqueId !== action.flow.uniqueId
+                )
+            };
+        case actionTypes.OPEN_FLOW_DETAILS_EDITOR:
+            return {
+                ...state,
+                formName: FLOWS_EDITOR_FORM,
+                formReady: null,
+                genericFieldInfo: {
+                    artifactName: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    },
+                    description: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'required', data: true }]
+                    }
+                },
+                data: action.flow,
+                isDisplayModal: true,
+                isModalInEditMode: Boolean(action.flow && action.flow.uniqueId)
+            };
 
-		case actionTypes.CLOSE_FLOW_DETAILS_EDITOR:
-			return {
-				...state,
-				data: undefined,
-				isDisplayModal: false,
-				isModalInEditMode: false
-			};
-		case actionTypes.OPEN_FLOW_DIAGRAM_EDITOR:
-			return {
-				...state,
-				data: action.flow,
-				shouldShowWorkflowsEditor: false
-			};
-		case actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR:
-			return {
-				...state,
-				data: undefined,
-				shouldShowWorkflowsEditor: true
-			};
-		case actionTypes.RESET:
-			return {};
-	}
+        case actionTypes.CLOSE_FLOW_DETAILS_EDITOR:
+            return {
+                ...state,
+                data: undefined,
+                isDisplayModal: false,
+                isModalInEditMode: false
+            };
+        case actionTypes.OPEN_FLOW_DIAGRAM_EDITOR:
+            return {
+                ...state,
+                data: action.flow,
+                shouldShowWorkflowsEditor: false
+            };
+        case actionTypes.CLOSE_FLOW_DIAGRAM_EDITOR:
+            return {
+                ...state,
+                data: undefined,
+                shouldShowWorkflowsEditor: true
+            };
+        case actionTypes.RESET:
+            return {};
+    }
 
-	return state;
+    return state;
 };
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx b/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx
index a2a5554203..7d302444e4 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx
+++ b/openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx
@@ -22,57 +22,66 @@ import FlowsListEditor from './FlowsListEditor.js';
 import FlowsActions from './FlowsActions.js';
 
 class FlowsListEditorPunchOutWrapper extends React.Component {
+    componentDidMount() {
+        let element = ReactDOM.findDOMNode(this);
+        element.addEventListener('click', event => {
+            if (event.target.tagName === 'A') {
+                event.preventDefault();
+            }
+        });
+        ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
+            element.addEventListener(eventType, event =>
+                event.stopPropagation()
+            )
+        );
+    }
 
-	componentDidMount() {
-		let element = ReactDOM.findDOMNode(this);
-		element.addEventListener('click', event => {
-			if (event.target.tagName === 'A') {
-				event.preventDefault();
-			}
-		});
-		['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
-			element.addEventListener(eventType, event => event.stopPropagation())
-		);
-	}
-
-	render() {
-		return <FlowsListEditor/>;
-	}
+    render() {
+        return <FlowsListEditor />;
+    }
 }
 
 export default class DiagramPunchOut {
+    render({ options: { data, apiRoot, apiHeaders }, onEvent }, element) {
+        if (!this.isConfigSet) {
+            Configuration.setCatalogApiRoot(apiRoot);
+            Configuration.setCatalogApiHeaders(apiHeaders);
+            this.isConfigSet = true;
+        }
 
-	render({options: {data, apiRoot, apiHeaders}, onEvent}, element) {
-
-		if (!this.isConfigSet) {
-			Configuration.setCatalogApiRoot(apiRoot);
-			Configuration.setCatalogApiHeaders(apiHeaders);
-			this.isConfigSet = true;
-		}
-
-		this.onEvent = onEvent;
-		this.handleData(data);
+        this.onEvent = onEvent;
+        this.handleData(data);
 
-		if (!this.rendered) {
-			ReactDOM.render(<Application><div className='dox-ui'><FlowsListEditorPunchOutWrapper/></div></Application>, element);
-			this.rendered = true;
-		}
-	}
+        if (!this.rendered) {
+            ReactDOM.render(
+                <Application>
+                    <div className="dox-ui">
+                        <FlowsListEditorPunchOutWrapper />
+                    </div>
+                </Application>,
+                element
+            );
+            this.rendered = true;
+        }
+    }
 
-	unmount(element) {
-		let dispatch = action => store.dispatch(action);
-		ReactDOM.unmountComponentAtNode(element);
-		FlowsActions.reset(dispatch);
-	}
+    unmount(element) {
+        let dispatch = action => store.dispatch(action);
+        ReactDOM.unmountComponentAtNode(element);
+        FlowsActions.reset(dispatch);
+    }
 
-	handleData(data) {
-		let {serviceID, diagramType} = data;
-		let dispatch = action => store.dispatch(action);
+    handleData(data) {
+        let { serviceID, diagramType } = data;
+        let dispatch = action => store.dispatch(action);
 
-		if (serviceID !== this.prevServiceID || diagramType !== this.prevDiagramType) {
-			this.prevServiceID = serviceID;
-			this.prevDiagramType = diagramType;
-			FlowsActions.fetchFlowArtifacts(dispatch, {...data});
-		}
-	}
+        if (
+            serviceID !== this.prevServiceID ||
+            diagramType !== this.prevDiagramType
+        ) {
+            this.prevServiceID = serviceID;
+            this.prevDiagramType = diagramType;
+            FlowsActions.fetchFlowArtifacts(dispatch, { ...data });
+        }
+    }
 }
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js b/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js
index 54043498f0..c037f3eefd 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsReducersMap.js
@@ -15,8 +15,8 @@
  */
 
 import flowListReducer from './FlowsListReducer.js';
-import {createPlainDataReducer} from 'sdc-app/common/reducers/PlainDataReducer.js';
+import { createPlainDataReducer } from 'sdc-app/common/reducers/PlainDataReducer.js';
 
 export default {
-	flows: createPlainDataReducer(flowListReducer)
+    flows: createPlainDataReducer(flowListReducer)
 };
diff --git a/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx b/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
index d0a5bf3251..8a634915ac 100644
--- a/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
+++ b/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
@@ -13,27 +13,31 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import md5 from 'md5';
 
 class ImportantLogic extends Component {
+    state = {
+        whatToDisplay: false
+    };
 
-	state = {
-		whatToDisplay: false
-	};
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            whatToDisplay:
+                md5(nextProps.display) === 'a55899b341525123628776dbf5755d51'
+        });
+    }
 
-	componentWillReceiveProps(nextProps) {
-		this.setState({whatToDisplay: md5(nextProps.display) === 'a55899b341525123628776dbf5755d51'});
-	}
+    render() {
+        if (this.state.whatToDisplay) {
+            setTimeout(() => this.setState({ whatToDisplay: false }), 5000);
+        }
 
-	render() {
-		if (this.state.whatToDisplay) {
-			setTimeout(() => this.setState({whatToDisplay: false}), 5000);
-		}
-
-		return (
-			<div>
-				<style>{'\.easter-wrapper {\
+        return (
+            <div>
+                <style>
+                    {
+                        '.easter-wrapper {\
 					position: fixed;\
 					width: 70px;\
 					height: 70px;\
@@ -96,16 +100,20 @@ class ImportantLogic extends Component {
 					@keyframes yo-yo {\
 					from { transform: rotate(-0deg); top: 0 }\
 					to { transform: rotate(-360deg); top:120px }\
-				}'}</style>
-				<div
-					className='easter-wrapper'
-					style={{display: this.state.whatToDisplay ? 'block' : 'none'}}>
-					<span className='string'>{}</span>
-					<span className='yo-yo'>{}</span>
-				</div>
-			</div>
-		);
-	}
+				}'
+                    }
+                </style>
+                <div
+                    className="easter-wrapper"
+                    style={{
+                        display: this.state.whatToDisplay ? 'block' : 'none'
+                    }}>
+                    <span className="string">{}</span>
+                    <span className="yo-yo">{}</span>
+                </div>
+            </div>
+        );
+    }
 }
 
 export default ImportantLogic;
diff --git a/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx b/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx
index c128083774..ca24964472 100644
--- a/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx
+++ b/openecomp-ui/src/sdc-app/flows/SequenceDiagram.jsx
@@ -13,7 +13,7 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Button from 'sdc-ui/lib/react/Button.js';
 import Sequencer from 'dox-sequence-diagram-ui';
@@ -21,31 +21,37 @@ import Sequencer from 'dox-sequence-diagram-ui';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 class SequenceDiagram extends Component {
+    static propTypes = {
+        onSave: PropTypes.func.isRequired,
+        onClose: PropTypes.func,
+        model: PropTypes.object.isRequired
+    };
 
-	static propTypes = {
-		onSave: PropTypes.func.isRequired,
-		onClose: PropTypes.func,
-		model: PropTypes.object.isRequired
-	};
-
-	onSave() {
-		this.props.onSave(this.refs.sequencer.getModel());
-	}
-
-	render() {
-		return (
-			<div className='sequence-diagram'>
-				<div className='sequence-diagram-sequencer'>
-					<Sequencer ref='sequencer' options={{useHtmlSelect: true}} model={this.props.model} />
-				</div>
-				<div className='sequence-diagram-action-buttons'>
-					<Button onClick={() => this.onSave()}>{i18n('Save')}</Button>
-					<Button onClick={this.props.onClose}>{i18n('Close')}</Button>
-				</div>
-			</div>
-		);
-	}
+    onSave() {
+        this.props.onSave(this.refs.sequencer.getModel());
+    }
 
+    render() {
+        return (
+            <div className="sequence-diagram">
+                <div className="sequence-diagram-sequencer">
+                    <Sequencer
+                        ref="sequencer"
+                        options={{ useHtmlSelect: true }}
+                        model={this.props.model}
+                    />
+                </div>
+                <div className="sequence-diagram-action-buttons">
+                    <Button onClick={() => this.onSave()}>
+                        {i18n('Save')}
+                    </Button>
+                    <Button onClick={this.props.onClose}>
+                        {i18n('Close')}
+                    </Button>
+                </div>
+            </div>
+        );
+    }
 }
 
 export default SequenceDiagram;
diff --git a/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js b/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js
index c83fdc91f0..23723dc91d 100644
--- a/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js
+++ b/openecomp-ui/src/sdc-app/flows/SequenceDiagramModelHelper.js
@@ -16,51 +16,54 @@
 import emptyModel from './emptyModel.json';
 
 function mergeLifelines(oldLifelines, newLifelines) {
-	let oldLifelinesMap = new Map(oldLifelines.map(lifeline => [lifeline.id, lifeline]));
-	let newLifelinesMap = new Map(newLifelines.map(lifeline => [lifeline.id, lifeline]));
+    let oldLifelinesMap = new Map(
+        oldLifelines.map(lifeline => [lifeline.id, lifeline])
+    );
+    let newLifelinesMap = new Map(
+        newLifelines.map(lifeline => [lifeline.id, lifeline])
+    );
 
-	let updatedLifelines = oldLifelines.map(lifeline => {
-		let newLifeline = newLifelinesMap.get(lifeline.id);
-		return {
-			...lifeline,
-			name: newLifeline ? newLifeline.name : lifeline.name
-		};
-	});
+    let updatedLifelines = oldLifelines.map(lifeline => {
+        let newLifeline = newLifelinesMap.get(lifeline.id);
+        return {
+            ...lifeline,
+            name: newLifeline ? newLifeline.name : lifeline.name
+        };
+    });
 
-	let addedLifelines = newLifelines.filter(lifeline => !oldLifelinesMap.has(lifeline.id));
+    let addedLifelines = newLifelines.filter(
+        lifeline => !oldLifelinesMap.has(lifeline.id)
+    );
 
-	return [
-		...updatedLifelines,
-		...addedLifelines
-	];
+    return [...updatedLifelines, ...addedLifelines];
 }
 
-
 const SequenceDiagramModelHelper = Object.freeze({
+    createModel(options) {
+        return SequenceDiagramModelHelper.updateModel(emptyModel, options);
+    },
 
-	createModel(options) {
-		return SequenceDiagramModelHelper.updateModel(emptyModel, options);
-	},
-
-	updateModel(model, options) {
-		const diagram = model.diagram;
-		const metadata = diagram.metadata || model.metadata;
-		const id = options.id || metadata.id;
-		const name = options.name || metadata.name;
-		const lifelines = options.lifelines ? mergeLifelines(diagram.lifelines, options.lifelines) : diagram.lifelines;
+    updateModel(model, options) {
+        const diagram = model.diagram;
+        const metadata = diagram.metadata || model.metadata;
+        const id = options.id || metadata.id;
+        const name = options.name || metadata.name;
+        const lifelines = options.lifelines
+            ? mergeLifelines(diagram.lifelines, options.lifelines)
+            : diagram.lifelines;
 
-		return {
-			diagram: {
-				...diagram,
-				metadata: {
-					...metadata,
-					id,
-					name
-				},
-				lifelines
-			}
-		};
-	}
+        return {
+            diagram: {
+                ...diagram,
+                metadata: {
+                    ...metadata,
+                    id,
+                    name
+                },
+                lifelines
+            }
+        };
+    }
 });
 
 export default SequenceDiagramModelHelper;