diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage')
2 files changed, 73 insertions, 117 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js index e8091bf8d1..8806ffd0bf 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js @@ -20,6 +20,7 @@ import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js'; import LandingPageView from './SoftwareProductLandingPageView.jsx'; import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import {onboardingMethod} from '../SoftwareProductConstants.js'; export const mapStateToProps = ({softwareProduct, licenseModel: {licenseAgreement}}) => { let {softwareProductEditor: {data:currentSoftwareProduct = {}}, softwareProductComponents, softwareProductCategories = []} = softwareProduct; @@ -52,7 +53,8 @@ export const mapStateToProps = ({softwareProduct, licenseModel: {licenseAgreemen fullCategoryDisplayName }, isReadOnlyMode, - componentsList + componentsList, + isManual: currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL }; }; diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx index 5fbf1b74b0..d3738e3ea4 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx @@ -19,11 +19,10 @@ import Dropzone from 'react-dropzone'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; -import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx'; -import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx'; -import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; + +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; +import SoftwareProductComponentsList from '../components/SoftwareProductComponentsList.js'; const SoftwareProductPropType = React.PropTypes.shape({ name: React.PropTypes.string, @@ -47,7 +46,7 @@ const ComponentPropType = React.PropTypes.shape({ class SoftwareProductLandingPageView extends React.Component { state = { - localFilter: '', + fileName: '', dragging: false, files: [] @@ -67,13 +66,13 @@ class SoftwareProductLandingPageView extends React.Component { }; render() { - let {currentSoftwareProduct, isReadOnlyMode, componentsList = []} = this.props; + let {currentSoftwareProduct, isReadOnlyMode, isManual, onDetailsSelect, componentsList} = this.props; return ( <div className='software-product-landing-wrapper'> <Dropzone className={classnames('software-product-landing-view', {'active-dragging': this.state.dragging})} - onDrop={files => this.handleImportSubmit(files, isReadOnlyMode)} - onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)} + onDrop={files => this.handleImportSubmit(files, isReadOnlyMode, isManual)} + onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode, isManual)} onDragLeave={() => this.setState({dragging:false})} multiple={false} disableClick={true} @@ -84,68 +83,29 @@ class SoftwareProductLandingPageView extends React.Component { <div className='draggable-wrapper'> <div className='software-product-landing-view-top'> <div className='row'> - {this.renderProductSummary(currentSoftwareProduct)} - {this.renderProductDetails(currentSoftwareProduct, isReadOnlyMode)} + <ProductSummary currentSoftwareProduct={currentSoftwareProduct} onDetailsSelect={onDetailsSelect} /> + {isManual ? + <div className='details-panel'/> + : this.renderProductDetails(currentSoftwareProduct, isReadOnlyMode)} </div> </div> </div> </Dropzone> - { - componentsList.length > 0 && this.renderComponents() - } + <SoftwareProductComponentsList + isReadOnlyMode={isReadOnlyMode} + componentsList={componentsList} + isManual={isManual} + currentSoftwareProduct={currentSoftwareProduct}/> </div> ); } - handleOnDragEnter(isReadOnlyMode) { - if (!isReadOnlyMode) { + handleOnDragEnter(isReadOnlyMode, isManual) { + if (!isReadOnlyMode && !isManual) { this.setState({dragging: true}); } } - renderProductSummary(currentSoftwareProduct) { - let {name = '', description = '', vendorName = '', fullCategoryDisplayName = '', licenseAgreementName = ''} = currentSoftwareProduct; - let {onDetailsSelect} = this.props; - return ( - <div className='details-panel'> - <div className='software-product-landing-view-heading-title'>{i18n('Software Product Details')}</div> - <div - className='software-product-landing-view-top-block clickable' - onClick={() => onDetailsSelect(currentSoftwareProduct)}> - <div className='details-container'> - <div className='single-detail-section title-section'> - <div className='single-detail-section title-text'> - {name} - </div> - </div> - <div className='details-section'> - <div className='multiple-details-section'> - <div className='detail-col' > - <div className='title'>{i18n('Vendor')}</div> - <div className='description'>{vendorName}</div> - </div> - <div className='detail-col'> - <div className='title'>{i18n('Category')}</div> - <div className='description'>{fullCategoryDisplayName}</div> - </div> - <div className='detail-col'> - <div className='title extra-large'>{i18n('License Agreement')}</div> - <div className='description'> - {this.renderLicenseAgreement(licenseAgreementName)} - </div> - </div> - </div> - <div className='single-detail-section'> - <div className='title'>{i18n('Description')}</div> - <div className='description'>{description}</div> - </div> - </div> - </div> - </div> - </div> - ); - } - renderProductDetails(currentSoftwareProduct, isReadOnlyMode) { let {validationData} = currentSoftwareProduct; let {onAttachmentsSelect} = this.props; @@ -181,64 +141,8 @@ class SoftwareProductLandingPageView extends React.Component { ); } - renderComponents() { - const {localFilter} = this.state; - - return ( - <ListEditorView - title={i18n('Virtual Function Components')} - filterValue={localFilter} - placeholder={i18n('Filter Components')} - onFilter={value => this.setState({localFilter: value})} - twoColumns> - {this.filterList().map(component => this.renderComponentsListItem(component))} - </ListEditorView> - ); - } - - renderComponentsListItem(component) { - let {id: componentId, name, displayName, description = ''} = component; - let {currentSoftwareProduct: {id}, onComponentSelect} = this.props; - return ( - <ListEditorItemView - key={name + Math.floor(Math.random() * (100 - 1) + 1).toString()} - className='list-editor-item-view' - onSelect={() => onComponentSelect({id, componentId})}> - <ListEditorItemViewField> - <div className='name'>{displayName}</div> - </ListEditorItemViewField> - <ListEditorItemViewField> - <div className='description'>{description}</div> - </ListEditorItemViewField> - </ListEditorItemView> - ); - } - - renderLicenseAgreement(licenseAgreementName) { - if (licenseAgreementName !== null && !licenseAgreementName) { - return (<div className='missing-license'><SVGIcon name='exclamation-triangle-full'/><div className='warning-text'>{i18n('Missing')}</div></div>); - } - return (licenseAgreementName); - } - - - filterList() { - let {componentsList = []} = this.props; - - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return componentsList.filter(({displayName = '', description = ''}) => { - return escape(displayName).match(filter) || escape(description).match(filter); - }); - } - else { - return componentsList; - } - } - - handleImportSubmit(files, isReadOnlyMode) { - if (isReadOnlyMode) { + handleImportSubmit(files, isReadOnlyMode, isManual) { + if (isReadOnlyMode || isManual) { return; } if (files[0] && files[0].size) { @@ -280,4 +184,54 @@ class SoftwareProductLandingPageView extends React.Component { } } +const ProductSummary = ({currentSoftwareProduct, onDetailsSelect}) => { + let {name = '', description = '', vendorName = '', fullCategoryDisplayName = '', licenseAgreementName = ''} = currentSoftwareProduct; + return ( + <div className='details-panel'> + <div className='software-product-landing-view-heading-title'>{i18n('Software Product Details')}</div> + <div + className='software-product-landing-view-top-block clickable' + onClick={() => onDetailsSelect(currentSoftwareProduct)}> + <div className='details-container'> + <div className='single-detail-section title-section'> + <div className='single-detail-section title-text'> + {name} + </div> + </div> + <div className='details-section'> + <div className='multiple-details-section'> + <div className='detail-col' > + <div className='title'>{i18n('Vendor')}</div> + <div className='description'>{vendorName}</div> + </div> + <div className='detail-col'> + <div className='title'>{i18n('Category')}</div> + <div className='description'>{fullCategoryDisplayName}</div> + </div> + <div className='detail-col'> + <div className='title extra-large'>{i18n('License Agreement')}</div> + <div className='description'> + <LicenseAgreement licenseAgreementName={licenseAgreementName}/> + </div> + </div> + </div> + <div className='single-detail-section'> + <div className='title'>{i18n('Description')}</div> + <div className='description'>{description}</div> + </div> + </div> + </div> + </div> + </div> + ); +}; + + +const LicenseAgreement = ({licenseAgreementName}) => { + if (!licenseAgreementName) { + return (<div className='missing-license'><SVGIcon name='exclamationTriangleFull'/><div className='warning-text'>{i18n('Missing')}</div></div>); + } + return <div>{licenseAgreementName}</div>; +}; + export default SoftwareProductLandingPageView; |