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,
- tabIds
-} from './LicenseKeyGroupsConstants.js';
-import { optionsInputValues as LicenseModelOptionsInputValues } from '../LicenseModelConstants.js';
+//import GridSection from 'nfvo-components/grid/GridSection.jsx';
+import { LKG_FORM_NAME, tabIds } from './LicenseKeyGroupsConstants.js';
+
import {
validateStartDate,
thresholdValueValidation
} from '../LicenseModelValidations.js';
-import { other as optionInputOther } from 'nfvo-components/input/validation/InputOptions.jsx';
-import InputOptions from 'nfvo-components/input/validation/InputOptions.jsx';
-
-import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.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 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,
- operationalScope: PropTypes.shape({
- choices: PropTypes.array,
- other: PropTypes.string
- }),
type: PropTypes.string,
thresholdUnits: PropTypes.string,
thresholdValue: PropTypes.number,
expiryDate: PropTypes.string
});
-const LicenseKeyGroupFormContent = ({
- data,
- onDataChanged,
- genericFieldInfo,
- validateName,
- validateStartDate,
- thresholdValueValidation
-}) => {
- let {
- name,
- description,
- increments,
- operationalScope,
- type,
- thresholdUnits,
- thresholdValue,
- startDate,
- expiryDate
- } = data;
- return (
- <GridSection hasLostColSet>
- <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} lastColInRow>
- <InputOptions
- onInputChange={() => {}}
- isMultiSelect={true}
- onEnumChange={operationalScope =>
- onDataChanged(
- {
- operationalScope: {
- choices: operationalScope,
- other: ''
- }
- },
- LKG_FORM_NAME
- )
- }
- onOtherChange={operationalScope =>
- onDataChanged(
- {
- operationalScope: {
- choices: [optionInputOther.OTHER],
- other: operationalScope
- }
- },
- LKG_FORM_NAME
- )
- }
- 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}
- type="textarea"
- overlayPos="bottom"
- />
- </GridItem>
- <GridItem colSpan={2} lastColInRow>
- <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"
- overlayPos="bottom"
- type="select">
- {licenseKeyGroupOptionsInputValues.TYPE.map(type => (
- <option key={type.enum} value={type.enum}>
- {type.title}
- </option>
- ))}
- </Input>
- </GridItem>
- <GridItem>
- <Input
- onChange={e => {
- // setting the unit to the correct value
- const selectedIndex = e.target.selectedIndex;
- const val = e.target.options[selectedIndex].value;
- onDataChanged({ thresholdUnits: val }, LKG_FORM_NAME);
- // TODO make sure that the value is valid too
- onDataChanged(
- { thresholdValue: thresholdValue },
- LKG_FORM_NAME,
- {
- thresholdValue: thresholdValueValidation
- }
- );
- }}
- value={thresholdUnits}
- label={i18n('Threshold Units')}
- data-test-id="create-ep-threshold-units"
- isValid={genericFieldInfo.thresholdUnits.isValid}
- errorText={genericFieldInfo.thresholdUnits.errorText}
- groupClassName="bootstrap-input-options"
- className="input-options-select"
- type="select">
- {LicenseModelOptionsInputValues.THRESHOLD_UNITS.map(
- mtype => (
- <option key={mtype.enum} value={mtype.enum}>{`${
- mtype.title
- }`}</option>
- )
- )}
- </Input>
- </GridItem>
- <GridItem>
- <Input
- className="entitlement-pools-form-row-threshold-value"
- onChange={thresholdValue =>
- onDataChanged({ thresholdValue }, LKG_FORM_NAME, {
- thresholdValue: thresholdValueValidation
- })
- }
- label={i18n('Threshold Value')}
- isValid={genericFieldInfo.thresholdValue.isValid}
- errorText={genericFieldInfo.thresholdValue.errorText}
- data-test-id="create-ep-threshold-value"
- value={thresholdValue}
- type="text"
- />
- </GridItem>
- <GridItem>
- <Input
- type="date"
- label={i18n('Start Date')}
- value={startDate}
- dateFormat={DATE_FORMAT}
- startDate={startDate}
- endDate={expiryDate}
- onChange={startDate =>
- onDataChanged(
- {
- startDate: startDate
- ? startDate.format(DATE_FORMAT)
- : ''
- },
- LKG_FORM_NAME,
- { startDate: validateStartDate }
- )
- }
- isValid={genericFieldInfo.startDate.isValid}
- errorText={genericFieldInfo.startDate.errorText}
- selectsStart
- />
- </GridItem>
- <GridItem lastColInRow>
- <Input
- type="date"
- label={i18n('Expiry Date')}
- value={expiryDate}
- dateFormat={DATE_FORMAT}
- startDate={startDate}
- endDate={expiryDate}
- onChange={expiryDate => {
- onDataChanged(
- {
- expiryDate: expiryDate
- ? expiryDate.format(DATE_FORMAT)
- : ''
- },
- LKG_FORM_NAME
- );
- onDataChanged({ startDate }, LKG_FORM_NAME, {
- startDate: validateStartDate
- });
- }}
- isValid={genericFieldInfo.expiryDate.isValid}
- errorText={genericFieldInfo.expiryDate.errorText}
- selectsEnd
- />
- </GridItem>
- <GridItem colSpan={2}>
- <Input
- onChange={increments =>
- onDataChanged({ increments }, LKG_FORM_NAME)
- }
- label={i18n('Increments')}
- value={increments}
- data-test-id="create-ep-increments"
- type="text"
- />
- </GridItem>
- </GridSection>
- );
-};
-
class LicenseKeyGroupsEditorView extends React.Component {
static propTypes = {
data: LicenseKeyGroupPropType,
let { selectedTab } = this.state;
const isTabsDisabled = !data.id || !this.props.isFormValid;
return (
- <div className="license-keygroup-editor">
+ <div className="license-keygroup-editor license-model-modal license-key-groups-modal">
<Tabs
type="menu"
activeTab={selectedTab}
)}
</Tab>
{selectedTab !== tabIds.GENERAL ? (
- <Button
- className="add-limit-button"
+ <TabButton
tabId={tabIds.ADD_LIMIT_BUTTON}
- btnType="link"
- iconName="plus"
disabled={
- this.state.selectedLimit || isReadOnlyMode
- }>
- {i18n('Add Limit')}
- </Button>
+ !!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>
) : (
- <div key="empty_lm_tab_key" />
+ <TabButton key="empty_lm_tab_key" />
) // Render empty div to not break tabs
}
</Tabs>
-
- <GridSection className="license-model-modal-buttons license-key-group-editor-buttons">
- {!this.state.selectedLimit && (
- <Button
- btnType="default"
- disabled={!this.props.isFormValid || isReadOnlyMode}
- onClick={() => this.submit()}
- type="reset">
- {i18n('Save')}
- </Button>
- )}
- <Button
- btnType={
- this.state.selectedLimit ? 'default' : 'outline'
- }
- onClick={() => this.props.onCancel()}
- type="reset">
- {i18n('Cancel')}
- </Button>
- </GridSection>
+ <ModalButtons
+ className="sdc-modal__footer"
+ selectedLimit={this.state.selectedLimit}
+ isFormValid={this.props.isFormValid}
+ isReadOnlyMode={isReadOnlyMode}
+ onSubmit={this.submit}
+ onCancel={this.props.onCancel}
+ />
</div>
);
}
- submit() {
+ submit = () => {
const {
data: licenseKeyGroup,
previousData: previousLicenseKeyGroup,
} else {
onSubmit({ licenseKeyGroup, previousLicenseKeyGroup });
}
- }
+ };
validateName(value) {
const { data: { id }, LKGNames } = this.props;
Code Review / sdc.git / blobdiff