[SDC] Onboarding 1710 rebase.

Change-Id: If3b6b81d221fde13908f1e8160db6f7d9433c535
Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>

6 files changed, 72 insertions, 25 deletions

diff --git a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
index e2ee40fcd2..eab1d45ef4 100644
--- a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
@@ -15,11 +15,11 @@
  */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
 
 const ExpandableInputClosed = ({iconType, onClick}) => (
-	<SVGIcon className='expandable-input-wrapper closed' name={iconType} onClick={onClick} />
+	<SVGIcon className='expandable-input-wrapper closed'  data-test-id='expandable-input-closed' name={iconType} onClick={onClick} />
 );
 
 class ExpandableInputOpened extends React.Component {
@@ -58,6 +58,7 @@ class ExpandableInputOpened extends React.Component {
 				<div className='expandable-input-wrapper opened' key='expandable'>
 					<Input
 						type='text'
+						data-test-id='expandable-input-opened'
 						value={value}
 						ref={(input) => this.searchInputNode = input}
 						className='expandable-active'
@@ -65,7 +66,7 @@ class ExpandableInputOpened extends React.Component {
 						onChange={e => onChange(e)}
 						onKeyDown={e => this.handleKeyDown(e)}
 						onBlur={handleBlur}/>
-					{value && <SVGIcon onClick={() => this.handleClose()} name='close' />}
+					{value && <SVGIcon data-test-id='expandable-input-close-btn' onClick={() => this.handleClose()} name='close' />}
 					{!value && <SVGIcon name={iconType} onClick={handleBlur}/>}
 				</div>
 		);
diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
index c60d6f777e..a3be363ba4 100644
--- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
+++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
@@ -14,7 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
 
 class DualListboxView extends React.Component {
@@ -118,10 +118,10 @@ class DualListboxView extends React.Component {
 	renderOperationsBar(isReadOnlyMode) {
 		return (
 			<div className={`dual-list-options-bar${isReadOnlyMode ? ' disabled' : ''}`}>
-				{this.renderOperationBarButton(() => this.addToSelectedList(), 'angle-right')}
-				{this.renderOperationBarButton(() => this.removeFromSelectedList(), 'angle-left')}
-				{this.renderOperationBarButton(() => this.addAllToSelectedList(), 'angle-double-right')}
-				{this.renderOperationBarButton(() => this.removeAllFromSelectedList(), 'angle-double-left')}
+				{this.renderOperationBarButton(() => this.addToSelectedList(), 'angleRight')}
+				{this.renderOperationBarButton(() => this.removeFromSelectedList(), 'angleLeft')}
+				{this.renderOperationBarButton(() => this.addAllToSelectedList(), 'angleDoubleRight')}
+				{this.renderOperationBarButton(() => this.removeAllFromSelectedList(), 'angleDoubleLeft')}
 			</div>
 		);
 	}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
index 98810d1c0d..8d53322587 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
@@ -25,7 +25,9 @@ class Form extends React.Component {
 		onReset :  null,
 		labledButtons: true,
 		onValidChange :  null,
-		isValid: true
+		isValid: true,
+		submitButtonText: null,
+		cancelButtonText: null
 	};
 
 	static propTypes = {
@@ -36,6 +38,8 @@ class Form extends React.Component {
 		onSubmit : React.PropTypes.func,
 		onReset : React.PropTypes.func,
 		labledButtons: React.PropTypes.bool,
+		submitButtonText: React.PropTypes.string,
+		cancelButtonText: React.PropTypes.string,
 		onValidChange : React.PropTypes.func,
 		onValidityChanged: React.PropTypes.func,
 		onValidateForm: React.PropTypes.func
@@ -48,7 +52,8 @@ class Form extends React.Component {
 
 	render() {
 		// eslint-disable-next-line no-unused-vars
-		let {isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children, ...formProps} = this.props;
+		let {isValid, onValidChange, onValidityChanged, onDataChanged, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, submitButtonText,
+			 cancelButtonText, children, ...formProps} = this.props;
 		return (
 			<form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
 				<div className='validation-form-content'>
@@ -56,7 +61,13 @@ class Form extends React.Component {
 						{children}
 					</fieldset>
 				</div>
-				{hasButtons && <ValidationButtons labledButtons={labledButtons} ref={(buttons) => this.buttons = buttons} isReadOnlyMode={isReadOnlyMode}/>}
+				{hasButtons && 
+					<ValidationButtons 
+						labledButtons={labledButtons} 
+						submitButtonText={submitButtonText} 
+						cancelButtonText={cancelButtonText} 
+						ref={(buttons) => this.buttons = buttons} 
+						isReadOnlyMode={isReadOnlyMode}/>}
 			</form>
 		);
 	}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
index 59c35d7993..eef8fee1ce 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
@@ -22,6 +22,7 @@ import FormGroup from 'react-bootstrap/lib/FormGroup.js';
 import FormControl from 'react-bootstrap/lib/FormControl.js';
 import Overlay from 'react-bootstrap/lib/Overlay.js';
 import Tooltip from 'react-bootstrap/lib/Tooltip.js';
+import Datepicker from 'nfvo-components/datepicker/Datepicker.jsx';
 
 class Input extends React.Component {
 
@@ -29,13 +30,14 @@ class Input extends React.Component {
 		value: this.props.value,
 		checked: this.props.checked,
 		selectedValues: []
-	}
+	};
 
 	render() {
 		const {label, isReadOnlyMode, value, onBlur, onKeyDown, type, disabled, checked, name} = this.props;
 		// eslint-disable-next-line no-unused-vars
-		const {groupClassName, isValid = true, errorText, isRequired,  ...inputProps} = this.props;
-		let wrapperClassName = (type !== 'radio') ? 'validation-input-wrapper' : 'form-group';
+		const {groupClassName, isValid = true, errorText, isRequired,  overlayPos, ...inputProps} = this.props;
+		const {dateFormat, startDate, endDate, selectsStart, selectsEnd} = this.props; // Date Props
+		let wrapperClassName = (type !== 'radio') ? 'validation-input-wrapper' : 'validation-radio-wrapper';
 		if (disabled) {
 			wrapperClassName += ' disabled';
 		}
@@ -43,7 +45,7 @@ class Input extends React.Component {
 			<div className={wrapperClassName}>
 				<FormGroup className={classNames('form-group', [groupClassName], {'required' : isRequired , 'has-error' : !isValid})} >
 					{(label && (type !== 'checkbox' && type !== 'radio')) && <label className='control-label'>{label}</label>}
-					{(type === 'text' || type === 'number') &&
+					{type === 'text'  &&
 					<FormControl
 						bsClass={'form-control input-options-other'}
 						onChange={(e) => this.onChange(e)}
@@ -54,6 +56,17 @@ class Input extends React.Component {
 						inputRef={(input) => this.input = input}
 						type={type}
 						data-test-id={this.props['data-test-id']}/>}
+					{type === 'number' &&
+					<FormControl
+						bsClass={'form-control input-options-other'}
+						onChange={(e) => this.onChange(e)}
+						disabled={isReadOnlyMode || Boolean(disabled)}
+						onBlur={onBlur}
+						onKeyDown={onKeyDown}
+						value={(value !== undefined) ? value : ''}
+						inputRef={(input) => this.input = input}
+						type={type}
+						data-test-id={this.props['data-test-id']}/>}
 
 					{type === 'textarea' &&
 					<FormControl
@@ -81,6 +94,7 @@ class Input extends React.Component {
 						   disabled={isReadOnlyMode || Boolean(disabled)}
 						   value={value}
 						   onChange={(e)=>this.onChangeRadio(e)}
+						   inputRef={(input) => this.input = input}
 						   data-test-id={this.props['data-test-id']}>{label}</Radio>}
 					{type === 'select' &&
 					<FormControl onClick={ (e) => this.optionSelect(e) }
@@ -88,6 +102,18 @@ class Input extends React.Component {
 						 inputRef={(input) => this.input = input}
 						 name={name} {...inputProps}
 						 data-test-id={this.props['data-test-id']}/>}
+					{type === 'date' && 
+					<Datepicker 
+						date={value}
+						format={dateFormat}
+						startDate={startDate}
+						endDate={endDate}
+						inputRef={(input) => this.input = input}
+						onChange={this.props.onChange}
+						disabled={isReadOnlyMode || Boolean(disabled)}
+						data-test-id={this.props['data-test-id']}
+						selectsStart={selectsStart}
+						selectsEnd={selectsEnd} />}
 				</FormGroup>
 				{ this.renderErrorOverlay() }
 			</div>
@@ -116,7 +142,11 @@ class Input extends React.Component {
 		const {onChange, type} = this.props;
 		let value = e.target.value;
 		if (type === 'number') {
-			value = Number(value);
+			if (value === '') {
+				value = undefined;
+			} else {
+				value = Number(value);
+			}
 		}
 		this.setState({
 			value
@@ -154,7 +184,9 @@ class Input extends React.Component {
 		else if (type === 'text'
 			|| type === 'email'
 			|| type === 'number'
-			|| type === 'password') {
+			|| type === 'radio'
+			|| type === 'password'
+			|| type === 'date') {
 			position = 'bottom';
 		}
 
diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
index 5ca716cc20..6c8115deee 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
@@ -71,6 +71,7 @@ class InputWrapper extends React.Component {
 						checked={checked}
 						disabled={isReadOnlyMode || Boolean(disabled)}
 						value={value}
+						ref={(input) => this.inputWrapper = input}
 						onChange={(e)=>this.onChangeRadio(e)}
 						data-test-id={this.props['data-test-id']}>{label}</Radio>}
 				{type === 'select' &&
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
index ebb1473c04..c3808dd2c3 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
@@ -22,14 +22,16 @@
  */
 import React from 'react';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import Button from 'react-bootstrap/lib/Button.js';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import Button from 'sdc-ui/lib/react/Button.js';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 
 class ValidationButtons extends React.Component {
 
 	static propTypes = {
 		labledButtons: React.PropTypes.bool.isRequired,
-		isReadOnlyMode: React.PropTypes.bool
+		isReadOnlyMode: React.PropTypes.bool,
+		submitButtonText: React.PropTypes.string,
+		cancelButtonText: React.PropTypes.string
 	};
 
 	state = {
@@ -37,16 +39,16 @@ class ValidationButtons extends React.Component {
 	};
 
 	render() {
-		var submitBtn = this.props.labledButtons ? i18n('Save') : <SVGIcon className='check' name='check'/>;
-		var closeBtn = this.props.labledButtons ? i18n('Cancel') : <SVGIcon className='close' name='close'/>;
+		let submitBtn = this.props.labledButtons ? this.props.submitButtonText ? this.props.submitButtonText : i18n('Save') : <SVGIcon className='check' name='check'/>;
+		let closeBtn = this.props.labledButtons ? this.props.cancelButtonText ? this.props.cancelButtonText : i18n('Cancel') : <SVGIcon className='close' name='close'/>;
 		return (
 			<div className='validation-buttons'>
 				{!this.props.isReadOnlyMode ?
 					<div>
-						<Button  bsStyle='primary' ref='submitbutton' type='submit' disabled={!this.state.isValid}>{submitBtn}</Button>
-						<Button  type='reset'>{closeBtn}</Button>
+						<Button type='submit' disabled={!this.state.isValid}>{submitBtn}</Button>
+						<Button btnType='outline' type='reset'>{closeBtn}</Button>
 					</div>
-					: <Button  type='reset'>{i18n('Close')}</Button>
+					: <Button btnType='outline' type='reset'>{i18n('Close')}</Button>
 				}
 			</div>
 		);