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

   1 /*
   2  * Copyright © 2016-2018 European Support Limited
   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 or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 import React from 'react';
  17 import PropTypes from 'prop-types';
  18 import Dropzone from 'react-dropzone';
  19
  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';
  26
  27 const SoftwareProductProcessEditorPropType = PropTypes.shape({
  28     id: PropTypes.string,
  29     name: PropTypes.string,
  30     description: PropTypes.string,
  31     artifactName: PropTypes.string,
  32     type: PropTypes.string
  33 });
  34
  35 class SoftwareProductProcessesEditorForm extends React.Component {
  36     static propTypes = {
  37         data: SoftwareProductProcessEditorPropType,
  38         previousData: SoftwareProductProcessEditorPropType,
  39         isReadOnlyMode: PropTypes.bool,
  40         onDataChanged: PropTypes.func,
  41         onSubmit: PropTypes.func,
  42         onCancel: PropTypes.func
  43     };
  44     state = {
  45         dragging: false,
  46         files: []
  47     };
  48
  49     render() {
  50         let {
  51             data = {},
  52             isReadOnlyMode,
  53             onDataChanged,
  54             onCancel,
  55             genericFieldInfo,
  56             optionsInputValues
  57         } = this.props;
  58         let { name, description, artifactName, type } = data;
  59
  60         return (
  61             <div>
  62                 {genericFieldInfo && (
  63                     <Form
  64                         ref="validationForm"
  65                         hasButtons={true}
  66                         labledButtons={true}
  67                         isReadOnlyMode={isReadOnlyMode}
  68                         onSubmit={() => this.submit()}
  69                         onReset={() => onCancel()}
  70                         isValid={this.props.isFormValid}
  71                         formReady={this.props.formReady}
  72                         onValidateForm={() => this.props.onValidateForm()}
  73                         className="vsp-processes-editor"
  74                         btnClassName="sdc-modal__footer">
  75                         <div
  76                             className={`vsp-processes-editor-data${
  77                                 isReadOnlyMode ? ' disabled' : ''
  78                             }`}>
  79                             <Dropzone
  80                                 className={`vsp-process-dropzone-view ${
  81                                     this.state.dragging ? 'active-dragging' : ''
  82                                 }`}
  83                                 onDrop={(acceptedFiles, rejectedFiles) =>
  84                                     this.handleImportSubmit(
  85                                         acceptedFiles,
  86                                         rejectedFiles
  87                                     )
  88                                 }
  89                                 onDragEnter={() =>
  90                                     this.setState({ dragging: true })
  91                                 }
  92                                 onDragLeave={() =>
  93                                     this.setState({ dragging: false })
  94                                 }
  95                                 multiple={false}
  96                                 disableClick={true}
  97                                 ref="processEditorFileInput"
  98                                 name="processEditorFileInput">
  99                                 <GridSection hasLastColSet={true}>
 100                                     <GridItem colSpan={2}>
 101                                         <Input
 102                                             onChange={name =>
 103                                                 onDataChanged({ name })
 104                                             }
 105                                             isValid={
 106                                                 genericFieldInfo.name.isValid
 107                                             }
 108                                             isRequired={true}
 109                                             data-test-id="name"
 110                                             errorText={
 111                                                 genericFieldInfo.name.errorText
 112                                             }
 113                                             label={i18n('Name')}
 114                                             value={name}
 115                                             type="text"
 116                                         />
 117                                     </GridItem>
 118                                     <GridItem colSpan={2} lastColInRow={true}>
 119                                         <label>&nbsp;</label>
 120                                         <DraggableUploadFileBox
 121                                             className="process-editor-file-box"
 122                                             isReadOnlyMode={isReadOnlyMode}
 123                                             onClick={() =>
 124                                                 this.refs.processEditorFileInput.open()
 125                                             }
 126                                         />
 127                                     </GridItem>
 128                                 </GridSection>
 129                                 <GridSection hasLastColSet={true}>
 130                                     <GridItem colSpan={2}>
 131                                         <Input
 132                                             name="vsp-process-description"
 133                                             groupClassName="vsp-process-description no-bottom-margin"
 134                                             onChange={description =>
 135                                                 onDataChanged({ description })
 136                                             }
 137                                             isValid={
 138                                                 genericFieldInfo.description
 139                                                     .isValid
 140                                             }
 141                                             errorText={
 142                                                 genericFieldInfo.description
 143                                                     .errorText
 144                                             }
 145                                             label={i18n('Notes')}
 146                                             value={description}
 147                                             data-test-id="vsp-process-description"
 148                                             type="textarea"
 149                                         />
 150                                     </GridItem>
 151                                     <GridItem colSpan={2} lastColInRow={true}>
 152                                         <Input
 153                                             label={i18n('Artifacts')}
 154                                             value={artifactName}
 155                                             type="text"
 156                                             disabled
 157                                         />
 158                                         <Input
 159                                             onChange={e => {
 160                                                 // setting the unit to the correct value
 161                                                 const selectedIndex =
 162                                                     e.target.selectedIndex;
 163                                                 const val =
 164                                                     e.target.options[
 165                                                         selectedIndex
 166                                                     ].value;
 167                                                 onDataChanged({ type: val });
 168                                             }}
 169                                             value={type}
 170                                             label={i18n('Process Type')}
 171                                             className="process-type"
 172                                             data-test-id="process-type"
 173                                             groupClassName="no-bottom-margin"
 174                                             isValid={
 175                                                 genericFieldInfo.type.isValid
 176                                             }
 177                                             errorText={
 178                                                 genericFieldInfo.type.errorText
 179                                             }
 180                                             type="select">
 181                                             {optionsInputValues.PROCESS_TYPE.map(
 182                                                 mtype => (
 183                                                     <option
 184                                                         key={mtype.enum}
 185                                                         value={mtype.enum}>{`${
 186                                                         mtype.title
 187                                                     }`}</option>
 188                                                 )
 189                                             )}
 190                                         </Input>
 191                                     </GridItem>
 192                                 </GridSection>
 193                             </Dropzone>
 194                         </div>
 195                     </Form>
 196                 )}
 197             </div>
 198         );
 199     }
 200
 201     submit() {
 202         const { data: process, previousData: previousProcess } = this.props;
 203         let { files } = this.state;
 204         let formData = false;
 205         if (files.length) {
 206             let file = files[0];
 207             formData = new FormData();
 208             formData.append('upload', file);
 209         }
 210
 211         let updatedProcess = {
 212             ...process,
 213             formData
 214         };
 215         this.props.onSubmit({ process: updatedProcess, previousProcess });
 216     }
 217
 218     handleImportSubmit(files, rejectedFiles) {
 219         if (files.length > 0) {
 220             let { onDataChanged } = this.props;
 221             this.setState({
 222                 dragging: false,
 223                 complete: '0',
 224                 files
 225             });
 226             onDataChanged({ artifactName: files[0].name });
 227         } else if (rejectedFiles.length > 0) {
 228             this.setState({
 229                 dragging: false
 230             });
 231             if (DEBUG) {
 232                 console.log('file was rejected.' + rejectedFiles[0].name);
 233             }
 234         }
 235     }
 236 }
 237
 238 export default SoftwareProductProcessesEditorForm;