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

   1 /*!
   2  * Copyright © 2016-2018 European Support Limited
   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
  17 import React from 'react';
  18 import PropTypes from 'prop-types';
  19 import i18n from 'nfvo-utils/i18n/i18n.js';
  20 import ClickOutsideWrapper from 'nfvo-components/clickOutsideWrapper/ClickOutsideWrapper.jsx';
  21
  22 import {
  23     Tile,
  24     TileInfo,
  25     TileInfoLine,
  26     TileFooter,
  27     TileFooterCell,
  28     Button
  29 } from 'sdc-ui/lib/react';
  30
  31 import VSPOverlay from './VSPOverlay.jsx';
  32 import { TooltipWrapper } from './Tooltip.jsx';
  33
  34 class VendorItem extends React.Component {
  35     static PropTypes = {
  36         softwareProductList: PropTypes.array,
  37         vendor: PropTypes.object,
  38         shouldShowOverlay: PropTypes.bool,
  39         onSelectVSP: PropTypes.func,
  40         onVendorSelect: PropTypes.func,
  41         onAddVSP: PropTypes.func,
  42         onVSPButtonClick: PropTypes.func
  43     };
  44
  45     render() {
  46         let {
  47             vendor,
  48             onSelectVSP,
  49             shouldShowOverlay,
  50             onVendorSelect,
  51             onMigrate
  52         } = this.props;
  53         let { softwareProductList = [], name } = vendor;
  54         return (
  55             <Tile iconName="vendor" onClick={() => onVendorSelect(vendor)}>
  56                 <TileInfo align="center">
  57                     <TileInfoLine type="title">
  58                         <TooltipWrapper
  59                             className="with-overlay"
  60                             dataTestId="catalog-item-name">
  61                             {name}
  62                         </TooltipWrapper>
  63                     </TileInfoLine>
  64                     <TileInfoLine>
  65                         <Button
  66                             btnType="secondary"
  67                             className="venodor-tile-btn"
  68                             onClick={e => this.handleVspCountClick(e)}
  69                             data-test-id="catalog-vsp-count"
  70                             disabled={!softwareProductList.length}>
  71                             {i18n('{length} VSPs', {
  72                                 length: softwareProductList.length
  73                             })}
  74                         </Button>
  75                         {shouldShowOverlay &&
  76                             softwareProductList.length > 0 && (
  77                                 <ClickOutsideWrapper
  78                                     onClose={this.handleClickOutside}>
  79                                     <VSPOverlay
  80                                         onMigrate={onMigrate}
  81                                         VSPList={softwareProductList}
  82                                         onSelectVSP={onSelectVSP}
  83                                         onSeeMore={() => onVendorSelect(vendor)}
  84                                     />
  85                                 </ClickOutsideWrapper>
  86                             )}
  87                     </TileInfoLine>
  88                 </TileInfo>
  89                 <TileFooter align="center">
  90                     <TileFooterCell dataTestId="catalog-create-new-vsp-from-vendor">
  91                         <Button
  92                             btnType="link"
  93                             color="primary"
  94                             iconName="plusThin"
  95                             onClick={e => this.onCreateVspClick(e)}>
  96                             {i18n('Create new VSP')}
  97                         </Button>
  98                     </TileFooterCell>
  99                 </TileFooter>
 100             </Tile>
 101         );
 102     }
 103
 104     onCreateVspClick(e) {
 105         e.stopPropagation();
 106         e.preventDefault();
 107         const { onAddVSP, vendor: { id } } = this.props;
 108         onAddVSP(id);
 109     }
 110     handleClickOutside = () => {
 111         this.props.onVSPButtonClick(false);
 112     };
 113
 114     handleVspCountClick(e) {
 115         e.stopPropagation();
 116         e.preventDefault();
 117         const {
 118             onVSPButtonClick,
 119             vendor: { softwareProductList }
 120         } = this.props;
 121         const hasVSP = Boolean(softwareProductList.length);
 122         onVSPButtonClick(hasVSP);
 123     }
 124 }
 125
 126 export default VendorItem;