ui support for archive items

Issue-ID: SDC-1088
Change-Id: I836e4896a8ec6bb065f9d2571f514916ccf6759f
Signed-off-by: svishnev <shlomo-stanisla.vishnevetskiy@amdocs.com>

9 files changed, 158 insertions, 78 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
index 03efa19533..10d855c862 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx
@@ -1,17 +1,17 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2018 European Support Limited
  *
  * 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
- *
+ * 
+ *      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.
+ * 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 i18n from 'nfvo-utils/i18n/i18n.js';
@@ -29,10 +29,12 @@ const CatalogList = ({children, onAddVLM, onAddVSP, vendorPageOptions}) => (
 	<div className='catalog-list'>
 		{vendorPageOptions && <SoftwareProductListHeader onBack={vendorPageOptions.onBack} selectedVendor={vendorPageOptions.selectedVendor}/>}
 		<div className='catalog-items'>
-			<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>
+			{ (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>
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx
index 887517238b..ea6cf5e9bc 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.jsx
@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Copyright © 2016-2018 European Support Limited
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -27,8 +27,8 @@ class DetailsCatalogView extends React.Component{
 		VSPList: PropTypes.array,
 		onSelectVLM: PropTypes.func.isRequired,
 		onSelectVSP: PropTypes.func.isRequired,
-		onAddVLM: PropTypes.func.isRequired,
-		onAddVSP: PropTypes.func.isRequired,
+		onAddVLM: PropTypes.func,
+		onAddVSP: PropTypes.func,
 		filter: PropTypes.string.isRequired
 	};
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js b/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js
index a308e1ec5e..9535147a46 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/Onboard.js
@@ -1,17 +1,17 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2018 European Support Limited
  *
  * 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
- *
+ * 
+ *      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.
+ * 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 {connect} from 'react-redux';
@@ -21,16 +21,20 @@ 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';
 
 export const mapStateToProps = ({
 	onboard: {
 		onboardingCatalog,
 		activeTab,
-		searchValue
+		searchValue,
+		filter
 	},
 	licenseModelList,
 	users,
+	archivedLicenseModelList,
+	archivedSoftwareProductList,
 	finalizedLicenseModelList,
 	softwareProductList,
 	finalizedSoftwareProductList
@@ -69,12 +73,20 @@ export const mapStateToProps = ({
 	).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,
@@ -105,7 +117,6 @@ const mapActionsToProps = (dispatch) => {
 		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/OnboardView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
index f64c1e55fa..c045a3739a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/OnboardView.jsx
@@ -60,6 +60,8 @@ class OnboardView extends React.Component {
 		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,
@@ -80,8 +82,9 @@ class OnboardView extends React.Component {
 			case tabsMapping.WORKSPACE:
 				return <WorkspaceView {...this.props} />;
 			case tabsMapping.CATALOG:
-			default:
 				return <OnboardingCatalogView {...this.props} />;
+			default:
+				return <WorkspaceView {...this.props} />;
 		}
 	}
 
@@ -93,7 +96,7 @@ class OnboardView extends React.Component {
 				<div className='catalog-parts'>
 					<OnboardHeader activeTab={activeTab} onTabClick={onTabClick} searchValue={searchValue} onSearch={value => onSearch(value)}/>
 					{this.renderViewByTab(activeTab)}
-				</div>			
+				</div>
 			</div>
 		);
 	}
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 bf1927d2c5..d8d04f242b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
@@ -22,10 +22,14 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 import Accordion from 'nfvo-components/accordion/Accordion.jsx';
 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';
 
-const mapStateToProps = ({onboard: {filter}}) => {
+const mapStateToProps = ({onboard: {filter, activeTab}}) => {
 	return {
-		data: filter
+		data: filter,
+		activeTab
 	};
 };
 
@@ -40,9 +44,27 @@ const mapActionsToProps = (dispatch) => {
 };
 
 const Filter = ({onDataChanged, data: {entityTypeVsp, entityTypeVlm, roleOwner, roleContributor, roleViewer,
-		 procedureNetwork, procedureManual, recentlyUpdated}}) => (
-    <div className='catalog-filter'>        
-        <Input label={i18n('Recently Updated')} type='checkbox' checked={recentlyUpdated}
+		 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')}>
@@ -71,4 +93,4 @@ Filter.PropTypes = {
 	data: PropTypes.object
 };
 
-export default featureToggle('ONBOARDING_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 36a415cd4f..d944cb02fb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/FilterConstants.js
@@ -19,3 +19,8 @@ import keyMirror from 'nfvo-utils/KeyMirror.js';
 export const actionTypes = keyMirror({
 	FILTER_DATA_CHANGED: null
 });
+
+export const itemsType = {
+	ACTIVE: '1',
+	ARCHIVED: '2'
+};
\ No newline at end of file
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 a1bf1b1fc8..239ae4545f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js
@@ -1,17 +1,17 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2018 European Support Limited
  *
  * 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
- *
+ * 
+ *      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.
+ * 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 keyMirror from 'nfvo-utils/KeyMirror.js';
 
@@ -28,7 +28,8 @@ export const catalogItemTypeClasses = {
 
 export const catalogItemStatuses = {
 	DRAFT: 'Draft',
-	CERTIFIED: 'Certified'
+	CERTIFIED: 'Certified',
+	ARCHIVED: 'ARCHIVED'
 };
 
 export const modalMapper = {
@@ -38,7 +39,8 @@ export const modalMapper = {
 
 export const tabsMapping = {
 	'BY_VENDOR': 1,
-	'ALL': 2
+	'ACTIVE': 2,
+	'ARCHIVE': 3
 };
 
 export const migrationStatusMapper = {
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 d7d9d0bd6c..3f8a833074 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js
@@ -1,17 +1,17 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2018 European Support Limited
  *
  * 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
- *
+ * 
+ *      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.
+ * 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 {actionTypes, tabsMapping} from './OnboardingCatalogConstants.js';
 import {combineReducers} from 'redux';
@@ -19,7 +19,7 @@ import vendorCatalogReducer from './VendorCatalogReducer.js';
 
 const onboardingCatalogReducer = combineReducers({
 	vendorCatalog: vendorCatalogReducer,
-	activeTab: (state = tabsMapping.ALL, action) => action.type === actionTypes.CHANGE_ACTIVE_CATALOG_TAB ? action.activeTab : state
+	activeTab: (state = tabsMapping.ACTIVE, action) => action.type === actionTypes.CHANGE_ACTIVE_CATALOG_TAB ? action.activeTab : state
 });
 
 export default (state, action) => {
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 60a5aaeef0..8ae8549688 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx
@@ -1,17 +1,17 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2018 European Support Limited
  *
  * 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
- *
+ * 
+ *      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.
+ * 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 i18n from 'nfvo-utils/i18n/i18n.js';
@@ -20,22 +20,32 @@ import DetailsCatalogView from 'sdc-app/onboarding/onboard/DetailsCatalogView.js
 import VendorCatalogView from './VendorCatalogView.jsx';
 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';
+
+const Separator = () => (
+	<div className='tab-separator'/>
+);
 
-const CatalogHeaderTabs = ({onTabPress, activeTab}) => (
+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 CatalogHeaderTabs = (props) => (
 	<div className='catalog-header-tabs'>
-		<div
-			className={classnames('catalog-header-tab', {'active': activeTab === tabsMapping.ALL })}
-			onClick={() => onTabPress(tabsMapping.ALL)}
-			data-test-id='catalog-all-tab'>
-			{i18n('ALL')}
-		</div>
-		<div className='tab-separator'/>
-		<div
-			className={classnames('catalog-header-tab', {'active': activeTab === tabsMapping.BY_VENDOR })}
-			onClick={() => onTabPress(tabsMapping.BY_VENDOR)}
-			data-test-id='catalog-by-vendor-tab'>
-			{i18n('BY VENDOR')}
-		</div>
+		<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>
 );
 
@@ -45,13 +55,38 @@ const CatalogHeader = ({activeTab, 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>
+);
+
+
+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} = this.props;
+				onAddLicenseModelClick, onAddSoftwareProductClick, onVspOverlayChange, onVendorSelect, selectedVendor, searchValue, onMigrate,
+				archivedSoftwareProductList, archivedLicenseModelList} = this.props;
 
 		switch (activeTab){
-			case tabsMapping.ALL:
+			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}
@@ -88,7 +123,7 @@ class OnboardingCatalogView extends React.Component {
 		const {selectedVendor, catalogActiveTab: activeTab, onCatalogTabClick, onSearch, searchValue} = this.props;
 		return (
 			<div className='catalog-wrapper'>
-				{!selectedVendor && <CatalogHeader
+				{!selectedVendor && <FeaturedCatalogHeader
 					onSearch={event => onSearch(event.target.value)}
 					activeTab={activeTab}
 					onTabPress={tab => onCatalogTabClick(tab)}