1 files changed, 50 insertions, 99 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
index 5939499ec5..dc3b3f5ab9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
@@ -14,117 +14,68 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
-import {catalogItemTypeClasses, migrationStatusMapper} from './onboardingCatalog/OnboardingCatalogConstants.js';
-import CatalogTile from './CatalogTile.jsx';
-import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
-import {statusEnum, statusBarTextMap} from 'nfvo-components/panel/versionController/VersionControllerConstants.js';
-import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
-import tooltip from './onboardingCatalog/Tooltip.jsx';
-
-
-const CatalogTileIcon = ({catalogItemTypeClass}) => (
-	<div className={'catalog-tile-icon ' + catalogItemTypeClass}>
-		<div className='icon'><SVGIcon
-			name={catalogItemTypeClass === catalogItemTypeClasses.LICENSE_MODEL ? 'vlm' : 'vsp' }/>
-		</div>
-	</div>
-);
-
-const ItemTypeTitle = ({catalogItemTypeClass}) => {
-	const itemTypeTitle = catalogItemTypeClass === catalogItemTypeClasses.LICENSE_MODEL ? i18n('VLM') : i18n('VSP');
-	return (
-		<div className={`catalog-tile-type ${catalogItemTypeClass}`}>{itemTypeTitle}</div>
-	);
-};
-
-const CatalogTileVendorName = ({vendorName, catalogItemTypeClass}) => {
-	const name = catalogItemTypeClass === catalogItemTypeClasses.SOFTWARE_PRODUCT ? vendorName : '';
-	return ( name ? 
-		<OverlayTrigger placement='top' overlay={tooltip(name)}>
-			<div className='catalog-tile-vendor-name'>{name}</div>
-		</OverlayTrigger> : <div className='catalog-tile-vendor-name'>{name}</div>
-	);
-};
-
-const CatalogTileItemName = ({name}) => (
-	<OverlayTrigger placement='top' overlay={tooltip(name)}>
-		<div className='catalog-tile-item-name'>{name}</div>
-	</OverlayTrigger>
-);
-
-const VersionInfo = ({version}) => (
-	<div className='catalog-tile-version-info'>
-		<div className='catalog-tile-item-version' data-test-id='catalog-item-version'>
-			V {version}
-		</div>
-	</div>
-);
-
-const EntityDetails = ({catalogItemData, catalogItemTypeClass}) => {
-	const {vendorName, name, version} = catalogItemData;
-	return (
-		<div className='catalog-tile-entity-details'>
-			<CatalogTileVendorName catalogItemTypeClass={catalogItemTypeClass} vendorName={vendorName}/>
-			<CatalogTileItemName name={name}/>
-			<VersionInfo version={version.label}/>
-		</div>
-	);
-};
-
-
-const ItemStatusInfo = ({catalogItemTypeClass, lockingUser, itemStatus}) => {
-	const status = statusBarTextMap[itemStatus];
-	const lockedBy = lockingUser ? ` by ${lockingUser}` : '';
-	const toolTipMsg = `${status}${lockedBy}`;
-
-	return (
-		<div className={'catalog-tile-content ' + catalogItemTypeClass}>
-			<div className='catalog-tile-locking-user-name'>{i18n(status)}</div>
-			<OverlayTrigger placement='top' overlay={tooltip(toolTipMsg)}>
-				<div className='catalog-tile-check-in-status'><SVGIcon
-					name={itemStatus === statusEnum.CHECK_OUT_STATUS ? 'unlocked' : 'locked'}
-					data-test-id={itemStatus === statusEnum.CHECK_IN_STATUS ? 'catalog-item-checked-in' : 'catalog-item-checked-out'}/>
-				</div>
-			</OverlayTrigger>
-		</div>
-
-	);
+import {catalogItemTypes, migrationStatusMapper} from './onboardingCatalog/OnboardingCatalogConstants.js';
+import {Tile, TileInfo, TileInfoLine} from 'sdc-ui/lib/react';
+import {TooltipWrapper} from './onboardingCatalog/Tooltip.jsx';
+
+const ITEM_TYPE_MAP = {
+	[catalogItemTypes.LICENSE_MODEL]: {
+		headerText: i18n('VLM'),
+		contentIconName: 'vlm',
+		color: 'purple'
+	},
+	[catalogItemTypes.SOFTWARE_PRODUCT]: {
+		headerText: i18n('VSP'),
+		contentIconName: 'vsp',
+		color: 'blue'
+	}
 };
 
 const CatalogItemDetails = ({catalogItemData, catalogItemTypeClass, onSelect, onMigrate}) => {
 
-	let {status: itemStatus} = VersionControllerUtils.getCheckOutStatusKindByUserID(catalogItemData.status, catalogItemData.lockingUser);
+	let {vendorName, name} = catalogItemData;
+	let {headerText, color, contentIconName} = ITEM_TYPE_MAP[catalogItemTypeClass];
+
+	let onClick = (e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		if (catalogItemData.isOldVersion && catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION) {
+			onMigrate({softwareProduct: catalogItemData});
+		} else {
+			onSelect();
+		}
+	};
 
 	return (
-		<CatalogTile catalogItemTypeClass={catalogItemTypeClass} onSelect={() => {
-			if (catalogItemData.isOldVersion && catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION) {
-				onMigrate({
-					softwareProduct: catalogItemData
-				});
-			}
-			else {
-				onSelect();
-			}
-		}} data-test-id={catalogItemTypeClass}>
-			<div className='catalog-tile-top item-details'>
-				<ItemTypeTitle catalogItemTypeClass={catalogItemTypeClass}/>
-				<CatalogTileIcon catalogItemTypeClass={catalogItemTypeClass}/>
-				<EntityDetails catalogItemTypeClass={catalogItemTypeClass} catalogItemData={catalogItemData}/>
-				<ItemStatusInfo itemStatus={itemStatus} catalogItemTypeClass={catalogItemTypeClass} lockingUser={catalogItemData.lockingUser}/>
-			</div>
-		</CatalogTile>
+		<Tile
+			headerText={headerText}
+			headerColor={color}
+			iconName={contentIconName}
+			iconColor={color}
+			onClick={onClick}
+			dataTestId={catalogItemTypeClass}>
+			<TileInfo data-test-id='catalog-item-content'>
+				{vendorName &&
+					<TileInfoLine type='supertitle'>
+						<TooltipWrapper className='with-overlay' tooltipClassName='tile-super-info' dataTestId='catalog-item-vendor-name'>{vendorName}</TooltipWrapper>
+					</TileInfoLine>
+				}
+				<TileInfoLine type='title'>
+					<TooltipWrapper className='with-overlay' tooltipClassName='tile-title-info' dataTestId='catalog-item-name'>{name}</TooltipWrapper>
+				</TileInfoLine>
+			</TileInfo>
+		</Tile>
 	);
 
 };
 
 CatalogItemDetails.PropTypes = {
-	catalogItemData: React.PropTypes.obj,
-	catalogItemTypeClass: React.PropTypes.string,
-	onSelect: React.PropTypes.func,
-	onMigrate: React.PropTypes.func
+	catalogItemData: PropTypes.obj,
+	catalogItemTypeClass: PropTypes.string,
+	onSelect: PropTypes.func,
+	onMigrate: PropTypes.func
 };
 
 export default CatalogItemDetails;
-