openecomp-ui/src/sdc-app/onboarding/onboard/DetailsCatalogView.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 import isEqual from 'lodash/isEqual.js';
  17 import React from 'react';
  18 import PropTypes from 'prop-types';
  19 import { catalogItemTypes } from './onboardingCatalog/OnboardingCatalogConstants.js';
  20 import { filterCatalogItemsByType } from './onboardingCatalog/OnboardingCatalogUtils.js';
  21 import CatalogList from './CatalogList.jsx';
  22 import CatalogItemDetails from './CatalogItemDetails.jsx';
  23
  24 function renderCatalogItems({
  25     items,
  26     type,
  27     filter,
  28     onSelect,
  29     onMigrate,
  30     users,
  31     activeTabName
  32 }) {
  33     const filteredValue = filter[activeTabName];
  34     const filteredItems = items.length
  35         ? filterCatalogItemsByType({ items, filter: filteredValue })
  36         : [];
  37     return filteredItems.map(item => (
  38         <CatalogItemDetails
  39             key={item.id}
  40             catalogItemData={item}
  41             catalogItemTypeClass={type}
  42             onMigrate={onMigrate}
  43             onSelect={() => onSelect(item, users)}
  44         />
  45     ));
  46 }
  47
  48 class DetailsCatalogView extends React.Component {
  49     static propTypes = {
  50         VLMList: PropTypes.array,
  51         VSPList: PropTypes.array,
  52         onSelectVLM: PropTypes.func.isRequired,
  53         onSelectVSP: PropTypes.func.isRequired,
  54         onAddVLM: PropTypes.func,
  55         onAddVSP: PropTypes.func,
  56         filter: PropTypes.object.isRequired,
  57         activeTabName: PropTypes.string
  58     };
  59
  60     shouldComponentUpdate(nextProps) {
  61         const shouldUpdate =
  62             isEqual(nextProps.VLMList, this.props.VLMList) &&
  63             isEqual(nextProps.VSPList, this.props.VSPList) &&
  64             isEqual(nextProps.users, this.props.users) &&
  65             isEqual(nextProps.filter, this.props.filter);
  66         return !shouldUpdate;
  67     }
  68     render() {
  69         let {
  70             VLMList,
  71             VSPList,
  72             users,
  73             onAddVSP,
  74             onAddVLM,
  75             onSelectVLM,
  76             onSelectVSP,
  77             filter,
  78             onMigrate,
  79             activeTabName
  80         } = this.props;
  81         return (
  82             <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}>
  83                 {renderCatalogItems({
  84                     items: VLMList,
  85                     type: catalogItemTypes.LICENSE_MODEL,
  86                     filter,
  87                     onSelect: onSelectVLM,
  88                     onMigrate,
  89                     users,
  90                     activeTabName
  91                 })}
  92                 {renderCatalogItems({
  93                     items: VSPList,
  94                     type: catalogItemTypes.SOFTWARE_PRODUCT,
  95                     filter,
  96                     onSelect: onSelectVSP,
  97                     onMigrate,
  98                     users,
  99                     activeTabName
 100                 })}
 101             </CatalogList>
 102         );
 103     }
 104 }
 105 export default DetailsCatalogView;