diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx')
-rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx | 78 |
1 files changed, 51 insertions, 27 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx index 10d855c862..b00ceeb48f 100644 --- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogList.jsx @@ -17,37 +17,61 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; -const SoftwareProductListHeader = ({selectedVendor, onBack}) => ( - <div className='vendor-page-header'> - <SVGIcon name='back' onClick={onBack}/> - <div className='tab-separator' /> - <div className='vendor-name'>{selectedVendor.name}</div> - </div> +const SoftwareProductListHeader = ({ selectedVendor, onBack }) => ( + <div className="vendor-page-header"> + <SVGIcon name="back" onClick={onBack} /> + <div className="tab-separator" /> + <div className="vendor-name">{selectedVendor.name}</div> + </div> ); -const CatalogList = ({children, onAddVLM, onAddVSP, vendorPageOptions}) => ( - <div className='catalog-list'> - {vendorPageOptions && <SoftwareProductListHeader onBack={vendorPageOptions.onBack} selectedVendor={vendorPageOptions.selectedVendor}/>} - <div className='catalog-items'> - { (onAddVLM || onAddVSP) && - <div className='create-catalog-item-wrapper'> - {onAddVLM && <CreateItemTile onClick={onAddVLM} dataTestId={'catalog-add-new-vlm'} className='vlm-type' title={i18n('CREATE NEW VLM')}/>} - {onAddVSP && <CreateItemTile onClick={() => onAddVSP()} dataTestId={'catalog-add-new-vsp'} className='vsp-type' title={i18n('CREATE NEW VSP')}/>} - </div> - } - {children} - </div> - </div> +const CatalogList = ({ children, onAddVLM, onAddVSP, vendorPageOptions }) => ( + <div className="catalog-list"> + {vendorPageOptions && ( + <SoftwareProductListHeader + onBack={vendorPageOptions.onBack} + selectedVendor={vendorPageOptions.selectedVendor} + /> + )} + <div className="catalog-items"> + {(onAddVLM || onAddVSP) && ( + <div className="create-catalog-item-wrapper"> + {onAddVLM && ( + <CreateItemTile + onClick={onAddVLM} + dataTestId={'catalog-add-new-vlm'} + className="vlm-type" + title={i18n('CREATE NEW VLM')} + /> + )} + {onAddVSP && ( + <CreateItemTile + onClick={() => onAddVSP()} + dataTestId={'catalog-add-new-vsp'} + className="vsp-type" + title={i18n('CREATE NEW VSP')} + /> + )} + </div> + )} + {children} + </div> + </div> ); -const CreateItemTile = ({onClick, dataTestId, title, className = ''}) => { - //TODO check for buttons - return ( - <div className={`create-catalog-item tile ${className}`} onClick={onClick} data-test-id={dataTestId}> - <div className='create-item-plus-icon'><SVGIcon name='plus' /></div> - <div className='create-item-text'>{title}</div> - </div> - ); +const CreateItemTile = ({ onClick, dataTestId, title, className = '' }) => { + //TODO check for buttons + return ( + <div + className={`create-catalog-item tile ${className}`} + onClick={onClick} + data-test-id={dataTestId}> + <div className="create-item-plus-icon"> + <SVGIcon name="plus" /> + </div> + <div className="create-item-text">{title}</div> + </div> + ); }; export default CatalogList; |