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 Dropzone from 'react-dropzone';
18 import classnames from 'classnames';
20 import i18n from 'nfvo-utils/i18n/i18n.js';
21 import {optionsInputValues as ProcessesOptionsInputValues} from './SoftwareProductProcessesConstants.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({
28 id: React.PropTypes.string,
29 name: React.PropTypes.string,
30 description: React.PropTypes.string,
31 artifactName: React.PropTypes.string,
32 type: React.PropTypes.string
35 const FileUploadBox = ({onClick}) => {
37 <div className='file-upload-box'>
38 <div className='drag-text'>{i18n('Drag & drop for upload')}</div>
39 <div className='or-text'>{i18n('or')}</div>
40 <div className='upload-btn primary-btn' onClick={onClick}>
41 <span className='primary-btn-text'>{i18n('Select file')}</span>
48 class SoftwareProductProcessesEditorView extends React.Component {
56 data: SoftwareProductProcessEditorPropType,
57 previousData: SoftwareProductProcessEditorPropType,
58 isReadOnlyMode: React.PropTypes.bool,
59 onDataChanged: React.PropTypes.func,
60 onSubmit: React.PropTypes.func,
61 onClose: React.PropTypes.func
65 let {data = {}, isReadOnlyMode, onDataChanged, onClose, genericFieldInfo} = this.props;
66 let {name, description, artifactName, type} = data;
70 {genericFieldInfo && <Form
74 isReadOnlyMode={isReadOnlyMode}
75 onSubmit={ () => this.submit() }
76 onReset={ () => onClose() }
77 isValid={this.props.isFormValid}
78 formReady={this.props.formReady}
79 onValidateForm={() => this.props.onValidateForm() }
80 className='vsp-processes-editor'>
81 <div className={classnames('vsp-processes-editor-data', {'disabled': isReadOnlyMode})}>
83 className={classnames('vsp-process-dropzone-view', {'active-dragging': this.state.dragging})}
84 onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)}
85 onDragEnter={() => this.setState({dragging: true})}
86 onDragLeave={() => this.setState({dragging: false})}
89 ref='processEditorFileInput'
90 name='processEditorFileInput'>
92 <GridItem colSpan={2}>
94 onChange={name => onDataChanged({name})}
95 isValid={genericFieldInfo.name.isValid}
98 errorText={genericFieldInfo.name.errorText}
103 <GridItem colSpan={2}>
104 <FileUploadBox onClick={() => this.refs.processEditorFileInput.open()}/>
108 <GridItem colSpan={2}>
110 name='vsp-process-description'
111 groupClassName='vsp-process-description'
112 onChange={description => onDataChanged({description})}
113 isValid={genericFieldInfo.description.isValid}
114 errorText={genericFieldInfo.description.errorText}
115 label={i18n('Notes')}
117 data-test-id='vsp-process-description'
120 <GridItem colSpan={2}>
122 label={i18n('Artifacts')}
128 // setting the unit to the correct value
129 const selectedIndex = e.target.selectedIndex;
130 const val = e.target.options[selectedIndex].value;
131 onDataChanged({type: val});}
134 label={i18n('Process Type')}
135 data-test-id='process-type'
136 isValid={genericFieldInfo.type.isValid}
137 errorText={genericFieldInfo.type.errorText}
139 {ProcessesOptionsInputValues.PROCESS_TYPE.map(mtype =>
140 <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
152 const {data: process, previousData: previousProcess} = this.props;
153 let {files} = this.state;
154 let formData = false;
157 formData = new FormData();
158 formData.append('upload', file);
161 let updatedProcess = {
165 this.props.onSubmit({process: updatedProcess, previousProcess});
169 handleImportSubmit(files, rejectedFiles) {
170 if (files.length > 0) {
171 let {onDataChanged} = this.props;
177 onDataChanged({artifactName: files[0].name});
179 else if (rejectedFiles.length > 0) {
184 console.log('file was rejected.' + rejectedFiles[0].name);
190 export default SoftwareProductProcessesEditorView;