Adding Prettier and fixing up eslint version

Issue-ID: SDC-1094
Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>

10 files changed, 545 insertions, 347 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 a85c79edd9..aebb829a88 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js
@@ -15,69 +15,88 @@
  */
 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 { actionTypes } from './OnboardingCatalogConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.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: name})}</div>
-			<div>{i18n('Please don’t forget to submit afterwards')}</div>
-		</div>
-	);
+    return (
+        <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>
+    );
 }
 
 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 {name, lockingUser} = softwareProduct;
-		if (NaN === NaN) { // TODO
-			dispatch({
-				type: modalActionTypes.GLOBAL_MODAL_WARNING,
-				data: {
-					title: 'WARNING',
-					msg: i18n('{name} is locked by user {lockingUser} for self-healing', {name: name, lockingUser: 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})
-				}
-			});
-		}
-	}
+    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 { name, lockingUser } = softwareProduct;
+        if (NaN === NaN) {
+            // TODO
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                data: {
+                    title: 'WARNING',
+                    msg: i18n(
+                        '{name} is locked by user {lockingUser} for self-healing',
+                        {
+                            name: name,
+                            lockingUser: 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
index 239ae4545f..f0cefdcde3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
@@ -16,41 +16,41 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const catalogItemTypes = Object.freeze({
-	LICENSE_MODEL: 'license-model',
-	SOFTWARE_PRODUCT: 'software-product'
+    LICENSE_MODEL: 'license-model',
+    SOFTWARE_PRODUCT: 'software-product'
 });
 
 export const catalogItemTypeClasses = {
-	LICENSE_MODEL: 'license-model-type',
-	SOFTWARE_PRODUCT: 'software-product-type',
-	VENDOR: 'vendor-type'
+    LICENSE_MODEL: 'license-model-type',
+    SOFTWARE_PRODUCT: 'software-product-type',
+    VENDOR: 'vendor-type'
 };
 
 export const catalogItemStatuses = {
-	DRAFT: 'Draft',
-	CERTIFIED: 'Certified',
-	ARCHIVED: 'ARCHIVED'
+    DRAFT: 'Draft',
+    CERTIFIED: 'Certified',
+    ARCHIVED: 'ARCHIVED'
 };
 
 export const modalMapper = {
-	'license-model': 'LICENSE_MODEL',
-	'software-product': 'SOFTWARE_PRODUCT'
+    'license-model': 'LICENSE_MODEL',
+    'software-product': 'SOFTWARE_PRODUCT'
 };
 
 export const tabsMapping = {
-	'BY_VENDOR': 1,
-	'ACTIVE': 2,
-	'ARCHIVE': 3
+    BY_VENDOR: 1,
+    ACTIVE: 2,
+    ARCHIVE: 3
 };
 
 export const migrationStatusMapper = {
-	OLD_VERSION: 'True',
+    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
+    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
index 3f8a833074..9796cf8918 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js
@@ -13,18 +13,21 @@
  * 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 { actionTypes, tabsMapping } from './OnboardingCatalogConstants.js';
+import { combineReducers } from 'redux';
 import vendorCatalogReducer from './VendorCatalogReducer.js';
 
 const onboardingCatalogReducer = combineReducers({
-	vendorCatalog: vendorCatalogReducer,
-	activeTab: (state = tabsMapping.ACTIVE, action) => action.type === actionTypes.CHANGE_ACTIVE_CATALOG_TAB ? action.activeTab : state
+    vendorCatalog: vendorCatalogReducer,
+    activeTab: (state = tabsMapping.ACTIVE, 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);
+    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
index 78258255ec..d1e401f57d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js
@@ -14,6 +14,8 @@
  * permissions and limitations under the License.
  */
 
-export const filterCatalogItemsByType = ({items, filter}) => {
-	return items.filter(item => item.name.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 8ae8549688..2cc32c2936 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
@@ -18,120 +18,202 @@ 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';
-import {tabsMapping as WCTabsMapping} from 'sdc-app/onboarding/onboard/OnboardConstants.js';
+import { tabsMapping } from './OnboardingCatalogConstants.js';
+import { tabsMapping as WCTabsMapping } from 'sdc-app/onboarding/onboard/OnboardConstants.js';
 import featureToggle from 'sdc-app/features/featureToggle.js';
-import {featureToggleNames} from 'sdc-app/features/FeaturesConstants.js';
+import { featureToggleNames } from 'sdc-app/features/FeaturesConstants.js';
 
-const Separator = () => (
-	<div className='tab-separator'/>
-);
+const Separator = () => <div className="tab-separator" />;
 
-const Tab = ({onTabPress, title, dataTestId, activeTab, tabMapping}) => (
-	<div
-		className={classnames('catalog-header-tab', {'active': activeTab === tabMapping })}
-		onClick={() => onTabPress(tabMapping)}
-		data-test-id={dataTestId}>
-		{title}
-	</div>
+const Tab = ({ onTabPress, title, dataTestId, activeTab, tabMapping }) => (
+    <div
+        className={classnames('catalog-header-tab', {
+            active: activeTab === tabMapping
+        })}
+        onClick={() => onTabPress(tabMapping)}
+        data-test-id={dataTestId}>
+        {title}
+    </div>
 );
 
 const ArchiveTab = featureToggle(featureToggleNames.ARCHIVE_ITEM)(Tab);
-const ArchiveTabSeparator = featureToggle(featureToggleNames.ARCHIVE_ITEM)(Separator);
+const ArchiveTabSeparator = featureToggle(featureToggleNames.ARCHIVE_ITEM)(
+    Separator
+);
 
-const CatalogHeaderTabs = (props) => (
-	<div className='catalog-header-tabs'>
-		<Tab {...props} title={i18n('ACTIVE')}  dataTestId='catalog-all-tab' tabMapping={tabsMapping.ACTIVE}/>
-		<Separator/>
-		<Tab {...props} title={i18n('BY VENDOR')} dataTestId='catalog-header-tab' tabMapping={tabsMapping.BY_VENDOR}/>
-		<ArchiveTabSeparator/>
-		<ArchiveTab {...props} title={i18n('ARCHIVE')} dataTestId='catalog-archive-tab' tabMapping={tabsMapping.ARCHIVE}/>
-	</div>
+const CatalogHeaderTabs = props => (
+    <div className="catalog-header-tabs">
+        <Tab
+            {...props}
+            title={i18n('ACTIVE')}
+            dataTestId="catalog-all-tab"
+            tabMapping={tabsMapping.ACTIVE}
+        />
+        <Separator />
+        <Tab
+            {...props}
+            title={i18n('BY VENDOR')}
+            dataTestId="catalog-header-tab"
+            tabMapping={tabsMapping.BY_VENDOR}
+        />
+        <ArchiveTabSeparator />
+        <ArchiveTab
+            {...props}
+            title={i18n('ARCHIVE')}
+            dataTestId="catalog-archive-tab"
+            tabMapping={tabsMapping.ARCHIVE}
+        />
+    </div>
 );
 
-const CatalogHeader = ({activeTab, onTabPress}) => (
-	<div className='catalog-header'>
-		<CatalogHeaderTabs activeTab={activeTab} onTabPress={onTabPress} />
-	</div>
+const CatalogHeader = ({ activeTab, onTabPress }) => (
+    <div className="catalog-header">
+        <CatalogHeaderTabs activeTab={activeTab} onTabPress={onTabPress} />
+    </div>
 );
 
 const FilterCatalogHeader = () => (
-	<div className='catalog-header'>
-		<div className='catalog-header-tabs'>
-			<div className='catalog-header-tab active'>
-				{i18n('ONBOARD CATALOG')}
-			</div>
-		</div>	
-	</div>
+    <div className="catalog-header">
+        <div className="catalog-header-tabs">
+            <div className="catalog-header-tab active">
+                {i18n('ONBOARD CATALOG')}
+            </div>
+        </div>
+    </div>
 );
 
-
-const FeaturedCatalogHeader = featureToggle(featureToggleNames.FILTER)({AComp: FilterCatalogHeader, BComp: CatalogHeader});
+const FeaturedCatalogHeader = featureToggle(featureToggleNames.FILTER)({
+    AComp: FilterCatalogHeader,
+    BComp: CatalogHeader
+});
 
 class OnboardingCatalogView extends React.Component {
-	renderViewByTab(activeTab){
-		const {finalizedLicenseModelList: licenseModelList, fullLicenseModelList, users, vspOverlay, finalizedSoftwareProductList: softwareProductList, onSelectLicenseModel, onSelectSoftwareProduct,
-				onAddLicenseModelClick, onAddSoftwareProductClick, onVspOverlayChange, onVendorSelect, selectedVendor, searchValue, onMigrate,
-				archivedSoftwareProductList, archivedLicenseModelList} = this.props;
+    renderViewByTab(activeTab) {
+        const {
+            finalizedLicenseModelList: licenseModelList,
+            fullLicenseModelList,
+            users,
+            vspOverlay,
+            finalizedSoftwareProductList: softwareProductList,
+            onSelectLicenseModel,
+            onSelectSoftwareProduct,
+            onAddLicenseModelClick,
+            onAddSoftwareProductClick,
+            onVspOverlayChange,
+            onVendorSelect,
+            selectedVendor,
+            searchValue,
+            onMigrate,
+            archivedSoftwareProductList,
+            archivedLicenseModelList
+        } = this.props;
 
-		switch (activeTab){
-			case tabsMapping.ARCHIVE:
-				return (
-					<DetailsCatalogView
-						VLMList={archivedLicenseModelList}
-						VSPList={archivedSoftwareProductList}
-						users={users}						
-						onSelectVLM={(item, users) => onSelectLicenseModel(item, users, WCTabsMapping.CATALOG)}
-						onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, WCTabsMapping.CATALOG)}
-						filter={searchValue}
-						onMigrate={onMigrate}/>
-				);
-			case tabsMapping.ACTIVE:
-				return (
-					<DetailsCatalogView
-						VLMList={licenseModelList}
-						VSPList={softwareProductList}
-						users={users}
-						onAddVLM={onAddLicenseModelClick}
-						onAddVSP={onAddSoftwareProductClick}
-						onSelectVLM={(item, users) => onSelectLicenseModel(item, users, WCTabsMapping.CATALOG)}
-						onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, WCTabsMapping.CATALOG)}
-						filter={searchValue}
-						onMigrate={onMigrate}/>
-				);
-			case tabsMapping.BY_VENDOR:
-			default:
-				return (
-					<VendorCatalogView
-						licenseModelList={fullLicenseModelList}
-						users={users}
-						onAddVSP={onAddSoftwareProductClick}
-						onAddVLM={onAddLicenseModelClick}
-						onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, WCTabsMapping.CATALOG)}
-						onSelectVLM={(item, users) => onSelectLicenseModel(item, users, WCTabsMapping.CATALOG)}
-						vspOverlay={vspOverlay}
-						onVendorSelect={onVendorSelect}
-						selectedVendor={selectedVendor}
-						onVspOverlayChange={onVspOverlayChange}
-						onMigrate={onMigrate}
-						filter={searchValue}/>
-				);
-		}
-	}
+        switch (activeTab) {
+            case tabsMapping.ARCHIVE:
+                return (
+                    <DetailsCatalogView
+                        VLMList={archivedLicenseModelList}
+                        VSPList={archivedSoftwareProductList}
+                        users={users}
+                        onSelectVLM={(item, users) =>
+                            onSelectLicenseModel(
+                                item,
+                                users,
+                                WCTabsMapping.CATALOG
+                            )
+                        }
+                        onSelectVSP={(item, users) =>
+                            onSelectSoftwareProduct(
+                                item,
+                                users,
+                                WCTabsMapping.CATALOG
+                            )
+                        }
+                        filter={searchValue}
+                        onMigrate={onMigrate}
+                    />
+                );
+            case tabsMapping.ACTIVE:
+                return (
+                    <DetailsCatalogView
+                        VLMList={licenseModelList}
+                        VSPList={softwareProductList}
+                        users={users}
+                        onAddVLM={onAddLicenseModelClick}
+                        onAddVSP={onAddSoftwareProductClick}
+                        onSelectVLM={(item, users) =>
+                            onSelectLicenseModel(
+                                item,
+                                users,
+                                WCTabsMapping.CATALOG
+                            )
+                        }
+                        onSelectVSP={(item, users) =>
+                            onSelectSoftwareProduct(
+                                item,
+                                users,
+                                WCTabsMapping.CATALOG
+                            )
+                        }
+                        filter={searchValue}
+                        onMigrate={onMigrate}
+                    />
+                );
+            case tabsMapping.BY_VENDOR:
+            default:
+                return (
+                    <VendorCatalogView
+                        licenseModelList={fullLicenseModelList}
+                        users={users}
+                        onAddVSP={onAddSoftwareProductClick}
+                        onAddVLM={onAddLicenseModelClick}
+                        onSelectVSP={(item, users) =>
+                            onSelectSoftwareProduct(
+                                item,
+                                users,
+                                WCTabsMapping.CATALOG
+                            )
+                        }
+                        onSelectVLM={(item, users) =>
+                            onSelectLicenseModel(
+                                item,
+                                users,
+                                WCTabsMapping.CATALOG
+                            )
+                        }
+                        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 && <FeaturedCatalogHeader
-					onSearch={event => onSearch(event.target.value)}
-					activeTab={activeTab}
-					onTabPress={tab => onCatalogTabClick(tab)}
-					searchValue={searchValue}/>}
-				{this.renderViewByTab(activeTab)}
-			</div>
-		);
-	}
+    render() {
+        const {
+            selectedVendor,
+            catalogActiveTab: activeTab,
+            onCatalogTabClick,
+            onSearch,
+            searchValue
+        } = this.props;
+        return (
+            <div className="catalog-wrapper">
+                {!selectedVendor && (
+                    <FeaturedCatalogHeader
+                        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
index 80d9b07ac9..2f00bf95ed 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx
@@ -19,13 +19,27 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
 
 const tooltip = (msg, className = '') => (
-	<Tooltip className={className} id={className}>{msg}</Tooltip>
+    <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 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 a2852e5afa..c2eb8250f8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
@@ -16,36 +16,52 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {migrationStatusMapper} from './OnboardingCatalogConstants.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>
+const VSPOverlay = ({ VSPList, onSelectVSP, onSeeMore, onMigrate }) => (
+    <div
+        className="vsp-overlay-wrapper"
+        onClick={e => {
+            e.stopPropagation();
+            e.preventDefault();
+        }}>
+        <div className="vsp-overlay-arrow" />
+        <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: PropTypes.array,
-	onSelectVSP: PropTypes.func
+    VSPList: PropTypes.array,
+    onSelectVSP: 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
index dd8b41bd22..2d22a2db90 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js
@@ -13,26 +13,26 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes} from './OnboardingCatalogConstants.js';
+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;
-	}
+    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
index 9914ea2154..02f8d50c5c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx
@@ -17,58 +17,100 @@ import React from 'react';
 import VendorItem from './VendorItem.jsx';
 import CatalogList from '../CatalogList.jsx';
 import CatalogItemDetails from '../CatalogItemDetails.jsx';
-import {catalogItemTypes} from './OnboardingCatalogConstants.js';
-import {filterCatalogItemsByType} from './OnboardingCatalogUtils.js';
+import { catalogItemTypes } from './OnboardingCatalogConstants.js';
+import { filterCatalogItemsByType } from './OnboardingCatalogUtils.js';
 
-const VendorList = ({onAddVLM, onAddVSP, onSelectVSP, licenseModelList = [], vspOverlay: currentOverlay, onVspOverlayChange, onVendorSelect, filter, onMigrate, users}) => {
-	return(
-		<CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
-			{
-				filterCatalogItemsByType({items: licenseModelList, filter}).map(vlm =>
-					<VendorItem
-						key={vlm.id}
-						onAddVSP={onAddVSP}
-						onSelectVSP={(vsp) => onSelectVSP(vsp, users)}
-						shouldShowOverlay={currentOverlay === vlm.id}
-						onVSPButtonClick={(hasVSP) => onVspOverlayChange(vlm.id === currentOverlay || !hasVSP ? null : vlm)}
-						onVendorSelect={onVendorSelect}
-						onMigrate={onMigrate}
-						vendor={vlm}/>)
-			}
-		</CatalogList>
-	);
+const VendorList = ({
+    onAddVLM,
+    onAddVSP,
+    onSelectVSP,
+    licenseModelList = [],
+    vspOverlay: currentOverlay,
+    onVspOverlayChange,
+    onVendorSelect,
+    filter,
+    onMigrate,
+    users
+}) => {
+    return (
+        <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
+            {filterCatalogItemsByType({ items: licenseModelList, filter }).map(
+                vlm => (
+                    <VendorItem
+                        key={vlm.id}
+                        onAddVSP={onAddVSP}
+                        onSelectVSP={vsp => onSelectVSP(vsp, users)}
+                        shouldShowOverlay={currentOverlay === vlm.id}
+                        onVSPButtonClick={hasVSP =>
+                            onVspOverlayChange(
+                                vlm.id === currentOverlay || !hasVSP
+                                    ? null
+                                    : vlm
+                            )
+                        }
+                        onVendorSelect={onVendorSelect}
+                        onMigrate={onMigrate}
+                        vendor={vlm}
+                    />
+                )
+            )}
+        </CatalogList>
+    );
 };
 
-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, users)}
-					catalogItemTypeClass={catalogItemTypes.LICENSE_MODEL}
-					onMigrate={onMigrate}
-					catalogItemData={selectedVendor}/>
-				{
-					filterCatalogItemsByType({items: selectedVendor.softwareProductList, filter}).map(vsp =>
-						<CatalogItemDetails
-							key={vsp.id}
-							catalogItemTypeClass={catalogItemTypes.SOFTWARE_PRODUCT}
-							onMigrate={onMigrate}
-							onSelect={() => onSelectVSP(vsp, users)}
-							catalogItemData={vsp}/>
-					)
-				}
-			</CatalogList>
-		</div>
-	);
+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, users)}
+                    catalogItemTypeClass={catalogItemTypes.LICENSE_MODEL}
+                    onMigrate={onMigrate}
+                    catalogItemData={selectedVendor}
+                />
+                {filterCatalogItemsByType({
+                    items: selectedVendor.softwareProductList,
+                    filter
+                }).map(vsp => (
+                    <CatalogItemDetails
+                        key={vsp.id}
+                        catalogItemTypeClass={catalogItemTypes.SOFTWARE_PRODUCT}
+                        onMigrate={onMigrate}
+                        onSelect={() => onSelectVSP(vsp, users)}
+                        catalogItemData={vsp}
+                    />
+                ))}
+            </CatalogList>
+        </div>
+    );
 };
 
 class VendorCatalogView extends React.Component {
-	render() {
-		let {selectedVendor} = this.props;
-		return( selectedVendor ? <SoftwareProductListByVendor {...this.props}/> : <VendorList {...this.props}/>);
-	}
+    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
index 158282cc48..bef47d5acf 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
@@ -16,82 +16,102 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {Tile, TileInfo, TileInfoLine, TileFooter, TileFooterCell, Button} from 'sdc-ui/lib/react';
+import {
+    Tile,
+    TileInfo,
+    TileInfoLine,
+    TileFooter,
+    TileFooterCell,
+    Button
+} from 'sdc-ui/lib/react';
 
 import VSPOverlay from './VSPOverlay.jsx';
-import {TooltipWrapper} from './Tooltip.jsx';
+import { TooltipWrapper } from './Tooltip.jsx';
 
 class VendorItem extends React.Component {
+    static PropTypes = {
+        softwareProductList: PropTypes.array,
+        vendor: PropTypes.object,
+        shouldShowOverlay: PropTypes.bool,
+        onSelectVSP: PropTypes.func,
+        onVendorSelect: PropTypes.func,
+        onAddVSP: PropTypes.func,
+        onVSPButtonClick: PropTypes.func
+    };
 
-	static PropTypes = {
-		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 = [], name } = vendor;
+        return (
+            <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>
+        );
+    }
 
-	render() {
-		let {vendor, onSelectVSP, shouldShowOverlay, onVendorSelect, onMigrate} = this.props;
-		let {softwareProductList = [], name} = vendor;
-		return (
-			<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>
-		);
-	}
-
-	onCreateVspClick(e) {
-		e.stopPropagation();
-		e.preventDefault();
-		const {onAddVSP, vendor: {id}} = this.props;
-		onAddVSP(id);
-	}
-
-	handleVspCountClick(e){
-		e.stopPropagation();
-		e.preventDefault();
-		const {onVSPButtonClick, vendor: {softwareProductList}} = this.props;
-		const hasVSP = Boolean(softwareProductList.length);
-		onVSPButtonClick(hasVSP);
-	}
+    onCreateVspClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        const { onAddVSP, vendor: { id } } = this.props;
+        onAddVSP(id);
+    }
 
+    handleVspCountClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        const {
+            onVSPButtonClick,
+            vendor: { softwareProductList }
+        } = this.props;
+        const hasVSP = Boolean(softwareProductList.length);
+        onVSPButtonClick(hasVSP);
+    }
 }
 
 export default VendorItem;