openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.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
  18 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  19 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  20 import {TabsForm as Form} from 'nfvo-components/input/validation/Form.jsx';
  21 import Tabs from 'nfvo-components/input/validation/Tabs.jsx';
  22 import Tab from 'react-bootstrap/lib/Tab.js';
  23 import Input from 'nfvo-components/input/validation/Input.jsx';
  24 import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx';
  25 import i18n from 'nfvo-utils/i18n/i18n.js';
  26 import Validator from 'nfvo-utils/Validator.js';
  27
  28 import {enums as LicenseAgreementEnums, optionsInputValues as LicenseAgreementOptionsInputValues, LA_EDITOR_FORM} from './LicenseAgreementConstants.js';
  29
  30 const dualBoxFilterTitle = {
  31         left: i18n('Available Feature Groups'),
  32         right: i18n('Selected Feature Groups')
  33 };
  34
  35 const LicenseAgreementPropType = React.PropTypes.shape({
  36         id: React.PropTypes.string,
  37         name: React.PropTypes.string,
  38         description: React.PropTypes.string,
  39         requirementsAndConstrains: React.PropTypes.string,
  40         licenseTerm: React.PropTypes.object,
  41         featureGroupsIds: React.PropTypes.arrayOf(React.PropTypes.string),
  42         version: React.PropTypes.object
  43 });
  44
  45
  46 const GeneralTabContent = ({data, genericFieldInfo, onDataChanged, validateName, validateLTChoice}) => {
  47         let {name, description, requirementsAndConstrains, licenseTerm} = data;
  48         return (
  49                 <GridSection>
  50                         <GridItem colSpan={2}>
  51                                 <Input
  52                                         isValid={genericFieldInfo.name.isValid}
  53                                         errorText={genericFieldInfo.name.errorText}
  54                                         onChange={name => onDataChanged({name}, LA_EDITOR_FORM, { name: validateName })}
  55                                         label={i18n('Name')}
  56                                         value={name}
  57                                         data-test-id='create-la-name'
  58                                         name='license-agreement-name'
  59                                         isRequired={true}
  60                                         type='text'/>
  61                                 <Input
  62                                         isValid={genericFieldInfo.requirementsAndConstrains.isValid}
  63                                         errorText={genericFieldInfo.requirementsAndConstrains.errorText}
  64                                         onChange={requirementsAndConstrains => onDataChanged({requirementsAndConstrains}, LA_EDITOR_FORM)}
  65                                         label={i18n('Requirements and Constraints')}
  66                                         value={requirementsAndConstrains}
  67                                         data-test-id='create-la-requirements-constants'
  68                                         name='license-agreement-requirements-and-constraints'
  69                                         type='textarea'/>
  70                                 <Input
  71                                         label={i18n('License Term')}
  72                                         type='select'
  73                                         value={licenseTerm && licenseTerm.choice}
  74                                         isRequired={true}
  75                                         onChange={e => {
  76                                                 const selectedIndex = e.target.selectedIndex;
  77                                                 const licenseTerm = e.target.options[selectedIndex].value;
  78                                                 onDataChanged({licenseTerm:{choice: licenseTerm, other: ''}}, LA_EDITOR_FORM, { licenseTerm: validateLTChoice });
  79                                         }}
  80                                         isValid={genericFieldInfo.licenseTerm.isValid}
  81                                         errorText={genericFieldInfo.licenseTerm.errorText}
  82                                         className='input-options-select'
  83                                         groupClassName='bootstrap-input-options'
  84                                         data-test-id='create-la-license-term' >
  85                                         {LicenseAgreementOptionsInputValues.LICENSE_MODEL_TYPE.map(mtype =>
  86                                                 <option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
  87                                 </Input>
  88                         </GridItem>
  89                         <GridItem colSpan={2} stretch>
  90                                 <Input
  91                                         isValid={genericFieldInfo.description.isValid}
  92                                         errorText={genericFieldInfo.description.errorText}
  93                                         onChange={description => onDataChanged({description}, LA_EDITOR_FORM)}
  94                                         label={i18n('Description')}
  95                                         value={description}
  96                                         overlayPos='bottom'
  97                                         data-test-id='create-la-description'
  98                                         name='license-agreement-description'
  99                                         isRequired={true}
 100                                         type='textarea'/>
 101                         </GridItem>
 102                 </GridSection>
 103         );
 104 };
 105
 106 class LicenseAgreementEditorView extends React.Component {
 107
 108         static propTypes = {
 109                 data: LicenseAgreementPropType,
 110                 previousData: LicenseAgreementPropType,
 111                 LANames: React.PropTypes.object,
 112                 isReadOnlyMode: React.PropTypes.bool,
 113                 onDataChanged: React.PropTypes.func.isRequired,
 114                 onSubmit: React.PropTypes.func.isRequired,
 115                 onCancel: React.PropTypes.func.isRequired,
 116
 117                 selectedTab: React.PropTypes.number,
 118                 onTabSelect: React.PropTypes.func,
 119
 120                 selectedFeatureGroupsButtonTab: React.PropTypes.number,
 121                 onFeatureGroupsButtonTabSelect: React.PropTypes.func,
 122                 featureGroupsList: DualListboxView.propTypes.availableList
 123         };
 124
 125         static defaultProps = {
 126                 selectedTab: LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL,
 127                 data: {}
 128         };
 129
 130         state = {
 131                 localFeatureGroupsListFilter: ''
 132         };
 133
 134         render() {
 135                 let {selectedTab, onTabSelect, isReadOnlyMode, featureGroupsList, data, onDataChanged, genericFieldInfo} = this.props;
 136                 return (
 137                         <div>
 138                                 {genericFieldInfo && <Form
 139                                         ref='validationForm'
 140                                         hasButtons={true}
 141                                         onSubmit={ () => this.submit() }
 142                                         onReset={ () => this.props.onCancel() }
 143                                         labledButtons={true}
 144                                         isReadOnlyMode={isReadOnlyMode}
 145                                         isValid={this.props.isFormValid}
 146                                         formReady={this.props.formReady}
 147                                         onValidateForm={() => this.props.onValidateForm(LA_EDITOR_FORM) }
 148                                         className='license-agreement-form'>
 149                                         <Tabs activeKey={onTabSelect ? selectedTab : undefined} onSelect={onTabSelect} invalidTabs={this.props.invalidTabs} >
 150                                                 <Tab
 151                                                         eventKey={LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.GENERAL}
 152                                                         data-test-id='general-tab'
 153                                                         title={i18n('General')}>
 154                                                                 <fieldset disabled={isReadOnlyMode}>
 155                                                                         <GeneralTabContent data={data} genericFieldInfo={genericFieldInfo} onDataChanged={onDataChanged} validateLTChoice={(value)=>this.validateLTChoice(value)}
 156                                                                                    validateName={(value)=>this.validateName(value)}/>
 157                                                                 </fieldset>
 158                                                 </Tab>
 159                                                 <Tab
 160                                                         eventKey={LicenseAgreementEnums.SELECTED_LICENSE_AGREEMENT_TAB.FEATURE_GROUPS}
 161                                                         data-test-id='feature-group-tab'
 162                                                         title={i18n('Feature Groups')}>
 163                                                                 <fieldset disabled={isReadOnlyMode}>
 164                                                         {featureGroupsList.length > 0 ?
 165                                                                         <DualListboxView
 166                                                                                 isReadOnlyMode={isReadOnlyMode}
 167                                                                                 filterTitle={dualBoxFilterTitle}
 168                                                                                 selectedValuesList={data.featureGroupsIds}
 169                                                                                 availableList={featureGroupsList}
 170                                                                                 onChange={ selectedValuesList => onDataChanged( { featureGroupsIds: selectedValuesList }, LA_EDITOR_FORM )}/> :
 171                                                                         <p>{i18n('There is no available feature groups')}</p>}
 172                                                                 </fieldset>
 173                                                 </Tab>
 174                                         </Tabs>
 175                                 </Form>}
 176                         </div>
 177                 );
 178         }
 179
 180         submit() {
 181                 const {data: licenseAgreement, previousData: previousLicenseAgreement} = this.props;
 182                 this.props.onSubmit({licenseAgreement, previousLicenseAgreement});
 183         }
 184
 185         validateLTChoice(value) {
 186                 if (!value.choice) {
 187                         return {isValid: false, errorText: i18n('Field is required')};
 188                 }
 189                 return {isValid: true, errorText: ''};
 190         }
 191
 192         validateName(value) {
 193                 const {data: {id}, LANames} = this.props;
 194                 const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: LANames});
 195
 196                 return !isExists ?  {isValid: true, errorText: ''} :
 197                         {isValid: false, errorText: i18n('License Agreement by the name \'' + value + '\' already exists. License agreement name must be unique')};
 198         }
 199 }
 200
 201 export default LicenseAgreementEditorView;