react 16 upgrade

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

4 files changed, 61 insertions, 184 deletions

diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
index 3a80e734ea..0c924304cc 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
@@ -4,9 +4,9 @@
  * 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.
@@ -18,81 +18,55 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import Modal from 'nfvo-components/modal/Modal.jsx';
-import Button from 'sdc-ui/lib/react/Button.js';
+import {
+    Modal,
+    ModalHeader,
+    ModalTitle,
+    ModalBody,
+    ModalFooter
+} from 'sdc-ui/lib/react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import { modalContentComponents } from 'sdc-app/common/modal/ModalContentMapper.js';
 import { actionTypes, typeEnum } from './GlobalModalConstants.js';
 
-const typeClass = {
-    default: 'primary',
-    error: 'negative',
-    warning: 'warning',
-    success: 'positive'
-};
-
-const type2HeaderColor = {
-    default: 'primary',
-    error: 'danger',
-    warning: 'warning',
-    success: 'success'
-};
-
-const ModalFooter = ({
-    type,
+const GlobalModalFooter = ({
     onConfirmed,
     onDeclined,
     onClose,
     confirmationButtonText,
     cancelButtonText
 }) => {
-    let myPropsForNoConfirmed = {};
+    let actionButtonClick;
     if (onConfirmed) {
-        myPropsForNoConfirmed.btnType = 'outline';
+        actionButtonClick = () => {
+            onConfirmed();
+            onClose();
+        };
     }
     return (
-        <Modal.Footer>
-            <div className="sdc-modal-footer">
-                {onConfirmed && (
-                    <Button
-                        data-test-id="sdc-modal-confirm-button"
-                        color={typeClass[type]}
-                        btnType="primary"
-                        onClick={() => {
-                            onConfirmed();
-                            onClose();
-                        }}>
-                        {confirmationButtonText}
-                    </Button>
-                )}
-                <Button
-                    {...myPropsForNoConfirmed}
-                    data-test-id="sdc-modal-cancel-button"
-                    btnType="secondary"
-                    color={typeClass[type]}
-                    onClick={
-                        onDeclined
-                            ? () => {
-                                  onDeclined();
-                                  onClose();
-                              }
-                            : () => onClose()
-                    }>
-                    {cancelButtonText}
-                </Button>
-            </div>
-        </Modal.Footer>
+        <ModalFooter
+            actionButtonText={onConfirmed ? confirmationButtonText : undefined}
+            actionButtonClick={actionButtonClick}
+            closeButtonText={cancelButtonText}
+            onClose={
+                onDeclined
+                    ? () => {
+                          onDeclined();
+                          onClose();
+                      }
+                    : () => onClose()
+            }
+            withButtons
+        />
     );
 };
 
-ModalFooter.defaultProps = {
-    type: 'default',
+GlobalModalFooter.defaultProps = {
     confirmationButtonText: i18n('OK'),
     cancelButtonText: i18n('Cancel')
 };
 
-ModalFooter.PropTypes = {
-    type: PropTypes.string,
+GlobalModalFooter.propTypes = {
     confirmationButtonText: PropTypes.string,
     cancelButtonText: PropTypes.string
 };
@@ -121,12 +95,13 @@ export class GlobalModalView extends React.Component {
         onConfirmed: PropTypes.func,
         onDeclined: PropTypes.func,
         confirmationButtonText: PropTypes.string,
-        cancelButtonText: PropTypes.string
+        cancelButtonText: PropTypes.string,
+        bodyClassName: PropTypes.string
     };
 
     static defaultProps = {
         show: false,
-        type: 'default',
+        type: 'custom',
         title: ''
     };
 
@@ -137,26 +112,24 @@ export class GlobalModalView extends React.Component {
             show,
             modalComponentName,
             modalComponentProps,
-            modalClassName,
             msg,
             onConfirmed,
             onDeclined,
             confirmationButtonText,
             cancelButtonText,
-            onClose
+            onClose,
+            bodyClassName
         } = this.props;
         const ComponentToRender = modalContentComponents[modalComponentName];
         return (
             <Modal
                 show={show}
-                bsSize={modalComponentProps && modalComponentProps.size}
-                className={`onborading-modal ${modalClassName || ''} ${
-                    type2HeaderColor[type]
-                }`}>
-                <Modal.Header>
-                    <Modal.Title>{title}</Modal.Title>
-                </Modal.Header>
-                <Modal.Body>
+                type={type}
+                size={modalComponentProps && modalComponentProps.size}>
+                <ModalHeader type={type} onClose={onClose}>
+                    <ModalTitle>{title}</ModalTitle>
+                </ModalHeader>
+                <ModalBody className={bodyClassName}>
                     {ComponentToRender ? (
                         <ComponentToRender {...modalComponentProps} />
                     ) : msg && typeof msg === 'string' ? (
@@ -172,10 +145,9 @@ export class GlobalModalView extends React.Component {
                     ) : (
                         msg
                     )}
-                </Modal.Body>
+                </ModalBody>
                 {(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) && (
-                    <ModalFooter
-                        type={type}
+                    <GlobalModalFooter
                         onConfirmed={onConfirmed}
                         onDeclined={onDeclined}
                         onClose={onClose}
@@ -196,7 +168,7 @@ export class GlobalModalView extends React.Component {
 
 GlobalModalView.propTypes = {
     show: PropTypes.bool,
-    type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
+    type: PropTypes.oneOf(['custom', 'error', 'alert', 'info']),
     title: PropTypes.string,
     modalComponentProps: PropTypes.object,
     modalComponentName: PropTypes.string,
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
index 8bac377e08..434b41f931 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
@@ -5,13 +5,13 @@
  * 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
+ *      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.
+ * 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 keyMirror from 'nfvo-utils/KeyMirror.js';
 
@@ -27,13 +27,15 @@ export const actionTypes = keyMirror(
 );
 
 export const typeEnum = {
-    DEFAULT: 'default',
+    DEFAULT: 'custom',
     ERROR: 'error',
-    WARNING: 'warning',
-    SUCCESS: 'success'
+    WARNING: 'alert',
+    SUCCESS: 'info'
 };
 
 export const modalSizes = {
     LARGE: 'large',
-    SMALL: 'small'
+    SMALL: 'small',
+    XLARGE: 'extraLarge',
+    MEDIUM: 'medium'
 };
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js b/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
index b2273fa7a7..a3383aba43 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js
@@ -1,17 +1,17 @@
-/*!
- * 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.
  * You may obtain a copy of the License at
  *
- * http://www.apache.org/licenses/LICENSE-2.0
+ *      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.
+ * 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 { actionTypes, typeEnum } from './GlobalModalConstants.js';
@@ -25,20 +25,17 @@ export default (state = null, action) => {
         case actionTypes.GLOBAL_MODAL_ERROR:
             return {
                 type: typeEnum.ERROR,
-                modalClassName: 'notification-modal',
                 ...action.data
             };
         case actionTypes.GLOBAL_MODAL_WARNING:
             return {
                 type: typeEnum.WARNING,
-                modalClassName: 'notification-modal',
                 ...action.data
             };
 
         case actionTypes.GLOBAL_MODAL_SUCCESS:
             return {
                 type: typeEnum.SUCCESS,
-                modalClassName: 'notification-modal',
                 ...action.data
             };
 
diff --git a/openecomp-ui/src/nfvo-components/modal/Modal.jsx b/openecomp-ui/src/nfvo-components/modal/Modal.jsx
deleted file mode 100644
index 2f70a6ac1b..0000000000
--- a/openecomp-ui/src/nfvo-components/modal/Modal.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * 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 ReactDOM from 'react-dom';
-import BootstrapModal from 'react-bootstrap/lib/Modal.js';
-import { isEqual } from 'lodash';
-let nextModalId = 0;
-
-export default class Modal extends React.Component {
-    static Header = BootstrapModal.Header;
-
-    static Title = BootstrapModal.Title;
-
-    static Footer = BootstrapModal.Footer;
-
-    static Body = class ModalBody extends React.Component {
-        render() {
-            let { children, ...props } = this.props;
-            return (
-                <BootstrapModal.Body {...props}>{children}</BootstrapModal.Body>
-            );
-        }
-
-        componentDidMount() {
-            let element = ReactDOM.findDOMNode(this);
-            element.addEventListener('click', event => {
-                if (event.target.tagName === 'A') {
-                    event.preventDefault();
-                }
-            });
-            ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
-                element.addEventListener(eventType, event =>
-                    event.stopPropagation()
-                )
-            );
-        }
-
-        componentWillUnmount() {
-            let element = ReactDOM.findDOMNode(this);
-
-            ['wheel', 'mousewheel', 'DOMMouseScroll', 'click'].forEach(
-                eventType => element.removeEventListener(eventType)
-            );
-        }
-
-        shouldComponentUpdate(nextProps) {
-            return !isEqual(this.props, nextProps);
-        }
-    };
-
-    componentWillMount() {
-        this.modalId = `dox-ui-modal-${nextModalId++}`;
-    }
-
-    componentDidMount() {
-        this.ensureRootClass();
-    }
-
-    componentDidUpdate() {
-        this.ensureRootClass();
-    }
-
-    ensureRootClass() {
-        let element = document.getElementById(this.modalId);
-        while (element && !element.hasAttribute('data-reactroot')) {
-            element = element.parentElement;
-        }
-        if (element && !element.classList.contains('dox-ui')) {
-            element.classList.add('dox-ui');
-        }
-    }
-
-    render() {
-        let { children, ...props } = this.props;
-        return (
-            <BootstrapModal {...props} id={this.modalId}>
-                {children}
-            </BootstrapModal>
-        );
-    }
-}