2 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
8 * http://www.apache.org/licenses/LICENSE-2.0
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
13 * or implied. See the License for the specific language governing
14 * permissions and limitations under the License.
16 import React from 'react';
17 import PropTypes from 'prop-types';
18 import Dropzone from 'react-dropzone';
20 import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
21 import i18n from 'nfvo-utils/i18n/i18n.js';
22 import Form from 'nfvo-components/input/validation/Form.jsx';
23 import Input from 'nfvo-components/input/validation/Input.jsx';
24 import GridSection from 'nfvo-components/grid/GridSection.jsx';
25 import GridItem from 'nfvo-components/grid/GridItem.jsx';
27 const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
29 name: PropTypes.string,
30 description: PropTypes.string,
31 artifactName: PropTypes.string,
32 type: PropTypes.string
37 class SoftwareProductProcessesEditorForm extends React.Component {
41 data: SoftwareProductProcessEditorPropType,
42 previousData: SoftwareProductProcessEditorPropType,
43 isReadOnlyMode: React.PropTypes.bool,
44 onDataChanged: React.PropTypes.func,
45 onSubmit: React.PropTypes.func,
46 onCancel: React.PropTypes.func
54 let {data = {}, isReadOnlyMode, onDataChanged, onCancel, genericFieldInfo, optionsInputValues} = this.props;
55 let {name, description, artifactName, type} = data;
59 {genericFieldInfo && <Form
63 isReadOnlyMode={isReadOnlyMode}
64 onSubmit={ () => this.submit() }
65 onReset={ () => onCancel() }
66 isValid={this.props.isFormValid}
67 formReady={this.props.formReady}
68 onValidateForm={() => this.props.onValidateForm() }
69 className='vsp-processes-editor'>
70 <div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}>
72 className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`}
73 onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)}
74 onDragEnter={() => this.setState({dragging: true})}
75 onDragLeave={() => this.setState({dragging: false})}
78 ref='processEditorFileInput'
79 name='processEditorFileInput'>
80 <GridSection hasLastColSet={true}>
81 <GridItem colSpan={2}>
83 onChange={name => onDataChanged({name})}
84 isValid={genericFieldInfo.name.isValid}
87 errorText={genericFieldInfo.name.errorText}
92 <GridItem colSpan={2} lastColInRow={true}>
94 <DraggableUploadFileBox className='process-editor-file-box' isReadOnlyMode={isReadOnlyMode} onClick={() => this.refs.processEditorFileInput.open()}/>
97 <GridSection hasLastColSet={true}>
98 <GridItem colSpan={2}>
100 name='vsp-process-description'
101 groupClassName='vsp-process-description'
102 onChange={description => onDataChanged({description})}
103 isValid={genericFieldInfo.description.isValid}
104 errorText={genericFieldInfo.description.errorText}
105 label={i18n('Notes')}
107 data-test-id='vsp-process-description'
110 <GridItem colSpan={2} lastColInRow={true}>
112 label={i18n('Artifacts')}
118 // setting the unit to the correct value
119 const selectedIndex = e.target.selectedIndex;
120 const val = e.target.options[selectedIndex].value;
121 onDataChanged({type: val});}
124 label={i18n('Process Type')}
125 className='process-type'
126 data-test-id='process-type'
127 isValid={genericFieldInfo.type.isValid}
128 errorText={genericFieldInfo.type.errorText}
130 {optionsInputValues.PROCESS_TYPE.map(mtype =>
131 <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
143 const {data: process, previousData: previousProcess} = this.props;
144 let {files} = this.state;
145 let formData = false;
148 formData = new FormData();
149 formData.append('upload', file);
152 let updatedProcess = {
156 this.props.onSubmit({process: updatedProcess, previousProcess});
160 handleImportSubmit(files, rejectedFiles) {
161 if (files.length > 0) {
162 let {onDataChanged} = this.props;
168 onDataChanged({artifactName: files[0].name});
170 else if (rejectedFiles.length > 0) {
175 console.log('file was rejected.' + rejectedFiles[0].name);
181 export default SoftwareProductProcessesEditorForm;