diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage')
2 files changed, 336 insertions, 264 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 64e0d562ce..34bfceec24 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js @@ -13,106 +13,134 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.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'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; +import { onboardingMethod } from '../SoftwareProductConstants.js'; import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js'; -import {enums, screenTypes} from 'sdc-app/onboarding/OnboardingConstants.js'; - +import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js'; export const mapStateToProps = ({ - softwareProduct, - licenseModel: {licenseAgreement}, + softwareProduct, + licenseModel: { licenseAgreement } }) => { - let {softwareProductEditor: {data:currentSoftwareProduct = {}}, softwareProductComponents, softwareProductCategories = [], } = softwareProduct; - let {licensingData = {}} = currentSoftwareProduct; - let {licenseAgreementList} = licenseAgreement; - let {componentsList} = softwareProductComponents; - let licenseAgreementName = licenseAgreementList.find(la => la.id === licensingData.licenseAgreement); - if (licenseAgreementName) { - licenseAgreementName = licenseAgreementName.name; - } else if (licenseAgreementList.length === 0) { // otherwise the state of traingle svgicon will be updated post unmounting - licenseAgreementName = null; - } - - let categoryName = '', subCategoryName = '', fullCategoryDisplayName = ''; - const category = softwareProductCategories.find(ca => ca.uniqueId === currentSoftwareProduct.category); - if (category) { - categoryName = category.name; - const subcategories = category.subcategories || []; - const subcat = subcategories.find(sc => sc.uniqueId === currentSoftwareProduct.subCategory); - subCategoryName = subcat && subcat.name ? subcat.name : ''; - } - fullCategoryDisplayName = `${subCategoryName} (${categoryName})`; + let { + softwareProductEditor: { data: currentSoftwareProduct = {} }, + softwareProductComponents, + softwareProductCategories = [] + } = softwareProduct; + let { licensingData = {} } = currentSoftwareProduct; + let { licenseAgreementList } = licenseAgreement; + let { componentsList } = softwareProductComponents; + let licenseAgreementName = licenseAgreementList.find( + la => la.id === licensingData.licenseAgreement + ); + if (licenseAgreementName) { + licenseAgreementName = licenseAgreementName.name; + } else if (licenseAgreementList.length === 0) { + // otherwise the state of traingle svgicon will be updated post unmounting + licenseAgreementName = null; + } + let categoryName = '', + subCategoryName = '', + fullCategoryDisplayName = ''; + const category = softwareProductCategories.find( + ca => ca.uniqueId === currentSoftwareProduct.category + ); + if (category) { + categoryName = category.name; + const subcategories = category.subcategories || []; + const subcat = subcategories.find( + sc => sc.uniqueId === currentSoftwareProduct.subCategory + ); + subCategoryName = subcat && subcat.name ? subcat.name : ''; + } + fullCategoryDisplayName = `${subCategoryName} (${categoryName})`; - return { - currentSoftwareProduct: { - ...currentSoftwareProduct, - licenseAgreementName, - fullCategoryDisplayName - }, - componentsList, - isManual: currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL - }; + return { + currentSoftwareProduct: { + ...currentSoftwareProduct, + licenseAgreementName, + fullCategoryDisplayName + }, + componentsList, + isManual: + currentSoftwareProduct.onboardingMethod === onboardingMethod.MANUAL + }; }; -const mapActionsToProps = (dispatch, {version}) => { - return { - onDetailsSelect: ({id: softwareProductId}) => - ScreensHelper.loadScreen(dispatch, { - screen: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS, screenType: screenTypes.SOFTWARE_PRODUCT, - props: {softwareProductId, version} - }), - onCandidateInProcess: (softwareProductId) => ScreensHelper.loadScreen(dispatch, { - screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP, screenType: screenTypes.SOFTWARE_PRODUCT, - props: {softwareProductId, version} - }), - onUpload: (softwareProductId, formData) => - SoftwareProductActionHelper.uploadFile(dispatch, { - softwareProductId, - formData, - failedNotificationTitle: i18n('Upload validation failed'), - version - }), +const mapActionsToProps = (dispatch, { version }) => { + return { + onDetailsSelect: ({ id: softwareProductId }) => + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.SOFTWARE_PRODUCT_DETAILS, + screenType: screenTypes.SOFTWARE_PRODUCT, + props: { softwareProductId, version } + }), + onCandidateInProcess: softwareProductId => + ScreensHelper.loadScreen(dispatch, { + screen: enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS_SETUP, + screenType: screenTypes.SOFTWARE_PRODUCT, + props: { softwareProductId, version } + }), + onUpload: (softwareProductId, formData) => + SoftwareProductActionHelper.uploadFile(dispatch, { + softwareProductId, + formData, + failedNotificationTitle: i18n('Upload validation failed'), + version + }), - onUploadConfirmation: (softwareProductId, formData) => - dispatch({ - type: modalActionTypes.GLOBAL_MODAL_WARNING, - data:{ - msg: i18n('Upload will erase existing data. Do you want to continue?'), - confirmationButtonText: i18n('Continue'), - title: i18n('Warning'), - onConfirmed: ()=>SoftwareProductActionHelper.uploadFile(dispatch, { - softwareProductId, - formData, - failedNotificationTitle: i18n('Upload validation failed'), - version - }), - onDeclined: () => dispatch({ - type: modalActionTypes.GLOBAL_MODAL_CLOSE - }) - } - }), + onUploadConfirmation: (softwareProductId, formData) => + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + msg: i18n( + 'Upload will erase existing data. Do you want to continue?' + ), + confirmationButtonText: i18n('Continue'), + title: i18n('Warning'), + onConfirmed: () => + SoftwareProductActionHelper.uploadFile(dispatch, { + softwareProductId, + formData, + failedNotificationTitle: i18n( + 'Upload validation failed' + ), + version + }), + onDeclined: () => + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_CLOSE + }) + } + }), - onInvalidFileSizeUpload: () => dispatch({ - type: modalActionTypes.GLOBAL_MODAL_ERROR, - data: { - title: i18n('Upload Failed'), - confirmationButtonText: i18n('Continue'), - msg: i18n('no zip or csar file was uploaded or expected file doesn\'t exist') - } - }), - onComponentSelect: ({id: softwareProductId, componentId}) => ScreensHelper.loadScreen(dispatch, { - screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL, screenType: screenTypes.SOFTWARE_PRODUCT, - props: {softwareProductId, version, componentId} - }), - /** for the next version */ - onAddComponent: () => SoftwareProductActionHelper.addComponent(dispatch) - }; + onInvalidFileSizeUpload: () => + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_ERROR, + data: { + title: i18n('Upload Failed'), + confirmationButtonText: i18n('Continue'), + msg: i18n( + "no zip or csar file was uploaded or expected file doesn't exist" + ) + } + }), + onComponentSelect: ({ id: softwareProductId, componentId }) => + ScreensHelper.loadScreen(dispatch, { + screen: screenTypes.SOFTWARE_PRODUCT_COMPONENT_DEFAULT_GENERAL, + screenType: screenTypes.SOFTWARE_PRODUCT, + props: { softwareProductId, version, componentId } + }), + /** for the next version */ + onAddComponent: () => SoftwareProductActionHelper.addComponent(dispatch) + }; }; -export default connect(mapStateToProps, mapActionsToProps, null, {withRef: true})(LandingPageView); +export default connect(mapStateToProps, mapActionsToProps, null, { + withRef: true +})(LandingPageView); 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 a73a849a08..bc8a2be646 100644 --- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx @@ -18,7 +18,6 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import Dropzone from 'react-dropzone'; - import i18n from 'nfvo-utils/i18n/i18n.js'; import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx'; @@ -26,192 +25,237 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import SoftwareProductComponentsList from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js'; const SoftwareProductPropType = PropTypes.shape({ - name: PropTypes.string, - description: PropTypes.string, - version: PropTypes.string, - id: PropTypes.string, - categoryId: PropTypes.string, - vendorId: PropTypes.string, - status: PropTypes.string, - licensingData: PropTypes.object, - validationData: PropTypes.object + name: PropTypes.string, + description: PropTypes.string, + version: PropTypes.string, + id: PropTypes.string, + categoryId: PropTypes.string, + vendorId: PropTypes.string, + status: PropTypes.string, + licensingData: PropTypes.object, + validationData: PropTypes.object }); const ComponentPropType = PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - displayName: PropTypes.string, - description: PropTypes.string + id: PropTypes.string, + name: PropTypes.string, + displayName: PropTypes.string, + description: PropTypes.string }); class SoftwareProductLandingPageView extends React.Component { + state = { + fileName: '', + dragging: false, + files: [] + }; + + static propTypes = { + currentSoftwareProduct: SoftwareProductPropType, + isReadOnlyMode: PropTypes.bool, + componentsList: PropTypes.arrayOf(ComponentPropType), + version: PropTypes.object, + onDetailsSelect: PropTypes.func, + onUpload: PropTypes.func, + onUploadConfirmation: PropTypes.func, + onInvalidFileSizeUpload: PropTypes.func, + onComponentSelect: PropTypes.func, + onAddComponent: PropTypes.func + }; + componentDidMount() { + const { onCandidateInProcess, currentSoftwareProduct } = this.props; + if (currentSoftwareProduct.candidateOnboardingOrigin) { + onCandidateInProcess(currentSoftwareProduct.id); + } + } + render() { + let { + currentSoftwareProduct, + isReadOnlyMode, + isManual, + onDetailsSelect + } = 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, isManual) + } + onDragEnter={() => + this.handleOnDragEnter(isReadOnlyMode, isManual) + } + onDragLeave={() => this.setState({ dragging: false })} + multiple={false} + disableClick={true} + ref="fileInput" + name="fileInput" + accept=".zip, .csar"> + <div className="draggable-wrapper"> + <div className="software-product-landing-view-top"> + <div className="row"> + <ProductSummary + currentSoftwareProduct={ + currentSoftwareProduct + } + onDetailsSelect={onDetailsSelect} + /> + {this.renderProductDetails( + isManual, + isReadOnlyMode + )} + </div> + </div> + </div> + </Dropzone> + <SoftwareProductComponentsList /> + </div> + ); + } + + handleOnDragEnter(isReadOnlyMode, isManual) { + if (!isReadOnlyMode && !isManual) { + this.setState({ dragging: true }); + } + } + + renderProductDetails(isManual, isReadOnlyMode) { + return ( + <div className="details-panel"> + {!isManual && ( + <div> + <div className="software-product-landing-view-heading-title"> + {i18n('Software Product Attachments')} + </div> + <DraggableUploadFileBox + dataTestId="upload-btn" + isReadOnlyMode={isReadOnlyMode} + className={classnames( + 'software-product-landing-view-top-block-col-upl', + { disabled: isReadOnlyMode } + )} + onClick={() => this.refs.fileInput.open()} + /> + </div> + )} + </div> + ); + } + + handleImportSubmit(files, isReadOnlyMode, isManual) { + if (isReadOnlyMode || isManual) { + return; + } + if (files[0] && files[0].size) { + this.setState({ + fileName: files[0].name, + dragging: false, + complete: '0' + }); + this.startUploading(files); + } else { + this.setState({ + dragging: false + }); + this.props.onInvalidFileSizeUpload(); + } + } - state = { - - fileName: '', - dragging: false, - files: [] - }; - - static propTypes = { - currentSoftwareProduct: SoftwareProductPropType, - isReadOnlyMode: PropTypes.bool, - componentsList: PropTypes.arrayOf(ComponentPropType), - version: PropTypes.object, - onDetailsSelect: PropTypes.func, - onUpload: PropTypes.func, - onUploadConfirmation: PropTypes.func, - onInvalidFileSizeUpload: PropTypes.func, - onComponentSelect: PropTypes.func, - onAddComponent: PropTypes.func - }; - componentDidMount() { - const {onCandidateInProcess, currentSoftwareProduct} = this.props; - if (currentSoftwareProduct.candidateOnboardingOrigin) { - onCandidateInProcess(currentSoftwareProduct.id); - } - } - render() { - let {currentSoftwareProduct, isReadOnlyMode, isManual, onDetailsSelect} = 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, isManual)} - onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode, isManual)} - onDragLeave={() => this.setState({dragging:false})} - multiple={false} - disableClick={true} - ref='fileInput' - name='fileInput' - accept='.zip, .csar'> - <div className='draggable-wrapper'> - <div className='software-product-landing-view-top'> - <div className='row'> - <ProductSummary currentSoftwareProduct={currentSoftwareProduct} onDetailsSelect={onDetailsSelect} /> - {this.renderProductDetails(isManual, isReadOnlyMode)} - </div> - </div> - </div> - </Dropzone> - <SoftwareProductComponentsList/> - </div> - ); - } - - handleOnDragEnter(isReadOnlyMode, isManual) { - if (!isReadOnlyMode && !isManual) { - this.setState({dragging: true}); - } - } - - renderProductDetails(isManual, isReadOnlyMode) { - return ( - <div className='details-panel'> - { !isManual && <div> - <div className='software-product-landing-view-heading-title'>{i18n('Software Product Attachments')}</div> - <DraggableUploadFileBox - dataTestId='upload-btn' - isReadOnlyMode={isReadOnlyMode} - className={classnames('software-product-landing-view-top-block-col-upl', {'disabled': isReadOnlyMode})} - onClick={() => this.refs.fileInput.open()}/> - </div> - } - </div> - ); - } - - handleImportSubmit(files, isReadOnlyMode, isManual) { - if (isReadOnlyMode || isManual) { - return; - } - if (files[0] && files[0].size) { - this.setState({ - fileName: files[0].name, - dragging: false, - complete: '0', - }); - this.startUploading(files); - } - else { - this.setState({ - dragging: false - }); - this.props.onInvalidFileSizeUpload(); - } - - } - - startUploading(files) { - let {onUpload, currentSoftwareProduct, onUploadConfirmation} = this.props; - - let {validationData} = currentSoftwareProduct; - - if (!(files && files.length)) { - return; - } - let file = files[0]; - let formData = new FormData(); - formData.append('upload', file); - this.refs.fileInput.value = ''; - - if (validationData) { - onUploadConfirmation(currentSoftwareProduct.id, formData); - }else { - onUpload(currentSoftwareProduct.id, formData); - } - - } + startUploading(files) { + let { + onUpload, + currentSoftwareProduct, + onUploadConfirmation + } = this.props; + + let { validationData } = currentSoftwareProduct; + + if (!(files && files.length)) { + return; + } + let file = files[0]; + let formData = new FormData(); + formData.append('upload', file); + this.refs.fileInput.value = ''; + + if (validationData) { + onUploadConfirmation(currentSoftwareProduct.id, formData); + } else { + onUpload(currentSoftwareProduct.id, formData); + } + } } -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 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 color='warning' name='exclamationTriangleFull'/><div className='warning-text'>{i18n('Missing')}</div></div>); - } - return <div>{licenseAgreementName}</div>; +const LicenseAgreement = ({ licenseAgreementName }) => { + if (!licenseAgreementName) { + return ( + <div className="missing-license"> + <SVGIcon color="warning" name="exclamationTriangleFull" /> + <div className="warning-text">{i18n('Missing')}</div> + </div> + ); + } + return <div>{licenseAgreementName}</div>; }; export default SoftwareProductLandingPageView; |