[SDC] Onboarding 1710 rebase.
[sdc.git] / openecomp-ui / src / sdc-app / onboarding / onboard / CatalogItemDetails.jsx
index c63fbff..3b3e2fc 100644 (file)
@@ -18,45 +18,40 @@ import {catalogItemTypeClasses, migrationStatusMapper} from './onboardingCatalog
 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 'nfvo-components/icon/SVGIcon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 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 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(         
+       return (
                <div className={`catalog-tile-type ${catalogItemTypeClass}`}>{itemTypeTitle}</div>
        );
 };
 
-const CatalogTileVendorName = ({vendorName, catalogItemTypeClass}) => { 
-       const name = catalogItemTypeClass === catalogItemTypeClasses.SOFTWARE_PRODUCT ? vendorName : '';        
-       return(
-               <div>
-                       <OverlayTrigger placement='top' overlay={tooltip(name)}>
-                               <div className='catalog-tile-vendor-name'>{name}</div>
-                       </OverlayTrigger>
-               </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}) => (
-       <div>
-               <OverlayTrigger placement='top'  overlay={tooltip(name && name.toUpperCase())}>
-                       <div className='catalog-tile-item-name'>{name}</div>
-               </OverlayTrigger>       
-       </div>
+       <OverlayTrigger placement='top' overlay={tooltip(name && name.toUpperCase())}>
+               <div className='catalog-tile-item-name'>{name}</div>
+       </OverlayTrigger>
 );
 
 const VersionInfo = ({version}) => (
@@ -64,7 +59,7 @@ const VersionInfo = ({version}) => (
                <div className='catalog-tile-item-version' data-test-id='catalog-item-version'>
                        V {version}
                </div>
-       </div>  
+       </div>
 );
 
 const EntityDetails = ({catalogItemData, catalogItemTypeClass}) => {
@@ -73,54 +68,55 @@ const EntityDetails = ({catalogItemData, catalogItemTypeClass}) => {
                <div className='catalog-tile-entity-details'>
                        <CatalogTileVendorName catalogItemTypeClass={catalogItemTypeClass} vendorName={vendorName}/>
                        <CatalogTileItemName name={name}/>
-                       <VersionInfo version={version.label} />
-               </div>                  
+                       <VersionInfo version={version.label}/>
+               </div>
        );
 };
 
 
-const  ItemStatusInfo = ({catalogItemTypeClass, lockingUser, itemStatus}) => { 
+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-content ' + catalogItemTypeClass}>
                        <div className='catalog-tile-locking-user-name'>{i18n(status)}</div>
-                       <OverlayTrigger placement='top'  overlay={tooltip(toolTipMsg)}>                                                 
+                       <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>                                                                                                       
+                       </OverlayTrigger>
                </div>
-               
+
        );
 };
 
-const  CatalogItemDetails = ({catalogItemData, catalogItemTypeClass, onSelect, onMigrate}) =>  {
-       
+const CatalogItemDetails = ({catalogItemData, catalogItemTypeClass, onSelect, onMigrate}) => {
+
        let {status: itemStatus} = VersionControllerUtils.getCheckOutStatusKindByUserID(catalogItemData.status, catalogItemData.lockingUser);
-       
+
        return (
                <CatalogTile catalogItemTypeClass={catalogItemTypeClass} onSelect={() => {
                        if (catalogItemData.isOldVersion && catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION) {
                                onMigrate({
                                        softwareProduct: catalogItemData
                                });
-                       } else {
+                       }
+                       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 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>
        );
-       
+
 };
 
 CatalogItemDetails.PropTypes = {