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