1 files changed, 45 insertions, 73 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,