openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.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 Form from 'nfvo-components/input/validation/Form.jsx';
  19 import Input from 'nfvo-components/input/validation/Input.jsx';
  20 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  21 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  22 import VmSizing from './VmSizing.jsx';
  23 import i18n from 'nfvo-utils/i18n/i18n.js';
  24
  25 class ComputeEditorView extends React.Component {
  26     static propTypes = {
  27         data: PropTypes.object,
  28         qdata: PropTypes.object,
  29         qschema: PropTypes.object,
  30         isReadOnlyMode: PropTypes.bool,
  31         isManual: PropTypes.bool,
  32         onDataChanged: PropTypes.func.isRequired,
  33         onQDataChanged: PropTypes.func.isRequired,
  34         onSubmit: PropTypes.func.isRequired,
  35         onCancel: PropTypes.func.isRequired
  36     };
  37
  38     render() {
  39         let {
  40             data = {},
  41             qdata = {},
  42             qgenericFieldInfo,
  43             dataMap,
  44             genericFieldInfo,
  45             isReadOnlyMode,
  46             isManual,
  47             isFormValid,
  48             formReady,
  49             onDataChanged,
  50             onQDataChanged,
  51             onSubmit,
  52             onCancel,
  53             onValidateForm
  54         } = this.props;
  55         const { id, name, description } = data;
  56         const edittingComputeMode = Boolean(id);
  57
  58         return (
  59             <div className="vsp-component-computeFlavor-view">
  60                 {genericFieldInfo && (
  61                     <Form
  62                         ref={form => {
  63                             this.form = form;
  64                         }}
  65                         hasButtons={true}
  66                         btnClassName="sdc-modal__footer"
  67                         onSubmit={() => onSubmit({ data, qdata })}
  68                         onReset={() => onCancel()}
  69                         labledButtons={true}
  70                         isReadOnlyMode={isReadOnlyMode}
  71                         isValid={isFormValid}
  72                         formReady={formReady}
  73                         onValidateForm={() => onValidateForm()}
  74                         className="component-questionnaire-validation-form"
  75                         submitButtonText={
  76                             edittingComputeMode ? i18n('Save') : i18n('Create')
  77                         }>
  78                         <GridSection hasLostColSet>
  79                             <GridItem
  80                                 colSpan={edittingComputeMode ? 2 : 4}
  81                                 lastColInRow={!edittingComputeMode}>
  82                                 <Input
  83                                     disabled={!isManual}
  84                                     data-test-id="name"
  85                                     type="text"
  86                                     label={i18n('Flavor Name')}
  87                                     value={name}
  88                                     onChange={name => onDataChanged({ name })}
  89                                     isValid={genericFieldInfo['name'].isValid}
  90                                     errorText={
  91                                         genericFieldInfo['name'].errorText
  92                                     }
  93                                     isRequired
  94                                 />
  95                             </GridItem>
  96                             <GridItem
  97                                 colSpan={edittingComputeMode ? 2 : 4}
  98                                 lastColInRow>
  99                                 <Input
 100                                     data-test-id="description"
 101                                     type="textarea"
 102                                     label={i18n('Description')}
 103                                     value={description}
 104                                     onChange={description =>
 105                                         onDataChanged({ description })
 106                                     }
 107                                     isValid={
 108                                         genericFieldInfo['description'].isValid
 109                                     }
 110                                     errorText={
 111                                         genericFieldInfo['description']
 112                                             .errorText
 113                                     }
 114                                 />
 115                             </GridItem>
 116                         </GridSection>
 117                         {edittingComputeMode && (
 118                             <VmSizing
 119                                 qgenericFieldInfo={qgenericFieldInfo}
 120                                 dataMap={dataMap}
 121                                 onQDataChanged={onQDataChanged}
 122                             />
 123                         )}
 124                     </Form>
 125                 )}
 126             </div>
 127         );
 128     }
 129
 130     save() {
 131         return this.form.handleFormSubmit(new Event('dummy'));
 132     }
 133 }
 134
 135 export default ComputeEditorView;