summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx483
1 files changed, 296 insertions, 187 deletions
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 6d0acaa65d..fc8269332a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
@@ -19,211 +19,320 @@ import Tabs from 'nfvo-components/input/validation/Tabs.jsx';
import Tab from 'sdc-ui/lib/react/Tab.js';
import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {TabsForm as Form} from 'nfvo-components/input/validation/Form.jsx';
+import { TabsForm as Form } from 'nfvo-components/input/validation/Form.jsx';
import DualListboxView from 'nfvo-components/input/dualListbox/DualListboxView.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, FG_EDITOR_FORM} from './FeatureGroupsConstants.js';
+import {
+ state as FeatureGroupStateConstants,
+ FG_EDITOR_FORM
+} from './FeatureGroupsConstants.js';
const FeatureGroupsPropType = PropTypes.shape({
- id: PropTypes.string,
- name: PropTypes.string,
- description: PropTypes.string,
- partNumber: PropTypes.string,
- manufacturerReferenceNumber: PropTypes.string,
- entitlementPoolsIds: PropTypes.arrayOf(PropTypes.string),
- licenseKeyGroupsIds: PropTypes.arrayOf(PropTypes.string)
+ id: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ partNumber: PropTypes.string,
+ manufacturerReferenceNumber: PropTypes.string,
+ entitlementPoolsIds: PropTypes.arrayOf(PropTypes.string),
+ licenseKeyGroupsIds: PropTypes.arrayOf(PropTypes.string)
});
-const GeneralTab = ({data = {}, onDataChanged, genericFieldInfo, validateName}) => {
- let {name, description, partNumber, manufacturerReferenceNumber} = data;
- return (
- <GridSection hasLastColSet>
- <GridItem colSpan={2}>
- <Input
- groupClassName='field-section'
- onChange={name => 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} />
- </GridItem>
- <GridItem colSpan={2} lastColInRow>
- <Input
- groupClassName='field-section'
- className='description-field'
- onChange={description => onDataChanged({description}, FG_EDITOR_FORM)}
- data-test-id='create-fg-description'
- label={i18n('Description')}
- value={description}
- name='feature-group-description'
- type='textarea'
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText} />
- </GridItem>
- <GridItem colSpan={2}>
- <Input
- groupClassName='field-section'
- onChange={partNumber => 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} />
- </GridItem>
- <GridItem colSpan={2} lastColInRow>
- <Input
- groupClassName='field-section'
- onChange={manufacturerReferenceNumber => onDataChanged({manufacturerReferenceNumber}, FG_EDITOR_FORM)}
- label={i18n('Manufacturer Reference Number')}
- data-test-id='create-fg-reference-number'
- value={manufacturerReferenceNumber}
- isRequired={true}
- type='text'
- isValid={genericFieldInfo.manufacturerReferenceNumber.isValid}
- errorText={genericFieldInfo.manufacturerReferenceNumber.errorText} />
- </GridItem>
- </GridSection>
- );
+const GeneralTab = ({
+ data = {},
+ onDataChanged,
+ genericFieldInfo,
+ validateName
+}) => {
+ let { name, description, partNumber, manufacturerReferenceNumber } = data;
+ return (
+ <GridSection hasLastColSet>
+ <GridItem colSpan={2}>
+ <Input
+ groupClassName="field-section"
+ onChange={name =>
+ 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}
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow>
+ <Input
+ groupClassName="field-section"
+ className="description-field"
+ onChange={description =>
+ onDataChanged({ description }, FG_EDITOR_FORM)
+ }
+ data-test-id="create-fg-description"
+ label={i18n('Description')}
+ value={description}
+ name="feature-group-description"
+ type="textarea"
+ isValid={genericFieldInfo.description.isValid}
+ errorText={genericFieldInfo.description.errorText}
+ />
+ </GridItem>
+ <GridItem colSpan={2}>
+ <Input
+ groupClassName="field-section"
+ onChange={partNumber =>
+ 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}
+ />
+ </GridItem>
+ <GridItem colSpan={2} lastColInRow>
+ <Input
+ groupClassName="field-section"
+ onChange={manufacturerReferenceNumber =>
+ onDataChanged(
+ { manufacturerReferenceNumber },
+ FG_EDITOR_FORM
+ )
+ }
+ label={i18n('Manufacturer Reference Number')}
+ data-test-id="create-fg-reference-number"
+ value={manufacturerReferenceNumber}
+ isRequired={true}
+ type="text"
+ isValid={
+ genericFieldInfo.manufacturerReferenceNumber.isValid
+ }
+ errorText={
+ genericFieldInfo.manufacturerReferenceNumber.errorText
+ }
+ />
+ </GridItem>
+ </GridSection>
+ );
};
-const EntitlementPoolsTab = ({entitlementPoolsList, data, onDataChanged, isReadOnlyMode}) => {
- const dualBoxFilterTitle = {
- left: i18n('Available Entitlement Pools'),
- right: i18n('Selected Entitlement Pools')
- };
- if (entitlementPoolsList.length > 0) {
- return (
- <DualListboxView
- isReadOnlyMode={isReadOnlyMode}
- filterTitle={dualBoxFilterTitle}
- selectedValuesList={data.entitlementPoolsIds}
- availableList={entitlementPoolsList}
- onChange={ selectedValuesList => onDataChanged( { entitlementPoolsIds: selectedValuesList }, FG_EDITOR_FORM )}/>
- );
- } else {
- return (
- <p>{i18n('There are no available entitlement pools')}</p>
- );
- }
+const EntitlementPoolsTab = ({
+ entitlementPoolsList,
+ data,
+ onDataChanged,
+ isReadOnlyMode
+}) => {
+ const dualBoxFilterTitle = {
+ left: i18n('Available Entitlement Pools'),
+ right: i18n('Selected Entitlement Pools')
+ };
+ if (entitlementPoolsList.length > 0) {
+ return (
+ <DualListboxView
+ isReadOnlyMode={isReadOnlyMode}
+ filterTitle={dualBoxFilterTitle}
+ selectedValuesList={data.entitlementPoolsIds}
+ availableList={entitlementPoolsList}
+ onChange={selectedValuesList =>
+ onDataChanged(
+ { entitlementPoolsIds: selectedValuesList },
+ FG_EDITOR_FORM
+ )
+ }
+ />
+ );
+ } else {
+ return <p>{i18n('There are no available entitlement pools')}</p>;
+ }
};
-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 (
- <DualListboxView
- isReadOnlyMode={isReadOnlyMode}
- filterTitle={dualBoxFilterTitle}
- selectedValuesList={data.licenseKeyGroupsIds}
- availableList={licenseKeyGroupsList}
- onChange={ selectedValuesList => onDataChanged( { licenseKeyGroupsIds: selectedValuesList }, FG_EDITOR_FORM )}/>
- );
- } else {
- return (
- <p>{i18n('There are no available license key groups')}</p>
- );
- }
+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 (
+ <DualListboxView
+ isReadOnlyMode={isReadOnlyMode}
+ filterTitle={dualBoxFilterTitle}
+ selectedValuesList={data.licenseKeyGroupsIds}
+ availableList={licenseKeyGroupsList}
+ onChange={selectedValuesList =>
+ onDataChanged(
+ { licenseKeyGroupsIds: selectedValuesList },
+ FG_EDITOR_FORM
+ )
+ }
+ />
+ );
+ } else {
+ return <p>{i18n('There are no available license key groups')}</p>;
+ }
};
class FeatureGroupEditorView extends React.Component {
+ static propTypes = {
+ data: FeatureGroupsPropType,
+ previousData: FeatureGroupsPropType,
+ isReadOnlyMode: PropTypes.bool,
+ FGNames: PropTypes.object,
+ onSubmit: PropTypes.func,
+ onCancel: PropTypes.func,
- static propTypes = {
- data: FeatureGroupsPropType,
- previousData: FeatureGroupsPropType,
- isReadOnlyMode: PropTypes.bool,
- FGNames: PropTypes.object,
-
- onSubmit: PropTypes.func,
- onCancel: PropTypes.func,
-
- selectedTab: PropTypes.number,
- onTabSelect: PropTypes.func,
-
- entitlementPoolsList: DualListboxView.propTypes.availableList,
- licenseKeyGroupsList: DualListboxView.propTypes.availableList
- };
-
-
- static defaultProps = {
- data: {},
- selectedTab: FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL,
- };
-
- state = {
- localEntitlementPoolsListFilter: '',
- localLicenseKeyGroupsListFilter: ''
- };
-
-
- render() {
- let {selectedTab, onTabSelect, isReadOnlyMode, invalidTabs, data, onDataChanged, genericFieldInfo, entitlementPoolsList, licenseKeyGroupsList} = this.props;
- return (
- <div>
- { genericFieldInfo && <Form
- ref='validationForm'
- hasButtons={true}
- onSubmit={ () => 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='license-model-form feature-group-form'>
- <Tabs activeTab={onTabSelect ? selectedTab : undefined} onTabClick={onTabSelect} invalidTabs={invalidTabs} id='vlmFGValTabs' >
- <Tab tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL} title={i18n('General')} >
- <fieldset disabled={isReadOnlyMode}>
- <GeneralTab data={data} onDataChanged={onDataChanged} genericFieldInfo={genericFieldInfo} validateName={(value)=> this.validateName(value)}/>
- </fieldset>
- </Tab>
- <Tab
- tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.ENTITLEMENT_POOLS}
- title={i18n('Entitlement Pools')} >
- <fieldset disabled={isReadOnlyMode}>
- <EntitlementPoolsTab isReadOnlyMode={isReadOnlyMode} data={data} onDataChanged={onDataChanged} entitlementPoolsList={entitlementPoolsList} />
- </fieldset>
- </Tab>
- <Tab
- tabId={FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.LICENSE_KEY_GROUPS}
- title={i18n('License Key Groups')} >
- <fieldset disabled={isReadOnlyMode}>
- <LKGTab isReadOnlyMode={isReadOnlyMode} data={data} onDataChanged={onDataChanged} licenseKeyGroupsList={licenseKeyGroupsList} />
- </fieldset>
- </Tab>
- </Tabs>
-
- </Form> }
- </div>
- );
- }
-
- submit() {
- const {data: featureGroup, previousData: previousFeatureGroup} = this.props;
- this.props.onSubmit(previousFeatureGroup, featureGroup);
- }
-
- 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')};
- }
-}
+ selectedTab: PropTypes.number,
+ onTabSelect: PropTypes.func,
+
+ entitlementPoolsList: DualListboxView.propTypes.availableList,
+ licenseKeyGroupsList: DualListboxView.propTypes.availableList
+ };
+
+ static defaultProps = {
+ data: {},
+ selectedTab:
+ FeatureGroupStateConstants.SELECTED_FEATURE_GROUP_TAB.GENERAL
+ };
+
+ state = {
+ localEntitlementPoolsListFilter: '',
+ localLicenseKeyGroupsListFilter: ''
+ };
+ render() {
+ let {
+ selectedTab,
+ onTabSelect,
+ isReadOnlyMode,
+ invalidTabs,
+ data,
+ onDataChanged,
+ genericFieldInfo,
+ entitlementPoolsList,
+ licenseKeyGroupsList
+ } = this.props;
+ return (
+ <div>
+ {genericFieldInfo && (
+ <Form
+ ref="validationForm"
+ hasButtons={true}
+ onSubmit={() => 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="license-model-form feature-group-form">
+ <Tabs
+ activeTab={onTabSelect ? selectedTab : undefined}
+ onTabClick={onTabSelect}
+ invalidTabs={invalidTabs}
+ id="vlmFGValTabs">
+ <Tab
+ tabId={
+ FeatureGroupStateConstants
+ .SELECTED_FEATURE_GROUP_TAB.GENERAL
+ }
+ title={i18n('General')}>
+ <fieldset disabled={isReadOnlyMode}>
+ <GeneralTab
+ data={data}
+ onDataChanged={onDataChanged}
+ genericFieldInfo={genericFieldInfo}
+ validateName={value =>
+ this.validateName(value)
+ }
+ />
+ </fieldset>
+ </Tab>
+ <Tab
+ tabId={
+ FeatureGroupStateConstants
+ .SELECTED_FEATURE_GROUP_TAB
+ .ENTITLEMENT_POOLS
+ }
+ title={i18n('Entitlement Pools')}>
+ <fieldset disabled={isReadOnlyMode}>
+ <EntitlementPoolsTab
+ isReadOnlyMode={isReadOnlyMode}
+ data={data}
+ onDataChanged={onDataChanged}
+ entitlementPoolsList={
+ entitlementPoolsList
+ }
+ />
+ </fieldset>
+ </Tab>
+ <Tab
+ tabId={
+ FeatureGroupStateConstants
+ .SELECTED_FEATURE_GROUP_TAB
+ .LICENSE_KEY_GROUPS
+ }
+ title={i18n('License Key Groups')}>
+ <fieldset disabled={isReadOnlyMode}>
+ <LKGTab
+ isReadOnlyMode={isReadOnlyMode}
+ data={data}
+ onDataChanged={onDataChanged}
+ licenseKeyGroupsList={
+ licenseKeyGroupsList
+ }
+ />
+ </fieldset>
+ </Tab>
+ </Tabs>
+ </Form>
+ )}
+ </div>
+ );
+ }
+
+ submit() {
+ const {
+ data: featureGroup,
+ previousData: previousFeatureGroup
+ } = this.props;
+ this.props.onSubmit(previousFeatureGroup, featureGroup);
+ }
+
+ 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;