openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.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 Validator from 'nfvo-utils/Validator.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 {optionsInputValues as licenseKeyGroupOptionsInputValues, LKG_FORM_NAME} from './LicenseKeyGroupsConstants.js';
  25 import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
  26 import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
  27
  28 const LicenseKeyGroupPropType = React.PropTypes.shape({
  29         id: React.PropTypes.string,
  30         name: React.PropTypes.string,
  31         description: React.PropTypes.string,
  32         operationalScope: React.PropTypes.shape({
  33                 choices: React.PropTypes.array,
  34                 other: React.PropTypes.string
  35         }),
  36         type: React.PropTypes.string
  37 });
  38
  39 const LicenseKeyGroupFormContent = ({data, onDataChanged, genericFieldInfo, validateName, validateOperationalScope}) => {
  40         let {name, description, operationalScope, type} = data;
  41         return (
  42                 <GridSection>
  43                         <GridItem colSpan={2}>
  44                                 <Input
  45                                         onChange={name => onDataChanged({name}, LKG_FORM_NAME, {name: validateName})}
  46                                         label={i18n('Name')}
  47                                         data-test-id='create-lkg-name'
  48                                         value={name}
  49                                         isValid={genericFieldInfo.name.isValid}
  50                                         errorText={genericFieldInfo.name.errorText}
  51                                         isRequired={true}
  52                                         type='text'/>
  53                         </GridItem>
  54                         <GridItem colSpan={2}>
  55                                 <InputOptions
  56                                         onInputChange={()=>{}}
  57                                         isMultiSelect={true}
  58                                         isRequired={true}
  59                                         onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}},
  60                                                 LKG_FORM_NAME, {operationalScope: validateOperationalScope})}
  61                                         onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER],
  62                                                 other: operationalScope}}, LKG_FORM_NAME, {operationalScope: validateOperationalScope})}
  63                                         label={i18n('Operational Scope')}
  64                                         data-test-id='create-lkg-operational-scope'
  65                                         type='select'
  66                                         multiSelectedEnum={operationalScope && operationalScope.choices}
  67                                         otherValue={operationalScope && operationalScope.other}
  68                                         values={licenseKeyGroupOptionsInputValues.OPERATIONAL_SCOPE}
  69                                         isValid={genericFieldInfo.operationalScope.isValid}
  70                                         errorText={genericFieldInfo.operationalScope.errorText} />
  71                         </GridItem>
  72                         <GridItem colSpan={2}>
  73                                 <Input
  74                                         onChange={description => onDataChanged({description}, LKG_FORM_NAME)}
  75                                         label={i18n('Description')}
  76                                         data-test-id='create-lkg-description'
  77                                         value={description}
  78                                         isValid={genericFieldInfo.description.isValid}
  79                                         errorText={genericFieldInfo.description.errorText}
  80                                         isRequired={true}
  81                                         type='textarea'
  82                                         overlayPos='bottom' />
  83                         </GridItem>
  84                         <GridItem colSpan={2}>
  85                                 <Input
  86                                         isRequired={true}
  87                                         onChange={e => { const selectedIndex = e.target.selectedIndex;
  88                                                 const val = e.target.options[selectedIndex].value;
  89                                                 onDataChanged({type: val}, LKG_FORM_NAME);}}
  90                                         value={type}
  91                                         label={i18n('Type')}
  92                                         data-test-id='create-lkg-type'
  93                                         isValid={genericFieldInfo.type.isValid}
  94                                         errorText={genericFieldInfo.type.errorText}
  95                                         groupClassName='bootstrap-input-options'
  96                                         className='input-options-select'
  97                                         type='select' >
  98                                         {
  99                                                 licenseKeyGroupOptionsInputValues.TYPE.map(type =>
 100                                                 (<option key={type.enum} value={type.enum}>{type.title}</option>))
 101                                         }
 102                                 </Input>
 103                         </GridItem>
 104                 </GridSection>
 105         );
 106 };
 107
 108 class LicenseKeyGroupsEditorView extends React.Component {
 109         static propTypes = {
 110                 data: LicenseKeyGroupPropType,
 111                 previousData: LicenseKeyGroupPropType,
 112                 LKGNames: React.PropTypes.object,
 113                 isReadOnlyMode: React.PropTypes.bool,
 114                 onDataChanged: React.PropTypes.func.isRequired,
 115                 onSubmit: React.PropTypes.func.isRequired,
 116                 onCancel: React.PropTypes.func.isRequired
 117         };
 118
 119         static defaultProps = {
 120                 data: {}
 121         };
 122
 123         render() {
 124                 let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo} = this.props;
 125                 return (
 126                         <div>
 127                 { genericFieldInfo &&
 128                         <Form
 129                                 ref='validationForm'
 130                                 hasButtons={true}
 131                                 onSubmit={ () => this.submit() }
 132                                 onReset={ () => this.props.onCancel() }
 133                                 isValid={this.props.isFormValid}
 134                                 formReady={this.props.formReady}
 135                                 onValidateForm={() => this.props.onValidateForm(LKG_FORM_NAME) }
 136                                 labledButtons={true}
 137                                 isReadOnlyMode={isReadOnlyMode}
 138                                 className='license-key-groups-form'>
 139                                 <LicenseKeyGroupFormContent
 140                                         data={data}
 141                                         onDataChanged={onDataChanged}
 142                                         genericFieldInfo={genericFieldInfo}
 143                                         validateName={(value)=> this.validateName(value)}
 144                                         validateOperationalScope={this.validateOperationalScope}/>
 145                         </Form>}
 146                         </div>
 147                 );
 148         }
 149
 150         submit() {
 151                 const {data: licenseKeyGroup, previousData: previousLicenseKeyGroup} = this.props;
 152                 this.props.onSubmit({licenseKeyGroup, previousLicenseKeyGroup});
 153         }
 154
 155         validateName(value) {
 156                 const {data: {id}, LKGNames} = this.props;
 157                 const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: LKGNames});
 158
 159                 return !isExists ?  {isValid: true, errorText: ''} :
 160                         {isValid: false, errorText: i18n('License key group by the name \'' + value + '\' already exists. License key group name must be unique')};
 161         }
 162
 163         validateOperationalScope(value) {
 164                 if (value && value.choices && value.choices.length > 0) {
 165                         if (value.choices[0] !== optionInputOther.OTHER)
 166                         {
 167                                 return {
 168                                         isValid: true,
 169                                         errorText: ''
 170                                 };
 171                         } else {
 172                                 if ( value.other ) {
 173                                         return {
 174                                                 isValid: true,
 175                                                 errorText: ''
 176                                         };
 177                                 }
 178                         }
 179                 }
 180                 return {
 181                         isValid: false,
 182                         errorText: 'Field is required'
 183                 };
 184         }
 185 }
 186
 187 export default LicenseKeyGroupsEditorView;