openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import i18n from 'nfvo-utils/i18n/i18n.js';
  18 import classnames from 'classnames';
  19 import DetailsCatalogView from 'sdc-app/onboarding/onboard/DetailsCatalogView.jsx';
  20 import VendorCatalogView from './VendorCatalogView.jsx';
  21 import { tabsMapping} from './OnboardingCatalogConstants.js';
  22
  23 const CatalogHeaderTabs = ({onTabPress, activeTab}) => (
  24         <div className='catalog-header-tabs'>
  25                 <div
  26                         className={classnames('catalog-header-tab', {'active': activeTab === tabsMapping.ALL })}
  27                         onClick={() => onTabPress(tabsMapping.ALL)}
  28                         data-test-id='catalog-all-tab'>
  29                         {i18n('ALL')}
  30                 </div>
  31                 <div className='tab-separator'/>
  32                 <div
  33                         className={classnames('catalog-header-tab', {'active': activeTab === tabsMapping.BY_VENDOR })}
  34                         onClick={() => onTabPress(tabsMapping.BY_VENDOR)}
  35                         data-test-id='catalog-by-vendor-tab'>
  36                         {i18n('BY VENDOR')}
  37                 </div>
  38         </div>
  39 );
  40
  41 const CatalogHeader = ({activeTab, onTabPress}) => (
  42         <div className='catalog-header'>
  43                 <CatalogHeaderTabs activeTab={activeTab} onTabPress={onTabPress} />
  44         </div>
  45 );
  46
  47 class OnboardingCatalogView extends React.Component {
  48         renderViewByTab(activeTab){
  49                 const {finalizedLicenseModelList: licenseModelList, fullLicenseModelList, users, vspOverlay, finalizedSoftwareProductList: softwareProductList, onSelectLicenseModel, onSelectSoftwareProduct,
  50                                 onAddLicenseModelClick, onAddSoftwareProductClick, onVspOverlayChange, onVendorSelect, selectedVendor, searchValue, onMigrate} = this.props;
  51
  52                 switch (activeTab){
  53                         case tabsMapping.ALL:
  54                                 return (
  55                                         <DetailsCatalogView
  56                                                 VLMList={licenseModelList}
  57                                                 VSPList={softwareProductList}
  58                                                 users={users}
  59                                                 onAddVLM={onAddLicenseModelClick}
  60                                                 onAddVSP={onAddSoftwareProductClick}
  61                                                 onSelectVLM={onSelectLicenseModel}
  62                                                 onSelectVSP={onSelectSoftwareProduct}
  63                                                 filter={searchValue}
  64                                                 onMigrate={onMigrate}/>
  65                                 );
  66                         case tabsMapping.BY_VENDOR:
  67                         default:
  68                                 return (
  69                                         <VendorCatalogView
  70                                                 licenseModelList={fullLicenseModelList}
  71                                                 users={users}
  72                                                 onAddVSP={onAddSoftwareProductClick}
  73                                                 onAddVLM={onAddLicenseModelClick}
  74                                                 onSelectVSP={onSelectSoftwareProduct}
  75                                                 onSelectVLM={onSelectLicenseModel}
  76                                                 vspOverlay={vspOverlay}
  77                                                 onVendorSelect={onVendorSelect}
  78                                                 selectedVendor={selectedVendor}
  79                                                 onVspOverlayChange={onVspOverlayChange}
  80                                                 onMigrate={onMigrate}
  81                                                 filter={searchValue}/>
  82                                 );
  83                 }
  84         }
  85
  86         render() {
  87                 const {selectedVendor, catalogActiveTab: activeTab, onCatalogTabClick, onSearch, searchValue} = this.props;
  88                 return (
  89                         <div className='catalog-wrapper'>
  90                                 {!selectedVendor && <CatalogHeader
  91                                         onSearch={event => onSearch(event.target.value)}
  92                                         activeTab={activeTab}
  93                                         onTabPress={tab => onCatalogTabClick(tab)}
  94                                         searchValue={searchValue}/>}
  95                                 {this.renderViewByTab(activeTab)}
  96                         </div>
  97                 );
  98         }
  99 }
 100
 101 export default OnboardingCatalogView;