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>

22 files changed, 747 insertions, 653 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/components/ModalButtons.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/components/ModalButtons.jsx
new file mode 100644
index 0000000000..8f3347e65d
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/components/ModalButtons.jsx
@@ -0,0 +1,59 @@
+/*!
+ * 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 Button from 'sdc-ui/lib/react/Button.js';
+import GridSection from 'nfvo-components/grid/GridSection.jsx';
+
+const ModalButtons = ({
+    isFormValid,
+    isReadOnlyMode,
+    onSubmit,
+    selectedLimit,
+    onCancel,
+    className
+}) => (
+    <GridSection className={`license-model-modal-buttons ${className}`}>
+        {!selectedLimit && (
+            <Button
+                btnType="primary"
+                disabled={!isFormValid || isReadOnlyMode}
+                onClick={() => onSubmit()}
+                type="reset">
+                {i18n('Save')}
+            </Button>
+        )}
+        <Button
+            btnType={selectedLimit ? 'primary' : 'secondary'}
+            onClick={() => onCancel()}
+            type="reset">
+            {i18n('Cancel')}
+        </Button>
+    </GridSection>
+);
+
+ModalButtons.propTypes = {
+    isFormValid: PropTypes.func,
+    isReadOnlyMode: PropTypes.bool,
+    onSubmit: PropTypes.func,
+    selectedLimit: PropTypes.string,
+    onCancel: PropTypes.func,
+    className: PropTypes.string
+};
+
+export default ModalButtons;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/components/UuId.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/components/UuId.jsx
new file mode 100644
index 0000000000..2edfdaede5
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/components/UuId.jsx
@@ -0,0 +1,43 @@
+/*!
+ * 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';
+
+const UuidElement = ({ title, value }) => (
+    <div className="uuid-container">
+        <div className="uuid-title">{title}</div>
+        <div className="uuid-value" selectable>
+            {value}
+        </div>
+    </div>
+);
+
+UuidElement.propTypes = {
+    title: PropTypes.string,
+    value: PropTypes.string
+};
+
+const Uuid = ({ id, versionUUID }) => (
+    <div className="uuid-row-wrapper">
+        <UuidElement title={i18n('UUID:')} value={versionUUID} />
+        <div className="separator" />
+        <UuidElement title={i18n('Invariant UUID:')} value={id} />
+    </div>
+);
+
+export default Uuid;
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;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
index fc8269332a..d80eb9a0ab 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.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.
@@ -46,10 +46,10 @@ const GeneralTab = ({
     genericFieldInfo,
     validateName
 }) => {
-    let { name, description, partNumber, manufacturerReferenceNumber } = data;
+    let { name, description, partNumber } = data;
     return (
         <GridSection hasLastColSet>
-            <GridItem colSpan={2}>
+            <GridItem colSpan={4}>
                 <Input
                     groupClassName="field-section"
                     onChange={name =>
@@ -67,7 +67,7 @@ const GeneralTab = ({
                     errorText={genericFieldInfo.name.errorText}
                 />
             </GridItem>
-            <GridItem colSpan={2} lastColInRow>
+            <GridItem colSpan={4} lastColInRow strech>
                 <Input
                     groupClassName="field-section"
                     className="description-field"
@@ -83,7 +83,7 @@ const GeneralTab = ({
                     errorText={genericFieldInfo.description.errorText}
                 />
             </GridItem>
-            <GridItem colSpan={2}>
+            <GridItem colSpan={4}>
                 <Input
                     groupClassName="field-section"
                     onChange={partNumber =>
@@ -98,28 +98,6 @@ const GeneralTab = ({
                     errorText={genericFieldInfo.partNumber.errorText}
                 />
             </GridItem>
-            <GridItem colSpan={2} lastColInRow>
-                <Input
-                    groupClassName="field-section"
-                    onChange={manufacturerReferenceNumber =>
-                        onDataChanged(
-                            { manufacturerReferenceNumber },
-                            FG_EDITOR_FORM
-                        )
-                    }
-                    label={i18n('Manufacturer Reference Number')}
-                    data-test-id="create-fg-reference-number"
-                    value={manufacturerReferenceNumber}
-                    isRequired={true}
-                    type="text"
-                    isValid={
-                        genericFieldInfo.manufacturerReferenceNumber.isValid
-                    }
-                    errorText={
-                        genericFieldInfo.manufacturerReferenceNumber.errorText
-                    }
-                />
-            </GridItem>
         </GridSection>
     );
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx
index 91f77b3111..92468a3b86 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.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.
@@ -107,7 +107,6 @@ class FeatureGroupListEditorView extends React.Component {
         let {
             name,
             description,
-            manufacturerReferenceNumber,
             entitlementPoolsIds = [],
             licenseKeyGroupsIds = []
         } = listItem;
@@ -139,18 +138,6 @@ class FeatureGroupListEditorView extends React.Component {
                         </div>
                     </div>
                 </div>
-
-                <div className="list-editor-item-view-field">
-                    <div className="feature-groups-count-field">
-                        <div className="title title-no-wrap">
-                            {i18n('Manufacturer Reference Number')}
-                        </div>
-                        <div className="feature-groups-mrn-ep">
-                            {manufacturerReferenceNumber}
-                        </div>
-                    </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/featureGroups/FeatureGroupsEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js
index aa1081ed20..f6b9a86f7a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsEditorReducer.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,17 +45,6 @@ export default (state = {}, action) => {
                             FeatureGroupStateConstants
                                 .SELECTED_FEATURE_GROUP_TAB.GENERAL
                     },
-                    manufacturerReferenceNumber: {
-                        isValid: true,
-                        errorText: '',
-                        validations: [
-                            { type: 'required', data: true },
-                            { type: 'maxLength', data: 100 }
-                        ],
-                        tabId:
-                            FeatureGroupStateConstants
-                                .SELECTED_FEATURE_GROUP_TAB.GENERAL
-                    },
                     name: {
                         isValid: true,
                         errorText: '',
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;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx
index 60eba401c7..ec5c76bd79 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/EntitlementPool.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.
@@ -27,7 +27,13 @@ import {
 class EntitlementPool extends Component {
     render() {
         let {
-            epData: { name, description, thresholdValue, thresholdUnits },
+            epData: {
+                name,
+                description,
+                thresholdValue,
+                thresholdUnits,
+                manufacturerReferenceNumber
+            },
             isOrphan
         } = this.props;
         return (
@@ -49,6 +55,13 @@ class EntitlementPool extends Component {
                             )}`}
                         />
                     )}
+                    {manufacturerReferenceNumber && (
+                        <AdditionalDataElement
+                            className="vlm-list-item-entitlement-metric"
+                            name={i18n('Manufacturer Reference Number')}
+                            value={manufacturerReferenceNumber}
+                        />
+                    )}
                 </AdditionalDataCol>
             </div>
         );
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx
index df1d813408..7ef5b2a746 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/FeatureGroup.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.
@@ -19,20 +19,10 @@ import ArrowCol from './listItemsComponents/ArrowCol.jsx';
 import ItemInfo from './listItemsComponents/ItemInfo.jsx';
 import IconCol from './listItemsComponents/IconCol.jsx';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {
-    AdditionalDataCol,
-    AdditionalDataElement
-} from './listItemsComponents/AdditionalDataCol.jsx';
-
 class FeatureGroup extends Component {
     render() {
         let {
-            fgData: {
-                name,
-                manufacturerReferenceNumber,
-                description,
-                children = []
-            },
+            fgData: { name, description, children = [] },
             isCollapsed,
             onClick,
             isOrphan
@@ -80,13 +70,6 @@ class FeatureGroup extends Component {
                         </span>
                     </div>
                 </ItemInfo>
-                <AdditionalDataCol>
-                    <AdditionalDataElement
-                        name={i18n('Manufacturer Reference Number')}
-                        value={manufacturerReferenceNumber}
-                        className="vlm-list-item-sku"
-                    />
-                </AdditionalDataCol>
             </div>
         );
     }
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx
index 79f0eb28d2..8343c231b5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/listItems/LicenseKeyGroup.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.
@@ -26,7 +26,10 @@ import {
 
 class LicenseKeyGroup extends Component {
     render() {
-        let { lkgData: { name, description, type }, isOrphan } = this.props;
+        let {
+            lkgData: { name, description, type, manufacturerReferenceNumber },
+            isOrphan
+        } = this.props;
         return (
             <div
                 className={`vlm-list-item vlm-list-item-lkg ${
@@ -42,6 +45,13 @@ class LicenseKeyGroup extends Component {
                         name={i18n('Type')}
                         value={extractValue(type)}
                     />
+                    {manufacturerReferenceNumber && (
+                        <AdditionalDataElement
+                            className="vlm-list-item-entitlement-metric"
+                            name={i18n('Manufacturer Reference Number')}
+                            value={manufacturerReferenceNumber}
+                        />
+                    )}
                 </AdditionalDataCol>
             </div>
         );