react 16 upgrade

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

12 files changed, 161 insertions, 228 deletions

diff --git a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
index b4bc8be9ec..33db247aee 100644
--- a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
+++ b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
@@ -1,3 +1,18 @@
+/*
+ * 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 DatePicker from 'react-datepicker';
@@ -97,8 +112,21 @@ class Datepicker extends React.Component {
                             placeholderText={placeholderText}
                         />
                     }
-                    minDate={selectsEnd && props.startDate}
-                    maxDate={selectsStart && props.endDate}
+                    minDate={
+                        selectsEnd && props.startDate
+                            ? props.startDate
+                            : undefined
+                    }
+                    maxDate={
+                        selectsStart && props.endDate
+                            ? props.endDate
+                            : undefined
+                    }
+                    popperModifiers={{
+                        preventOverflow: {
+                            boundariesElement: 'scrollParent'
+                        }
+                    }}
                     {...props}
                 />
             </div>
diff --git a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
index be0ebf2bdd..37d79cb72e 100644
--- a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
@@ -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 React from 'react';
 import PropTypes from 'prop-types';
@@ -36,8 +36,8 @@ class ExpandableInputOpened extends React.Component {
         this.rawDomNode.focus();
     }
 
-    componentWillReceiveProps(newProps) {
-        if (!newProps.value) {
+    componentDidUpdate() {
+        if (!this.props.value) {
             if (!(document.activeElement === this.rawDomNode)) {
                 this.props.handleBlur();
             }
diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
index f36d999249..21f09e6613 100644
--- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
+++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
@@ -16,9 +16,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
 
 class DualListboxView extends React.Component {
+    constructor(props) {
+        super(props);
+        this.availableListRef = React.createRef();
+        this.availableListFilterRef = React.createRef();
+        this.selectedValuesListFilterRef = React.createRef();
+        this.selectedValuesRef = React.createRef();
+    }
     static propTypes = {
         availableList: PropTypes.arrayOf(
             PropTypes.shape({
@@ -77,13 +84,13 @@ class DualListboxView extends React.Component {
                     unselectedList,
                     {
                         value: availableListFilter,
-                        ref: 'availableListFilter',
+                        ref: this.availableListFilterRef,
                         disabled: isReadOnlyMode,
                         onChange: value =>
                             this.setState({ availableListFilter: value })
                     },
                     {
-                        ref: 'availableValues',
+                        ref: this.availableListRef,
                         disabled: isReadOnlyMode,
                         testId: 'available'
                     }
@@ -94,13 +101,13 @@ class DualListboxView extends React.Component {
                     selectedList,
                     {
                         value: selectedValuesListFilter,
-                        ref: 'selectedValuesListFilter',
+                        ref: this.selectedValuesListFilterRef,
                         disabled: isReadOnlyMode,
                         onChange: value =>
                             this.setState({ selectedValuesListFilter: value })
                     },
                     {
-                        ref: 'selectedValues',
+                        ref: this.selectedValuesRef,
                         disabled: isReadOnlyMode,
                         testId: 'selected'
                     }
@@ -236,6 +243,12 @@ class DualListboxView extends React.Component {
     removeAllFromSelectedList() {
         this.props.onChange([]);
     }
+
+    // fix for auto-selection of first value in the list on the first render
+    componentDidMount() {
+        this.availableListRef.current.input.value = '';
+        this.selectedValuesRef.current.input.value = '';
+    }
 }
 
 export default DualListboxView;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
index b5db67c027..027920c423 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
@@ -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 React from 'react';
@@ -42,7 +42,8 @@ class Form extends React.Component {
         cancelButtonText: PropTypes.string,
         onValidChange: PropTypes.func,
         onValidityChanged: PropTypes.func,
-        onValidateForm: PropTypes.func
+        onValidateForm: PropTypes.func,
+        btnClassName: PropTypes.string
     };
 
     constructor(props) {
@@ -64,6 +65,7 @@ class Form extends React.Component {
             submitButtonText,
             cancelButtonText,
             children,
+            btnClassName,
             ...formProps
         } = this.props;
         /* eslint-enable no-unused-vars */
@@ -82,6 +84,7 @@ class Form extends React.Component {
                         cancelButtonText={cancelButtonText}
                         ref={this.setButtonsRef}
                         isReadOnlyMode={isReadOnlyMode}
+                        className={btnClassName}
                     />
                 )}
             </form>
@@ -159,6 +162,7 @@ export class TabsForm extends Form {
             onValidChange,
             onValidityChanged,
             onDataChanged,
+            btnClassName,
             children,
             ...formProps
         } = this.props;
@@ -176,6 +180,7 @@ export class TabsForm extends Form {
                         cancelButtonText={cancelButtonText}
                         ref={buttons => (this.buttons = buttons)}
                         isReadOnlyMode={isReadOnlyMode}
+                        className={btnClassName}
                     />
                 )}
             </form>
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
index c54d4b660f..f3279b0b6d 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
@@ -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.
@@ -197,11 +197,15 @@ class Input extends React.Component {
             selectedValues
         });
     }
-    componentWillReceiveProps(nextProps) {
-        this.setState({
-            value: nextProps.value
-        });
+
+    static getDerivedStateFromProps(props, state) {
+        if (state.value === props.value) {
+            return null;
+        } else {
+            return { value: props.value, ...state };
+        }
     }
+
     onChange(e) {
         const { onChange, type } = this.props;
         let value = e.target.value;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
index 550989688e..a4397114a0 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
@@ -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.
  */
 /**
  * Holds the buttons for save/reset for forms.
@@ -57,8 +57,12 @@ class ValidationButtons extends React.Component {
         ) : (
             <SVGIcon className="close" name="close" />
         );
+        let className = 'validation-buttons';
+        if (this.props.className) {
+            className += ' ' + this.props.className;
+        }
         return (
-            <div className="validation-buttons">
+            <div className={className}>
                 {!this.props.isReadOnlyMode ? (
                     <div>
                         <Button
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>
-        );
-    }
-}
diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
index 61121df335..d852ac847b 100644
--- a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
@@ -19,7 +19,7 @@ import classnames from 'classnames';
 import Collapse from 'react-bootstrap/lib/Collapse.js';
 
 class NavigationSideBar extends React.Component {
-    static PropTypes = {
+    static propTypes = {
         activeItemId: PropTypes.string.isRequired,
         onSelect: PropTypes.func,
         onToggle: PropTypes.func,
@@ -70,10 +70,10 @@ class NavigationSideBar extends React.Component {
 }
 
 class NavigationMenu extends React.Component {
-    static PropTypes = {
+    static propTypes = {
         activeItemId: PropTypes.string.isRequired,
         onNavigationItemClick: PropTypes.func,
-        menu: PropTypes.array
+        menu: PropTypes.object
     };
 
     render() {
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx
index ae0913f3a9..757dc6737e 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx
@@ -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 React from 'react';
@@ -63,6 +63,7 @@ class CommitCommentModal extends React.Component {
                 submitButtonText={commitButtonText}
                 labledButtons={true}
                 isValid={true}
+                btnClassName="sdc-modal__footer"
                 className="comment-commit-form">
                 <div className="commit-modal-text">{descriptionText}</div>
                 <Input
@@ -71,6 +72,7 @@ class CommitCommentModal extends React.Component {
                     label={i18n('Enter Commit Comment:')}
                     value={this.state.comment}
                     type="textarea"
+                    groupClassName="no-bottom-margin"
                 />
             </Form>
         );