openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.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 SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  19
  20 const SoftwareProductListHeader = ({selectedVendor, onBack}) => (
  21         <div className='vendor-page-header'>
  22                 <SVGIcon name='back' onClick={onBack}/>
  23                 <div className='tab-separator' />
  24                 <div className='vendor-name'>{selectedVendor.vendorName}</div>
  25         </div>
  26 );
  27
  28 const CatalogList = ({children, onAddVLM, onAddVSP, vendorPageOptions}) => (
  29         <div className='catalog-list'>
  30                 {vendorPageOptions && <SoftwareProductListHeader onBack={vendorPageOptions.onBack} selectedVendor={vendorPageOptions.selectedVendor}/>}
  31                 <div className='catalog-items'>
  32                         <div className='create-catalog-item-wrapper'>
  33                                 {onAddVLM && <CreateItemTile onClick={onAddVLM} dataTestId={'catalog-add-new-lm'} className='vlm-type' title={i18n('CREATE NEW VLM')}/>}
  34                                 {onAddVSP &&
  35                                 <CreateItemTile onClick={onAddVSP} dataTestId={'catalog-add-new-vsp'} className='vsp-type' title={i18n('CREATE NEW VSP')}/>}
  36                         </div>
  37                         {children}
  38                 </div>
  39         </div>
  40 );
  41
  42 const CreateItemTile = ({onClick, dataTestId, title, className = ''}) => {
  43         return (
  44                         <div className={'create-catalog-item tile ' + className} onClick={() => onClick()} data-test-id={dataTestId}>
  45                                 <div className='create-item-plus-icon'><SVGIcon name='plus' /></div>
  46                                 <div className='create-item-text'>{title}</div>
  47                         </div>
  48         );
  49 };
  50
  51 export default CatalogList;