[SDC-29] Amdocs OnBoard 1707 initial commit.

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

2 files changed, 296 insertions, 183 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
index e4c330bec8..34374aa7fb 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneral.js
@@ -1,50 +1,55 @@
-/*-
- * ============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 SoftwareProductComponentsGeneralView from './SoftwareProductComponentsGeneralView.jsx';
 import SoftwareProductComponentsActionHelper from '../SoftwareProductComponentsActionHelper.js';
 import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
+import ValidationHelper from 'sdc-app/common/helpers/ValidationHelper.js';
+import SoftwareProductActionHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js';
+
+
+import {forms, COMPONENTS_QUESTIONNAIRE} from '../SoftwareProductComponentsConstants.js';
+
 
 export const mapStateToProps = ({softwareProduct}) => {
 	let {softwareProductEditor: {data: currentVSP}, softwareProductComponents} = softwareProduct;
-	let {componentEditor: {data: componentData = {} , qdata, qschema}} = softwareProductComponents;
-
+	let {componentEditor: {data: componentData = {} , qdata, qgenericFieldInfo : qGenericFieldInfo, dataMap, genericFieldInfo}} = softwareProductComponents;
 	let isReadOnlyMode = VersionControllerUtils.isReadOnly(currentVSP);
+	let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
 
 	return {
 		componentData,
 		qdata,
-		qschema,
-		isReadOnlyMode
+		isReadOnlyMode,
+		genericFieldInfo,
+		qGenericFieldInfo,
+		dataMap,
+		isFormValid
 	};
 };
 
 
-const mapActionsToProps = (dispatch, {softwareProductId, componentId}) => {
+const mapActionsToProps = (dispatch, {softwareProductId, version, componentId}) => {
 	return {
-		onDataChanged: deltaData => SoftwareProductComponentsActionHelper.componentDataChanged(dispatch, {deltaData}),
-		onQDataChanged: ({data}) => SoftwareProductComponentsActionHelper.componentQuestionnaireUpdated(dispatch, {data}),
+		onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.ALL_SPC_FORMS}),
+		onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData, qName: COMPONENTS_QUESTIONNAIRE}),
 		onSubmit: ({componentData, qdata}) => { return SoftwareProductComponentsActionHelper.updateSoftwareProductComponent(dispatch,
-			{softwareProductId, vspComponentId: componentId, componentData, qdata});
-		}
+			{softwareProductId, version, vspComponentId: componentId, componentData, qdata});
+		},
+		onValidityChanged: isValidityData => SoftwareProductActionHelper.setIsValidityData(dispatch, {isValidityData})
 	};
 
 };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
index 5d11e42cd3..e4595f97d6 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/general/SoftwareProductComponentsGeneralView.jsx
@@ -1,177 +1,285 @@
+/*!
+ * 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 i18n from 'nfvo-utils/i18n/i18n.js';
 
-import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
-import ValidationInput from'nfvo-components/input/validation/ValidationInput.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
+import Form from 'nfvo-components/input/validation/Form.jsx';
+import GridSection from 'nfvo-components/grid/GridSection.jsx';
+import GridItem from 'nfvo-components/grid/GridItem.jsx';
 
+const GeneralSection = ({onDataChanged, displayName, vfcCode, description, isReadOnlyMode, genericFieldInfo}) => (
+	<GridSection title={i18n('General')}>
+		{/* disabled until backend will be ready to implement it
+			<div className='validation-input-wrapper'>
+			<div className='form-group'>
+			<label className='control-label'>{i18n('Name')}</label>
+			<div>{name}</div>
+			</div>
+			</div>
+
+		*/}
+		<GridItem>
+			<Input
+				data-test-id='name'
+				label={i18n('Name')}
+				value={displayName}
+				disabled={true}
+				type='text'/>
+			<Input
+				data-test-id='vfcCode'
+				label={i18n('Naming Code')}
+				value={vfcCode}
+				isValid={genericFieldInfo.vfcCode.isValid}
+				errorText={genericFieldInfo.vfcCode.errorText}
+				onChange={vfcCode => onDataChanged({vfcCode})}
+				disabled={isReadOnlyMode}
+				type='text'/>
+		</GridItem>
+		<GridItem colSpan={2}>
+			<Input
+				label={i18n('Description')}
+				isValid={genericFieldInfo.description.isValid}
+				errorText={genericFieldInfo.description.errorText}
+				onChange={description => onDataChanged({description})}
+				disabled={isReadOnlyMode}
+				value={description}
+				groupClassName='multi-line-textarea'
+				data-test-id='description'
+				type='textarea'/>
+		</GridItem>
+		<GridItem />
+	</GridSection>
+		);
+
+const HypervisorSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
+	<GridSection title={i18n('Hypervisor')}>
+		<GridItem>
+			<Input
+				data-test-id='hypervisor'
+				label={i18n('Supported Hypervisors')}
+				type='select'
+				className='input-options-select'
+				groupClassName='bootstrap-input-options'
+				isValid={qgenericFieldInfo['general/hypervisor/hypervisor'].isValid}
+				errorText={qgenericFieldInfo['general/hypervisor/hypervisor'].errorText}
+				value={dataMap['general/hypervisor/hypervisor']}
+				onChange={(e) => {
+					const selectedIndex = e.target.selectedIndex;
+					const val = e.target.options[selectedIndex].value;
+					onQDataChanged({'general/hypervisor/hypervisor' : val});}
+				}>
+				<option key='placeholder' value=''>{i18n('Select...')}</option>
+				{qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
+			</Input>
+		</GridItem>
+		<GridItem colSpan={2}>
+			<Input
+				data-test-id='drivers'
+				onChange={(driver) => onQDataChanged({'general/hypervisor/drivers' : driver})}
+				label={i18n('Hypervisor Drivers')}
+				type='text'
+				isValid={qgenericFieldInfo['general/hypervisor/drivers'].isValid}
+				errorText={qgenericFieldInfo['general/hypervisor/drivers'].errorText}
+				value={dataMap['general/hypervisor/drivers']}/>
+		</GridItem>
+		<GridItem colSpan={3}>
+			<Input
+				data-test-id='containerFeaturesDescription'
+				label={i18n('Describe Container Features')}
+				type='textarea'
+				onChange={(containerFeaturesDescription) => onQDataChanged({'general/hypervisor/containerFeaturesDescription' : containerFeaturesDescription})}
+				isValid={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].isValid}
+				errorText={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].errorText}
+				value={dataMap['general/hypervisor/containerFeaturesDescription']}/>
+		</GridItem>
+	</GridSection>
+);
+
+const ImageSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
+	<GridSection title={i18n('Image')}>
+		<GridItem>
+			<Input
+				data-test-id='format'
+				label={i18n('Image format')}
+				type='select'
+				className='input-options-select'
+				groupClassName='bootstrap-input-options'
+				isValid={qgenericFieldInfo['general/image/format'].isValid}
+				errorText={qgenericFieldInfo['general/image/format'].errorText}
+				value={dataMap['general/image/format']}
+				onChange={(e) => {
+					const selectedIndex = e.target.selectedIndex;
+					const val = e.target.options[selectedIndex].value;
+					onQDataChanged({'general/image/format' : val});}
+				}>
+				<option key='placeholder' value=''>{i18n('Select...')}</option>
+				{qgenericFieldInfo['general/image/format'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
+			</Input>
+		</GridItem>
+		<GridItem>
+			<Input
+				data-test-id='providedBy'
+				label={i18n('Image provided by')}
+				type='select'
+				className='input-options-select'
+				groupClassName='bootstrap-input-options'
+				isValid={qgenericFieldInfo['general/image/providedBy'].isValid}
+				errorText={qgenericFieldInfo['general/image/providedBy'].errorText}
+				value={dataMap['general/image/providedBy']}
+				onChange={(e) => {
+					const selectedIndex = e.target.selectedIndex;
+					const val = e.target.options[selectedIndex].value;
+					onQDataChanged({'general/image/providedBy' : val});}
+				}>
+				<option key='placeholder' value=''>{i18n('Select...')}</option>
+				{qgenericFieldInfo['general/image/providedBy'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
+			</Input>
+		</GridItem>
+		<GridItem>
+			<Input
+				data-test-id='bootDiskSizePerVM'
+				onChange={(bootDiskSizePerVM) => onQDataChanged({'general/image/bootDiskSizePerVM' : bootDiskSizePerVM})}
+				label={i18n('Size of boot disk per VM (GB)')}
+				type='number'
+				isValid={qgenericFieldInfo['general/image/bootDiskSizePerVM'].isValid}
+				errorText={qgenericFieldInfo['general/image/bootDiskSizePerVM'].errorText}
+				value={dataMap['general/image/bootDiskSizePerVM']}/>
+		</GridItem>
+		<GridItem>
+			<Input
+				data-test-id='ephemeralDiskSizePerVM'
+				onChange={(ephemeralDiskSizePerVM) => onQDataChanged({'general/image/ephemeralDiskSizePerVM' : ephemeralDiskSizePerVM})}
+				label={i18n('Size of ephemeral disk per VM (GB)')}
+				type='number'
+				isValid={qgenericFieldInfo['general/image/ephemeralDiskSizePerVM'].isValid}
+				errorText={qgenericFieldInfo['general/image/ephemeralDiskSizePerVM'].errorText}
+				value={dataMap['general/image/ephemeralDiskSizePerVM']}/>
+		</GridItem>
+	</GridSection>
+);
+
+const RecoverySection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
+	<GridSection title={i18n('Recovery')}>
+		<GridItem>
+			<Input
+				data-test-id='pointObjective'
+				label={i18n('VM Recovery Point Objective (Minutes)')}
+				type='number'
+				onChange={(pointObjective) => onQDataChanged({'general/recovery/pointObjective' : pointObjective})}
+				isValid={qgenericFieldInfo['general/recovery/pointObjective'].isValid}
+				errorText={qgenericFieldInfo['general/recovery/pointObjective'].errorText}
+				value={dataMap['general/recovery/pointObjective']}/>
+		</GridItem>
+		<GridItem>
+			<Input
+				data-test-id='timeObjective'
+				label={i18n('VM Recovery Time Objective (Minutes)')}
+				type='number'
+				onChange={(timeObjective) => onQDataChanged({'general/recovery/timeObjective' : timeObjective})}
+				isValid={qgenericFieldInfo['general/recovery/timeObjective'].isValid}
+				errorText={qgenericFieldInfo['general/recovery/timeObjective'].errorText}
+				value={dataMap['general/recovery/timeObjective']}/>
+			<div className='empty-two-col' />
+		</GridItem>
+		<GridItem colSpan={2} />
+		<GridItem colSpan={2}>
+			<Input
+				data-test-id='vmProcessFailuresHandling'
+				className='textarea'
+				label={i18n('How are in VM process failures handled?')}
+				type='textarea'
+				onChange={(vmProcessFailuresHandling) => onQDataChanged({'general/recovery/vmProcessFailuresHandling' : vmProcessFailuresHandling})}
+				isValid={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].isValid}
+				errorText={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].errorText}
+				value={dataMap['general/recovery/vmProcessFailuresHandling']}/>
+			<div className='empty-two-col' />
+
+		</GridItem>
+		{
+			/** disabled until backend will be ready to implement it
+			<div className='row'>
+			<div className='col-md-3'>
+			<Input
+			label={i18n('VM Recovery Document')}
+			type='text'
+			pointer='/general/recovery/VMRecoveryDocument'/>
+			</div>
+			</div>
+			*/
+		}
+	</GridSection>
+);
+
+const DNSConfigurationSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
+	<GridSection title={i18n('DNS Configuration')}>
+		<GridItem colSpan={2}>
+			<Input
+				data-test-id='dnsConfiguration'
+				label={i18n('Do you have a need for DNS as a Service? Please describe.')}
+				type='textarea'
+				onChange={(dnsConfiguration) => onQDataChanged({'general/dnsConfiguration' : dnsConfiguration})}
+				isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid}
+				errorText={qgenericFieldInfo['general/dnsConfiguration'].errorText}
+				value={dataMap['general/dnsConfiguration']}/>
+		</GridItem>
+	</GridSection>
+);
+
+const CloneSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
+	<GridSection title={i18n('Clone')}>
+		<GridItem colSpan={2}>
+			<Input
+				data-test-id='vmCloneUsage'
+				label={i18n('Describe VM Clone Use')}
+				type='textarea'
+				onChange={(vmCloneUsage) => onQDataChanged({'general/vmCloneUsage' : vmCloneUsage})}
+				isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid}
+				errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText}
+				value={dataMap['general/vmCloneUsage']}/>
+		</GridItem>
+	</GridSection>
+);
 
 class SoftwareProductComponentsGeneralView extends React.Component {
 
 	render() {
-		let {qdata, qschema, onQDataChanged, onDataChanged, componentData: {displayName, description}, isReadOnlyMode} =  this.props;
+		let {onQDataChanged, onDataChanged,	genericFieldInfo, dataMap, qGenericFieldInfo, componentData: {displayName, vfcCode, description}, isReadOnlyMode} =  this.props;
 		return(
 			<div className='vsp-components-general'>
 				<div className='general-data'>
-					<ValidationForm
-						isReadOnlyMode={isReadOnlyMode}
-						hasButtons={false}>
-					<div className=''>
-						<h3 className='section-title'>{i18n('General')}</h3>
-						<div className='rows-section'>
-							<div className='row-flex-components input-row'>
-							{/** disabled until backend will be ready to implement it
-							 <div className='validation-input-wrapper'>
-							 <div className='form-group'>
-							 <label className='control-label'>{i18n('Name')}</label>
-							 <div>{name}</div>
-							 </div>
-							 </div>
-
-							*/}
-								<div className='single-col'>
-									<ValidationInput label={i18n('Name')} value={displayName}	disabled={true}	type='text'/>
-								</div>
-								<div className='two-col'>
-								<ValidationInput
-									label={i18n('Description')}
-									onChange={description => onDataChanged({description})}
-									disabled={isReadOnlyMode}
-									value={description}
-									type='textarea'/>
-								</div>
-								<div className='empty-col' />
-							</div>
-						</div>
-					</div>
-						</ValidationForm>
-					{
-						qschema &&
-					<ValidationForm
-						onDataChanged={onQDataChanged}
-						data={qdata}
-						schema={qschema}
+					{genericFieldInfo && qGenericFieldInfo && <Form
+						isValid={this.props.isFormValid}
+						formReady={null}
 						isReadOnlyMode={isReadOnlyMode}
+						onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)}
 						hasButtons={false}>
-							<h3 className='section-title additional-validation-form'>{i18n('Hypervisor')}</h3>
-							<div className='rows-section'>
-								<div className='row-flex-components input-row'>
-									<div className='single-col'>
-										<ValidationInput
-											label={i18n('Supported Hypervisors')}
-											type='select'
-											pointer='/general/hypervisor/hypervisor'/>
-										</div>
-									<div className='two-col'>
-										<ValidationInput
-											label={i18n('Hypervisor Drivers')}
-											type='text'
-											pointer='/general/hypervisor/drivers'/>
-									</div>
-									<div className='empty-col' />
-								</div>
-								<div className='row-flex-components input-row'>
-									<div className='three-col'>
-										<ValidationInput
-											label={i18n('Describe Container Features')}
-											type='textarea'
-											pointer='/general/hypervisor/containerFeaturesDescription'/>
-									</div>
-									<div className='empty-col' />
-								</div>
-							</div>
-							<h3 className='section-title'>{i18n('Image')}</h3>
-							<div className='rows-section'>
-								<div className='row-flex-components input-row'>
-									<div className='single-col'>
-										<ValidationInput
-											label={i18n('Image format')}
-											type='select'
-											pointer='/general/image/format'/>
-									</div>
-									<div className='single-col'>
-										<ValidationInput
-											label={i18n('Image provided by')}
-											type='select'
-											pointer='/general/image/providedBy'/>
-									</div>
-									<div className='single-col'>
-										<ValidationInput
-											label={i18n('Size of boot disk per VM (GB)')}
-											type='text'
-											pointer='/general/image/bootDiskSizePerVM'/>
-									</div>
-									<ValidationInput
-										label={i18n('Size of ephemeral disk per VM (GB)')}
-										type='text'
-										pointer='/general/image/ephemeralDiskSizePerVM'/>
-								</div>
-							</div>
-							<h3 className='section-title'>{i18n('Recovery')}</h3>
-							<div className='rows-section'>
-								<div className='row-flex-components input-row'>
-									<div className='single-col'>
-										<ValidationInput
-											label={i18n('VM Recovery Point Objective (Minutes)')}
-											type='text'
-											pointer='/general/recovery/pointObjective'/>
-									</div>
-									<ValidationInput
-										label={i18n('VM Recovery Time Objective (Minutes)')}
-										type='text'
-										pointer='/general/recovery/timeObjective'/>
-									<div className='empty-two-col' />
-								</div>
-
-
-								<div className='row-flex-components input-row'>
-									<div className='two-col'>
-										<ValidationInput
-											className='textarea'
-											label={i18n('How are in VM process failures handled?')}
-											type='textarea'
-											pointer='/general/recovery/vmProcessFailuresHandling'/>
-									</div>
-									<div className='empty-two-col' />
-									{
-										/** disabled until backend will be ready to implement it
-											<div className='row'>
-												<div className='col-md-3'>
-													<ValidationInput
-														label={i18n('VM Recovery Document')}
-														type='text'
-														pointer='/general/recovery/VMRecoveryDocument'/>
-												</div>
-											</div>
-										 */
-									}
-									</div>
-								</div>
-								<h3 className='section-title'>{i18n('DNS Configuration')}</h3>
-								<div className='rows-section'>
-									<div className='row-flex-components input-row'>
-										<div className='two-col'>
-											<ValidationInput
-												label={i18n('Do you have a need for DNS as a Service? Please describe.')}
-												type='textarea'
-												pointer='/general/dnsConfiguration'/>
-										</div>
-										<div className='empty-two-col' />
-									</div>
-								</div>
-								<h3 className='section-title'>{i18n('Clone')}</h3>
-								<div className='rows-section'>
-									<div className='row-flex-components input-row'>
-										<div className='two-col'>
-											<ValidationInput
-												label={i18n('Describe VM Clone Use')}
-												type='textarea'
-												pointer='/general/vmCloneUsage'/>
-										</div>
-										<div className='empty-two-col' />
-									</div>
-								</div>
-					</ValidationForm>
-					}
+						<GeneralSection
+							onDataChanged={onDataChanged}
+							displayName={displayName}
+							vfcCode={vfcCode}
+							description={description}
+							isReadOnlyMode={isReadOnlyMode}
+							genericFieldInfo={genericFieldInfo}/>
+						<HypervisorSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
+						<ImageSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
+						<RecoverySection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
+						<DNSConfigurationSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
+						<CloneSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
+					</Form> }
 				</div>
 			</div>
 		);