ui user feedback 1810

Enhance LKG & EP to include MRN
Enhance EP & LKG UI to display Invariant UUID & UUID
Remove MRN from FG

Issue-ID: SDC-1524
Change-Id: Id6259f746ba4b4dcd5684d58d66f0df769107589
Signed-off-by: svishnev <shlomo-stanisla.vishnevetskiy@amdocs.com>

7 files changed, 302 insertions, 301 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
index 39af2054c2..53276ca49b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
@@ -1,5 +1,5 @@
 /*!
- * 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.
@@ -45,7 +45,8 @@ function postLicenseKeyGroup(licenseModelId, licenseKeyGroup, version) {
         thresholdValue: licenseKeyGroup.thresholdValue,
         thresholdUnits: getValue(licenseKeyGroup.thresholdUnits),
         startDate: licenseKeyGroup.startDate,
-        expiryDate: licenseKeyGroup.expiryDate
+        expiryDate: licenseKeyGroup.expiryDate,
+        manufacturerReferenceNumber: licenseKeyGroup.manufacturerReferenceNumber
     });
 }
 
@@ -60,7 +61,9 @@ function putLicenseKeyGroup(licenseModelId, licenseKeyGroup, version) {
             thresholdValue: licenseKeyGroup.thresholdValue,
             thresholdUnits: getValue(licenseKeyGroup.thresholdUnits),
             startDate: licenseKeyGroup.startDate,
-            expiryDate: licenseKeyGroup.expiryDate
+            expiryDate: licenseKeyGroup.expiryDate,
+            manufacturerReferenceNumber:
+                licenseKeyGroup.manufacturerReferenceNumber
         }
     );
 }
@@ -149,64 +152,37 @@ export default {
         });
     },
 
-    saveLicenseKeyGroup(
+    async saveLicenseKeyGroup(
         dispatch,
         { licenseModelId, previousLicenseKeyGroup, licenseKeyGroup, version }
     ) {
         if (previousLicenseKeyGroup) {
-            return putLicenseKeyGroup(
-                licenseModelId,
-                licenseKeyGroup,
-                version
-            ).then(() => {
-                dispatch({
-                    type: licenseKeyGroupsConstants.EDIT_LICENSE_KEY_GROUP,
-                    licenseKeyGroup
-                });
-                return ItemsHelper.checkItemStatus(dispatch, {
-                    itemId: licenseModelId,
-                    versionId: version.id
-                });
-            });
+            await putLicenseKeyGroup(licenseModelId, licenseKeyGroup, version);
         } else {
-            return postLicenseKeyGroup(
-                licenseModelId,
-                licenseKeyGroup,
-                version
-            ).then(response => {
-                dispatch({
-                    type: licenseKeyGroupsConstants.ADD_LICENSE_KEY_GROUP,
-                    licenseKeyGroup: {
-                        ...licenseKeyGroup,
-                        referencingFeatureGroups: [],
-                        id: response.value
-                    }
-                });
-                return ItemsHelper.checkItemStatus(dispatch, {
-                    itemId: licenseModelId,
-                    versionId: version.id
-                });
-            });
+            await postLicenseKeyGroup(licenseModelId, licenseKeyGroup, version);
         }
+        await ItemsHelper.checkItemStatus(dispatch, {
+            itemId: licenseModelId,
+            versionId: version.id
+        });
+        await this.fetchLicenseKeyGroupsList(dispatch, {
+            licenseModelId,
+            version
+        });
     },
 
-    deleteLicenseKeyGroup(
+    async deleteLicenseKeyGroup(
         dispatch,
         { licenseModelId, licenseKeyGroupId, version }
     ) {
-        return deleteLicenseKeyGroup(
+        await deleteLicenseKeyGroup(licenseModelId, licenseKeyGroupId, version);
+        await ItemsHelper.checkItemStatus(dispatch, {
+            itemId: licenseModelId,
+            versionId: version.id
+        });
+        await this.fetchLicenseKeyGroupsList(dispatch, {
             licenseModelId,
-            licenseKeyGroupId,
             version
-        ).then(() => {
-            dispatch({
-                type: licenseKeyGroupsConstants.DELETE_LICENSE_KEY_GROUP,
-                licenseKeyGroupId
-            });
-            return ItemsHelper.checkItemStatus(dispatch, {
-                itemId: licenseModelId,
-                versionId: version.id
-            });
         });
     },
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js
index d20188667d..7ab8a4f49a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsConstants.js
@@ -1,5 +1,5 @@
 /*!
- * 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.
@@ -20,16 +20,13 @@ import InputOptions, {
 } from 'nfvo-components/input/validation/InputOptions.jsx';
 
 export const actionTypes = keyMirror({
-    LICENSE_KEY_GROUPS_LIST_LOADED: null,
-    DELETE_LICENSE_KEY_GROUP: null,
-    EDIT_LICENSE_KEY_GROUP: null,
-    ADD_LICENSE_KEY_GROUP: null,
-    LICENSE_KEY_GROUPS_DELETE_CONFIRM: null,
+    LICENSE_KEY_GROUPS_LIST_LOADED: 'LICENSE_KEY_GROUPS_LIST_LOADED',
+    LICENSE_KEY_GROUPS_DELETE_CONFIRM: 'LICENSE_KEY_GROUPS_DELETE_CONFIRM',
     licenseKeyGroupsEditor: {
-        OPEN: null,
-        CLOSE: null,
-        DATA_CHANGED: null,
-        LIMITS_LIST_LOADED: null
+        OPEN: 'licenseKeyGroupsEditor/OPEN',
+        CLOSE: 'licenseKeyGroupsEditor/CLOSE',
+        DATA_CHANGED: 'licenseKeyGroupsEditor/DATA_CHANGED',
+        LIMITS_LIST_LOADED: 'licenseKeyGroupsEditor/LIMITS_LIST_LOADED'
     }
 });
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js
index 948398a56c..68953169c1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorReducer.js
@@ -1,5 +1,5 @@
 /*!
- * 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.
@@ -88,6 +88,11 @@ export default (state = {}, action) => {
                         isValid: true,
                         errorText: '',
                         validations: []
+                    },
+                    manufacturerReferenceNumber: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [{ type: 'maxLength', data: 100 }]
                     }
                 }
             };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
index 0d5c6bc25d..8f21722ca6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
@@ -23,27 +23,21 @@ 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,
-    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 { 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 LicenseKeyGroupPropType = PropTypes.shape({
     id: PropTypes.string,
@@ -57,194 +51,6 @@ const LicenseKeyGroupPropType = PropTypes.shape({
     expiryDate: PropTypes.string
 });
 
-const LicenseKeyGroupFormContent = ({
-    data,
-    onDataChanged,
-    genericFieldInfo,
-    validateName,
-    validateStartDate,
-    thresholdValueValidation
-}) => {
-    let {
-        name,
-        description,
-        increments,
-        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>
-                <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 lastColInRow>
-                <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 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
-                    onChange={increments =>
-                        onDataChanged({ increments }, LKG_FORM_NAME)
-                    }
-                    label={i18n('Increments')}
-                    value={increments}
-                    data-test-id="create-ep-increments"
-                    type="text"
-                />
-            </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"
-                    overlayPos="bottom"
-                    type="select">
-                    {licenseKeyGroupOptionsInputValues.TYPE.map(type => (
-                        <option key={type.enum} value={type.enum}>
-                            {type.title}
-                        </option>
-                    ))}
-                </Input>
-            </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>
-        </GridSection>
-    );
-};
-
 class LicenseKeyGroupsEditorView extends React.Component {
     static propTypes = {
         data: LicenseKeyGroupPropType,
@@ -396,31 +202,19 @@ class LicenseKeyGroupsEditorView extends React.Component {
                     ) // Render empty div to not break tabs
                     }
                 </Tabs>
-
-                <GridSection className="license-model-modal-buttons license-key-group-editor-buttons">
-                    {!this.state.selectedLimit && (
-                        <Button
-                            btnType="primary"
-                            disabled={!this.props.isFormValid || isReadOnlyMode}
-                            onClick={() => this.submit()}
-                            type="reset">
-                            {i18n('Save')}
-                        </Button>
-                    )}
-                    <Button
-                        btnType={
-                            this.state.selectedLimit ? 'primary' : 'secondary'
-                        }
-                        onClick={() => this.props.onCancel()}
-                        type="reset">
-                        {i18n('Cancel')}
-                    </Button>
-                </GridSection>
+                <ModalButtons
+                    className="license-key-group-editor-buttons"
+                    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,
@@ -433,7 +227,7 @@ class LicenseKeyGroupsEditorView extends React.Component {
         } else {
             onSubmit({ licenseKeyGroup, previousLicenseKeyGroup });
         }
-    }
+    };
 
     validateName(value) {
         const { data: { id }, LKGNames } = this.props;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx
index 9d961b41f5..09bab1c097 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx
@@ -1,5 +1,5 @@
 /*!
- * 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.
@@ -120,7 +120,13 @@ class LicenseKeyGroupsListEditorView extends React.Component {
     }
 
     renderLicenseKeyGroupListItem(licenseKeyGroup, isReadOnlyMode) {
-        let { id, name, description, type } = licenseKeyGroup;
+        let {
+            id,
+            name,
+            description,
+            type,
+            manufacturerReferenceNumber
+        } = licenseKeyGroup;
         let {
             onEditLicenseKeyGroupClick,
             onDeleteLicenseKeyGroupClick
@@ -143,7 +149,14 @@ class LicenseKeyGroupsListEditorView extends React.Component {
                         {InputOptions.getTitleByName(optionsInputValues, type)}
                     </div>
                 </div>
-
+                <div className="list-editor-item-view-field">
+                    <div className="title">
+                        {i18n('Manufacturer Reference Number')}
+                    </div>
+                    <div className="text description">
+                        {manufacturerReferenceNumber}
+                    </div>
+                </div>
                 <div className="list-editor-item-view-field">
                     <div className="title">{i18n('Description')}</div>
                     <div className="text description">{description}</div>
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js
index 1cd1da0d82..20c4603200 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListReducer.js
@@ -1,5 +1,5 @@
 /*!
- * 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.
@@ -18,23 +18,6 @@ export default (state = [], action) => {
     switch (action.type) {
         case actionTypes.LICENSE_KEY_GROUPS_LIST_LOADED:
             return [...action.response.results];
-        case actionTypes.DELETE_LICENSE_KEY_GROUP:
-            return state.filter(
-                licenseKeyGroup =>
-                    licenseKeyGroup.id !== action.licenseKeyGroupId
-            );
-        case actionTypes.ADD_LICENSE_KEY_GROUP:
-            return [...state, action.licenseKeyGroup];
-        case actionTypes.EDIT_LICENSE_KEY_GROUP:
-            const indexForEdit = state.findIndex(
-                licenseKeyGroup =>
-                    licenseKeyGroup.id === action.licenseKeyGroup.id
-            );
-            return [
-                ...state.slice(0, indexForEdit),
-                action.licenseKeyGroup,
-                ...state.slice(indexForEdit + 1)
-            ];
         default:
             return state;
     }
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/components/FormContent.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/components/FormContent.jsx
new file mode 100644
index 0000000000..4d19ed39ce
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/components/FormContent.jsx
@@ -0,0 +1,233 @@
+/*!
+ * 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.
+ * 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 i18n from 'nfvo-utils/i18n/i18n.js';
+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 { optionsInputValues as LicenseModelOptionsInputValues } from '../../LicenseModelConstants.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
+import UuId from 'sdc-app/onboarding/licenseModel/components/UuId.jsx';
+
+const LicenseKeyGroupFormContent = ({
+    data,
+    onDataChanged,
+    genericFieldInfo,
+    validateName,
+    validateStartDate,
+    thresholdValueValidation
+}) => {
+    let {
+        name,
+        description,
+        increments,
+        type,
+        thresholdUnits,
+        thresholdValue,
+        startDate,
+        expiryDate,
+        manufacturerReferenceNumber,
+        id,
+        versionUUID
+    } = 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}>
+                <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 colSpan={2} stretch>
+                <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>
+                <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>
+                <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>
+                <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"
+                />
+                <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={manufacturerReferenceNumber =>
+                        onDataChanged(
+                            { manufacturerReferenceNumber },
+                            LKG_FORM_NAME
+                        )
+                    }
+                    label={i18n('Manufacturer Reference Number')}
+                    value={manufacturerReferenceNumber}
+                    data-test-id="create-ep-mrn"
+                    type="text"
+                />
+            </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>
+            {id && versionUUID && <UuId id={id} versionUUID={versionUUID} />}
+        </GridSection>
+    );
+};
+
+export default LicenseKeyGroupFormContent;