React version upgrade

Issue-ID: SDC-894
Change-Id: I7c200a4b0b1d09a8fec638906db4258cafe252b5
Signed-off-by: svishnev <shlomo-stanisla.vishnevetskiy@amdocs.com>

8 files changed, 289 insertions, 227 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/Onboarding.js b/openecomp-ui/src/sdc-app/onboarding/Onboarding.js
new file mode 100644
index 0000000000..faec816d42
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/Onboarding.js
@@ -0,0 +1,22 @@
+/*
+ * Copyright © 2016-2017 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 OnboardingView from './OnboardingView.jsx';
+import {connect} from 'react-redux';
+
+const mapStateToProps = ({currentScreen}) => ({currentScreen});
+const Onboarding = connect(mapStateToProps, null)(OnboardingView);
+export default Onboarding;
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js
index 794f5c1781..4c4c709a7b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingActionHelper.js
@@ -1,18 +1,19 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2017 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 UsersActionHelper from './users/UsersActionHelper.js';
 import VersionsPageActionHelper from './versionsPage/VersionsPageActionHelper.js';
 import PermissionsActionHelper from './permissions/PermissionsActionHelper.js';
@@ -32,7 +33,6 @@ import SoftwareProductDependenciesActionHelper from './softwareProduct/dependenc
 import ComputeFlavorActionHelper from './softwareProduct/components/compute/ComputeFlavorActionHelper.js';
 import OnboardActionHelper from './onboard/OnboardActionHelper.js';
 import MergeEditorActionHelper from 'sdc-app/common/merge/MergeEditorActionHelper.js';
-// import {SyncStates} from 'sdc-app/common/merge/MergeEditorConstants.js';
 import SoftwareProductComponentsMonitoringAction from './softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringActionHelper.js';
 import {actionTypes, enums} from './OnboardingConstants.js';
 import {actionTypes as SoftwareProductActionTypes, onboardingOriginTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx b/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx
index e576bb3f85..fbb12022c1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingPunchOut.jsx
@@ -1,24 +1,26 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2017 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 {render} from 'react-dom';
 import ReactDOM from 'react-dom';
-import {connect} from 'react-redux';
+
 import isEqual from 'lodash/isEqual.js';
-import objectValues from 'lodash/values.js';
+
 import lodashUnionBy from 'lodash/unionBy.js';
 
 import i18n from 'nfvo-utils/i18n/i18n.js';
@@ -27,175 +29,17 @@ import store from 'sdc-app/AppStore.js';
 import Configuration from 'sdc-app/config/Configuration.js';
 import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
 
-import Onboard from './onboard/Onboard.js';
-import VersionsPage from './versionsPage/VersionsPage.js';
-import LicenseModel from './licenseModel/LicenseModel.js';
-import LicenseModelOverview from './licenseModel/overview/LicenseModelOverview.js';
-import ActivityLog from 'sdc-app/common/activity-log/ActivityLog.js';
-
-import LicenseAgreementListEditor from './licenseModel/licenseAgreement/LicenseAgreementListEditor.js';
-import FeatureGroupListEditor from './licenseModel/featureGroups/FeatureGroupListEditor.js';
-import LicenseKeyGroupsListEditor from './licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js';
-import EntitlementPoolsListEditor from './licenseModel/entitlementPools/EntitlementPoolsListEditor.js';
-import SoftwareProduct from './softwareProduct/SoftwareProduct.js';
-import SoftwareProductLandingPage  from './softwareProduct/landingPage/SoftwareProductLandingPage.js';
-import SoftwareProductDetails  from './softwareProduct/details/SoftwareProductDetails.js';
-import SoftwareProductAttachments from './softwareProduct/attachments/SoftwareProductAttachments.js';
-import SoftwareProductProcesses from './softwareProduct/processes/SoftwareProductProcesses.js';
-import SoftwareProductDeployment from './softwareProduct/deployment/SoftwareProductDeployment.js';
-import SoftwareProductNetworks from './softwareProduct/networks/SoftwareProductNetworks.js';
-import SoftwareProductDependencies from './softwareProduct/dependencies/SoftwareProductDependencies.js';
-
-import SoftwareProductComponentsList from './softwareProduct/components/SoftwareProductComponents.js';
-import SoftwareProductComponentProcessesList from './softwareProduct/components/processes/SoftwareProductComponentProcessesList.js';
-import SoftwareProductComponentStorage from './softwareProduct/components/storage/SoftwareProductComponentStorage.js';
-import SoftwareProductComponentsNetworkList from './softwareProduct/components/network/SoftwareProductComponentsNetworkList.js';
-import SoftwareProductComponentsGeneral from './softwareProduct/components/general/SoftwareProductComponentsGeneral.js';
-import SoftwareProductComponentsCompute from './softwareProduct/components/compute/SoftwareProductComponentCompute.js';
-import SoftwareProductComponentLoadBalancing from './softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js';
-import SoftwareProductComponentsImageList from './softwareProduct/components/images/SoftwareProductComponentsImageList.js';
-import SoftwareProductComponentsMonitoring from './softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js';
+
 import {onboardingMethod as onboardingMethodTypes, onboardingOriginTypes} from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
 
 import {itemTypes} from './versionsPage/VersionsPageConstants.js';
 
+import {AppContainer} from 'react-hot-loader';
 import HeatSetupActionHelper from './softwareProduct/attachments/setup/HeatSetupActionHelper.js';
 
 import {actionTypes, enums, screenTypes} from './OnboardingConstants.js';
 import OnboardingActionHelper from './OnboardingActionHelper.js';
-
-class OnboardingView extends React.Component {
-	static propTypes = {
-		currentScreen: PropTypes.shape({
-			screen: PropTypes.oneOf(objectValues(enums.SCREEN)).isRequired,
-			props: PropTypes.object.isRequired,
-			itemPermission: PropTypes.object
-		}).isRequired
-	};
-
-	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())
-		);
-	}
-
-	render() {
-		let {currentScreen} = this.props;
-		let {screen, props} = currentScreen;
-
-		return (
-			<div className='dox-ui dox-ui-punch-out dox-ui-punch-out-full-page'>
-				{(() => {
-					switch (screen) {
-						case enums.SCREEN.ONBOARDING_CATALOG:
-							return <Onboard {...props}/>;
-						case enums.SCREEN.VERSIONS_PAGE:
-							return <VersionsPage {...props} />;
-
-						case enums.SCREEN.LICENSE_AGREEMENTS:
-						case enums.SCREEN.FEATURE_GROUPS:
-						case enums.SCREEN.ENTITLEMENT_POOLS:
-						case enums.SCREEN.LICENSE_KEY_GROUPS:
-						case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
-						case enums.SCREEN.ACTIVITY_LOG:
-							return (
-								<LicenseModel currentScreen={currentScreen}>
-									{
-										(()=>{
-											switch(screen) {
-												case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
-													return <LicenseModelOverview {...props}/>;
-												case enums.SCREEN.LICENSE_AGREEMENTS:
-													return <LicenseAgreementListEditor {...props}/>;
-												case enums.SCREEN.FEATURE_GROUPS:
-													return <FeatureGroupListEditor {...props}/>;
-												case enums.SCREEN.ENTITLEMENT_POOLS:
-													return <EntitlementPoolsListEditor {...props}/>;
-												case enums.SCREEN.LICENSE_KEY_GROUPS:
-													return <LicenseKeyGroupsListEditor {...props}/>;
-												case enums.SCREEN.ACTIVITY_LOG:
-													return <ActivityLog {...props}/>;
-											}
-										})()
-									}
-								</LicenseModel>
-							);
-
-						case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
-						case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
-						case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
-						case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
-						case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
-						case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
-						case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
-						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
-						case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
-							return (
-								<SoftwareProduct currentScreen={currentScreen}>
-									{
-										(()=>{
-											switch(screen) {
-												case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
-													return <SoftwareProductLandingPage {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
-													return <SoftwareProductDetails {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
-													return <SoftwareProductAttachments className='no-padding-content-area' {...props} />;
-												case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
-													return <SoftwareProductProcesses {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
-													return <SoftwareProductDeployment {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
-													return <SoftwareProductNetworks {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
-													return <SoftwareProductDependencies {...props} />;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
-													return <SoftwareProductComponentsList  {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
-													return <SoftwareProductComponentProcessesList  {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
-													return <SoftwareProductComponentStorage {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
-													return <SoftwareProductComponentsNetworkList {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
-													return <SoftwareProductComponentsGeneral{...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
-													return <SoftwareProductComponentsCompute {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
-													return <SoftwareProductComponentLoadBalancing{...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
-													return <SoftwareProductComponentsImageList{...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
-													return <SoftwareProductComponentsMonitoring {...props}/>;
-												case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
-													return <ActivityLog {...props}/>;
-											}
-										})()
-									}
-								</SoftwareProduct>
-							);
-					}
-				})()}
-			</div>
-		);
-	}
-}
-const mapStateToProps = ({currentScreen}) => ({currentScreen});
-let Onboarding = connect(mapStateToProps, null)(OnboardingView);
+import Onboarding from './Onboarding.js';
 
 export default class OnboardingPunchOut {
 
@@ -214,13 +58,29 @@ export default class OnboardingPunchOut {
 		this.handleData(data);
 
 		if (!this.rendered) {
-			ReactDOM.render(
-				<Application>
-					<Onboarding/>
-				</Application>,
+			render(
+				<AppContainer>
+					<Application>
+						<Onboarding/>
+					</Application>
+				</AppContainer>,
 				element
 			);
+			if (module.hot) {
+				module.hot.accept('sdc-app/onboarding/Onboarding.js', () => {
+					const NextOnboarding = require('sdc-app/onboarding/Onboarding.js').default;
+					render(
+						<AppContainer>
+							<Application>
+								<NextOnboarding/>
+							</Application>
+						</AppContainer>,
+						element
+					);
+				});
+			}
 			this.rendered = true;
+
 		}
 	}
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx b/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx
new file mode 100644
index 0000000000..7877085316
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx
@@ -0,0 +1,183 @@
+/*
+ * Copyright © 2016-2017 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 Onboard from './onboard/Onboard.js';
+import VersionsPage from './versionsPage/VersionsPage.js';
+import LicenseModel from './licenseModel/LicenseModel.js';
+import LicenseModelOverview from './licenseModel/overview/LicenseModelOverview.js';
+import ActivityLog from 'sdc-app/common/activity-log/ActivityLog.js';
+
+import LicenseAgreementListEditor from './licenseModel/licenseAgreement/LicenseAgreementListEditor.js';
+import FeatureGroupListEditor from './licenseModel/featureGroups/FeatureGroupListEditor.js';
+import LicenseKeyGroupsListEditor from './licenseModel/licenseKeyGroups/LicenseKeyGroupsListEditor.js';
+import EntitlementPoolsListEditor from './licenseModel/entitlementPools/EntitlementPoolsListEditor.js';
+import SoftwareProduct from './softwareProduct/SoftwareProduct.js';
+import SoftwareProductLandingPage  from './softwareProduct/landingPage/SoftwareProductLandingPage.js';
+import SoftwareProductDetails  from './softwareProduct/details/SoftwareProductDetails.js';
+import SoftwareProductAttachments from './softwareProduct/attachments/SoftwareProductAttachments.js';
+import SoftwareProductProcesses from './softwareProduct/processes/SoftwareProductProcesses.js';
+import SoftwareProductDeployment from './softwareProduct/deployment/SoftwareProductDeployment.js';
+import SoftwareProductNetworks from './softwareProduct/networks/SoftwareProductNetworks.js';
+import SoftwareProductDependencies from './softwareProduct/dependencies/SoftwareProductDependencies.js';
+
+import SoftwareProductComponentsList from './softwareProduct/components/SoftwareProductComponents.js';
+import SoftwareProductComponentProcessesList from './softwareProduct/components/processes/SoftwareProductComponentProcessesList.js';
+import SoftwareProductComponentStorage from './softwareProduct/components/storage/SoftwareProductComponentStorage.js';
+import SoftwareProductComponentsNetworkList from './softwareProduct/components/network/SoftwareProductComponentsNetworkList.js';
+import SoftwareProductComponentsGeneral from './softwareProduct/components/general/SoftwareProductComponentsGeneral.js';
+import SoftwareProductComponentsCompute from './softwareProduct/components/compute/SoftwareProductComponentCompute.js';
+import SoftwareProductComponentLoadBalancing from './softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancing.js';
+import SoftwareProductComponentsImageList from './softwareProduct/components/images/SoftwareProductComponentsImageList.js';
+import SoftwareProductComponentsMonitoring from './softwareProduct/components/monitoring/SoftwareProductComponentsMonitoring.js';
+import objectValues from 'lodash/values.js';
+import PropTypes from 'prop-types';
+
+import React from 'react';
+
+import ReactDOM from 'react-dom';
+import {enums} from './OnboardingConstants.js';
+
+export default class OnboardingView extends React.Component {
+	static propTypes = {
+		currentScreen: PropTypes.shape({
+			screen: PropTypes.oneOf(objectValues(enums.SCREEN)).isRequired,
+			props: PropTypes.object.isRequired,
+			itemPermission: PropTypes.object
+		}).isRequired
+	};
+
+	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())
+		);
+	}
+
+	render() {
+		let {currentScreen} = this.props;
+		let {screen, props} = currentScreen;
+
+		return (
+			<div className='dox-ui dox-ui-punch-out dox-ui-punch-out-full-page'>
+				{(() => {
+					switch (screen) {
+						case enums.SCREEN.ONBOARDING_CATALOG:
+							return <Onboard {...props}/>;
+						case enums.SCREEN.VERSIONS_PAGE:
+							return <VersionsPage {...props} />;
+
+						case enums.SCREEN.LICENSE_AGREEMENTS:
+						case enums.SCREEN.FEATURE_GROUPS:
+						case enums.SCREEN.ENTITLEMENT_POOLS:
+						case enums.SCREEN.LICENSE_KEY_GROUPS:
+						case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
+						case enums.SCREEN.ACTIVITY_LOG:
+							return (
+								<LicenseModel currentScreen={currentScreen}>
+									{
+										(()=>{
+											switch(screen) {
+												case enums.SCREEN.LICENSE_MODEL_OVERVIEW:
+													return <LicenseModelOverview {...props}/>;
+												case enums.SCREEN.LICENSE_AGREEMENTS:
+													return <LicenseAgreementListEditor {...props}/>;
+												case enums.SCREEN.FEATURE_GROUPS:
+													return <FeatureGroupListEditor {...props}/>;
+												case enums.SCREEN.ENTITLEMENT_POOLS:
+													return <EntitlementPoolsListEditor {...props}/>;
+												case enums.SCREEN.LICENSE_KEY_GROUPS:
+													return <LicenseKeyGroupsListEditor {...props}/>;
+												case enums.SCREEN.ACTIVITY_LOG:
+													return <ActivityLog {...props}/>;
+											}
+										})()
+									}
+								</LicenseModel>
+							);
+
+						case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
+						case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
+						case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
+						case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
+						case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
+						case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
+						case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
+						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
+						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+						case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+						case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
+							return (
+								<SoftwareProduct currentScreen={currentScreen}>
+									{
+										(()=>{
+											switch(screen) {
+												case enums.SCREEN.SOFTWARE_PRODUCT_LANDING_PAGE:
+													return <SoftwareProductLandingPage {...props}/>;
+												case enums.SCREEN.SOFTWARE_PRODUCT_DETAILS:
+													return <SoftwareProductDetails {...props}/>;
+												case enums.SCREEN.SOFTWARE_PRODUCT_ATTACHMENTS:
+													return <SoftwareProductAttachments className='no-padding-content-area' {...props} />;
+												case enums.SCREEN.SOFTWARE_PRODUCT_PROCESSES:
+													return <SoftwareProductProcesses {...props}/>;
+												case enums.SCREEN.SOFTWARE_PRODUCT_DEPLOYMENT:
+													return <SoftwareProductDeployment {...props}/>;
+												case enums.SCREEN.SOFTWARE_PRODUCT_NETWORKS:
+													return <SoftwareProductNetworks {...props}/>;
+												case enums.SCREEN.SOFTWARE_PRODUCT_DEPENDENCIES:
+													return <SoftwareProductDependencies {...props} />;
+												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENTS:
+													return <SoftwareProductComponentsList  {...props}/>;
+												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_PROCESSES:
+													return <SoftwareProductComponentProcessesList  {...props}/>;
+												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_STORAGE:
+													return <SoftwareProductComponentStorage {...props}/>;
+												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_NETWORK:
+													return <SoftwareProductComponentsNetworkList {...props}/>;
+												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_GENERAL:
+													return <SoftwareProductComponentsGeneral{...props}/>;
+												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_COMPUTE:
+													return <SoftwareProductComponentsCompute {...props}/>;
+												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_LOAD_BALANCING:
+													return <SoftwareProductComponentLoadBalancing{...props}/>;
+												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_IMAGES:
+													return <SoftwareProductComponentsImageList{...props}/>;
+												case enums.SCREEN.SOFTWARE_PRODUCT_COMPONENT_MONITORING:
+													return <SoftwareProductComponentsMonitoring {...props}/>;
+												case enums.SCREEN.SOFTWARE_PRODUCT_ACTIVITY_LOG:
+													return <ActivityLog {...props}/>;
+											}
+										})()
+									}
+								</SoftwareProduct>
+							);
+					}
+				})()}
+			</div>
+		);
+	}
+}
+
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
index 41acee43ca..95d1e4e283 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
@@ -1,17 +1,17 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2017 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';
@@ -66,8 +66,7 @@ class SoftwareProductComponentsMonitoringView extends Component {
 				disableClick={true}
 				ref={refAndName}
 				name={refAndName}
-				accept='.zip'
-				disabled>
+				accept='.zip'>
 				<div className='draggable-wrapper'>
 					<div className='section-title'>{typeDisplayName}</div>
 					{fileName ? this.renderUploadedFileName(fileName, type, isReadOnlyMode) : this.renderUploadButton(refAndName)}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
index 56402b4417..97f6829812 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
@@ -1,17 +1,17 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2017 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';
@@ -79,8 +79,7 @@ class SoftwareProductLandingPageView extends React.Component {
 					disableClick={true}
 					ref='fileInput'
 					name='fileInput'
-					accept='.zip, .csar'
-					disabled>
+					accept='.zip, .csar'>
 					<div className='draggable-wrapper'>
 						<div className='software-product-landing-view-top'>
 							<div className='row'>
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 72b2f8cb38..d1bd602683 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorForm.jsx
@@ -1,17 +1,17 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2017 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';
@@ -24,7 +24,7 @@ import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridSection from 'nfvo-components/grid/GridSection.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
-const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
+const SoftwareProductProcessEditorPropType = PropTypes.shape({
 	id: PropTypes.string,
 	name: PropTypes.string,
 	description: PropTypes.string,
@@ -40,10 +40,10 @@ class SoftwareProductProcessesEditorForm extends React.Component {
 	static propTypes = {
 		data: SoftwareProductProcessEditorPropType,
 		previousData: SoftwareProductProcessEditorPropType,
-		isReadOnlyMode: React.PropTypes.bool,
-		onDataChanged: React.PropTypes.func,
-		onSubmit: React.PropTypes.func,
-		onCancel: React.PropTypes.func
+		isReadOnlyMode: PropTypes.bool,
+		onDataChanged: PropTypes.func,
+		onSubmit: PropTypes.func,
+		onCancel: PropTypes.func
 	};
 	state = {
 		dragging: false,
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 e2cb4edf74..b0da767a2b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesView.jsx
@@ -1,23 +1,22 @@
-/*!
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+/*
+ * Copyright © 2016-2017 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 './SoftwareProductProcessesEditor.js';
 import SoftwareProductProcessListView from './SoftwareProductProcessListView.jsx';