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, 307 insertions, 276 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js
index 51f353f7d9..ef705d67e4 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.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.
@@ -13,6 +13,7 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
+
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import { actionTypes as entitlementPoolsActionTypes } from './EntitlementPoolsConstants.js';
@@ -39,7 +40,8 @@ function postEntitlementPool(licenseModelId, entitlementPool, version) {
         increments: entitlementPool.increments,
         time: entitlementPool.time,
         startDate: entitlementPool.startDate,
-        expiryDate: entitlementPool.expiryDate
+        expiryDate: entitlementPool.expiryDate,
+        manufacturerReferenceNumber: entitlementPool.manufacturerReferenceNumber
     });
 }
 
@@ -59,7 +61,9 @@ function putEntitlementPool(
             increments: entitlementPool.increments,
             time: entitlementPool.time,
             startDate: entitlementPool.startDate,
-            expiryDate: entitlementPool.expiryDate
+            expiryDate: entitlementPool.expiryDate,
+            manufacturerReferenceNumber:
+                entitlementPool.manufacturerReferenceNumber
         }
     );
 }
@@ -119,7 +123,7 @@ function putLimit(licenseModelId, entitlementPoolId, version, limit) {
     );
 }
 
-export default {
+const EntitlementPoolsActionHelper = {
     fetchEntitlementPoolsList(dispatch, { licenseModelId, version }) {
         return fetchEntitlementPoolsList(licenseModelId, version).then(
             response =>
@@ -148,23 +152,20 @@ export default {
         });
     },
 
-    deleteEntitlementPool(
+    async deleteEntitlementPool(
         dispatch,
         { licenseModelId, entitlementPoolId, version }
     ) {
-        return deleteEntitlementPool(
+        await deleteEntitlementPool(licenseModelId, entitlementPoolId, version);
+
+        await ItemsHelper.checkItemStatus(dispatch, {
+            itemId: licenseModelId,
+            versionId: version.id
+        });
+
+        await EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {
             licenseModelId,
-            entitlementPoolId,
             version
-        ).then(() => {
-            dispatch({
-                type: entitlementPoolsActionTypes.DELETE_ENTITLEMENT_POOL,
-                entitlementPoolId
-            });
-            return ItemsHelper.checkItemStatus(dispatch, {
-                itemId: licenseModelId,
-                versionId: version.id
-            });
         });
     },
 
@@ -182,46 +183,28 @@ export default {
         });
     },
 
-    saveEntitlementPool(
+    async saveEntitlementPool(
         dispatch,
         { licenseModelId, previousEntitlementPool, entitlementPool, version }
     ) {
         if (previousEntitlementPool) {
-            return putEntitlementPool(
+            await putEntitlementPool(
                 licenseModelId,
                 previousEntitlementPool,
                 entitlementPool,
                 version
-            ).then(() => {
-                dispatch({
-                    type: entitlementPoolsActionTypes.EDIT_ENTITLEMENT_POOL,
-                    entitlementPool
-                });
-                return ItemsHelper.checkItemStatus(dispatch, {
-                    itemId: licenseModelId,
-                    versionId: version.id
-                });
-            });
+            );
         } else {
-            return postEntitlementPool(
-                licenseModelId,
-                entitlementPool,
-                version
-            ).then(response => {
-                dispatch({
-                    type: entitlementPoolsActionTypes.ADD_ENTITLEMENT_POOL,
-                    entitlementPool: {
-                        ...entitlementPool,
-                        referencingFeatureGroups: [],
-                        id: response.value
-                    }
-                });
-                return ItemsHelper.checkItemStatus(dispatch, {
-                    itemId: licenseModelId,
-                    versionId: version.id
-                });
-            });
+            await postEntitlementPool(licenseModelId, entitlementPool, version);
         }
+        await ItemsHelper.checkItemStatus(dispatch, {
+            itemId: licenseModelId,
+            versionId: version.id
+        });
+        await EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {
+            licenseModelId,
+            version
+        });
     },
 
     hideDeleteConfirm(dispatch) {
@@ -291,3 +274,5 @@ export default {
         });
     }
 };
+
+export default EntitlementPoolsActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js
index dbb6b447a9..ab0f3dd100 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsConstants.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,12 @@ import InputOptions, {
 } from 'nfvo-components/input/validation/InputOptions.jsx';
 
 export const actionTypes = keyMirror({
-    ENTITLEMENT_POOLS_LIST_LOADED: null,
-    ADD_ENTITLEMENT_POOL: null,
-    EDIT_ENTITLEMENT_POOL: null,
-    DELETE_ENTITLEMENT_POOL: null,
-
+    ENTITLEMENT_POOLS_LIST_LOADED: 'ENTITLEMENT_POOLS_LIST_LOADED',
     entitlementPoolsEditor: {
-        OPEN: null,
-        CLOSE: null,
-        DATA_CHANGED: null,
-        LIMITS_LIST_LOADED: null
+        OPEN: 'epEditor/OPEN',
+        CLOSE: 'epEditor/CLOSE',
+        DATA_CHANGED: 'epEditor/DATA_CHANGED',
+        LIMITS_LIST_LOADED: 'epEditor/LIMITS_LIST_LOADED'
     }
 });
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js
index f773fa1c37..eb9cd51346 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorReducer.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.
@@ -80,6 +80,14 @@ export default (state = {}, action) => {
                         isValid: true,
                         errorText: '',
                         validations: []
+                    },
+                    manufacturerReferenceNumber: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'required', data: true },
+                            { type: 'maxLength', data: 100 }
+                        ]
                     }
                 },
                 data: action.entitlementPool
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
index c74354c5a4..d5ca81cfac 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
@@ -19,21 +19,19 @@ import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Validator from 'nfvo-utils/Validator.js';
 
-import Input from 'nfvo-components/input/validation/Input.jsx';
 import Form from 'nfvo-components/input/validation/Form.jsx';
 import Button from 'sdc-ui/lib/react/Button.js';
-import GridSection from 'nfvo-components/grid/GridSection.jsx';
-import GridItem from 'nfvo-components/grid/GridItem.jsx';
+import ModalButtons from 'sdc-app/onboarding/licenseModel/components/ModalButtons.jsx';
+
 import {
     SP_ENTITLEMENT_POOL_FORM,
     tabIds
 } from './EntitlementPoolsConstants.js';
-import { optionsInputValues as LicenseModelOptionsInputValues } from '../LicenseModelConstants.js';
 import {
     validateStartDate,
     thresholdValueValidation
 } from '../LicenseModelValidations.js';
-import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
+
 import Tabs from 'sdc-ui/lib/react/Tabs.js';
 import Tab from 'sdc-ui/lib/react/Tab.js';
 import EntitlementPoolsLimits from './EntitlementPoolsLimits.js';
@@ -41,6 +39,7 @@ import {
     limitType,
     NEW_LIMIT_TEMP_ID
 } from '../limits/LimitEditorConstants.js';
+import EntitlementPoolsFormContent from './components/FormContent.jsx';
 
 const EntitlementPoolPropType = PropTypes.shape({
     id: PropTypes.string,
@@ -53,178 +52,6 @@ const EntitlementPoolPropType = PropTypes.shape({
     expiryDate: PropTypes.string
 });
 
-const EntitlementPoolsFormContent = ({
-    data,
-    genericFieldInfo,
-    onDataChanged,
-    validateName,
-    thresholdValueValidation,
-    validateStartDate
-}) => {
-    let {
-        name,
-        description,
-        thresholdUnits,
-        thresholdValue,
-        increments,
-        startDate,
-        expiryDate
-    } = data;
-    return (
-        <GridSection hasLastColSet>
-            <GridItem colSpan={2}>
-                <Input
-                    onChange={name =>
-                        onDataChanged({ name }, SP_ENTITLEMENT_POOL_FORM, {
-                            name: validateName
-                        })
-                    }
-                    isValid={genericFieldInfo.name.isValid}
-                    isRequired={true}
-                    errorText={genericFieldInfo.name.errorText}
-                    label={i18n('Name')}
-                    value={name}
-                    data-test-id="create-ep-name"
-                    type="text"
-                />
-            </GridItem>
-            <GridItem colSpan={2} lastColInRow>
-                <div className="threshold-section">
-                    <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 },
-                                SP_ENTITLEMENT_POOL_FORM
-                            );
-                            // TODO make sure that the value is valid too
-                            if (thresholdValue && thresholdValue !== '') {
-                                onDataChanged(
-                                    { thresholdValue: thresholdValue },
-                                    SP_ENTITLEMENT_POOL_FORM,
-                                    { 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
-                        className="entitlement-pools-form-row-threshold-value"
-                        onChange={thresholdValue =>
-                            onDataChanged(
-                                { thresholdValue },
-                                SP_ENTITLEMENT_POOL_FORM,
-                                {
-                                    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"
-                    />
-                </div>
-            </GridItem>
-            <GridItem colSpan={2} stretch>
-                <Input
-                    onChange={description =>
-                        onDataChanged({ description }, SP_ENTITLEMENT_POOL_FORM)
-                    }
-                    isValid={genericFieldInfo.description.isValid}
-                    errorText={genericFieldInfo.description.errorText}
-                    label={i18n('Description')}
-                    value={description}
-                    data-test-id="create-ep-description"
-                    type="textarea"
-                />
-            </GridItem>
-            <GridItem colSpan={2} lastColInRow>
-                <Input
-                    onChange={increments =>
-                        onDataChanged({ increments }, SP_ENTITLEMENT_POOL_FORM)
-                    }
-                    label={i18n('Increments')}
-                    value={increments}
-                    data-test-id="create-ep-increments"
-                    type="text"
-                />
-                <div className="date-section">
-                    <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)
-                                        : ''
-                                },
-                                SP_ENTITLEMENT_POOL_FORM,
-                                { startDate: validateStartDate }
-                            )
-                        }
-                        isValid={genericFieldInfo.startDate.isValid}
-                        errorText={genericFieldInfo.startDate.errorText}
-                        selectsStart
-                    />
-                    <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)
-                                        : ''
-                                },
-                                SP_ENTITLEMENT_POOL_FORM
-                            );
-                            onDataChanged(
-                                { startDate },
-                                SP_ENTITLEMENT_POOL_FORM,
-                                {
-                                    startDate: validateStartDate
-                                }
-                            );
-                        }}
-                        isValid={genericFieldInfo.expiryDate.isValid}
-                        errorText={genericFieldInfo.expiryDate.errorText}
-                        selectsEnd
-                    />
-                </div>
-            </GridItem>
-        </GridSection>
-    );
-};
-
 class EntitlementPoolsEditorView extends React.Component {
     static propTypes = {
         data: EntitlementPoolPropType,
@@ -317,6 +144,7 @@ class EntitlementPoolsEditorView extends React.Component {
                             </Form>
                         )}
                     </Tab>
+
                     <Tab
                         disabled={isTabsDisabled}
                         tabId={tabIds.SP_LIMITS}
@@ -378,30 +206,19 @@ class EntitlementPoolsEditorView extends React.Component {
                     ) // Render empty div to not break tabs
                     }
                 </Tabs>
-                <GridSection className="license-model-modal-buttons entitlement-pools-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="entitlement-pools-editor-buttons"
+                    selectedLimit={this.state.selectedLimit}
+                    isFormValid={this.props.isFormValid}
+                    isReadOnlyMode={isReadOnlyMode}
+                    onSubmit={this.submit}
+                    onCancel={this.props.onCancel}
+                />
             </div>
         );
     }
 
-    submit() {
+    submit = () => {
         const {
             data: entitlementPool,
             previousData: previousEntitlementPool,
@@ -412,7 +229,7 @@ class EntitlementPoolsEditorView extends React.Component {
         } else {
             this.props.onSubmit({ entitlementPool, previousEntitlementPool });
         }
-    }
+    };
 
     validateName(value) {
         const { data: { id }, EPNames } = this.props;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx
index 7a07f94bd5..0648d6632d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.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.
@@ -122,7 +122,8 @@ class EntitlementPoolsListEditorView extends React.Component {
             name,
             description,
             thresholdValue,
-            thresholdUnits
+            thresholdUnits,
+            manufacturerReferenceNumber
         } = entitlementPool;
         let {
             onEditEntitlementPoolClick,
@@ -149,7 +150,14 @@ class EntitlementPoolsListEditorView extends React.Component {
                             `${thresholdValue} ${extractUnits(thresholdUnits)}`}
                     </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/entitlementPools/EntitlementPoolsListReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js
index 3c8621d9d8..e37c9925f2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListReducer.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.ENTITLEMENT_POOLS_LIST_LOADED:
             return [...action.response.results];
-        case actionTypes.ADD_ENTITLEMENT_POOL:
-            return [...state, action.entitlementPool];
-        case actionTypes.EDIT_ENTITLEMENT_POOL:
-            const indexForEdit = state.findIndex(
-                entitlementPool =>
-                    entitlementPool.id === action.entitlementPool.id
-            );
-            return [
-                ...state.slice(0, indexForEdit),
-                action.entitlementPool,
-                ...state.slice(indexForEdit + 1)
-            ];
-        case actionTypes.DELETE_ENTITLEMENT_POOL:
-            return state.filter(
-                entitlementPool =>
-                    entitlementPool.id !== action.entitlementPoolId
-            );
         default:
             return state;
     }
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/components/FormContent.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/components/FormContent.jsx
new file mode 100644
index 0000000000..531b6b73b2
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/components/FormContent.jsx
@@ -0,0 +1,234 @@
+/*!
+ * 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 PropTypes from 'prop-types';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import GridSection from 'nfvo-components/grid/GridSection.jsx';
+import GridItem from 'nfvo-components/grid/GridItem.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
+import { SP_ENTITLEMENT_POOL_FORM } from '../EntitlementPoolsConstants.js';
+import { DATE_FORMAT } from 'sdc-app/onboarding/OnboardingConstants.js';
+import { optionsInputValues as LicenseModelOptionsInputValues } from '../../LicenseModelConstants.js';
+import UuId from 'sdc-app/onboarding/licenseModel/components/UuId.jsx';
+
+export const EntitlementPoolsFormContent = ({
+    data,
+    genericFieldInfo,
+    onDataChanged,
+    validateName,
+    thresholdValueValidation,
+    validateStartDate
+}) => {
+    let {
+        name,
+        description,
+        thresholdUnits,
+        thresholdValue,
+        increments,
+        startDate,
+        expiryDate,
+        manufacturerReferenceNumber,
+        id,
+        versionUUID
+    } = data;
+    return (
+        <GridSection hasLastColSet>
+            <GridItem colSpan={2}>
+                <Input
+                    onChange={name =>
+                        onDataChanged({ name }, SP_ENTITLEMENT_POOL_FORM, {
+                            name: validateName
+                        })
+                    }
+                    isValid={genericFieldInfo.name.isValid}
+                    isRequired={true}
+                    errorText={genericFieldInfo.name.errorText}
+                    label={i18n('Name')}
+                    value={name}
+                    data-test-id="create-ep-name"
+                    type="text"
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <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 },
+                            SP_ENTITLEMENT_POOL_FORM
+                        );
+                        // TODO make sure that the value is valid too
+                        if (thresholdValue && thresholdValue !== '') {
+                            onDataChanged(
+                                { thresholdValue: thresholdValue },
+                                SP_ENTITLEMENT_POOL_FORM,
+                                { 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 colSpan={2} stretch>
+                <Input
+                    onChange={description =>
+                        onDataChanged({ description }, SP_ENTITLEMENT_POOL_FORM)
+                    }
+                    isValid={genericFieldInfo.description.isValid}
+                    errorText={genericFieldInfo.description.errorText}
+                    label={i18n('Description')}
+                    value={description}
+                    data-test-id="create-ep-description"
+                    type="textarea"
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <Input
+                    className="entitlement-pools-form-row-threshold-value"
+                    onChange={thresholdValue =>
+                        onDataChanged(
+                            { thresholdValue },
+                            SP_ENTITLEMENT_POOL_FORM,
+                            {
+                                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
+                    onChange={increments =>
+                        onDataChanged({ increments }, SP_ENTITLEMENT_POOL_FORM)
+                    }
+                    label={i18n('Increments')}
+                    value={increments}
+                    data-test-id="create-ep-increments"
+                    type="text"
+                />
+            </GridItem>
+
+            <GridItem colSpan={2}>
+                <Input
+                    className="entitlement-pools-form-row-threshold-value"
+                    onChange={manufacturerReferenceNumber =>
+                        onDataChanged(
+                            { manufacturerReferenceNumber },
+                            SP_ENTITLEMENT_POOL_FORM
+                        )
+                    }
+                    isValid={
+                        genericFieldInfo.manufacturerReferenceNumber.isValid
+                    }
+                    isRequired={true}
+                    errorText={
+                        genericFieldInfo.manufacturerReferenceNumber.errorText
+                    }
+                    label={i18n('Manufacturer Reference Number')}
+                    data-test-id="create-ep-manufacturerReferenceNumber-value"
+                    value={manufacturerReferenceNumber}
+                    type="text"
+                />
+            </GridItem>
+            <GridItem colSpan={2} lastColInRow>
+                <div className="date-section">
+                    <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)
+                                        : ''
+                                },
+                                SP_ENTITLEMENT_POOL_FORM,
+                                { startDate: validateStartDate }
+                            )
+                        }
+                        isValid={genericFieldInfo.startDate.isValid}
+                        errorText={genericFieldInfo.startDate.errorText}
+                        selectsStart
+                    />
+                    <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)
+                                        : ''
+                                },
+                                SP_ENTITLEMENT_POOL_FORM
+                            );
+                            onDataChanged(
+                                { startDate },
+                                SP_ENTITLEMENT_POOL_FORM,
+                                {
+                                    startDate: validateStartDate
+                                }
+                            );
+                        }}
+                        isValid={genericFieldInfo.expiryDate.isValid}
+                        errorText={genericFieldInfo.expiryDate.errorText}
+                        selectsEnd
+                    />
+                </div>
+            </GridItem>
+            {id && versionUUID && <UuId id={id} versionUUID={versionUUID} />}
+        </GridSection>
+    );
+};
+
+EntitlementPoolsFormContent.propTypes = {
+    data: PropTypes.object,
+    genericFieldInfo: PropTypes.object,
+    onDataChanged: PropTypes.func,
+    validateName: PropTypes.func,
+    thresholdValueValidation: PropTypes.func,
+    validateStartDate: PropTypes.func
+};
+
+export default EntitlementPoolsFormContent;