1 files changed, 92 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
new file mode 100644
index 0000000000..102e713060
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+
+import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
+import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
+import {optionsInputValues as licenseKeyGroupOptionsInputValues} from './LicenseKeyGroupsConstants.js';
+import {other as optionInputOther} from 'nfvo-components/input/inputOptions/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
+});
+
+class LicenseKeyGroupsEditorView extends React.Component {
+	static propTypes = {
+		data: LicenseKeyGroupPropType,
+		previousData: LicenseKeyGroupPropType,
+		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} = this.props;
+		let {name, description, operationalScope, type} = data;
+		return (
+			<ValidationForm
+				ref='validationForm'
+				hasButtons={true}
+				onSubmit={ () => this.submit() }
+				onReset={ () => this.props.onCancel() }
+				labledButtons={true}
+				isReadOnlyMode={isReadOnlyMode}
+				className='license-key-groups-form'>
+				<div className='license-key-groups-form-row'>
+					<ValidationInput
+						onChange={name => onDataChanged({name})}
+						ref='name'
+						label={i18n('Name')}
+						value={name}
+						validations={{maxLength: 120, required: true}}
+						type='text'/>
+					<ValidationInput
+						isMultiSelect={true}
+						isRequired={true}
+						onEnumChange={operationalScope => onDataChanged({operationalScope:{choices: operationalScope, other: ''}})}
+						onOtherChange={operationalScope => onDataChanged({operationalScope:{choices: [optionInputOther.OTHER], other: operationalScope}})}
+						label={i18n('Operational Scope')}
+						validations={{required: true}}
+						multiSelectedEnum={operationalScope && operationalScope.choices}
+						otherValue={operationalScope && operationalScope.other}
+						values={licenseKeyGroupOptionsInputValues.OPERATIONAL_SCOPE}/>
+				</div>
+				<div className='license-key-groups-form-row'>
+					<ValidationInput
+						onChange={description => onDataChanged({description})}
+						ref='description'
+						label={i18n('Description')}
+						value={description}
+						validations={{maxLength: 1000, required: true}}
+						type='textarea'/>
+						<ValidationInput
+							isRequired={true}
+							onEnumChange={type => onDataChanged({type})}
+							selectedEnum={type}
+							label={i18n('Type')}
+							type='select'
+							validations={{required: true}}
+							values={licenseKeyGroupOptionsInputValues.TYPE}/>
+					</div>
+			</ValidationForm>
+		);
+	}
+
+	submit() {
+		const {data: licenseKeyGroup, previousData: previousLicenseKeyGroup} = this.props;
+		this.props.onSubmit({licenseKeyGroup, previousLicenseKeyGroup});
+	}
+}
+
+export default LicenseKeyGroupsEditorView;