openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.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 or implied.
  13  * See the License for the specific language governing permissions and
  14  * 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 { migrationStatusMapper } from './OnboardingCatalogConstants.js';
  20
  21 const VspOverlayItem = ({ vsp, onClick }) => {
  22     const handleClick = () => onClick(vsp);
  23     return (
  24         <div key={vsp.id} className="vsp-overlay-detail" onClick={handleClick}>
  25             {i18n(vsp.name)}
  26         </div>
  27     );
  28 };
  29
  30 VspOverlayItem.propTypes = {
  31     vsp: PropTypes.object,
  32     onClick: PropTypes.func
  33 };
  34
  35 const VSPOverlay = ({ VSPList, onSelectVSP, onSeeMore, onMigrate }) => {
  36     const handleSelect = vsp => {
  37         if (
  38             vsp.isOldVersion &&
  39             vsp.isOldVersion === migrationStatusMapper.OLD_VERSION
  40         ) {
  41             onMigrate({
  42                 softwareProduct: vsp
  43             });
  44         } else {
  45             onSelectVSP(vsp);
  46         }
  47     };
  48     return (
  49         <div
  50             className="vsp-overlay-wrapper"
  51             onClick={e => {
  52                 e.stopPropagation();
  53                 e.preventDefault();
  54             }}>
  55             <div className="vsp-overlay-arrow" />
  56             <div className="vsp-overlay">
  57                 <div className="vsp-overlay-title">
  58                     {i18n('Recently Edited')}
  59                 </div>
  60                 <div className="vsp-overlay-list">
  61                     {VSPList.slice(0, 5).map(vsp => (
  62                         <VspOverlayItem
  63                             key={vsp.id}
  64                             onClick={handleSelect}
  65                             vsp={vsp}
  66                         />
  67                     ))}
  68                 </div>
  69                 {VSPList.length > 5 && (
  70                     <div className="vsp-overlay-see-more" onClick={onSeeMore}>
  71                         {i18n('See More')}
  72                     </div>
  73                 )}
  74             </div>
  75         </div>
  76     );
  77 };
  78
  79 VSPOverlay.propTypes = {
  80     VSPList: PropTypes.array,
  81     onSelectVSP: PropTypes.func
  82 };
  83
  84 export default VSPOverlay;