[SDC-29] Amdocs OnBoard 1707 initial commit.

Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370
Signed-off-by: AviZi <avi.ziv@amdocs.com>

3 files changed, 89 insertions, 103 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
index 7604f5841d..e8091bf8d1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPage.js
@@ -1,33 +1,27 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
+/*!
  * 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
- * 
+ *
+ * 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.
- * ============LICENSE_END=========================================================
+ * 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';
 import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
-import NotificationConstants from 'nfvo-components/notifications/NotificationConstants.js';
 import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
 import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
 import LandingPageView from './SoftwareProductLandingPageView.jsx';
+import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js';
 
-const mapStateToProps = ({softwareProduct, licenseModel: {licenseAgreement}}) => {
+export const mapStateToProps = ({softwareProduct, licenseModel: {licenseAgreement}}) => {
 	let {softwareProductEditor: {data:currentSoftwareProduct = {}}, softwareProductComponents, softwareProductCategories = []} = softwareProduct;
 	let {licensingData = {}} = currentSoftwareProduct;
 	let {licenseAgreementList} = licenseAgreement;
@@ -35,6 +29,8 @@ const mapStateToProps = ({softwareProduct, licenseModel: {licenseAgreement}}) =>
 	let licenseAgreementName = licenseAgreementList.find(la => la.id === licensingData.licenseAgreement);
 	if (licenseAgreementName) {
 		licenseAgreementName = licenseAgreementName.name;
+	} else if (licenseAgreementList.length === 0) { // otherwise the state of traingle svgicon will be updated post unmounting
+		licenseAgreementName = null;
 	}
 
 	let categoryName = '', subCategoryName = '', fullCategoryDisplayName = '';
@@ -62,27 +58,44 @@ const mapStateToProps = ({softwareProduct, licenseModel: {licenseAgreement}}) =>
 
 const mapActionsToProps = (dispatch, {version}) => {
 	return {
-		onDetailsSelect: ({id: softwareProductId, vendorId: licenseModelId}) => OnboardingActionHelper.navigateToSoftwareProductDetails(dispatch, {
+		onDetailsSelect: ({id: softwareProductId, vendorId: licenseModelId, version}) => OnboardingActionHelper.navigateToSoftwareProductDetails(dispatch, {
 			softwareProductId,
-			licenseModelId
+			licenseModelId,
+			version
 		}),
-		onAttachmentsSelect: ({id: softwareProductId}) => OnboardingActionHelper.navigateToSoftwareProductAttachments(dispatch, {softwareProductId}),
+		onAttachmentsSelect: ({id: softwareProductId}) => OnboardingActionHelper.navigateToSoftwareProductAttachments(dispatch, {softwareProductId, version}),
 		onUpload: (softwareProductId, formData) =>
 			SoftwareProductActionHelper.uploadFile(dispatch, {
 				softwareProductId,
 				formData,
-				failedNotificationTitle: i18n('Upload validation failed')
+				failedNotificationTitle: i18n('Upload validation failed'),
+				version
 			}),
+
 		onUploadConfirmation: (softwareProductId, formData) =>
-			SoftwareProductActionHelper.uploadConfirmation(dispatch, {
-				softwareProductId,
-				formData,
-				failedNotificationTitle: i18n('Upload validation failed')}),
+			dispatch({
+				type: modalActionTypes.GLOBAL_MODAL_WARNING,
+				data:{
+					msg: i18n('Upload will erase existing data. Do you want to continue?'),
+					confirmationButtonText: i18n('Continue'),
+					title: i18n('Warning'),
+					onConfirmed: ()=>SoftwareProductActionHelper.uploadFile(dispatch, {
+						softwareProductId,
+						formData,
+						failedNotificationTitle: i18n('Upload validation failed'),
+						version
+					}),
+					onDeclined: () => dispatch({
+						type: modalActionTypes.GLOBAL_MODAL_CLOSE
+					})
+				}
+			}),
 
 		onInvalidFileSizeUpload: () => dispatch({
-			type: NotificationConstants.NOTIFY_ERROR,
+			type: modalActionTypes.GLOBAL_MODAL_ERROR,
 			data: {
 				title: i18n('Upload Failed'),
+				confirmationButtonText: i18n('Continue'),
 				msg: i18n('no zip file was uploaded or zip file doesn\'t exist')
 			}
 		}),
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageUploadConfirmationModal.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageUploadConfirmationModal.jsx
deleted file mode 100644
index 4a848834b2..0000000000
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageUploadConfirmationModal.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import {connect} from 'react-redux';
-import ConfirmationModalView from 'nfvo-components/confirmations/ConfirmationModalView.jsx';
-import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
-
-import i18n from 'nfvo-utils/i18n/i18n.js';
-
-const mapStateToProps = ({softwareProduct}) => {
-	let {softwareProductEditor} = softwareProduct;
-	let {uploadData} = softwareProductEditor;
-	const show = uploadData ? true : false;
-	return {
-		show,
-		title: 'Warning!',
-		type: 'warning',
-		msg: i18n('Upload will erase existing data. Do you want to continue?'),
-		confirmationDetails: {uploadData}
-	};
-};
-
-const mapActionsToProps = (dispatch) => {
-	return {
-		onConfirmed: ({uploadData}) => {
-			let {softwareProductId, formData, failedNotificationTitle} = uploadData;
-			SoftwareProductActionHelper.uploadFile(dispatch, {
-				softwareProductId,
-				formData,
-				failedNotificationTitle
-			});
-			SoftwareProductActionHelper.hideUploadConfirm(dispatch);
-		},
-		onDeclined: () => {
-			SoftwareProductActionHelper.hideUploadConfirm(dispatch);
-		}
-	};
-};
-
-export default connect(mapStateToProps, mapActionsToProps)(ConfirmationModalView);
-
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 cf7c7a31a5..5fbf1b74b0 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
@@ -1,3 +1,18 @@
+/*!
+ * 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 classnames from 'classnames';
 import Dropzone from 'react-dropzone';
@@ -6,15 +21,14 @@ import Dropzone from 'react-dropzone';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
+import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
 
-import FontAwesome from 'react-fontawesome';
-import SoftwareProductLandingPageUploadConfirmationModal from './SoftwareProductLandingPageUploadConfirmationModal.jsx';
-
+import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
 
 const SoftwareProductPropType = React.PropTypes.shape({
 	name: React.PropTypes.string,
 	description: React.PropTypes.string,
-	version: React.PropTypes.string,
+	version: React.PropTypes.object,
 	id: React.PropTypes.string,
 	categoryId: React.PropTypes.string,
 	vendorId: React.PropTypes.string,
@@ -79,7 +93,6 @@ class SoftwareProductLandingPageView extends React.Component {
 				{
 					componentsList.length > 0 && this.renderComponents()
 				}
-				<SoftwareProductLandingPageUploadConfirmationModal confirmationButtonText={i18n('Continue')}/>
 			</div>
 		);
 	}
@@ -101,29 +114,31 @@ class SoftwareProductLandingPageView extends React.Component {
 					onClick={() => onDetailsSelect(currentSoftwareProduct)}>
 					<div className='details-container'>
 						<div className='single-detail-section title-section'>
-							<div>
-								<div>{name}</div>
+							<div className='single-detail-section title-text'>
+								{name}
 							</div>
 						</div>
-						<div className='multiple-details-section'>
-							<div className='detail-col' >
-								<div className='title'>{i18n('Vendor')}</div>
-								<div className='description'>{vendorName}</div>
-							</div>
-							<div className='detail-col'>
-								<div className='title'>{i18n('Category')}</div>
-								<div className='description'>{fullCategoryDisplayName}</div>
-							</div>
-							<div className='detail-col'>
-								<div className='title extra-large'>{i18n('License Agreement')}</div>
-								<div className='description'>
-									{this.renderLicenseAgreement(licenseAgreementName)}
+						<div className='details-section'>
+							<div className='multiple-details-section'>
+								<div className='detail-col' >
+									<div className='title'>{i18n('Vendor')}</div>
+									<div className='description'>{vendorName}</div>
+								</div>
+								<div className='detail-col'>
+									<div className='title'>{i18n('Category')}</div>
+									<div className='description'>{fullCategoryDisplayName}</div>
+								</div>
+								<div className='detail-col'>
+									<div className='title extra-large'>{i18n('License Agreement')}</div>
+									<div className='description'>
+										{this.renderLicenseAgreement(licenseAgreementName)}
+									</div>
 								</div>
 							</div>
-						</div>
-						<div className='single-detail-section'>
-							<div className='title'>{i18n('Description')}</div>
-							<div className='description'>{description}</div>
+							<div className='single-detail-section'>
+								<div className='title'>{i18n('Description')}</div>
+								<div className='description'>{description}</div>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -151,19 +166,13 @@ class SoftwareProductLandingPageView extends React.Component {
 							<div className='attachment-details'>{i18n('HEAT Templates')} (<span
 								className='attachment-details-count'>{details.heatTemplates}</span>)
 							</div>
-							<div className='attachment-details'>{i18n('Images')} (<span
-								className='attachment-details-count'>{details.images}</span>)
-							</div>
-							<div className='attachment-details'>{i18n('Other Artifacts')} (<span
-								className='attachment-details-count'>{details.otherArtifacts}</span>)
-							</div>
 						</div>
 					</div>
 					<div
 						className={classnames('software-product-landing-view-top-block-col-upl', {'disabled': isReadOnlyMode})}>
 						<div className='drag-text'>{i18n('Drag & drop for upload')}</div>
 						<div className='or-text'>{i18n('or')}</div>
-						<div className='upload-btn primary-btn' onClick={() => this.refs.fileInput.open()}>
+						<div data-test-id='upload-btn' className='upload-btn primary-btn' onClick={() => this.refs.fileInput.open()}>
 							<span className='primary-btn-text'>{i18n('Select file')}</span>
 						</div>
 					</div>
@@ -180,7 +189,8 @@ class SoftwareProductLandingPageView extends React.Component {
 				title={i18n('Virtual Function Components')}
 				filterValue={localFilter}
 				placeholder={i18n('Filter Components')}
-				onFilter={filter => this.setState({localFilter: filter})}>
+				onFilter={value => this.setState({localFilter: value})}
+				twoColumns>
 				{this.filterList().map(component => this.renderComponentsListItem(component))}
 			</ListEditorView>
 		);
@@ -194,21 +204,19 @@ class SoftwareProductLandingPageView extends React.Component {
 				key={name + Math.floor(Math.random() * (100 - 1) + 1).toString()}
 				className='list-editor-item-view'
 				onSelect={() => onComponentSelect({id, componentId})}>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Component')}</div>
+				<ListEditorItemViewField>
 					<div className='name'>{displayName}</div>
-				</div>
-				<div className='list-editor-item-view-field'>
-					<div className='title'>{i18n('Description')}</div>
+				</ListEditorItemViewField>
+				<ListEditorItemViewField>
 					<div className='description'>{description}</div>
-				</div>
+				</ListEditorItemViewField>
 			</ListEditorItemView>
 		);
 	}
 
 	renderLicenseAgreement(licenseAgreementName) {
-		if (!licenseAgreementName) {
-			return (<FontAwesome name='exclamation-triangle' className='warning-icon'/>);
+		if (licenseAgreementName !== null && !licenseAgreementName) {
+			return (<div className='missing-license'><SVGIcon name='exclamation-triangle-full'/><div className='warning-text'>{i18n('Missing')}</div></div>);
 		}
 		return (licenseAgreementName);
 	}
@@ -242,6 +250,9 @@ class SoftwareProductLandingPageView extends React.Component {
 			this.startUploading(files);
 		}
 		else {
+			this.setState({
+				dragging: false
+			});
 			this.props.onInvalidFileSizeUpload();
 		}