2 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
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
8 * http://www.apache.org/licenses/LICENSE-2.0
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.
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 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';
27 import {state as FeatureGroupStateConstants, FG_EDITOR_FORM} from './FeatureGroupsConstants.js';
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)
38 const GeneralTab = ({data = {}, onDataChanged, genericFieldInfo, validateName}) => {
39 let {name, description, partNumber} = data;
42 <GridItem colSpan={2}>
44 groupClassName='field-section'
45 onChange={name => onDataChanged({name}, FG_EDITOR_FORM, {name: validateName})}
47 data-test-id='create-fg-name'
49 name='feature-group-name'
52 isValid={genericFieldInfo.name.isValid}
53 errorText={genericFieldInfo.name.errorText} />
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')}
61 name='feature-group-description'
64 isValid={genericFieldInfo.description.isValid}
65 errorText={genericFieldInfo.description.errorText} />
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'
74 isValid={genericFieldInfo.partNumber.isValid}
75 errorText={genericFieldInfo.partNumber.errorText} />
81 const EntitlementPoolsTab = ({entitlementPoolsList, data, onDataChanged, isReadOnlyMode}) => {
82 const dualBoxFilterTitle = {
83 left: i18n('Available Entitlement Pools'),
84 right: i18n('Selected Entitlement Pools')
86 if (entitlementPoolsList.length > 0) {
89 isReadOnlyMode={isReadOnlyMode}
90 filterTitle={dualBoxFilterTitle}
91 selectedValuesList={data.entitlementPoolsIds}
92 availableList={entitlementPoolsList}
93 onChange={ selectedValuesList => onDataChanged( { entitlementPoolsIds: selectedValuesList }, FG_EDITOR_FORM )}/>
97 <p>{i18n('There is no available entitlement pools')}</p>
102 const LKGTab = ({licenseKeyGroupsList, data, onDataChanged, isReadOnlyMode}) => {
103 const dualBoxFilterTitle = {
104 left: i18n('Available License Key Groups'),
105 right: i18n('Selected License Key Groups')
107 if (licenseKeyGroupsList.length > 0) {
110 isReadOnlyMode={isReadOnlyMode}
111 filterTitle={dualBoxFilterTitle}
112 selectedValuesList={data.licenseKeyGroupsIds}
113 availableList={licenseKeyGroupsList}
114 onChange={ selectedValuesList => onDataChanged( { licenseKeyGroupsIds: selectedValuesList }, FG_EDITOR_FORM )}/>
118 <p>{i18n('There is no available licsense key groups')}</p>
123 class FeatureGroupEditorView extends React.Component {
127 data: FeatureGroupsPropType,
128 previousData: FeatureGroupsPropType,
129 isReadOnlyMode: React.PropTypes.bool,
130 FGNames: React.PropTypes.object,
132 onSubmit: React.PropTypes.func,
133 onCancel: React.PropTypes.func,
135 selectedTab: React.PropTypes.number,
136 onTabSelect: React.PropTypes.func,
138 entitlementPoolsList: DualListboxView.propTypes.availableList,
139 licenseKeyGroupsList: DualListboxView.propTypes.availableList
143 static defaultProps = {
145 selectedTab: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL,
149 localEntitlementPoolsListFilter: '',
150 localLicenseKeyGroupsListFilter: ''
155 let {selectedTab, onTabSelect, isReadOnlyMode, invalidTabs, data, onDataChanged, genericFieldInfo, entitlementPoolsList, licenseKeyGroupsList} = this.props;
158 { genericFieldInfo && <Form
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() }
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 <GeneralTab data={data} onDataChanged={onDataChanged} genericFieldInfo={genericFieldInfo} validateName={(value)=> this.validateName(value)}/>
175 eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.ENTITLEMENT_POOLS}
176 title={i18n('Entitlement Pools')} >
177 <EntitlementPoolsTab isReadOnlyMode={isReadOnlyMode} data={data} onDataChanged={onDataChanged} entitlementPoolsList={entitlementPoolsList} />
180 eventKey={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENSE_KEY_GROUPS}
181 title={i18n('License Key Groups')} >
182 <LKGTab isReadOnlyMode={isReadOnlyMode} data={data} onDataChanged={onDataChanged} licenseKeyGroupsList={licenseKeyGroupsList} />
192 const {data: featureGroup, previousData: previousFeatureGroup} = this.props;
193 this.props.onSubmit(previousFeatureGroup, featureGroup);
196 validateName(value) {
197 const {data: {id}, FGNames} = this.props;
198 const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: FGNames});
200 return !isExists ? {isValid: true, errorText: ''} :
201 {isValid: false, errorText: i18n('Feature group by the name \'' + value + '\' already exists. Feature group name must be unique')};
206 export default FeatureGroupEditorView;