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