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