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>

1 files changed, 15 insertions, 198 deletions

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;