From b8e2faf476202b6ffe61bc3a9a37df1304881d40 Mon Sep 17 00:00:00 2001 From: Avi Ziv Date: Tue, 18 Jul 2017 19:45:38 +0300 Subject: [SDC] Onboarding 1710 rebase. Change-Id: If3b6b81d221fde13908f1e8160db6f7d9433c535 Signed-off-by: Avi Ziv --- .../src/nfvo-components/SubmitErrorResponse.jsx | 4 +- .../nfvo-components/activity-log/ActivityLog.js | 27 ----- .../activity-log/ActivityLogActionHelper.js | 31 ------ .../activity-log/ActivityLogConstants.js | 23 ---- .../activity-log/ActivityLogReducer.js | 25 ----- .../activity-log/ActivityLogView.jsx | 124 --------------------- .../src/nfvo-components/datepicker/Datepicker.jsx | 75 +++++++++++++ .../src/nfvo-components/grid/GridSection.jsx | 5 +- openecomp-ui/src/nfvo-components/icon/SVGIcon.jsx | 54 --------- .../src/nfvo-components/icon/SVGIcon.stories.js | 50 --------- .../src/nfvo-components/input/ExpandableInput.jsx | 7 +- .../input/dualListbox/DualListboxView.jsx | 10 +- .../src/nfvo-components/input/validation/Form.jsx | 17 ++- .../src/nfvo-components/input/validation/Input.jsx | 44 +++++++- .../input/validation/InputWrapper.jsx | 1 + .../input/validation/ValidationButtons.jsx | 18 +-- .../listEditor/ListEditorItemView.jsx | 16 +-- .../src/nfvo-components/modal/GlobalModal.js | 34 +++--- .../nfvo-components/modal/GlobalModalConstants.js | 5 + .../panel/versionController/VersionController.jsx | 12 +- .../nfvo-components/table/SelectActionTable.jsx | 9 +- .../nfvo-components/table/SelectActionTableRow.jsx | 24 ++-- 22 files changed, 210 insertions(+), 405 deletions(-) delete mode 100644 openecomp-ui/src/nfvo-components/activity-log/ActivityLog.js delete mode 100644 openecomp-ui/src/nfvo-components/activity-log/ActivityLogActionHelper.js delete mode 100644 openecomp-ui/src/nfvo-components/activity-log/ActivityLogConstants.js delete mode 100644 openecomp-ui/src/nfvo-components/activity-log/ActivityLogReducer.js delete mode 100644 openecomp-ui/src/nfvo-components/activity-log/ActivityLogView.jsx create mode 100644 openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx delete mode 100644 openecomp-ui/src/nfvo-components/icon/SVGIcon.jsx delete mode 100644 openecomp-ui/src/nfvo-components/icon/SVGIcon.stories.js (limited to 'openecomp-ui/src/nfvo-components') diff --git a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx index 0759f2c28d..5fe592a663 100644 --- a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx +++ b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx @@ -16,7 +16,7 @@ import React, {Component} from 'react'; import ListGroupItem from 'react-bootstrap/lib/ListGroupItem.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import Icon from 'nfvo-components/icon/Icon.jsx'; import {Collapse} from 'react-bootstrap'; /** @@ -145,7 +145,7 @@ class ErrorBlock extends React.Component { const ErrorHeader = ({errorType, collapsed, onClick}) => { return(
- + {errorType}
); diff --git a/openecomp-ui/src/nfvo-components/activity-log/ActivityLog.js b/openecomp-ui/src/nfvo-components/activity-log/ActivityLog.js deleted file mode 100644 index f7354f96e2..0000000000 --- a/openecomp-ui/src/nfvo-components/activity-log/ActivityLog.js +++ /dev/null @@ -1,27 +0,0 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing - * permissions and limitations under the License. - */ -import {connect} from 'react-redux'; -import ActivityLogView from './ActivityLogView.jsx'; - -export const mapStateToProps = ({licenseModel: {activityLog}}) => { - - let activities = activityLog; - return { - activities - }; -}; - -export default connect(mapStateToProps, undefined, null, {withRef: true})(ActivityLogView); diff --git a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogActionHelper.js b/openecomp-ui/src/nfvo-components/activity-log/ActivityLogActionHelper.js deleted file mode 100644 index 01a27abbc5..0000000000 --- a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogActionHelper.js +++ /dev/null @@ -1,31 +0,0 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing - * permissions and limitations under the License. - */ -import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js'; -import Configuration from 'sdc-app/config/Configuration.js'; -import ActivityLogConstants from './ActivityLogConstants.js'; - - -function baseUrl(itemId, versionId) { - const restPrefix = Configuration.get('restPrefix'); - return `${restPrefix}/v1.0/activity-logs/${itemId}/versions/${versionId}`; -} - -export default { - - fetchActivityLog(dispatch, {itemId, versionId}){ - return RestAPIUtil.fetch(baseUrl(itemId, versionId)).then(response => dispatch({type: ActivityLogConstants.ACTIVITY_LOG_UPDATED, response})); - } -}; diff --git a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogConstants.js b/openecomp-ui/src/nfvo-components/activity-log/ActivityLogConstants.js deleted file mode 100644 index 69faf7cbb6..0000000000 --- a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogConstants.js +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing - * permissions and limitations under the License. - */ -import keyMirror from 'nfvo-utils/KeyMirror.js'; - -export default keyMirror({ - - ACTIVITY_LOG_UPDATED: null - -}); - diff --git a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogReducer.js b/openecomp-ui/src/nfvo-components/activity-log/ActivityLogReducer.js deleted file mode 100644 index fc3dfa1515..0000000000 --- a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogReducer.js +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing - * permissions and limitations under the License. - */ -import ActivityLogConstants from './ActivityLogConstants.js'; - -export default (state = [], action) => { - switch (action.type) { - case ActivityLogConstants.ACTIVITY_LOG_UPDATED: - return [...action.response.results]; - } - - return state; -}; diff --git a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogView.jsx b/openecomp-ui/src/nfvo-components/activity-log/ActivityLogView.jsx deleted file mode 100644 index 6ff3c806a8..0000000000 --- a/openecomp-ui/src/nfvo-components/activity-log/ActivityLogView.jsx +++ /dev/null @@ -1,124 +0,0 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing - * permissions and limitations under the License. - */ -import React, {Component} from 'react'; -import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; -import Tooltip from 'react-bootstrap/lib/Tooltip.js'; -import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx'; -import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; -import i18n from 'nfvo-utils/i18n/i18n.js'; - -function ActivityLogSortableCellHeader({isHeader, data, isDes, onSort}) { - if (isHeader) { - return ( - - {data} - - - ); - } - return ( - - {i18n.dateNormal(data, { - year: 'numeric', month: 'numeric', day: 'numeric' - })} - {i18n.dateNormal(data, { - hour: 'numeric', minute: 'numeric', - hour12: true - })} - - ); -} - -function ActivityLogStatus({status, isHeader}) { - if (isHeader) { - return {status}; - } - let {message, success} = status; - return ( - - {`${success ? i18n('Success') : i18n('Failure')}`} - {success && } - {!success && -
{message}
- }> - {'?'} - } - - ); -} - -export function ActivityListItem({activity, isHeader, isDes, onSort}) { - let {type, timestamp, comment, user, status} = activity; - return ( -
  • -
    -
    {type}
    -
    {comment}
    -
    {user}
    -
    -
    • - ); -} - -class ActivityLogView extends Component { - - state = { - localFilter: '', - sortDescending: true - }; - - render() { - return ( -
    - this.setState({localFilter: filter})}> - this.setState({sortDescending: !this.state.sortDescending})}/> - {this.sortActivities(this.filterActivities(), this.state.sortDescending).map(activity => )} - -
    - ); - } - - filterActivities() { - let {activities} = this.props; - let {localFilter} = this.state; - if (localFilter.trim()) { - const filter = new RegExp(escape(localFilter), 'i'); - return activities.filter(({user = '', comment = '', type = ''}) => escape(user).match(filter) || escape(comment).match(filter) || escape(type).match(filter)); - } - else { - return activities; - } - } - - sortActivities(activities) { - if (this.state.sortDescending) { - return activities.sort((a, b) => a.timestamp - b.timestamp); - } - else { - return activities.reverse(); - } - } - -} - -export default ActivityLogView; diff --git a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx new file mode 100644 index 0000000000..cd39376bda --- /dev/null +++ b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx @@ -0,0 +1,75 @@ +import React from 'react'; +import DatePicker from 'react-datepicker'; +import moment from 'moment'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; + +class CustomInput extends React.Component { + + static propTypes = { + placeHolderText: React.PropTypes.string, + onChange: React.PropTypes.func, + onClick: React.PropTypes.func, + value: React.PropTypes.string + }; + + render() { + const {placeholderText, onClick, onClear, inputRef, value: date} = this.props; + const text = date ? date : placeholderText; + const textStyle = date ? '' : 'placeholder'; + return ( +
    +
    {text}
    +
    + +
    + ); + } +}; + +const parseDate = (date, format) => { + return typeof date === 'number' ? moment.unix(date) : moment(date, format); +}; + +class Datepicker extends React.Component { + static propTypes = { + date: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]), + format: React.PropTypes.string, + onChange: React.PropTypes.func, + selectsStart: React.PropTypes.bool, + selectsEnd: React.PropTypes.bool, + startDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]), + endDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]), + disabled: React.PropTypes.bool, + label: React.PropTypes.string, + isRequired: React.PropTypes.bool + } + render() { + let {date, format, onChange, selectsStart = false, startDate = null, endDate = null, selectsEnd = false, + disabled = false, inputRef} = this.props; + const placeholderText = 'Enter a date'; + const props = { + format, + onChange, + disabled, + selected: date ? parseDate(date, format) : date, + selectsStart, + selectsEnd, + placeholderText, + startDate: startDate ? parseDate(startDate, format) : startDate, + endDate: endDate ? parseDate(endDate, format) : endDate + }; + + return ( +
    + onChange(undefined)} placeholderText={placeholderText}/>} + minDate={selectsEnd && props.startDate} + maxDate={selectsStart && props.endDate} + {...props}/> +
    + ); + } +} + +export default Datepicker; diff --git a/openecomp-ui/src/nfvo-components/grid/GridSection.jsx b/openecomp-ui/src/nfvo-components/grid/GridSection.jsx index 175b3ee082..de8a4f3e64 100644 --- a/openecomp-ui/src/nfvo-components/grid/GridSection.jsx +++ b/openecomp-ui/src/nfvo-components/grid/GridSection.jsx @@ -14,10 +14,11 @@ * permissions and limitations under the License. */ import React from 'react'; +import classnames from 'classnames'; -const GridSection = ({title, children, titleClassName}) => { +const GridSection = ({title, children, className, titleClassName}) => { return ( -
    +
    {title &&
    {title}
    }
    {children} diff --git a/openecomp-ui/src/nfvo-components/icon/SVGIcon.jsx b/openecomp-ui/src/nfvo-components/icon/SVGIcon.jsx deleted file mode 100644 index dd165fb52c..0000000000 --- a/openecomp-ui/src/nfvo-components/icon/SVGIcon.jsx +++ /dev/null @@ -1,54 +0,0 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing - * permissions and limitations under the License. - */ -import React, {PropTypes} from 'react'; -import Configuration from 'sdc-app/config/Configuration.js'; - -export default class SVGIcon extends React.Component { - - static propTypes = { - name: PropTypes.string.isRequired, - onClick: PropTypes.func, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), - labelPosition: PropTypes.string, - className: PropTypes.string, - iconClassName: PropTypes.string, - labelClassName: PropTypes.string - }; - - static defaultProps = { - name: '', - label: '', - className: '', - iconClassName: '', - labelClassName: '', - labelPosition: 'bottom' - }; - - render() { - let {name, onClick, label, className, iconClassName, labelClassName, labelPosition, ...other} = this.props; - let classes = `svg-icon-wrapper ${className} ${onClick ? 'clickable' : ''} ${labelPosition}`; - - return ( -
    - - - - {label && {label}} -
    - ); - } -} diff --git a/openecomp-ui/src/nfvo-components/icon/SVGIcon.stories.js b/openecomp-ui/src/nfvo-components/icon/SVGIcon.stories.js deleted file mode 100644 index 6675670cea..0000000000 --- a/openecomp-ui/src/nfvo-components/icon/SVGIcon.stories.js +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react'; -import {storiesOf, action} from '@kadira/storybook'; -import {select, text, withKnobs} from '@kadira/storybook-addon-knobs'; -import SVGIcon from './SVGIcon.jsx'; - -const stories = storiesOf('SVGIcon', module); - -const iconNames = ['locked', - 'pencil', - 'plus-circle', - 'plus', - 'search', - 'sliders', - 'trash-o', - 'unlocked', - 'vendor', - 'version-controller-lock-closed', - 'version-controller-lock-open', - 'version-controller-revert', - 'version-controller-save', - 'version-controller-submit', - 'vlm', - 'vsp' ]; - -function colorChanger() { - return {fill: text('Color', '')}; -} - -function iconName() { - return select('Icon name' , iconNames, iconNames[0]); -} - -stories.addDecorator(withKnobs); - -stories - .add('icon', () => { - return ( - - ); - }) - .add('icon with label', () => { - return ( - - ); - }) - .add('locked clickable', () => { - return ( - - ); - }); \ No newline at end of file diff --git a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx index e2ee40fcd2..eab1d45ef4 100644 --- a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx +++ b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx @@ -15,11 +15,11 @@ */ import React from 'react'; import ReactDOM from 'react-dom'; -import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import Input from 'nfvo-components/input/validation/InputWrapper.jsx'; const ExpandableInputClosed = ({iconType, onClick}) => ( - + ); class ExpandableInputOpened extends React.Component { @@ -58,6 +58,7 @@ class ExpandableInputOpened extends React.Component {
    this.searchInputNode = input} className='expandable-active' @@ -65,7 +66,7 @@ class ExpandableInputOpened extends React.Component { onChange={e => onChange(e)} onKeyDown={e => this.handleKeyDown(e)} onBlur={handleBlur}/> - {value && this.handleClose()} name='close' />} + {value && this.handleClose()} name='close' />} {!value && }
    ); diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx index c60d6f777e..a3be363ba4 100644 --- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx +++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx @@ -14,7 +14,7 @@ * permissions and limitations under the License. */ import React from 'react'; -import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import Input from 'nfvo-components/input/validation/InputWrapper.jsx'; class DualListboxView extends React.Component { @@ -118,10 +118,10 @@ class DualListboxView extends React.Component { renderOperationsBar(isReadOnlyMode) { return (
    - {this.renderOperationBarButton(() => this.addToSelectedList(), 'angle-right')} - {this.renderOperationBarButton(() => this.removeFromSelectedList(), 'angle-left')} - {this.renderOperationBarButton(() => this.addAllToSelectedList(), 'angle-double-right')} - {this.renderOperationBarButton(() => this.removeAllFromSelectedList(), 'angle-double-left')} + {this.renderOperationBarButton(() => this.addToSelectedList(), 'angleRight')} + {this.renderOperationBarButton(() => this.removeFromSelectedList(), 'angleLeft')} + {this.renderOperationBarButton(() => this.addAllToSelectedList(), 'angleDoubleRight')} + {this.renderOperationBarButton(() => this.removeAllFromSelectedList(), 'angleDoubleLeft')}
    ); } diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx index 98810d1c0d..8d53322587 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx @@ -25,7 +25,9 @@ class Form extends React.Component { onReset : null, labledButtons: true, onValidChange : null, - isValid: true + isValid: true, + submitButtonText: null, + cancelButtonText: null }; static propTypes = { @@ -36,6 +38,8 @@ class Form extends React.Component { onSubmit : React.PropTypes.func, onReset : React.PropTypes.func, labledButtons: React.PropTypes.bool, + submitButtonText: React.PropTypes.string, + cancelButtonText: React.PropTypes.string, onValidChange : React.PropTypes.func, onValidityChanged: React.PropTypes.func, onValidateForm: React.PropTypes.func @@ -48,7 +52,8 @@ class Form extends React.Component { render() { // eslint-disable-next-line no-unused-vars - let {isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children, ...formProps} = this.props; + let {isValid, onValidChange, onValidityChanged, onDataChanged, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, submitButtonText, + cancelButtonText, children, ...formProps} = this.props; return (
    this.form = form} onSubmit={event => this.handleFormValidation(event)}>
    @@ -56,7 +61,13 @@ class Form extends React.Component { {children}
    - {hasButtons && this.buttons = buttons} isReadOnlyMode={isReadOnlyMode}/>} + {hasButtons && + this.buttons = buttons} + isReadOnlyMode={isReadOnlyMode}/>} ); } diff --git a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx index 59c35d7993..eef8fee1ce 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx @@ -22,6 +22,7 @@ import FormGroup from 'react-bootstrap/lib/FormGroup.js'; import FormControl from 'react-bootstrap/lib/FormControl.js'; import Overlay from 'react-bootstrap/lib/Overlay.js'; import Tooltip from 'react-bootstrap/lib/Tooltip.js'; +import Datepicker from 'nfvo-components/datepicker/Datepicker.jsx'; class Input extends React.Component { @@ -29,13 +30,14 @@ class Input extends React.Component { value: this.props.value, checked: this.props.checked, selectedValues: [] - } + }; render() { const {label, isReadOnlyMode, value, onBlur, onKeyDown, type, disabled, checked, name} = this.props; // eslint-disable-next-line no-unused-vars - const {groupClassName, isValid = true, errorText, isRequired, ...inputProps} = this.props; - let wrapperClassName = (type !== 'radio') ? 'validation-input-wrapper' : 'form-group'; + const {groupClassName, isValid = true, errorText, isRequired, overlayPos, ...inputProps} = this.props; + const {dateFormat, startDate, endDate, selectsStart, selectsEnd} = this.props; // Date Props + let wrapperClassName = (type !== 'radio') ? 'validation-input-wrapper' : 'validation-radio-wrapper'; if (disabled) { wrapperClassName += ' disabled'; } @@ -43,7 +45,7 @@ class Input extends React.Component {
    {(label && (type !== 'checkbox' && type !== 'radio')) && } - {(type === 'text' || type === 'number') && + {type === 'text' && this.onChange(e)} @@ -54,6 +56,17 @@ class Input extends React.Component { inputRef={(input) => this.input = input} type={type} data-test-id={this.props['data-test-id']}/>} + {type === 'number' && + this.onChange(e)} + disabled={isReadOnlyMode || Boolean(disabled)} + onBlur={onBlur} + onKeyDown={onKeyDown} + value={(value !== undefined) ? value : ''} + inputRef={(input) => this.input = input} + type={type} + data-test-id={this.props['data-test-id']}/>} {type === 'textarea' && this.onChangeRadio(e)} + inputRef={(input) => this.input = input} data-test-id={this.props['data-test-id']}>{label}} {type === 'select' && this.optionSelect(e) } @@ -88,6 +102,18 @@ class Input extends React.Component { inputRef={(input) => this.input = input} name={name} {...inputProps} data-test-id={this.props['data-test-id']}/>} + {type === 'date' && + this.input = input} + onChange={this.props.onChange} + disabled={isReadOnlyMode || Boolean(disabled)} + data-test-id={this.props['data-test-id']} + selectsStart={selectsStart} + selectsEnd={selectsEnd} />} { this.renderErrorOverlay() }
    @@ -116,7 +142,11 @@ class Input extends React.Component { const {onChange, type} = this.props; let value = e.target.value; if (type === 'number') { - value = Number(value); + if (value === '') { + value = undefined; + } else { + value = Number(value); + } } this.setState({ value @@ -154,7 +184,9 @@ class Input extends React.Component { else if (type === 'text' || type === 'email' || type === 'number' - || type === 'password') { + || type === 'radio' + || type === 'password' + || type === 'date') { position = 'bottom'; } diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx index 5ca716cc20..6c8115deee 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx @@ -71,6 +71,7 @@ class InputWrapper extends React.Component { checked={checked} disabled={isReadOnlyMode || Boolean(disabled)} value={value} + ref={(input) => this.inputWrapper = input} onChange={(e)=>this.onChangeRadio(e)} data-test-id={this.props['data-test-id']}>{label}} {type === 'select' && diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx index ebb1473c04..c3808dd2c3 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx @@ -22,14 +22,16 @@ */ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import Button from 'react-bootstrap/lib/Button.js'; -import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; +import Button from 'sdc-ui/lib/react/Button.js'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; class ValidationButtons extends React.Component { static propTypes = { labledButtons: React.PropTypes.bool.isRequired, - isReadOnlyMode: React.PropTypes.bool + isReadOnlyMode: React.PropTypes.bool, + submitButtonText: React.PropTypes.string, + cancelButtonText: React.PropTypes.string }; state = { @@ -37,16 +39,16 @@ class ValidationButtons extends React.Component { }; render() { - var submitBtn = this.props.labledButtons ? i18n('Save') : ; - var closeBtn = this.props.labledButtons ? i18n('Cancel') : ; + let submitBtn = this.props.labledButtons ? this.props.submitButtonText ? this.props.submitButtonText : i18n('Save') : ; + let closeBtn = this.props.labledButtons ? this.props.cancelButtonText ? this.props.cancelButtonText : i18n('Cancel') : ; return (
    {!this.props.isReadOnlyMode ?
    - - + +
    - : + : }
    ); diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx index f6c906b56b..8d7c63f567 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx +++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx @@ -16,18 +16,18 @@ import React from 'react'; import classnames from 'classnames'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import store from 'sdc-app/AppStore.js'; import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; class ListEditorItem extends React.Component { static propTypes = { - onSelect: React.PropTypes.func, - onDelete: React.PropTypes.func, - onEdit: React.PropTypes.func, + onSelect: React.PropTypes.oneOfType([React.PropTypes.func, React.PropTypes.bool]), + onDelete: React.PropTypes.oneOfType([React.PropTypes.func, React.PropTypes.bool]), + onEdit: React.PropTypes.oneOfType([React.PropTypes.func, React.PropTypes.bool]), children: React.PropTypes.node, isReadOnlyMode: React.PropTypes.bool - } + }; render() { let {onDelete, onSelect, onEdit, children, isReadOnlyMode} = this.props; @@ -39,7 +39,7 @@ class ListEditorItem extends React.Component {
    {(onEdit || onDelete) &&
    {onEdit && this.onClickedItem(onEdit)}/>} - {onDelete && isAbilityToDelete && this.onClickedItem(onDelete)}/>} + {onDelete && isAbilityToDelete && this.onClickedItem(onDelete)}/>}
    }
    ); @@ -52,8 +52,8 @@ class ListEditorItem extends React.Component { store.dispatch({ type: modalActionTypes.GLOBAL_MODAL_WARNING, data: { - title: i18n('Error'), - msg: i18n('This item is checkedin/submitted, Click Check Out to continue') + title: i18n('Error'), + msg: i18n('This item is checkedin/submitted, Click Check Out to continue') } }); } diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js index 65a1ad683b..825cc609a8 100644 --- a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js +++ b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js @@ -18,31 +18,33 @@ import React from 'react'; import {connect} from 'react-redux'; import Modal from 'nfvo-components/modal/Modal.jsx'; -import Button from 'react-bootstrap/lib/Button.js'; +import Button from 'sdc-ui/lib/react/Button.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import {modalContentComponents} from 'sdc-app/common/modal/ModalContentMapper.js'; import {actionTypes, typeEnum} from './GlobalModalConstants.js'; const typeClass = { - 'default': 'primary', - error: 'danger', + 'default': 'default', + error: 'negative', warning: 'warning', - success: 'success' + success: 'positive' }; -const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) => +const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) => - } + - {onConfirmed && } +
    ; ModalFooter.defaultProps = { @@ -87,7 +89,7 @@ export class GlobalModalView extends React.Component { }; render() { - let {title, type, show, modalComponentName, modalComponentProps, + let {title, type, show, modalComponentName, modalComponentProps, modalClassName, msg, onConfirmed, onDeclined, confirmationButtonText, cancelButtonText, onClose} = this.props; const ComponentToRender = modalContentComponents[modalComponentName]; return ( @@ -96,7 +98,7 @@ export class GlobalModalView extends React.Component { {title} - {ComponentToRender ? : msg} + {ComponentToRender ? : msg} {(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) && @@ -125,14 +125,14 @@ class ActionButtons extends React.Component { {onSubmit && onRevert &&
    + name='versionControllerSubmit' tooltipText={i18n('Submit')}/> + name='versionControllerRevert' tooltipText={i18n('Revert')}/>
    } {onSave && onSave()} isDisabled={!isCheckedOut || !isFormDataValid || !isLatestVersion} - name='version-controller-save' tooltipText={i18n('Save')}/> + name='versionControllerSave' tooltipText={i18n('Save')}/> }
    ); diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx index 06cb98bbe8..6c04ad74fd 100644 --- a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx @@ -1,23 +1,22 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import uuid from 'uuid-js'; export default class SelectActionTable extends React.Component { render() { - let {columns, onAdd, isReadOnlyMode, children, onAddItem} = this.props; + let {columns, onAdd, isReadOnlyMode, children, onAddItem, numOfIcons} = this.props; return (
    {onAdd && onAddItem &&
    {onAddItem}
    } - +
    {columns.map(column =>
    {i18n(column)}
    )} - - + {Array(numOfIcons).fill().map(() => )}
    {children} diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx index 17d8a17c09..a711b42918 100644 --- a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import SVGIcon from '../icon/SVGIcon.jsx'; +import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; import Tooltip from 'react-bootstrap/lib/Tooltip.js'; @@ -11,19 +11,29 @@ function tooltip (msg) { const IconWithOverlay = ({overlayMsg}) => ( - + ); -const SelectActionTableRow = ({children, onDelete, hasError, overlayMsg}) => ( +function renderErrorOrCheck({hasError, overlayMsg}) { + if (hasError === undefined) { + return ; + } + + if (hasError) { + return overlayMsg ? : ; + } + + return ; +} + +const SelectActionTableRow = ({children, onDelete, hasError, hasErrorIndication, overlayMsg}) => (
    {children}
    - {onDelete ? : } - {hasError ? overlayMsg ? : - : hasError === undefined ? : } - + {onDelete && } + {hasErrorIndication && renderErrorOrCheck({hasError, overlayMsg})}
    ); -- cgit 1.2.3-korg