[SDC-29] Amdocs OnBoard 1707 initial commit.

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

10 files changed, 566 insertions, 0 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
new file mode 100644
index 0000000000..73a447558d
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js
@@ -0,0 +1,85 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import {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';
+
+
+function getMessageForMigration(name) {
+	return (
+		<div>
+			<div>{i18n('{name} needs to be updated. Click ‘Checkout & Update’, to proceed.',{name})}</div>
+			<div>{i18n('Please don’t forget to submit afterwards')}</div>
+		</div>
+	);
+}
+
+const OnboardingCatalogActionHelper = {
+	changeVspOverlay(dispatch, vendor) {
+		dispatch({
+			type: actionTypes.CHANGE_VSP_OVERLAY,
+			vendorId: vendor ? vendor.id : null
+		});
+	},
+	closeVspOverlay(dispatch) {
+		dispatch({
+			type: actionTypes.CLOSE_VSP_OVERLAY
+		});
+	},
+	changeActiveTab(dispatch, activeTab) {
+		OnboardActionHelper.clearSearchValue(dispatch);
+		dispatch({
+			type: actionTypes.CHANGE_ACTIVE_CATALOG_TAB,
+			activeTab
+		});
+	},
+	onVendorSelect(dispatch, {vendor}) {
+		OnboardActionHelper.clearSearchValue(dispatch);
+		dispatch({
+			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)) {
+			dispatch({
+				type: modalActionTypes.GLOBAL_MODAL_WARNING,				
+				data: {
+					title: 'WARNING',
+					msg: i18n('{name} is locked by user {lockingUser} for self-healing',{name, lockingUser})
+				}
+			});
+		} else { 
+			dispatch({
+				type: modalActionTypes.GLOBAL_MODAL_WARNING,
+				data:{
+					title: 'WARNING',
+					msg: getMessageForMigration(softwareProduct.name.toUpperCase()),													
+					confirmationButtonText: i18n('Checkout & Update'),
+					onConfirmed: ()=>SoftwareProductActionHelper.migrateSoftwareProduct(dispatch, {softwareProduct})
+				}
+			});
+		}	
+	}
+};
+
+export default OnboardingCatalogActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
new file mode 100644
index 0000000000..071160c4fd
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
@@ -0,0 +1,50 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import keyMirror from 'nfvo-utils/KeyMirror.js';
+
+export const catalogItemTypes = Object.freeze({
+	LICENSE_MODEL: 'license-model',
+	SOFTWARE_PRODUCT: 'software-product'
+});
+
+export const catalogItemTypeClasses = {
+	LICENSE_MODEL: 'license-model-type',
+	SOFTWARE_PRODUCT: 'software-product-type',
+	VENDOR: 'vendor-type'
+
+};
+
+export const modalMapper = {
+	'license-model': 'LICENSE_MODEL',
+	'software-product': 'SOFTWARE_PRODUCT'
+};
+
+export const tabsMapping = {
+	'BY_VENDOR': 1,
+	'ALL': 2
+};
+
+export const migrationStatusMapper = {
+	OLD_VERSION: 'True',
+};
+
+export const actionTypes = keyMirror({
+	ONBOARDING_CATALOG_OPEN_VENDOR_PAGE: null,
+	CHANGE_ACTIVE_CATALOG_TAB: null,
+	CHANGE_SEARCH_VALUE: null,
+	CHANGE_VSP_OVERLAY: null,
+	CLOSE_VSP_OVERLAY: null
+});
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js
new file mode 100644
index 0000000000..d7d9d0bd6c
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js
@@ -0,0 +1,30 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import {actionTypes, tabsMapping} from './OnboardingCatalogConstants.js';
+import {combineReducers} from 'redux';
+import vendorCatalogReducer from './VendorCatalogReducer.js';
+
+const onboardingCatalogReducer = combineReducers({
+	vendorCatalog: vendorCatalogReducer,
+	activeTab: (state = tabsMapping.ALL, action) => action.type === actionTypes.CHANGE_ACTIVE_CATALOG_TAB ? action.activeTab : state
+});
+
+export default (state, action) => {
+	if (action.type === actionTypes.RESET_ONBOARDING_CATALOG_STORE) {
+		state = undefined;
+	}
+	return onboardingCatalogReducer(state, action);
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js
new file mode 100644
index 0000000000..ac623db920
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js
@@ -0,0 +1,21 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import {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);
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
new file mode 100644
index 0000000000..b1f002d2fb
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
@@ -0,0 +1,98 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import classnames from 'classnames';
+import DetailsCatalogView from 'sdc-app/onboarding/onboard/DetailsCatalogView.jsx';
+import VendorCatalogView from './VendorCatalogView.jsx';
+import { tabsMapping} from './OnboardingCatalogConstants.js';
+
+const CatalogHeaderTabs = ({onTabPress, activeTab}) => (
+	<div className='catalog-header-tabs'>
+		<div
+			className={classnames('catalog-header-tab', {'active': activeTab === tabsMapping.ALL })}
+			onClick={() => onTabPress(tabsMapping.ALL)}
+			data-test-id='catalog-all-tab'>
+			{i18n('ALL')}
+		</div>
+		<div className='tab-separator'/>
+		<div
+			className={classnames('catalog-header-tab', {'active': activeTab === tabsMapping.BY_VENDOR })}
+			onClick={() => onTabPress(tabsMapping.BY_VENDOR)}
+			data-test-id='catalog-by-vendor-tab'>
+			{i18n('BY VENDOR')}
+		</div>
+	</div>
+);
+
+const CatalogHeader = ({activeTab, onTabPress}) => (
+	<div className='catalog-header'>
+		<CatalogHeaderTabs activeTab={activeTab} onTabPress={onTabPress} />
+	</div>
+);
+
+class OnboardingCatalogView extends React.Component {
+	renderViewByTab(activeTab){
+		const {finalizedLicenseModelList: licenseModelList, 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}
+						onAddVLM={onAddLicenseModelClick}
+						onAddVSP={onAddSoftwareProductClick}
+						onSelectVLM={onSelectLicenseModel}
+						onSelectVSP={onSelectSoftwareProduct}
+						filter={searchValue}
+						onMigrate={onMigrate}/>
+				);
+			case tabsMapping.BY_VENDOR:
+			default:
+				return (
+					<VendorCatalogView
+						licenseModelList={licenseModelList}
+						onAddVSP={onAddSoftwareProductClick}
+						onAddVLM={onAddLicenseModelClick}
+						onSelectVSP={onSelectSoftwareProduct}
+						onSelectVLM={onSelectLicenseModel}
+						vspOverlay={vspOverlay}
+						onVendorSelect={onVendorSelect}
+						selectedVendor={selectedVendor}
+						onVspOverlayChange={onVspOverlayChange}
+						onMigrate={onMigrate}
+						filter={searchValue}/>
+				);
+		}
+	}
+
+	render() {
+		const {selectedVendor, catalogActiveTab: activeTab, onCatalogTabClick, onSearch, searchValue} = this.props;
+		return (
+			<div className='catalog-wrapper'>
+				{!selectedVendor && <CatalogHeader
+					onSearch={event => onSearch(event.target.value)}
+					activeTab={activeTab}
+					onTabPress={tab => onCatalogTabClick(tab)}
+					searchValue={searchValue}/>}
+				{this.renderViewByTab(activeTab)}
+			</div>
+		);
+	}
+}
+
+export default OnboardingCatalogView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx
new file mode 100644
index 0000000000..8d8d1162a0
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx
@@ -0,0 +1,24 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import React from 'react';
+import Tooltip from 'react-bootstrap/lib/Tooltip.js';
+
+export default function tooltip (msg)  {
+	return (
+  		<Tooltip className='tile-tooltip' id='tile-tooltip'>{msg}</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
new file mode 100644
index 0000000000..1ba4834fa3
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
@@ -0,0 +1,50 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import {migrationStatusMapper} from './OnboardingCatalogConstants.js';
+
+const VSPOverlay = ({VSPList, onSelectVSP, onSeeMore, onMigrate}) => (
+	<div className='vsp-overlay-wrapper' onClick={(e) => {
+		e.stopPropagation();
+		e.preventDefault();
+	}}>
+		<div className='vsp-overlay-arrow'></div>
+		<div className='vsp-overlay'>
+			<div className='vsp-overlay-title'>{i18n('Recently Edited')}</div>
+			<div className='vsp-overlay-list'>
+				{VSPList.slice(0, 5).map(vsp => <div key={vsp.id} className='vsp-overlay-detail' onClick={() => {
+					if (vsp.isOldVersion && vsp.isOldVersion === migrationStatusMapper.OLD_VERSION) {
+						onMigrate({
+							softwareProduct: vsp
+						});
+					} else {
+						onSelectVSP(vsp);
+					}
+				}
+				}>{i18n(vsp.name)}</div>)}
+			</div>
+			{VSPList.length > 5 && <div className='vsp-overlay-see-more' onClick={onSeeMore}>{i18n('See More')}</div>}
+		</div>
+	</div>
+);
+
+VSPOverlay.PropTypes = {
+	VSPList: React.PropTypes.array,
+	onSelectVSP: React.PropTypes.func
+};
+
+export default VSPOverlay;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js
new file mode 100644
index 0000000000..dd8b41bd22
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js
@@ -0,0 +1,38 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import {actionTypes} from './OnboardingCatalogConstants.js';
+
+export default (state = {}, action) => {
+	switch(action.type) {
+		case actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE:
+			return {
+				...state,
+				selectedVendor: action.selectedVendor
+			};
+		case actionTypes.CHANGE_VSP_OVERLAY:
+			return {
+				...state,
+				vspOverlay: action.vendorId
+			};
+		case actionTypes.CLOSE_VSP_OVERLAY:
+			return {
+				...state,
+				vspOverlay: null
+			};
+		default:
+			return state;
+	}
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx
new file mode 100644
index 0000000000..c4e0599d85
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx
@@ -0,0 +1,74 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import VendorItem from './VendorItem.jsx';
+import CatalogList from '../CatalogList.jsx';
+import CatalogItemDetails from '../CatalogItemDetails.jsx';
+import {catalogItemTypes, catalogItemTypeClasses} from './OnboardingCatalogConstants.js';
+import {filterCatalogItemsByType} from './OnboardingCatalogUtils.js';
+
+const VendorList = ({onAddVLM, onAddVSP, onSelectVSP, licenseModelList = [], vspOverlay: currentOverlay, onVspOverlayChange, onVendorSelect, filter, onMigrate}) => {
+	return(
+		<CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
+			{
+				filterCatalogItemsByType(licenseModelList, catalogItemTypes.LICENSE_MODEL, filter).map(vlm =>
+					<VendorItem
+						key={vlm.id}
+						onAddVSP={onAddVSP}
+						onSelectVSP={onSelectVSP}
+						shouldShowOverlay={currentOverlay === vlm.id}
+						onVSPIconClick={(hasVSP) => onVspOverlayChange(vlm.id === currentOverlay || !hasVSP ? null : vlm)}
+						onVendorSelect={onVendorSelect}
+						onMigrate={onMigrate}
+						vendor={vlm}/>)
+			}
+		</CatalogList>
+	);
+};
+
+const SoftwareProductListByVendor = ({onAddVSP, selectedVendor, onVendorSelect, onSelectVSP, onSelectVLM, filter, onMigrate}) => {
+	return(
+		<div>
+			<CatalogList onAddVSP={()=>{onAddVSP(selectedVendor.id);}} vendorPageOptions={{selectedVendor, onBack: () => onVendorSelect(false)}}>
+				<CatalogItemDetails
+					key={selectedVendor.id}
+					onSelect={() => onSelectVLM(selectedVendor)}
+					catalogItemTypeClass={catalogItemTypeClasses.LICENSE_MODEL}
+					onMigrate={onMigrate}
+					catalogItemData={{...selectedVendor, name: selectedVendor.vendorName}}/>
+				{
+					filterCatalogItemsByType(selectedVendor.softwareProductList, catalogItemTypes.SOFTWARE_PRODUCT, filter).map(vsp =>
+						<CatalogItemDetails
+							key={vsp.id}
+							catalogItemTypeClass={catalogItemTypeClasses.SOFTWARE_PRODUCT}
+							onMigrate={onMigrate}
+							onSelect={() => onSelectVSP(vsp)}
+							catalogItemData={vsp}/>
+					)
+				}
+			</CatalogList>
+		</div>
+	);
+};
+
+class VendorCatalogView extends React.Component {
+	render() {
+		let {selectedVendor} = this.props;
+		return( selectedVendor ? <SoftwareProductListByVendor {...this.props}/> : <VendorList {...this.props}/>);
+	}
+}
+
+export default VendorCatalogView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
new file mode 100644
index 0000000000..cecccdd9ad
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
@@ -0,0 +1,96 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import {catalogItemTypeClasses} from './OnboardingCatalogConstants.js';
+import CatalogTile from '../CatalogTile.jsx';
+import classnames from 'classnames';
+import VSPOverlay from './VSPOverlay.jsx';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
+import tooltip 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,
+
+	};
+
+	render() {
+		let {vendor, onSelectVSP, shouldShowOverlay, onVendorSelect, onMigrate} = this.props;
+		let {softwareProductList = [], vendorName} = 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>
+		);
+	}
+
+	onClick(vlm) {
+		this.setState({
+			licenseModelToShow: vlm
+		});
+	}
+
+	onCreateVspClick(event) {
+		let {onAddVSP, vendor: {id}} = this.props;
+		event.stopPropagation();
+		event.preventDefault();
+		onAddVSP(id);
+	}
+
+	handleVspCountClick(e){
+		let {onVSPIconClick, vendor: {softwareProductList}} = this.props;
+		e.stopPropagation();
+		e.preventDefault();
+		const hasVSP = Boolean(softwareProductList.length);
+		onVSPIconClick(hasVSP);
+	}
+
+}
+
+export default VendorItem;