aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js204
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx396
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;