/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Copyright © 2016-2018 European Support Limited
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* permissions and limitations under the License.
*/
import React from 'react';
+import PropTypes from 'prop-types';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Validator from 'nfvo-utils/Validator.js';
+import Tabs from 'sdc-ui/lib/react/Tabs.js';
+import Tab from 'sdc-ui/lib/react/Tab.js';
+
+import Button from 'sdc-ui/lib/react/Button.js';
import Form from 'nfvo-components/input/validation/Form.jsx';
-import Input from 'nfvo-components/input/validation/Input.jsx';
-import GridSection from 'nfvo-components/grid/GridSection.jsx';
-import GridItem from 'nfvo-components/grid/GridItem.jsx';
-import {optionsInputValues as licenseKeyGroupOptionsInputValues, LKG_FORM_NAME} from './LicenseKeyGroupsConstants.js';
-import {other as optionInputOther} from 'nfvo-components/input/validation/InputOptions.jsx';
-import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
-
-const LicenseKeyGroupPropType = React.PropTypes.shape({
- id: React.PropTypes.string,
- name: React.PropTypes.string,
- description: React.PropTypes.string,
- operationalScope: React.PropTypes.shape({
- choices: React.PropTypes.array,
- other: React.PropTypes.string
- }),
- type: React.PropTypes.string
-});
+//import GridSection from 'nfvo-components/grid/GridSection.jsx';
+import { LKG_FORM_NAME, tabIds } from './LicenseKeyGroupsConstants.js';
+
+import {
+ validateStartDate,
+ thresholdValueValidation
+} from '../LicenseModelValidations.js';
+
+import LicenseKeyGroupsLimits from './LicenseKeyGroupsLimits.js';
+import {
+ limitType,
+ NEW_LIMIT_TEMP_ID
+} from '../limits/LimitEditorConstants.js';
+import LicenseKeyGroupFormContent from './components/FormContent.jsx';
+import ModalButtons from 'sdc-app/onboarding/licenseModel/components/ModalButtons.jsx';
-const LicenseKeyGroupFormContent = ({data, onDataChanged, genericFieldInfo, validateName, validateOperationalScope}) => {
- let {name, description, operationalScope, type} = data;
- return (
- <GridSection>
- <GridItem colSpan={2}>
- <Input
- onChange={name => onDataChanged({name}, LKG_FORM_NAME, {name: validateName})}
- label={i18n('Name')}
- data-test-id='create-lkg-name'
- value={name}
- isValid={genericFieldInfo.name.isValid}
- errorText={genericFieldInfo.name.errorText}
- isRequired={true}
- type='text'/>
- </GridItem>
- <GridItem colSpan={2}>
- <InputOptions
- onInputChange={()=>{}}
- isMultiSelect={true}
- isRequired={true}
- onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}},
- LKG_FORM_NAME, {operationalScope: validateOperationalScope})}
- onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER],
- other: operationalScope}}, LKG_FORM_NAME, {operationalScope: validateOperationalScope})}
- label={i18n('Operational Scope')}
- data-test-id='create-lkg-operational-scope'
- type='select'
- multiSelectedEnum={operationalScope && operationalScope.choices}
- otherValue={operationalScope && operationalScope.other}
- values={licenseKeyGroupOptionsInputValues.OPERATIONAL_SCOPE}
- isValid={genericFieldInfo.operationalScope.isValid}
- errorText={genericFieldInfo.operationalScope.errorText} />
- </GridItem>
- <GridItem colSpan={2}>
- <Input
- onChange={description => onDataChanged({description}, LKG_FORM_NAME)}
- label={i18n('Description')}
- data-test-id='create-lkg-description'
- value={description}
- isValid={genericFieldInfo.description.isValid}
- errorText={genericFieldInfo.description.errorText}
- isRequired={true}
- type='textarea'
- overlayPos='bottom' />
- </GridItem>
- <GridItem colSpan={2}>
- <Input
- isRequired={true}
- onChange={e => { const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onDataChanged({type: val}, LKG_FORM_NAME);}}
- value={type}
- label={i18n('Type')}
- data-test-id='create-lkg-type'
- isValid={genericFieldInfo.type.isValid}
- errorText={genericFieldInfo.type.errorText}
- groupClassName='bootstrap-input-options'
- className='input-options-select'
- type='select' >
- {
- licenseKeyGroupOptionsInputValues.TYPE.map(type =>
- (<option key={type.enum} value={type.enum}>{type.title}</option>))
- }
- </Input>
- </GridItem>
- </GridSection>
- );
+const TabButton = props => {
+ const { onClick, disabled, className } = props;
+ const dataTestId = props['data-test-id'];
+ return (
+ <div
+ className={className}
+ onClick={disabled ? undefined : onClick}
+ data-test-id={dataTestId}
+ role="tab"
+ disabled={disabled}>
+ {props.children}
+ </div>
+ );
};
+const LicenseKeyGroupPropType = PropTypes.shape({
+ id: PropTypes.string,
+ name: PropTypes.string,
+ description: PropTypes.string,
+ increments: PropTypes.string,
+ type: PropTypes.string,
+ thresholdUnits: PropTypes.string,
+ thresholdValue: PropTypes.number,
+ startDate: PropTypes.string,
+ expiryDate: PropTypes.string
+});
+
class LicenseKeyGroupsEditorView extends React.Component {
- static propTypes = {
- data: LicenseKeyGroupPropType,
- previousData: LicenseKeyGroupPropType,
- LKGNames: React.PropTypes.object,
- isReadOnlyMode: React.PropTypes.bool,
- onDataChanged: React.PropTypes.func.isRequired,
- onSubmit: React.PropTypes.func.isRequired,
- onCancel: React.PropTypes.func.isRequired
- };
-
- static defaultProps = {
- data: {}
- };
-
- render() {
- let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo} = this.props;
- return (
- <div>
- { genericFieldInfo &&
- <Form
- ref='validationForm'
- hasButtons={true}
- onSubmit={ () => this.submit() }
- onReset={ () => this.props.onCancel() }
- isValid={this.props.isFormValid}
- formReady={this.props.formReady}
- onValidateForm={() => this.props.onValidateForm(LKG_FORM_NAME) }
- labledButtons={true}
- isReadOnlyMode={isReadOnlyMode}
- className='license-key-groups-form'>
- <LicenseKeyGroupFormContent
- data={data}
- onDataChanged={onDataChanged}
- genericFieldInfo={genericFieldInfo}
- validateName={(value)=> this.validateName(value)}
- validateOperationalScope={this.validateOperationalScope}/>
- </Form>}
- </div>
- );
- }
-
- submit() {
- const {data: licenseKeyGroup, previousData: previousLicenseKeyGroup} = this.props;
- this.props.onSubmit({licenseKeyGroup, previousLicenseKeyGroup});
- }
-
- validateName(value) {
- const {data: {id}, LKGNames} = this.props;
- const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: LKGNames});
-
- return !isExists ? {isValid: true, errorText: ''} :
- {isValid: false, errorText: i18n('License key group by the name \'' + value + '\' already exists. License key group name must be unique')};
- }
-
- validateOperationalScope(value) {
- if (value && value.choices && value.choices.length > 0) {
- if (value.choices[0] !== optionInputOther.OTHER)
- {
- return {
- isValid: true,
- errorText: ''
- };
- } else {
- if ( value.other ) {
- return {
- isValid: true,
- errorText: ''
- };
- }
- }
- }
- return {
- isValid: false,
- errorText: 'Field is required'
- };
- }
+ static propTypes = {
+ data: LicenseKeyGroupPropType,
+ previousData: LicenseKeyGroupPropType,
+ LKGNames: PropTypes.object,
+ isReadOnlyMode: PropTypes.bool,
+ onDataChanged: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired
+ };
+
+ static defaultProps = {
+ data: {}
+ };
+
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.formReady &&
+ this.props.formReady !== prevProps.formReady
+ ) {
+ // if form validation succeeded -> continue with submit
+ this.submit();
+ }
+ }
+
+ state = {
+ localFeatureGroupsListFilter: '',
+ selectedTab: tabIds.GENERAL,
+ selectedLimit: ''
+ };
+
+ render() {
+ let {
+ data = {},
+ onDataChanged,
+ isReadOnlyMode,
+ onCloseLimitEditor,
+ genericFieldInfo,
+ limitsList = []
+ } = this.props;
+ let { selectedTab } = this.state;
+ const isTabsDisabled = !data.id || !this.props.isFormValid;
+ return (
+ <div className="license-keygroup-editor license-model-modal license-key-groups-modal">
+ <Tabs
+ type="menu"
+ activeTab={selectedTab}
+ onTabClick={tabIndex => {
+ if (tabIndex === tabIds.ADD_LIMIT_BUTTON) {
+ this.onAddLimit();
+ } else {
+ this.setState({ selectedTab: tabIndex });
+ onCloseLimitEditor();
+ this.setState({ selectedLimit: '' });
+ }
+ }}
+ invalidTabs={[]}>
+ <Tab
+ tabId={tabIds.GENERAL}
+ data-test-id="general-tab"
+ title={i18n('General')}>
+ {genericFieldInfo && (
+ <Form
+ ref="validationForm"
+ hasButtons={false}
+ isValid={this.props.isFormValid}
+ formReady={this.props.formReady}
+ onValidateForm={() =>
+ this.props.onValidateForm(LKG_FORM_NAME)
+ }
+ labledButtons={true}
+ isReadOnlyMode={isReadOnlyMode}
+ className="license-model-form license-key-groups-form">
+ <LicenseKeyGroupFormContent
+ data={data}
+ onDataChanged={onDataChanged}
+ genericFieldInfo={genericFieldInfo}
+ validateName={value =>
+ this.validateName(value)
+ }
+ validateStartDate={(value, state) =>
+ validateStartDate(value, state)
+ }
+ thresholdValueValidation={(value, state) =>
+ thresholdValueValidation(value, state)
+ }
+ />
+ </Form>
+ )}
+ </Tab>
+ <Tab
+ tabId={tabIds.SP_LIMITS}
+ disabled={isTabsDisabled}
+ data-test-id="general-tab"
+ title={i18n('SP Limits')}>
+ {selectedTab === tabIds.SP_LIMITS && (
+ <LicenseKeyGroupsLimits
+ limitType={limitType.SERVICE_PROVIDER}
+ limitsList={limitsList.filter(
+ item =>
+ item.type === limitType.SERVICE_PROVIDER
+ )}
+ selectedLimit={this.state.selectedLimit}
+ onCloseLimitEditor={() =>
+ this.onCloseLimitEditor()
+ }
+ onSelectLimit={limit =>
+ this.onSelectLimit(limit)
+ }
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ </Tab>
+ <Tab
+ tabId={tabIds.VENDOR_LIMITS}
+ disabled={isTabsDisabled}
+ data-test-id="general-tab"
+ title={i18n('Vendor Limits')}>
+ {selectedTab === tabIds.VENDOR_LIMITS && (
+ <LicenseKeyGroupsLimits
+ limitType={limitType.VENDOR}
+ limitsList={limitsList.filter(
+ item => item.type === limitType.VENDOR
+ )}
+ selectedLimit={this.state.selectedLimit}
+ onCloseLimitEditor={() =>
+ this.onCloseLimitEditor()
+ }
+ onSelectLimit={limit =>
+ this.onSelectLimit(limit)
+ }
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ </Tab>
+ {selectedTab !== tabIds.GENERAL ? (
+ <TabButton
+ tabId={tabIds.ADD_LIMIT_BUTTON}
+ disabled={
+ !!this.state.selectedLimit || isReadOnlyMode
+ }
+ data-test-id="add-limits-tab"
+ className="add-limit-button">
+ <Button
+ btnType="link"
+ iconName="plus"
+ disabled={
+ !!this.state.selectedLimit || isReadOnlyMode
+ }>
+ {i18n('Add Limit')}
+ </Button>
+ </TabButton>
+ ) : (
+ <TabButton key="empty_lm_tab_key" />
+ ) // Render empty div to not break tabs
+ }
+ </Tabs>
+ <ModalButtons
+ className="sdc-modal__footer"
+ selectedLimit={this.state.selectedLimit}
+ isFormValid={this.props.isFormValid}
+ isReadOnlyMode={isReadOnlyMode}
+ onSubmit={this.submit}
+ onCancel={this.props.onCancel}
+ />
+ </div>
+ );
+ }
+
+ submit = () => {
+ const {
+ data: licenseKeyGroup,
+ previousData: previousLicenseKeyGroup,
+ formReady,
+ onValidateForm,
+ onSubmit
+ } = this.props;
+ if (!formReady) {
+ onValidateForm(LKG_FORM_NAME);
+ } else {
+ onSubmit({ licenseKeyGroup, previousLicenseKeyGroup });
+ }
+ };
+
+ validateName(value) {
+ const { data: { id }, LKGNames } = this.props;
+ const isExists = Validator.isItemNameAlreadyExistsInList({
+ itemId: id,
+ itemName: value,
+ list: LKGNames
+ });
+
+ return !isExists
+ ? { isValid: true, errorText: '' }
+ : {
+ isValid: false,
+ errorText: i18n(
+ "License key group by the name '" +
+ value +
+ "' already exists. License key group name must be unique"
+ )
+ };
+ }
+
+ onSelectLimit(limit) {
+ if (limit.id === this.state.selectedLimit) {
+ this.setState({ selectedLimit: '' });
+ return;
+ }
+ this.setState({ selectedLimit: limit.id });
+ this.props.onOpenLimitEditor(limit);
+ }
+
+ onCloseLimitEditor() {
+ this.setState({ selectedLimit: '' });
+ this.props.onCloseLimitEditor();
+ }
+
+ onAddLimit() {
+ this.setState({ selectedLimit: NEW_LIMIT_TEMP_ID });
+ this.props.onOpenLimitEditor();
+ }
}
export default LicenseKeyGroupsEditorView;
Code Review / sdc.git / blobdiff