openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.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 PropTypes from 'prop-types';
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19 import {Tile, TileInfo, TileInfoLine, TileFooter, TileFooterCell, Button} from 'sdc-ui/lib/react';
  20
  21 import VSPOverlay from './VSPOverlay.jsx';
  22 import {TooltipWrapper} from './Tooltip.jsx';
  23
  24 class VendorItem extends React.Component {
  25
  26         static PropTypes = {
  27                 softwareProductList: PropTypes.array,
  28                 vendor: PropTypes.object,
  29                 shouldShowOverlay: PropTypes.bool,
  30                 onSelectVSP: PropTypes.func,
  31                 onVendorSelect: PropTypes.func,
  32                 onAddVSP: PropTypes.func,
  33                 onVSPButtonClick: PropTypes.func
  34         };
  35
  36         render() {
  37                 let {vendor, onSelectVSP, shouldShowOverlay, onVendorSelect, onMigrate} = this.props;
  38                 let {softwareProductList = [], name} = vendor;
  39                 return (
  40                         <Tile
  41                                 iconName='vendor'
  42                                 onClick={() => onVendorSelect(vendor)}>
  43                                 <TileInfo align='center'>
  44                                         <TileInfoLine type='title'>
  45                                                 <TooltipWrapper className='with-overlay' dataTestId='catalog-item-name'>{name}</TooltipWrapper>
  46                                         </TileInfoLine>
  47                                         <TileInfoLine>
  48                                                 <Button
  49                                                         btnType='outline-rounded'
  50                                                         color='dark-gray'
  51                                                         onClick={e => this.handleVspCountClick(e)}
  52                                                         data-test-id='catalog-vsp-count'
  53                                                         disabled={!softwareProductList.length}>
  54                                                         {i18n('{length} VSPs', {length: softwareProductList.length})}
  55                                                 </Button>
  56                                                 {shouldShowOverlay && softwareProductList.length > 0 &&
  57                                                         <VSPOverlay
  58                                                                 onMigrate={onMigrate}
  59                                                                 VSPList={softwareProductList}
  60                                                                 onSelectVSP={onSelectVSP}
  61                                                                 onSeeMore={() => onVendorSelect(vendor)} />
  62                                                 }
  63                                         </TileInfoLine>
  64                                 </TileInfo>
  65                                 <TileFooter align='center'>
  66                                         <TileFooterCell dataTestId='catalog-create-new-vsp-from-vendor'>
  67                                                 <Button
  68                                                         btnType='link'
  69                                                         color='primary'
  70                                                         iconName='plusThin'
  71                                                         onClick={e => this.onCreateVspClick(e)}>
  72                                                         {i18n('Create new VSP')}
  73                                                 </Button>
  74                                         </TileFooterCell>
  75                                 </TileFooter>
  76                         </Tile>
  77                 );
  78         }
  79
  80         onCreateVspClick(e) {
  81                 e.stopPropagation();
  82                 e.preventDefault();
  83                 const {onAddVSP, vendor: {id}} = this.props;
  84                 onAddVSP(id);
  85         }
  86
  87         handleVspCountClick(e){
  88                 e.stopPropagation();
  89                 e.preventDefault();
  90                 const {onVSPButtonClick, vendor: {softwareProductList}} = this.props;
  91                 const hasVSP = Boolean(softwareProductList.length);
  92                 onVSPButtonClick(hasVSP);
  93         }
  94
  95 }
  96
  97 export default VendorItem;