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     handleSeeMore = () => {
  45         const { onVendorSelect, vendor } = this.props;
  46         onVendorSelect(vendor);
  47     };
  48     render() {
  49         let { vendor, onSelectVSP, shouldShowOverlay, onMigrate } = this.props;
  50         let { softwareProductList = [], name } = vendor;
  51         return (
  52             <Tile iconName="vendor" onClick={this.handleSeeMore}>
  53                 <TileInfo align="center">
  54                     <TileInfoLine type="title">
  55                         <TooltipWrapper
  56                             className="with-overlay"
  57                             dataTestId="catalog-item-name">
  58                             {name}
  59                         </TooltipWrapper>
  60                     </TileInfoLine>
  61                     <TileInfoLine>
  62                         <Button
  63                             btnType="secondary"
  64                             className="venodor-tile-btn"
  65                             onClick={this.handleVspCountClick}
  66                             data-test-id="catalog-vsp-count"
  67                             disabled={!softwareProductList.length}>
  68                             {`${softwareProductList.length.toString()} ${i18n(
  69                                 'VSPs'
  70                             )}`}
  71                         </Button>
  72                         {shouldShowOverlay &&
  73                             softwareProductList.length > 0 && (
  74                                 <ClickOutsideWrapper
  75                                     onClose={this.handleClickOutside}>
  76                                     <VSPOverlay
  77                                         onMigrate={onMigrate}
  78                                         VSPList={softwareProductList}
  79                                         onSelectVSP={onSelectVSP}
  80                                         onSeeMore={this.handleSeeMore}
  81                                     />
  82                                 </ClickOutsideWrapper>
  83                             )}
  84                     </TileInfoLine>
  85                 </TileInfo>
  86                 <TileFooter align="center">
  87                     <TileFooterCell dataTestId="catalog-create-new-vsp-from-vendor">
  88                         <Button
  89                             btnType="link"
  90                             color="primary"
  91                             iconName="plusThin"
  92                             onClick={this.onCreateVspClick}>
  93                             {i18n('Create new VSP')}
  94                         </Button>
  95                     </TileFooterCell>
  96                 </TileFooter>
  97             </Tile>
  98         );
  99     }
 100
 101     onCreateVspClick = e => {
 102         e.stopPropagation();
 103         e.preventDefault();
 104         const { onAddVSP, vendor: { id } } = this.props;
 105         onAddVSP(id);
 106     };
 107     handleClickOutside = () => {
 108         const { onVSPButtonClick, vlm } = this.props;
 109         onVSPButtonClick(false, vlm);
 110     };
 111
 112     handleVspCountClick = e => {
 113         e.stopPropagation();
 114         e.preventDefault();
 115         const {
 116             onVSPButtonClick,
 117             vendor: { softwareProductList },
 118             vlm
 119         } = this.props;
 120         const hasVSP = Boolean(softwareProductList.length);
 121         onVSPButtonClick(hasVSP, vlm);
 122     };
 123 }
 124
 125 export default VendorItem;