From 280f8015d06af1f41a3ef12e8300801c7a5e0d54 Mon Sep 17 00:00:00 2001 From: AviZi Date: Fri, 9 Jun 2017 02:39:56 +0300 Subject: [SDC-29] Amdocs OnBoard 1707 initial commit. Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370 Signed-off-by: AviZi --- .../featureGroups/FeatureGroupEditorView.jsx | 413 +++++++-------------- 1 file changed, 140 insertions(+), 273 deletions(-) (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx') diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx index 6fecd16b71..5ae22cba95 100644 --- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx @@ -1,27 +1,125 @@ +/*! + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing + * permissions and limitations under the License. + */ import React from 'react'; -import ValidationTabs from 'nfvo-components/input/validation/ValidationTabs.jsx'; -import ValidationTab from 'nfvo-components/input/validation/ValidationTab.jsx'; -import ButtonGroup from 'react-bootstrap/lib/ButtonGroup.js'; -import Button from 'react-bootstrap/lib/Button.js'; - -import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx'; +import Tabs from 'nfvo-components/input/validation/Tabs.jsx'; +import Tab from 'react-bootstrap/lib/Tab.js'; +import GridSection from 'nfvo-components/grid/GridSection.jsx'; +import GridItem from 'nfvo-components/grid/GridItem.jsx'; +import Form from 'nfvo-components/input/validation/Form.jsx'; import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.jsx'; -import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx'; -import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; -import ListEditorViewItem from 'nfvo-components/listEditor/ListEditorItemView.jsx'; +import Input from 'nfvo-components/input/validation/Input.jsx'; import i18n from 'nfvo-utils/i18n/i18n.js'; +import Validator from 'nfvo-utils/Validator.js'; -import {state as FeatureGroupStateConstants} from './FeatureGroupsConstants.js'; +import {state as FeatureGroupStateConstants, FG_EDITOR_FORM} from './FeatureGroupsConstants.js'; const FeatureGroupsPropType = React.PropTypes.shape({ id: React.PropTypes.string, name: React.PropTypes.string, description: React.PropTypes.string, partNumber: React.PropTypes.string, - entitlementPoolsIds: React.PropTypes.array(React.PropTypes.string), - licenseKeyGroupsIds: React.PropTypes.array(React.PropTypes.string) + entitlementPoolsIds: React.PropTypes.arrayOf(React.PropTypes.string), + licenseKeyGroupsIds: React.PropTypes.arrayOf(React.PropTypes.string) }); +const GeneralTab = ({data = {}, onDataChanged, genericFieldInfo, validateName}) => { + let {name, description, partNumber} = data; + return ( + + + onDataChanged({name}, FG_EDITOR_FORM, {name: validateName})} + label={i18n('Name')} + data-test-id='create-fg-name' + value={name} + name='feature-group-name' + type='text' + isRequired={true} + isValid={genericFieldInfo.name.isValid} + errorText={genericFieldInfo.name.errorText} /> + onDataChanged({description}, FG_EDITOR_FORM)} + data-test-id='create-fg-description' + label={i18n('Description')} + value={description} + name='feature-group-description' + type='textarea' + isRequired={true} + isValid={genericFieldInfo.description.isValid} + errorText={genericFieldInfo.description.errorText} /> + onDataChanged({partNumber}, FG_EDITOR_FORM)} + label={i18n('Part Number')} + data-test-id='create-fg-part-number' + value={partNumber} + isRequired={true} + type='text' + isValid={genericFieldInfo.partNumber.isValid} + errorText={genericFieldInfo.partNumber.errorText} /> + + + ); +}; + +const EntitlementPoolsTab = ({entitlementPoolsList, data, onDataChanged, isReadOnlyMode}) => { + const dualBoxFilterTitle = { + left: i18n('Available Entitlement Pools'), + right: i18n('Selected Entitlement Pools') + }; + if (entitlementPoolsList.length > 0) { + return ( + onDataChanged( { entitlementPoolsIds: selectedValuesList }, FG_EDITOR_FORM )}/> + ); + } else { + return ( +

{i18n('There is no available entitlement pools')}

+ ); + } +}; + +const LKGTab = ({licenseKeyGroupsList, data, onDataChanged, isReadOnlyMode}) => { + const dualBoxFilterTitle = { + left: i18n('Available License Key Groups'), + right: i18n('Selected License Key Groups') + }; + if (licenseKeyGroupsList.length > 0) { + return ( + onDataChanged( { licenseKeyGroupsIds: selectedValuesList }, FG_EDITOR_FORM )}/> + ); + } else { + return ( +

{i18n('There is no available licsense key groups')}

+ ); + } +}; + class FeatureGroupEditorView extends React.Component { @@ -29,6 +127,7 @@ class FeatureGroupEditorView extends React.Component { data: FeatureGroupsPropType, previousData: FeatureGroupsPropType, isReadOnlyMode: React.PropTypes.bool, + FGNames: React.PropTypes.object, onSubmit: React.PropTypes.func, onCancel: React.PropTypes.func, @@ -36,11 +135,6 @@ class FeatureGroupEditorView extends React.Component { selectedTab: React.PropTypes.number, onTabSelect: React.PropTypes.func, - selectedEntitlementPoolsButtonTab: React.PropTypes.number, - selectedLicenseKeyGroupsButtonTab: React.PropTypes.number, - onEntitlementPoolsButtonTabSelect: React.PropTypes.func, - onLicenseKeyGroupsButtonTabSelect: React.PropTypes.func, - entitlementPoolsList: DualListboxView.propTypes.availableList, licenseKeyGroupsList: DualListboxView.propTypes.availableList }; @@ -49,8 +143,6 @@ class FeatureGroupEditorView extends React.Component { static defaultProps = { data: {}, selectedTab: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL, - selectedEntitlementPoolsButtonTab: FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.ASSOCIATED_ENTITLEMENT_POOLS, - selectedLicenseKeyGroupsButtonTab: FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.ASSOCIATED_LICENSE_KEY_GROUPS }; state = { @@ -60,24 +152,39 @@ class FeatureGroupEditorView extends React.Component { render() { - let {selectedTab, onTabSelect, isReadOnlyMode} = this.props; + let {selectedTab, onTabSelect, isReadOnlyMode, invalidTabs, data, onDataChanged, genericFieldInfo, entitlementPoolsList, licenseKeyGroupsList} = this.props; return ( - + { genericFieldInfo &&
this.submit() } + isValid={this.props.isFormValid} + formReady={this.props.formReady} + onValidateForm={() => this.props.onValidateForm(FG_EDITOR_FORM) } onReset={ () => this.props.onCancel() } labledButtons={true} isReadOnlyMode={isReadOnlyMode} name='feature-group-validation-form' className='feature-group-form'> - - {this.renderGeneralTab()} - {this.renderEntitlementPoolsTab()} - {this.renderLicenseKeyGroupsTab()} - - - + + + this.validateName(value)}/> + + + + + + + + + +
} + ); } @@ -86,254 +193,14 @@ class FeatureGroupEditorView extends React.Component { this.props.onSubmit(previousFeatureGroup, featureGroup); } - renderGeneralTab() { - let {data = {}, onDataChanged} = this.props; - let {name, description, partNumber} = data; - return ( - -
- onDataChanged({name})} - ref='name' - label={i18n('Name')} - value={name} - name='feature-group-name' - validations={{maxLength: 120, required: true}} - type='text'/> - onDataChanged({description})} - ref='description' - label={i18n('Description')} - value={description} - name='feature-group-description' - validations={{maxLength: 1000, required: true}} - type='textarea'/> - onDataChanged({partNumber})} - label={i18n('Part Number')} - value={partNumber} - validations={{required: true}} - type='text'/> -
- - ); - } - - renderEntitlementPoolsTab() { - let {selectedEntitlementPoolsButtonTab, onEntitlementPoolsButtonTabSelect, entitlementPoolsList} = this.props; - if (entitlementPoolsList.length > 0) { - return ( - - - { - this.renderButtonsTab( - FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.ASSOCIATED_ENTITLEMENT_POOLS, - selectedEntitlementPoolsButtonTab, - i18n('Associated Entitlement Pools'), - onEntitlementPoolsButtonTabSelect - ) - } - { - this.renderButtonsTab( - FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.AVAILABLE_ENTITLEMENT_POOLS, - selectedEntitlementPoolsButtonTab, - i18n('Available Entitlement Pools'), - onEntitlementPoolsButtonTabSelect - ) - } - - {this.renderEntitlementPoolsButtonTabContent(selectedEntitlementPoolsButtonTab)} - - ); - } else { - return ( - -

{i18n('There is no available entitlement pools.')}

- - ); - } - } - - renderLicenseKeyGroupsTab() { - let {selectedLicenseKeyGroupsButtonTab, onLicenseKeyGroupsButtonTabSelect, licenseKeyGroupsList} = this.props; - if (licenseKeyGroupsList.length > 0) { - return ( - - - { - this.renderButtonsTab( - FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.ASSOCIATED_LICENSE_KEY_GROUPS, - selectedLicenseKeyGroupsButtonTab, - i18n('Associated License Key Groups'), - onLicenseKeyGroupsButtonTabSelect - ) - } - { - this.renderButtonsTab( - FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.AVAILABLE_LICENSE_KEY_GROUPS, - selectedLicenseKeyGroupsButtonTab, - i18n('Available License Key Groups'), - onLicenseKeyGroupsButtonTabSelect - ) - } - - {this.renderLicenseKeyGroupsTabContent(selectedLicenseKeyGroupsButtonTab)} - - ); - } else { - return ( - -

{i18n('There is no available license key groups')}

- ); - } - } - - renderButtonsTab(buttonTab, selectedButtonTab, title, onClick) { - const isSelected = buttonTab === selectedButtonTab; - return ( - - ); - } - - renderEntitlementPoolsButtonTabContent(selectedFeatureGroupsButtonTab) { - const {entitlementPoolsList = [], data: {entitlementPoolsIds = []}} = this.props; - let dualBoxTitle = { - left: i18n('Available Entitlement Pools'), - right: i18n('Selected Entitlement Pools') - }; - - if (entitlementPoolsList.length) { - const {localEntitlementPoolsListFilter} = this.state; - let selectedEntitlementPools = entitlementPoolsIds.map(entitlementPoolId => entitlementPoolsList.find(entitlementPool => entitlementPool.id === entitlementPoolId)); - - switch (selectedFeatureGroupsButtonTab) { - case FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.ASSOCIATED_ENTITLEMENT_POOLS: - if (selectedEntitlementPools.length) { - return ( - this.setState({localEntitlementPoolsListFilter})}> - {this.filterAssociatedItems(selectedEntitlementPools, localEntitlementPoolsListFilter) - .map(entitlementPool => this.renderAssociatedListItem(entitlementPool - , FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.ENTITLEMENT_POOLS))} - - ); - } - else { - return ( -
-
{i18n('There are currently no entitlement pools associated with this feature group. Click "Available Entitlement Pools" to associate.')} -
- ); - } - case FeatureGroupStateConstants.SELECTED_ENTITLEMENT_POOLS_BUTTONTAB.AVAILABLE_ENTITLEMENT_POOLS: - return ( - this.props.onDataChanged( { entitlementPoolsIds: selectedValuesList } )}/> - ); - } - } - } - - renderLicenseKeyGroupsTabContent(selectedFeatureGroupsButtonTab) { - const {licenseKeyGroupsList = [], data: {licenseKeyGroupsIds = []}} = this.props; - let dualBoxFilterTitle = { - left: i18n('Available License Key Groups'), - right: i18n('Selected License Key Groups') - }; - - if (licenseKeyGroupsList.length) { - const {localLicenseKeyGroupsListFilter} = this.state; - let selectedLicenseKeyGroups = licenseKeyGroupsIds.map(licenseKeyGroupId => licenseKeyGroupsList.find(licenseKeyGroup => licenseKeyGroup.id === licenseKeyGroupId)); - - switch (selectedFeatureGroupsButtonTab) { - case FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.ASSOCIATED_LICENSE_KEY_GROUPS: - if (selectedLicenseKeyGroups.length) { - return ( - this.setState({localLicenseKeyGroupsListFilter})}> - {this.filterAssociatedItems(selectedLicenseKeyGroups, localLicenseKeyGroupsListFilter) - .map(licenseKeyGroup => this.renderAssociatedListItem(licenseKeyGroup - , FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENCE_KEY_GROUPS))} - - ); - } else { - return ( -
- {i18n('There are currently no license key groups associated with this feature group. Click "Available License Key Groups" to associate.')} -
- ); - } - case FeatureGroupStateConstants.SELECTED_LICENSE_KEY_GROUPS_BUTTONTAB.AVAILABLE_LICENSE_KEY_GROUPS: - return ( - this.props.onDataChanged( { licenseKeyGroupsIds: selectedValuesList } )}/> - ); - } - } - } - - - renderAssociatedListItem(listItem, itemType) { - let {isReadOnlyMode} = this.props; - return ( - this.deleteAssociatedItem(listItem.id, itemType)} - isReadOnlyMode={isReadOnlyMode}> -
{listItem.name}
-
{listItem.description}
- - ); - } - - filterAssociatedItems(list, localList) { - if (localList) { - const filter = new RegExp(escape(localList), 'i'); - return list.filter(({name = '', description = ''}) => name.match(filter) || description.match(filter)); - } - else { - return list; - } - } - - deleteAssociatedItem(id, type) { - const {data: {licenseKeyGroupsIds = [], entitlementPoolsIds = []}} = this.props; - if (type === FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENCE_KEY_GROUPS) { - this.props.onDataChanged({licenseKeyGroupsIds: licenseKeyGroupsIds.filter(listId => listId !== id)}); - } else { - this.props.onDataChanged({entitlementPoolsIds: entitlementPoolsIds.filter(listId => listId !== id)}); - } + validateName(value) { + const {data: {id}, FGNames} = this.props; + const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: FGNames}); + return !isExists ? {isValid: true, errorText: ''} : + {isValid: false, errorText: i18n('Feature group by the name \'' + value + '\' already exists. Feature group name must be unique')}; } } export default FeatureGroupEditorView; - -- cgit 1.2.3-korg