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