summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-02-19 12:57:33 +0200
committerMichael Lando <ml636r@att.com>2017-02-19 13:47:13 +0200
commitefa037d34be7b1570efdc767c79fad8d4005f10e (patch)
treecf1036ba2728dea8a61492b678fa91954e629403 /openecomp-ui/src/nfvo-components
parentf5f13c4f6b6fe3b4d98e349dfd7db59339803436 (diff)
Add new code new version
Change-Id: Ic02a76313503b526f17c3df29eb387a29fe6a42a Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'openecomp-ui/src/nfvo-components')
-rw-r--r--openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx133
-rw-r--r--openecomp-ui/src/nfvo-components/confirmations/ConfirmationModalView.jsx53
-rw-r--r--openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx71
-rw-r--r--openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx77
-rw-r--r--openecomp-ui/src/nfvo-components/input/SelectInput.jsx52
-rw-r--r--openecomp-ui/src/nfvo-components/input/ToggleInput.jsx53
-rw-r--r--openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx132
-rw-r--r--openecomp-ui/src/nfvo-components/input/inputOptions/InputOptions.jsx221
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx40
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/ValidationForm.jsx200
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/ValidationInput.jsx509
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/ValidationTab.jsx107
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/ValidationTabs.jsx72
-rw-r--r--openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx47
-rw-r--r--openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx64
-rw-r--r--openecomp-ui/src/nfvo-components/loader/Loader.jsx35
-rw-r--r--openecomp-ui/src/nfvo-components/loader/LoaderConstants.js26
-rw-r--r--openecomp-ui/src/nfvo-components/loader/LoaderReducer.js32
-rw-r--r--openecomp-ui/src/nfvo-components/modal/Modal.jsx69
-rw-r--r--openecomp-ui/src/nfvo-components/notifications/NotificationConstants.js29
-rw-r--r--openecomp-ui/src/nfvo-components/notifications/NotificationModal.jsx100
-rw-r--r--openecomp-ui/src/nfvo-components/notifications/NotificationReducer.js51
-rw-r--r--openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx73
-rw-r--r--openecomp-ui/src/nfvo-components/panel/SlidePanel.jsx109
-rw-r--r--openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx165
-rw-r--r--openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js38
-rw-r--r--openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerUtils.js49
-rw-r--r--openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx22
28 files changed, 2629 insertions, 0 deletions
diff --git a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
new file mode 100644
index 0000000000..f2ec1582f3
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
@@ -0,0 +1,133 @@
+import React, {Component} from 'react';
+import ListGroupItem from 'react-bootstrap/lib/ListGroupItem.js';
+import ListGroup from 'react-bootstrap/lib/ListGroup.js';
+import Panel from 'react-bootstrap/lib/Panel.js';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+
+/**
+ * parsing and showing the following Java Response object
+ *
+ * public class ValidationResponse {
+ private boolean valid = true;
+ private Collection<ErrorCode> vspErrors;
+ private Collection<ErrorCode> licensingDataErrors;
+ private Map<String, List<ErrorMessage>> uploadDataErrors;
+ private Map<String, List<ErrorMessage>> compilationErrors;
+ private QuestionnaireValidationResult questionnaireValidationResult;
+ }
+
+ * public class ErrorCode {
+ private String id;
+ private String message;
+ private ErrorCategory category;
+ }
+
+ * public class ErrorMessage {
+ private final ErrorLevel level;
+ private final String message;
+ }
+ */
+class SubmitErrorResponse extends Component {
+
+
+ render() {
+ let {validationResponse} = this.props;
+ return (
+ <div className='submit-error-response-view'>
+ {validationResponse.vspErrors && this.renderVspErrors(validationResponse.vspErrors)}
+ {validationResponse.licensingDataErrors && this.renderVspErrors(validationResponse.licensingDataErrors)}
+ {validationResponse.compilationErrors && this.renderCompilationErrors(validationResponse.compilationErrors)}
+ {validationResponse.uploadDataErrors && this.renderUploadDataErrors(validationResponse.uploadDataErrors)}
+ {validationResponse.questionnaireValidationResult && this.renderQuestionnaireValidationResult(validationResponse.questionnaireValidationResult)}
+ </div>
+ );
+ }
+
+ renderVspErrors(vspErrors) {
+ return (
+ <Panel header={i18n('VSP Errors')} collapsible>{this.parseErrorCodeCollection(vspErrors)}</Panel>
+ );
+ }
+
+ renderLicensingDataErrors(licensingDataErrors) {
+ return (
+ <Panel
+ header={i18n('Licensing Data Errors')}
+ collapsible>{this.parseErrorCodeCollection(licensingDataErrors)}
+ </Panel>
+ );
+ }
+
+ renderUploadDataErrors(uploadDataErrors) {
+ return (
+ <Panel
+ header={i18n('Upload Data Errors')}
+ collapsible>{this.parseMapOfErrorMessagesList(uploadDataErrors)}
+ </Panel>
+ );
+ }
+
+ renderCompilationErrors(compilationErrors) {
+ return (
+ <Panel
+ header={i18n('Compilation Errors')}
+ collapsible>{this.parseMapOfErrorMessagesList(compilationErrors)}
+ </Panel>
+ );
+ }
+
+ parseErrorCodeCollection(errors) {
+ return (
+ <ListGroup>{errors.map(error =>
+ <ListGroupItem className='error-code-list-item'>
+ <div><span>{i18n('Category: ')}</span>{error.category}</div>
+ <div><span>{i18n('Message: ')}</span>{error.message}</div>
+ </ListGroupItem>
+ )}</ListGroup>
+ );
+ }
+
+ parseMapOfErrorMessagesList(errorMap) {
+ return (
+ <ListGroup>
+ {Object.keys(errorMap).map(errorStringKey =>
+ <Panel header={errorStringKey} collapsible>
+ <ListGroup>{errorMap[errorStringKey].map(error =>
+ <ListGroupItem className='error-code-list-item'>
+ <div><span>{i18n('Level: ')}</span>{error.level}</div>
+ <div><span>{i18n('Message: ')}</span>{error.message}</div>
+ </ListGroupItem>
+ )}</ListGroup>
+ </Panel>
+ )}
+ </ListGroup>
+ );
+ }
+
+
+ renderQuestionnaireValidationResult(questionnaireValidationResult) {
+ if (!questionnaireValidationResult.valid) {
+ return this.parseAndRenderCompositionEntityValidationData(questionnaireValidationResult.validationData);
+ }
+ }
+
+ parseAndRenderCompositionEntityValidationData(validationData) {
+ let {entityType, entityId, errors = [], subEntitiesValidationData = []} = validationData;
+ return (
+ <ListGroup>
+ <Panel header={`${entityType}: ${entityId}`} collapsible>
+ <ListGroup>{errors.map(error =>
+ <ListGroupItem className='error-code-list-item'>
+ <div>{error}</div>
+ </ListGroupItem>
+ )}</ListGroup>
+ {subEntitiesValidationData.map(subValidationData => this.parseAndRenderCompositionEntityValidationData(subValidationData))}
+ </Panel>
+ </ListGroup>
+ );
+ }
+
+
+}
+
+export default SubmitErrorResponse;
diff --git a/openecomp-ui/src/nfvo-components/confirmations/ConfirmationModalView.jsx b/openecomp-ui/src/nfvo-components/confirmations/ConfirmationModalView.jsx
new file mode 100644
index 0000000000..cc971c608c
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/confirmations/ConfirmationModalView.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import Button from 'react-bootstrap/lib/Button.js';
+
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import Modal from 'nfvo-components/modal/Modal.jsx';
+
+let typeClass = {
+ 'default': 'primary',
+ error: 'danger',
+ warning: 'warning',
+ success: 'success'
+};
+
+
+class ConfirmationModalView extends React.Component {
+
+ static propTypes = {
+ show: React.PropTypes.bool,
+ type: React.PropTypes.oneOf(['default', 'error', 'warning', 'success']),
+ msg: React.PropTypes.node,
+ title: React.PropTypes.string,
+ confirmationDetails: React.PropTypes.object,
+ confirmationButtonText: React.PropTypes.string,
+
+ };
+
+ static defaultProps = {
+ show: false,
+ type: 'warning',
+ title: 'Warning',
+ msg: '',
+ confirmationButtonText: i18n('Delete')
+ };
+
+ render() {
+ let {title, type, msg, show, confirmationButtonText} = this.props;
+
+ return(
+ <Modal show={show} className={`notification-modal ${typeClass[type]}`}>
+ <Modal.Header>
+ <Modal.Title>{title}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>{msg}</Modal.Body>
+ <Modal.Footer>
+ <Button bsStyle={typeClass[type]} onClick={() => this.props.onDeclined(this.props.confirmationDetails)}>{i18n('Cancel')}</Button>
+ <Button bsStyle={typeClass[type]} onClick={() => this.props.onConfirmed(this.props.confirmationDetails)}>{confirmationButtonText}</Button>
+ </Modal.Footer>
+ </Modal>
+ );
+ };
+}
+
+export default ConfirmationModalView;
diff --git a/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx b/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx
new file mode 100644
index 0000000000..4a106b5ff4
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import VersionController from 'nfvo-components/panel/versionController/VersionController.jsx';
+import NavigationSideBar from 'nfvo-components/panel/NavigationSideBar.jsx';
+
+export default class TabulatedEditor extends React.Component {
+
+ render() {
+ const {versionControllerProps, navigationBarProps, onToggle, onVersionSwitching, onCreate, onSave, onClose, onVersionControllerAction, onNavigate, children} = this.props;
+ const {className = ''} = React.Children.only(children).props;
+ const child = this.prepareChild();
+
+ return (
+ <div className='software-product-view'>
+ <div className='software-product-navigation-side-bar'>
+ <NavigationSideBar {...navigationBarProps} onSelect={onNavigate} onToggle={onToggle}/>
+ </div>
+ <div className='software-product-landing-view-right-side flex-column'>
+ <VersionController
+ {...versionControllerProps}
+ onVersionSwitching={version => onVersionSwitching(version)}
+ callVCAction={onVersionControllerAction}
+ onCreate={onCreate && this.handleCreate}
+ onSave={onSave && this.handleSave}
+ onClose={() => onClose(versionControllerProps)}/>
+ <div className={classnames('content-area', `${className}`)}>
+ {
+ child
+ }
+ </div>
+ </div>
+ </div>
+ );
+ }
+
+ prepareChild() {
+ const {onSave, onCreate, children} = this.props;
+
+ const additionalChildProps = {ref: 'editor'};
+ if (onSave) {
+ additionalChildProps.onSave = onSave;
+ }
+ if (onCreate) {
+ additionalChildProps.onCreate = onCreate;
+ }
+
+ const child = React.cloneElement(React.Children.only(children), additionalChildProps);
+ return child;
+ }
+
+
+
+ handleSave = () => {
+ const childInstance = this.refs.editor.getWrappedInstance();
+ if (childInstance.save) {
+ return childInstance.save();
+ } else {
+ return this.props.onSave();
+ }
+ };
+
+ handleCreate = () => {
+ const childInstance = this.refs.editor.getWrappedInstance();
+ if (childInstance.create) {
+ childInstance.create();
+ } else {
+ this.props.onCreate();
+ }
+ }
+}
diff --git a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
new file mode 100644
index 0000000000..3ac3fcad28
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import FontAwesome from 'react-fontawesome';
+import classnames from 'classnames';
+import Input from 'react-bootstrap/lib/Input';
+
+
+class ExpandableInput extends React.Component {
+ constructor(props){
+ super(props);
+ this.state = {showInput: false, value: ''};
+ this.toggleInput = this.toggleInput.bind(this);
+ this.handleFocus = this.handleFocus.bind(this);
+ this.handleInput = this.handleInput.bind(this);
+ this.handleClose = this.handleClose.bind(this);
+ }
+
+ toggleInput(){
+ if (!this.state.showInput){
+ this.searchInputNode.refs.input.focus();
+ } else {
+ this.setState({showInput: false});
+ }
+ }
+
+ handleInput(e){
+ let {onChange} = this.props;
+
+ this.setState({value: e.target.value});
+ onChange(e);
+ }
+
+ handleClose(){
+ this.handleInput({target: {value: ''}});
+ this.searchInputNode.refs.input.focus();
+ }
+
+ handleFocus(){
+ if (!this.state.showInput){
+ this.setState({showInput: true});
+ }
+ }
+
+ getValue(){
+ return this.state.value;
+ }
+
+ render(){
+ let {iconType} = this.props;
+
+ let inputClasses = classnames({
+ 'expandable-active': this.state.showInput,
+ 'expandable-not-active': !this.state.showInput
+ });
+
+ let iconClasses = classnames(
+ 'expandable-icon',
+ {'expandable-icon-active': this.state.showInput}
+ );
+
+ return (
+ <div className='expandable-input-wrapper'>
+ <Input
+ type='text'
+ value={this.state.value}
+ ref={(input) => this.searchInputNode = input}
+ className={inputClasses}
+ groupClassName='expandable-input-control'
+ onChange={e => this.handleInput(e)}
+ onFocus={this.handleFocus}/>
+ {this.state.showInput && this.state.value && <FontAwesome onClick={this.handleClose} name='close' className='expandable-close-button'/>}
+ {!this.state.value && <FontAwesome onClick={this.toggleInput} name={iconType} className={iconClasses}/>}
+ </div>
+ );
+ }
+}
+
+export default ExpandableInput;
diff --git a/openecomp-ui/src/nfvo-components/input/SelectInput.jsx b/openecomp-ui/src/nfvo-components/input/SelectInput.jsx
new file mode 100644
index 0000000000..1036ac41c3
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/input/SelectInput.jsx
@@ -0,0 +1,52 @@
+/**
+ * The HTML structure here is aligned with bootstrap HTML structure for form elements.
+ * In this way we have proper styling and it is aligned with other form elements on screen.
+ *
+ * Select and MultiSelect options:
+ *
+ * label - the label to be shown which paired with the input
+ *
+ * all other "react-select" props - as documented on
+ * http://jedwatson.github.io/react-select/
+ * or
+ * https://github.com/JedWatson/react-select
+ */
+import React, {Component} from 'react';
+import Select from 'react-select';
+
+class SelectInput extends Component {
+
+ inputValue = [];
+
+ render() {
+ let {label, value, ...other} = this.props;
+ return (
+ <div className='validation-input-wrapper dropdown-multi-select'>
+ <div className='form-group'>
+ {label && <label className='control-label'>{label}</label>}
+ <Select ref='_myInput' onChange={value => this.onSelectChanged(value)} {...other} value={value} />
+ </div>
+ </div>
+ );
+ }
+
+ getValue() {
+ return this.inputValue && this.inputValue.length ? this.inputValue : '';
+ }
+
+ onSelectChanged(value) {
+ this.props.onMultiSelectChanged(value);
+ }
+
+ componentDidMount() {
+ let {value} = this.props;
+ this.inputValue = value ? value : [];
+ }
+ componentDidUpdate() {
+ if (this.inputValue !== this.props.value) {
+ this.inputValue = this.props.value;
+ }
+ }
+}
+
+export default SelectInput;
diff --git a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
new file mode 100644
index 0000000000..873d3ded65
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+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
+ }
+
+ static defaultProps = {
+ value: false,
+ label: ''
+ }
+
+ state = {
+ value: this.props.value
+ }
+
+ status() {
+ return this.state.value ? 'on' : 'off';
+ }
+
+ render() {
+ let {label, disabled} = this.props;
+ let checked = this.status() === 'on';
+ return (
+ <div className='toggle-input-wrapper form-group' onClick={!disabled && this.click}>
+ <div className='toggle-input-label'>{label}</div>
+ <div className='toggle-switch'>
+ <input className='toggle toggle-round-flat' type='checkbox' checked={checked} readOnly/>
+ <label></label>
+ </div>
+ </div>
+ );
+ }
+
+ click = () => {
+ let value = !this.state.value;
+ this.setState({value});
+
+ let onChange = this.props.onChange;
+ if (onChange) {
+ onChange(value);
+ }
+ }
+
+ getValue() {
+ return this.state.value;
+ }
+}
diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
new file mode 100644
index 0000000000..171bead9bb
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import FontAwesome from 'react-fontawesome';
+import Input from 'react-bootstrap/lib/Input.js';
+
+class DualListboxView extends React.Component {
+
+ static propTypes = {
+
+ availableList: React.PropTypes.arrayOf(React.PropTypes.shape({
+ id: React.PropTypes.string.isRequired,
+ name: React.PropTypes.string.isRequired
+ })),
+ filterTitle: React.PropTypes.shape({
+ left: React.PropTypes.string,
+ right: React.PropTypes.string
+ }),
+ selectedValuesList: React.PropTypes.arrayOf(React.PropTypes.string),
+
+ onChange: React.PropTypes.func.isRequired
+ };
+
+ static defaultProps = {
+ selectedValuesList: [],
+ availableList: [],
+ filterTitle: {
+ left: '',
+ right: ''
+ }
+ };
+
+ state = {
+ availableListFilter: '',
+ selectedValuesListFilter: ''
+ };
+
+ static contextTypes = {
+ isReadOnlyMode: React.PropTypes.bool
+ };
+
+ render() {
+ let {availableList, selectedValuesList, filterTitle} = this.props;
+ let {availableListFilter, selectedValuesListFilter} = this.state;
+ let isReadOnlyMode = this.context.isReadOnlyMode;
+
+ let unselectedList = availableList.filter(availableItem => !selectedValuesList.find(value => value === availableItem.id));
+ let selectedList = availableList.filter(availableItem => selectedValuesList.find(value => value === availableItem.id));
+ selectedList = selectedList.sort((a, b) => selectedValuesList.indexOf(a.id) - selectedValuesList.indexOf(b.id));
+
+ return (
+ <div className='dual-list-box'>
+ {this.renderListbox(filterTitle.left, unselectedList, {
+ value: availableListFilter,
+ ref: 'availableListFilter',
+ disabled: isReadOnlyMode,
+ onChange: () => this.setState({availableListFilter: this.refs.availableListFilter.getValue()})
+ }, {ref: 'availableValues', disabled: isReadOnlyMode})}
+ {this.renderOperationsBar(isReadOnlyMode)}
+ {this.renderListbox(filterTitle.right, selectedList, {
+ value: selectedValuesListFilter,
+ ref: 'selectedValuesListFilter',
+ disabled: isReadOnlyMode,
+ onChange: () => this.setState({selectedValuesListFilter: this.refs.selectedValuesListFilter.getValue()})
+ }, {ref: 'selectedValues', disabled: isReadOnlyMode})}
+ </div>
+ );
+ }
+
+ renderListbox(filterTitle, list, filterProps, props) {
+ let regExFilter = new RegExp(escape(filterProps.value), 'i');
+ let matchedItems = list.filter(item => item.name.match(regExFilter));
+ let unMatchedItems = list.filter(item => !item.name.match(regExFilter));
+
+
+ return (
+ <div className='dual-search-multi-select-section'>
+ <p>{filterTitle}</p>
+ <div className='dual-text-box-search search-wrapper'>
+ <Input name='search-input-control' type='text' groupClassName='search-input-control' {...filterProps}/>
+ <FontAwesome name='search' className='search-icon'/>
+ </div>
+ <Input
+ multiple
+ groupClassName='dual-list-box-multi-select'
+ type='select'
+ name='dual-list-box-multi-select'
+ {...props}>
+ {matchedItems.map(item => this.renderOption(item.id, item.name))}
+ {matchedItems.length && unMatchedItems.length && <option style={{pointerEvents: 'none'}}>--------------------</option>}
+ {unMatchedItems.map(item => this.renderOption(item.id, item.name))}
+ </Input>
+ </div>
+ );
+ }
+
+ renderOption(value, name) {
+ return (<option className='dual-list-box-multi-select-text' key={value} value={value}>{name}</option>);
+ }
+
+ 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')}
+ </div>
+ );
+ }
+
+ renderOperationBarButton(onClick, fontAwesomeIconName){
+ return (<div className='dual-list-option' onClick={onClick}><FontAwesome name={fontAwesomeIconName}/></div>);
+ }
+
+ addToSelectedList() {
+ this.props.onChange(this.props.selectedValuesList.concat(this.refs.availableValues.getValue()));
+ }
+
+ removeFromSelectedList() {
+ const selectedValues = this.refs.selectedValues.getValue();
+ this.props.onChange(this.props.selectedValuesList.filter(value => !selectedValues.find(selectedValue => selectedValue === value)));
+ }
+
+ addAllToSelectedList() {
+ this.props.onChange(this.props.availableList.map(item => item.id));
+ }
+
+ removeAllFromSelectedList() {
+ this.props.onChange([]);
+ }
+}
+
+export default DualListboxView;
diff --git a/openecomp-ui/src/nfvo-components/input/inputOptions/InputOptions.jsx b/openecomp-ui/src/nfvo-components/input/inputOptions/InputOptions.jsx
new file mode 100644
index 0000000000..5daaffea41
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/input/inputOptions/InputOptions.jsx
@@ -0,0 +1,221 @@
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import classNames from 'classnames';
+import Select from 'nfvo-components/input/SelectInput.jsx';
+
+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
+ })),
+ isEnabledOther: React.PropTypes.bool,
+ title: React.PropTypes.string,
+ selectedValue: React.PropTypes.string,
+ multiSelectedEnum: React.PropTypes.array,
+ selectedEnum: React.PropTypes.string,
+ otherValue: React.PropTypes.string,
+ onEnumChange: React.PropTypes.func,
+ onOtherChange: React.PropTypes.func,
+ isRequired: React.PropTypes.bool,
+ isMultiSelect: React.PropTypes.bool
+ };
+
+
+ static contextTypes = {
+ isReadOnlyMode: React.PropTypes.bool
+ };
+
+ state = {
+ otherInputDisabled: !this.props.otherValue
+ };
+
+ oldProps = {
+ selectedEnum: '',
+ otherValue: '',
+ multiSelectedEnum: []
+ };
+
+ render() {
+ let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, hasError, validations, children} = this.props;
+
+ let currentMultiSelectedEnum = [];
+ let currentSelectedEnum = '';
+ let {otherInputDisabled} = this.state;
+ if (isMultiSelect) {
+ currentMultiSelectedEnum = multiSelectedEnum;
+ if(!otherInputDisabled) {
+ currentSelectedEnum = multiSelectedEnum ? multiSelectedEnum.toString() : undefined;
+ }
+ }
+ else if(selectedEnum){
+ currentSelectedEnum = selectedEnum;
+ }
+
+ let isReadOnlyMode = this.context.isReadOnlyMode;
+
+ return(
+ <div className={classNames('form-group', {'required' : validations.required , 'has-error' : hasError})}>
+ {label && <label className='control-label'>{label}</label>}
+ {isMultiSelect && otherInputDisabled ?
+ <Select
+ ref='_myInput'
+ value={currentMultiSelectedEnum}
+ className='options-input'
+ clearable={false}
+ required={isRequired}
+ disabled={isReadOnlyMode || Boolean(this.props.disabled)}
+ onBlur={() => onBlur()}
+ onMultiSelectChanged={value => this.multiSelectEnumChanged(value)}
+ options={this.renderMultiSelectOptions(values)}
+ multi/> :
+ <div className={classNames('input-options',{'has-error' : hasError})}>
+ <select
+ ref={'_myInput'}
+ label={label}
+ className='form-control input-options-select'
+ value={currentSelectedEnum}
+ style={{'width' : otherInputDisabled ? '100%' : '95px'}}
+ onBlur={() => onBlur()}
+ disabled={isReadOnlyMode || Boolean(this.props.disabled)}
+ onChange={ value => this.enumChanged(value)}
+ type='select'>
+ {values && values.length && values.map(val => this.renderOptions(val))}
+ {onOtherChange && <option key='other' value={other.OTHER}>{i18n(other.OTHER)}</option>}
+ {children}
+ </select>
+
+ {!otherInputDisabled && <div className='input-options-separator'/>}
+ <input
+ className='form-control input-options-other'
+ placeholder={i18n('other')}
+ ref='_otherValue'
+ style={{'display' : otherInputDisabled ? 'none' : 'block'}}
+ disabled={isReadOnlyMode || Boolean(this.props.disabled)}
+ value={otherValue || ''}
+ onBlur={() => onBlur()}
+ onChange={() => this.changedOtherInput()}/>
+ </div>
+ }
+ </div>
+ );
+ }
+
+ renderOptions(val){
+ return(
+ <option key={val.enum} value={val.enum}>{val.title}</option>
+ );
+ }
+
+
+ renderMultiSelectOptions(values) {
+ let {onOtherChange} = this.props;
+ let optionsList = [];
+ if (onOtherChange) {
+ optionsList = values.map(option => {
+ return {
+ label: option.title,
+ value: option.enum,
+ };
+ }).concat([{
+ label: i18n(other.OTHER),
+ value: i18n(other.OTHER),
+ }]);
+ }
+ else {
+ optionsList = values.map(option => {
+ return {
+ label: option.title,
+ value: option.enum,
+ };
+ });
+ }
+ if (optionsList.length > 0 && optionsList[0].value === '') {
+ optionsList.shift();
+ }
+ return optionsList;
+ }
+
+ getValue() {
+ let res = '';
+ let {isMultiSelect} = this.props;
+ let {otherInputDisabled} = this.state;
+
+ if (otherInputDisabled) {
+ res = isMultiSelect ? this.refs._myInput.getValue() : this.refs._myInput.value;
+ } else {
+ res = this.refs._otherValue.value;
+ }
+ return res;
+ }
+
+ enumChanged() {
+ let enumValue = this.refs._myInput.value;
+ let {onEnumChange, isMultiSelect, onChange} = this.props;
+ this.setState({
+ otherInputDisabled: enumValue !== other.OTHER
+ });
+
+ let value = isMultiSelect ? [enumValue] : enumValue;
+ if (onEnumChange) {
+ onEnumChange(value);
+ }
+ if (onChange) {
+ onChange(value);
+ }
+ }
+
+ multiSelectEnumChanged(enumValue) {
+ let {onEnumChange} = this.props;
+ let selectedValues = enumValue.map(enumVal => {
+ return enumVal.value;
+ });
+
+ if (this.state.otherInputDisabled === false) {
+ selectedValues.shift();
+ }
+ else if (selectedValues.includes(i18n(other.OTHER))) {
+ selectedValues = [i18n(other.OTHER)];
+ }
+
+ this.setState({
+ otherInputDisabled: !selectedValues.includes(i18n(other.OTHER))
+ });
+ onEnumChange(selectedValues);
+ }
+
+ changedOtherInput() {
+ let {onOtherChange} = this.props;
+ onOtherChange(this.refs._otherValue.value);
+ }
+
+ componentDidUpdate() {
+ let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props;
+ if (this.oldProps.otherValue !== otherValue
+ || this.oldProps.selectedEnum !== selectedEnum
+ || this.oldProps.multiSelectedEnum !== multiSelectedEnum) {
+ this.oldProps = {
+ otherValue,
+ selectedEnum,
+ multiSelectedEnum
+ };
+ onInputChange();
+ }
+ }
+
+ static getTitleByName(values, name) {
+ for (let key of Object.keys(values)) {
+ let option = values[key].find(option => option.enum === name);
+ if (option) {
+ return option.title;
+ }
+ }
+ return name;
+ }
+
+}
+
+export default InputOptions;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
new file mode 100644
index 0000000000..a87c8d6f40
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
@@ -0,0 +1,40 @@
+/**
+ * Holds the buttons for save/reset for forms.
+ * Used by the ValidationForm that changes the state of the buttons according to its own state.
+ *
+ * properties:
+ * labledButtons - whether or not to use labeled buttons or icons only
+ */
+import React from 'react';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import Button from 'react-bootstrap/lib/Button.js';
+import FontAwesome from 'react-fontawesome';
+
+class ValidationButtons extends React.Component {
+
+ static propTypes = {
+ labledButtons: React.PropTypes.bool.isRequired,
+ isReadOnlyMode: React.PropTypes.bool
+ };
+
+ state = {
+ isValid: this.props.formValid
+ };
+
+ render() {
+ var submitBtn = this.props.labledButtons ? i18n('Save') : <FontAwesome className='check' name='check'/>;
+ var closeBtn = this.props.labledButtons ? i18n('Cancel') : <FontAwesome 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>
+ </div>
+ : <Button type='reset'>{i18n('Close')}</Button>
+ }
+ </div>
+ );
+ }
+}
+export default ValidationButtons;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationForm.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationForm.jsx
new file mode 100644
index 0000000000..098ccf1fd4
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationForm.jsx
@@ -0,0 +1,200 @@
+/**
+ * ValidationForm should be used in order to have a form that handles it's internal validation state.
+ * All ValidationInputs inside the form are checked for validity and the styling and submit buttons
+ * are updated accordingly.
+ *
+ * The properties that ahould be given to the form:
+ * labledButtons - whether or not use icons only as the form default buttons or use buttons with labels
+ * onSubmit - function for click on the submit button
+ * onReset - function for click on the reset button
+ */
+import React from 'react';
+import JSONSchema from 'nfvo-utils/json/JSONSchema.js';
+import JSONPointer from 'nfvo-utils/json/JSONPointer.js';
+import ValidationButtons from './ValidationButtons.jsx';
+
+class ValidationForm extends React.Component {
+
+ static childContextTypes = {
+ validationParent: React.PropTypes.any,
+ isReadOnlyMode: React.PropTypes.bool,
+ validationSchema: React.PropTypes.instanceOf(JSONSchema),
+ validationData: React.PropTypes.object
+ };
+
+ static defaultProps = {
+ hasButtons : true,
+ onSubmit : null,
+ onReset : null,
+ labledButtons: true,
+ onValidChange : null,
+ isValid: true
+ };
+
+ static propTypes = {
+ isValid : React.PropTypes.bool,
+ isReadOnlyMode : React.PropTypes.bool,
+ hasButtons : React.PropTypes.bool,
+ onSubmit : React.PropTypes.func,
+ onReset : React.PropTypes.func,
+ labledButtons: React.PropTypes.bool,
+ onValidChange : React.PropTypes.func,
+ onValidityChanged: React.PropTypes.func,
+ schema: React.PropTypes.object,
+ data: React.PropTypes.object
+ };
+
+ state = {
+ isValid: this.props.isValid
+ };
+
+ constructor(props) {
+ super(props);
+ this.validationComponents = [];
+ }
+
+ componentWillMount() {
+ let {schema, data} = this.props;
+ if (schema) {
+ this.processSchema(schema, data);
+ }
+ }
+
+ componentWillReceiveProps(nextProps) {
+ let {schema, data} = this.props;
+ let {schema: nextSchema, data: nextData} = nextProps;
+
+ if (schema !== nextSchema || data !== nextData) {
+ if (!schema || !nextSchema) {
+ throw new Error('ValidationForm: dynamically adding/removing schema is not supported');
+ }
+
+ if (schema !== nextSchema) {
+ this.processSchema(nextSchema, nextData);
+ } else {
+ this.setState({data: nextData});
+ }
+ }
+ }
+
+ processSchema(rawSchema, rawData) {
+ let schema = new JSONSchema();
+ schema.setSchema(rawSchema);
+ let data = schema.processData(rawData);
+ this.setState({
+ schema,
+ data
+ });
+ }
+
+ render() {
+ // eslint-disable-next-line no-unused-vars
+ let {isValid, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, schema, data, children, ...formProps} = this.props;
+ return (
+ <form {...formProps} onSubmit={event => this.handleFormSubmit(event)}>
+ <div className='validation-form-content'>{children}</div>
+ {hasButtons && <ValidationButtons labledButtons={labledButtons} ref='buttons' isReadOnlyMode={isReadOnlyMode}/>}
+ </form>
+ );
+ }
+
+ handleFormSubmit(event) {
+ event.preventDefault();
+ let isFormValid = true;
+ this.validationComponents.forEach(validationComponent => {
+ const isInputValid = validationComponent.validate().isValid;
+ isFormValid = isInputValid && isFormValid;
+ });
+ if(isFormValid && this.props.onSubmit) {
+ return this.props.onSubmit(event);
+ } else if(!isFormValid) {
+ this.setState({isValid: false});
+ }
+ }
+
+ componentWillUpdate(nextProps, nextState) {
+ if(this.state.isValid !== nextState.isValid && this.props.onValidityChanged) {
+ this.props.onValidityChanged(nextState.isValid);
+ }
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ // only handling this programatically if the validation of the form is done outside of the view
+ // (example with a form that is dependent on the state of other forms)
+ if (prevProps.isValid !== this.props.isValid) {
+ if (this.props.hasButtons) {
+ this.refs.buttons.setState({isValid: this.state.isValid});
+ }
+ } else if(this.state.isValid !== prevState.isValid) {
+ if (this.props.hasButtons) {
+ this.refs.buttons.setState({isValid: this.state.isValid});
+ }
+ // callback in case form is part of bigger picture in view
+ if (this.props.onValidChange) {
+ this.props.onValidChange(this.state.isValid);
+ }
+ }
+ }
+
+ componentDidMount() {
+ if (this.props.hasButtons) {
+ this.refs.buttons.setState({isValid: this.state.isValid});
+ }
+ }
+
+
+ getChildContext() {
+ return {
+ validationParent: this,
+ isReadOnlyMode: this.props.isReadOnlyMode,
+ validationSchema: this.state.schema,
+ validationData: this.state.data
+ };
+ }
+
+
+ /***
+ * Used by ValidationInput in order to let the (parent) form know
+ * the valid state. If there is a change in the state of the form,
+ * the buttons will be updated.
+ *
+ * @param validationComponent
+ * @param isValid
+ */
+ childValidStateChanged(validationComponent, isValid) {
+ if (isValid !== this.state.isValid) {
+ let oldState = this.state.isValid;
+ let newState = isValid && this.validationComponents.filter(otherValidationComponent => validationComponent !== otherValidationComponent).every(otherValidationComponent => {
+ return otherValidationComponent.isValid();
+ });
+
+ if (oldState !== newState) {
+ this.setState({isValid: newState});
+ }
+ }
+ }
+
+ register(validationComponent) {
+ if (this.state.schema) {
+ // TODO: register
+ } else {
+ this.validationComponents.push(validationComponent);
+ }
+ }
+
+ unregister(validationComponent) {
+ this.childValidStateChanged(validationComponent, true);
+ this.validationComponents = this.validationComponents.filter(otherValidationComponent => validationComponent !== otherValidationComponent);
+ }
+
+ onValueChanged(pointer, value, isValid, error) {
+ this.props.onDataChanged({
+ data: JSONPointer.setValue(this.props.data, pointer, value),
+ isValid,
+ error
+ });
+ }
+}
+
+
+export default ValidationForm;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationInput.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationInput.jsx
new file mode 100644
index 0000000000..0f14307645
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationInput.jsx
@@ -0,0 +1,509 @@
+/**
+ * Used for inputs on a validation form.
+ * All properties will be passed on to the input element.
+ *
+ * The following properties can be set for OOB validations and callbacks:
+ - required: Boolean: Should be set to true if the input must have a value
+ - numeric: Boolean : Should be set to true id the input should be an integer
+ - onChange : Function : Will be called to validate the value if the default validations are not sufficient, should return a boolean value
+ indicating whether the value is valid
+ - didUpdateCallback :Function: Will be called after the state has been updated and the component has rerendered. This can be used if
+ there are dependencies between inputs in a form.
+ *
+ * The following properties of the state can be set to determine
+ * the state of the input from outside components:
+ - isValid : Boolean - whether the value is valid
+ - value : value for the input field,
+ - disabled : Boolean,
+ - required : Boolean - whether the input value must be filled out.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Validator from 'validator';
+import FormGroup from 'react-bootstrap/lib/FormGroup.js';
+import Input from 'react-bootstrap/lib/Input.js';
+import Overlay from 'react-bootstrap/lib/Overlay.js';
+import Tooltip from 'react-bootstrap/lib/Tooltip.js';
+import isEqual from 'lodash/isEqual.js';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import JSONSchema from 'nfvo-utils/json/JSONSchema.js';
+import JSONPointer from 'nfvo-utils/json/JSONPointer.js';
+
+
+import InputOptions from '../inputOptions/InputOptions.jsx';
+
+const globalValidationFunctions = {
+ required: value => value !== '',
+ maxLength: (value, length) => Validator.isLength(value, {max: length}),
+ minLength: (value, length) => Validator.isLength(value, {min: length}),
+ pattern: (value, pattern) => Validator.matches(value, pattern),
+ numeric: value => {
+ if (value === '') {
+ // to allow empty value which is not zero
+ return true;
+ }
+ return Validator.isNumeric(value);
+ },
+ maxValue: (value, maxValue) => value < maxValue,
+ minValue: (value, minValue) => value >= minValue,
+ alphanumeric: value => Validator.isAlphanumeric(value),
+ alphanumericWithSpaces: value => Validator.isAlphanumeric(value.replace(/ /g, '')),
+ validateName: value => Validator.isAlphanumeric(value.replace(/\s|\.|\_|\-/g, ''), 'en-US'),
+ validateVendorName: value => Validator.isAlphanumeric(value.replace(/[\x7F-\xFF]|\s/g, ''), 'en-US'),
+ freeEnglishText: value => Validator.isAlphanumeric(value.replace(/\s|\.|\_|\-|\,|\(|\)|\?/g, ''), 'en-US'),
+ email: value => Validator.isEmail(value),
+ ip: value => Validator.isIP(value),
+ url: value => Validator.isURL(value)
+};
+
+const globalValidationMessagingFunctions = {
+ required: () => i18n('Field is required'),
+ maxLength: (value, maxLength) => i18n('Field value has exceeded it\'s limit, {maxLength}. current length: {length}', {
+ length: value.length,
+ maxLength
+ }),
+ minLength: (value, minLength) => i18n('Field value should contain at least {minLength} characters.', {minLength}),
+ pattern: (value, pattern) => i18n('Field value should match the pattern: {pattern}.', {pattern}),
+ numeric: () => i18n('Field value should contain numbers only.'),
+ maxValue: (value, maxValue) => i18n('Field value should be less than: {maxValue}.', {maxValue}),
+ minValue: (value, minValue) => i18n('Field value should be at least: {minValue}.', {minValue}),
+ alphanumeric: () => i18n('Field value should contain letters or digits only.'),
+ alphanumericWithSpaces: () => i18n('Field value should contain letters, digits or spaces only.'),
+ validateName: ()=> i18n('Field value should contain English letters, digits , spaces, underscores, dashes and dots only.'),
+ validateVendorName: ()=> i18n('Field value should contain English letters digits and spaces only.'),
+ freeEnglishText: ()=> i18n('Field value should contain English letters, digits , spaces, underscores, dashes and dots only.'),
+ email: () => i18n('Field value should be a valid email address.'),
+ ip: () => i18n('Field value should be a valid ip address.'),
+ url: () => i18n('Field value should be a valid url address.'),
+ general: () => i18n('Field value is invalid.')
+};
+
+class ValidationInput extends React.Component {
+
+ static contextTypes = {
+ validationParent: React.PropTypes.any,
+ isReadOnlyMode: React.PropTypes.bool,
+ validationSchema: React.PropTypes.instanceOf(JSONSchema),
+ validationData: React.PropTypes.object
+ };
+
+ static defaultProps = {
+ onChange: null,
+ disabled: null,
+ didUpdateCallback: null,
+ validations: {},
+ value: ''
+ };
+
+ static propTypes = {
+ type: React.PropTypes.string.isRequired,
+ onChange: React.PropTypes.func,
+ disabled: React.PropTypes.bool,
+ didUpdateCallback: React.PropTypes.func,
+ validations: React.PropTypes.object,
+ isMultiSelect: React.PropTypes.bool,
+ onOtherChange: React.PropTypes.func,
+ pointer: React.PropTypes.string
+ };
+
+
+ state = {
+ isValid: true,
+ style: null,
+ value: this.props.value,
+ error: {},
+ previousErrorMessage: '',
+ wasInvalid: false,
+ validations: this.props.validations,
+ isMultiSelect: this.props.isMultiSelect
+ };
+
+ componentWillMount() {
+ if (this.context.validationSchema) {
+ let {validationSchema: schema, validationData: data} = this.context,
+ {pointer} = this.props;
+
+ if (!schema.exists(pointer)) {
+ console.error(`Field doesn't exists in the schema ${pointer}`);
+ }
+
+ let value = JSONPointer.getValue(data, pointer);
+ if (value === undefined) {
+ value = schema.getDefault(pointer);
+ if (value === undefined) {
+ value = '';
+ }
+ }
+ this.setState({value});
+
+ let enums = schema.getEnum(pointer);
+ if (enums) {
+ let values = enums.map(value => ({enum: value, title: value, groupName: pointer})),
+ isMultiSelect = schema.isArray(pointer);
+
+ if (!isMultiSelect && this.props.type !== 'radiogroup') {
+ values = [{enum: '', title: i18n('Select...')}, ...values];
+ }
+ if (isMultiSelect && Array.isArray(value) && value.length === 0) {
+ value = '';
+ }
+
+ this.setState({
+ isMultiSelect,
+ values,
+ onEnumChange: value => this.changedInputOptions(value),
+ value
+ });
+ }
+
+ this.setState({validations: this.extractValidationsFromSchema(schema, pointer, this.props)});
+ }
+ }
+
+ extractValidationsFromSchema(schema, pointer, props) {
+ /* props are here to get precedence over the scheme definitions */
+ let validations = {};
+
+ if (schema.isRequired(pointer)) {
+ validations.required = true;
+ }
+
+ if (schema.isNumber(pointer)) {
+ validations.numeric = true;
+
+ const maxValue = props.validations.maxValue || schema.getMaxValue(pointer);
+ if (maxValue !== undefined) {
+ validations.maxValue = maxValue;
+ }
+
+ const minValue = props.validations.minValue || schema.getMinValue(pointer);
+ if (minValue !== undefined) {
+ validations.minValue = minValue;
+ }
+ }
+
+
+ if (schema.isString(pointer)) {
+
+ const pattern = schema.getPattern(pointer);
+ if (pattern) {
+ validations.pattern = pattern;
+ }
+
+ const maxLength = schema.getMaxLength(pointer);
+ if (maxLength !== undefined) {
+ validations.maxLength = maxLength;
+ }
+
+ const minLength = schema.getMinLength(pointer);
+ if (minLength !== undefined) {
+ validations.minLength = minLength;
+ }
+ }
+
+ return validations;
+ }
+
+ componentWillReceiveProps({value: nextValue, validations: nextValidations, pointer: nextPointer}, nextContext) {
+ const {validations, value} = this.props;
+ const validationsChanged = !isEqual(validations, nextValidations);
+ if (nextContext.validationSchema) {
+ if (this.props.pointer !== nextPointer ||
+ this.context.validationData !== nextContext.validationData) {
+ let currentValue = JSONPointer.getValue(this.context.validationData, this.props.pointer),
+ nextValue = JSONPointer.getValue(nextContext.validationData, nextPointer);
+ if(nextValue === undefined) {
+ nextValue = '';
+ }
+ if (this.state.isMultiSelect && Array.isArray(nextValue) && nextValue.length === 0) {
+ nextValue = '';
+ }
+ if (currentValue !== nextValue) {
+ this.setState({value: nextValue});
+ }
+ if (validationsChanged) {
+ this.setState({
+ validations: this.extractValidationsFromSchema(nextContext.validationSchema, nextPointer, {validations: nextValidations})
+ });
+ }
+ }
+ } else {
+ if (validationsChanged) {
+ this.setState({validations: nextValidations});
+ }
+ if (this.state.wasInvalid && (value !== nextValue || validationsChanged)) {
+ this.validate(nextValue, nextValidations);
+ } else if (value !== nextValue) {
+ this.setState({value: nextValue});
+ }
+ }
+ }
+
+ shouldTypeBeNumberBySchemeDefinition(pointer) {
+ return this.context.validationSchema &&
+ this.context.validationSchema.isNumber(pointer);
+ }
+
+ hasEnum(pointer) {
+ return this.context.validationSchema &&
+ this.context.validationSchema.getEnum(pointer);
+ }
+
+ render() {
+ let {value, isMultiSelect, values, onEnumChange, style, isValid, validations} = this.state;
+ let {onOtherChange, type, pointer} = this.props;
+ if (this.shouldTypeBeNumberBySchemeDefinition(pointer) && !this.hasEnum(pointer)) {
+ type = 'number';
+ }
+ let props = {...this.props};
+
+ let groupClasses = this.props.groupClassName || '';
+ if (validations.required) {
+ groupClasses += ' required';
+ }
+ let isReadOnlyMode = this.context.isReadOnlyMode;
+
+ if (value === true && (type === 'checkbox' || type === 'radio')) {
+ props.checked = true;
+ }
+ return (
+ <div className='validation-input-wrapper'>
+ {
+ !isMultiSelect && !onOtherChange && type !== 'select' && type !== 'radiogroup'
+ && <Input
+ {...props}
+ type={type}
+ groupClassName={groupClasses}
+ ref={'_myInput'}
+ value={value}
+ disabled={isReadOnlyMode || Boolean(this.props.disabled)}
+ bsStyle={style}
+ onChange={() => this.changedInput()}
+ onBlur={() => this.blurInput()}>
+ {this.props.children}
+ </Input>
+ }
+ {
+ type === 'radiogroup'
+ && <FormGroup>
+ {
+ values.map(val =>
+ <Input disabled={isReadOnlyMode || Boolean(this.props.disabled)}
+ inline={true}
+ ref={'_myInput' + (typeof val.enum === 'string' ? val.enum.replace(/\W/g, '_') : val.enum)}
+ value={val.enum} checked={value === val.enum}
+ type='radio' label={val.title}
+ name={val.groupName}
+ onChange={() => this.changedInput()}/>
+ )
+ }
+ </FormGroup>
+ }
+ {
+ (isMultiSelect || onOtherChange || type === 'select')
+ && <InputOptions
+ onInputChange={() => this.changedInput()}
+ onBlur={() => this.blurInput()}
+ hasError={!isValid}
+ ref={'_myInput'}
+ isMultiSelect={isMultiSelect}
+ values={values}
+ onEnumChange={onEnumChange}
+ selectedEnum={value}
+ multiSelectedEnum={value}
+ {...props} />
+ }
+ {this.renderOverlay()}
+ </div>
+ );
+ }
+
+ renderOverlay() {
+ let position = 'right';
+ if (this.props.type === 'text'
+ || this.props.type === 'email'
+ || this.props.type === 'number'
+ || this.props.type === 'password'
+
+ ) {
+ position = 'bottom';
+ }
+
+ let validationMessage = this.state.error.message || this.state.previousErrorMessage;
+ return (
+ <Overlay
+ show={!this.state.isValid}
+ placement={position}
+ target={() => {
+ let target = ReactDOM.findDOMNode(this.refs._myInput);
+ return target.offsetParent ? target : undefined;
+ }}
+ container={this}>
+ <Tooltip
+ id={`error-${validationMessage.replace(' ', '-')}`}
+ className='validation-error-message'>
+ {validationMessage}
+ </Tooltip>
+ </Overlay>
+ );
+ }
+
+ componentDidMount() {
+ if (this.context.validationParent) {
+ this.context.validationParent.register(this);
+ }
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ if (this.context.validationParent) {
+ if (prevState.isValid !== this.state.isValid) {
+ this.context.validationParent.childValidStateChanged(this, this.state.isValid);
+ }
+ }
+ if (this.props.didUpdateCallback) {
+ this.props.didUpdateCallback();
+ }
+
+ }
+
+ componentWillUnmount() {
+ if (this.context.validationParent) {
+ this.context.validationParent.unregister(this);
+ }
+ }
+
+ isNumberInputElement() {
+ return this.props.type === 'number' || this.refs._myInput.props.type === 'number';
+ }
+
+ /***
+ * Adding same method as the actual input component
+ * @returns {*}
+ */
+ getValue() {
+ if (this.props.type === 'checkbox') {
+ return this.refs._myInput.getChecked();
+ }
+ if (this.props.type === 'radiogroup') {
+ for (let key in this.refs) { // finding the value of the radio button that was checked
+ if (this.refs[key].getChecked()) {
+ return this.refs[key].getValue();
+ }
+ }
+ }
+ if (this.isNumberInputElement()) {
+ return Number(this.refs._myInput.getValue());
+ }
+
+ return this.refs._myInput.getValue();
+ }
+
+ resetValue() {
+ this.setState({value: this.props.value});
+ }
+
+
+ /***
+ * internal method that validated the value. includes callback to the onChange method
+ * @param value
+ * @param validations - map containing validation id and the limitation describing the validation.
+ * @returns {object}
+ */
+ validateValue = (value, validations) => {
+ let {customValidationFunction} = validations;
+ let error = {};
+ let isValid = true;
+ for (let validation in validations) {
+ if ('customValidationFunction' !== validation) {
+ if (validations[validation]) {
+ if (!globalValidationFunctions[validation](value, validations[validation])) {
+ error.id = validation;
+ error.message = globalValidationMessagingFunctions[validation](value, validations[validation]);
+ isValid = false;
+ break;
+ }
+ }
+ } else {
+ let customValidationResult = customValidationFunction(value);
+
+ if (customValidationResult !== true) {
+ error.id = 'custom';
+ isValid = false;
+ if (typeof customValidationResult === 'string') {//custom validation error message supplied.
+ error.message = customValidationResult;
+ } else {
+ error.message = globalValidationMessagingFunctions.general();
+ }
+ break;
+ }
+
+
+ }
+ }
+
+ return {
+ isValid,
+ error
+ };
+ };
+
+ /***
+ * Internal method that handles the change event of the input. validates and updates the state.
+ */
+ changedInput() {
+
+ let {isValid, error} = this.state.wasInvalid ? this.validate() : this.state;
+ let onChange = this.props.onChange;
+ if (onChange) {
+ onChange(this.getValue(), isValid, error);
+ }
+ if (this.context.validationSchema) {
+ let value = this.getValue();
+ if (this.state.isMultiSelect && value === '') {
+ value = [];
+ }
+ if (this.shouldTypeBeNumberBySchemeDefinition(this.props.pointer)) {
+ value = Number(value);
+ }
+ this.context.validationParent.onValueChanged(this.props.pointer, value, isValid, error);
+ }
+ }
+
+ changedInputOptions(value) {
+ this.context.validationParent.onValueChanged(this.props.pointer, value, true);
+ }
+
+ blurInput() {
+ if (!this.state.wasInvalid) {
+ this.setState({wasInvalid: true});
+ }
+
+ let {isValid, error} = !this.state.wasInvalid ? this.validate() : this.state;
+ let onBlur = this.props.onBlur;
+ if (onBlur) {
+ onBlur(this.getValue(), isValid, error);
+ }
+ }
+
+ validate(value = this.getValue(), validations = this.state.validations) {
+ let validationStatus = this.validateValue(value, validations);
+ let {isValid, error} = validationStatus;
+ let _style = isValid ? null : 'error';
+ this.setState({
+ isValid,
+ error,
+ value,
+ previousErrorMessage: this.state.error.message || '',
+ style: _style,
+ wasInvalid: !isValid || this.state.wasInvalid
+ });
+
+ return validationStatus;
+ }
+
+ isValid() {
+ return this.state.isValid;
+ }
+
+}
+export default ValidationInput;
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationTab.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationTab.jsx
new file mode 100644
index 0000000000..6036518288
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationTab.jsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import Tab from 'react-bootstrap/lib/Tab.js';
+
+export default
+class ValidationTab extends React.Component {
+
+ static propTypes = {
+ children: React.PropTypes.node,
+ eventKey: React.PropTypes.any.isRequired,
+ onValidationStateChange: React.PropTypes.func //This property is assigned dynamically via React.cloneElement. lookup ValidationTabs.jsx. therefore it cannot be stated as required!
+ };
+
+ constructor(props) {
+ super(props);
+ this.validationComponents = [];
+ }
+
+ static childContextTypes = {
+ validationParent: React.PropTypes.any
+ };
+
+ static contextTypes = {
+ validationParent: React.PropTypes.any
+ };
+
+ getChildContext() {
+ return {validationParent: this};
+ }
+
+ state = {
+ isValid: true,
+ notifyParent: false
+ };
+
+ componentDidMount() {
+ let validationParent = this.context.validationParent;
+ if (validationParent) {
+ validationParent.register(this);
+ }
+ }
+
+ componentWillUnmount() {
+ let validationParent = this.context.validationParent;
+ if (validationParent) {
+ validationParent.unregister(this);
+ }
+ }
+
+ register(validationComponent) {
+ this.validationComponents.push(validationComponent);
+ }
+
+ unregister(validationComponent) {
+ this.childValidStateChanged(validationComponent, true);
+ this.validationComponents = this.validationComponents.filter(otherValidationComponent => validationComponent !== otherValidationComponent);
+ }
+
+ notifyValidStateChangedToParent(isValid) {
+
+ let validationParent = this.context.validationParent;
+ if (validationParent) {
+ validationParent.childValidStateChanged(this, isValid);
+ }
+ }
+
+ childValidStateChanged(validationComponent, isValid) {
+
+ const currentValidState = this.state.isValid;
+ if (isValid !== currentValidState) {
+ let filteredValidationComponents = this.validationComponents.filter(otherValidationComponent => validationComponent !== otherValidationComponent);
+ let newValidState = isValid && filteredValidationComponents.every(otherValidationComponent => {
+ return otherValidationComponent.isValid();
+ });
+ this.setState({isValid: newValidState, notifyParent: true});
+ }
+ }
+
+ validate() {
+ let isValid = true;
+ this.validationComponents.forEach(validationComponent => {
+ const isValidationComponentValid = validationComponent.validate().isValid;
+ isValid = isValidationComponentValid && isValid;
+ });
+ this.setState({isValid, notifyParent: false});
+ return {isValid};
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ if(prevState.isValid !== this.state.isValid) {
+ if(this.state.notifyParent) {
+ this.notifyValidStateChangedToParent(this.state.isValid);
+ }
+ this.props.onValidationStateChange(this.props.eventKey, this.state.isValid);
+ }
+ }
+
+ isValid() {
+ return this.state.isValid;
+ }
+
+ render() {
+ let {children, ...tabProps} = this.props;
+ return (
+ <Tab {...tabProps}>{children}</Tab>
+ );
+ }
+}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationTabs.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationTabs.jsx
new file mode 100644
index 0000000000..6eda4b9827
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationTabs.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Tabs from 'react-bootstrap/lib/Tabs.js';
+import Overlay from 'react-bootstrap/lib/Overlay.js';
+import Tooltip from 'react-bootstrap/lib/Tooltip.js';
+
+import i18n from 'nfvo-utils/i18n/i18n.js';
+
+export default
+class ValidationTab extends React.Component {
+
+ static propTypes = {
+ children: React.PropTypes.node
+ };
+
+ state = {
+ invalidTabs: []
+ };
+
+ cloneTab(element) {
+ const {invalidTabs} = this.state;
+ return React.cloneElement(
+ element,
+ {
+ key: element.props.eventKey,
+ tabClassName: invalidTabs.indexOf(element.props.eventKey) > -1 ? 'invalid-tab' : 'valid-tab',
+ onValidationStateChange: (eventKey, isValid) => this.validTabStateChanged(eventKey, isValid)
+ }
+ );
+ }
+
+ validTabStateChanged(eventKey, isValid) {
+ let {invalidTabs} = this.state;
+ let invalidTabIndex = invalidTabs.indexOf(eventKey);
+ if (isValid && invalidTabIndex > -1) {
+ this.setState({invalidTabs: invalidTabs.filter(otherEventKey => eventKey !== otherEventKey)});
+ } else if (!isValid && invalidTabIndex === -1) {
+ this.setState({invalidTabs: [...invalidTabs, eventKey]});
+ }
+ }
+
+ showTabsError() {
+ const {invalidTabs} = this.state;
+ return invalidTabs.length > 0 && (invalidTabs.length > 1 || invalidTabs[0] !== this.props.activeKey);
+ }
+
+ render() {
+ return (
+ <div>
+ <Tabs {...this.props} ref='tabsList'>
+ {this.props.children.map(element => this.cloneTab(element))}
+ </Tabs>
+ <Overlay
+ animation={false}
+ show={this.showTabsError()}
+ placement='bottom'
+ target={() => {
+ let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.active):nth-of-type(n)');
+ return target && target.offsetParent ? target : undefined;
+ }
+ }
+ container={this}>
+ <Tooltip
+ id='error-some-tabs-contain-errors'
+ className='validation-error-message'>
+ {i18n('One or more tabs are invalid')}
+ </Tooltip>
+ </Overlay>
+ </div>
+ );
+ }
+}
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
new file mode 100644
index 0000000000..e8d0fc2536
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import FontAwesome from 'react-fontawesome';
+import store from 'sdc-app/AppStore.js';
+import NotificationConstants from 'nfvo-components/notifications/NotificationConstants.js';
+
+class ListEditorItem extends React.Component {
+ static propTypes = {
+ onSelect: React.PropTypes.func,
+ onDelete: React.PropTypes.func,
+ onEdit: React.PropTypes.func,
+ children: React.PropTypes.node,
+ isReadOnlyMode: React.PropTypes.bool
+ }
+
+ render() {
+ let {onDelete, onSelect, onEdit, children, isReadOnlyMode} = this.props;
+ let isAbilityToDelete = isReadOnlyMode === undefined ? true : !isReadOnlyMode;
+ return (
+ <div className='list-editor-item-view'>
+ <div className='list-editor-item-view-content' onClick={onSelect}>
+ {children}
+ </div>
+ <div className='list-editor-item-view-controller'>
+ {onEdit && <FontAwesome name='sliders' onClick={() => this.onClickedItem(onEdit)}/>}
+ {onDelete && isAbilityToDelete && <FontAwesome name='trash-o' onClick={() => this.onClickedItem(onDelete)}/>}
+ </div>
+ </div>
+ );
+ }
+
+ onClickedItem(callBackFunc) {
+ if(typeof callBackFunc === 'function') {
+ let {isCheckedOut} = this.props;
+ if (isCheckedOut === false) {
+ store.dispatch({
+ type: NotificationConstants.NOTIFY_ERROR,
+ data: {title: 'Error', msg: 'This item is checkedin/submitted, Click Check Out to continue'}
+ });
+ }
+ else {
+ callBackFunc();
+ }
+ }
+ }
+}
+
+export default ListEditorItem;
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
new file mode 100644
index 0000000000..1ee91f31f6
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import FontAwesome from 'react-fontawesome';
+import Input from 'react-bootstrap/lib/Input.js';
+
+
+class ListEditorView extends React.Component {
+
+ static defaultProps = {
+ className: ''
+ };
+
+ static propTypes = {
+ title: React.PropTypes.string,
+ plusButtonTitle: React.PropTypes.string,
+ children: React.PropTypes.node,
+ filterValue: React.PropTypes.string,
+ onFilter: React.PropTypes.func,
+ className: React.PropTypes.string,
+ isReadOnlyMode: React.PropTypes.bool,
+ placeholder: React.PropTypes.string
+ };
+
+ render() {
+ let {title, plusButtonTitle, onAdd, children, filterValue, onFilter, className, placeholder, isReadOnlyMode} = this.props;
+ return (
+ <div className={`list-editor-view ${className}`}>
+ {title && onAdd && <div className='list-editor-view-title'>{title}</div>}
+ <div className='list-editor-view-actions'>
+ {title && !onAdd && <div className='list-editor-view-title-inline'>{title}</div>}
+ <div className={`list-editor-view-add-controller${isReadOnlyMode ? ' disabled' : ''}`} >
+ { onAdd &&
+ <div onClick={onAdd}>
+ <span className='plus-icon-button pull-left'/>
+ <span>{plusButtonTitle}</span>
+ </div>
+ }
+ </div>
+
+ {
+ onFilter &&
+ <div className='list-editor-view-search search-wrapper'>
+ <Input
+ ref='filter'
+ type='text'
+ value={filterValue}
+ name='list-editor-view-search'
+ placeholder={placeholder}
+ groupClassName='search-input-control'
+ onChange={() => onFilter(this.refs.filter.getValue())}/>
+ <FontAwesome name='filter' className='filter-icon'/>
+ </div>
+ }
+ </div>
+ <div className='list-editor-view-list-scroller'>
+ <div className='list-editor-view-list'>
+ {children}
+ </div>
+ </div>
+ </div>
+ );
+ }
+
+}
+export default ListEditorView;
diff --git a/openecomp-ui/src/nfvo-components/loader/Loader.jsx b/openecomp-ui/src/nfvo-components/loader/Loader.jsx
new file mode 100644
index 0000000000..cc1ffdb2b3
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/loader/Loader.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+const mapStateToProps = ({loader}) => {
+ return {
+ isLoading: loader.isLoading
+ };
+};
+
+class Loader extends React.Component {
+
+ static propTypes = {
+ isLoading: React.PropTypes.bool.isRequired
+ };
+
+ static defaultProps = {
+ isLoading: false
+ };
+
+ render() {
+ let {isLoading} = this.props;
+
+ return (
+ <div className='onboarding-loader'>
+ {
+ isLoading && <div className='onboarding-loader-backdrop'>
+ <div className='tlv-loader large'></div>
+ </div>
+ }
+ </div>
+ );
+ }
+}
+
+export default connect(mapStateToProps) (Loader);
diff --git a/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js b/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js
new file mode 100644
index 0000000000..e8e4953eb9
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js
@@ -0,0 +1,26 @@
+/*-
+ * ============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
+ *
+ * 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=========================================================
+ */
+
+import keyMirror from 'nfvo-utils/KeyMirror.js';
+
+export const actionTypes = keyMirror({
+ SHOW: null,
+ HIDE: null
+});
diff --git a/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js b/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js
new file mode 100644
index 0000000000..582eff330d
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js
@@ -0,0 +1,32 @@
+/*-
+ * ============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
+ *
+ * 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=========================================================
+ */
+
+import {actionTypes} from './LoaderConstants.js';
+
+export default (state = {}, action) => {
+ switch (action.type) {
+ case actionTypes.SHOW:
+ return {isLoading: true};
+ case actionTypes.HIDE:
+ return {isLoading: false};
+ default:
+ return state;
+ }
+};
diff --git a/openecomp-ui/src/nfvo-components/modal/Modal.jsx b/openecomp-ui/src/nfvo-components/modal/Modal.jsx
new file mode 100644
index 0000000000..be4963ef65
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/modal/Modal.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import BootstrapModal from 'react-bootstrap/lib/Modal.js';
+
+let nextModalId = 0;
+
+export default class Modal extends React.Component {
+
+ static Header = BootstrapModal.Header;
+
+ static Title = BootstrapModal.Title;
+
+ static Footer = BootstrapModal.Footer;
+
+ static Body = class ModalBody extends React.Component {
+
+ render() {
+ let {children, ...props} = this.props;
+ return (
+ <BootstrapModal.Body {...props}>
+ {children}
+ </BootstrapModal.Body>
+ );
+ }
+
+ componentDidMount() {
+ let element = ReactDOM.findDOMNode(this);
+ element.addEventListener('click', event => {
+ if (event.target.tagName === 'A') {
+ event.preventDefault();
+ }
+ });
+ ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
+ element.addEventListener(eventType, event => event.stopPropagation())
+ );
+ }
+ };
+
+ componentWillMount() {
+ this.modalId = `dox-ui-modal-${nextModalId++}`;
+ }
+
+ componentDidMount() {
+ this.ensureRootClass();
+ }
+
+ componentDidUpdate() {
+ this.ensureRootClass();
+ }
+
+ ensureRootClass() {
+ let element = document.getElementById(this.modalId);
+ while(element && !element.hasAttribute('data-reactroot')) {
+ element = element.parentElement;
+ }
+ if (element && !element.classList.contains('dox-ui')) {
+ element.classList.add('dox-ui');
+ }
+ }
+
+ render() {
+ let {children, ...props} = this.props;
+ return (
+ <BootstrapModal {...props} id={this.modalId}>
+ {children}
+ </BootstrapModal>
+ );
+ }
+}
diff --git a/openecomp-ui/src/nfvo-components/notifications/NotificationConstants.js b/openecomp-ui/src/nfvo-components/notifications/NotificationConstants.js
new file mode 100644
index 0000000000..1a53f4c135
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/notifications/NotificationConstants.js
@@ -0,0 +1,29 @@
+/*-
+ * ============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
+ *
+ * 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=========================================================
+ */
+
+import keyMirror from 'nfvo-utils/KeyMirror.js';
+
+export default keyMirror({
+ NOTIFY_ERROR: null,
+ NOTIFY_SUCCESS: null,
+ NOTIFY_WARNING: null,
+ NOTIFY_INFO: null,
+ NOTIFY_CLOSE: null
+});
diff --git a/openecomp-ui/src/nfvo-components/notifications/NotificationModal.jsx b/openecomp-ui/src/nfvo-components/notifications/NotificationModal.jsx
new file mode 100644
index 0000000000..71793097fb
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/notifications/NotificationModal.jsx
@@ -0,0 +1,100 @@
+/**
+ * NotificationModal options:
+ *
+ * show: whether to show notification or not,
+ * type: the type of the notification. valid values are: 'default', 'error', 'warning', 'success'
+ * msg: the notification content. could be a string or node (React component)
+ * title: the notification title
+ * timeout: timeout for the notification to fade out. if timeout == 0 then the notification is rendered until the user closes it
+ *
+ */
+import React, {Component, PropTypes} from 'react';
+import {connect} from 'react-redux';
+import Button from 'react-bootstrap/lib/Button.js';
+
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import Modal from 'nfvo-components/modal/Modal.jsx';
+import SubmitErrorResponse from 'nfvo-components/SubmitErrorResponse.jsx';
+import NotificationConstants from './NotificationConstants.js';
+
+let typeClass = {
+ 'default': 'primary',
+ error: 'danger',
+ warning: 'warning',
+ success: 'success'
+};
+
+const mapActionsToProps = (dispatch) => {
+ return {onCloseClick: () => dispatch({type: NotificationConstants.NOTIFY_CLOSE})};
+};
+
+const mapStateToProps = ({notification}) => {
+
+ let show = notification !== null && notification.title !== 'Conflict';
+ let mapResult = {show};
+ if (show) {
+ mapResult = {show, ...notification};
+ }
+
+ return mapResult;
+};
+
+export class NotificationModal extends Component {
+
+ static propTypes = {
+ show: PropTypes.bool,
+ type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
+ title: PropTypes.string,
+ msg: PropTypes.node,
+ validationResponse: PropTypes.object,
+ timeout: PropTypes.number
+ };
+
+ static defaultProps = {
+ show: false,
+ type: 'default',
+ title: '',
+ msg: '',
+ timeout: 0
+ };
+
+ state = {type: undefined};
+
+ componentWillReceiveProps(nextProps) {
+ if (this.props.show !== nextProps.show && nextProps.show === false) {
+ this.setState({type: this.props.type});
+ }
+ else {
+ this.setState({type: undefined});
+ }
+ }
+
+ componentDidUpdate() {
+ if (this.props.timeout) {
+ setTimeout(this.props.onCloseClick, this.props.timeout);
+ }
+ }
+
+ render() {
+ let {title, type, msg, show, validationResponse, onCloseClick} = this.props;
+ if (!show) {
+ type = this.state.type;
+ }
+ if (validationResponse) {
+ msg = (<SubmitErrorResponse validationResponse={validationResponse}/>);
+ }
+ return (
+ <Modal show={show} className={`notification-modal ${typeClass[type]}`}>
+ <Modal.Header>
+ <Modal.Title>{title}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>{msg}</Modal.Body>
+ <Modal.Footer>
+ <Button bsStyle={typeClass[type]} onClick={onCloseClick}>{i18n('OK')}</Button>
+ </Modal.Footer>
+ </Modal>
+ );
+ }
+}
+
+export default connect(mapStateToProps, mapActionsToProps)(NotificationModal);
diff --git a/openecomp-ui/src/nfvo-components/notifications/NotificationReducer.js b/openecomp-ui/src/nfvo-components/notifications/NotificationReducer.js
new file mode 100644
index 0000000000..c8b30d6e50
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/notifications/NotificationReducer.js
@@ -0,0 +1,51 @@
+/*-
+ * ============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
+ *
+ * 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=========================================================
+ */
+
+import NotificationConstants from './NotificationConstants.js';
+
+export default (state = null, action) => {
+ switch (action.type) {
+ case NotificationConstants.NOTIFY_INFO:
+ return {type: 'default', title: action.data.title, msg: action.data.msg, timeout: action.data.timeout};
+
+ case NotificationConstants.NOTIFY_ERROR:
+ return {
+ type: 'error',
+ title: action.data.title,
+ msg: action.data.msg,
+ validationResponse: action.data.validationResponse,
+ timeout: action.data.timeout
+ };
+
+ case NotificationConstants.NOTIFY_WARNING:
+ return {type: 'warning', title: action.data.title, msg: action.data.msg, timeout: action.data.timeout};
+
+ case NotificationConstants.NOTIFY_SUCCESS:
+ return {
+ type: 'success', title: action.data.title, msg: action.data.msg, timeout: action.data.timeout
+ };
+ case NotificationConstants.NOTIFY_CLOSE:
+ return null;
+
+ default:
+ return state;
+ }
+
+};
diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
new file mode 100644
index 0000000000..feb0f813ea
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import classnames from 'classnames';
+import Collapse from 'react-bootstrap/lib/Collapse.js';
+
+class NavigationSideBar extends React.Component {
+
+ static PropTypes = {
+ activeItemId: React.PropTypes.string.isRequired,
+ onSelect: React.PropTypes.func,
+ onToggle: React.PropTypes.func,
+ groups: React.PropTypes.array
+ };
+
+ render() {
+ let {groups, activeItemId} = this.props;
+
+ return (
+ <div className='navigation-side-content'>
+ {groups.map(group => (
+ <div className='navigation-group' key={group.id}>
+ <div className='group-name'>{group.name}</div>
+ <div className='navigation-group-items'>
+ {
+ group.items && group.items.map(item => this.renderGroupItem(item, activeItemId))
+ }
+ </div>
+ </div>
+ ))}
+ </div>
+ );
+ }
+
+ renderGroupItem(item, activeItemId) {
+ let isGroup = item.items && item.items.length > 0;
+ return (
+ <div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})}>
+ <div
+ key={item.id}
+ className={classnames('navigation-group-item-name', {
+ 'selected': item.id === activeItemId,
+ 'disabled': item.disabled,
+ 'bold-name': item.expanded,
+ 'hidden': item.hidden
+ })}
+ onClick={(event) => this.handleItemClicked(event, item)}>
+ {item.name}
+ </div>
+ {isGroup &&
+ <Collapse in={item.expanded}>
+ <div>
+ {item.items.map(item => this.renderGroupItem(item, activeItemId))}
+ </div>
+ </Collapse>
+ }
+ </div>
+ );
+ }
+
+ handleItemClicked(event, item) {
+ event.stopPropagation();
+ if(this.props.onToggle) {
+ this.props.onToggle(this.props.groups, item.id);
+ }
+ if(item.onSelect) {
+ item.onSelect();
+ }
+ if(this.props.onSelect) {
+ this.props.onSelect(item);
+ }
+ }
+}
+
+export default NavigationSideBar;
diff --git a/openecomp-ui/src/nfvo-components/panel/SlidePanel.jsx b/openecomp-ui/src/nfvo-components/panel/SlidePanel.jsx
new file mode 100644
index 0000000000..10c5326300
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/panel/SlidePanel.jsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import FontAwesome from 'react-fontawesome';
+import ReactDOM from 'react-dom';
+
+class SlidePanel extends React.Component {
+
+ static PropTypes = {
+ direction: React.PropTypes.string.isRequired,
+ className: React.PropTypes.string,
+ title: React.PropTypes.string,
+ isOpen: React.PropTypes.bool
+ };
+
+ static defaultProps = {
+ title: '',
+ className: '',
+ isOpen: true
+ };
+
+ state = {
+ isOpen: this.props.isOpen,
+ direction: this.props.direction,
+ width: 0,
+ arrowWidth: 0
+ };
+
+ componentDidMount() {
+ this.setSliderPosition();
+ }
+
+ componentDidUpdate() {
+ this.setSliderPosition();
+ }
+
+ render() {
+
+ let {children, className} = this.props;
+ let {isOpen} = this.state;
+
+ return (
+ <div className={ `slide-panel ${className}`}>
+ {this.renderHeader(isOpen)}
+ <div className={'slide-panel-content ' + (isOpen ? 'opened' : 'closed')}>{children}</div>
+ </div>
+ );
+ }
+
+ renderHeader(isOpen) {
+ let {direction: initialDirection, title} = this.props;
+ let {direction: currentDirection} = this.state;
+
+ let iconName = currentDirection === 'right' ? 'angle-double-right collapse-double-icon' : 'angle-double-left collapse-double-icon';
+
+ let awestyle = {padding: '5px'};
+
+ if (!isOpen && initialDirection === 'right') {
+ awestyle.marginLeft = '-1px';
+ }
+ return (
+ <div className='slide-panel-header'>
+ { initialDirection === 'left' && <span className='slide-panel-header-title'>{title}</span>}
+ <FontAwesome
+ ref='arrowIcon'
+ style={awestyle}
+ onClick={this.handleClick}
+ className='pull-right'
+ name={iconName}
+ size='2x'/>
+ { initialDirection === 'right' && <span className='slide-panel-header-title'>{title}</span>}
+ </div>
+ );
+ }
+
+ handleClick = () => {
+ this.setState({
+ isOpen: !this.state.isOpen,
+ direction: this.state.direction === 'left' ? 'right' : 'left'
+ });
+ }
+
+ setSliderPosition = () => {
+
+ let el = ReactDOM.findDOMNode(this);
+ let {style} = el;
+
+ let {direction: initialDirection} = this.props;
+ let arrowIconSize = Math.floor(ReactDOM.findDOMNode(this.refs.arrowIcon).getBoundingClientRect().width) * 2;
+ if (!this.state.isOpen) {
+ if (this.props.direction === 'left') {
+ style.left = arrowIconSize - el.getBoundingClientRect().width + 'px';
+ }
+ if (initialDirection === 'right') {
+ style.right = arrowIconSize - el.getBoundingClientRect().width + 'px';
+ }
+ }
+ else {
+ if (initialDirection === 'left') {
+ style.left = '0px';
+ }
+
+ if (this.props.direction === 'right') {
+ style.right = '0px';
+ }
+ }
+ }
+
+}
+
+export default SlidePanel; \ No newline at end of file
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
new file mode 100644
index 0000000000..78525f84c6
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
@@ -0,0 +1,165 @@
+import React from 'react';
+import classnames from 'classnames';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+
+import Navbar from 'react-bootstrap/lib/Navbar.js';
+import Nav from 'react-bootstrap/lib/Nav.js';
+import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
+import {actionsEnum, statusEnum} from './VersionControllerConstants.js';
+
+
+class VersionController extends React.Component {
+
+ static propTypes = {
+ version: React.PropTypes.string,
+ viewableVersions: React.PropTypes.array,
+ onVersionSwitching: React.PropTypes.func,
+ isCheckedOut: React.PropTypes.bool.isRequired,
+ status: React.PropTypes.string.isRequired,
+ callVCAction: React.PropTypes.func,
+ onSave: React.PropTypes.func,
+ onClose: React.PropTypes.func,
+ isFormDataValid: React.PropTypes.bool
+ };
+
+ render() {
+ let {status, isCheckedOut, version = '', viewableVersions = [], onVersionSwitching, callVCAction, onSave, isFormDataValid, onClose} = this.props;
+ let isCheckedIn = Boolean(status === statusEnum.CHECK_IN_STATUS);
+ let isLatestVersion = Boolean(version === viewableVersions[viewableVersions.length - 1]);
+ if (!isLatestVersion) {
+ status = statusEnum.PREVIOUS_VERSION;
+ }
+
+ return (
+ <div className='version-controller-bar'>
+ <Navbar inverse className='navbar'>
+ <Navbar.Collapse>
+ <Nav className='items-in-left'>
+ <div className='version-section'>
+ <ValidationInput
+ type='select'
+ selectedEnum={version}
+ onEnumChange={value => onVersionSwitching && onVersionSwitching(value)}>
+ {viewableVersions && viewableVersions.map(viewVersion => {
+ return (
+ <option key={viewVersion} value={viewVersion}>{`V ${viewVersion}`}</option>
+ );
+ })
+ }
+ {!viewableVersions.includes(version) &&
+ <option key={version} value={version}>{`V ${version}`}</option>}
+ </ValidationInput>
+ </div>
+ <div className='vc-status'>
+ <div className='onboarding-status-icon'></div>
+ <div className='status-text'> {i18n('ONBOARDING')}
+ <div className='status-text-dash'> -</div>
+ </div>
+ {this.renderStatus(status)}
+ </div>
+ </Nav>
+ <Nav pullRight>
+ <div className='items-in-right'>
+ <div className='action-buttons'>
+ {callVCAction &&
+ <div className='version-control-buttons'>
+ <div
+ className={classnames('vc-nav-item-button button-submit', {'disabled': !isCheckedIn || !isLatestVersion})}
+ onClick={() => this.submit(callVCAction)}>
+ {i18n('Submit')}
+ </div>
+ <div
+ className={classnames('vc-nav-item-button button-checkin-checkout', {'disabled': status === statusEnum.LOCK_STATUS || !isLatestVersion})}
+ onClick={() => this.checkinCheckoutVersion(callVCAction)}>
+ {`${isCheckedOut ? i18n('Check In') : i18n('Check Out')}`}
+ </div>
+ <div
+ className={classnames('sprite-new revert-btn ng-scope ng-isolate-scope', {'disabled': !isCheckedOut || version === '0.1' || !isLatestVersion})}
+ onClick={() => this.revertCheckout(callVCAction)}>
+ </div>
+ </div>
+ }
+ {onSave &&
+ <div
+ className={classnames('sprite-new save-btn ng-scope ng-isolate-scope', {'disabled': !isCheckedOut || !isFormDataValid || !isLatestVersion})}
+ onClick={() => onSave()}>
+ </div>
+ }
+ </div>
+ <div className='vc-nav-item-close' onClick={() => onClose && onClose()}> X</div>
+ </div>
+ </Nav>
+ </Navbar.Collapse>
+ </Navbar>
+ </div>
+ );
+ }
+
+ renderStatus(status) {
+ switch (status) {
+ case statusEnum.CHECK_OUT_STATUS:
+ return (
+ <div className='checkout-status-icon'>
+ <div className='catalog-tile-check-in-status sprite-new checkout-editable-status-icon'></div>
+ <div className='status-text'> {i18n('CHECKED OUT')} </div>
+ </div>
+ );
+ case statusEnum.LOCK_STATUS:
+ return (
+ <div className='status-text'> {i18n('LOCKED')} </div>
+ );
+ case statusEnum.CHECK_IN_STATUS:
+ return (
+ <div className='status-text'> {i18n('CHECKED IN')} </div>
+ );
+ case statusEnum.SUBMIT_STATUS:
+ return (
+ <div className='status-text'> {i18n('SUBMITTED')} </div>
+ );
+ default:
+ return (
+ <div className='status-text'> {i18n(status)} </div>
+ );
+ }
+ }
+
+ checkinCheckoutVersion(callVCAction) {
+ if (this.props.isCheckedOut) {
+ this.checkin(callVCAction);
+ }
+ else {
+ this.checkout(callVCAction);
+ }
+ }
+
+ checkin(callVCAction) {
+
+ const action = actionsEnum.CHECK_IN;
+
+ if (this.props.onSave) {
+ this.props.onSave().then(()=>{
+ callVCAction(action);
+ });
+ }else{
+ callVCAction(action);
+ }
+
+ }
+
+ checkout(callVCAction) {
+ const action = actionsEnum.CHECK_OUT;
+ callVCAction(action);
+ }
+
+ submit(callVCAction) {
+ const action = actionsEnum.SUBMIT;
+ callVCAction(action);
+ }
+
+ revertCheckout(callVCAction) {
+ const action = actionsEnum.UNDO_CHECK_OUT;
+ callVCAction(action);
+ }
+}
+
+export default VersionController;
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js
new file mode 100644
index 0000000000..9251fd12c4
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js
@@ -0,0 +1,38 @@
+/*-
+ * ============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
+ *
+ * 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=========================================================
+ */
+
+import keyMirror from 'nfvo-utils/KeyMirror.js';
+
+export const actionsEnum = keyMirror({
+ CHECK_IN: 'Checkin',
+ CHECK_OUT: 'Checkout',
+ UNDO_CHECK_OUT: 'Undo_Checkout',
+ SUBMIT: 'Submit',
+ CREATE_PACKAGE: 'Create_Package'
+});
+
+export const statusEnum = keyMirror({
+ CHECK_OUT_STATUS: 'Locked',
+ CHECK_IN_STATUS: 'Available',
+ SUBMIT_STATUS: 'Final',
+ LOCK_STATUS: 'LockedByUser',
+ PREVIOUS_VERSION: 'READ ONLY'
+});
+
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerUtils.js b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerUtils.js
new file mode 100644
index 0000000000..de9914454c
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerUtils.js
@@ -0,0 +1,49 @@
+/*-
+ * ============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
+ *
+ * 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=========================================================
+ */
+
+import Configuration from 'sdc-app/config/Configuration.js';
+import {statusEnum} from './VersionControllerConstants.js';
+
+
+const VersionControllerUtils = {
+
+ getCheckOutStatusKindByUserID(status, lockingUser) {
+ let currentLoginUserID = Configuration.get('ATTUserID');
+ let isCheckedOut = currentLoginUserID === lockingUser;
+
+ return {
+ status: isCheckedOut ? status : statusEnum.LOCK_STATUS,
+ isCheckedOut
+ };
+ },
+
+ isCheckedOutByCurrentUser(resource) {
+ let currentLoginUserID = Configuration.get('ATTUserID');
+ return resource.lockingUser !== undefined && resource.lockingUser === currentLoginUserID;
+ },
+
+ isReadOnly(resource) {
+ const {version, viewableVersions = []} = resource;
+ const latestVersion = viewableVersions[viewableVersions.length - 1];
+ return version !== latestVersion || !VersionControllerUtils.isCheckedOutByCurrentUser(resource);
+ }
+};
+
+export default VersionControllerUtils;
diff --git a/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx b/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx
new file mode 100644
index 0000000000..d786aeef8b
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+class ProgressBar extends React.Component {
+ static propTypes = {
+ label: React.PropTypes.string,
+ now: React.PropTypes.string.isRequired
+ }
+ render() {
+ let {label, now} = this.props;
+
+ return(
+ <div className='progress-bar-view'>
+ <div className='progress-bar-outside'>
+ <div style={{width: now + '%'}} className='progress-bar-inside'></div>
+ </div>
+ <div className='progress-bar-view-label'>{label}</div>
+ </div>
+ );
+ }
+}
+
+export default ProgressBar;