diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog')
8 files changed, 102 insertions, 90 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 index 0d1e3992ce..a85c79edd9 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogActionHelper.js @@ -17,8 +17,6 @@ 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'; @@ -26,7 +24,7 @@ import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/Soft function getMessageForMigration(name) { return ( <div> - <div>{i18n(`${name} needs to be updated. Click ‘Checkout & Update’, to proceed.`)}</div> + <div>{i18n('{name} needs to be updated. Click ‘Checkout & Update’, to proceed.', {name: name})}</div> <div>{i18n('Please don’t forget to submit afterwards')}</div> </div> ); @@ -57,28 +55,28 @@ const OnboardingCatalogActionHelper = { 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)) { + const {name, lockingUser} = softwareProduct; + if (NaN === NaN) { // TODO dispatch({ - type: modalActionTypes.GLOBAL_MODAL_WARNING, + type: modalActionTypes.GLOBAL_MODAL_WARNING, data: { title: 'WARNING', - msg: i18n(`${name} is locked by user ${lockingUser} for self-healing`) + msg: i18n('{name} is locked by user {lockingUser} for self-healing', {name: name, lockingUser: lockingUser}) } }); - } else { + } else { dispatch({ type: modalActionTypes.GLOBAL_MODAL_WARNING, data:{ title: 'WARNING', - msg: getMessageForMigration(softwareProduct.name.toUpperCase()), + msg: getMessageForMigration(softwareProduct.name.toUpperCase()), confirmationButtonText: i18n('Checkout & Update'), onConfirmed: ()=>SoftwareProductActionHelper.migrateSoftwareProduct(dispatch, {softwareProduct}) } }); - } + } } }; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js index 071160c4fd..a1bf1b1fc8 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogConstants.js @@ -24,7 +24,11 @@ export const catalogItemTypeClasses = { LICENSE_MODEL: 'license-model-type', SOFTWARE_PRODUCT: 'software-product-type', VENDOR: 'vendor-type' +}; +export const catalogItemStatuses = { + DRAFT: 'Draft', + CERTIFIED: 'Certified' }; export const modalMapper = { diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js index ac623db920..78258255ec 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogUtils.js @@ -13,9 +13,7 @@ * 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); +export const filterCatalogItemsByType = ({items, filter}) => { + return items.filter(item => item.name.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 index b1f002d2fb..1004472ec3 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/OnboardingCatalogView.jsx @@ -46,14 +46,16 @@ const CatalogHeader = ({activeTab, onTabPress}) => ( class OnboardingCatalogView extends React.Component { renderViewByTab(activeTab){ - const {finalizedLicenseModelList: licenseModelList, vspOverlay, finalizedSoftwareProductList: softwareProductList, onSelectLicenseModel, onSelectSoftwareProduct, + const {finalizedLicenseModelList: licenseModelList, fullLicenseModelList, users, 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} + users={users} onAddVLM={onAddLicenseModelClick} onAddVSP={onAddSoftwareProductClick} onSelectVLM={onSelectLicenseModel} @@ -65,7 +67,8 @@ class OnboardingCatalogView extends React.Component { default: return ( <VendorCatalogView - licenseModelList={licenseModelList} + licenseModelList={fullLicenseModelList} + users={users} onAddVSP={onAddSoftwareProductClick} onAddVLM={onAddLicenseModelClick} onSelectVSP={onSelectSoftwareProduct} diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx index 8d8d1162a0..80d9b07ac9 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/Tooltip.jsx @@ -16,9 +16,16 @@ import React from 'react'; import Tooltip from 'react-bootstrap/lib/Tooltip.js'; +import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; -export default function tooltip (msg) { - return ( - <Tooltip className='tile-tooltip' id='tile-tooltip'>{msg}</Tooltip> - ); -}; +const tooltip = (msg, className = '') => ( + <Tooltip className={className} id={className}>{msg}</Tooltip> +); + +export const TooltipWrapper = ({placement = 'top', className = '', tooltipClassName = '', dataTestId, delayShow = 0, children}) => ( + <OverlayTrigger placement={placement} overlay={tooltip(children, tooltipClassName)} delayShow={delayShow}> + <div className={className} data-test-id={dataTestId}>{children}</div> + </OverlayTrigger> +); + +export default 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 index 1ba4834fa3..a2852e5afa 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx @@ -14,6 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; +import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; import {migrationStatusMapper} from './OnboardingCatalogConstants.js'; @@ -43,8 +44,8 @@ const VSPOverlay = ({VSPList, onSelectVSP, onSeeMore, onMigrate}) => ( ); VSPOverlay.PropTypes = { - VSPList: React.PropTypes.array, - onSelectVSP: React.PropTypes.func + VSPList: PropTypes.array, + onSelectVSP: PropTypes.func }; export default VSPOverlay; diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx index c4e0599d85..9914ea2154 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorCatalogView.jsx @@ -17,20 +17,20 @@ 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 {catalogItemTypes} from './OnboardingCatalogConstants.js'; import {filterCatalogItemsByType} from './OnboardingCatalogUtils.js'; -const VendorList = ({onAddVLM, onAddVSP, onSelectVSP, licenseModelList = [], vspOverlay: currentOverlay, onVspOverlayChange, onVendorSelect, filter, onMigrate}) => { +const VendorList = ({onAddVLM, onAddVSP, onSelectVSP, licenseModelList = [], vspOverlay: currentOverlay, onVspOverlayChange, onVendorSelect, filter, onMigrate, users}) => { return( <CatalogList onAddVLM={onAddVLM} onAddVSP={onAddVSP}> { - filterCatalogItemsByType(licenseModelList, catalogItemTypes.LICENSE_MODEL, filter).map(vlm => + filterCatalogItemsByType({items: licenseModelList, filter}).map(vlm => <VendorItem key={vlm.id} onAddVSP={onAddVSP} - onSelectVSP={onSelectVSP} + onSelectVSP={(vsp) => onSelectVSP(vsp, users)} shouldShowOverlay={currentOverlay === vlm.id} - onVSPIconClick={(hasVSP) => onVspOverlayChange(vlm.id === currentOverlay || !hasVSP ? null : vlm)} + onVSPButtonClick={(hasVSP) => onVspOverlayChange(vlm.id === currentOverlay || !hasVSP ? null : vlm)} onVendorSelect={onVendorSelect} onMigrate={onMigrate} vendor={vlm}/>) @@ -39,23 +39,23 @@ const VendorList = ({onAddVLM, onAddVSP, onSelectVSP, licenseModelList = [], vsp ); }; -const SoftwareProductListByVendor = ({onAddVSP, selectedVendor, onVendorSelect, onSelectVSP, onSelectVLM, filter, onMigrate}) => { +const SoftwareProductListByVendor = ({onAddVSP, selectedVendor, onVendorSelect, onSelectVSP, onSelectVLM, filter, onMigrate, users}) => { return( <div> <CatalogList onAddVSP={()=>{onAddVSP(selectedVendor.id);}} vendorPageOptions={{selectedVendor, onBack: () => onVendorSelect(false)}}> <CatalogItemDetails key={selectedVendor.id} - onSelect={() => onSelectVLM(selectedVendor)} - catalogItemTypeClass={catalogItemTypeClasses.LICENSE_MODEL} + onSelect={() => onSelectVLM(selectedVendor, users)} + catalogItemTypeClass={catalogItemTypes.LICENSE_MODEL} onMigrate={onMigrate} - catalogItemData={{...selectedVendor, name: selectedVendor.vendorName}}/> + catalogItemData={selectedVendor}/> { - filterCatalogItemsByType(selectedVendor.softwareProductList, catalogItemTypes.SOFTWARE_PRODUCT, filter).map(vsp => + filterCatalogItemsByType({items: selectedVendor.softwareProductList, filter}).map(vsp => <CatalogItemDetails key={vsp.id} - catalogItemTypeClass={catalogItemTypeClasses.SOFTWARE_PRODUCT} + catalogItemTypeClass={catalogItemTypes.SOFTWARE_PRODUCT} onMigrate={onMigrate} - onSelect={() => onSelectVSP(vsp)} + onSelect={() => onSelectVSP(vsp, users)} catalogItemData={vsp}/> ) } diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx index d3d6f9ce37..158282cc48 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx @@ -14,81 +14,82 @@ * 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 PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; -import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; -import tooltip from './Tooltip.jsx'; +import {Tile, TileInfo, TileInfoLine, TileFooter, TileFooterCell, Button} from 'sdc-ui/lib/react'; +import VSPOverlay from './VSPOverlay.jsx'; +import {TooltipWrapper} 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, - + softwareProductList: PropTypes.array, + vendor: PropTypes.object, + shouldShowOverlay: PropTypes.bool, + onSelectVSP: PropTypes.func, + onVendorSelect: PropTypes.func, + onAddVSP: PropTypes.func, + onVSPButtonClick: PropTypes.func }; render() { let {vendor, onSelectVSP, shouldShowOverlay, onVendorSelect, onMigrate} = this.props; - let {softwareProductList = [], vendorName} = vendor; + let {softwareProductList = [], name} = 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> + <Tile + iconName='vendor' + onClick={() => onVendorSelect(vendor)}> + <TileInfo align='center'> + <TileInfoLine type='title'> + <TooltipWrapper className='with-overlay' dataTestId='catalog-item-name'>{name}</TooltipWrapper> + </TileInfoLine> + <TileInfoLine> + <Button + btnType='outline-rounded' + color='dark-gray' + onClick={e => this.handleVspCountClick(e)} + data-test-id='catalog-vsp-count' + disabled={!softwareProductList.length}> + {i18n('{length} VSPs', {length: softwareProductList.length})} + </Button> + {shouldShowOverlay && softwareProductList.length > 0 && + <VSPOverlay + onMigrate={onMigrate} + VSPList={softwareProductList} + onSelectVSP={onSelectVSP} + onSeeMore={() => onVendorSelect(vendor)} /> + } + </TileInfoLine> + </TileInfo> + <TileFooter align='center'> + <TileFooterCell dataTestId='catalog-create-new-vsp-from-vendor'> + <Button + btnType='link' + color='primary' + iconName='plusThin' + onClick={e => this.onCreateVspClick(e)}> + {i18n('Create new VSP')} + </Button> + </TileFooterCell> + </TileFooter> + </Tile> ); } - onClick(vlm) { - this.setState({ - licenseModelToShow: vlm - }); - } - - onCreateVspClick(event) { - let {onAddVSP, vendor: {id}} = this.props; - event.stopPropagation(); - event.preventDefault(); + onCreateVspClick(e) { + e.stopPropagation(); + e.preventDefault(); + const {onAddVSP, vendor: {id}} = this.props; onAddVSP(id); } handleVspCountClick(e){ - let {onVSPIconClick, vendor: {softwareProductList}} = this.props; e.stopPropagation(); e.preventDefault(); + const {onVSPButtonClick, vendor: {softwareProductList}} = this.props; const hasVSP = Boolean(softwareProductList.length); - onVSPIconClick(hasVSP); + onVSPButtonClick(hasVSP); } } |