Adding Prettier and fixing up eslint version

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

24 files changed, 1335 insertions, 874 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
index 345c91e01b..7f361d2742 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
@@ -16,71 +16,96 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {catalogItemTypes, migrationStatusMapper} from './onboardingCatalog/OnboardingCatalogConstants.js';
-import {Tile, TileInfo, TileInfoLine, TileFooter, TileFooterCell} from 'sdc-ui/lib/react';
-import {TooltipWrapper} from './onboardingCatalog/Tooltip.jsx';
+import {
+    catalogItemTypes,
+    migrationStatusMapper
+} from './onboardingCatalog/OnboardingCatalogConstants.js';
+import {
+    Tile,
+    TileInfo,
+    TileInfoLine,
+    TileFooter,
+    TileFooterCell
+} 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'
-	}
+    [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}) => {
+const CatalogItemDetails = ({
+    catalogItemData,
+    catalogItemTypeClass,
+    onSelect,
+    onMigrate
+}) => {
+    let { vendorName, name, owner } = catalogItemData;
+    let { headerText, color, contentIconName } = ITEM_TYPE_MAP[
+        catalogItemTypeClass
+    ];
 
-	let {vendorName, name, owner} = 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 (
-		<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>
-				<TileFooter>
-				{owner &&
-					<TileFooterCell>Owner - {owner}</TileFooterCell>
-				}
-				</TileFooter>
-		</Tile>
-	);
+    let onClick = e => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (
+            catalogItemData.isOldVersion &&
+            catalogItemData.isOldVersion === migrationStatusMapper.OLD_VERSION
+        ) {
+            onMigrate({ softwareProduct: catalogItemData });
+        } else {
+            onSelect();
+        }
+    };
 
+    return (
+        <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>
+            <TileFooter>
+                {owner && <TileFooterCell>Owner - {owner}</TileFooterCell>}
+            </TileFooter>
+        </Tile>
+    );
 };
 
 CatalogItemDetails.PropTypes = {
-	catalogItemData: PropTypes.obj,
-	catalogItemTypeClass: PropTypes.string,
-	onSelect: PropTypes.func,
-	onMigrate: PropTypes.func
+    catalogItemData: PropTypes.obj,
+    catalogItemTypeClass: PropTypes.string,
+    onSelect: PropTypes.func,
+    onMigrate: PropTypes.func
 };
 
 export default CatalogItemDetails;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js
index 156adfc5e7..d01b9d0d04 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.stories.js
@@ -1,33 +1,48 @@
 import React from 'react';
-import {storiesOf, action} from '@kadira/storybook';
-import {select, withKnobs} from '@kadira/storybook-addon-knobs';
+import { storiesOf, action } from '@kadira/storybook';
+import { select, withKnobs } from '@kadira/storybook-addon-knobs';
 import CatalogItemDetails from './CatalogItemDetails.jsx';
-import {catalogItemTypes, catalogItemStatuses} from './onboardingCatalog/OnboardingCatalogConstants.js';
-import {FinalizedLicenseModelFactory} from 'test-utils/factories/licenseModel/LicenseModelFactories.js';
+import {
+    catalogItemTypes,
+    catalogItemStatuses
+} from './onboardingCatalog/OnboardingCatalogConstants.js';
+import { FinalizedLicenseModelFactory } from 'test-utils/factories/licenseModel/LicenseModelFactories.js';
 
 const stories = storiesOf('CatalogTiles', module);
 stories.addDecorator(withKnobs);
 
 const types = [
-	catalogItemTypes.LICENSE_MODEL,
-	catalogItemTypes.SOFTWARE_PRODUCT
+    catalogItemTypes.LICENSE_MODEL,
+    catalogItemTypes.SOFTWARE_PRODUCT
 ];
 
 function selectType() {
-	return select('Item type' , types, types[0]);
+    return select('Item type', types, types[0]);
 }
 
-let vlm = {...FinalizedLicenseModelFactory.build({name: 'Test-VLM'}), itemStatus: catalogItemStatuses.DRAFT};
-let certifiedVlm = {...vlm, itemStatus: catalogItemStatuses.CERTIFIED};
+let vlm = {
+    ...FinalizedLicenseModelFactory.build({ name: 'Test-VLM' }),
+    itemStatus: catalogItemStatuses.DRAFT
+};
+let certifiedVlm = { ...vlm, itemStatus: catalogItemStatuses.CERTIFIED };
 
-stories
-	.add('preview', () => (
-		<div className='catalog-view'>
-			<div className='catalog-list'>
-				<div className='catalog-items'>
-					<CatalogItemDetails catalogItemData={vlm} catalogItemTypeClass={selectType()} onSelect={action('onSelect')} onMigrate={action('onMigrate')}/>
-					<CatalogItemDetails catalogItemData={certifiedVlm} catalogItemTypeClass={selectType()} onSelect={action('onSelect')} onMigrate={action('onMigrate')}/>
-				</div>
-			</div>
-		</div>
-	));
+stories.add('preview', () => (
+    <div className="catalog-view">
+        <div className="catalog-list">
+            <div className="catalog-items">
+                <CatalogItemDetails
+                    catalogItemData={vlm}
+                    catalogItemTypeClass={selectType()}
+                    onSelect={action('onSelect')}
+                    onMigrate={action('onMigrate')}
+                />
+                <CatalogItemDetails
+                    catalogItemData={certifiedVlm}
+                    catalogItemTypeClass={selectType()}
+                    onSelect={action('onSelect')}
+                    onMigrate={action('onMigrate')}
+                />
+            </div>
+        </div>
+    </div>
+));
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
index 10d855c862..b00ceeb48f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
@@ -17,37 +17,61 @@ import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 
-const SoftwareProductListHeader = ({selectedVendor, onBack}) => (
-	<div className='vendor-page-header'>
-		<SVGIcon name='back' onClick={onBack}/>
-		<div className='tab-separator' />
-		<div className='vendor-name'>{selectedVendor.name}</div>
-	</div>
+const SoftwareProductListHeader = ({ selectedVendor, onBack }) => (
+    <div className="vendor-page-header">
+        <SVGIcon name="back" onClick={onBack} />
+        <div className="tab-separator" />
+        <div className="vendor-name">{selectedVendor.name}</div>
+    </div>
 );
 
-const CatalogList = ({children, onAddVLM, onAddVSP, vendorPageOptions}) => (
-	<div className='catalog-list'>
-		{vendorPageOptions && <SoftwareProductListHeader onBack={vendorPageOptions.onBack} selectedVendor={vendorPageOptions.selectedVendor}/>}
-		<div className='catalog-items'>
-			{ (onAddVLM || onAddVSP) &&
-				<div className='create-catalog-item-wrapper'>
-					{onAddVLM && <CreateItemTile onClick={onAddVLM} dataTestId={'catalog-add-new-vlm'} className='vlm-type' title={i18n('CREATE NEW VLM')}/>}
-					{onAddVSP && <CreateItemTile onClick={() => onAddVSP()} dataTestId={'catalog-add-new-vsp'} className='vsp-type' title={i18n('CREATE NEW VSP')}/>}
-				</div>
-			}
-			{children}
-		</div>
-	</div>
+const CatalogList = ({ children, onAddVLM, onAddVSP, vendorPageOptions }) => (
+    <div className="catalog-list">
+        {vendorPageOptions && (
+            <SoftwareProductListHeader
+                onBack={vendorPageOptions.onBack}
+                selectedVendor={vendorPageOptions.selectedVendor}
+            />
+        )}
+        <div className="catalog-items">
+            {(onAddVLM || onAddVSP) && (
+                <div className="create-catalog-item-wrapper">
+                    {onAddVLM && (
+                        <CreateItemTile
+                            onClick={onAddVLM}
+                            dataTestId={'catalog-add-new-vlm'}
+                            className="vlm-type"
+                            title={i18n('CREATE NEW VLM')}
+                        />
+                    )}
+                    {onAddVSP && (
+                        <CreateItemTile
+                            onClick={() => onAddVSP()}
+                            dataTestId={'catalog-add-new-vsp'}
+                            className="vsp-type"
+                            title={i18n('CREATE NEW VSP')}
+                        />
+                    )}
+                </div>
+            )}
+            {children}
+        </div>
+    </div>
 );
 
-const CreateItemTile = ({onClick, dataTestId, title, className = ''}) => {
-	//TODO check for buttons
-	return (
-			<div className={`create-catalog-item tile ${className}`} onClick={onClick} data-test-id={dataTestId}>
-				<div className='create-item-plus-icon'><SVGIcon name='plus' /></div>
-				<div className='create-item-text'>{title}</div>
-			</div>
-	);
+const CreateItemTile = ({ onClick, dataTestId, title, className = '' }) => {
+    //TODO check for buttons
+    return (
+        <div
+            className={`create-catalog-item tile ${className}`}
+            onClick={onClick}
+            data-test-id={dataTestId}>
+            <div className="create-item-plus-icon">
+                <SVGIcon name="plus" />
+            </div>
+            <div className="create-item-text">{title}</div>
+        </div>
+    );
 };
 
 export default CatalogList;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx
index 1ef9c82822..90496c9be4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx
@@ -14,49 +14,52 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
-import {modalMapper, catalogItemTypes, catalogItemTypeClasses } from './onboardingCatalog/OnboardingCatalogConstants.js';
+import {
+    modalMapper,
+    catalogItemTypes,
+    catalogItemTypeClasses
+} from './onboardingCatalog/OnboardingCatalogConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Modal from 'nfvo-components/modal/Modal.jsx';
 import LicenseModelCreation from '../licenseModel/creation/LicenseModelCreation.js';
 import SoftwareProductCreation from '../softwareProduct/creation/SoftwareProductCreation.js';
 
-class CatalogModal extends React.Component{
+class CatalogModal extends React.Component {
+    getModalDetails() {
+        const { modalToShow } = this.props;
+        switch (modalToShow) {
+            case catalogItemTypes.LICENSE_MODEL:
+                return {
+                    title: i18n('New License Model'),
+                    element: <LicenseModelCreation />
+                };
+            case catalogItemTypes.SOFTWARE_PRODUCT:
+                return {
+                    title: i18n('New Software Product'),
+                    element: <SoftwareProductCreation />
+                };
+        }
+    }
 
-	getModalDetails(){
-		const {modalToShow} = this.props;
-		switch (modalToShow) {
-			case catalogItemTypes.LICENSE_MODEL:
-				return {
-					title: i18n('New License Model'),
-					element: <LicenseModelCreation/>
-				};
-			case catalogItemTypes.SOFTWARE_PRODUCT:
-				return {
-					title: i18n('New Software Product'),
-					element: <SoftwareProductCreation/>
-				};
-		}
-	}
+    render() {
+        const { modalToShow } = this.props;
+        const modalDetails = this.getModalDetails(modalToShow);
 
-	render(){
-		const {modalToShow} = this.props;
-		const modalDetails = this.getModalDetails(modalToShow);
-
-		return (
-			<Modal
-				show={Boolean(modalDetails)}
-				className={`${catalogItemTypeClasses[modalMapper[modalToShow]]}-modal`}>
-				<Modal.Header>
-					<Modal.Title>{modalDetails && modalDetails.title}</Modal.Title>
-				</Modal.Header>
-				<Modal.Body>
-					{
-						modalDetails && modalDetails.element
-					}
-				</Modal.Body>
-			</Modal>
-		);
-	}
+        return (
+            <Modal
+                show={Boolean(modalDetails)}
+                className={`${
+                    catalogItemTypeClasses[modalMapper[modalToShow]]
+                }-modal`}>
+                <Modal.Header>
+                    <Modal.Title>
+                        {modalDetails && modalDetails.title}
+                    </Modal.Title>
+                </Modal.Header>
+                <Modal.Body>{modalDetails && modalDetails.element}</Modal.Body>
+            </Modal>
+        );
+    }
 }
 
 export default CatalogModal;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx
index ea6cf5e9bc..771c0eb6c1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx
@@ -15,42 +15,66 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import {catalogItemTypes} from './onboardingCatalog/OnboardingCatalogConstants.js';
-import {filterCatalogItemsByType} from './onboardingCatalog/OnboardingCatalogUtils.js';
+import { catalogItemTypes } from './onboardingCatalog/OnboardingCatalogConstants.js';
+import { filterCatalogItemsByType } from './onboardingCatalog/OnboardingCatalogUtils.js';
 import CatalogList from './CatalogList.jsx';
 import CatalogItemDetails from './CatalogItemDetails.jsx';
 
-class DetailsCatalogView extends React.Component{
+class DetailsCatalogView extends React.Component {
+    static propTypes = {
+        VLMList: PropTypes.array,
+        VSPList: PropTypes.array,
+        onSelectVLM: PropTypes.func.isRequired,
+        onSelectVSP: PropTypes.func.isRequired,
+        onAddVLM: PropTypes.func,
+        onAddVSP: PropTypes.func,
+        filter: PropTypes.string.isRequired
+    };
 
-	static propTypes = {
-		VLMList: PropTypes.array,
-		VSPList: PropTypes.array,
-		onSelectVLM: PropTypes.func.isRequired,
-		onSelectVSP: PropTypes.func.isRequired,
-		onAddVLM: PropTypes.func,
-		onAddVSP: PropTypes.func,
-		filter: PropTypes.string.isRequired
-	};
+    renderCatalogItems({ items, type, filter, onSelect, onMigrate, users }) {
+        return filterCatalogItemsByType({ items, filter }).map(item => (
+            <CatalogItemDetails
+                key={item.id}
+                catalogItemData={item}
+                catalogItemTypeClass={type}
+                onMigrate={onMigrate}
+                onSelect={() => onSelect(item, users)}
+            />
+        ));
+    }
 
-	renderCatalogItems({items, type, filter, onSelect, onMigrate, users}){
-		return filterCatalogItemsByType({items, filter}).map(item =>
-			<CatalogItemDetails
-				key={item.id}
-				catalogItemData={item}
-				catalogItemTypeClass={type}
-				onMigrate={onMigrate}
-				onSelect={() => onSelect(item, users)} />
-		);
-	}
-
-	render() {
-		let {VLMList, VSPList, users, onAddVSP, onAddVLM, onSelectVLM, onSelectVSP, filter = '', onMigrate} = this.props;
-		return (
-			<CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
-				{this.renderCatalogItems({items: VLMList, type: catalogItemTypes.LICENSE_MODEL, filter, onSelect: onSelectVLM, onMigrate, users})}
-				{this.renderCatalogItems({items: VSPList, type: catalogItemTypes.SOFTWARE_PRODUCT, filter, onSelect: onSelectVSP, onMigrate, users})}
-			</CatalogList>
-		);
-	}
+    render() {
+        let {
+            VLMList,
+            VSPList,
+            users,
+            onAddVSP,
+            onAddVLM,
+            onSelectVLM,
+            onSelectVSP,
+            filter = '',
+            onMigrate
+        } = this.props;
+        return (
+            <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
+                {this.renderCatalogItems({
+                    items: VLMList,
+                    type: catalogItemTypes.LICENSE_MODEL,
+                    filter,
+                    onSelect: onSelectVLM,
+                    onMigrate,
+                    users
+                })}
+                {this.renderCatalogItems({
+                    items: VSPList,
+                    type: catalogItemTypes.SOFTWARE_PRODUCT,
+                    filter,
+                    onSelect: onSelectVSP,
+                    onMigrate,
+                    users
+                })}
+            </CatalogList>
+        );
+    }
 }
 export default DetailsCatalogView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js b/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js
index 9535147a46..a1e0018114 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js
@@ -14,109 +14,121 @@
  * limitations under the License.
  */
 
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import OnboardView from './OnboardView.jsx';
 import OnboardingCatalogActionHelper from './onboardingCatalog/OnboardingCatalogActionHelper.js';
 import OnboardActionHelper from './OnboardActionHelper.js';
 import LicenseModelCreationActionHelper from '../licenseModel/creation/LicenseModelCreationActionHelper.js';
 import SoftwareProductCreationActionHelper from '../softwareProduct/creation/SoftwareProductCreationActionHelper.js';
 import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
-import {tabsMapping} from './onboardingCatalog/OnboardingCatalogConstants.js';
-import {itemsType} from './filter/FilterConstants.js';
+import { tabsMapping } from './onboardingCatalog/OnboardingCatalogConstants.js';
+import { itemsType } from './filter/FilterConstants.js';
 
 export const mapStateToProps = ({
-	onboard: {
-		onboardingCatalog,
-		activeTab,
-		searchValue,
-		filter
-	},
-	licenseModelList,
-	users,
-	archivedLicenseModelList,
-	archivedSoftwareProductList,
-	finalizedLicenseModelList,
-	softwareProductList,
-	finalizedSoftwareProductList
+    onboard: { onboardingCatalog, activeTab, searchValue, filter },
+    licenseModelList,
+    users,
+    archivedLicenseModelList,
+    archivedSoftwareProductList,
+    finalizedLicenseModelList,
+    softwareProductList,
+    finalizedSoftwareProductList
 }) => {
+    const fullSoftwareProducts = softwareProductList
+        .filter(
+            vsp =>
+                !finalizedSoftwareProductList.find(fvsp => fvsp.id === vsp.id)
+        )
+        .concat(finalizedSoftwareProductList);
 
-	const fullSoftwareProducts = softwareProductList.filter(vsp =>
-		!finalizedSoftwareProductList
-			.find(fvsp => fvsp.id === vsp.id)
-	).concat(finalizedSoftwareProductList);
+    const reduceLicenseModelList = (accum, vlm) => {
+        let currentSoftwareProductList = sortByStringProperty(
+            fullSoftwareProducts.filter(vsp => vsp.vendorId === vlm.id),
+            'name'
+        );
+        accum.push({ ...vlm, softwareProductList: currentSoftwareProductList });
+        return accum;
+    };
 
-	const reduceLicenseModelList = (accum, vlm) => {
-		let currentSoftwareProductList = sortByStringProperty(
-			fullSoftwareProducts
-				.filter(vsp => vsp.vendorId === vlm.id),
-			'name'
-		);
-		accum.push({...vlm, softwareProductList: currentSoftwareProductList});
-		return accum;
-	};
+    licenseModelList = sortByStringProperty(
+        licenseModelList.reduce(reduceLicenseModelList, []),
+        'name'
+    );
 
-	licenseModelList = sortByStringProperty(
-		licenseModelList
-			.reduce(reduceLicenseModelList, []),
-		'name'
-	);
+    finalizedLicenseModelList = sortByStringProperty(
+        finalizedLicenseModelList.reduce(reduceLicenseModelList, []),
+        'name'
+    );
 
-	finalizedLicenseModelList = sortByStringProperty(
-		finalizedLicenseModelList
-			.reduce(reduceLicenseModelList, []),
-		'name'
-	);
+    const fullLicenseModelList = licenseModelList
+        .filter(
+            vlm => !finalizedLicenseModelList.find(fvlm => fvlm.id === vlm.id)
+        )
+        .concat(finalizedLicenseModelList);
 
-	const fullLicenseModelList = licenseModelList.filter(vlm =>
-		!finalizedLicenseModelList
-			.find(fvlm => fvlm.id === vlm.id)
-	).concat(finalizedLicenseModelList);
-
-	let {activeTab: catalogActiveTab, vendorCatalog: {vspOverlay, selectedVendor}} = onboardingCatalog;
-	if (filter.byVendorView) {
-		catalogActiveTab = tabsMapping.BY_VENDOR;
-	} 
-	else if (filter.itemsType && filter.itemsType === itemsType.ARCHIVED) {
-		catalogActiveTab = tabsMapping.ARCHIVE;
-	}
-
-	return {
-		finalizedLicenseModelList,
-		finalizedSoftwareProductList,
-		licenseModelList,
-		softwareProductList,
-		archivedLicenseModelList,
-		archivedSoftwareProductList,
-		fullLicenseModelList,
-		activeTab,
-		catalogActiveTab,
-		searchValue,
-		vspOverlay,
-		selectedVendor,
-		users: users.usersList
-	};
+    let {
+        activeTab: catalogActiveTab,
+        vendorCatalog: { vspOverlay, selectedVendor }
+    } = onboardingCatalog;
+    if (filter.byVendorView) {
+        catalogActiveTab = tabsMapping.BY_VENDOR;
+    } else if (filter.itemsType && filter.itemsType === itemsType.ARCHIVED) {
+        catalogActiveTab = tabsMapping.ARCHIVE;
+    }
 
+    return {
+        finalizedLicenseModelList,
+        finalizedSoftwareProductList,
+        licenseModelList,
+        softwareProductList,
+        archivedLicenseModelList,
+        archivedSoftwareProductList,
+        fullLicenseModelList,
+        activeTab,
+        catalogActiveTab,
+        searchValue,
+        vspOverlay,
+        selectedVendor,
+        users: users.usersList
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-
-	return {
-		onSelectLicenseModel({id: licenseModelId, name}, users, tab) {
-			OnboardActionHelper.loadVLMScreen(dispatch, {id: licenseModelId, name}, users, tab);
-		},
-		onSelectSoftwareProduct(softwareProduct, users, tab) {
-			OnboardActionHelper.loadVSPScreen(dispatch, softwareProduct, users, tab);
-		},
-		onAddSoftwareProductClick: (vendorId) => SoftwareProductCreationActionHelper.open(dispatch, vendorId),
-		onAddLicenseModelClick: () => LicenseModelCreationActionHelper.open(dispatch),
-		onVspOverlayChange: (vendor) => OnboardingCatalogActionHelper.changeVspOverlay(dispatch, vendor),
-		closeVspOverlay: () => OnboardingCatalogActionHelper.closeVspOverlay(dispatch),
-		onCatalogTabClick: (tab) => OnboardingCatalogActionHelper.changeActiveTab(dispatch, tab),
-		onTabClick: (tab) => OnboardActionHelper.changeActiveTab(dispatch, tab),
-		onSearch: (searchValue) => OnboardActionHelper.changeSearchValue(dispatch, searchValue),
-		onVendorSelect: (vendor) => OnboardingCatalogActionHelper.onVendorSelect(dispatch, {vendor}),
-		onMigrate: ({softwareProduct}) => OnboardingCatalogActionHelper.onMigrate(dispatch, softwareProduct)
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onSelectLicenseModel({ id: licenseModelId, name }, users, tab) {
+            OnboardActionHelper.loadVLMScreen(
+                dispatch,
+                { id: licenseModelId, name },
+                users,
+                tab
+            );
+        },
+        onSelectSoftwareProduct(softwareProduct, users, tab) {
+            OnboardActionHelper.loadVSPScreen(
+                dispatch,
+                softwareProduct,
+                users,
+                tab
+            );
+        },
+        onAddSoftwareProductClick: vendorId =>
+            SoftwareProductCreationActionHelper.open(dispatch, vendorId),
+        onAddLicenseModelClick: () =>
+            LicenseModelCreationActionHelper.open(dispatch),
+        onVspOverlayChange: vendor =>
+            OnboardingCatalogActionHelper.changeVspOverlay(dispatch, vendor),
+        closeVspOverlay: () =>
+            OnboardingCatalogActionHelper.closeVspOverlay(dispatch),
+        onCatalogTabClick: tab =>
+            OnboardingCatalogActionHelper.changeActiveTab(dispatch, tab),
+        onTabClick: tab => OnboardActionHelper.changeActiveTab(dispatch, tab),
+        onSearch: searchValue =>
+            OnboardActionHelper.changeSearchValue(dispatch, searchValue),
+        onVendorSelect: vendor =>
+            OnboardingCatalogActionHelper.onVendorSelect(dispatch, { vendor }),
+        onMigrate: ({ softwareProduct }) =>
+            OnboardingCatalogActionHelper.onMigrate(dispatch, softwareProduct)
+    };
 };
 
 export default connect(mapStateToProps, mapActionsToProps)(OnboardView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js
index 892056855f..87ec2d148e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardActionHelper.js
@@ -13,97 +13,146 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {tabsMapping, actionTypes} from './OnboardConstants.js';
+import { tabsMapping, actionTypes } from './OnboardConstants.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
-import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
 import VersionsPageActionHelper from 'sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js';
-import {catalogItemStatuses} from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
-import {itemTypes} from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
+import { catalogItemStatuses } from 'sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js';
+import { itemTypes } from 'sdc-app/onboarding/versionsPage/VersionsPageConstants.js';
 import PermissionsActionHelper from 'sdc-app/onboarding/permissions/PermissionsActionHelper.js';
 
 const OnboardActionHelper = {
-	resetOnboardStore(dispatch) {
-		dispatch({
-			type: actionTypes.RESET_ONBOARD_STORE
-		});
-	},
-	changeActiveTab(dispatch, activeTab) {
-		this.clearSearchValue(dispatch);
-		dispatch({
-			type: actionTypes.CHANGE_ACTIVE_ONBOARD_TAB,
-			activeTab
-		});
-	},
-	changeSearchValue(dispatch, searchValue) {
-		dispatch({
-			type: actionTypes.CHANGE_SEARCH_VALUE,
-			searchValue
-		});
-	},
-	clearSearchValue(dispatch) {
-		dispatch({
-			type: actionTypes.CHANGE_SEARCH_VALUE,
-			searchValue: ''
-		});
-	},
+    resetOnboardStore(dispatch) {
+        dispatch({
+            type: actionTypes.RESET_ONBOARD_STORE
+        });
+    },
+    changeActiveTab(dispatch, activeTab) {
+        this.clearSearchValue(dispatch);
+        dispatch({
+            type: actionTypes.CHANGE_ACTIVE_ONBOARD_TAB,
+            activeTab
+        });
+    },
+    changeSearchValue(dispatch, searchValue) {
+        dispatch({
+            type: actionTypes.CHANGE_SEARCH_VALUE,
+            searchValue
+        });
+    },
+    clearSearchValue(dispatch) {
+        dispatch({
+            type: actionTypes.CHANGE_SEARCH_VALUE,
+            searchValue: ''
+        });
+    },
 
-	loadVLMScreen(dispatch, {id: licenseModelId, name}, users, tab) {
-		if (tab === tabsMapping.WORKSPACE) {
-			VersionsPageActionHelper.fetchVersions(dispatch, {itemId: licenseModelId, itemType: itemTypes.LICENSE_MODEL}).then(({results})=> {
-				results = results.filter((version) => version.status === catalogItemStatuses.DRAFT);
-				if (results.length !== 1) {
-					ScreensHelper.loadScreen(dispatch, {
-						screen: enums.SCREEN.VERSIONS_PAGE, screenType: screenTypes.LICENSE_MODEL,
-						props: {licenseModelId, licenseModel: {name}, usersList: users}
-					});
-				}
-				else {
-					PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: licenseModelId, allUsers: users}).then(() =>
-						ScreensHelper.loadLandingScreen(dispatch, {screenType: screenTypes.LICENSE_MODEL, props: {licenseModelId, version: results[0]}})
-					);
-				}
-			});
-		}
-		if (tab === tabsMapping.CATALOG) {
-			ScreensHelper.loadScreen(dispatch, {
-				screen: enums.SCREEN.VERSIONS_PAGE, screenType: screenTypes.LICENSE_MODEL,
-				props: {licenseModelId, licenseModel: {name}, usersList: users}
-			});
-		}
-	},
-	loadVSPScreen(dispatch, softwareProduct, users, tab) {
-		let {id: softwareProductId, vendorId: licenseModelId, licensingVersion, name} = softwareProduct;
-		if (tab === tabsMapping.WORKSPACE) {
-			VersionsPageActionHelper.fetchVersions(dispatch,{itemId: softwareProductId, itemType: itemTypes.SOFTWARE_PRODUCT}).then(({results})=> {
-				results = results.filter((version) => version.status === catalogItemStatuses.DRAFT);
-				if (results.length !== 1) {
-					ScreensHelper.loadScreen(dispatch, {
-						screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
-						props: {
-							softwareProductId,
-							softwareProduct: {name, vendorId: licenseModelId, licensingVersion},
-							usersList: users
-						}
-					});
-				}
-				else {
-					PermissionsActionHelper.fetchItemUsers(dispatch, {itemId: softwareProductId, allUsers: users}).then(() =>
-						ScreensHelper.loadLandingScreen(dispatch, {screenType: screenTypes.SOFTWARE_PRODUCT, props: {softwareProductId, licenseModelId, version: results[0]}})
-					);
-				}
-			});
-		}
-		if (tab === tabsMapping.CATALOG) {
-			ScreensHelper.loadScreen(dispatch, {
-				screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE, screenType: screenTypes.SOFTWARE_PRODUCT,
-				props: {
-					softwareProductId,
-					softwareProduct: {name, vendorId: licenseModelId, licensingVersion},
-					usersList: users
-				}
-			});
-		}
-	}
+    loadVLMScreen(dispatch, { id: licenseModelId, name }, users, tab) {
+        if (tab === tabsMapping.WORKSPACE) {
+            VersionsPageActionHelper.fetchVersions(dispatch, {
+                itemId: licenseModelId,
+                itemType: itemTypes.LICENSE_MODEL
+            }).then(({ results }) => {
+                results = results.filter(
+                    version => version.status === catalogItemStatuses.DRAFT
+                );
+                if (results.length !== 1) {
+                    ScreensHelper.loadScreen(dispatch, {
+                        screen: enums.SCREEN.VERSIONS_PAGE,
+                        screenType: screenTypes.LICENSE_MODEL,
+                        props: {
+                            licenseModelId,
+                            licenseModel: { name },
+                            usersList: users
+                        }
+                    });
+                } else {
+                    PermissionsActionHelper.fetchItemUsers(dispatch, {
+                        itemId: licenseModelId,
+                        allUsers: users
+                    }).then(() =>
+                        ScreensHelper.loadLandingScreen(dispatch, {
+                            screenType: screenTypes.LICENSE_MODEL,
+                            props: { licenseModelId, version: results[0] }
+                        })
+                    );
+                }
+            });
+        }
+        if (tab === tabsMapping.CATALOG) {
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.VERSIONS_PAGE,
+                screenType: screenTypes.LICENSE_MODEL,
+                props: {
+                    licenseModelId,
+                    licenseModel: { name },
+                    usersList: users
+                }
+            });
+        }
+    },
+    loadVSPScreen(dispatch, softwareProduct, users, tab) {
+        let {
+            id: softwareProductId,
+            vendorId: licenseModelId,
+            licensingVersion,
+            name
+        } = softwareProduct;
+        if (tab === tabsMapping.WORKSPACE) {
+            VersionsPageActionHelper.fetchVersions(dispatch, {
+                itemId: softwareProductId,
+                itemType: itemTypes.SOFTWARE_PRODUCT
+            }).then(({ results }) => {
+                results = results.filter(
+                    version => version.status === catalogItemStatuses.DRAFT
+                );
+                if (results.length !== 1) {
+                    ScreensHelper.loadScreen(dispatch, {
+                        screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE,
+                        screenType: screenTypes.SOFTWARE_PRODUCT,
+                        props: {
+                            softwareProductId,
+                            softwareProduct: {
+                                name,
+                                vendorId: licenseModelId,
+                                licensingVersion
+                            },
+                            usersList: users
+                        }
+                    });
+                } else {
+                    PermissionsActionHelper.fetchItemUsers(dispatch, {
+                        itemId: softwareProductId,
+                        allUsers: users
+                    }).then(() =>
+                        ScreensHelper.loadLandingScreen(dispatch, {
+                            screenType: screenTypes.SOFTWARE_PRODUCT,
+                            props: {
+                                softwareProductId,
+                                licenseModelId,
+                                version: results[0]
+                            }
+                        })
+                    );
+                }
+            });
+        }
+        if (tab === tabsMapping.CATALOG) {
+            ScreensHelper.loadScreen(dispatch, {
+                screen: enums.SCREEN.SOFTWARE_PRODUCT_VERSIONS_PAGE,
+                screenType: screenTypes.SOFTWARE_PRODUCT,
+                props: {
+                    softwareProductId,
+                    softwareProduct: {
+                        name,
+                        vendorId: licenseModelId,
+                        licensingVersion
+                    },
+                    usersList: users
+                }
+            });
+        }
+    }
 };
 
 export default OnboardActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js
index 41128bfb11..6fbf265afb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardConstants.js
@@ -16,13 +16,13 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const tabsMapping = {
-	'WORKSPACE': 1,
-	'CATALOG': 2
+    WORKSPACE: 1,
+    CATALOG: 2
 };
 
 export const actionTypes = keyMirror({
-	CHANGE_ACTIVE_ONBOARD_TAB: null,
-	CHANGE_SEARCH_VALUE: null,
-	RESET_ONBOARD_STORE: null,
-	VSP_MIGRATION: null
+    CHANGE_ACTIVE_ONBOARD_TAB: null,
+    CHANGE_SEARCH_VALUE: null,
+    RESET_ONBOARD_STORE: null,
+    VSP_MIGRATION: null
 });
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js
index b2e7b0479b..39ceb31b34 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardReducer.js
@@ -13,21 +13,27 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import {actionTypes, tabsMapping} from './OnboardConstants.js';
-import {combineReducers} from 'redux';
+import { actionTypes, tabsMapping } from './OnboardConstants.js';
+import { combineReducers } from 'redux';
 import onboardingCatalogReducer from './onboardingCatalog/OnboardingCatalogReducer.js';
 import filterReducer from './filter/FilterReducer.js';
 
 const onboardReducer = combineReducers({
-	onboardingCatalog: onboardingCatalogReducer,
-	filter: filterReducer,
-	activeTab: (state = tabsMapping.WORKSPACE, action) => action.type === actionTypes.CHANGE_ACTIVE_ONBOARD_TAB ? action.activeTab : state,
-	searchValue: (state = '', action) => action.type === actionTypes.CHANGE_SEARCH_VALUE ? action.searchValue : state
+    onboardingCatalog: onboardingCatalogReducer,
+    filter: filterReducer,
+    activeTab: (state = tabsMapping.WORKSPACE, action) =>
+        action.type === actionTypes.CHANGE_ACTIVE_ONBOARD_TAB
+            ? action.activeTab
+            : state,
+    searchValue: (state = '', action) =>
+        action.type === actionTypes.CHANGE_SEARCH_VALUE
+            ? action.searchValue
+            : state
 });
 
 export default (state, action) => {
-	if (action.type === actionTypes.RESET_ONBOARD_STORE) {
-		state = undefined;
-	}
-	return onboardReducer(state, action);
+    if (action.type === actionTypes.RESET_ONBOARD_STORE) {
+        state = undefined;
+    }
+    return onboardReducer(state, action);
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
index c045a3739a..dcaeaa787d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
@@ -17,89 +17,99 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import OnboardingCatalogView from './onboardingCatalog/OnboardingCatalogView.jsx';
 import WorkspaceView from './workspace/WorkspaceView.jsx';
-import {tabsMapping} from './OnboardConstants.js';
+import { tabsMapping } from './OnboardConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import classnames from 'classnames';
 import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx';
 import objectValues from 'lodash/values.js';
-import {catalogItemTypes} from './onboardingCatalog/OnboardingCatalogConstants.js';
+import { catalogItemTypes } from './onboardingCatalog/OnboardingCatalogConstants.js';
 import NotificationsView from 'sdc-app/onboarding/userNotifications/NotificationsView.jsx';
 import Filter from 'sdc-app/onboarding/onboard/filter/Filter.jsx';
 
-const OnboardHeaderTabs = ({onTabClick, activeTab}) => (
-	<div className='onboard-header-tabs'>
-		<div
-			className={classnames('onboard-header-tab', {'active': activeTab === tabsMapping.WORKSPACE })}
-			onClick={() => onTabClick(tabsMapping.WORKSPACE)}
-			data-test-id='onboard-workspace-tab'>
-			{i18n('WORKSPACE')}
-		</div>
-		<div
-			className={classnames('onboard-header-tab', {'active': activeTab === tabsMapping.CATALOG })}
-			onClick={() => onTabClick(tabsMapping.CATALOG)}
-			data-test-id='onboard-onboard-tab'>
-			{i18n('ONBOARD CATALOG')}
-		</div>
-	</div>
+const OnboardHeaderTabs = ({ onTabClick, activeTab }) => (
+    <div className="onboard-header-tabs">
+        <div
+            className={classnames('onboard-header-tab', {
+                active: activeTab === tabsMapping.WORKSPACE
+            })}
+            onClick={() => onTabClick(tabsMapping.WORKSPACE)}
+            data-test-id="onboard-workspace-tab">
+            {i18n('WORKSPACE')}
+        </div>
+        <div
+            className={classnames('onboard-header-tab', {
+                active: activeTab === tabsMapping.CATALOG
+            })}
+            onClick={() => onTabClick(tabsMapping.CATALOG)}
+            data-test-id="onboard-onboard-tab">
+            {i18n('ONBOARD CATALOG')}
+        </div>
+    </div>
 );
 
-const OnboardHeader = ({onSearch, activeTab, onTabClick, searchValue}) => (
-	<div className='onboard-header'>
-		<OnboardHeaderTabs activeTab={activeTab} onTabClick={onTabClick} />
-		<ExpandableInput
-			onChange={onSearch}
-			iconType='search'
-			value={searchValue}/>
-		<NotificationsView />
-	</div>
+const OnboardHeader = ({ onSearch, activeTab, onTabClick, searchValue }) => (
+    <div className="onboard-header">
+        <OnboardHeaderTabs activeTab={activeTab} onTabClick={onTabClick} />
+        <ExpandableInput
+            onChange={onSearch}
+            iconType="search"
+            value={searchValue}
+        />
+        <NotificationsView />
+    </div>
 );
 
 class OnboardView extends React.Component {
-	static propTypes = {
-		licenseModelList: PropTypes.array,
-		softwareProductList: PropTypes.array,
-		finalizedLicenseModelList: PropTypes.array,
-		finalizedSoftwareProductList: PropTypes.array,
-		archivedSoftwareProductList: PropTypes.array,
-		archivedLicenseModelList: PropTypes.array,
-		modalToShow: PropTypes.oneOf(objectValues(catalogItemTypes)),
-		onSelectLicenseModel: PropTypes.func.isRequired,
-		onSelectSoftwareProduct: PropTypes.func.isRequired,
-		onAddLicenseModelClick: PropTypes.func.isRequired,
-		onAddSoftwareProductClick: PropTypes.func.isRequired,
-		closeVspOverlay: PropTypes.func.isRequired,
-		onVspOverlayChange: PropTypes.func.isRequired,
-		onTabClick: PropTypes.func.isRequired,
-		onCatalogTabClick: PropTypes.func.isRequired,
-		onSearch: PropTypes.func.isRequired,
-		activeTab: PropTypes.number.isRequired,
-		catalogActiveTab: PropTypes.number.isRequired,
-		searchValue: PropTypes.string.isRequired,
-		onMigrate: PropTypes.func.isRequired,
-	};
-	renderViewByTab(activeTab){
-		switch (activeTab){
-			case tabsMapping.WORKSPACE:
-				return <WorkspaceView {...this.props} />;
-			case tabsMapping.CATALOG:
-				return <OnboardingCatalogView {...this.props} />;
-			default:
-				return <WorkspaceView {...this.props} />;
-		}
-	}
+    static propTypes = {
+        licenseModelList: PropTypes.array,
+        softwareProductList: PropTypes.array,
+        finalizedLicenseModelList: PropTypes.array,
+        finalizedSoftwareProductList: PropTypes.array,
+        archivedSoftwareProductList: PropTypes.array,
+        archivedLicenseModelList: PropTypes.array,
+        modalToShow: PropTypes.oneOf(objectValues(catalogItemTypes)),
+        onSelectLicenseModel: PropTypes.func.isRequired,
+        onSelectSoftwareProduct: PropTypes.func.isRequired,
+        onAddLicenseModelClick: PropTypes.func.isRequired,
+        onAddSoftwareProductClick: PropTypes.func.isRequired,
+        closeVspOverlay: PropTypes.func.isRequired,
+        onVspOverlayChange: PropTypes.func.isRequired,
+        onTabClick: PropTypes.func.isRequired,
+        onCatalogTabClick: PropTypes.func.isRequired,
+        onSearch: PropTypes.func.isRequired,
+        activeTab: PropTypes.number.isRequired,
+        catalogActiveTab: PropTypes.number.isRequired,
+        searchValue: PropTypes.string.isRequired,
+        onMigrate: PropTypes.func.isRequired
+    };
+    renderViewByTab(activeTab) {
+        switch (activeTab) {
+            case tabsMapping.WORKSPACE:
+                return <WorkspaceView {...this.props} />;
+            case tabsMapping.CATALOG:
+                return <OnboardingCatalogView {...this.props} />;
+            default:
+                return <WorkspaceView {...this.props} />;
+        }
+    }
 
-	render() {
-		let {activeTab, onTabClick, onSearch, searchValue} = this.props;
-		return (
-			<div className='catalog-view'>
-				<Filter/>
-				<div className='catalog-parts'>
-					<OnboardHeader activeTab={activeTab} onTabClick={onTabClick} searchValue={searchValue} onSearch={value => onSearch(value)}/>
-					{this.renderViewByTab(activeTab)}
-				</div>
-			</div>
-		);
-	}
+    render() {
+        let { activeTab, onTabClick, onSearch, searchValue } = this.props;
+        return (
+            <div className="catalog-view">
+                <Filter />
+                <div className="catalog-parts">
+                    <OnboardHeader
+                        activeTab={activeTab}
+                        onTabClick={onTabClick}
+                        searchValue={searchValue}
+                        onSearch={value => onSearch(value)}
+                    />
+                    {this.renderViewByTab(activeTab)}
+                </div>
+            </div>
+        );
+    }
 }
 
 export default OnboardView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
index d8d04f242b..c80232de0a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
@@ -14,83 +14,166 @@
  * limitations under the License.
  */
 
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import React from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import Accordion from 'nfvo-components/accordion/Accordion.jsx';
-import {actionTypes} from './FilterConstants.js';
+import { actionTypes } from './FilterConstants.js';
 import featureToggle from 'sdc-app/features/featureToggle.js';
-import {featureToggleNames} from 'sdc-app/features/FeaturesConstants.js';
-import {tabsMapping as onboardTabsMapping} from '../OnboardConstants.js';
-import {itemsType as itemsTypeConstants} from './FilterConstants.js';
+import { featureToggleNames } from 'sdc-app/features/FeaturesConstants.js';
+import { tabsMapping as onboardTabsMapping } from '../OnboardConstants.js';
+import { itemsType as itemsTypeConstants } from './FilterConstants.js';
 
-const mapStateToProps = ({onboard: {filter, activeTab}}) => {
-	return {
-		data: filter,
-		activeTab
-	};
+const mapStateToProps = ({ onboard: { filter, activeTab } }) => {
+    return {
+        data: filter,
+        activeTab
+    };
 };
 
-const mapActionsToProps = (dispatch) => {
-	return {
-		onDataChanged: (deltaData) => 
-			dispatch({
-				type: actionTypes.FILTER_DATA_CHANGED,
-				deltaData
-			})		
-	};
+const mapActionsToProps = dispatch => {
+    return {
+        onDataChanged: deltaData =>
+            dispatch({
+                type: actionTypes.FILTER_DATA_CHANGED,
+                deltaData
+            })
+    };
 };
 
-const Filter = ({onDataChanged, data: {entityTypeVsp, entityTypeVlm, roleOwner, roleContributor, roleViewer,
-		 procedureNetwork, procedureManual, recentlyUpdated, byVendorView, itemsType}, activeTab}) => (
-    <div className='catalog-filter'>			
-		 {activeTab === onboardTabsMapping.CATALOG && <Input
-			type='select'
-			className='catalog-filter-items-type'
-			data-test-id='catalog-filter-items-type' 
-			disabled={byVendorView}
-			value={itemsType}
-			onChange={e => onDataChanged({itemsType: e.target.value})}>
-				<option key={itemsTypeConstants.ACTIVE} value={itemsTypeConstants.ACTIVE}>Active Items</option>
-				<option key={itemsTypeConstants.ARCHIVED} value={itemsTypeConstants.ARCHIVED}>Archived Items</option>
-		</Input>}
-		{activeTab === onboardTabsMapping.CATALOG && <Input 
-			label={i18n('By Vendor View')}
-			 type='checkbox'
-			 disabled={itemsType === itemsTypeConstants.ARCHIVED} 
-			 checked={byVendorView} 
-			 onChange={byVendorView => onDataChanged({byVendorView})}
-			 data-test-id='filter-by-vendor-view' value='' />
-		}
-        <Input label={i18n('Recently Updated')} type='checkbox' checked={recentlyUpdated} 
-	onChange={recentlyUpdated => onDataChanged({recentlyUpdated})}  data-test-id='filter-recently-updated' value='' />
+const Filter = ({
+    onDataChanged,
+    data: {
+        entityTypeVsp,
+        entityTypeVlm,
+        roleOwner,
+        roleContributor,
+        roleViewer,
+        procedureNetwork,
+        procedureManual,
+        recentlyUpdated,
+        byVendorView,
+        itemsType
+    },
+    activeTab
+}) => (
+    <div className="catalog-filter">
+        {activeTab === onboardTabsMapping.CATALOG && (
+            <Input
+                type="select"
+                className="catalog-filter-items-type"
+                data-test-id="catalog-filter-items-type"
+                disabled={byVendorView}
+                value={itemsType}
+                onChange={e => onDataChanged({ itemsType: e.target.value })}>
+                <option
+                    key={itemsTypeConstants.ACTIVE}
+                    value={itemsTypeConstants.ACTIVE}>
+                    Active Items
+                </option>
+                <option
+                    key={itemsTypeConstants.ARCHIVED}
+                    value={itemsTypeConstants.ARCHIVED}>
+                    Archived Items
+                </option>
+            </Input>
+        )}
+        {activeTab === onboardTabsMapping.CATALOG && (
+            <Input
+                label={i18n('By Vendor View')}
+                type="checkbox"
+                disabled={itemsType === itemsTypeConstants.ARCHIVED}
+                checked={byVendorView}
+                onChange={byVendorView => onDataChanged({ byVendorView })}
+                data-test-id="filter-by-vendor-view"
+                value=""
+            />
+        )}
+        <Input
+            label={i18n('Recently Updated')}
+            type="checkbox"
+            checked={recentlyUpdated}
+            onChange={recentlyUpdated => onDataChanged({ recentlyUpdated })}
+            data-test-id="filter-recently-updated"
+            value=""
+        />
 
-		<Accordion title={i18n('ENTITY TYPE')}>
-			<Input label={i18n('VSP')} type='checkbox' checked={entityTypeVsp} onChange={entityTypeVsp => onDataChanged({entityTypeVsp})} data-test-id='filter-type-vsp' value='' />
-			<Input label={i18n('VLM')} type='checkbox' checked={entityTypeVlm} onChange={entityTypeVlm => onDataChanged({entityTypeVlm})} data-test-id='filter-type-vlm' value='' />			
-		</Accordion>
+        <Accordion title={i18n('ENTITY TYPE')}>
+            <Input
+                label={i18n('VSP')}
+                type="checkbox"
+                checked={entityTypeVsp}
+                onChange={entityTypeVsp => onDataChanged({ entityTypeVsp })}
+                data-test-id="filter-type-vsp"
+                value=""
+            />
+            <Input
+                label={i18n('VLM')}
+                type="checkbox"
+                checked={entityTypeVlm}
+                onChange={entityTypeVlm => onDataChanged({ entityTypeVlm })}
+                data-test-id="filter-type-vlm"
+                value=""
+            />
+        </Accordion>
 
-		<Accordion title={i18n('ROLE')}>
-			<Input label={i18n('Owner')} type='checkbox' checked={roleOwner} onChange={roleOwner => onDataChanged({roleOwner})}  data-test-id='filter-role-owner' value='' />
-			<Input label={i18n('Contributer')} type='checkbox' checked={roleContributor} 
-				onChange={roleContributor => onDataChanged({roleContributor})}  data-test-id='filter-role-contributor' value='' />
-			<Input label={i18n('Viewer')} type='checkbox' checked={roleViewer} onChange={roleViewer => onDataChanged({roleViewer})} data-test-id='filter-role-viewr' value='' />
-		</Accordion>
-		
-		<Accordion title={i18n('ONBOARDING PROCEDURE')}>
-			<Input label={i18n('Network Package')} type='checkbox' checked={procedureNetwork} 
-				onChange={procedureNetwork => onDataChanged({procedureNetwork})}  data-test-id='filter-procedure-network' value='' />
-			<Input label={i18n('Manual')} type='checkbox' checked={procedureManual} 
-				onChange={procedureManual => onDataChanged({procedureManual})} data-test-id='filter-procedure-manual' value='' />			
-		</Accordion>
+        <Accordion title={i18n('ROLE')}>
+            <Input
+                label={i18n('Owner')}
+                type="checkbox"
+                checked={roleOwner}
+                onChange={roleOwner => onDataChanged({ roleOwner })}
+                data-test-id="filter-role-owner"
+                value=""
+            />
+            <Input
+                label={i18n('Contributer')}
+                type="checkbox"
+                checked={roleContributor}
+                onChange={roleContributor => onDataChanged({ roleContributor })}
+                data-test-id="filter-role-contributor"
+                value=""
+            />
+            <Input
+                label={i18n('Viewer')}
+                type="checkbox"
+                checked={roleViewer}
+                onChange={roleViewer => onDataChanged({ roleViewer })}
+                data-test-id="filter-role-viewr"
+                value=""
+            />
+        </Accordion>
+
+        <Accordion title={i18n('ONBOARDING PROCEDURE')}>
+            <Input
+                label={i18n('Network Package')}
+                type="checkbox"
+                checked={procedureNetwork}
+                onChange={procedureNetwork =>
+                    onDataChanged({ procedureNetwork })
+                }
+                data-test-id="filter-procedure-network"
+                value=""
+            />
+            <Input
+                label={i18n('Manual')}
+                type="checkbox"
+                checked={procedureManual}
+                onChange={procedureManual => onDataChanged({ procedureManual })}
+                data-test-id="filter-procedure-manual"
+                value=""
+            />
+        </Accordion>
     </div>
 );
 
 Filter.PropTypes = {
-	onDataChanged: PropTypes.func,
-	data: PropTypes.object
+    onDataChanged: PropTypes.func,
+    data: PropTypes.object
 };
 
-export default featureToggle(featureToggleNames.FILTER)(connect(mapStateToProps, mapActionsToProps)(Filter));
+export default featureToggle(featureToggleNames.FILTER)(
+    connect(mapStateToProps, mapActionsToProps)(Filter)
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js
index d944cb02fb..edfe592877 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js
@@ -17,10 +17,10 @@
 import keyMirror from 'nfvo-utils/KeyMirror.js';
 
 export const actionTypes = keyMirror({
-	FILTER_DATA_CHANGED: null
+    FILTER_DATA_CHANGED: null
 });
 
 export const itemsType = {
-	ACTIVE: '1',
-	ARCHIVED: '2'
-};
\ No newline at end of file
+    ACTIVE: '1',
+    ARCHIVED: '2'
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js
index 963226cd38..f1e857498a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterReducer.js
@@ -13,16 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {actionTypes} from './FilterConstants.js';
+import { actionTypes } from './FilterConstants.js';
 
-export default (state = {}, action) => {	
-	switch (action.type) {
-		case actionTypes.FILTER_DATA_CHANGED:						
-			return {				
-				...state,
-				...action.deltaData
-			};			
-		default:
-			return state;
-	}   	
+export default (state = {}, action) => {
+    switch (action.type) {
+        case actionTypes.FILTER_DATA_CHANGED:
+            return {
+                ...state,
+                ...action.deltaData
+            };
+        default:
+            return state;
+    }
 };
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;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx
index a937c11d85..2f17867af1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/workspace/WorkspaceView.jsx
@@ -16,31 +16,43 @@
 import React from 'react';
 import DetailsCatalogView from '../DetailsCatalogView.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {tabsMapping} from 'sdc-app/onboarding/onboard/OnboardConstants.js';
+import { tabsMapping } from 'sdc-app/onboarding/onboard/OnboardConstants.js';
 
-const WorkspaceView = (props) => {
-	let {
-		licenseModelList, softwareProductList, onAddLicenseModelClick, users,
-		onAddSoftwareProductClick, onSelectLicenseModel, onSelectSoftwareProduct, searchValue, onMigrate
-	} = props;
+const WorkspaceView = props => {
+    let {
+        licenseModelList,
+        softwareProductList,
+        onAddLicenseModelClick,
+        users,
+        onAddSoftwareProductClick,
+        onSelectLicenseModel,
+        onSelectSoftwareProduct,
+        searchValue,
+        onMigrate
+    } = props;
 
-	return (
-		<div className='catalog-wrapper workspace-view'>
-			<div className='catalog-header workspace-header'>
-				{i18n('WORKSPACE')}
-			</div>
-			<DetailsCatalogView
-				VLMList={licenseModelList}
-				VSPList={softwareProductList}
-				users={users}
-				onAddVLM={onAddLicenseModelClick}
-				onAddVSP={onAddSoftwareProductClick}
-				onSelectVLM={(item, users) => onSelectLicenseModel(item, users, tabsMapping.WORKSPACE)}
-				onSelectVSP={(item, users) => onSelectSoftwareProduct(item, users, tabsMapping.WORKSPACE)}
-				onMigrate={onMigrate}
-				filter={searchValue} />
-		</div>
-	);
+    return (
+        <div className="catalog-wrapper workspace-view">
+            <div className="catalog-header workspace-header">
+                {i18n('WORKSPACE')}
+            </div>
+            <DetailsCatalogView
+                VLMList={licenseModelList}
+                VSPList={softwareProductList}
+                users={users}
+                onAddVLM={onAddLicenseModelClick}
+                onAddVSP={onAddSoftwareProductClick}
+                onSelectVLM={(item, users) =>
+                    onSelectLicenseModel(item, users, tabsMapping.WORKSPACE)
+                }
+                onSelectVSP={(item, users) =>
+                    onSelectSoftwareProduct(item, users, tabsMapping.WORKSPACE)
+                }
+                onMigrate={onMigrate}
+                filter={searchValue}
+            />
+        </div>
+    );
 };
 
 export default WorkspaceView;