diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/notifications')
3 files changed, 180 insertions, 0 deletions
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; + } + +}; |