Add collaboration feature

Issue-ID: SDC-767
Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795
Signed-off-by: talig <talig@amdocs.com>

5 files changed, 151 insertions, 73 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js
index 05a1fc7797..9888087800 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependencies.js
@@ -16,24 +16,21 @@
 import {connect} from 'react-redux';
 
 import SoftwareProductDependenciesView from './SoftwareProductDependenciesView.jsx';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import SoftwareProductDependenciesActionHelper from './SoftwareProductDependenciesActionHelper.js';
 
 export const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor: {data: currentSoftwareProduct = {}}, softwareProductDependencies, softwareProductComponents: {componentsList}} = softwareProduct;
-	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentSoftwareProduct);
+	let {softwareProductDependencies, softwareProductComponents: {componentsList}} = softwareProduct;
 	return {
-		isReadOnlyMode,
-		softwareProductDependencies: softwareProductDependencies.length ? softwareProductDependencies : [{sourceId: '', targetId: '', relationType: 'dependsOn', id: 'fake'}],
+		softwareProductDependencies: softwareProductDependencies,
 		componentsOptions: componentsList.map(component => ({value: component.id, label: component.displayName}))
 	};
 };
 
 const mapActionsToProps = (dispatch, {softwareProductId, version}) => {
 	return {
-		onDataChanged: dependenciesList => SoftwareProductDependenciesActionHelper.updateDependencyList(dispatch, {dependenciesList}),
-		onAddDependency: () => SoftwareProductDependenciesActionHelper.addDependency(dispatch),
-		onSubmit: (dependenciesList) => SoftwareProductDependenciesActionHelper.saveDependencies(dispatch, {softwareProductId, version, dependenciesList})
+		onDataChanged: (item) => SoftwareProductDependenciesActionHelper.updateDependency(dispatch, {softwareProductId, version, item}),
+		onDeleteDependency: (item) => SoftwareProductDependenciesActionHelper.removeDependency(dispatch, {softwareProductId, version, item}),
+		onAddDependency: (item) => SoftwareProductDependenciesActionHelper.createDependency(dispatch, {softwareProductId, version, item})
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js
index e47b33a577..f04f8faf56 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesActionHelper.js
@@ -15,44 +15,83 @@
  */
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
-import {actionTypes} from './SoftwareProductDependenciesConstants.js';
-import uuid from 'uuid-js';
+import {actionTypes, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js';
 
 function baseUrl(softwareProductId, version) {
 	const versionId = version.id;
 	const restPrefix = Configuration.get('restPrefix');
-	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/component-dependency-model`;
+	return `${restPrefix}/v1.0/vendor-software-products/${softwareProductId}/versions/${versionId}/component-dependencies`;
 }
 
-function fetchDependency(softwareProductId, version) {
+function fetchDependencies(softwareProductId, version) {
 	return RestAPIUtil.fetch(`${baseUrl(softwareProductId, version)}`);
 }
 
-function postDependency(softwareProductId, version, dependenciesList) {
-	let modifedDependencyList = dependenciesList ? dependenciesList.filter(item => item.sourceId && item.targetId)
-	.map(item => ({sourceId: item.sourceId, targetId: item.targetId, relationType: item.relationType})) : [];
-	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {componentDependencyModels:modifedDependencyList});
+function addDepencency(softwareProductId, version, item) {
+	return RestAPIUtil.post(`${baseUrl(softwareProductId, version)}`, {
+		sourceId: item.sourceId,
+		targetId: item.targetId,
+		relationType: item.relationType
+	});
 }
 
+
+function updateDepencency(softwareProductId, version, item) {
+	return RestAPIUtil.put(`${baseUrl(softwareProductId, version)}/${item.id}`,
+		{
+			sourceId: item.sourceId,
+			targetId: item.targetId,
+			relationType: item.relationType
+		});
+}
+
+function removeDependency(softwareProductId, version, item) {
+	return RestAPIUtil.destroy(`${baseUrl(softwareProductId, version)}/${item.id}`);
+}
+
+
 const SoftwareProductDependenciesActionHelper = {
-	updateDependencyList(dispatch, {dependenciesList}) {		
-		dispatch({type: actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE, dependenciesList});
+	updateDependency(dispatch, {softwareProductId, version, item}) {
+		// if change was made on existing item - we will update the server and refresh the list
+		// if change was made on the 'new' row - we will only fire the event
+		if (item.id !== NEW_RULE_TEMP_ID) {
+			return updateDepencency(softwareProductId, version, item).then(() => {
+				return this.fetchDependencies(dispatch, {softwareProductId, version});
+			});
+		} else {
+			dispatch({
+				type: actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY,
+				item: item
+			});
+		}
 	},
-	addDependency(dispatch) {
-		dispatch({type: actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY});
+
+	createDependency(dispatch, {softwareProductId, version, item}) {
+		// removing the temp id
+		delete item.id;
+		// creating the new dependency
+		return addDepencency(softwareProductId, version, item).then(() => {
+			dispatch({
+				type: actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY
+			});
+			return this.fetchDependencies(dispatch, {softwareProductId, version});
+		});
 	},
+
+	removeDependency(dispatch, {softwareProductId, version, item}) {
+		return removeDependency(softwareProductId, version, item).then( () => {
+			return this.fetchDependencies(dispatch, {softwareProductId, version});
+		});
+	},
+
 	fetchDependencies(dispatch, {softwareProductId, version}) {
-		return fetchDependency(softwareProductId, version).then( response => {	
-			const dependenciesList = response.results ? response.results.map(item => {return {...item, id: uuid.create().toString()};}) : [];									
+		return fetchDependencies(softwareProductId, version).then( response => {
 			dispatch({
 				type: actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE,
-				dependenciesList
+				dependenciesList : response.results
 			});
 		});
-	},
-	saveDependencies(dispatch, {softwareProductId, version, dependenciesList}) {
-		return postDependency(softwareProductId, version, dependenciesList);
-	}	
+	}
 };
 
 export default SoftwareProductDependenciesActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js
index 1f27ed8311..c25561da17 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesConstants.js
@@ -17,7 +17,8 @@ import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
 	SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE: null,
-	ADD_SOFTWARE_PRODUCT_DEPENDENCY: null
+	ADD_SOFTWARE_PRODUCT_DEPENDENCY: null,
+	UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY: null
 });
 
 export const relationTypes = {
@@ -27,3 +28,5 @@ export const relationTypes = {
 export const relationTypesOptions = [
     {value: relationTypes.DEPENDS_ON, label: 'Depends On'}
 ];
+
+export const NEW_RULE_TEMP_ID = 'newRuleTempId';
\ No newline at end of file
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js
index 3fb479eedc..3edd3b899a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesReducer.js
@@ -15,21 +15,31 @@
  * permissions and limitations under the License.
  */
 
-import {actionTypes, relationTypes} from './SoftwareProductDependenciesConstants.js';
+import {actionTypes, relationTypes, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js';
 import {checkCyclesAndMarkDependencies} from './SoftwareProductDependenciesUtils.js';
-import uuid from 'uuid-js';
 
-export default (state = [], action) => {
+let newRowObject = {id: NEW_RULE_TEMP_ID, targetId: null, sourceId: null, relationType: relationTypes.DEPENDS_ON};
+
+export default (state = [Object.assign({}, newRowObject) ], action) => {
 	switch (action.type) {
 		case actionTypes.SOFTWARE_PRODUCT_DEPENDENCIES_LIST_UPDATE:
+			// copying the entity with the data for the row that is in the 'add' mode
+			let newDependency = state.find(dependency => dependency.id === NEW_RULE_TEMP_ID);
+			action.dependenciesList.push(newDependency);
+			// returning list from the server with our 'new entity' row
 			return checkCyclesAndMarkDependencies(action.dependenciesList);
-		case actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY:
-			return [...state, {
-				sourceId: null,
-				relationType: relationTypes.DEPENDS_ON,
-				targetId: null,
-				id: uuid.create()
-			}];
+		case actionTypes.ADD_SOFTWARE_PRODUCT_DEPENDENCY :
+			// resetting the entity with the data for the 'add' mode for a new entity
+			let newArray = state.filter(dependency => dependency.id !== NEW_RULE_TEMP_ID);
+			newArray.push(Object.assign({}, newRowObject));
+			return newArray;
+		case actionTypes.UPDATE_NEW_SOFTWARE_PRODUCT_DEPENDENCY :
+			// we really only need this for the 'new' row since we need to change the state to get
+			// everything updated
+			let updateArrayIndex = state.findIndex(dependency => dependency.id === NEW_RULE_TEMP_ID);
+			let updateArray = state.slice();
+			updateArray.splice(updateArrayIndex, 1, action.item);
+			return checkCyclesAndMarkDependencies(updateArray);
 		default:
 			return state;
 	}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
index a427470a4f..ed92de7bb1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/dependencies/SoftwareProductDependenciesView.jsx
@@ -20,7 +20,42 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 import SelectActionTable from 'nfvo-components/table/SelectActionTable.jsx';
 import SelectActionTableRow from 'nfvo-components/table/SelectActionTableRow.jsx';
 import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.jsx';
-import {relationTypesOptions} from './SoftwareProductDependenciesConstants.js';
+import {relationTypesOptions, NEW_RULE_TEMP_ID} from './SoftwareProductDependenciesConstants.js';
+
+
+const TableActionRow = ({onAction, actionIcon, showAction, dependency, sourceOptions, targetOptions, onDataChanged}) => {
+	return (
+		<SelectActionTableRow
+			key={dependency.id}
+			onAction={onAction}
+			overlayMsg={i18n('There is a loop between selections')}
+			hasError={dependency.hasCycle}
+			hasErrorIndication
+			showAction={showAction}
+			actionIcon={actionIcon}>
+			<SelectActionTableCell
+				options={sourceOptions}
+				selected={dependency.sourceId}
+				placeholder={i18n('Select VFC...')}
+				clearable={false}
+				onChange={newVal =>  {
+					dependency.sourceId = newVal;
+					onDataChanged(dependency);
+				}} />
+			<SelectActionTableCell options={relationTypesOptions} selected={dependency.relationType} clearable={false}/>
+			<SelectActionTableCell
+				placeholder={i18n('Select VFC...')}
+				options={targetOptions}
+				selected={dependency.targetId}
+				clearable={false}
+				onChange={newVal =>  {
+					dependency.targetId = newVal;
+					onDataChanged(dependency);
+				}} />
+		</SelectActionTableRow>
+	);
+};
+
 
 export default class SoftwareProductDependenciesView extends React.Component {
 	filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId, selectedTargetId}) {
@@ -46,8 +81,7 @@ export default class SoftwareProductDependenciesView extends React.Component {
 	}
 
 	render() {
-		let {componentsOptions, softwareProductDependencies, onDataChanged, onAddDependency, isReadOnlyMode} = this.props;
-		let canAdd = softwareProductDependencies.length < componentsOptions.length * (componentsOptions.length - 1);
+		let {componentsOptions, softwareProductDependencies, onDataChanged, onAddDependency, onDeleteDependency, isReadOnlyMode} = this.props;
 		let sourceToTargetMapping = {};
 		softwareProductDependencies.map(dependency => {
 			let isInMap = sourceToTargetMapping.hasOwnProperty(dependency.sourceId);
@@ -55,47 +89,42 @@ export default class SoftwareProductDependenciesView extends React.Component {
 				sourceToTargetMapping[dependency.sourceId] = isInMap ? [...sourceToTargetMapping[dependency.sourceId], dependency.targetId] : [dependency.targetId];
 			}
 		});
+		let depList = softwareProductDependencies.filter(dependency => dependency.id !== NEW_RULE_TEMP_ID);
+		let newDependency = softwareProductDependencies.find(dependency => dependency.id === NEW_RULE_TEMP_ID);
 		return (
 			<div className='software-product-dependencies'>
-				<div className='software-product-dependencies-title'>{i18n('Dependencies')}</div>
+				<div className='page-title'>{i18n('Dependencies')}</div>
 				<SelectActionTable
-					columns={['Source', 'Relation Type', 'Target']}
+					columns={[i18n('Source'), i18n('Relation Type'), i18n('Target')]}
 					numOfIcons={2}
-					isReadOnlyMode={isReadOnlyMode}
-					onAdd={canAdd ? onAddDependency : undefined}
-					onAddItem={i18n('Add Rule')}>
-					{softwareProductDependencies.map(dependency => (
-						<SelectActionTableRow
+					isReadOnlyMode={isReadOnlyMode}>
+					{!isReadOnlyMode && <TableActionRow
+						key={newDependency.id}
+						actionIcon='plusCircle'
+						onAction={() => onAddDependency(newDependency)}
+						dependency={newDependency}
+						componentsOptions={componentsOptions}
+						sourceToTargetMapping={sourceToTargetMapping}
+						onDataChanged={onDataChanged}
+						sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})}
+						targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: newDependency.sourceId, selectedTargetId: newDependency.targetId})}
+						showAction={newDependency.targetId !== null && newDependency.relationType !== null && newDependency.sourceId !== null}/> }
+					{depList.map(dependency => (
+						<TableActionRow
 							key={dependency.id}
-							onDelete={() => onDataChanged(softwareProductDependencies.filter(currentDependency => currentDependency.id !== dependency.id))}
-							overlayMsg={i18n('There is a loop between selections')}
-							hasError={dependency.hasCycle}
-							hasErrorIndication
-							showDelete={dependency.id !== 'fake' || dependency.hasCycle !== undefined}>
-							<SelectActionTableCell
-								options={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
-								selected={dependency.sourceId}
-								placeholder={i18n('Select VFC...')}
-								onChange={newSourceId => onDataChanged(softwareProductDependencies.map(currentDependency =>
-									({...currentDependency, sourceId: currentDependency.id === dependency.id ? newSourceId : currentDependency.sourceId})
-								))} />
-							<SelectActionTableCell options={relationTypesOptions} selected={dependency.relationType} clearable={false}/>
-							<SelectActionTableCell
-								placeholder={i18n('Select VFC...')}
-								options={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
-								selected={dependency.targetId}
-								onChange={newTargetId => onDataChanged(softwareProductDependencies.map(currentDependency =>
-									({...currentDependency, targetId: currentDependency.id === dependency.id ? newTargetId : currentDependency.targetId})
-								))} />
-						</SelectActionTableRow>
+							actionIcon='trashO'
+							onAction={() => onDeleteDependency(dependency)}
+							dependency={dependency}
+							componentsOptions={componentsOptions}
+							sourceToTargetMapping={sourceToTargetMapping}
+							sourceOptions={this.filterSources({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
+							targetOptions={this.filterTargets({componentsOptions, sourceToTargetMapping, selectedSourceId: dependency.sourceId, selectedTargetId: dependency.targetId})}
+							onDataChanged={onDataChanged}
+							showAction={true}/>
 					))}
 				</SelectActionTable>
 			</div>
 		);
 	}
 
-	save() {
-		let {onSubmit, softwareProductDependencies} = this.props;
-		return onSubmit(softwareProductDependencies);
-	}
 }