react 16 upgrade

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

101 files changed, 1595 insertions, 1577 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>
         );
diff --git a/openecomp-ui/src/nfvo-utils/i18n/en.json b/openecomp-ui/src/nfvo-utils/i18n/en.json
index 98022c58e1..4634c37ebf 100644
--- a/openecomp-ui/src/nfvo-utils/i18n/en.json
+++ b/openecomp-ui/src/nfvo-utils/i18n/en.json
@@ -429,6 +429,8 @@
   "ComponentDependencies" : "Component Dependencies",
 
   "ComponentQuestionnaire" : "Component Questionnaire",
+  "ComponentQuestionnaire/general/nfcFunction" : "NFC Function",
+  "ComponentQuestionnaire/general/nfcNamingCode" : "NFC Naming",
   "ComponentQuestionnaire/compute" : "Compute",
   "ComponentQuestionnaire/storage/backup/backupStorageSize": "Backup Storage Size",
   "ComponentQuestionnaire/storage/backup/backupSolution": "Backup Solution",
diff --git a/openecomp-ui/src/sdc-app/Application.jsx b/openecomp-ui/src/sdc-app/Application.jsx
index f96bd73c21..e67f662263 100644
--- a/openecomp-ui/src/sdc-app/Application.jsx
+++ b/openecomp-ui/src/sdc-app/Application.jsx
@@ -43,7 +43,7 @@ class Application extends React.Component {
     render() {
         return (
             <Provider store={store}>
-                <div>
+                <div data-onboardingroot="">
                     <GlobalModal />
                     <Notifications />
                     {this.props.children}
diff --git a/openecomp-ui/src/sdc-app/common/merge/MergeEditorActionHelper.js b/openecomp-ui/src/sdc-app/common/merge/MergeEditorActionHelper.js
index 50d2a5ba93..fb58151bc8 100644
--- a/openecomp-ui/src/sdc-app/common/merge/MergeEditorActionHelper.js
+++ b/openecomp-ui/src/sdc-app/common/merge/MergeEditorActionHelper.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');
+ * 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.
+ * 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 {
     actionTypes,
@@ -24,7 +24,10 @@ import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import ItemsHelper from '../../common/helpers/ItemsHelper.js';
 import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
-import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import {
+    actionTypes as modalActionTypes,
+    modalSizes
+} from 'nfvo-components/modal/GlobalModalConstants.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import { optionsInputValues as laOptionsValues } from 'sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementConstants.js';
 import { optionsInputValues as processOptionValues } from 'sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesConstants.js';
@@ -119,7 +122,6 @@ const MergeEditorActionHelper = {
                         type: modalActionTypes.GLOBAL_MODAL_SHOW,
                         data: {
                             modalComponentName: modalContentMapper.MERGE_EDITOR,
-                            modalClassName: 'merge-editor-modal',
                             title: `${i18n('Merge Required')} - ${
                                 version.description
                             }`,
@@ -129,9 +131,9 @@ const MergeEditorActionHelper = {
                                 });
                             },
                             modalComponentProps: {
-                                size: 'lg',
-                                type: 'default'
-                            }
+                                size: modalSizes.XLARGE
+                            },
+                            bodyClassName: 'merge-editor-modal'
                         }
                     })
                 );
diff --git a/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx b/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx
index a7e36a39fc..0664952b23 100644
--- a/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx
@@ -98,8 +98,8 @@ class ConflictCategory extends React.Component {
                     <GridItem className="resolve">
                         <Button
                             className="conflict-resolve-btn"
-                            btnType="outline"
-                            color="gray"
+                            btnType="secondary"
+                            size="default"
                             onClick={() =>
                                 onResolveConflict({
                                     conflictId,
diff --git a/openecomp-ui/src/sdc-app/common/modal/ModalContentMapper.js b/openecomp-ui/src/sdc-app/common/modal/ModalContentMapper.js
index 745f01d0eb..a65199ac8f 100644
--- a/openecomp-ui/src/sdc-app/common/modal/ModalContentMapper.js
+++ b/openecomp-ui/src/sdc-app/common/modal/ModalContentMapper.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 SoftwareProductCreation from 'sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js';
@@ -31,6 +31,13 @@ import Tree from 'nfvo-components/tree/Tree.jsx';
 import MergeEditor from 'sdc-app/common/merge/MergeEditor.js';
 import Revisions from 'sdc-app/onboarding/revisions/Revisions.js';
 import VendorSelector from 'sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsVendorSelector.jsx';
+import FlowsEditor from 'sdc-app/flows/FlowsEditorModal.js';
+import EntitlementPoolsEditor from 'sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditor.js';
+import FeatureGroupEditor from 'sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditor';
+import LicenseAgreementEditor from 'sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditor';
+import LicenseKeyGroupsEditor from 'sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsEditor';
+import SoftwareProductProcessesEditor from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditor';
+import SoftwareProductComponentProcessesEditor from 'sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditor';
 
 export const modalContentMapper = {
     SOFTWARE_PRODUCT_CREATION: 'SOFTWARE_PRODUCT_CREATION',
@@ -50,7 +57,14 @@ export const modalContentMapper = {
     MERGE_EDITOR: 'MERGE_EDITOR',
     REVISIONS_LIST: 'REVISIONS_LIST',
     VENDOR_SELECTOR: 'VENDOR_SELECTOR',
-    VNF_IMPORT: 'VNF_IMPORT'
+    VNF_IMPORT: 'VNF_IMPORT',
+    FLOWS_EDITOR: 'FLOWS_EDITOR',
+    EP_EDITOR: 'EP_EDITOR',
+    FG_EDITOR: 'FG_EDITOR',
+    LA_EDITOR: 'LA_EDITOR',
+    LKG_EDITOR: 'LKG_EDITOR',
+    PROCESS_EDITOR: 'PROCESS_EDITOR',
+    COMP_PROCESS_EDITOR: 'COMP_PROCESS_EDITOR'
 };
 
 export const modalContentComponents = {
@@ -70,5 +84,12 @@ export const modalContentComponents = {
     MERGE_EDITOR: MergeEditor,
     REVISIONS_LIST: Revisions,
     VENDOR_SELECTOR: VendorSelector,
-    VNF_IMPORT: VNFImport
+    VNF_IMPORT: VNFImport,
+    FLOWS_EDITOR: FlowsEditor,
+    EP_EDITOR: EntitlementPoolsEditor,
+    FG_EDITOR: FeatureGroupEditor,
+    LA_EDITOR: LicenseAgreementEditor,
+    LKG_EDITOR: LicenseKeyGroupsEditor,
+    PROCESS_EDITOR: SoftwareProductProcessesEditor,
+    COMP_PROCESS_EDITOR: SoftwareProductComponentProcessesEditor
 };
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsActions.js b/openecomp-ui/src/sdc-app/flows/FlowsActions.js
index 9fb65f37d4..4ad7dcfdc8 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsActions.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsActions.js
@@ -1,22 +1,25 @@
-/*!
- * 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 RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import { actionTypes, enums } from './FlowsConstants.js';
 import SequenceDiagramModelHelper from './SequenceDiagramModelHelper.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import i18n from 'nfvo-utils/i18n/i18n.js';
 
 function baseUrl(serviceId, artifactId = '') {
     const restCatalogPrefix = Configuration.get('restCatalogPrefix');
@@ -97,7 +100,7 @@ const FlowsActions = Object.freeze({
                 readonly
             });
             if (!readonly) {
-                FlowsActions.openFlowDetailsEditor(dispatch);
+                FlowsActions.openEditCreateWFModal(dispatch);
             }
         } else {
             Object.keys(artifacts).forEach(artifact =>
@@ -194,14 +197,6 @@ const FlowsActions = Object.freeze({
         );
     },
 
-    openFlowDetailsEditor(dispatch, flow) {
-        dispatch({ type: actionTypes.OPEN_FLOW_DETAILS_EDITOR, flow });
-    },
-
-    closeFlowDetailsEditor(dispatch) {
-        dispatch({ type: actionTypes.CLOSE_FLOW_DETAILS_EDITOR });
-    },
-
     openFlowDiagramEditor(dispatch, { flow }) {
         dispatch({ type: actionTypes.OPEN_FLOW_DIAGRAM_EDITOR, flow });
     },
@@ -212,6 +207,27 @@ const FlowsActions = Object.freeze({
 
     reset(dispatch) {
         dispatch({ type: actionTypes.RESET });
+    },
+    openEditCreateWFModal(dispatch, flow) {
+        dispatch({ type: actionTypes.OPEN_FLOW_DETAILS_EDITOR, flow });
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.FLOWS_EDITOR,
+                modalComponentProps: {
+                    isNewArtifact: Boolean(flow && flow.uniqueId)
+                },
+                title: flow
+                    ? i18n('Edit Workflow')
+                    : i18n('Create New Workflow')
+            }
+        });
+    },
+    closeEditCreateWFModal(dispatch) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
+        dispatch({ type: actionTypes.CLOSE_FLOW_DETAILS_EDITOR });
     }
 });
 
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js b/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js
index b45a9fc54e..4ef12faa0e 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsEditorModal.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 { connect } from 'react-redux';
 import FlowsEditorModalView from './FlowsEditorModalView.jsx';
@@ -50,10 +50,10 @@ export const mapStateToProps = ({ flows }) => {
 const mapActionsToProps = (dispatch, { isNewArtifact }) => {
     return {
         onSubmit: flow => {
-            FlowsActions.closeFlowDetailsEditor(dispatch);
+            FlowsActions.closeEditCreateWFModal(dispatch);
             FlowsActions.createOrUpdateFlow(dispatch, { flow }, isNewArtifact);
         },
-        onCancel: () => FlowsActions.closeFlowDetailsEditor(dispatch),
+        onCancel: () => FlowsActions.closeEditCreateWFModal(dispatch),
         onDataChanged: deltaData =>
             ValidationHelper.dataChanged(dispatch, {
                 deltaData,
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx b/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx
index 8c805cca9c..6ac316ed5c 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.jsx
+++ b/openecomp-ui/src/sdc-app/flows/FlowsEditorModalView.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, { Component } from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
@@ -38,7 +38,8 @@ class FlowsEditorModalView extends Component {
                         onReset={onCancel}
                         formReady={formReady}
                         isValid={isFormValid}
-                        onValidateForm={() => onValidateForm()}>
+                        onValidateForm={() => onValidateForm()}
+                        btnClassName="sdc-modal__footer">
                         <Input
                             type="text"
                             name="name"
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js b/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js
index 2718c19aaa..c96415cafb 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListEditor.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListEditor.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 { connect } from 'react-redux';
 import FlowsActions from './FlowsActions.js';
@@ -20,8 +20,6 @@ import FlowsListEditorView from './FlowsListEditorView.jsx';
 export const mapStateToProps = ({ flows }) => {
     let {
         flowList = [],
-        isDisplayModal,
-        isModalInEditMode,
         shouldShowWorkflowsEditor = true,
         data = undefined,
         readonly
@@ -33,9 +31,7 @@ export const mapStateToProps = ({ flows }) => {
 
     return {
         flowList,
-        isDisplayModal,
         isCheckedOut,
-        isModalInEditMode,
         shouldShowWorkflowsEditor,
         currentFlow: data,
         readonly
@@ -44,9 +40,9 @@ export const mapStateToProps = ({ flows }) => {
 
 const mapActionsToProps = dispatch => {
     return {
-        onAddWorkflowClick: () => FlowsActions.openFlowDetailsEditor(dispatch),
+        onAddWorkflowClick: () => FlowsActions.openEditCreateWFModal(dispatch),
         onEditFlowDetailsClick: flow =>
-            FlowsActions.openFlowDetailsEditor(dispatch, flow),
+            FlowsActions.openEditCreateWFModal(dispatch, flow),
         onEditFlowDiagramClick: flow =>
             FlowsActions.fetchArtifact(dispatch, { flow }),
         onDeleteFlowClick: flow => FlowsActions.deleteFlow(dispatch, { flow }),
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx b/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx
index d1c0c9a3df..f0a4635213 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListEditorView.jsx
@@ -1,34 +1,30 @@
-/*!
- * 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, { Component } 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 FlowsEditorModal from './FlowsEditorModal.js';
 import SequenceDiagram from './SequenceDiagram.jsx';
 
 class FlowsListEditorView extends Component {
     static propTypes = {
         flowList: PropTypes.array,
         currentFlow: PropTypes.object,
-        isDisplayModal: PropTypes.bool,
-        isModalInEditMode: PropTypes.bool,
         isCheckedOut: PropTypes.bool,
         shouldShowWorkflowsEditor: PropTypes.bool,
         readonly: PropTypes.bool,
@@ -57,7 +53,7 @@ class FlowsListEditorView extends Component {
     }
 
     renderWorkflowsEditor() {
-        let { isDisplayModal, onAddWorkflowClick, isCheckedOut } = this.props;
+        let { onAddWorkflowClick, isCheckedOut } = this.props;
         const { localFilter } = this.state;
 
         return (
@@ -72,35 +68,10 @@ class FlowsListEditorView extends Component {
                         this.renderWorkflowListItem(flow, isCheckedOut)
                     )}
                 </ListEditorView>
-
-                {isDisplayModal && this.renderWorkflowEditorModal()}
             </div>
         );
     }
 
-    renderWorkflowEditorModal() {
-        let { isDisplayModal, isModalInEditMode } = this.props;
-        return (
-            <Modal
-                show={isDisplayModal}
-                animation={true}
-                className="onborading-modal workflows-editor-modal">
-                <Modal.Header>
-                    <Modal.Title>
-                        {`${
-                            isModalInEditMode
-                                ? i18n('Edit Workflow')
-                                : i18n('Create New Workflow')
-                        }`}
-                    </Modal.Title>
-                </Modal.Header>
-                <Modal.Body>
-                    <FlowsEditorModal isNewArtifact={!isModalInEditMode} />
-                </Modal.Body>
-            </Modal>
-        );
-    }
-
     renderSequenceDiagramTool() {
         let {
             onSequenceDiagramSaveClick,
diff --git a/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js b/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js
index 0279824ac4..56d389bbe5 100644
--- a/openecomp-ui/src/sdc-app/flows/FlowsListReducer.js
+++ b/openecomp-ui/src/sdc-app/flows/FlowsListReducer.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, FLOWS_EDITOR_FORM } from './FlowsConstants.js';
 
@@ -71,17 +71,13 @@ export default (state = {}, action) => {
                         validations: [{ type: 'required', data: true }]
                     }
                 },
-                data: action.flow,
-                isDisplayModal: true,
-                isModalInEditMode: Boolean(action.flow && action.flow.uniqueId)
+                data: action.flow
             };
 
         case actionTypes.CLOSE_FLOW_DETAILS_EDITOR:
             return {
                 ...state,
-                data: undefined,
-                isDisplayModal: false,
-                isModalInEditMode: false
+                data: undefined
             };
         case actionTypes.OPEN_FLOW_DIAGRAM_EDITOR:
             return {
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/components/ModalButtons.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/components/ModalButtons.jsx
index 8f3347e65d..4fbbd1a8f0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/components/ModalButtons.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/components/ModalButtons.jsx
@@ -18,7 +18,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Button from 'sdc-ui/lib/react/Button.js';
-import GridSection from 'nfvo-components/grid/GridSection.jsx';
 
 const ModalButtons = ({
     isFormValid,
@@ -28,7 +27,7 @@ const ModalButtons = ({
     onCancel,
     className
 }) => (
-    <GridSection className={`license-model-modal-buttons ${className}`}>
+    <div className={`${className}`}>
         {!selectedLimit && (
             <Button
                 btnType="primary"
@@ -44,11 +43,11 @@ const ModalButtons = ({
             type="reset">
             {i18n('Cancel')}
         </Button>
-    </GridSection>
+    </div>
 );
 
 ModalButtons.propTypes = {
-    isFormValid: PropTypes.func,
+    isFormValid: PropTypes.bool,
     isReadOnlyMode: PropTypes.bool,
     onSubmit: PropTypes.func,
     selectedLimit: PropTypes.string,
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/components/UuId.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/components/UuId.jsx
index 2edfdaede5..66d50ca33f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/components/UuId.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/components/UuId.jsx
@@ -21,7 +21,7 @@ import i18n from 'nfvo-utils/i18n/i18n.js';
 const UuidElement = ({ title, value }) => (
     <div className="uuid-container">
         <div className="uuid-title">{title}</div>
-        <div className="uuid-value" selectable>
+        <div className="uuid-value" selectable="true">
             {value}
         </div>
     </div>
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx
index 8c5d966938..be1a42c8a3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/creation/LicenseModelCreationView.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.
@@ -41,7 +41,7 @@ class LicenseModelCreationView extends React.Component {
         let { data = {}, onDataChanged, genericFieldInfo } = this.props;
         let { vendorName, description } = data;
         return (
-            <div>
+            <div className="license-model-modal">
                 {genericFieldInfo && (
                     <Form
                         ref="validationForm"
@@ -52,6 +52,8 @@ class LicenseModelCreationView extends React.Component {
                         labledButtons={true}
                         isValid={this.props.isFormValid}
                         formReady={this.props.formReady}
+                        btnClassName="sdc-modal__footer"
+                        className="license-model-form"
                         onValidateForm={() => this.validate()}>
                         <Input
                             value={vendorName}
@@ -70,7 +72,6 @@ class LicenseModelCreationView extends React.Component {
                             errorText={genericFieldInfo.vendorName.errorText}
                             type="text"
                             isRequired={true}
-                            className="field-section"
                         />
                         <Input
                             isRequired={true}
@@ -87,7 +88,7 @@ class LicenseModelCreationView extends React.Component {
                             isValid={genericFieldInfo.description.isValid}
                             errorText={genericFieldInfo.description.errorText}
                             type="textarea"
-                            className="field-section"
+                            groupClassName="no-bottom-margin"
                         />
                     </Form>
                 )}
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js
index ef705d67e4..dec7d9c3b8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js
@@ -20,6 +20,12 @@ import { actionTypes as entitlementPoolsActionTypes } from './EntitlementPoolsCo
 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');
@@ -137,9 +143,9 @@ const EntitlementPoolsActionHelper = {
 
     openEntitlementPoolsEditor(
         dispatch,
-        { entitlementPool, licenseModelId, version } = {}
+        { entitlementPool, licenseModelId, version, isReadOnlyMode } = {}
     ) {
-        if (licenseModelId && version) {
+        if (licenseModelId && version && entitlementPool) {
             this.fetchLimits(dispatch, {
                 licenseModelId,
                 version,
@@ -150,6 +156,22 @@ const EntitlementPoolsActionHelper = {
             type: entitlementPoolsActionTypes.entitlementPoolsEditor.OPEN,
             entitlementPool
         });
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.EP_EDITOR,
+                modalComponentProps: {
+                    version,
+                    licenseModelId,
+                    isReadOnlyMode,
+                    size: modalSizes.LARGE
+                },
+                title:
+                    licenseModelId && version && entitlementPool
+                        ? i18n('Edit Entitlement Pool')
+                        : i18n('Create New Entitlement Pool')
+            }
+        });
     },
 
     async deleteEntitlementPool(
@@ -181,6 +203,9 @@ const EntitlementPoolsActionHelper = {
         dispatch({
             type: entitlementPoolsActionTypes.entitlementPoolsEditor.CLOSE
         });
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
     },
 
     async saveEntitlementPool(
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 d5ca81cfac..d0e91e382b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsEditorView.jsx
@@ -46,12 +46,27 @@ const EntitlementPoolPropType = PropTypes.shape({
     name: PropTypes.string,
     description: PropTypes.string,
     thresholdUnits: PropTypes.string,
-    thresholdValue: PropTypes.string,
+    thresholdValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     increments: PropTypes.string,
     startDate: PropTypes.string,
     expiryDate: PropTypes.string
 });
 
+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>
+    );
+};
+
 class EntitlementPoolsEditorView extends React.Component {
     static propTypes = {
         data: EntitlementPoolPropType,
@@ -95,7 +110,7 @@ class EntitlementPoolsEditorView extends React.Component {
         const isTabsDisabled = !data.id || !this.props.isFormValid;
 
         return (
-            <div>
+            <div className="entitlement-pools-modal license-model-modal">
                 <Tabs
                     type="menu"
                     activeTab={selectedTab}
@@ -191,23 +206,29 @@ class EntitlementPoolsEditorView extends React.Component {
                         )}
                     </Tab>
                     {selectedTab !== tabIds.GENERAL ? (
-                        <Button
+                        <TabButton
+                            tabId={tabIds.ADD_LIMIT_BUTTON}
                             disabled={
-                                this.state.selectedLimit || isReadOnlyMode
+                                !!this.state.selectedLimit || isReadOnlyMode
                             }
-                            className="add-limit-button"
-                            tabId={tabIds.ADD_LIMIT_BUTTON}
-                            btnType="link"
-                            iconName="plus">
-                            {i18n('Add Limit')}
-                        </Button>
+                            data-test-id="add-limits-tab"
+                            className="add-limit-button">
+                            <Button
+                                disabled={
+                                    !!this.state.selectedLimit || isReadOnlyMode
+                                }
+                                btnType="link"
+                                iconName="plus">
+                                {i18n('Add Limit')}
+                            </Button>
+                        </TabButton>
                     ) : (
-                        <div key="empty_ep_tab_key" />
+                        <TabButton key="empty_ep_tab_key" />
                     ) // Render empty div to not break tabs
                     }
                 </Tabs>
                 <ModalButtons
-                    className="entitlement-pools-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/entitlementPools/EntitlementPoolsListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js
index 4679b9ec81..93e78a753b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditor.js
@@ -27,7 +27,6 @@ const mapStateToProps = ({
     licenseModel: { entitlementPool, licenseModelEditor }
 }) => {
     const { entitlementPoolsList } = entitlementPool;
-    const { data } = entitlementPool.entitlementPoolEditor;
     const { vendorName } = licenseModelEditor.data;
 
     return {
@@ -35,21 +34,27 @@ const mapStateToProps = ({
         entitlementPoolsList: sortByStringProperty(
             entitlementPoolsList,
             SORTING_PROPERTY_NAME
-        ),
-        isDisplayModal: Boolean(data),
-        isModalInEditMode: Boolean(data && data.id)
+        )
     };
 };
 
-const mapActionsToProps = (dispatch, { licenseModelId, version }) => {
+const mapActionsToProps = (
+    dispatch,
+    { licenseModelId, version, isReadOnlyMode }
+) => {
     return {
         onAddEntitlementPoolClick: () =>
-            EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch),
+            EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch, {
+                licenseModelId,
+                version,
+                isReadOnlyMode
+            }),
         onEditEntitlementPoolClick: entitlementPool =>
             EntitlementPoolsActionHelper.openEntitlementPoolsEditor(dispatch, {
                 entitlementPool,
                 licenseModelId,
-                version
+                version,
+                isReadOnlyMode
             }),
         onDeleteEntitlementPool: entitlementPool =>
             dispatch({
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx
index 0648d6632d..2592687298 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsListEditorView.jsx
@@ -17,11 +17,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 EntitlementPoolsEditor from './EntitlementPoolsEditor.js';
 import { extractUnits } from './EntitlementPoolsConstants';
 
 class EntitlementPoolsListEditorView extends React.Component {
@@ -46,14 +44,7 @@ class EntitlementPoolsListEditorView extends React.Component {
     };
 
     render() {
-        let {
-            licenseModelId,
-            isReadOnlyMode,
-            isDisplayModal,
-            isModalInEditMode,
-            version
-        } = this.props;
-        let { onAddEntitlementPoolClick } = this.props;
+        let { isReadOnlyMode, onAddEntitlementPoolClick } = this.props;
         const { localFilter } = this.state;
 
         return (
@@ -72,28 +63,6 @@ class EntitlementPoolsListEditorView extends React.Component {
                         )
                     )}
                 </ListEditorView>
-                <Modal
-                    show={isDisplayModal}
-                    bsSize="large"
-                    animation={true}
-                    className="onborading-modal license-model-modal entitlement-pools-modal">
-                    <Modal.Header>
-                        <Modal.Title>{`${
-                            isModalInEditMode
-                                ? i18n('Edit Entitlement Pool')
-                                : i18n('Create New Entitlement Pool')
-                        }`}</Modal.Title>
-                    </Modal.Header>
-                    <Modal.Body>
-                        {isDisplayModal && (
-                            <EntitlementPoolsEditor
-                                version={version}
-                                licenseModelId={licenseModelId}
-                                isReadOnlyMode={isReadOnlyMode}
-                            />
-                        )}
-                    </Modal.Body>
-                </Modal>
             </div>
         );
     }
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/components/FormContent.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/components/FormContent.jsx
index 531b6b73b2..b734a88d67 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/components/FormContent.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/entitlementPools/components/FormContent.jsx
@@ -161,11 +161,13 @@ export const EntitlementPoolsFormContent = ({
                     data-test-id="create-ep-manufacturerReferenceNumber-value"
                     value={manufacturerReferenceNumber}
                     type="text"
+                    groupClassName="no-bottom-margin"
                 />
             </GridItem>
             <GridItem colSpan={2} lastColInRow>
                 <div className="date-section">
                     <Input
+                        groupClassName="no-bottom-margin"
                         type="date"
                         label={i18n('Start Date')}
                         value={startDate}
@@ -188,6 +190,7 @@ export const EntitlementPoolsFormContent = ({
                         selectsStart
                     />
                     <Input
+                        groupClassName="no-bottom-margin"
                         type="date"
                         label={i18n('Expiry Date')}
                         value={expiryDate}
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
index d80eb9a0ab..2a9af15984 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupEditorView.jsx
@@ -85,7 +85,7 @@ const GeneralTab = ({
             </GridItem>
             <GridItem colSpan={4}>
                 <Input
-                    groupClassName="field-section"
+                    groupClassName="field-section no-bottom-margin"
                     onChange={partNumber =>
                         onDataChanged({ partNumber }, FG_EDITOR_FORM)
                     }
@@ -203,7 +203,7 @@ class FeatureGroupEditorView extends React.Component {
             licenseKeyGroupsList
         } = this.props;
         return (
-            <div>
+            <div className="license-model-modal feature-group-modal">
                 {genericFieldInfo && (
                     <Form
                         ref="validationForm"
@@ -218,6 +218,7 @@ class FeatureGroupEditorView extends React.Component {
                         labledButtons={true}
                         isReadOnlyMode={isReadOnlyMode}
                         name="feature-group-validation-form"
+                        btnClassName="sdc-modal__footer"
                         className="license-model-form feature-group-form">
                         <Tabs
                             activeTab={onTabSelect ? selectedTab : undefined}
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js
index 8d41b97cf0..fe4eb58b4c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditor.js
@@ -26,16 +26,12 @@ import { SORTING_PROPERTY_NAME } from 'sdc-app/onboarding/licenseModel/LicenseMo
 export const mapStateToProps = ({
     licenseModel: { featureGroup, licenseModelEditor }
 }) => {
-    const { featureGroupEditor: { data }, featureGroupsList } = featureGroup;
+    const { featureGroupsList } = featureGroup;
     const { vendorName, version } = licenseModelEditor.data;
 
     return {
         vendorName,
         version,
-        featureGroupsModal: {
-            show: Boolean(data),
-            editMode: Boolean(data && data.id)
-        },
         featureGroupsList: sortByStringProperty(
             featureGroupsList,
             SORTING_PROPERTY_NAME
@@ -63,13 +59,19 @@ const mapActionsToProps = (dispatch, { licenseModelId }) => {
         onAddFeatureGroupClick: actualVersion =>
             FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {
                 licenseModelId,
-                version: actualVersion
+                version: actualVersion,
+                isReadOnlyMode: false
             }),
-        onEditFeatureGroupClick: (featureGroup, actualVersion) =>
+        onEditFeatureGroupClick: (
+            featureGroup,
+            actualVersion,
+            isReadOnlyMode
+        ) =>
             FeatureGroupsActionHelper.openFeatureGroupsEditor(dispatch, {
                 featureGroup,
                 licenseModelId,
-                version: actualVersion
+                version: actualVersion,
+                isReadOnlyMode
             })
     };
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx
index 92468a3b86..63964435f2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupListEditorView.jsx
@@ -17,20 +17,13 @@ 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 FeatureGroupEditor from './FeatureGroupEditor.js';
-
 class FeatureGroupListEditorView extends React.Component {
     static propTypes = {
         vendorName: PropTypes.string,
         licenseModelId: PropTypes.string.isRequired,
-        featureGroupsModal: PropTypes.shape({
-            show: PropTypes.bool,
-            editMode: PropTypes.bool
-        }),
         isReadOnlyMode: PropTypes.bool.isRequired,
         onAddFeatureGroupClick: PropTypes.func,
         onEditFeatureGroupClick: PropTypes.func,
@@ -40,11 +33,7 @@ class FeatureGroupListEditorView extends React.Component {
     };
 
     static defaultProps = {
-        featureGroupsList: [],
-        featureGroupsModal: {
-            show: false,
-            editMode: false
-        }
+        featureGroupsList: []
     };
 
     state = {
@@ -52,13 +41,7 @@ class FeatureGroupListEditorView extends React.Component {
     };
 
     render() {
-        let {
-            licenseModelId,
-            featureGroupsModal,
-            isReadOnlyMode,
-            onAddFeatureGroupClick,
-            version
-        } = this.props;
+        let { isReadOnlyMode, onAddFeatureGroupClick, version } = this.props;
         const { localFilter } = this.state;
         return (
             <div className="license-model-list-editor feature-groups-list-editor">
@@ -77,28 +60,6 @@ class FeatureGroupListEditorView extends React.Component {
                         )
                     )}
                 </ListEditorView>
-                {featureGroupsModal.show && (
-                    <Modal
-                        show={featureGroupsModal.show}
-                        bsSize="large"
-                        animation={true}
-                        className="onborading-modal license-model-modal feature-group-modal">
-                        <Modal.Header>
-                            <Modal.Title>{`${
-                                featureGroupsModal.editMode
-                                    ? i18n('Edit Feature Group')
-                                    : i18n('Create New Feature Group')
-                            }`}</Modal.Title>
-                        </Modal.Header>
-                        <Modal.Body>
-                            <FeatureGroupEditor
-                                version={version}
-                                licenseModelId={licenseModelId}
-                                isReadOnlyMode={isReadOnlyMode}
-                            />
-                        </Modal.Body>
-                    </Modal>
-                )}
             </div>
         );
     }
@@ -114,7 +75,9 @@ class FeatureGroupListEditorView extends React.Component {
             <ListEditorItemView
                 key={listItem.id}
                 onDelete={() => this.deleteFeatureGroupItem(listItem, version)}
-                onSelect={() => this.editFeatureGroupItem(listItem, version)}
+                onSelect={() =>
+                    this.editFeatureGroupItem(listItem, version, isReadOnlyMode)
+                }
                 className="list-editor-item-view"
                 isReadOnlyMode={isReadOnlyMode}>
                 <div className="list-editor-item-view-field">
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js
index 22e21a613a..c6479a7481 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.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 RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
@@ -19,6 +19,12 @@ import { actionTypes as featureGroupsActionConstants } from './FeatureGroupsCons
 import EntitlementPoolsActionHelper from 'sdc-app/onboarding/licenseModel/entitlementPools/EntitlementPoolsActionHelper.js';
 import LicenseKeyGroupsActionHelper from 'sdc-app/onboarding/licenseModel/licenseKeyGroups/LicenseKeyGroupsActionHelper.js';
 import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
+import {
+    actionTypes as modalActionTypes,
+    modalSizes
+} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import i18n from 'nfvo-utils/i18n/i18n.js';
 
 function baseUrl(licenseModelId, version) {
     const restPrefix = Configuration.get('restPrefix');
@@ -189,7 +195,7 @@ export default {
 
     openFeatureGroupsEditor(
         dispatch,
-        { featureGroup, licenseModelId, version }
+        { featureGroup, licenseModelId, version, isReadOnlyMode }
     ) {
         return Promise.all([
             EntitlementPoolsActionHelper.fetchEntitlementPoolsList(dispatch, {
@@ -205,6 +211,26 @@ export default {
                 type: featureGroupsActionConstants.featureGroupsEditor.OPEN,
                 featureGroup
             });
+            dispatch({
+                type: featureGroupsActionConstants.featureGroupsEditor.OPEN,
+                featureGroup
+            });
+            dispatch({
+                type: modalActionTypes.GLOBAL_MODAL_SHOW,
+                data: {
+                    modalComponentName: modalContentMapper.FG_EDITOR,
+                    modalComponentProps: {
+                        version,
+                        licenseModelId,
+                        isReadOnlyMode,
+                        size: modalSizes.LARGE
+                    },
+                    title:
+                        licenseModelId && version && featureGroup
+                            ? i18n('Edit Feature Group')
+                            : i18n('Create New Feature Group')
+                }
+            });
         });
     },
 
@@ -212,5 +238,8 @@ export default {
         dispatch({
             type: featureGroupsActionConstants.featureGroupsEditor.CLOSE
         });
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
     }
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js
index feceba5726..036aaaa686 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementActionHelper.js
@@ -1,23 +1,29 @@
-/*!
- * 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 RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import { actionTypes as licenseAgreementActionTypes } from './LicenseAgreementConstants.js';
 import FeatureGroupsActionHelper from 'sdc-app/onboarding/licenseModel/featureGroups/FeatureGroupsActionHelper.js';
 import ItemsHelper from 'sdc-app/common/helpers/ItemsHelper.js';
+import {
+    actionTypes as modalActionTypes,
+    modalSizes
+} from 'nfvo-components/modal/GlobalModalConstants.js';
+import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
+import i18n from 'nfvo-utils/i18n/i18n.js';
 
 function baseUrl(licenseModelId, version) {
     const restPrefix = Configuration.get('restPrefix');
@@ -103,7 +109,7 @@ export default {
 
     openLicenseAgreementEditor(
         dispatch,
-        { licenseModelId, licenseAgreement, version }
+        { licenseModelId, licenseAgreement, version, isReadOnlyMode }
     ) {
         FeatureGroupsActionHelper.fetchFeatureGroupsList(dispatch, {
             licenseModelId,
@@ -113,12 +119,31 @@ export default {
             type: licenseAgreementActionTypes.licenseAgreementEditor.OPEN,
             licenseAgreement
         });
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.LA_EDITOR,
+                modalComponentProps: {
+                    version,
+                    licenseModelId,
+                    isReadOnlyMode,
+                    size: modalSizes.LARGE
+                },
+                title:
+                    licenseModelId && version && licenseAgreement
+                        ? i18n('Edit License Agreement')
+                        : i18n('Create New License Agreement')
+            }
+        });
     },
 
     closeLicenseAgreementEditor(dispatch) {
         dispatch({
             type: licenseAgreementActionTypes.licenseAgreementEditor.CLOSE
         });
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
     },
 
     async saveLicenseAgreement(
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx
index b2ebc1e436..b54c0806ef 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementEditorView.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';
@@ -77,7 +77,12 @@ const GeneralTabContent = ({
                     isMultiSelect={false}
                     onEnumChange={licenseTerm =>
                         onDataChanged(
-                            { licenseTerm: { choice: licenseTerm, other: '' } },
+                            {
+                                licenseTerm: {
+                                    choice: licenseTerm,
+                                    other: ''
+                                }
+                            },
                             LA_EDITOR_FORM
                         )
                     }
@@ -163,7 +168,7 @@ class LicenseAgreementEditorView extends React.Component {
             genericFieldInfo
         } = this.props;
         return (
-            <div>
+            <div className="license-model-modal license-agreement-modal">
                 {genericFieldInfo && (
                     <Form
                         ref="validationForm"
@@ -177,7 +182,8 @@ class LicenseAgreementEditorView extends React.Component {
                         onValidateForm={() =>
                             this.props.onValidateForm(LA_EDITOR_FORM)
                         }
-                        className="license-model-form license-agreement-form">
+                        className="license-model-form license-agreement-form"
+                        btnClassName="sdc-modal__footer">
                         <Tabs
                             activeTab={onTabSelect ? selectedTab : undefined}
                             onTabClick={onTabSelect}
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js
index fcb83b4279..6151ad75f2 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditor.js
@@ -25,7 +25,6 @@ const mapStateToProps = ({
     licenseModel: { licenseAgreement, licenseModelEditor }
 }) => {
     let { licenseAgreementList } = licenseAgreement;
-    let { data } = licenseAgreement.licenseAgreementEditor;
     let { vendorName, version } = licenseModelEditor.data;
 
     return {
@@ -34,9 +33,7 @@ const mapStateToProps = ({
         licenseAgreementList: sortByStringProperty(
             licenseAgreementList,
             SORTING_PROPERTY_NAME
-        ),
-        isDisplayModal: Boolean(data),
-        isModalInEditMode: Boolean(data && data.id)
+        )
     };
 };
 
@@ -45,13 +42,19 @@ const mapActionsToProps = (dispatch, { licenseModelId }) => {
         onAddLicenseAgreementClick: version =>
             LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {
                 licenseModelId,
-                version
+                version,
+                isReadOnlyMode: false
             }),
-        onEditLicenseAgreementClick: (licenseAgreement, version) =>
+        onEditLicenseAgreementClick: (
+            licenseAgreement,
+            version,
+            isReadOnlyMode
+        ) =>
             LicenseAgreementActionHelper.openLicenseAgreementEditor(dispatch, {
                 licenseModelId,
                 licenseAgreement,
-                version
+                version,
+                isReadOnlyMode
             }),
         onDeleteLicenseAgreement: (licenseAgreement, version) =>
             dispatch({
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx
index acec1e0ddb..b6ef7cf072 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/licenseAgreement/LicenseAgreementListEditorView.jsx
@@ -1,26 +1,24 @@
-/*!
- * 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';
 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 LicenseAgreementEditor from './LicenseAgreementEditor.js';
 import { extractValue } from './LicenseAgreementConstants';
 
 class LicenseAgreementListEditorView extends React.Component {
@@ -45,13 +43,7 @@ class LicenseAgreementListEditorView extends React.Component {
     };
 
     render() {
-        const {
-            licenseModelId,
-            isReadOnlyMode,
-            isDisplayModal,
-            isModalInEditMode,
-            version
-        } = this.props;
+        const { isReadOnlyMode, version } = this.props;
         const { onAddLicenseAgreementClick } = this.props;
         const { localFilter } = this.state;
 
@@ -72,28 +64,6 @@ class LicenseAgreementListEditorView extends React.Component {
                         )
                     )}
                 </ListEditorView>
-                <Modal
-                    show={isDisplayModal}
-                    bsSize="large"
-                    animation={true}
-                    className="onborading-modal license-model-modal license-agreement-modal">
-                    <Modal.Header>
-                        <Modal.Title>{`${
-                            isModalInEditMode
-                                ? i18n('Edit License Agreement')
-                                : i18n('Create New License Agreement')
-                        }`}</Modal.Title>
-                    </Modal.Header>
-                    <Modal.Body>
-                        {isDisplayModal && (
-                            <LicenseAgreementEditor
-                                version={version}
-                                licenseModelId={licenseModelId}
-                                isReadOnlyMode={isReadOnlyMode}
-                            />
-                        )}
-                    </Modal.Body>
-                </Modal>
             </div>
         );
     }
@@ -133,7 +103,11 @@ class LicenseAgreementListEditorView extends React.Component {
             <ListEditorItemView
                 key={id}
                 onSelect={() =>
-                    onEditLicenseAgreementClick(licenseAgreement, version)
+                    onEditLicenseAgreementClick(
+                        licenseAgreement,
+                        version,
+                        isReadOnlyMode
+                    )
                 }
                 onDelete={() =>
                     onDeleteLicenseAgreement(licenseAgreement, version)
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} />}
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx
index 6899360597..c2d6f8e4d6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/LicenseModelOverviewView.jsx
@@ -1,52 +1,28 @@
-/*!
- * 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';
-import i18n from 'nfvo-utils/i18n/i18n.js';
-import Modal from 'nfvo-components/modal/Modal.jsx';
 import classNames from 'classnames';
 
-import EntitlementPoolsEditor from '../entitlementPools/EntitlementPoolsEditor.js';
-import FeatureGroupEditor from '../featureGroups/FeatureGroupEditor.js';
-import LicenseAgreementEditor from '../licenseAgreement/LicenseAgreementEditor.js';
-import LicenseKeyGroupsEditor from '../licenseKeyGroups/LicenseKeyGroupsEditor.js';
-import {
-    overviewEditorHeaders,
-    selectedButton
-} from './LicenseModelOverviewConstants.js';
+import { selectedButton } from './LicenseModelOverviewConstants.js';
 
 import SummaryView from './SummaryView.jsx';
 import VLMListView from './VLMListView.jsx';
 import ListButtons from './summary/ListButtons.jsx';
 
-const setModalClassName = modalHeader => {
-    switch (modalHeader) {
-        case overviewEditorHeaders.ENTITLEMENT_POOL:
-            return 'entitlement-pools-modal';
-        case overviewEditorHeaders.LICENSE_AGREEMENT:
-            return 'license-agreement-modal';
-        case overviewEditorHeaders.FEATURE_GROUP:
-            return 'feature-group-modal';
-        case overviewEditorHeaders.LICENSE_KEY_GROUP:
-            return 'license-key-groups-modal';
-        default:
-            return '';
-    }
-};
-
 class LicenseModelOverviewView extends React.Component {
     static propTypes = {
         isDisplayModal: PropTypes.bool,
@@ -63,8 +39,6 @@ class LicenseModelOverviewView extends React.Component {
 
     render() {
         let {
-            isDisplayModal,
-            modalHeader,
             licensingDataList,
             selectedTab,
             onTabSelect,
@@ -94,66 +68,9 @@ class LicenseModelOverviewView extends React.Component {
                         showInUse={selectedInUse}
                     />
                 </div>
-                {isDisplayModal && (
-                    <Modal
-                        show={isDisplayModal}
-                        bsSize="large"
-                        animation={true}
-                        className={classNames(
-                            'onborading-modal license-model-modal',
-                            setModalClassName(modalHeader)
-                        )}>
-                        <Modal.Header>
-                            <Modal.Title>{`${i18n('Create New ')}${i18n(
-                                modalHeader
-                            )}`}</Modal.Title>
-                        </Modal.Header>
-                        <Modal.Body>
-                            {this.renderModalBody(modalHeader)}
-                        </Modal.Body>
-                    </Modal>
-                )}
             </div>
         );
     }
-
-    renderModalBody(modalHeader) {
-        let { licenseModelId, version, isReadOnlyMode } = this.props;
-        switch (modalHeader) {
-            case overviewEditorHeaders.ENTITLEMENT_POOL:
-                return (
-                    <EntitlementPoolsEditor
-                        version={version}
-                        licenseModelId={licenseModelId}
-                        isReadOnlyMode={isReadOnlyMode}
-                    />
-                );
-            case overviewEditorHeaders.LICENSE_AGREEMENT:
-                return (
-                    <LicenseAgreementEditor
-                        version={version}
-                        licenseModelId={licenseModelId}
-                        isReadOnlyMode={isReadOnlyMode}
-                    />
-                );
-            case overviewEditorHeaders.FEATURE_GROUP:
-                return (
-                    <FeatureGroupEditor
-                        version={version}
-                        licenseModelId={licenseModelId}
-                        isReadOnlyMode={isReadOnlyMode}
-                    />
-                );
-            case overviewEditorHeaders.LICENSE_KEY_GROUP:
-                return (
-                    <LicenseKeyGroupsEditor
-                        version={version}
-                        licenseModelId={licenseModelId}
-                        isReadOnlyMode={isReadOnlyMode}
-                    />
-                );
-        }
-    }
 }
 
 export default LicenseModelOverviewView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js
index 711bb7a374..6ce42a51bf 100644
--- a/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/licenseModel/overview/summary/SummaryCountList.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 React from 'react';
 import { connect } from 'react-redux';
@@ -68,7 +68,12 @@ const mapActionsToProps = dispatch => {
             switch (name) {
                 case overviewItems.ENTITLEMENT_POOLS:
                     EntitlementPoolsActionHelper.openEntitlementPoolsEditor(
-                        dispatch
+                        dispatch,
+                        {
+                            licenseModelId,
+                            version,
+                            isReadOnlyMode: false
+                        }
                     );
                     break;
                 case overviewItems.FEATURE_GROUPS:
@@ -76,7 +81,8 @@ const mapActionsToProps = dispatch => {
                         dispatch,
                         {
                             licenseModelId,
-                            version
+                            version,
+                            isReadOnlyMode: false
                         }
                     );
                     break;
@@ -85,13 +91,19 @@ const mapActionsToProps = dispatch => {
                         dispatch,
                         {
                             licenseModelId,
-                            version
+                            version,
+                            isReadOnlyMode: false
                         }
                     );
                     break;
                 case overviewItems.LICENSE_KEY_GROUPS:
                     LicenseKeyGroupsActionHelper.openLicenseKeyGroupsEditor(
-                        dispatch
+                        dispatch,
+                        {
+                            licenseModelId,
+                            version,
+                            isReadOnlyMode: false
+                        }
                     );
                     break;
                 default:
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
index 7f361d2742..4e27c39e91 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogItemDetails.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';
@@ -101,8 +101,8 @@ const CatalogItemDetails = ({
     );
 };
 
-CatalogItemDetails.PropTypes = {
-    catalogItemData: PropTypes.obj,
+CatalogItemDetails.propTypes = {
+    catalogItemData: PropTypes.object,
     catalogItemTypeClass: PropTypes.string,
     onSelect: PropTypes.func,
     onMigrate: PropTypes.func
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx
deleted file mode 100644
index 90496c9be4..0000000000
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/CatalogModal.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- *
- * 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 {
-    modalMapper,
-    catalogItemTypes,
-    catalogItemTypeClasses
-} from './onboardingCatalog/OnboardingCatalogConstants.js';
-import i18n from 'nfvo-utils/i18n/i18n.js';
-import Modal from 'nfvo-components/modal/Modal.jsx';
-import LicenseModelCreation from '../licenseModel/creation/LicenseModelCreation.js';
-import SoftwareProductCreation from '../softwareProduct/creation/SoftwareProductCreation.js';
-
-class CatalogModal extends React.Component {
-    getModalDetails() {
-        const { modalToShow } = this.props;
-        switch (modalToShow) {
-            case catalogItemTypes.LICENSE_MODEL:
-                return {
-                    title: i18n('New License Model'),
-                    element: <LicenseModelCreation />
-                };
-            case catalogItemTypes.SOFTWARE_PRODUCT:
-                return {
-                    title: i18n('New Software Product'),
-                    element: <SoftwareProductCreation />
-                };
-        }
-    }
-
-    render() {
-        const { modalToShow } = this.props;
-        const modalDetails = this.getModalDetails(modalToShow);
-
-        return (
-            <Modal
-                show={Boolean(modalDetails)}
-                className={`${
-                    catalogItemTypeClasses[modalMapper[modalToShow]]
-                }-modal`}>
-                <Modal.Header>
-                    <Modal.Title>
-                        {modalDetails && modalDetails.title}
-                    </Modal.Title>
-                </Modal.Header>
-                <Modal.Body>{modalDetails && modalDetails.element}</Modal.Body>
-            </Modal>
-        );
-    }
-}
-
-export default CatalogModal;
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
index dadbbfd720..48f53e0763 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.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.
@@ -61,7 +61,7 @@ const Filter = ({ onDataChanged, data, activeTab }) => {
     );
 };
 
-Filter.PropTypes = {
+Filter.propTypes = {
     onDataChanged: PropTypes.func,
     data: PropTypes.object,
     activeTab: PropTypes.number
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
index 81061cbbcd..f0ae41fd3a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VSPOverlay.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.
@@ -76,7 +76,7 @@ const VSPOverlay = ({ VSPList, onSelectVSP, onSeeMore, onMigrate }) => {
     );
 };
 
-VSPOverlay.PropTypes = {
+VSPOverlay.propTypes = {
     VSPList: PropTypes.array,
     onSelectVSP: PropTypes.func
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
index 73545d78f8..76854c29b7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/onboardingCatalog/VendorItem.jsx
@@ -32,7 +32,7 @@ import VSPOverlay from './VSPOverlay.jsx';
 import { TooltipWrapper } from './Tooltip.jsx';
 
 class VendorItem extends React.Component {
-    static PropTypes = {
+    static propTypes = {
         softwareProductList: PropTypes.array,
         vendor: PropTypes.object,
         shouldShowOverlay: PropTypes.bool,
diff --git a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx
index ab6add8ac2..6918a8787a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.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 Form from 'nfvo-components/input/validation/Form.jsx';
@@ -57,7 +57,8 @@ class Permissions extends React.Component {
                     hasButtons={true}
                     onSubmit={() => this.onsaveItemUsers()}
                     onReset={() => onCancel()}
-                    labledButtons={true}>
+                    labledButtons={true}
+                    btnClassName="sdc-modal__footer">
                     <div className="manage-permissions-title">
                         {i18n('Owner')}
                     </div>
diff --git a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsActionHelper.js
index 61ccad0cc4..e81c06812c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsActionHelper.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 i18n from 'nfvo-utils/i18n/i18n.js';
@@ -54,7 +54,6 @@ const RevisionaActionHelper = {
                 type: modalActionTypes.GLOBAL_MODAL_SHOW,
                 data: {
                     modalComponentName: modalContentMapper.REVISIONS_LIST,
-                    modalClassName: 'manage-revisions-modal',
                     title: i18n('Revert'),
                     modalComponentProps: {
                         itemId: itemId,
diff --git a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx
index 294f5286e7..efcce58bd7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.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
- * revisions 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 Form from 'nfvo-components/input/validation/Form.jsx';
@@ -34,14 +34,15 @@ class RevisionsView extends React.Component {
     render() {
         let { onCancel, onRevert, revisions, users } = this.props;
         return (
-            <div className="manage-revisions-page">
+            <div className="manage-revisions-modal">
                 <Form
                     hasButtons={true}
                     isValid={this.state.revertId}
                     onSubmit={() => onRevert(this.state.revertId)}
                     onReset={() => onCancel()}
                     submitButtonText={i18n('Revert')}
-                    labledButtons={true}>
+                    labledButtons={true}
+                    btnClassName="sdc-modal__footer">
                     <ListEditorView
                         title={i18n('Select a Commit')}
                         isReadOnlyMode={false}>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
index 877c7869bd..9a177b2a53 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
@@ -801,7 +801,7 @@ const SoftwareProductActionHelper = {
     },
 
     /** for the next verision */
-    addComponent(dispatch, { softwareProductId, modalClassName, version }) {
+    addComponent(dispatch, { softwareProductId, version }) {
         SoftwareProductComponentsActionHelper.clearComponentCreationData(
             dispatch
         );
@@ -813,7 +813,6 @@ const SoftwareProductActionHelper = {
             data: {
                 modalComponentName: modalContentMapper.COMPONENT_CREATION,
                 modalComponentProps: { softwareProductId, version },
-                modalClassName,
                 title: 'Create Virtual Function Component'
             }
         });
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetup.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetup.js
index d75d464f9e..6c0631963b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetup.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetup.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 { connect } from 'react-redux';
 import HeatSetupView from './HeatSetupView.jsx';
@@ -65,6 +65,12 @@ export const mapActionsToProps = (dispatch, {}) => {
                 value,
                 type
             }),
+        onToggleVolFilesDisplay: ({ module, value }) => {
+            HeatSetupActionHelper.toggleVolFilesDisplay(dispatch, {
+                module,
+                value
+            });
+        },
         onArtifactListChange: artifacts =>
             HeatSetupActionHelper.changeArtifactList(dispatch, artifacts),
         onAddAllUnassigned: () =>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupActionHelper.js
index 05ac408fbb..d2eb4e9eda 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupActionHelper.js
@@ -1,26 +1,28 @@
-/*!
- * 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 } from './HeatSetupConstants.js';
 import isEqual from 'lodash/isEqual.js';
 import cloneDeep from 'lodash/cloneDeep.js';
 import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
-// import i18n from 'nfvo-utils/i18n/i18n.js';
-// import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
 
 export default {
+    toggleVolFilesDisplay(dispatch, data) {
+        dispatch({ type: actionTypes.TOGGLE_VOL_DISPLAY, data });
+    },
+
     addModule(dispatch, isBase) {
         dispatch({ type: actionTypes.ADD_MODULE, data: { isBase } });
     },
@@ -94,7 +96,7 @@ export default {
 				dispatch({
 					type: modalActionTypes.GLOBAL_MODAL_WARNING,
 					data:{
-						msg: i18n(`You have uploaded a new HEAT. If you navigate away or Check-in without proceeding to validation, 
+						msg: i18n(`You have uploaded a new HEAT. If you navigate away or Check-in without proceeding to validation,
 							Old HEAT zip file will be in use. new HEAT will be ignored. Do you want to continue?`),
 						confirmationButtonText: i18n('Continue'),
 						onConfirmed: () => resolve(),
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js
index c87e9560f8..33bd7f639f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupConstants.js
@@ -1,17 +1,17 @@
-/*!
+/*
  * 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 keyMirror from 'nfvo-utils/KeyMirror.js';
 
@@ -30,7 +30,8 @@ export const actionTypes = keyMirror(
         MANIFEST_LOADED: null,
 
         GO_TO_VALIDATION: null,
-        IN_VALIDATION: null
+        IN_VALIDATION: null,
+        TOGGLE_VOL_DISPLAY: null
     },
     'heatSetup'
 );
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupReducer.js
index 8840a11c3e..06a7147ec9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupReducer.js
@@ -1,20 +1,21 @@
-/*!
- * 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 } from './HeatSetupConstants.js';
 import differenceWith from 'lodash/differenceWith.js';
+import cloneDeep from 'lodash/cloneDeep';
 
 const emptyModule = (isBase, currentLength) => ({
     name: `${isBase ? 'base_' : 'module_'}${currentLength + 1}`,
@@ -65,6 +66,15 @@ function addDeletedModuleFilesToUnassigned(unassigned, deletedModule) {
 
 export default (state = {}, action) => {
     switch (action.type) {
+        case actionTypes.TOGGLE_VOL_DISPLAY:
+            let clonedState = cloneDeep(state);
+            const indexToModify = findModuleIndexByName(
+                clonedState.modules,
+                action.data.module.name
+            );
+            let modToModify = clonedState.modules[indexToModify];
+            modToModify.showVolFiles = action.data.value;
+            return clonedState;
         case actionTypes.MANIFEST_LOADED:
             return {
                 ...state,
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
index 1d4efd9104..d103d115f6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
@@ -1,415 +1,26 @@
-/*!
- * 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, { Component } from 'react';
-import Button from 'sdc-ui/lib/react/Button.js';
-import Tooltip from 'react-bootstrap/lib/Tooltip.js';
-import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
-import FormControl from 'react-bootstrap/lib/FormControl.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import SelectInput from 'nfvo-components/input/SelectInput.jsx';
-import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-import { fileTypes } from './HeatSetupConstants.js';
 import { tabsMapping } from '../SoftwareProductAttachmentsConstants.js';
-import { sortable } from 'react-sortable';
-
-class ListItem extends Component {
-    render() {
-        return <li {...this.props}>{this.props.children}</li>;
-    }
-}
-
-const SortableListItem = sortable(ListItem);
-
-class SortableModuleFileList extends Component {
-    state = {
-        draggingIndex: null,
-        data: this.props.modules
-    };
-
-    componentWillReceiveProps(nextProps) {
-        this.setState({ data: nextProps.modules });
-    }
-
-    render() {
-        let {
-            unassigned,
-            onModuleRename,
-            onModuleDelete,
-            onModuleAdd,
-            onBaseAdd,
-            onModuleFileTypeChange,
-            isBaseExist,
-            isReadOnlyMode
-        } = this.props;
-        const childProps = module => ({
-            module,
-            onModuleRename,
-            onModuleDelete,
-            onModuleFileTypeChange: (value, type) =>
-                onModuleFileTypeChange({ module, value, type }),
-            files: unassigned
-        });
-        let listItems = this.state.data.map(function(item, i) {
-            return (
-                <SortableListItem
-                    key={i}
-                    updateState={data => this.setState(data)}
-                    items={this.state.data}
-                    draggingIndex={this.state.draggingIndex}
-                    sortId={i}
-                    outline="list">
-                    <ModuleFile
-                        {...childProps(item)}
-                        isReadOnlyMode={this.props.isReadOnlyMode}
-                    />
-                </SortableListItem>
-            );
-        }, this);
-
-        return (
-            <div
-                className={`modules-list-wrapper ${
-                    listItems.length > 0 ? 'modules-list-wrapper-divider' : ''
-                }`}>
-                <div className="modules-list-header">
-                    {!isBaseExist && (
-                        <div>
-                            <Button
-                                btnType="link"
-                                onClick={onBaseAdd}
-                                disabled={
-                                    isReadOnlyMode || unassigned.length === 0
-                                }>
-                                {i18n('Add Base')}
-                            </Button>
-                        </div>
-                    )}
-                    <div>
-                        <Button
-                            btnType="link"
-                            onClick={onModuleAdd}
-                            disabled={
-                                isReadOnlyMode || unassigned.length === 0
-                            }>
-                            {i18n('Add Module')}
-                        </Button>
-                    </div>
-                </div>
-                {listItems.length > 0 && <ul>{listItems}</ul>}
-            </div>
-        );
-    }
-}
-
-const tooltip = name => <Tooltip id="tooltip-bottom">{name}</Tooltip>;
-const UnassignedFileList = props => {
-    return (
-        <div>
-            <div className="modules-list-header" />
-            <div className="unassigned-files">
-                <div className="unassigned-files-title">
-                    {i18n('UNASSIGNED FILES')}
-                </div>
-                <div className="unassigned-files-list">{props.children}</div>
-            </div>
-        </div>
-    );
-};
-
-const EmptyListContent = props => {
-    let { heatDataExist } = props;
-    let displayText = heatDataExist ? 'All Files Are Assigned' : '';
-    return (
-        <div className="go-to-validation-button-wrapper">
-            <div className="all-files-assigned">{i18n(displayText)}</div>
-        </div>
-    );
-};
-const UnassignedFile = props => (
-    <OverlayTrigger
-        placement="bottom"
-        overlay={tooltip(props.name)}
-        delayShow={1000}>
-        <li
-            data-test-id="unassigned-files"
-            className="unassigned-files-list-item">
-            {props.name}
-        </li>
-    </OverlayTrigger>
-);
-
-const AddOrDeleteVolumeFiles = ({
-    add = true,
-    onAdd,
-    onDelete,
-    isReadOnlyMode
-}) => {
-    const displayText = add ? 'Add Volume Files' : 'Delete Volume Files';
-    const action = add ? onAdd : onDelete;
-    return (
-        <Button
-            disabled={isReadOnlyMode}
-            onClick={action}
-            btnType="link"
-            className="add-or-delete-volumes"
-            iconName={add ? 'plus' : 'close'}>
-            {i18n(displayText)}
-        </Button>
-    );
-};
-
-const SelectWithFileType = ({ type, selected, files, onChange }) => {
-    let filteredFiledAccordingToType = files.filter(
-        file => file.label.search(type.regex) > -1
-    );
-    if (selected) {
-        filteredFiledAccordingToType = filteredFiledAccordingToType.concat({
-            label: selected,
-            value: selected
-        });
-    }
-
-    return (
-        <SelectInput
-            data-test-id={`${type.label}-list`}
-            label={type.label}
-            value={selected}
-            onChange={value =>
-                value !== selected && onChange(value, type.label)
-            }
-            disabled={filteredFiledAccordingToType.length === 0}
-            placeholder={
-                filteredFiledAccordingToType.length === 0 ? '' : undefined
-            }
-            clearable={true}
-            options={filteredFiledAccordingToType}
-        />
-    );
-};
-
-class NameEditInput extends Component {
-    componentDidMount() {
-        this.input.focus();
-    }
-
-    render() {
-        return (
-            <FormControl
-                {...this.props}
-                className="name-edit"
-                inputRef={input => (this.input = input)}
-            />
-        );
-    }
-}
-
-class ModuleFile extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isInNameEdit: false,
-            displayVolumes: Boolean(props.module.vol || props.module.volEnv)
-        };
-    }
-
-    handleSubmit(event, name) {
-        if (event.keyCode === 13) {
-            this.handleModuleRename(event, name);
-        }
-    }
-
-    componentWillReceiveProps(nextProps) {
-        this.setState({
-            displayVolumes: Boolean(
-                nextProps.module.vol || nextProps.module.volEnv
-            )
-        });
-    }
-
-    handleModuleRename(event, name) {
-        this.setState({ isInNameEdit: false });
-        this.props.onModuleRename(name, event.target.value);
-    }
-
-    deleteVolumeFiles() {
-        const { onModuleFileTypeChange } = this.props;
-        onModuleFileTypeChange(null, fileTypes.VOL.label);
-        onModuleFileTypeChange(null, fileTypes.VOL_ENV.label);
-        this.setState({ displayVolumes: false });
-    }
-
-    renderNameAccordingToEditState() {
-        const { module: { name } } = this.props;
-        if (this.state.isInNameEdit) {
-            return (
-                <NameEditInput
-                    defaultValue={name}
-                    onBlur={evt => this.handleModuleRename(evt, name)}
-                    onKeyDown={evt => this.handleSubmit(evt, name)}
-                />
-            );
-        }
-        return <span className="filename-text">{name}</span>;
-    }
-
-    render() {
-        const {
-            module: { name, isBase, yaml, env, vol, volEnv },
-            onModuleDelete,
-            files,
-            onModuleFileTypeChange,
-            isReadOnlyMode
-        } = this.props;
-        const { displayVolumes } = this.state;
-        const moduleType = isBase ? 'BASE' : 'MODULE';
-        return (
-            <div className="modules-list-item" data-test-id="module-item">
-                <div className="modules-list-item-controllers">
-                    <div className="modules-list-item-filename">
-                        <SVGIcon
-                            name={isBase ? 'base' : 'module'}
-                            color="primary"
-                            iconClassName="heat-setup-module-icon"
-                        />
-                        <span className="module-title-by-type">{`${moduleType}: `}</span>
-                        <div
-                            className={`text-and-icon ${
-                                this.state.isInNameEdit ? 'in-edit' : ''
-                            }`}>
-                            {this.renderNameAccordingToEditState()}
-                            {!this.state.isInNameEdit && (
-                                <SVGIcon
-                                    name="pencil"
-                                    onClick={() =>
-                                        this.setState({ isInNameEdit: true })
-                                    }
-                                    data-test-id={
-                                        isBase ? 'base-name' : 'module-name'
-                                    }
-                                />
-                            )}
-                        </div>
-                    </div>
-                    <SVGIcon
-                        name="trashO"
-                        onClick={() => onModuleDelete(name)}
-                        data-test-id="module-delete"
-                    />
-                </div>
-                <div className="modules-list-item-selectors">
-                    <SelectWithFileType
-                        type={fileTypes.YAML}
-                        files={files}
-                        selected={yaml}
-                        onChange={onModuleFileTypeChange}
-                    />
-                    <SelectWithFileType
-                        type={fileTypes.ENV}
-                        files={files}
-                        selected={env}
-                        onChange={onModuleFileTypeChange}
-                    />
-                    {displayVolumes && (
-                        <SelectWithFileType
-                            type={fileTypes.VOL}
-                            files={files}
-                            selected={vol}
-                            onChange={onModuleFileTypeChange}
-                        />
-                    )}
-                    {displayVolumes && (
-                        <SelectWithFileType
-                            type={fileTypes.VOL_ENV}
-                            files={files}
-                            selected={volEnv}
-                            onChange={onModuleFileTypeChange}
-                        />
-                    )}
-                    <AddOrDeleteVolumeFiles
-                        isReadOnlyMode={isReadOnlyMode}
-                        onAdd={() => this.setState({ displayVolumes: true })}
-                        onDelete={() => this.deleteVolumeFiles()}
-                        add={!displayVolumes}
-                    />
-                </div>
-            </div>
-        );
-    }
-}
-
-class ArtifactOrNestedFileList extends Component {
-    render() {
-        let {
-            type,
-            title,
-            selected,
-            options,
-            onSelectChanged,
-            onAddAllUnassigned,
-            isReadOnlyMode,
-            headerClassName
-        } = this.props;
-        return (
-            <div
-                className={`artifact-files ${
-                    type === 'nested' ? 'nested' : ''
-                } ${headerClassName} `}>
-                <div className="artifact-files-header">
-                    <span>
-                        {type === 'artifact' && (
-                            <SVGIcon
-                                color="primary"
-                                name="artifacts"
-                                iconClassName="heat-setup-module-icon"
-                            />
-                        )}
-                        {`${title}`}
-                    </span>
-                    {type === 'artifact' && (
-                        <Button
-                            disabled={isReadOnlyMode}
-                            btnType="link"
-                            className="add-all-unassigned"
-                            onClick={onAddAllUnassigned}>
-                            {i18n('Add All Unassigned Files')}
-                        </Button>
-                    )}
-                </div>
-                {type === 'nested' ? (
-                    <ul className="nested-list">
-                        {selected.map(nested => (
-                            <li key={nested} className="nested-list-item">
-                                {nested}
-                            </li>
-                        ))}
-                    </ul>
-                ) : (
-                    <SelectInput
-                        options={options}
-                        onMultiSelectChanged={onSelectChanged || (() => {})}
-                        value={selected}
-                        clearable={false}
-                        placeholder={i18n('Add Artifact')}
-                        multi
-                    />
-                )}
-            </div>
-        );
-    }
-}
+import SortableModuleFileList from './components/SortableModuleFileList';
+import UnassignedFile from './components/UnassignedFile';
+import UnassignedFileList from './components/UnassignedFileList';
+import EmptyListContent from './components/EmptyListContent';
+import ArtifactOrNestedFileList from './components/ArtifactOrNestedFileList';
 
 const buildLabelValueObject = str =>
     typeof str === 'string' ? { value: str, label: str } : str;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/AddOrDeleteVolumeFiles.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/AddOrDeleteVolumeFiles.js
new file mode 100644
index 0000000000..92a07ae119
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/AddOrDeleteVolumeFiles.js
@@ -0,0 +1,40 @@
+/*
+ * 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 Button from 'sdc-ui/lib/react/Button.js';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+
+const AddOrDeleteVolumeFiles = ({
+    add = true,
+    onAdd,
+    onDelete,
+    isReadOnlyMode
+}) => {
+    const displayText = add ? 'Add Volume Files' : 'Delete Volume Files';
+    const action = add ? onAdd : onDelete;
+    return (
+        <Button
+            disabled={isReadOnlyMode}
+            onClick={action}
+            btnType="link"
+            className="add-or-delete-volumes"
+            iconName={add ? 'plus' : 'close'}>
+            {i18n(displayText)}
+        </Button>
+    );
+};
+
+export default AddOrDeleteVolumeFiles;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/ArtifactOrNestedFileList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/ArtifactOrNestedFileList.js
new file mode 100644
index 0000000000..c2bbde4c3d
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/ArtifactOrNestedFileList.js
@@ -0,0 +1,82 @@
+/*
+ * 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 i18n from 'nfvo-utils/i18n/i18n.js';
+import Button from 'sdc-ui/lib/react/Button.js';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
+import SelectInput from 'nfvo-components/input/SelectInput.jsx';
+
+const NestedList = ({ selected }) => (
+    <ul className="nested-list">
+        {selected.map(nested => (
+            <li key={nested} className="nested-list-item">
+                {nested}
+            </li>
+        ))}
+    </ul>
+);
+
+const ArtifactOrNestedFileList = ({
+    type,
+    title,
+    selected,
+    options,
+    onSelectChanged,
+    onAddAllUnassigned,
+    isReadOnlyMode,
+    headerClassName
+}) => (
+    <div
+        className={`artifact-files ${
+            type === 'nested' ? 'nested' : ''
+        } ${headerClassName} `}>
+        <div className="artifact-files-header">
+            <span>
+                {type === 'artifact' && (
+                    <SVGIcon
+                        color="primary"
+                        name="artifacts"
+                        iconClassName="heat-setup-module-icon"
+                    />
+                )}
+                {`${title}`}
+            </span>
+            {type === 'artifact' && (
+                <Button
+                    disabled={isReadOnlyMode}
+                    btnType="link"
+                    className="add-all-unassigned"
+                    onClick={onAddAllUnassigned}>
+                    {i18n('Add All Unassigned Files')}
+                </Button>
+            )}
+        </div>
+        {type === 'nested' ? (
+            <NestedList selected={selected} />
+        ) : (
+            <SelectInput
+                options={options}
+                onMultiSelectChanged={onSelectChanged || (() => {})}
+                value={selected}
+                clearable={false}
+                placeholder={i18n('Add Artifact')}
+                multi
+            />
+        )}
+    </div>
+);
+
+export default ArtifactOrNestedFileList;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/EmptyListContent.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/EmptyListContent.js
new file mode 100644
index 0000000000..f638d10998
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/EmptyListContent.js
@@ -0,0 +1,29 @@
+/*
+ * 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 i18n from 'nfvo-utils/i18n/i18n.js';
+
+const EmptyListContent = props => {
+    let { heatDataExist } = props;
+    let displayText = heatDataExist ? 'All Files Are Assigned' : '';
+    return (
+        <div className="go-to-validation-button-wrapper">
+            <div className="all-files-assigned">{i18n(displayText)}</div>
+        </div>
+    );
+};
+
+export default EmptyListContent;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/ModuleFile.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/ModuleFile.js
new file mode 100644
index 0000000000..5cc74e80df
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/ModuleFile.js
@@ -0,0 +1,152 @@
+/*
+ * 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 SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
+import NameEditInput from './NameEditInput.js';
+import SelectWithFileType from './SelectWithFileType';
+import { fileTypes } from '../HeatSetupConstants.js';
+import AddOrDeleteVolumeFiles from './AddOrDeleteVolumeFiles';
+
+class ModuleFile extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isInNameEdit: false
+        };
+    }
+
+    handleSubmit(event, name) {
+        if (event.keyCode === 13) {
+            this.handleModuleRename(event, name);
+        }
+    }
+
+    handleModuleRename(event, name) {
+        this.setState({ isInNameEdit: false });
+        this.props.onModuleRename(name, event.target.value);
+    }
+
+    deleteVolumeFiles() {
+        const { onModuleFileTypeChange, onToggleVolFilesDisplay } = this.props;
+        onModuleFileTypeChange(null, fileTypes.VOL.label);
+        onModuleFileTypeChange(null, fileTypes.VOL_ENV.label);
+        onToggleVolFilesDisplay(false);
+    }
+
+    renderNameAccordingToEditState() {
+        const { module: { name } } = this.props;
+        if (this.state.isInNameEdit) {
+            return (
+                <NameEditInput
+                    defaultValue={name}
+                    onBlur={evt => this.handleModuleRename(evt, name)}
+                    onKeyDown={evt => this.handleSubmit(evt, name)}
+                />
+            );
+        }
+        return <span className="filename-text">{name}</span>;
+    }
+
+    render() {
+        const {
+            module: { name, isBase, yaml, env, vol, volEnv },
+            onModuleDelete,
+            files,
+            onModuleFileTypeChange,
+            onToggleVolFilesDisplay,
+            isReadOnlyMode,
+            displayVolumes
+        } = this.props;
+
+        //const { displayVolumes } = this.state;
+
+        const moduleType = isBase ? 'BASE' : 'MODULE';
+        return (
+            <div className="modules-list-item" data-test-id="module-item">
+                <div className="modules-list-item-controllers">
+                    <div className="modules-list-item-filename">
+                        <SVGIcon
+                            name={isBase ? 'base' : 'module'}
+                            color="primary"
+                            iconClassName="heat-setup-module-icon"
+                        />
+                        <span className="module-title-by-type">{`${moduleType}: `}</span>
+                        <div
+                            className={`text-and-icon ${
+                                this.state.isInNameEdit ? 'in-edit' : ''
+                            }`}>
+                            {this.renderNameAccordingToEditState()}
+                            {!this.state.isInNameEdit && (
+                                <SVGIcon
+                                    name="pencil"
+                                    onClick={() =>
+                                        this.setState({ isInNameEdit: true })
+                                    }
+                                    data-test-id={
+                                        isBase ? 'base-name' : 'module-name'
+                                    }
+                                />
+                            )}
+                        </div>
+                    </div>
+                    <SVGIcon
+                        name="trashO"
+                        onClick={() => onModuleDelete(name)}
+                        data-test-id="module-delete"
+                    />
+                </div>
+                <div className="modules-list-item-selectors">
+                    <SelectWithFileType
+                        type={fileTypes.YAML}
+                        files={files}
+                        selected={yaml}
+                        onChange={onModuleFileTypeChange}
+                    />
+                    <SelectWithFileType
+                        type={fileTypes.ENV}
+                        files={files}
+                        selected={env}
+                        onChange={onModuleFileTypeChange}
+                    />
+                    {displayVolumes && (
+                        <SelectWithFileType
+                            type={fileTypes.VOL}
+                            files={files}
+                            selected={vol}
+                            onChange={onModuleFileTypeChange}
+                        />
+                    )}
+                    {displayVolumes && (
+                        <SelectWithFileType
+                            type={fileTypes.VOL_ENV}
+                            files={files}
+                            selected={volEnv}
+                            onChange={onModuleFileTypeChange}
+                        />
+                    )}
+                    <AddOrDeleteVolumeFiles
+                        isReadOnlyMode={isReadOnlyMode}
+                        onAdd={() => onToggleVolFilesDisplay(true)}
+                        onDelete={() => this.deleteVolumeFiles()}
+                        add={!displayVolumes}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ModuleFile;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/NameEditInput.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/NameEditInput.js
new file mode 100644
index 0000000000..36821e02c2
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/NameEditInput.js
@@ -0,0 +1,35 @@
+/*
+ * 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 FormControl from 'react-bootstrap/lib/FormControl.js';
+
+class NameEditInput extends React.Component {
+    componentDidMount() {
+        this.input.focus();
+    }
+
+    render() {
+        return (
+            <FormControl
+                {...this.props}
+                className="name-edit"
+                inputRef={input => (this.input = input)}
+            />
+        );
+    }
+}
+
+export default NameEditInput;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/SelectWithFileType.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/SelectWithFileType.js
new file mode 100644
index 0000000000..050c91e431
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/SelectWithFileType.js
@@ -0,0 +1,48 @@
+/*
+ * 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 SelectInput from 'nfvo-components/input/SelectInput.jsx';
+
+const SelectWithFileType = ({ type, selected, files, onChange }) => {
+    let filteredFiledAccordingToType = files.filter(
+        file => file.label.search(type.regex) > -1
+    );
+    if (selected) {
+        filteredFiledAccordingToType = filteredFiledAccordingToType.concat({
+            label: selected,
+            value: selected
+        });
+    }
+
+    return (
+        <SelectInput
+            data-test-id={`${type.label}-list`}
+            label={type.label}
+            value={selected}
+            onChange={value =>
+                value !== selected && onChange(value, type.label)
+            }
+            disabled={filteredFiledAccordingToType.length === 0}
+            placeholder={
+                filteredFiledAccordingToType.length === 0 ? '' : undefined
+            }
+            clearable={true}
+            options={filteredFiledAccordingToType}
+        />
+    );
+};
+
+export default SelectWithFileType;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/SortableListItem.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/SortableListItem.js
new file mode 100644
index 0000000000..57626438fb
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/SortableListItem.js
@@ -0,0 +1,21 @@
+/*
+ * 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 { sortable } from 'react-sortable';
+
+const ListItem = props => <li {...props}>{props.children}</li>;
+
+export default sortable(ListItem);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/SortableModuleFileList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/SortableModuleFileList.js
new file mode 100644
index 0000000000..f52c251361
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/SortableModuleFileList.js
@@ -0,0 +1,126 @@
+/*
+ * 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 isEqual from 'lodash/isEqual';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import SortableListItem from './SortableListItem.js';
+import { fileTypes } from '../HeatSetupConstants.js';
+
+import Button from 'sdc-ui/lib/react/Button.js';
+import ModuleFile from './ModuleFile.js';
+
+class SortableModuleFileList extends React.Component {
+    state = {
+        draggingIndex: null,
+        data: this.props.modules
+    };
+
+    componentDidUpdate() {
+        if (!isEqual(this.state.data, this.props.modules)) {
+            /* eslint-disable-next-line */
+            this.setState({
+                data: this.props.modules
+            });
+        }
+    }
+
+    render() {
+        let {
+            unassigned,
+            onModuleRename,
+            onModuleDelete,
+            onModuleAdd,
+            onBaseAdd,
+            onModuleFileTypeChange,
+            onToggleVolFilesDisplay,
+            isBaseExist,
+            isReadOnlyMode
+        } = this.props;
+        const childProps = module => ({
+            module,
+            onModuleRename,
+            onModuleDelete,
+            onModuleFileTypeChange: (value, type) => {
+                if (
+                    type === fileTypes.VOL.label ||
+                    type === fileTypes.VOL_ENV.label
+                ) {
+                    onToggleVolFilesDisplay({ module, value: false });
+                }
+                onModuleFileTypeChange({ module, value, type });
+            },
+
+            files: unassigned,
+            displayVolumes: Boolean(
+                module.vol || module.volEnv || module.showVolFiles
+            ),
+            onToggleVolFilesDisplay: value =>
+                onToggleVolFilesDisplay({ module, value })
+        });
+
+        let listItems = this.state.data.map(function(item, i) {
+            return (
+                <SortableListItem
+                    key={i}
+                    updateState={data => this.setState(data)}
+                    items={this.state.data}
+                    draggingIndex={this.state.draggingIndex}
+                    sortId={i}
+                    outline="list">
+                    <ModuleFile
+                        {...childProps(item)}
+                        isReadOnlyMode={this.props.isReadOnlyMode}
+                    />
+                </SortableListItem>
+            );
+        }, this);
+
+        return (
+            <div
+                className={`modules-list-wrapper ${
+                    listItems.length > 0 ? 'modules-list-wrapper-divider' : ''
+                }`}>
+                <div className="modules-list-header">
+                    {!isBaseExist && (
+                        <div>
+                            <Button
+                                btnType="link"
+                                onClick={onBaseAdd}
+                                disabled={
+                                    isReadOnlyMode || unassigned.length === 0
+                                }>
+                                {i18n('Add Base')}
+                            </Button>
+                        </div>
+                    )}
+                    <div>
+                        <Button
+                            btnType="link"
+                            onClick={onModuleAdd}
+                            disabled={
+                                isReadOnlyMode || unassigned.length === 0
+                            }>
+                            {i18n('Add Module')}
+                        </Button>
+                    </div>
+                </div>
+                {listItems.length > 0 && <ul>{listItems}</ul>}
+            </div>
+        );
+    }
+}
+
+export default SortableModuleFileList;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/UnassignedFile.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/UnassignedFile.js
new file mode 100644
index 0000000000..770befc0e3
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/UnassignedFile.js
@@ -0,0 +1,35 @@
+/*
+ * 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 OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
+import Tooltip from 'react-bootstrap/lib/Tooltip.js';
+
+const tooltip = name => <Tooltip id="tooltip-bottom">{name}</Tooltip>;
+
+const UnassignedFile = props => (
+    <OverlayTrigger
+        placement="bottom"
+        overlay={tooltip(props.name)}
+        delayShow={1000}>
+        <li
+            data-test-id="unassigned-files"
+            className="unassigned-files-list-item">
+            {props.name}
+        </li>
+    </OverlayTrigger>
+);
+
+export default UnassignedFile;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/UnassignedFileList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/UnassignedFileList.js
new file mode 100644
index 0000000000..75fe7cdc8a
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/UnassignedFileList.js
@@ -0,0 +1,33 @@
+/*
+ * 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 i18n from 'nfvo-utils/i18n/i18n.js';
+
+const UnassignedFileList = props => {
+    return (
+        <div>
+            <div className="modules-list-header" />
+            <div className="unassigned-files">
+                <div className="unassigned-files-title">
+                    {i18n('UNASSIGNED FILES')}
+                </div>
+                <div className="unassigned-files-list">{props.children}</div>
+            </div>
+        </div>
+    );
+};
+
+export default UnassignedFileList;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js
index bffa9f7d25..8ba5a18229 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/SoftwareProductComponents.js
@@ -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 { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
@@ -44,8 +59,7 @@ const mapActionToProps = dispatch => {
         onAddComponent: (softwareProductId, version) =>
             SoftwareProductActionHelper.addComponent(dispatch, {
                 softwareProductId,
-                version,
-                modalClassName: 'create-vfc-modal'
+                version
             }),
         onDeleteComponent: (component, softwareProductId, version) =>
             dispatch({
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js
index cd37c317af..6842d9448e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/ComputeFlavorActionHelper.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 RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
@@ -120,12 +120,9 @@ const ComputeFlavorActionHelper = {
             data: {
                 modalComponentName:
                     modalContentMapper.COMPONENT_COMPUTE_FLAVOR_EDITOR,
-                modalClassName: `compute-flavor-editor-modal-${
-                    props.compute ? 'edit' : 'create'
-                }`,
                 modalComponentProps: {
                     ...props,
-                    size: props.compute ? modalSizes.LARGE : undefined,
+                    size: props.compute ? modalSizes.XLARGE : undefined,
                     dialogClassName: 'compute-flavor-editor-modal'
                 },
                 title: `${
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx
index 840f722bb2..7ea6f78a8c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/compute/computeComponents/computeFlavor/ComputeFlavorEditorView.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';
@@ -63,6 +63,7 @@ class ComputeEditorView extends React.Component {
                             this.form = form;
                         }}
                         hasButtons={true}
+                        btnClassName="sdc-modal__footer"
                         onSubmit={() => onSubmit({ data, qdata })}
                         onReset={() => onCancel()}
                         labledButtons={true}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx
index 0b33b4017f..cb17813bae 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/creation/SoftwareProductComponentCreationView.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';
@@ -47,7 +47,7 @@ class ComponentCreationView extends React.Component {
                         onValidateForm={() =>
                             this.props.onValidateForm(forms.CREATE_FORM)
                         }
-                        className="entitlement-pools-form">
+                        btnClassName="sdc-modal__footer">
                         <GridSection hasLastColSet>
                             <GridItem colSpan={4} lastColInRow>
                                 <Input
@@ -82,6 +82,7 @@ class ComponentCreationView extends React.Component {
                                     }
                                     data-test-id="description"
                                     type="textarea"
+                                    groupClassName="no-bottom-margin"
                                 />
                             </GridItem>
                         </GridSection>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js
index 3f661b76fe..38ee2ae610 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageActionHelper.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 RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
@@ -199,7 +199,7 @@ const SoftwareProductComponentImagesActionHelper = {
                 modalComponentName:
                     modalContentMapper.SOFTWARE_PRODUCT_COMPONENT_IMAGE_EDITOR,
                 title: title,
-                modalClassName: className,
+                bodyClassName: className,
                 modalComponentProps: {
                     softwareProductId,
                     componentId,
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
index 3670ab910d..e4eccc6a39 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.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';
@@ -55,6 +55,7 @@ class SoftwareProductComponentsImageEditorView extends React.Component {
                             this.form = form;
                         }}
                         hasButtons={true}
+                        btnClassName="sdc-modal__footer"
                         onSubmit={() => this.submit()}
                         onReset={() => onCancel()}
                         labledButtons={true}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js
index 4f200ce33f..2595d9c2cb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationActionHelper.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 } from '../SoftwareProductComponentsNetworkConstants';
 import i18n from 'nfvo-utils/i18n/i18n.js';
@@ -19,10 +19,7 @@ import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalMod
 import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
 
 export default {
-    open(
-        dispatch,
-        { softwareProductId, componentId, modalClassName, version }
-    ) {
+    open(dispatch, { softwareProductId, componentId, version }) {
         dispatch({
             type: actionTypes.NICCreation.OPEN
         });
@@ -32,7 +29,6 @@ export default {
             data: {
                 modalComponentName: modalContentMapper.NIC_CREATION,
                 title: i18n('Create NEW NIC'),
-                modalClassName,
                 modalComponentProps: { softwareProductId, componentId, version }
             }
         });
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx
index 6789ba4816..133703a8a8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/NICCreation/NICCreationView.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.
@@ -59,7 +59,7 @@ class NICCreationView extends React.Component {
         } = this.props;
         let { name, description, networkDescription } = data;
         return (
-            <div>
+            <div className="network-nic-modal-create">
                 {genericFieldInfo && (
                     <Form
                         hasButtons={true}
@@ -71,7 +71,8 @@ class NICCreationView extends React.Component {
                         labledButtons={true}
                         isValid={isFormValid}
                         onValidateForm={this.validate}
-                        formReady={formReady}>
+                        formReady={formReady}
+                        btnClassName="sdc-modal__footer">
                         <GridSection hasLastColSet>
                             <GridItem colSpan={4} lastColInRow>
                                 <Input
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js
index d7205b46ed..e6a485adca 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditor.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 { connect } from 'react-redux';
 import SoftwareProductComponentsNetworkActionHelper from './SoftwareProductComponentsNetworkActionHelper.js';
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx
index df2efbe39e..0116bb2d3f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNICEditorView.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 Form from 'nfvo-components/input/validation/Form.jsx';
@@ -63,6 +63,7 @@ class SoftwareProductComponentsNetworkEditorView extends React.Component {
                             this.form = form;
                         }}
                         hasButtons={true}
+                        btnClassName="sdc-modal__footer"
                         onSubmit={() => this.submit()}
                         onReset={() => onCancel()}
                         labledButtons={true}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
index 58c816134b..3c09fae728 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkActionHelper.js
@@ -1,24 +1,27 @@
-/*!
- * 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 RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 
 import { actionTypes } from './SoftwareProductComponentsNetworkConstants.js';
-import { actionTypes as GlobalModalActions } from 'nfvo-components/modal/GlobalModalConstants.js';
+import {
+    actionTypes as GlobalModalActions,
+    modalSizes
+} from 'nfvo-components/modal/GlobalModalConstants.js';
 import { modalContentMapper as modalPagesMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
 import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
 import { NIC_QUESTIONNAIRE } from 'sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkConstants.js';
@@ -125,7 +128,6 @@ const SoftwareProductComponentNetworkActionHelper = {
             softwareProductId,
             componentId,
             isReadOnlyMode,
-            modalClassName,
             version
         }
     ) {
@@ -136,12 +138,12 @@ const SoftwareProductComponentNetworkActionHelper = {
         dispatch({
             type: GlobalModalActions.GLOBAL_MODAL_SHOW,
             data: {
-                modalClassName,
                 modalComponentProps: {
                     softwareProductId,
                     componentId,
                     isReadOnlyMode,
-                    version
+                    version,
+                    size: modalSizes.LARGE
                 },
                 modalComponentName: modalPagesMapper.NIC_EDITOR,
                 title: i18n('Edit NIC')
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js
index ac708524cf..db3c767c19 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkList.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 { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
@@ -71,7 +71,6 @@ const mapActionsToProps = (
             NICCreationActionHelper.open(dispatch, {
                 softwareProductId,
                 componentId,
-                modalClassName: 'network-nic-modal-create',
                 version
             }),
         onDeleteNic: nic =>
@@ -119,7 +118,6 @@ const mapActionsToProps = (
                         isReadOnlyMode,
                         softwareProductId,
                         componentId,
-                        modalClassName: 'network-nic-modal-edit',
                         version
                     }
                 )
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx
index 634b43f616..1019e9488b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/NameAndPurpose.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.
@@ -56,9 +56,9 @@ const NameAndPurpose = ({
     );
 };
 
-NameAndPurpose.PropTypes = {
+NameAndPurpose.propTypes = {
     name: PropTypes.string,
-    description: PropTypes.array,
+    description: PropTypes.string,
     onDataChanged: PropTypes.func,
     isReadOnlyMode: PropTypes.bool
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx
index c440d2fbd3..904df4a856 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Network.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';
@@ -83,7 +83,7 @@ const Network = ({
     );
 };
 
-Network.PropTypes = {
+Network.propTypes = {
     networkValues: PropTypes.array
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx
index 070ac816ad..8f8d143f32 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/PacketsBytes.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';
@@ -43,7 +43,7 @@ const PointerInput = ({
     );
 };
 
-PointerInput.PropTypes = {
+PointerInput.propTypes = {
     label: PropTypes.string,
     value: PropTypes.string
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx
index eb762b11b2..b2cda4f649 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/nicEditorComponents/Protocols.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';
@@ -93,9 +93,9 @@ const Protocols = ({
     );
 };
 
-Protocols.PropTypes = {
+Protocols.propTypes = {
     protocols: PropTypes.array,
-    onQDataChanged: PropTypes.function,
+    onQDataChanged: PropTypes.func,
     dataMap: PropTypes.object,
     qgenericFieldInfo: PropTypes.object
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
index 52c5cdde3d..5422174f26 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesActionHelper.js
@@ -1,21 +1,27 @@
-/*!
- * 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 RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import { actionTypes } from './SoftwareProductComponentProcessesConstants.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(softwareProductId, version, componentId) {
     const restPrefix = Configuration.get('restPrefix');
@@ -182,16 +188,39 @@ const SoftwareProductComponentProcessesActionHelper = {
         });
     },
 
-    openEditor(dispatch, process = {}) {
+    openEditor(
+        dispatch,
+        { process, softwareProductId, version, isReadOnlyMode, componentId }
+    ) {
         dispatch({
             type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_OPEN,
-            process
+            process: process ? process : {}
+        });
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.COMP_PROCESS_EDITOR,
+                modalComponentProps: {
+                    version,
+                    softwareProductId,
+                    isReadOnlyMode,
+                    componentId,
+                    size: modalSizes.LARGE
+                },
+                bodyClassName: 'edit-process-modal',
+                title: process
+                    ? i18n('Edit Process Details')
+                    : i18n('Create New Process Details')
+            }
         });
     },
     closeEditor(dispatch) {
         dispatch({
             type: actionTypes.SOFTWARE_PRODUCT_PROCESS_COMPONENTS_EDITOR_CLOSE
         });
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
     }
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
index cb6d25a6ac..3ab0b2045c 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesList.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 { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
@@ -28,15 +28,12 @@ export const mapStateToProps = ({ softwareProduct }) => {
         },
         softwareProductComponents: { componentProcesses = {} }
     } = softwareProduct;
-    let { processesList = [], processesEditor = {} } = componentProcesses;
-    let { data } = processesEditor;
+    let { processesList = [] } = componentProcesses;
 
     return {
         currentSoftwareProduct,
         isValidityData,
-        processesList,
-        isDisplayModal: Boolean(data),
-        isModalInEditMode: Boolean(data && data.id)
+        processesList
     };
 };
 
@@ -46,12 +43,20 @@ const mapActionsToProps = (
 ) => {
     return {
         onAddProcess: () =>
-            SoftwareProductComponentProcessesActionHelper.openEditor(dispatch),
-        onEditProcess: process =>
-            SoftwareProductComponentProcessesActionHelper.openEditor(
-                dispatch,
-                process
-            ),
+            SoftwareProductComponentProcessesActionHelper.openEditor(dispatch, {
+                isReadOnlyMode: false,
+                componentId,
+                softwareProductId,
+                version
+            }),
+        onEditProcess: (process, isReadOnlyMode) =>
+            SoftwareProductComponentProcessesActionHelper.openEditor(dispatch, {
+                process,
+                isReadOnlyMode,
+                componentId,
+                softwareProductId,
+                version
+            }),
         onDeleteProcess: process =>
             dispatch({
                 type: modalActionTypes.GLOBAL_MODAL_WARNING,
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
index 8fa2bffb27..fe6b8a86de 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentsProcessesListView.jsx
@@ -1,23 +1,21 @@
-/*!
- * 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';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import Modal from 'nfvo-components/modal/Modal.jsx';
-import SoftwareProductProcessesEditor from './SoftwareProductComponentProcessesEditor.js';
 import SoftwareProductProcessListView from 'sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx';
 
 class SoftwareProductProcessesView extends React.Component {
@@ -42,7 +40,6 @@ class SoftwareProductProcessesView extends React.Component {
             <div className="vsp-processes-page">
                 <div className="software-product-view">
                     <div className="software-product-landing-view-right-side vsp-components-processes-page flex-column">
-                        {this.renderEditor()}
                         <SoftwareProductProcessListView
                             addButtonTitle={i18n(
                                 'Add Component Process Details'
@@ -54,40 +51,6 @@ class SoftwareProductProcessesView extends React.Component {
             </div>
         );
     }
-
-    renderEditor() {
-        let {
-            softwareProductId,
-            version,
-            componentId,
-            isReadOnlyMode,
-            isDisplayModal,
-            isModalInEditMode
-        } = this.props;
-        return (
-            <Modal
-                show={isDisplayModal}
-                bsSize="large"
-                animation={true}
-                className="onborading-modal">
-                <Modal.Header>
-                    <Modal.Title>
-                        {isModalInEditMode
-                            ? i18n('Edit Process Details')
-                            : i18n('Create New Process Details')}
-                    </Modal.Title>
-                </Modal.Header>
-                <Modal.Body className="edit-process-modal">
-                    <SoftwareProductProcessesEditor
-                        componentId={componentId}
-                        softwareProductId={softwareProductId}
-                        version={version}
-                        isReadOnlyMode={isReadOnlyMode}
-                    />
-                </Modal.Body>
-            </Modal>
-        );
-    }
 }
 
 export default SoftwareProductProcessesView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
index c9693d4f93..e4a9893f61 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
@@ -81,6 +81,7 @@ class SoftwareProductCreationView extends React.Component {
                         isValid={this.props.isFormValid}
                         submitButtonText={i18n('Create')}
                         formReady={this.props.formReady}
+                        btnClassName="sdc-modal__footer"
                         onValidateForm={() => this.validate()}>
                         <GridSection hasLastColSet>
                             <GridItem colSpan="2">
@@ -321,6 +322,7 @@ const OnboardingProcedure = ({
                     }
                     type="radio"
                     data-test-id="new-vsp-creation-procedure-manual"
+                    groupClassName="no-bottom-margin"
                 />
             </GridItem>
         </GridSection>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js
index 44b25311e0..769596ea8d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/SoftwareProductDeploymentActionHelper.js
@@ -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 { actionTypes } from './SoftwareProductDeploymentConstants.js';
 import { actionTypes as GlobalModalActions } from 'nfvo-components/modal/GlobalModalConstants.js';
 import { modalContentMapper } from 'sdc-app/common/modal/ModalContentMapper.js';
@@ -171,7 +186,7 @@ const SoftwareProductDeploymentActionHelper = {
             data: {
                 modalComponentName: modalContentMapper.DEPLOYMENT_FLAVOR_EDITOR,
                 modalComponentProps: { softwareProductId, version },
-                modalClassName,
+                bodyClassName: modalClassName,
                 title: isEdit
                     ? 'Edit Deployment Flavor'
                     : 'Create a New Deployment Flavor'
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx
index e44d2bd966..fd575693ac 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.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 i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
@@ -46,7 +61,8 @@ export default class SoftwareProductDeploymentEditorView extends React.Component
                         onValidateForm={() => this.validate()}
                         isValid={this.props.isFormValid}
                         formReady={this.props.formReady}
-                        className="vsp-deployment-editor">
+                        className="vsp-deployment-editor"
+                        btnClassName="sdc-modal__footer">
                         <GridSection hasLastColSet>
                             <GridItem colSpan={1}>
                                 <Input
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
index cee46abc69..5f1cdb56e6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessListView.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';
@@ -66,7 +66,7 @@ class SoftwareProductProcessesListView extends React.Component {
                 key={id}
                 className="list-editor-item-view"
                 isReadOnlyMode={isReadOnlyMode}
-                onSelect={() => onEditProcess(process)}
+                onSelect={() => onEditProcess(process, isReadOnlyMode)}
                 onDelete={() => onDeleteProcess(process, version)}>
                 <div className="list-editor-item-view-field">
                     <div className="title">{i18n('Name')}</div>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
index fb44530dae..e00cafb64a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcesses.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 { connect } from 'react-redux';
 import i18n from 'nfvo-utils/i18n/i18n.js';
@@ -38,9 +38,18 @@ export const mapStateToProps = ({ softwareProduct }) => {
 const mapActionsToProps = (dispatch, { softwareProductId, version }) => {
     return {
         onAddProcess: () =>
-            SoftwareProductProcessesActionHelper.openEditor(dispatch),
-        onEditProcess: process =>
-            SoftwareProductProcessesActionHelper.openEditor(dispatch, process),
+            SoftwareProductProcessesActionHelper.openEditor(dispatch, {
+                softwareProductId,
+                version,
+                isReadOnlyMode: false
+            }),
+        onEditProcess: (process, isReadOnlyMode) =>
+            SoftwareProductProcessesActionHelper.openEditor(dispatch, {
+                process,
+                softwareProductId,
+                version,
+                isReadOnlyMode
+            }),
         onDeleteProcess: process =>
             dispatch({
                 type: modalActionTypes.GLOBAL_MODAL_WARNING,
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
index 7c72c5b892..0e586100b3 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesActionHelper.js
@@ -1,21 +1,27 @@
-/*!
- * 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 } from './SoftwareProductProcessesConstants.js';
 import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
 import Configuration from 'sdc-app/config/Configuration.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(vspId, version) {
     let { id: versionId } = version;
@@ -73,10 +79,29 @@ const SoftwareProductActionHelper = {
             });
         });
     },
-    openEditor(dispatch, process = {}) {
+    openEditor(
+        dispatch,
+        { process, softwareProductId, version, isReadOnlyMode }
+    ) {
         dispatch({
             type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_OPEN,
-            process
+            process: process ? process : {}
+        });
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_SHOW,
+            data: {
+                modalComponentName: modalContentMapper.PROCESS_EDITOR,
+                modalComponentProps: {
+                    version,
+                    softwareProductId,
+                    isReadOnlyMode,
+                    size: modalSizes.LARGE
+                },
+                bodyClassName: 'edit-process-modal',
+                title: process
+                    ? i18n('Edit Process Details')
+                    : i18n('Create New Process Details')
+            }
         });
     },
 
@@ -95,6 +120,9 @@ const SoftwareProductActionHelper = {
         dispatch({
             type: actionTypes.SOFTWARE_PRODUCT_PROCESS_EDITOR_CLOSE
         });
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+        });
     },
 
     saveProcess(
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
index 6e8254f65b..a858e0f07e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
@@ -1,12 +1,12 @@
 /*
- * Copyright © 2016-2017 European Support Limited
+ * 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.
@@ -70,7 +70,8 @@ class SoftwareProductProcessesEditorForm extends React.Component {
                         isValid={this.props.isFormValid}
                         formReady={this.props.formReady}
                         onValidateForm={() => this.props.onValidateForm()}
-                        className="vsp-processes-editor">
+                        className="vsp-processes-editor"
+                        btnClassName="sdc-modal__footer">
                         <div
                             className={`vsp-processes-editor-data${
                                 isReadOnlyMode ? ' disabled' : ''
@@ -129,7 +130,7 @@ class SoftwareProductProcessesEditorForm extends React.Component {
                                     <GridItem colSpan={2}>
                                         <Input
                                             name="vsp-process-description"
-                                            groupClassName="vsp-process-description"
+                                            groupClassName="vsp-process-description no-bottom-margin"
                                             onChange={description =>
                                                 onDataChanged({ description })
                                             }
@@ -169,6 +170,7 @@ class SoftwareProductProcessesEditorForm extends React.Component {
                                             label={i18n('Process Type')}
                                             className="process-type"
                                             data-test-id="process-type"
+                                            groupClassName="no-bottom-margin"
                                             isValid={
                                                 genericFieldInfo.type.isValid
                                             }
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
index 1357c31e12..50421bc824 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
@@ -1,12 +1,12 @@
 /*
- * Copyright © 2016-2017 European Support Limited
+ * 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.
@@ -16,8 +16,6 @@
 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 SoftwareProductProcessesEditor from './SoftwareProductProcessesEditor.js';
 import SoftwareProductProcessListView from './SoftwareProductProcessListView.jsx';
 
 class SoftwareProductProcessesView extends React.Component {
@@ -37,7 +35,6 @@ class SoftwareProductProcessesView extends React.Component {
     render() {
         return (
             <div className="software-product-landing-view-right-side vsp-processes-page">
-                {this.renderEditor()}
                 <SoftwareProductProcessListView
                     addButtonTitle={i18n('Add Process Details')}
                     {...this.props}
@@ -45,38 +42,6 @@ class SoftwareProductProcessesView extends React.Component {
             </div>
         );
     }
-
-    renderEditor() {
-        let {
-            currentSoftwareProduct: { id },
-            version,
-            isModalInEditMode,
-            isReadOnlyMode,
-            isDisplayEditor
-        } = this.props;
-        return (
-            <Modal
-                show={isDisplayEditor}
-                bsSize="large"
-                animation={true}
-                className="onborading-modal">
-                <Modal.Header>
-                    <Modal.Title>
-                        {isModalInEditMode
-                            ? i18n('Edit Process Details')
-                            : i18n('Create New Process Details')}
-                    </Modal.Title>
-                </Modal.Header>
-                <Modal.Body className="edit-process-modal">
-                    <SoftwareProductProcessesEditor
-                        softwareProductId={id}
-                        version={version}
-                        isReadOnlyMode={isReadOnlyMode}
-                    />
-                </Modal.Body>
-            </Modal>
-        );
-    }
 }
 
 export default SoftwareProductProcessesView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx
index 3a90c8042f..a33e0ede10 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/vnfMarketPlace/VNFImportView.jsx
@@ -245,7 +245,7 @@ class VNFImportView extends React.Component {
                             <Button
                                 className="vnf-submit"
                                 type="button"
-                                btnType="default"
+                                btnType="primary"
                                 onClick={() =>
                                     onSubmit(
                                         this.state.selectedRow,
@@ -257,7 +257,7 @@ class VNFImportView extends React.Component {
                             <Button
                                 className="Cancel"
                                 type="button"
-                                btnType="outline"
+                                btnType="secondary"
                                 onClick={onCancel}>
                                 {i18n('Cancel')}
                             </Button>
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
index afbb056686..8087dceca0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPageActionHelper.js
@@ -80,7 +80,7 @@ const VersionsPageActionHelper = {
                     dispatch({
                         type: modalActionTypes.GLOBAL_MODAL_CLOSE
                     }),
-                modalClassName: 'versions-tree-modal',
+                bodyClassName: 'versions-tree-modal',
                 cancelButtonText: i18n('Close'),
                 title: i18n('Version Tree')
             }
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx
index ba92d26067..da5f3be812 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/creation/VersionsPageCreationView.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';
@@ -53,6 +53,7 @@ class VersionsPageCreationView extends React.Component {
                             (this.validationForm = validationForm)
                         }
                         hasButtons={true}
+                        btnClassName="sdc-modal__footer"
                         onSubmit={() => this.submit()}
                         submitButtonText={i18n('Create')}
                         onReset={() => onCancel()}
@@ -101,6 +102,7 @@ class VersionsPageCreationView extends React.Component {
                                     onDataChanged({ description })
                                 }
                                 isRequired
+                                groupClassName="no-bottom-margin"
                             />
                         </div>
                     </Form>
@@ -129,112 +131,3 @@ class VersionsPageCreationView extends React.Component {
 }
 
 export default VersionsPageCreationView;
-
-/*
-						<div className='software-product-inline-section'>
-							<Input
-								value={name}
-								label={i18n('Name')}
-								isRequired={true}
-								onChange={name => onDataChanged({name},V_CREATION_FORM_NAME, {name: name => this.validateName(name)})}
-								isValid={genericFieldInfo.name.isValid}
-								errorText={genericFieldInfo.name.errorText}
-								type='text'
-								className='field-section'
-								data-test-id='new-vsp-name' />
-							<Input
-								label={i18n('Vendor')}
-								type='select'
-								value={vendorId}
-								isRequired={true}
-								disabled={disableVendor}
-								onChange={e => this.onSelectVendor(e)}
-								isValid={genericFieldInfo.vendorId.isValid}
-								errorText={genericFieldInfo.vendorId.errorText}
-								className='input-options-select'
-								groupClassName='bootstrap-input-options'
-								data-test-id='new-vsp-vendor' >
-								{vendorList.map(vendor =>
-								<option key={vendor.title} value={vendor.enum}>{vendor.title}</option>)}
-							</Input>
-							<Input
-								label={i18n('Category')}
-								type='select'
-								value={subCategory}
-								isRequired={true}
-								onChange={e => this.onSelectSubCategory(e)}
-								isValid={genericFieldInfo.subCategory.isValid}
-								errorText={genericFieldInfo.subCategory.errorText}
-								className='input-options-select'
-								groupClassName='bootstrap-input-options'
-								data-test-id='new-vsp-category' >
-								<option key='' value=''>{i18n('please select…')}</option>
-								{softwareProductCategories.map(category =>
-									category.subcategories &&
-									<optgroup
-										key={category.name}
-										label={category.name}>{category.subcategories.map(sub =>
-										<option key={sub.uniqueId} value={sub.uniqueId}>{`${sub.name} (${category.name})`}</option>)}
-									</optgroup>)
-								}
-							</Input>
-						</div>
-						<div className='software-product-inline-section'>
-							<Input
-								value={description}
-								label={i18n('Description')}
-								isRequired={true}
-								overlayPos='bottom'
-								onChange={description => onDataChanged({description},V_CREATION_FORM_NAME)}
-								isValid={genericFieldInfo.description.isValid}
-								errorText={genericFieldInfo.description.errorText}
-								type='textarea'
-								className='field-section'
-								data-test-id='new-vsp-description' />
-						</div>
-					</div>
-				</Form>}
-			</div>
-		);
-	}
-
-	getAvailableMethodsList() {
-		let {availableMethods} =  this.props;
-		return [...availableMethods];
-	}
-
-	onSelectVendor(e) {
-		const selectedIndex = e.target.selectedIndex;
-		const vendorId = e.target.options[selectedIndex].value;
-		this.props.onDataChanged({vendorId},V_CREATION_FORM_NAME);
-	}
-
-	onSelectSubCategory(e) {
-		const selectedIndex = e.target.selectedIndex;
-		const subCategory = e.target.options[selectedIndex].value;
-		let {softwareProductCategories, onDataChanged} = this.props;
-		let category = SoftwareProductCategoriesHelper.getCurrentCategoryOfSubCategory(subCategory, softwareProductCategories);
-		onDataChanged({category, subCategory},V_CREATION_FORM_NAME);
-	}
-
-	submit() {
-		let  {data:softwareProduct, finalizedLicenseModelList} = this.props;
-		softwareProduct.vendorName = finalizedLicenseModelList.find(vendor => vendor.id === softwareProduct.vendorId).name;
-		this.props.onSubmit(softwareProduct);
-	}
-
-	validateName(value) {
-		const {data: {id}, VSPNames} = this.props;
-		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: VSPNames});
-
-		return !isExists ?  {isValid: true, errorText: ''} :
-			{isValid: false, errorText: i18n('Software product by the name \'' + value + '\' already exists. Software product name must be unique')};
-	}
-
-	validate() {
-		this.props.onValidateForm(SP_CREATION_FORM_NAME);
-	}
-}
-
-export default SoftwareProductCreationView;
-*/
diff --git a/openecomp-ui/src/sdc-app/sdc.app.jsx b/openecomp-ui/src/sdc-app/sdc.app.jsx
index b759ffd259..af955daa0b 100644
--- a/openecomp-ui/src/sdc-app/sdc.app.jsx
+++ b/openecomp-ui/src/sdc-app/sdc.app.jsx
@@ -1,12 +1,12 @@
 /*
- * Copyright © 2016-2017 European Support Limited
+ * 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.