openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.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 Tabs from 'nfvo-components/input/validation/Tabs.jsx';
  18 import Tab from 'react-bootstrap/lib/Tab.js';
  19 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  20 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  21 import {TabsForm as Form} from 'nfvo-components/input/validation/Form.jsx';
  22 import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx';
  23 import Input from 'nfvo-components/input/validation/Input.jsx';
  24 import i18n from 'nfvo-utils/i18n/i18n.js';
  25 import Validator from 'nfvo-utils/Validator.js';
  26
  27 import {state as FeatureGroupStateConstants, FG_EDITOR_FORM} from './FeatureGroupsConstants.js';
  28
  29 const FeatureGroupsPropType = React.PropTypes.shape({
  30         id: React.PropTypes.string,
  31         name: React.PropTypes.string,
  32         description: React.PropTypes.string,
  33         partNumber: React.PropTypes.string,
  34         entitlementPoolsIds: React.PropTypes.arrayOf(React.PropTypes.string),
  35         licenseKeyGroupsIds: React.PropTypes.arrayOf(React.PropTypes.string)
  36 });
  37
  38 const GeneralTab = ({data = {}, onDataChanged, genericFieldInfo, validateName}) => {
  39         let {name, description, partNumber} = data;
  40         return (
  41                         <GridSection>
  42                                 <GridItem colSpan={2}>
  43                                         <Input
  44                                                 groupClassName='field-section'
  45                                                 onChange={name => onDataChanged({name}, FG_EDITOR_FORM, {name: validateName})}
  46                                                 label={i18n('Name')}
  47                                                 data-test-id='create-fg-name'
  48                                                 value={name}
  49                                                 name='feature-group-name'
  50                                                 type='text'
  51                                                 isRequired={true}
  52                                                 isValid={genericFieldInfo.name.isValid}
  53                                                 errorText={genericFieldInfo.name.errorText} />
  54                                         <Input
  55                                                 groupClassName='field-section'
  56                                                 className='description-field'
  57                                                 onChange={description => onDataChanged({description}, FG_EDITOR_FORM)}
  58                                                 data-test-id='create-fg-description'
  59                                                 label={i18n('Description')}
  60                                                 value={description}
  61                                                 name='feature-group-description'
  62                                                 type='textarea'
  63                                                 isRequired={true}
  64                                                 isValid={genericFieldInfo.description.isValid}
  65                                                 errorText={genericFieldInfo.description.errorText} />
  66                                         <Input
  67                                                 groupClassName='field-section'
  68                                                 onChange={partNumber => onDataChanged({partNumber}, FG_EDITOR_FORM)}
  69                                                 label={i18n('Part Number')}
  70                                                 data-test-id='create-fg-part-number'
  71                                                 value={partNumber}
  72                                                 isRequired={true}
  73                                                 type='text'
  74                                                 isValid={genericFieldInfo.partNumber.isValid}
  75                                                 errorText={genericFieldInfo.partNumber.errorText} />
  76                                 </GridItem>
  77                         </GridSection>
  78                 );
  79 };
  80
  81 const EntitlementPoolsTab = ({entitlementPoolsList, data, onDataChanged, isReadOnlyMode}) => {
  82         const dualBoxFilterTitle = {
  83                 left: i18n('Available Entitlement Pools'),
  84                 right: i18n('Selected Entitlement Pools')
  85         };
  86         if (entitlementPoolsList.length > 0) {
  87                 return (
  88                         <DualListboxView
  89                                 isReadOnlyMode={isReadOnlyMode}
  90                                 filterTitle={dualBoxFilterTitle}
  91                                 selectedValuesList={data.entitlementPoolsIds}
  92                                 availableList={entitlementPoolsList}
  93                                 onChange={ selectedValuesList => onDataChanged( { entitlementPoolsIds: selectedValuesList }, FG_EDITOR_FORM )}/>
  94                 );
  95         } else {
  96                 return (
  97                         <p>{i18n('There is no available entitlement pools')}</p>
  98                 );
  99         }
 100 };
 101
 102 const LKGTab = ({licenseKeyGroupsList, data, onDataChanged, isReadOnlyMode}) => {
 103         const dualBoxFilterTitle = {
 104                 left: i18n('Available License Key Groups'),
 105                 right: i18n('Selected License Key Groups')
 106         };
 107         if (licenseKeyGroupsList.length > 0) {
 108                 return (
 109                         <DualListboxView
 110                                 isReadOnlyMode={isReadOnlyMode}
 111                                 filterTitle={dualBoxFilterTitle}
 112                                 selectedValuesList={data.licenseKeyGroupsIds}
 113                                 availableList={licenseKeyGroupsList}
 114                                 onChange={ selectedValuesList => onDataChanged( { licenseKeyGroupsIds: selectedValuesList }, FG_EDITOR_FORM )}/>
 115                 );
 116         } else {
 117                 return (
 118                         <p>{i18n('There is no available licsense key groups')}</p>
 119                 );
 120         }
 121 };
 122
 123 class FeatureGroupEditorView extends React.Component {
 124
 125
 126         static propTypes = {
 127                 data: FeatureGroupsPropType,
 128                 previousData: FeatureGroupsPropType,
 129                 isReadOnlyMode: React.PropTypes.bool,
 130                 FGNames: React.PropTypes.object,
 131
 132                 onSubmit: React.PropTypes.func,
 133                 onCancel: React.PropTypes.func,
 134
 135                 selectedTab: React.PropTypes.number,
 136                 onTabSelect: React.PropTypes.func,
 137
 138                 entitlementPoolsList: DualListboxView.propTypes.availableList,
 139                 licenseKeyGroupsList: DualListboxView.propTypes.availableList
 140         };
 141
 142
 143         static defaultProps = {
 144                 data: {},
 145                 selectedTab: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL,
 146         };
 147
 148         state = {
 149                 localEntitlementPoolsListFilter: '',
 150                 localLicenseKeyGroupsListFilter: ''
 151         };
 152
 153
 154         render() {
 155                 let {selectedTab, onTabSelect, isReadOnlyMode, invalidTabs, data, onDataChanged, genericFieldInfo, entitlementPoolsList, licenseKeyGroupsList} = this.props;
 156                 return (
 157                         <div>
 158                         { genericFieldInfo && <Form
 159                                 ref='validationForm'
 160                                 hasButtons={true}
 161                                 onSubmit={ () => this.submit() }
 162                                 isValid={this.props.isFormValid}
 163                                 formReady={this.props.formReady}
 164                                 onValidateForm={() => this.props.onValidateForm(FG_EDITOR_FORM) }
 165                                 onReset={ () => this.props.onCancel() }
 166                                 labledButtons={true}
 167                                 isReadOnlyMode={isReadOnlyMode}
 168                                 name='feature-group-validation-form'
 169                                 className='feature-group-form'>
 170                                 <Tabs activeKey={onTabSelect ? selectedTab : undefined} onSelect={onTabSelect} invalidTabs={invalidTabs} id='vlmFGValTabs' >
 171                                         <Tab eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL} title={i18n('General')}  >
 172                                                 <fieldset disabled={isReadOnlyMode}>
 173                                                         <GeneralTab data={data} onDataChanged={onDataChanged} genericFieldInfo={genericFieldInfo}  validateName={(value)=> this.validateName(value)}/>
 174                                                 </fieldset>
 175                                         </Tab>
 176                                         <Tab
 177                                                 eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.ENTITLEMENT_POOLS}
 178                                                 title={i18n('Entitlement Pools')} >
 179                                                 <fieldset disabled={isReadOnlyMode}>
 180                                                         <EntitlementPoolsTab isReadOnlyMode={isReadOnlyMode} data={data} onDataChanged={onDataChanged} entitlementPoolsList={entitlementPoolsList} />
 181                                                 </fieldset>
 182                                         </Tab>
 183                                         <Tab
 184                                                 eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENSE_KEY_GROUPS}
 185                                                 title={i18n('License Key Groups')} >
 186                                                 <fieldset disabled={isReadOnlyMode}>
 187                                                         <LKGTab isReadOnlyMode={isReadOnlyMode} data={data} onDataChanged={onDataChanged} licenseKeyGroupsList={licenseKeyGroupsList} />
 188                                                 </fieldset>
 189                                         </Tab>
 190                                 </Tabs>
 191
 192                                 </Form> }
 193                         </div>
 194                 );
 195         }
 196
 197         submit() {
 198                 const {data: featureGroup, previousData: previousFeatureGroup} = this.props;
 199                 this.props.onSubmit(previousFeatureGroup, featureGroup);
 200         }
 201
 202         validateName(value) {
 203                 const {data: {id}, FGNames} = this.props;
 204                 const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: FGNames});
 205
 206                 return !isExists ?  {isValid: true, errorText: ''} :
 207                         {isValid: false, errorText: i18n('Feature group by the name \'' + value + '\' already exists. Feature group name must be unique')};
 208         }
 209 }
 210
 211
 212 export default FeatureGroupEditorView;