Add collaboration feature

Issue-ID: SDC-767
Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795
Signed-off-by: talig <talig@amdocs.com>

9 files changed, 86 insertions, 69 deletions

diff --git a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
index eab1d45ef4..82fbe1deed 100644
--- a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
@@ -76,9 +77,9 @@ class ExpandableInputOpened extends React.Component {
 class ExpandableInput extends React.Component {
 
 	static propTypes = {
-		iconType: React.PropTypes.string,
-		onChange: React.PropTypes.func,
-		value: React.PropTypes.string
+		iconType: PropTypes.string,
+		onChange: PropTypes.func,
+		value: PropTypes.string
 	};
 
 	state = {showInput: false};
diff --git a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
index 23af72a26a..31a8a66d86 100644
--- a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
@@ -14,15 +14,16 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default
 class ToggleInput extends React.Component {
 
 	static propTypes = {
-		label: React.PropTypes.node,
-		value: React.PropTypes.bool,
-		onChange: React.PropTypes.func,
-		disabled: React.PropTypes.bool
+		label: PropTypes.node,
+		value: PropTypes.bool,
+		onChange: PropTypes.func,
+		disabled: PropTypes.bool
 	}
 
 	static defaultProps = {
diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
index a3be363ba4..a689c50778 100644
--- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
+++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
 
@@ -21,17 +22,17 @@ class DualListboxView extends React.Component {
 
 	static propTypes = {
 
-		availableList: React.PropTypes.arrayOf(React.PropTypes.shape({
-			id: React.PropTypes.string.isRequired,
-			name: React.PropTypes.string.isRequired
+		availableList: PropTypes.arrayOf(PropTypes.shape({
+			id: PropTypes.string.isRequired,
+			name: PropTypes.string.isRequired
 		})),
-		filterTitle: React.PropTypes.shape({
-			left: React.PropTypes.string,
-			right: React.PropTypes.string
+		filterTitle: PropTypes.shape({
+			left: PropTypes.string,
+			right: PropTypes.string
 		}),
-		selectedValuesList: React.PropTypes.arrayOf(React.PropTypes.string),
+		selectedValuesList: PropTypes.arrayOf(PropTypes.string),
 
-		onChange: React.PropTypes.func.isRequired
+		onChange: PropTypes.func.isRequired
 	};
 
 	static defaultProps = {
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
index 8d53322587..6df0bf9009 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
@@ -15,6 +15,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import ValidationButtons from './ValidationButtons.jsx';
 
 class Form extends React.Component {
@@ -31,18 +32,18 @@ class Form extends React.Component {
 	};
 
 	static propTypes = {
-		isValid : React.PropTypes.bool,
-		formReady : React.PropTypes.bool,
-		isReadOnlyMode : React.PropTypes.bool,
-		hasButtons : React.PropTypes.bool,
-		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
+		isValid : PropTypes.bool,
+		formReady : PropTypes.bool,
+		isReadOnlyMode : PropTypes.bool,
+		hasButtons : PropTypes.bool,
+		onSubmit : PropTypes.func,
+		onReset : PropTypes.func,
+		labledButtons: PropTypes.bool,
+		submitButtonText: PropTypes.string,
+		cancelButtonText: PropTypes.string,
+		onValidChange : PropTypes.func,
+		onValidityChanged: PropTypes.func,
+		onValidateForm: PropTypes.func
 	};
 
 	constructor(props) {
@@ -124,13 +125,21 @@ class Form extends React.Component {
 export class TabsForm extends Form {
 	render() {
 		// eslint-disable-next-line no-unused-vars
-		let {isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children, ...formProps} = this.props;
+		let {submitButtonText, cancelButtonText, isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children,
+			...formProps} = this.props;
 		return (
 			<form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
 				<div className='validation-form-content'>
 						{children}
 				</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 eef8fee1ce..9f0e9acca8 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
@@ -17,7 +17,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import Checkbox from 'react-bootstrap/lib/Checkbox.js';
-import Radio from 'react-bootstrap/lib/Radio.js';
+import Radio from 'sdc-ui/lib/react/Radio.js';
 import FormGroup from 'react-bootstrap/lib/FormGroup.js';
 import FormControl from 'react-bootstrap/lib/FormControl.js';
 import Overlay from 'react-bootstrap/lib/Overlay.js';
@@ -85,7 +85,7 @@ class Input extends React.Component {
 						className={classNames({'required' : isRequired , 'has-error' : !isValid})}
 						onChange={(e)=>this.onChangeCheckBox(e)}
 						disabled={isReadOnlyMode || Boolean(disabled)}
-						checked={value}
+						checked={checked}
 						data-test-id={this.props['data-test-id']}>{label}</Checkbox>}
 
 					{type === 'radio' &&
@@ -93,9 +93,10 @@ class Input extends React.Component {
 						   checked={checked}
 						   disabled={isReadOnlyMode || Boolean(disabled)}
 						   value={value}
-						   onChange={(e)=>this.onChangeRadio(e)}
+						onChange={(isChecked)=>this.onChangeRadio(isChecked)}
 						   inputRef={(input) => this.input = input}
-						   data-test-id={this.props['data-test-id']}>{label}</Radio>}
+						label={label}
+						data-test-id={this.props['data-test-id']} />}
 					{type === 'select' &&
 					<FormControl onClick={ (e) => this.optionSelect(e) }
 						 componentClass={type}
@@ -156,16 +157,17 @@ class Input extends React.Component {
 
 	onChangeCheckBox(e) {
 		let {onChange} = this.props;
+		let checked = e.target.checked;
 		this.setState({
-			checked: e.target.checked
+			checked
 		});
-		onChange(e.target.checked);
+		onChange(checked);
 	}
 
-	onChangeRadio(e) {
+	onChangeRadio(isChecked) {
 		let {onChange} = this.props;
 		this.setState({
-			checked: e.target.checked
+			checked: isChecked
 		});
 		onChange(this.state.value);
 	}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
index 9b11d27c2b..11b07ba9da 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import classNames from 'classnames';
@@ -26,27 +27,27 @@ export const other = {OTHER: 'Other'};
 class InputOptions extends React.Component {
 
 	static propTypes = {
-		values: React.PropTypes.arrayOf(React.PropTypes.shape({
-			enum: React.PropTypes.string,
-			title: React.PropTypes.string
+		values: PropTypes.arrayOf(PropTypes.shape({
+			enum: PropTypes.string,
+			title: PropTypes.string
 		})),
-		isEnabledOther: React.PropTypes.bool,
-		label: React.PropTypes.string,
-		selectedValue: React.PropTypes.string,
-		multiSelectedEnum: React.PropTypes.oneOfType([
-			React.PropTypes.string,
-			React.PropTypes.array
+		isEnabledOther: PropTypes.bool,
+		label: PropTypes.string,
+		selectedValue: PropTypes.string,
+		multiSelectedEnum: PropTypes.oneOfType([
+			PropTypes.string,
+			PropTypes.array
 		]),
-		selectedEnum: React.PropTypes.string,
-		otherValue: React.PropTypes.string,
-		overlayPos: React.PropTypes.string,
-		onEnumChange: React.PropTypes.func,
-		onOtherChange: React.PropTypes.func,
-		onBlur: React.PropTypes.func,
-		isRequired: React.PropTypes.bool,
-		isMultiSelect: React.PropTypes.bool,
-		isValid: React.PropTypes.bool,
-		disabled: React.PropTypes.bool
+		selectedEnum: PropTypes.string,
+		otherValue: PropTypes.string,
+		overlayPos: PropTypes.string,
+		onEnumChange: PropTypes.func,
+		onOtherChange: PropTypes.func,
+		onBlur: PropTypes.func,
+		isRequired: PropTypes.bool,
+		isMultiSelect: PropTypes.bool,
+		isValid: PropTypes.bool,
+		disabled: PropTypes.bool
 	};
 
 	state = {
diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
index 6c8115deee..e440fcda69 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
@@ -17,7 +17,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import Checkbox from 'react-bootstrap/lib/Checkbox.js';
-import Radio from 'react-bootstrap/lib/Radio.js';
+import Radio from 'sdc-ui/lib/react/Radio.js';
 import FormGroup from 'react-bootstrap/lib/FormGroup.js';
 import FormControl from 'react-bootstrap/lib/FormControl.js';
 
@@ -72,8 +72,8 @@ class InputWrapper extends React.Component {
 						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>}
+						onChange={(isChecked)=>this.onChangeRadio(isChecked)} label={label}
+						data-test-id={this.props['data-test-id']} />}
 				{type === 'select' &&
 					<FormControl onClick={ (e) => this.optionSelect(e) }
 						componentClass={type}
@@ -119,10 +119,10 @@ class InputWrapper extends React.Component {
 		onChange(e.target.checked);
 	}
 
-	onChangeRadio(e) {
+	onChangeRadio(isChecked) {
 		let {onChange} = this.props;
 		this.setState({
-			checked: e.target.checked
+			checked: isChecked
 		});
 		onChange(this.state.value);
 	}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
index 6f33536b04..0982c133e6 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx
@@ -14,6 +14,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import {default as SDCTabs} from 'sdc-ui/lib/react/Tabs.js';
 import Overlay from 'react-bootstrap/lib/Overlay.js';
@@ -25,7 +26,7 @@ export default
 class Tabs extends React.Component {
 
 	static propTypes = {
-		children: React.PropTypes.node
+		children: PropTypes.node
 	};
 
 	cloneTab(element) {
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
index c3808dd2c3..151d3fe859 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
@@ -21,6 +21,7 @@
  * labledButtons - whether or not to use labeled buttons or icons only
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Button from 'sdc-ui/lib/react/Button.js';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
@@ -28,10 +29,10 @@ 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,
-		submitButtonText: React.PropTypes.string,
-		cancelButtonText: React.PropTypes.string
+		labledButtons: PropTypes.bool.isRequired,
+		isReadOnlyMode: PropTypes.bool,
+		submitButtonText: PropTypes.string,
+		cancelButtonText: PropTypes.string
 	};
 
 	state = {
@@ -45,10 +46,10 @@ class ValidationButtons extends React.Component {
 			<div className='validation-buttons'>
 				{!this.props.isReadOnlyMode ?
 					<div>
-						<Button type='submit' disabled={!this.state.isValid}>{submitBtn}</Button>
-						<Button btnType='outline' type='reset'>{closeBtn}</Button>
+						<Button type='submit' data-test-id='form-submit-button' disabled={!this.state.isValid}>{submitBtn}</Button>
+						<Button btnType='outline' type='reset' data-test-id='form-close-button'>{closeBtn}</Button>
 					</div>
-					: <Button btnType='outline' type='reset'>{i18n('Close')}</Button>
+					: <Button btnType='outline' type='reset' data-test-id='form-close-button'>{i18n('Close')}</Button>
 				}
 			</div>
 		);