Merge "[SDC] OnBoard with enabled tests and features"

9 files changed, 49 insertions, 40 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
new file mode 100644
index 0000000000..2483d0aaa2
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
@@ -0,0 +1,6 @@
+
+import Validator from 'nfvo-utils/Validator.js';
+
+export  const imageCustomValidations = {
+	'version': value => Validator.validate('version', value, [{type: 'required', data: true}])
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
index 49d891c9df..5c81f05e80 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
@@ -54,9 +54,12 @@ const mapActionsToProps = (dispatch, {softwareProductId, componentId, version})
 		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.IMAGE_EDIT_FORM}),
 		onSubmit: ({data, qdata}) => SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}),
 		onCancel: () => SoftwareProductComponentsImageActionHelper.closeImageEditor(dispatch),
-		onValidateForm: () => ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM),
-		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
-			qName: IMAGE_QUESTIONNAIRE}),
+		onValidateForm: customValidations => {
+			ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM);
+			ValidationHelper.qValidateForm(dispatch, IMAGE_QUESTIONNAIRE, customValidations);
+		},
+		onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData,
+			qName: IMAGE_QUESTIONNAIRE, customValidations}),
 	};
 };
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
index 0ab785a97f..7c357429e5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
@@ -30,7 +30,7 @@ export default (state = {}, action) => {
 					'fileName' : {
 						isValid: true,
 						errorText: '',
-						validations: [{type: 'required', data: true}, {type: 'validateName', data: true}]
+						validations: [{type: 'required', data: true}]
 					}
 				},
 				formName: forms.IMAGE_EDIT_FORM
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 300f8edcc3..7c1a3f5b55 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
@@ -20,6 +20,7 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
 
 import FileDetails from './imagesEditorComponents/FileDetails.jsx';
 import ImageDetails from './imagesEditorComponents/ImageDetails.jsx';
+import {imageCustomValidations} from './ImageValidations.js';
 
 class SoftwareProductComponentsImageEditorView extends React.Component {
 	static propTypes = {
@@ -44,7 +45,7 @@ class SoftwareProductComponentsImageEditorView extends React.Component {
 					isValid={isFormValid}
 					formReady={formReady}
 					submitButtonText={editingMode ? i18n('Save') : i18n('Create')}
-					onValidateForm={() => onValidateForm() }
+					onValidateForm={() => onValidateForm(imageCustomValidations) }
 					className='vsp-components-image-editor'>
 					<div className='editor-data'>
 						<FileDetails
@@ -56,7 +57,7 @@ class SoftwareProductComponentsImageEditorView extends React.Component {
 							isManual={isManual}
 							dataMap={dataMap}
 							onQDataChanged={onQDataChanged}/>
-						{editingMode && <ImageDetails dataMap={dataMap}qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
+						{editingMode && <ImageDetails dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
 					</div>
 				</Form>}
 			</div>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
index ca58b697a2..2e9ab417d8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
@@ -40,6 +40,7 @@ const FileDetails = ({editingMode, fileName, onDataChanged, isManual, dataMap, o
 					type='text'
 					className='image-filename'/>
 			</GridItem>
+			{!editingMode && <div className='note-text'>{i18n('After image creation you must go to Edit Image and add File Version')}</div>}
 			{editingMode && <Version isManual={isManual} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
 			{editingMode && <Format isManual={isManual} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>}
 		</GridSection>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
index 3cac9a51b8..7dd577b8c9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
@@ -17,6 +17,7 @@ import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
 import GridItem from 'nfvo-components/grid/GridItem.jsx';
+import {imageCustomValidations} from '../ImageValidations.js';
 
 
 const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
@@ -28,7 +29,8 @@ const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
 				type='text'
 				className='image-version'
 				label={i18n('Version')}
-				onChange={(version) => onQDataChanged({'version' : version})}
+				isRequired={true}
+				onChange={(version) => onQDataChanged({'version' : version}, {'version' : imageCustomValidations['version']})}
 				isValid={qgenericFieldInfo['version'].isValid}
 				errorText={qgenericFieldInfo['version'].errorText}
 				value={dataMap['version']}/>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
index 9ae9e359b0..8a82f54901 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
@@ -50,6 +50,7 @@ const pointers = [
 		added: 'Please describe.'
 	}
 ];
+//TODO check for buttons
 
 const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDataChanged}) => (
 		<GridItem colSpan={3} key={item.key} >
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 36c1728ef3..2d5a965c40 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
@@ -15,10 +15,8 @@
  */
 import React, {Component, PropTypes} from 'react';
 import Dropzone from 'react-dropzone';
-import ButtonGroup from 'react-bootstrap/lib/ButtonGroup.js';
-import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar.js';
-import Button from 'react-bootstrap/lib/Button.js';
-import i18n from 'nfvo-utils/i18n/i18n.js';
+import Button from 'sdc-ui/lib/react/Button.js';
+import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
 import {fileTypes, type2Title, type2Name} from './SoftwareProductComponentsMonitoringConstants.js';
 
 
@@ -59,7 +57,7 @@ class SoftwareProductComponentsMonitoringView extends Component {
 		let typeDisplayName = type2Title[type];
 		return (
 			<Dropzone
-				className={`snmp-dropzone ${this.state.dragging ? 'active-dragging' : ''}`}
+				className={`dropzone ${this.state.dragging ? 'active-dragging' : ''}`}
 				onDrop={(acceptedFiles, rejectedFiles) => this.handleImport(acceptedFiles, rejectedFiles, {isReadOnlyMode, type, refAndName})}
 				onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)}
 				onDragLeave={() => this.setState({dragging:false})}
@@ -71,7 +69,7 @@ class SoftwareProductComponentsMonitoringView extends Component {
 				disabled>
 				<div className='draggable-wrapper'>
 					<div className='section-title'>{typeDisplayName}</div>
-					{fileName ? this.renderUploadedFileName(fileName, type) : this.renderUploadButton(refAndName)}
+					{fileName ? this.renderUploadedFileName(fileName, type, isReadOnlyMode) : this.renderUploadButton(refAndName)}
 				</div>
 			</Dropzone>
 		);
@@ -80,25 +78,32 @@ class SoftwareProductComponentsMonitoringView extends Component {
 	renderUploadButton(refAndName) {
 		let {isReadOnlyMode} = this.props;
 		return (
-			<div
-				className={`software-product-landing-view-top-block-col-upl${isReadOnlyMode ? ' disabled' : ''}`}>
-				<div className='drag-text'>{i18n('Drag & drop for upload')}</div>
-				<div className='or-text'>{i18n('or')}</div>
-				<div className='upload-btn primary-btn' data-test-id={`monitoring-upload-${refAndName}`} onClick={() => this.refs[refAndName].open()}>
-					<span className='primary-btn-text'>{i18n('Select file')}</span>
-				</div>
-			</div>
+			<DraggableUploadFileBox
+				dataTestId={`monitoring-upload-${refAndName}`}
+				className='software-product-landing-view-top-block-col-upl'
+				isReadOnlyMode={isReadOnlyMode}
+				onClick={() => this.refs[refAndName].open()}/>
 		);
 	}
 
-	renderUploadedFileName(filename, type) {
+	renderUploadedFileName(filename, type, isReadOnlyMode) {
 		return (
-			<ButtonToolbar>
-				<ButtonGroup>
-					<Button disabled>{filename}</Button>
-					<Button data-test-id={`monitoring-delete-${type}`} className='delete-button' onClick={()=>this.props.onDeleteFile(type)}>X</Button>
-				</ButtonGroup>
-			</ButtonToolbar>
+				<div className='monitoring-file'>
+					<Button
+						color='white'
+						disabled={true}
+						className='filename'>
+						{filename}
+					</Button>
+
+					<Button
+						color='gray'
+						data-test-id={`monitoring-delete-${type}`}
+						disabled={isReadOnlyMode}
+						onClick={()=>this.props.onDeleteFile(type)}
+						iconName='close'
+						className='delete'/>
+				</div>
 		);
 	}
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
index 18f2ee129c..87abaf4978 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
@@ -17,6 +17,7 @@ import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Dropzone from 'react-dropzone';
 
+import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
 import  {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.js';
 import Form from 'nfvo-components/input/validation/Form.jsx';
 import Input from 'nfvo-components/input/validation/Input.jsx';
@@ -31,17 +32,6 @@ const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
 	type: React.PropTypes.string
 });
 
-const FileUploadBox = ({onClick}) => {
-	return (
-		<div className='file-upload-box'>
-			<div className='drag-text'>{i18n('Drag & drop for upload')}</div>
-			<div className='or-text'>{i18n('or')}</div>
-			<div className='upload-btn primary-btn' onClick={onClick}>
-				<span className='primary-btn-text'>{i18n('Select file')}</span>
-			</div>
-		</div>
-	);
-};
 
 class SoftwareProductProcessesEditorView extends React.Component {
 
@@ -99,7 +89,7 @@ class SoftwareProductProcessesEditorView extends React.Component {
 										type='text'/>
 								</GridItem>
 								<GridItem colSpan={2}>
-									<FileUploadBox onClick={() => this.refs.processEditorFileInput.open()} />
+									<DraggableUploadFileBox isReadOnlyMode={isReadOnlyMode} className='file-upload-box' onClick={() => this.refs.processEditorFileInput.open()} />
 								</GridItem>
 							</GridSection>
 							<GridSection>