openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   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
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  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.
  15  */
  16 import React from 'react';
  17 import i18n from 'nfvo-utils/i18n/i18n.js';
  18 import Dropzone from 'react-dropzone';
  19
  20 import  {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.js';
  21 import Form from 'nfvo-components/input/validation/Form.jsx';
  22 import Input from 'nfvo-components/input/validation/Input.jsx';
  23 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  24 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  25
  26 const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
  27         id: React.PropTypes.string,
  28         name: React.PropTypes.string,
  29         description: React.PropTypes.string,
  30         artifactName: React.PropTypes.string,
  31         type: React.PropTypes.string
  32 });
  33
  34 const FileUploadBox = ({onClick}) => {
  35         return (
  36                 <div className='file-upload-box'>
  37                         <div className='drag-text'>{i18n('Drag & drop for upload')}</div>
  38                         <div className='or-text'>{i18n('or')}</div>
  39                         <div className='upload-btn primary-btn' onClick={onClick}>
  40                                 <span className='primary-btn-text'>{i18n('Select file')}</span>
  41                         </div>
  42                 </div>
  43         );
  44 };
  45
  46 class SoftwareProductProcessesEditorView extends React.Component {
  47
  48         state = {
  49                 dragging: false,
  50                 files: []
  51         };
  52
  53         static propTypes = {
  54                 data: SoftwareProductProcessEditorPropType,
  55                 previousData: SoftwareProductProcessEditorPropType,
  56                 isReadOnlyMode: React.PropTypes.bool,
  57                 onDataChanged: React.PropTypes.func,
  58                 onSubmit: React.PropTypes.func,
  59                 onCancel: React.PropTypes.func
  60         };
  61
  62         render() {
  63                 let {isReadOnlyMode, onCancel, onDataChanged, genericFieldInfo, data = {}} = this.props;
  64                 let {name, description, artifactName, type} = data;
  65
  66                 return (
  67                         <div>
  68                                 { genericFieldInfo && <Form
  69                                         ref='validationForm'
  70                                         isReadOnlyMode={isReadOnlyMode}
  71                                         hasButtons={true}
  72                                         labledButtons={true}
  73                                         onSubmit={ () => this.submit() }
  74                                         onReset={ () => onCancel() }
  75                                         isValid={this.props.isFormValid}
  76                                         formReady={this.props.formReady}
  77                                         onValidateForm={() => this.props.onValidateForm() }
  78                                         className='vsp-processes-editor'>
  79                                         <div className={`vsp-processes-editor-data${isReadOnlyMode ? ' disabled' : '' }`}>
  80                                                 <Dropzone
  81                                                         className={`vsp-process-dropzone-view ${this.state.dragging ? 'active-dragging' : ''}`}
  82                                                         onDrop={(acceptedFiles, rejectedFiles) => this.handleImportSubmit(acceptedFiles, rejectedFiles)}
  83                                                         onDragEnter={() => this.setState({dragging:true})}
  84                                                         onDragLeave={() => this.setState({dragging:false})}
  85                                                         multiple={false}
  86                                                         disableClick={true}
  87                                                         ref='processEditorFileInput'
  88                                                         name='processEditorFileInput'>
  89                                                         <GridSection>
  90                                                                 <GridItem colSpan={2}>
  91                                                                         <Input
  92                                                                                 onChange={name => onDataChanged({name})}
  93                                                                                 isValid={genericFieldInfo.name.isValid}
  94                                                                                 isRequired={true}
  95                                                                                 data-test-id='name'
  96                                                                                 errorText={genericFieldInfo.name.errorText}
  97                                                                                 label={i18n('Name')}
  98                                                                                 value={name}
  99                                                                                 type='text'/>
 100                                                                 </GridItem>
 101                                                                 <GridItem colSpan={2}>
 102                                                                         <FileUploadBox onClick={() => this.refs.processEditorFileInput.open()} />
 103                                                                 </GridItem>
 104                                                         </GridSection>
 105                                                         <GridSection>
 106                                                                 <GridItem colSpan={2}>
 107                                                                         <Input
 108                                                                                 name='vsp-process-description'
 109                                                                                 groupClassName='vsp-process-description'
 110                                                                                 onChange={description => onDataChanged({description})}
 111                                                                                 isValid={genericFieldInfo.description.isValid}
 112                                                                                 errorText={genericFieldInfo.description.errorText}
 113                                                                                 label={i18n('Notes')}
 114                                                                                 value={description}
 115                                                                                 data-test-id='vsp-process-description'
 116                                                                                 type='textarea'/>
 117                                                                 </GridItem>
 118                                                                 <GridItem colSpan={2}>
 119                                                                         <Input
 120                                                                                 label={i18n('Artifacts')}
 121                                                                                 data-test-id='artifacts'
 122                                                                                 value={artifactName}
 123                                                                                 type='text'
 124                                                                                 disabled/>
 125                                                                         <Input
 126                                                                                 onChange={e => {
 127                                                                                         // setting the unit to the correct value
 128                                                                                         const selectedIndex = e.target.selectedIndex;
 129                                                                                         const val = e.target.options[selectedIndex].value;
 130                                                                                         onDataChanged({type: val});}
 131                                                                                 }
 132                                                                                 value={type}
 133                                                                                 label={i18n('Process Type')}
 134                                                                                 data-test-id='process-type'
 135                                                                                 isValid={genericFieldInfo.type.isValid}
 136                                                                                 errorText={genericFieldInfo.type.errorText}
 137                                                                                 type='select'
 138                                                                                 className='input-options-select'
 139                                                                                 groupClassName='bootstrap-input-options' >
 140                                                                                 {ComponentProcessesOptionsInputValues.PROCESS_TYPE.map(mtype =>
 141                                                                                         <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
 142                                                                         </Input>
 143                                                                 </GridItem>
 144                                                         </GridSection>
 145                                                 </Dropzone>
 146                                         </div>
 147                                 </Form>}
 148                         </div>
 149                 );
 150         }
 151
 152         submit() {
 153                 const {data: process, previousData: previousProcess} = this.props;
 154                 let {files} = this.state;
 155                 let formData = new FormData();
 156                 if (files.length) {
 157                         let file = files[0];
 158                         formData.append('upload', file);
 159                 }
 160
 161                 let updatedProcess = {
 162                         ...process,
 163                         formData: files.length ? formData : false
 164                 };
 165                 this.props.onSubmit({process: updatedProcess, previousProcess});
 166         }
 167
 168
 169         handleImportSubmit(files, rejectedFiles) {
 170                 if (files.length > 0) {
 171                         let {onDataChanged} = this.props;
 172                         this.setState({
 173                                 dragging: false,
 174                                 complete: '0',
 175                                 files
 176                         });
 177                         onDataChanged({artifactName: files[0].name});
 178                 }
 179                 else if (rejectedFiles.length > 0) {
 180                         this.setState({
 181                                 dragging: false
 182                         });
 183                         if (DEBUG) {
 184                                 console.log('file was rejected ' + rejectedFiles[0].name);
 185                         }
 186                 }
 187
 188         }
 189 }
 190
 191 export default SoftwareProductProcessesEditorView;