openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.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 i18n from 'nfvo-utils/i18n/i18n.js';
  19 import Input from 'nfvo-components/input/validation/Input.jsx';
  20 import Form from 'nfvo-components/input/validation/Form.jsx';
  21
  22 const VersionPropType = PropTypes.shape({
  23     name: PropTypes.string,
  24     description: PropTypes.string,
  25     creationMethod: PropTypes.string
  26 });
  27
  28 class VersionsPageCreationView extends React.Component {
  29     static propTypes = {
  30         data: VersionPropType,
  31         availableMethods: PropTypes.array,
  32         onDataChanged: PropTypes.func.isRequired,
  33         onSubmit: PropTypes.func.isRequired,
  34         onCancel: PropTypes.func.isRequired
  35     };
  36
  37     render() {
  38         let {
  39             data = {},
  40             genericFieldInfo,
  41             baseVersion,
  42             onDataChanged,
  43             onCancel
  44         } = this.props;
  45         let { additionalInfo: { OptionalCreationMethods } } = baseVersion;
  46         let { description, creationMethod } = data;
  47
  48         return (
  49             <div className="version-creation-page">
  50                 {genericFieldInfo && (
  51                     <Form
  52                         ref={validationForm =>
  53                             (this.validationForm = validationForm)
  54                         }
  55                         hasButtons={true}
  56                         btnClassName="sdc-modal__footer"
  57                         onSubmit={() => this.submit()}
  58                         submitButtonText={i18n('Create')}
  59                         onReset={() => onCancel()}
  60                         labledButtons={true}
  61                         isValid={this.props.isFormValid}
  62                         formReady={this.props.formReady}
  63                         onValidateForm={() => this.validate()}>
  64                         <div className="version-form-row">
  65                             <Input
  66                                 label={i18n('Version Category')}
  67                                 value={creationMethod}
  68                                 onChange={e => this.onSelectMethod(e)}
  69                                 type="select"
  70                                 overlayPos="bottom"
  71                                 data-test-id="new-version-category"
  72                                 isValid={
  73                                     genericFieldInfo.creationMethod.isValid
  74                                 }
  75                                 errorText={
  76                                     genericFieldInfo.creationMethod.errorText
  77                                 }
  78                                 isRequired>
  79                                 <option key="" value="">
  80                                     {i18n('Please select…')}
  81                                 </option>
  82                                 {OptionalCreationMethods.map(method => (
  83                                     <option key={method} value={method}>
  84                                         {i18n(method)}
  85                                     </option>
  86                                 ))}
  87                             </Input>
  88                         </div>
  89
  90                         <div className="version-form-row">
  91                             <Input
  92                                 label={i18n('Description')}
  93                                 value={description}
  94                                 type="text"
  95                                 overlayPos="bottom"
  96                                 data-test-id="new-version-description"
  97                                 isValid={genericFieldInfo.description.isValid}
  98                                 errorText={
  99                                     genericFieldInfo.description.errorText
 100                                 }
 101                                 onChange={description =>
 102                                     onDataChanged({ description })
 103                                 }
 104                                 isRequired
 105                                 groupClassName="no-bottom-margin"
 106                             />
 107                         </div>
 108                     </Form>
 109                 )}
 110             </div>
 111         );
 112     }
 113
 114     onSelectMethod(e) {
 115         const selectedIndex = e.target.selectedIndex;
 116         const creationMethod = e.target.options[selectedIndex].value;
 117         this.props.onDataChanged({ creationMethod });
 118     }
 119
 120     submit() {
 121         let { baseVersion, data: { description, creationMethod } } = this.props;
 122         this.props.onSubmit({
 123             baseVersion,
 124             payload: { description, creationMethod }
 125         });
 126     }
 127
 128     validate() {
 129         this.props.onValidateForm();
 130     }
 131 }
 132
 133 export default VersionsPageCreationView;