openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.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
  17 import React from 'react';
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19
  20 import Form from 'nfvo-components/input/validation/Form.jsx';
  21 import Input from 'nfvo-components/input/validation/Input.jsx';
  22 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  23 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  24 import { forms } from '../SoftwareProductComponentsConstants.js';
  25
  26 class ComponentCreationView extends React.Component {
  27     render() {
  28         let {
  29             data = {},
  30             onDataChanged,
  31             onCancel,
  32             genericFieldInfo
  33         } = this.props;
  34         let { displayName, description } = data;
  35         return (
  36             <div>
  37                 {genericFieldInfo && (
  38                     <Form
  39                         ref="validationForm"
  40                         hasButtons={true}
  41                         onSubmit={() => this.submit()}
  42                         onReset={() => onCancel()}
  43                         submitButtonText={i18n('Create')}
  44                         labledButtons={true}
  45                         isValid={this.props.isFormValid}
  46                         formReady={this.props.formReady}
  47                         onValidateForm={() =>
  48                             this.props.onValidateForm(forms.CREATE_FORM)
  49                         }
  50                         btnClassName="sdc-modal__footer">
  51                         <GridSection hasLastColSet>
  52                             <GridItem colSpan={4} lastColInRow>
  53                                 <Input
  54                                     data-test-id="name"
  55                                     onChange={displayName =>
  56                                         onDataChanged({ displayName })
  57                                     }
  58                                     label={i18n('Name')}
  59                                     isRequired={true}
  60                                     isValid={
  61                                         genericFieldInfo.displayName.isValid
  62                                     }
  63                                     errorText={
  64                                         genericFieldInfo.displayName.errorText
  65                                     }
  66                                     value={displayName}
  67                                     type="text"
  68                                 />
  69                             </GridItem>
  70                             <GridItem colSpan={4} lastColInRow>
  71                                 <Input
  72                                     label={i18n('Description')}
  73                                     onChange={description =>
  74                                         onDataChanged({ description })
  75                                     }
  76                                     value={description}
  77                                     isValid={
  78                                         genericFieldInfo.description.isValid
  79                                     }
  80                                     errorText={
  81                                         genericFieldInfo.description.errorText
  82                                     }
  83                                     data-test-id="description"
  84                                     type="textarea"
  85                                     groupClassName="no-bottom-margin"
  86                                 />
  87                             </GridItem>
  88                         </GridSection>
  89                     </Form>
  90                 )}
  91             </div>
  92         );
  93     }
  94
  95     submit() {
  96         const { onSubmit, data } = this.props;
  97         onSubmit(data);
  98     }
  99 }
 100
 101 export default ComponentCreationView;