react 16 upgrade

Issue-ID: SDC-1762
Change-Id: I7701f12fc63bb09f8c985c7c893b984701dcbfab
Signed-off-by: Einav Keidar <einavw@amdocs.com>

5 files changed, 74 insertions, 54 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
index 53276ca49b..c9f0505ad1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js
@@ -19,6 +19,12 @@ import { actionTypes as licenseKeyGroupsConstants } from './LicenseKeyGroupsCons
 import { actionTypes as limitEditorActions } from 'sdc-app/onboarding/licenseModel/limits/LimitEditorConstants.js';
 import { default as getValue, getStrValue } from 'nfvo-utils/getValue.js';
 import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import {
+    actionTypes as modalActionTypes,
+    modalSizes
+} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
 
 function baseUrl(licenseModelId, version) {
     const restPrefix = Configuration.get('restPrefix');
@@ -131,9 +137,9 @@ export default {
 
     openLicenseKeyGroupsEditor(
         dispatch,
-        { licenseKeyGroup, licenseModelId, version } = {}
+        { licenseKeyGroup, licenseModelId, version, isReadOnlyMode } = {}
     ) {
-        if (licenseModelId && version) {
+        if (licenseModelId && version && licenseKeyGroup) {
             this.fetchLimits(dispatch, {
                 licenseModelId,
                 version,
@@ -144,12 +150,31 @@ export default {
             type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.OPEN,
             licenseKeyGroup
         });
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.LKG_EDITOR,
+                modalComponentProps: {
+                    version,
+                    licenseModelId,
+                    isReadOnlyMode,
+                    size: modalSizes.LARGE
+                },
+                title:
+                    licenseModelId && version && licenseKeyGroup
+                        ? i18n('Edit License Key Group')
+                        : i18n('Create New License Key Group')
+            }
+        });
     },
 
     closeLicenseKeyGroupEditor(dispatch) {
         dispatch({
             type: licenseKeyGroupsConstants.licenseKeyGroupsEditor.CLOSE
         });
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
     },
 
     async saveLicenseKeyGroup(
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 8f21722ca6..219f2dcd1e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditorView.jsx
@@ -39,6 +39,21 @@ import {
 import LicenseKeyGroupFormContent from './components/FormContent.jsx';
 import ModalButtons from 'sdc-app/onboarding/licenseModel/components/ModalButtons.jsx';
 
+const TabButton = props => {
+    const { onClick, disabled, className } = props;
+    const dataTestId = props['data-test-id'];
+    return (
+        <div
+            className={className}
+            onClick={disabled ? undefined : onClick}
+            data-test-id={dataTestId}
+            role="tab"
+            disabled={disabled}>
+            {props.children}
+        </div>
+    );
+};
+
 const LicenseKeyGroupPropType = PropTypes.shape({
     id: PropTypes.string,
     name: PropTypes.string,
@@ -94,7 +109,7 @@ class LicenseKeyGroupsEditorView extends React.Component {
         let { selectedTab } = this.state;
         const isTabsDisabled = !data.id || !this.props.isFormValid;
         return (
-            <div className="license-keygroup-editor">
+            <div className="license-keygroup-editor license-model-modal license-key-groups-modal">
                 <Tabs
                     type="menu"
                     activeTab={selectedTab}
@@ -187,23 +202,29 @@ class LicenseKeyGroupsEditorView extends React.Component {
                         )}
                     </Tab>
                     {selectedTab !== tabIds.GENERAL ? (
-                        <Button
-                            className="add-limit-button"
+                        <TabButton
                             tabId={tabIds.ADD_LIMIT_BUTTON}
-                            btnType="link"
-                            iconName="plus"
                             disabled={
-                                this.state.selectedLimit || isReadOnlyMode
-                            }>
-                            {i18n('Add Limit')}
-                        </Button>
+                                !!this.state.selectedLimit || isReadOnlyMode
+                            }
+                            data-test-id="add-limits-tab"
+                            className="add-limit-button">
+                            <Button
+                                btnType="link"
+                                iconName="plus"
+                                disabled={
+                                    !!this.state.selectedLimit || isReadOnlyMode
+                                }>
+                                {i18n('Add Limit')}
+                            </Button>
+                        </TabButton>
                     ) : (
-                        <div key="empty_lm_tab_key" />
+                        <TabButton key="empty_lm_tab_key" />
                     ) // Render empty div to not break tabs
                     }
                 </Tabs>
                 <ModalButtons
-                    className="license-key-group-editor-buttons"
+                    className="sdc-modal__footer"
                     selectedLimit={this.state.selectedLimit}
                     isFormValid={this.props.isFormValid}
                     isReadOnlyMode={isReadOnlyMode}
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js
index 514e9b85ec..47d3979064 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js
@@ -29,7 +29,6 @@ const mapStateToProps = ({
     licenseModel: { licenseKeyGroup, licenseModelEditor }
 }) => {
     let { licenseKeyGroupsList } = licenseKeyGroup;
-    let { data } = licenseKeyGroup.licenseKeyGroupsEditor;
     let { vendorName } = licenseModelEditor.data;
 
     return {
@@ -37,21 +36,24 @@ const mapStateToProps = ({
         licenseKeyGroupsList: sortByStringProperty(
             licenseKeyGroupsList,
             SORTING_PROPERTY_NAME
-        ),
-        isDisplayModal: Boolean(data),
-        isModalInEditMode: Boolean(data && data.id)
+        )
     };
 };
 
 const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
     return {
         onAddLicenseKeyGroupClick: () =>
-            LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch),
-        onEditLicenseKeyGroupClick: licenseKeyGroup =>
+            LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch, {
+                isReadOnlyMode: false,
+                version,
+                licenseModelId
+            }),
+        onEditLicenseKeyGroupClick: (licenseKeyGroup, isReadOnlyMode) =>
             LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(dispatch, {
                 licenseKeyGroup,
                 licenseModelId,
-                version
+                version,
+                isReadOnlyMode
             }),
         onDeleteLicenseKeyGroupClick: licenseKeyGroup =>
             dispatch({
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 09bab1c097..2394ec8335 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditorView.jsx
@@ -16,11 +16,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import Modal from 'nfvo-components/modal/Modal.jsx';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
 
-import LicenseKeyGroupsEditor from './LicenseKeyGroupsEditor.js';
 import InputOptions, {
     other as optionInputOther
 } from 'nfvo-components/input/validation/InputOptions.jsx';
@@ -32,8 +30,6 @@ class LicenseKeyGroupsListEditorView extends React.Component {
         licenseModelId: PropTypes.string.isRequired,
         licenseKeyGroupsList: PropTypes.array,
         isReadOnlyMode: PropTypes.bool.isRequired,
-        isDisplayModal: PropTypes.bool,
-        isModalInEditMode: PropTypes.bool,
         onAddLicenseKeyGroupClick: PropTypes.func,
         onEditLicenseKeyGroupClick: PropTypes.func,
         onDeleteLicenseKeyGroupClick: PropTypes.func
@@ -48,13 +44,7 @@ class LicenseKeyGroupsListEditorView extends React.Component {
     };
 
     render() {
-        let {
-            licenseModelId,
-            isReadOnlyMode,
-            isDisplayModal,
-            isModalInEditMode,
-            version
-        } = this.props;
+        let { isReadOnlyMode } = this.props;
         let { onAddLicenseKeyGroupClick } = this.props;
         const { localFilter } = this.state;
 
@@ -74,28 +64,6 @@ class LicenseKeyGroupsListEditorView extends React.Component {
                         )
                     )}
                 </ListEditorView>
-                <Modal
-                    show={isDisplayModal}
-                    bsSize="large"
-                    animation={true}
-                    className="onborading-modal license-model-modal license-key-groups-modal">
-                    <Modal.Header>
-                        <Modal.Title>{`${
-                            isModalInEditMode
-                                ? i18n('Edit License Key Group')
-                                : i18n('Create New License Key Group')
-                        }`}</Modal.Title>
-                    </Modal.Header>
-                    <Modal.Body>
-                        {isDisplayModal && (
-                            <LicenseKeyGroupsEditor
-                                version={version}
-                                licenseModelId={licenseModelId}
-                                isReadOnlyMode={isReadOnlyMode}
-                            />
-                        )}
-                    </Modal.Body>
-                </Modal>
             </div>
         );
     }
@@ -134,7 +102,9 @@ class LicenseKeyGroupsListEditorView extends React.Component {
         return (
             <ListEditorItemView
                 key={id}
-                onSelect={() => onEditLicenseKeyGroupClick(licenseKeyGroup)}
+                onSelect={() =>
+                    onEditLicenseKeyGroupClick(licenseKeyGroup, isReadOnlyMode)
+                }
                 onDelete={() => onDeleteLicenseKeyGroupClick(licenseKeyGroup)}
                 className="list-editor-item-view"
                 isReadOnlyMode={isReadOnlyMode}>
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
index 4d19ed39ce..c2c62b1402 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/components/FormContent.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseKeyGroups/components/FormContent.jsx
@@ -211,6 +211,7 @@ const LicenseKeyGroupFormContent = ({
                     value={manufacturerReferenceNumber}
                     data-test-id="create-ep-mrn"
                     type="text"
+                    groupClassName="no-bottom-margin"
                 />
             </GridItem>
 
@@ -223,6 +224,7 @@ const LicenseKeyGroupFormContent = ({
                     value={increments}
                     data-test-id="create-ep-increments"
                     type="text"
+                    groupClassName="no-bottom-margin"
                 />
             </GridItem>
             {id && versionUUID && <UuId id={id} versionUUID={versionUUID} />}