1 files changed, 95 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
new file mode 100644
index 0000000000..b7a7fa5f68
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
@@ -0,0 +1,95 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import React from 'react';
+import OnboardingCatalogView from './onboardingCatalog/OnboardingCatalogView.jsx';
+import WorkspaceView from './workspace/WorkspaceView.jsx';
+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';
+
+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}/>
+	</div>
+);
+
+class OnboardView extends React.Component {
+	static propTypes = {
+		licenseModelList: React.PropTypes.array,
+		softwareProductList: React.PropTypes.array,
+		finalizedLicenseModelList: React.PropTypes.array,
+		finalizedSoftwareProductList: React.PropTypes.array,
+		modalToShow: React.PropTypes.oneOf(objectValues(catalogItemTypes)),
+		onSelectLicenseModel: React.PropTypes.func.isRequired,
+		onSelectSoftwareProduct: React.PropTypes.func.isRequired,
+		onAddLicenseModelClick: React.PropTypes.func.isRequired,
+		onAddSoftwareProductClick: React.PropTypes.func.isRequired,
+		closeVspOverlay: React.PropTypes.func.isRequired,
+		onVspOverlayChange: React.PropTypes.func.isRequired,
+		onTabClick: React.PropTypes.func.isRequired,
+		onCatalogTabClick: React.PropTypes.func.isRequired,
+		onSearch: React.PropTypes.func.isRequired,
+		activeTab: React.PropTypes.number.isRequired,
+		catalogActiveTab: React.PropTypes.number.isRequired,
+		searchValue: React.PropTypes.string.isRequired,
+		onMigrate: React.PropTypes.func.isRequired,
+	};
+	renderViewByTab(activeTab){
+		switch (activeTab){
+			case tabsMapping.WORKSPACE:
+				return <WorkspaceView {...this.props} />;
+			case tabsMapping.CATALOG:
+			default:
+				return <OnboardingCatalogView {...this.props} />;
+		}
+	}
+
+	render() {
+		let {closeVspOverlay, activeTab, onTabClick, onSearch, searchValue} = this.props;
+		return (
+			<div className='catalog-view' onClick={closeVspOverlay}>
+				<OnboardHeader activeTab={activeTab} onTabClick={onTabClick} searchValue={searchValue} onSearch={value => onSearch(value)}/>
+				{this.renderViewByTab(activeTab)}
+			</div>
+		);
+	}
+}
+
+export default OnboardView;