ui support for archive items

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

3 files changed, 81 insertions, 44 deletions

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)}