2 * Copyright © 2016-2018 European Support Limited
3 * Modifications Copyright (C) 2021 Nordix Foundation.
5 * Licensed under the Apache License, Version 2.0 (the "License");
6 * you may not use this file except in compliance with the License.
7 * You may obtain a copy of the License at
9 * http://www.apache.org/licenses/LICENSE-2.0
11 * Unless required by applicable law or agreed to in writing, software
12 * distributed under the License is distributed on an "AS IS" BASIS,
13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 * See the License for the specific language governing permissions and
15 * limitations under the License.
17 import React from 'react';
18 import PropTypes from 'prop-types';
19 import classnames from 'classnames';
20 import Dropzone from 'react-dropzone';
22 import i18n from 'nfvo-utils/i18n/i18n.js';
23 import Configuration from 'sdc-app/config/Configuration.js';
24 import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
25 import VnfRepositorySearchBox from 'nfvo-components/vnfMarketPlace/VnfRepositorySearchBox.jsx';
27 import { SVGIcon } from 'onap-ui-react';
28 import SoftwareProductComponentsList from 'sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js';
30 const SoftwareProductPropType = PropTypes.shape({
31 name: PropTypes.string,
32 description: PropTypes.string,
33 version: PropTypes.string,
35 categoryId: PropTypes.string,
36 vendorId: PropTypes.string,
37 licenseType: PropTypes.string,
38 status: PropTypes.string,
39 licensingData: PropTypes.object,
40 validationData: PropTypes.object,
41 selectedModelList: PropTypes.arrayOf(PropTypes.string)
44 const ComponentPropType = PropTypes.shape({
46 name: PropTypes.string,
47 displayName: PropTypes.string,
48 description: PropTypes.string
51 class SoftwareProductLandingPageView extends React.Component {
60 this.getExternalLicenceFeatureState = this.getExternalLicenceFeatureState.bind(
66 currentSoftwareProduct: SoftwareProductPropType,
67 isReadOnlyMode: PropTypes.bool,
68 componentsList: PropTypes.arrayOf(ComponentPropType),
69 version: PropTypes.object,
70 onLicenseChange: PropTypes.func,
71 onUpload: PropTypes.func,
72 onUploadConfirmation: PropTypes.func,
73 onInvalidFileSizeUpload: PropTypes.func,
74 onComponentSelect: PropTypes.func,
75 onAddComponent: PropTypes.func
80 currentSoftwareProduct,
83 if (currentSoftwareProduct.candidateOnboardingOrigin && !isCertified) {
84 onCandidateInProcess(currentSoftwareProduct.id);
88 licenceChange = (e, currentSoftwareProduct, onLicenseChange) => {
89 currentSoftwareProduct.licenseType = e.target.value
92 onLicenseChange(currentSoftwareProduct);
95 getExternalLicenceFeatureState() {
96 var licenseFeature = this.props.features.find(
97 feature => feature.name === 'EXTERNAL_LICENSE'
99 return licenseFeature ? licenseFeature.active : true;
104 currentSoftwareProduct,
109 let licenceChange = this.licenceChange;
111 <div className="software-product-landing-wrapper">
113 className={classnames('software-product-landing-view', {
114 'active-dragging': this.state.dragging
117 this.handleImportSubmit(files, isReadOnlyMode, isManual)
120 this.handleOnDragEnter(isReadOnlyMode, isManual)
122 onDragLeave={() => this.setState({ dragging: false })}
127 accept=".zip, .csar">
128 <div className="draggable-wrapper">
129 <div className="software-product-landing-view-top">
130 <div className="row">
132 currentSoftwareProduct={
133 currentSoftwareProduct
135 licenceChange={licenceChange}
136 onLicenseChange={onLicenseChange}
137 externalLicenceEnabled={this.getExternalLicenceFeatureState()}
139 {this.renderProductDetails(
147 <SoftwareProductComponentsList />
152 handleOnDragEnter(isReadOnlyMode, isManual) {
153 if (!isReadOnlyMode && !isManual) {
154 this.setState({ dragging: true });
158 renderProductDetails(isManual, isReadOnlyMode) {
159 let { onBrowseVNF, currentSoftwareProduct } = this.props;
161 if (Configuration.get('showBrowseVNF')) {
163 <div className="details-panel">
166 <div className="software-product-landing-view-heading-title">
167 {i18n('Software Product Attachments')}
169 <VnfRepositorySearchBox
170 dataTestId="upload-btn"
171 isReadOnlyMode={isReadOnlyMode}
172 className={classnames(
173 'software-product-landing-view-top-block-col-upl showVnf',
174 { disabled: isReadOnlyMode }
176 onClick={() => this.refs.fileInput.open()}
178 onBrowseVNF(currentSoftwareProduct)
187 <div className="details-panel">
190 <div className="software-product-landing-view-heading-title">
191 {i18n('Software Product Attachments')}
193 <DraggableUploadFileBox
194 dataTestId="upload-btn"
195 isReadOnlyMode={isReadOnlyMode}
196 className={classnames(
197 'software-product-landing-view-top-block-col-upl',
198 { disabled: isReadOnlyMode }
200 onClick={() => this.refs.fileInput.open()}
201 onBrowseVNF={() => onBrowseVNF()}
210 handleImportSubmit(files, isReadOnlyMode, isManual) {
211 if (isReadOnlyMode || isManual) {
214 if (files[0] && files[0].size) {
216 fileName: files[0].name,
220 this.startUploading(files);
225 this.props.onInvalidFileSizeUpload();
229 startUploading(files) {
232 currentSoftwareProduct,
236 let { validationData } = currentSoftwareProduct;
238 if (!(files && files.length)) {
242 let formData = new FormData();
243 formData.append('upload', file);
244 this.refs.fileInput.value = '';
246 if (validationData) {
247 onUploadConfirmation(currentSoftwareProduct.id, formData);
249 onUpload(currentSoftwareProduct.id, formData);
254 const ProductSummary = ({
255 currentSoftwareProduct,
258 externalLicenceEnabled
264 fullCategoryDisplayName = '',
265 selectedModelList = []
266 } = currentSoftwareProduct;
268 <div className="details-panel">
269 <div className="software-product-landing-view-heading-title">
270 {i18n('Software Product Details')}
272 <div className="software-product-landing-view-top-block">
273 <div className="details-container">
274 <div className="single-detail-section title-section">
275 <div className="single-detail-section title-text">
279 <div className="details-section">
280 <div className="multiple-details-section">
281 <div className="detail-col">
282 <div className="title">{i18n('Vendor')}</div>
283 <div className="description">{vendorName}</div>
285 <div className="detail-col">
286 <div className="title">{i18n('Category')}</div>
287 <div className="description">
288 {fullCategoryDisplayName}
291 <div className="detail-col">
292 <div className="title">{i18n('Model')}</div>
293 <div className="description">
294 {selectedModelList.length > 0 ? (
296 {selectedModelList.map(value => (
301 i18n('model.sdc.label')
305 <div className="detail-col">
306 <div className="title extra-large">
307 {i18n('License Agreement')}
309 <div className="description">
311 licenceChange={licenceChange}
312 currentSoftwareProduct={
313 currentSoftwareProduct
315 onLicenseChange={onLicenseChange}
316 externalLicenceEnabled={
317 externalLicenceEnabled
323 <div className="single-detail-section">
324 <div className="title">{i18n('Description')}</div>
325 <div className="description">{description}</div>
334 const LicenseAgreementWithExternal = ({
336 currentSoftwareProduct,
340 <div className="missing-license">
349 currentSoftwareProduct,
353 checked={currentSoftwareProduct.licenseType === 'INTERNAL'}
356 <div className="description licenceLabel">
357 {i18n('Internal license')}
367 currentSoftwareProduct,
371 checked={currentSoftwareProduct.licenseType === 'EXTERNAL'}
374 <div className="description licenceLabel">
375 {i18n('External license')}
382 const LicenseAgreementWithoutExternal = ({
384 currentSoftwareProduct,
387 if (!currentSoftwareProduct.licenseAgreementName) {
390 className="missing-license clickable"
394 currentSoftwareProduct,
398 <SVGIcon color="warning" name="exclamationTriangleFull" />
399 <div className="warning-text">{i18n('Missing')}</div>
403 return <div>{currentSoftwareProduct.licenseAgreementName}</div>;
406 const LicenseAgreement = ({
408 currentSoftwareProduct,
410 externalLicenceEnabled
412 if (externalLicenceEnabled) {
414 <LicenseAgreementWithExternal
415 licenceChange={licenceChange}
416 currentSoftwareProduct={currentSoftwareProduct}
417 onLicenseChange={onLicenseChange}
422 <LicenseAgreementWithoutExternal
423 licenceChange={licenceChange}
424 currentSoftwareProduct={currentSoftwareProduct}
425 onLicenseChange={onLicenseChange}
431 export default SoftwareProductLandingPageView;