1 files changed, 80 insertions, 70 deletions
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;