Add collaboration feature

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

8 files changed, 102 insertions, 90 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js
index 0d1e3992ce..a85c79edd9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js
@@ -17,8 +17,6 @@ import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import {actionTypes} from './OnboardingCatalogConstants.js';
 import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
-import {statusEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
 import OnboardActionHelper from '../OnboardActionHelper.js';
 import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
 
@@ -26,7 +24,7 @@ import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/Soft
 function getMessageForMigration(name) {
 	return (
 		<div>
-			<div>{i18n(`${name} needs to be updated. Click ‘Checkout & Update’, to proceed.`)}</div>
+			<div>{i18n('{name} needs to be updated. Click ‘Checkout & Update’, to proceed.', {name: name})}</div>
 			<div>{i18n('Please don’t forget to submit afterwards')}</div>
 		</div>
 	);
@@ -57,28 +55,28 @@ const OnboardingCatalogActionHelper = {
 			type: actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE,
 			selectedVendor: vendor
 		});
-	},	
+	},
 	onMigrate(dispatch, softwareProduct) {
-		const {status, name, lockingUser} = softwareProduct;
-		if (status === statusEnum.CHECK_OUT_STATUS && !VersionControllerUtils.isCheckedOutByCurrentUser(softwareProduct)) {
+		const {name, lockingUser} = softwareProduct;
+		if (NaN === NaN) { // TODO
 			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_WARNING,				
+				type: modalActionTypes.GLOBAL_MODAL_WARNING,
 				data: {
 					title: 'WARNING',
-					msg: i18n(`${name} is locked by user ${lockingUser} for self-healing`)
+					msg: i18n('{name} is locked by user {lockingUser} for self-healing', {name: name, lockingUser: lockingUser})
 				}
 			});
-		} else { 
+		} else {
 			dispatch({
 				type: modalActionTypes.GLOBAL_MODAL_WARNING,
 				data:{
 					title: 'WARNING',
-					msg: getMessageForMigration(softwareProduct.name.toUpperCase()),													
+					msg: getMessageForMigration(softwareProduct.name.toUpperCase()),
 					confirmationButtonText: i18n('Checkout & Update'),
 					onConfirmed: ()=>SoftwareProductActionHelper.migrateSoftwareProduct(dispatch, {softwareProduct})
 				}
 			});
-		}	
+		}
 	}
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
index 071160c4fd..a1bf1b1fc8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
@@ -24,7 +24,11 @@ export const catalogItemTypeClasses = {
 	LICENSE_MODEL: 'license-model-type',
 	SOFTWARE_PRODUCT: 'software-product-type',
 	VENDOR: 'vendor-type'
+};
 
+export const catalogItemStatuses = {
+	DRAFT: 'Draft',
+	CERTIFIED: 'Certified'
 };
 
 export const modalMapper = {
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js
index ac623db920..78258255ec 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js
@@ -13,9 +13,7 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {catalogItemTypes} from './OnboardingCatalogConstants.js';
 
-export const filterCatalogItemsByType = (items, type, filter) => {
-	const fieldName = type === catalogItemTypes.LICENSE_MODEL ? 'vendorName' : 'name';
-	return items.filter(item => item[fieldName].toLowerCase().indexOf(filter.toLowerCase()) > -1);
+export const filterCatalogItemsByType = ({items, filter}) => {
+	return items.filter(item => item.name.toLowerCase().indexOf(filter.toLowerCase()) > -1);
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
index b1f002d2fb..1004472ec3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
@@ -46,14 +46,16 @@ const CatalogHeader = ({activeTab, onTabPress}) => (
 
 class OnboardingCatalogView extends React.Component {
 	renderViewByTab(activeTab){
-		const {finalizedLicenseModelList: licenseModelList, vspOverlay, finalizedSoftwareProductList: softwareProductList, onSelectLicenseModel, onSelectSoftwareProduct,
+		const {finalizedLicenseModelList: licenseModelList, fullLicenseModelList, users, vspOverlay, finalizedSoftwareProductList: softwareProductList, onSelectLicenseModel, onSelectSoftwareProduct,
 				onAddLicenseModelClick, onAddSoftwareProductClick, onVspOverlayChange, onVendorSelect, selectedVendor, searchValue, onMigrate} = this.props;
+
 		switch (activeTab){
 			case tabsMapping.ALL:
 				return (
 					<DetailsCatalogView
 						VLMList={licenseModelList}
 						VSPList={softwareProductList}
+						users={users}
 						onAddVLM={onAddLicenseModelClick}
 						onAddVSP={onAddSoftwareProductClick}
 						onSelectVLM={onSelectLicenseModel}
@@ -65,7 +67,8 @@ class OnboardingCatalogView extends React.Component {
 			default:
 				return (
 					<VendorCatalogView
-						licenseModelList={licenseModelList}
+						licenseModelList={fullLicenseModelList}
+						users={users}
 						onAddVSP={onAddSoftwareProductClick}
 						onAddVLM={onAddLicenseModelClick}
 						onSelectVSP={onSelectSoftwareProduct}
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx
index 8d8d1162a0..80d9b07ac9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx
@@ -16,9 +16,16 @@
 
 import React from 'react';
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
 
-export default function tooltip (msg)  {
-	return (
-  		<Tooltip className='tile-tooltip' id='tile-tooltip'>{msg}</Tooltip>
-	);
-};
+const tooltip = (msg, className = '') => (
+	<Tooltip className={className} id={className}>{msg}</Tooltip>
+);
+
+export const TooltipWrapper = ({placement = 'top', className = '', tooltipClassName = '', dataTestId, delayShow = 0, children}) => (
+	<OverlayTrigger placement={placement} overlay={tooltip(children, tooltipClassName)} delayShow={delayShow}>
+		<div className={className} data-test-id={dataTestId}>{children}</div>
+	</OverlayTrigger>
+);
+
+export default tooltip;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
index 1ba4834fa3..a2852e5afa 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import {migrationStatusMapper} from './OnboardingCatalogConstants.js';
 
@@ -43,8 +44,8 @@ const VSPOverlay = ({VSPList, onSelectVSP, onSeeMore, onMigrate}) => (
 );
 
 VSPOverlay.PropTypes = {
-	VSPList: React.PropTypes.array,
-	onSelectVSP: React.PropTypes.func
+	VSPList: PropTypes.array,
+	onSelectVSP: PropTypes.func
 };
 
 export default VSPOverlay;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx
index c4e0599d85..9914ea2154 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx
@@ -17,20 +17,20 @@ import React from 'react';
 import VendorItem from './VendorItem.jsx';
 import CatalogList from '../CatalogList.jsx';
 import CatalogItemDetails from '../CatalogItemDetails.jsx';
-import {catalogItemTypes, catalogItemTypeClasses} from './OnboardingCatalogConstants.js';
+import {catalogItemTypes} from './OnboardingCatalogConstants.js';
 import {filterCatalogItemsByType} from './OnboardingCatalogUtils.js';
 
-const VendorList = ({onAddVLM, onAddVSP, onSelectVSP, licenseModelList = [], vspOverlay: currentOverlay, onVspOverlayChange, onVendorSelect, filter, onMigrate}) => {
+const VendorList = ({onAddVLM, onAddVSP, onSelectVSP, licenseModelList = [], vspOverlay: currentOverlay, onVspOverlayChange, onVendorSelect, filter, onMigrate, users}) => {
 	return(
 		<CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
 			{
-				filterCatalogItemsByType(licenseModelList, catalogItemTypes.LICENSE_MODEL, filter).map(vlm =>
+				filterCatalogItemsByType({items: licenseModelList, filter}).map(vlm =>
 					<VendorItem
 						key={vlm.id}
 						onAddVSP={onAddVSP}
-						onSelectVSP={onSelectVSP}
+						onSelectVSP={(vsp) => onSelectVSP(vsp, users)}
 						shouldShowOverlay={currentOverlay === vlm.id}
-						onVSPIconClick={(hasVSP) => onVspOverlayChange(vlm.id === currentOverlay || !hasVSP ? null : vlm)}
+						onVSPButtonClick={(hasVSP) => onVspOverlayChange(vlm.id === currentOverlay || !hasVSP ? null : vlm)}
 						onVendorSelect={onVendorSelect}
 						onMigrate={onMigrate}
 						vendor={vlm}/>)
@@ -39,23 +39,23 @@ const VendorList = ({onAddVLM, onAddVSP, onSelectVSP, licenseModelList = [], vsp
 	);
 };
 
-const SoftwareProductListByVendor = ({onAddVSP, selectedVendor, onVendorSelect, onSelectVSP, onSelectVLM, filter, onMigrate}) => {
+const SoftwareProductListByVendor = ({onAddVSP, selectedVendor, onVendorSelect, onSelectVSP, onSelectVLM, filter, onMigrate, users}) => {
 	return(
 		<div>
 			<CatalogList onAddVSP={()=>{onAddVSP(selectedVendor.id);}} vendorPageOptions={{selectedVendor, onBack: () => onVendorSelect(false)}}>
 				<CatalogItemDetails
 					key={selectedVendor.id}
-					onSelect={() => onSelectVLM(selectedVendor)}
-					catalogItemTypeClass={catalogItemTypeClasses.LICENSE_MODEL}
+					onSelect={() => onSelectVLM(selectedVendor, users)}
+					catalogItemTypeClass={catalogItemTypes.LICENSE_MODEL}
 					onMigrate={onMigrate}
-					catalogItemData={{...selectedVendor, name: selectedVendor.vendorName}}/>
+					catalogItemData={selectedVendor}/>
 				{
-					filterCatalogItemsByType(selectedVendor.softwareProductList, catalogItemTypes.SOFTWARE_PRODUCT, filter).map(vsp =>
+					filterCatalogItemsByType({items: selectedVendor.softwareProductList, filter}).map(vsp =>
 						<CatalogItemDetails
 							key={vsp.id}
-							catalogItemTypeClass={catalogItemTypeClasses.SOFTWARE_PRODUCT}
+							catalogItemTypeClass={catalogItemTypes.SOFTWARE_PRODUCT}
 							onMigrate={onMigrate}
-							onSelect={() => onSelectVSP(vsp)}
+							onSelect={() => onSelectVSP(vsp, users)}
 							catalogItemData={vsp}/>
 					)
 				}
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
index d3d6f9ce37..158282cc48 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
@@ -14,81 +14,82 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
-import {catalogItemTypeClasses} from './OnboardingCatalogConstants.js';
-import CatalogTile from '../CatalogTile.jsx';
-import classnames from 'classnames';
-import VSPOverlay from './VSPOverlay.jsx';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
-import tooltip from './Tooltip.jsx';
+import {Tile, TileInfo, TileInfoLine, TileFooter, TileFooterCell, Button} from 'sdc-ui/lib/react';
 
+import VSPOverlay from './VSPOverlay.jsx';
+import {TooltipWrapper} from './Tooltip.jsx';
 
 class VendorItem extends React.Component {
 
 	static PropTypes = {
-		softwareProductList: React.PropTypes.array,
-		vendor: React.PropTypes.object,
-		onSelectVSP: React.PropTypes.func,
-		shouldShowOverlay: React.PropTypes.boolm,
-		onVendorSelect: React.PropTypes.func,
-		onAddVSP: React.PropTypes.func,
-		onVSPIconClick: React.PropTypes.func,
-
+		softwareProductList: PropTypes.array,
+		vendor: PropTypes.object,
+		shouldShowOverlay: PropTypes.bool,
+		onSelectVSP: PropTypes.func,
+		onVendorSelect: PropTypes.func,
+		onAddVSP: PropTypes.func,
+		onVSPButtonClick: PropTypes.func
 	};
 
 	render() {
 		let {vendor, onSelectVSP, shouldShowOverlay, onVendorSelect, onMigrate} = this.props;
-		let {softwareProductList = [], vendorName} = vendor;
+		let {softwareProductList = [], name} = vendor;
 		return (
-			<CatalogTile
-				catalogItemTypeClass={catalogItemTypeClasses.VENDOR}
-				onSelect={() =>  onVendorSelect(vendor)}>
-				<div className='catalog-tile-top'>
-					<div className='catalog-tile-icon vendor-type'>
-						<div className='icon'><SVGIcon name='vendor'/></div>
-					</div>
-					<OverlayTrigger placement='top' overlay={tooltip(vendorName)}>
-						<div className='catalog-tile-item-name'>{vendorName}</div>
-					</OverlayTrigger>
-					<div
-						className={classnames('catalog-tile-vsp-count', {active: shouldShowOverlay}, {clickable: softwareProductList.length})}
-						onClick={(event) => this.handleVspCountClick(event)}
-						data-test-id='catalog-vsp-count'>
-						{i18n(`${softwareProductList.length} VSPs`)}
-					</div>
-					<div className='catalog-tile-content' onClick={(event) => this.onCreateVspClick(event)} data-test-id='catalog-create-new-vsp-from-vendor'>
-						<div className='create-new-vsp-button'>
-							<SVGIcon name='plus'/>&nbsp;&nbsp;&nbsp;{i18n('Create new VSP')}
-						</div>
-					</div>
-				</div>
-
-				{shouldShowOverlay && softwareProductList.length > 0
-				&& <VSPOverlay onMigrate={onMigrate} VSPList={softwareProductList} onSelectVSP={onSelectVSP} onSeeMore={() => onVendorSelect(vendor)}/>}
-			</CatalogTile>
+			<Tile
+				iconName='vendor'
+				onClick={() => onVendorSelect(vendor)}>
+				<TileInfo align='center'>
+					<TileInfoLine type='title'>
+						<TooltipWrapper className='with-overlay' dataTestId='catalog-item-name'>{name}</TooltipWrapper>
+					</TileInfoLine>
+					<TileInfoLine>
+						<Button
+							btnType='outline-rounded'
+							color='dark-gray'
+							onClick={e => this.handleVspCountClick(e)}
+							data-test-id='catalog-vsp-count'
+							disabled={!softwareProductList.length}>
+							{i18n('{length} VSPs', {length: softwareProductList.length})}
+						</Button>
+						{shouldShowOverlay && softwareProductList.length > 0 &&
+							<VSPOverlay
+								onMigrate={onMigrate}
+								VSPList={softwareProductList}
+								onSelectVSP={onSelectVSP}
+								onSeeMore={() => onVendorSelect(vendor)} />
+						}
+					</TileInfoLine>
+				</TileInfo>
+				<TileFooter align='center'>
+					<TileFooterCell dataTestId='catalog-create-new-vsp-from-vendor'>
+						<Button
+							btnType='link'
+							color='primary'
+							iconName='plusThin'
+							onClick={e => this.onCreateVspClick(e)}>
+							{i18n('Create new VSP')}
+						</Button>
+					</TileFooterCell>
+				</TileFooter>
+			</Tile>
 		);
 	}
 
-	onClick(vlm) {
-		this.setState({
-			licenseModelToShow: vlm
-		});
-	}
-
-	onCreateVspClick(event) {
-		let {onAddVSP, vendor: {id}} = this.props;
-		event.stopPropagation();
-		event.preventDefault();
+	onCreateVspClick(e) {
+		e.stopPropagation();
+		e.preventDefault();
+		const {onAddVSP, vendor: {id}} = this.props;
 		onAddVSP(id);
 	}
 
 	handleVspCountClick(e){
-		let {onVSPIconClick, vendor: {softwareProductList}} = this.props;
 		e.stopPropagation();
 		e.preventDefault();
+		const {onVSPButtonClick, vendor: {softwareProductList}} = this.props;
 		const hasVSP = Boolean(softwareProductList.length);
-		onVSPIconClick(hasVSP);
+		onVSPButtonClick(hasVSP);
 	}
 
 }