diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog')
10 files changed, 566 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js new file mode 100644 index 0000000000..73a447558d --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js @@ -0,0 +1,85 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +import React from 'react'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import {actionTypes} from './OnboardingCatalogConstants.js'; +import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import {statusEnum} from 'nfvo-components/panel/versionController/VersionControllerConstants.js'; +import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js'; +import OnboardActionHelper from '../OnboardActionHelper.js'; +import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js'; + + +function getMessageForMigration(name) { + return ( + <div> + <div>{i18n('{name} needs to be updated. Click ‘Checkout & Update’, to proceed.',{name})}</div> + <div>{i18n('Please don’t forget to submit afterwards')}</div> + </div> + ); +} + +const OnboardingCatalogActionHelper = { + changeVspOverlay(dispatch, vendor) { + dispatch({ + type: actionTypes.CHANGE_VSP_OVERLAY, + vendorId: vendor ? vendor.id : null + }); + }, + closeVspOverlay(dispatch) { + dispatch({ + type: actionTypes.CLOSE_VSP_OVERLAY + }); + }, + changeActiveTab(dispatch, activeTab) { + OnboardActionHelper.clearSearchValue(dispatch); + dispatch({ + type: actionTypes.CHANGE_ACTIVE_CATALOG_TAB, + activeTab + }); + }, + onVendorSelect(dispatch, {vendor}) { + OnboardActionHelper.clearSearchValue(dispatch); + dispatch({ + type: actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE, + selectedVendor: vendor + }); + }, + onMigrate(dispatch, softwareProduct) { + const {status, name, lockingUser} = softwareProduct; + if (status === statusEnum.CHECK_OUT_STATUS && !VersionControllerUtils.isCheckedOutByCurrentUser(softwareProduct)) { + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + title: 'WARNING', + msg: i18n('{name} is locked by user {lockingUser} for self-healing',{name, lockingUser}) + } + }); + } else { + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data:{ + title: 'WARNING', + msg: getMessageForMigration(softwareProduct.name.toUpperCase()), + confirmationButtonText: i18n('Checkout & Update'), + onConfirmed: ()=>SoftwareProductActionHelper.migrateSoftwareProduct(dispatch, {softwareProduct}) + } + }); + } + } +}; + +export default OnboardingCatalogActionHelper; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js new file mode 100644 index 0000000000..071160c4fd --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js @@ -0,0 +1,50 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +import keyMirror from 'nfvo-utils/KeyMirror.js'; + +export const catalogItemTypes = Object.freeze({ + LICENSE_MODEL: 'license-model', + SOFTWARE_PRODUCT: 'software-product' +}); + +export const catalogItemTypeClasses = { + LICENSE_MODEL: 'license-model-type', + SOFTWARE_PRODUCT: 'software-product-type', + VENDOR: 'vendor-type' + +}; + +export const modalMapper = { + 'license-model': 'LICENSE_MODEL', + 'software-product': 'SOFTWARE_PRODUCT' +}; + +export const tabsMapping = { + 'BY_VENDOR': 1, + 'ALL': 2 +}; + +export const migrationStatusMapper = { + OLD_VERSION: 'True', +}; + +export const actionTypes = keyMirror({ + ONBOARDING_CATALOG_OPEN_VENDOR_PAGE: null, + CHANGE_ACTIVE_CATALOG_TAB: null, + CHANGE_SEARCH_VALUE: null, + CHANGE_VSP_OVERLAY: null, + CLOSE_VSP_OVERLAY: null +}); diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js new file mode 100644 index 0000000000..d7d9d0bd6c --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogReducer.js @@ -0,0 +1,30 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +import {actionTypes, tabsMapping} from './OnboardingCatalogConstants.js'; +import {combineReducers} from 'redux'; +import vendorCatalogReducer from './VendorCatalogReducer.js'; + +const onboardingCatalogReducer = combineReducers({ + vendorCatalog: vendorCatalogReducer, + activeTab: (state = tabsMapping.ALL, action) => action.type === actionTypes.CHANGE_ACTIVE_CATALOG_TAB ? action.activeTab : state +}); + +export default (state, action) => { + if (action.type === actionTypes.RESET_ONBOARDING_CATALOG_STORE) { + state = undefined; + } + return onboardingCatalogReducer(state, action); +}; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js new file mode 100644 index 0000000000..ac623db920 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js @@ -0,0 +1,21 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +import {catalogItemTypes} from './OnboardingCatalogConstants.js'; + +export const filterCatalogItemsByType = (items, type, filter) => { + const fieldName = type === catalogItemTypes.LICENSE_MODEL ? 'vendorName' : 'name'; + return items.filter(item => item[fieldName].toLowerCase().indexOf(filter.toLowerCase()) > -1); +}; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx new file mode 100644 index 0000000000..b1f002d2fb --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx @@ -0,0 +1,98 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +import React from 'react'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import classnames from 'classnames'; +import DetailsCatalogView from 'sdc-app/onboarding/onboard/DetailsCatalogView.jsx'; +import VendorCatalogView from './VendorCatalogView.jsx'; +import { tabsMapping} from './OnboardingCatalogConstants.js'; + +const CatalogHeaderTabs = ({onTabPress, activeTab}) => ( + <div className='catalog-header-tabs'> + <div + className={classnames('catalog-header-tab', {'active': activeTab === tabsMapping.ALL })} + onClick={() => onTabPress(tabsMapping.ALL)} + data-test-id='catalog-all-tab'> + {i18n('ALL')} + </div> + <div className='tab-separator'/> + <div + className={classnames('catalog-header-tab', {'active': activeTab === tabsMapping.BY_VENDOR })} + onClick={() => onTabPress(tabsMapping.BY_VENDOR)} + data-test-id='catalog-by-vendor-tab'> + {i18n('BY VENDOR')} + </div> + </div> +); + +const CatalogHeader = ({activeTab, onTabPress}) => ( + <div className='catalog-header'> + <CatalogHeaderTabs activeTab={activeTab} onTabPress={onTabPress} /> + </div> +); + +class OnboardingCatalogView extends React.Component { + renderViewByTab(activeTab){ + const {finalizedLicenseModelList: licenseModelList, vspOverlay, finalizedSoftwareProductList: softwareProductList, onSelectLicenseModel, onSelectSoftwareProduct, + onAddLicenseModelClick, onAddSoftwareProductClick, onVspOverlayChange, onVendorSelect, selectedVendor, searchValue, onMigrate} = this.props; + switch (activeTab){ + case tabsMapping.ALL: + return ( + <DetailsCatalogView + VLMList={licenseModelList} + VSPList={softwareProductList} + onAddVLM={onAddLicenseModelClick} + onAddVSP={onAddSoftwareProductClick} + onSelectVLM={onSelectLicenseModel} + onSelectVSP={onSelectSoftwareProduct} + filter={searchValue} + onMigrate={onMigrate}/> + ); + case tabsMapping.BY_VENDOR: + default: + return ( + <VendorCatalogView + licenseModelList={licenseModelList} + onAddVSP={onAddSoftwareProductClick} + onAddVLM={onAddLicenseModelClick} + onSelectVSP={onSelectSoftwareProduct} + onSelectVLM={onSelectLicenseModel} + vspOverlay={vspOverlay} + onVendorSelect={onVendorSelect} + selectedVendor={selectedVendor} + onVspOverlayChange={onVspOverlayChange} + onMigrate={onMigrate} + filter={searchValue}/> + ); + } + } + + render() { + const {selectedVendor, catalogActiveTab: activeTab, onCatalogTabClick, onSearch, searchValue} = this.props; + return ( + <div className='catalog-wrapper'> + {!selectedVendor && <CatalogHeader + onSearch={event => onSearch(event.target.value)} + activeTab={activeTab} + onTabPress={tab => onCatalogTabClick(tab)} + searchValue={searchValue}/>} + {this.renderViewByTab(activeTab)} + </div> + ); + } +} + +export default OnboardingCatalogView; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx new file mode 100644 index 0000000000..8d8d1162a0 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx @@ -0,0 +1,24 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ + +import React from 'react'; +import Tooltip from 'react-bootstrap/lib/Tooltip.js'; + +export default function tooltip (msg) { + return ( + <Tooltip className='tile-tooltip' id='tile-tooltip'>{msg}</Tooltip> + ); +}; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx new file mode 100644 index 0000000000..1ba4834fa3 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx @@ -0,0 +1,50 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +import React from 'react'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import {migrationStatusMapper} from './OnboardingCatalogConstants.js'; + +const VSPOverlay = ({VSPList, onSelectVSP, onSeeMore, onMigrate}) => ( + <div className='vsp-overlay-wrapper' onClick={(e) => { + e.stopPropagation(); + e.preventDefault(); + }}> + <div className='vsp-overlay-arrow'></div> + <div className='vsp-overlay'> + <div className='vsp-overlay-title'>{i18n('Recently Edited')}</div> + <div className='vsp-overlay-list'> + {VSPList.slice(0, 5).map(vsp => <div key={vsp.id} className='vsp-overlay-detail' onClick={() => { + if (vsp.isOldVersion && vsp.isOldVersion === migrationStatusMapper.OLD_VERSION) { + onMigrate({ + softwareProduct: vsp + }); + } else { + onSelectVSP(vsp); + } + } + }>{i18n(vsp.name)}</div>)} + </div> + {VSPList.length > 5 && <div className='vsp-overlay-see-more' onClick={onSeeMore}>{i18n('See More')}</div>} + </div> + </div> +); + +VSPOverlay.PropTypes = { + VSPList: React.PropTypes.array, + onSelectVSP: React.PropTypes.func +}; + +export default VSPOverlay; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js new file mode 100644 index 0000000000..dd8b41bd22 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogReducer.js @@ -0,0 +1,38 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +import {actionTypes} from './OnboardingCatalogConstants.js'; + +export default (state = {}, action) => { + switch(action.type) { + case actionTypes.ONBOARDING_CATALOG_OPEN_VENDOR_PAGE: + return { + ...state, + selectedVendor: action.selectedVendor + }; + case actionTypes.CHANGE_VSP_OVERLAY: + return { + ...state, + vspOverlay: action.vendorId + }; + case actionTypes.CLOSE_VSP_OVERLAY: + return { + ...state, + vspOverlay: null + }; + default: + return state; + } +}; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx new file mode 100644 index 0000000000..c4e0599d85 --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx @@ -0,0 +1,74 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +import React from 'react'; +import VendorItem from './VendorItem.jsx'; +import CatalogList from '../CatalogList.jsx'; +import CatalogItemDetails from '../CatalogItemDetails.jsx'; +import {catalogItemTypes, catalogItemTypeClasses} from './OnboardingCatalogConstants.js'; +import {filterCatalogItemsByType} from './OnboardingCatalogUtils.js'; + +const VendorList = ({onAddVLM, onAddVSP, onSelectVSP, licenseModelList = [], vspOverlay: currentOverlay, onVspOverlayChange, onVendorSelect, filter, onMigrate}) => { + return( + <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}> + { + filterCatalogItemsByType(licenseModelList, catalogItemTypes.LICENSE_MODEL, filter).map(vlm => + <VendorItem + key={vlm.id} + onAddVSP={onAddVSP} + onSelectVSP={onSelectVSP} + shouldShowOverlay={currentOverlay === vlm.id} + onVSPIconClick={(hasVSP) => onVspOverlayChange(vlm.id === currentOverlay || !hasVSP ? null : vlm)} + onVendorSelect={onVendorSelect} + onMigrate={onMigrate} + vendor={vlm}/>) + } + </CatalogList> + ); +}; + +const SoftwareProductListByVendor = ({onAddVSP, selectedVendor, onVendorSelect, onSelectVSP, onSelectVLM, filter, onMigrate}) => { + return( + <div> + <CatalogList onAddVSP={()=>{onAddVSP(selectedVendor.id);}} vendorPageOptions={{selectedVendor, onBack: () => onVendorSelect(false)}}> + <CatalogItemDetails + key={selectedVendor.id} + onSelect={() => onSelectVLM(selectedVendor)} + catalogItemTypeClass={catalogItemTypeClasses.LICENSE_MODEL} + onMigrate={onMigrate} + catalogItemData={{...selectedVendor, name: selectedVendor.vendorName}}/> + { + filterCatalogItemsByType(selectedVendor.softwareProductList, catalogItemTypes.SOFTWARE_PRODUCT, filter).map(vsp => + <CatalogItemDetails + key={vsp.id} + catalogItemTypeClass={catalogItemTypeClasses.SOFTWARE_PRODUCT} + onMigrate={onMigrate} + onSelect={() => onSelectVSP(vsp)} + catalogItemData={vsp}/> + ) + } + </CatalogList> + </div> + ); +}; + +class VendorCatalogView extends React.Component { + render() { + let {selectedVendor} = this.props; + return( selectedVendor ? <SoftwareProductListByVendor {...this.props}/> : <VendorList {...this.props}/>); + } +} + +export default VendorCatalogView; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx new file mode 100644 index 0000000000..cecccdd9ad --- /dev/null +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx @@ -0,0 +1,96 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ +import React from 'react'; +import {catalogItemTypeClasses} from './OnboardingCatalogConstants.js'; +import CatalogTile from '../CatalogTile.jsx'; +import classnames from 'classnames'; +import VSPOverlay from './VSPOverlay.jsx'; +import i18n from 'nfvo-utils/i18n/i18n.js'; +import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; +import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; +import tooltip from './Tooltip.jsx'; + + +class VendorItem extends React.Component { + + static PropTypes = { + softwareProductList: React.PropTypes.array, + vendor: React.PropTypes.object, + onSelectVSP: React.PropTypes.func, + shouldShowOverlay: React.PropTypes.boolm, + onVendorSelect: React.PropTypes.func, + onAddVSP: React.PropTypes.func, + onVSPIconClick: React.PropTypes.func, + + }; + + render() { + let {vendor, onSelectVSP, shouldShowOverlay, onVendorSelect, onMigrate} = this.props; + let {softwareProductList = [], vendorName} = vendor; + return ( + <CatalogTile + catalogItemTypeClass={catalogItemTypeClasses.VENDOR} + onSelect={() => onVendorSelect(vendor)}> + <div className='catalog-tile-top'> + <div className='catalog-tile-icon vendor-type'> + <div className='icon'><SVGIcon name='vendor'/></div> + </div> + <OverlayTrigger placement='top' overlay={tooltip(vendorName)}> + <div className='catalog-tile-item-name'>{vendorName}</div> + </OverlayTrigger> + <div + className={classnames('catalog-tile-vsp-count', {active: shouldShowOverlay}, {clickable: softwareProductList.length})} + onClick={(event) => this.handleVspCountClick(event)} + data-test-id='catalog-vsp-count'> + {i18n(`${softwareProductList.length} VSPs`)} + </div> + <div className='catalog-tile-content' onClick={(event) => this.onCreateVspClick(event)} data-test-id='catalog-create-new-vsp-from-vendor'> + <div className='create-new-vsp-button'> + <SVGIcon name='plus'/> {i18n('Create new VSP')} + </div> + </div> + </div> + + {shouldShowOverlay && softwareProductList.length > 0 + && <VSPOverlay onMigrate={onMigrate} VSPList={softwareProductList} onSelectVSP={onSelectVSP} onSeeMore={() => onVendorSelect(vendor)}/>} + </CatalogTile> + ); + } + + onClick(vlm) { + this.setState({ + licenseModelToShow: vlm + }); + } + + onCreateVspClick(event) { + let {onAddVSP, vendor: {id}} = this.props; + event.stopPropagation(); + event.preventDefault(); + onAddVSP(id); + } + + handleVspCountClick(e){ + let {onVSPIconClick, vendor: {softwareProductList}} = this.props; + e.stopPropagation(); + e.preventDefault(); + const hasVSP = Boolean(softwareProductList.length); + onVSPIconClick(hasVSP); + } + +} + +export default VendorItem; |