summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/nfvo-components')
-rw-r--r--openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx4
-rw-r--r--openecomp-ui/src/nfvo-components/activity-log/ActivityLog.js27
-rw-r--r--openecomp-ui/src/nfvo-components/activity-log/ActivityLogActionHelper.js31
-rw-r--r--openecomp-ui/src/nfvo-components/activity-log/ActivityLogConstants.js23
-rw-r--r--openecomp-ui/src/nfvo-components/activity-log/ActivityLogReducer.js25
-rw-r--r--openecomp-ui/src/nfvo-components/activity-log/ActivityLogView.jsx124
-rw-r--r--openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx75
-rw-r--r--openecomp-ui/src/nfvo-components/grid/GridSection.jsx5
-rw-r--r--openecomp-ui/src/nfvo-components/icon/SVGIcon.jsx54
-rw-r--r--openecomp-ui/src/nfvo-components/icon/SVGIcon.stories.js50
-rw-r--r--openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx7
-rw-r--r--openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx10
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Form.jsx17
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Input.jsx44
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx1
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx18
-rw-r--r--openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx16
-rw-r--r--openecomp-ui/src/nfvo-components/modal/GlobalModal.js34
-rw-r--r--openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js5
-rw-r--r--openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx12
-rw-r--r--openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx9
-rw-r--r--openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx24
22 files changed, 210 insertions, 405 deletions
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(
<div onClick={onClick} className='error-block-header'>
- <SVGIcon iconClassName={collapsed ? '' : 'right' } name='chevron-down'/>
+ <SVGIcon iconClassName={collapsed ? '' : 'right' } name='chevronDown'/>
{errorType}
</div>
);
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 (
- <span className='date-header' onClick={onSort}>
- <span>{data}</span>
- <span className={`header-sort-arrow ${isDes ? 'up' : 'down'}`}></span>
- </span>
- );
- }
- return (
- <span className='date-cell'>
- <span>{i18n.dateNormal(data, {
- year: 'numeric', month: 'numeric', day: 'numeric'
- })}</span>
- <span>{i18n.dateNormal(data, {
- hour: 'numeric', minute: 'numeric',
- hour12: true
- })}</span>
- </span>
- );
-}
-
-function ActivityLogStatus({status, isHeader}) {
- if (isHeader) {
- return <span>{status}</span>;
- }
- let {message, success} = status;
- return (
- <span>
- <span className={`status-icon ${success}`}>{`${success ? i18n('Success') : i18n('Failure')}`}</span>
- {success && <SVGIcon name='check-circle'/>}
- {!success && <OverlayTrigger placement='bottom' overlay={<Tooltip className='activity-log-message-tooltip' id={'activity-log-message-tooltip'}>
- <div className='message-block'>{message}</div>
- </Tooltip>}>
- <span className='message-further-info-icon'>{'?'}</span>
- </OverlayTrigger>}
- </span>
- );
-}
-
-export function ActivityListItem({activity, isHeader, isDes, onSort}) {
- let {type, timestamp, comment, user, status} = activity;
- return (
- <li className={`activity-list-item ${isHeader ? 'header' : ''}`} data-test-id='activity-list-item'>
- <div className='table-cell activity-date' data-test-id='activity-date'><ActivityLogSortableCellHeader isHeader={isHeader} data={timestamp} isDes={isDes} onSort={onSort}/></div>
- <div className='table-cell activity-action' data-test-id='activity-action'>{type}</div>
- <div className='table-cell activity-comment' title={comment} data-test-id='activity-comment'><span>{comment}</span></div>
- <div className='table-cell activity-username' data-test-id='activity-username'>{user}</div>
- <div className='table-cell activity-status' data-test-id='activity-status'><ActivityLogStatus isHeader={isHeader} status={status}/></div>
- </li>
- );
-}
-
-class ActivityLogView extends Component {
-
- state = {
- localFilter: '',
- sortDescending: true
- };
-
- render() {
- return (
- <div className='activity-log-view'>
- <ListEditorView
- title={i18n('Activity Log')}
- filterValue={this.state.localFilter}
- onFilter={filter => this.setState({localFilter: filter})}>
- <ActivityListItem
- isHeader={true}
- activity={{timestamp: 'Date', type: 'Action', comment: 'Comment', user: 'Username', status: 'Status'}}
- isDes={this.state.sortDescending}
- onSort={() => this.setState({sortDescending: !this.state.sortDescending})}/>
- {this.sortActivities(this.filterActivities(), this.state.sortDescending).map(activity => <ActivityListItem key={activity.id} activity={activity}/>)}
- </ListEditorView>
- </div>
- );
- }
-
- 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 (
+ <div ref={inputRef} className='datepicker-custom-input'>
+ <div onClick={onClick} className={`datepicker-text ${textStyle}`}>{text}</div>
+ <div onClick={onClear} className='clear-input'/>
+ <SVGIcon onClick={onClick} name='calendar'/>
+ </div>
+ );
+ }
+};
+
+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 (
+ <div className='customized-date-picker'>
+ <DatePicker
+ calendarClassName='customized-date-picker-calendar'
+ customInput={<CustomInput inputRef={inputRef} onClear={() => onChange(undefined)} placeholderText={placeholderText}/>}
+ minDate={selectsEnd && props.startDate}
+ maxDate={selectsStart && props.endDate}
+ {...props}/>
+ </div>
+ );
+ }
+}
+
+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 (
- <div className='grid-section'>
+ <div className={classnames('grid-section', className)}>
{title && <div className={`section-title ${titleClassName || ''}`}>{title}</div>}
<div className='grid-items'>
{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 (
- <div {...other} onClick={onClick} className={classes}>
- <svg className={`svg-icon ${name} ${iconClassName}`} >
- <use href={Configuration.get('appContextPath') + '/resources/images/svg/' + this.props.name + '.svg#' + this.props.name + '_icon' }
- xlinkHref={Configuration.get('appContextPath') + '/resources/images/svg/' + this.props.name + '.svg#' + this.props.name + '_icon' } />
- </svg>
- {label && <span className={`svg-icon-label ${labelClassName}`}>{label}</span>}
- </div>
- );
- }
-}
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 (
- <SVGIcon name={iconName()} style={colorChanger()}/>
- );
- })
- .add('icon with label', () => {
- return (
- <SVGIcon name={iconName()} label={iconName()} style={colorChanger()}/>
- );
- })
- .add('locked clickable', () => {
- return (
- <SVGIcon name={iconName()} onClick={action('clicked')} style={colorChanger()}/>
- );
- }); \ 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}) => (
- <SVGIcon className='expandable-input-wrapper closed' name={iconType} onClick={onClick} />
+ <SVGIcon className='expandable-input-wrapper closed' data-test-id='expandable-input-closed' name={iconType} onClick={onClick} />
);
class ExpandableInputOpened extends React.Component {
@@ -58,6 +58,7 @@ class ExpandableInputOpened extends React.Component {
<div className='expandable-input-wrapper opened' key='expandable'>
<Input
type='text'
+ data-test-id='expandable-input-opened'
value={value}
ref={(input) => this.searchInputNode = input}
className='expandable-active'
@@ -65,7 +66,7 @@ class ExpandableInputOpened extends React.Component {
onChange={e => onChange(e)}
onKeyDown={e => this.handleKeyDown(e)}
onBlur={handleBlur}/>
- {value && <SVGIcon onClick={() => this.handleClose()} name='close' />}
+ {value && <SVGIcon data-test-id='expandable-input-close-btn' onClick={() => this.handleClose()} name='close' />}
{!value && <SVGIcon name={iconType} onClick={handleBlur}/>}
</div>
);
diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
index c60d6f777e..a3be363ba4 100644
--- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
+++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
@@ -14,7 +14,7 @@
* permissions and limitations under the License.
*/
import React from 'react';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
class DualListboxView extends React.Component {
@@ -118,10 +118,10 @@ class DualListboxView extends React.Component {
renderOperationsBar(isReadOnlyMode) {
return (
<div className={`dual-list-options-bar${isReadOnlyMode ? ' disabled' : ''}`}>
- {this.renderOperationBarButton(() => this.addToSelectedList(), 'angle-right')}
- {this.renderOperationBarButton(() => this.removeFromSelectedList(), 'angle-left')}
- {this.renderOperationBarButton(() => this.addAllToSelectedList(), 'angle-double-right')}
- {this.renderOperationBarButton(() => this.removeAllFromSelectedList(), 'angle-double-left')}
+ {this.renderOperationBarButton(() => this.addToSelectedList(), 'angleRight')}
+ {this.renderOperationBarButton(() => this.removeFromSelectedList(), 'angleLeft')}
+ {this.renderOperationBarButton(() => this.addAllToSelectedList(), 'angleDoubleRight')}
+ {this.renderOperationBarButton(() => this.removeAllFromSelectedList(), 'angleDoubleLeft')}
</div>
);
}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
index 98810d1c0d..8d53322587 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
@@ -25,7 +25,9 @@ class Form extends React.Component {
onReset : null,
labledButtons: true,
onValidChange : null,
- isValid: true
+ isValid: true,
+ submitButtonText: null,
+ cancelButtonText: null
};
static propTypes = {
@@ -36,6 +38,8 @@ class Form extends React.Component {
onSubmit : React.PropTypes.func,
onReset : React.PropTypes.func,
labledButtons: React.PropTypes.bool,
+ submitButtonText: React.PropTypes.string,
+ cancelButtonText: React.PropTypes.string,
onValidChange : React.PropTypes.func,
onValidityChanged: React.PropTypes.func,
onValidateForm: React.PropTypes.func
@@ -48,7 +52,8 @@ class Form extends React.Component {
render() {
// eslint-disable-next-line no-unused-vars
- let {isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children, ...formProps} = this.props;
+ let {isValid, onValidChange, onValidityChanged, onDataChanged, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, submitButtonText,
+ cancelButtonText, children, ...formProps} = this.props;
return (
<form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
<div className='validation-form-content'>
@@ -56,7 +61,13 @@ class Form extends React.Component {
{children}
</fieldset>
</div>
- {hasButtons && <ValidationButtons labledButtons={labledButtons} ref={(buttons) => this.buttons = buttons} isReadOnlyMode={isReadOnlyMode}/>}
+ {hasButtons &&
+ <ValidationButtons
+ labledButtons={labledButtons}
+ submitButtonText={submitButtonText}
+ cancelButtonText={cancelButtonText}
+ ref={(buttons) => this.buttons = buttons}
+ isReadOnlyMode={isReadOnlyMode}/>}
</form>
);
}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
index 59c35d7993..eef8fee1ce 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx
@@ -22,6 +22,7 @@ import FormGroup from 'react-bootstrap/lib/FormGroup.js';
import FormControl from 'react-bootstrap/lib/FormControl.js';
import Overlay from 'react-bootstrap/lib/Overlay.js';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';
+import Datepicker from 'nfvo-components/datepicker/Datepicker.jsx';
class Input extends React.Component {
@@ -29,13 +30,14 @@ class Input extends React.Component {
value: this.props.value,
checked: this.props.checked,
selectedValues: []
- }
+ };
render() {
const {label, isReadOnlyMode, value, onBlur, onKeyDown, type, disabled, checked, name} = this.props;
// eslint-disable-next-line no-unused-vars
- const {groupClassName, isValid = true, errorText, isRequired, ...inputProps} = this.props;
- let wrapperClassName = (type !== 'radio') ? 'validation-input-wrapper' : 'form-group';
+ const {groupClassName, isValid = true, errorText, isRequired, overlayPos, ...inputProps} = this.props;
+ const {dateFormat, startDate, endDate, selectsStart, selectsEnd} = this.props; // Date Props
+ let wrapperClassName = (type !== 'radio') ? 'validation-input-wrapper' : 'validation-radio-wrapper';
if (disabled) {
wrapperClassName += ' disabled';
}
@@ -43,7 +45,7 @@ class Input extends React.Component {
<div className={wrapperClassName}>
<FormGroup className={classNames('form-group', [groupClassName], {'required' : isRequired , 'has-error' : !isValid})} >
{(label && (type !== 'checkbox' && type !== 'radio')) && <label className='control-label'>{label}</label>}
- {(type === 'text' || type === 'number') &&
+ {type === 'text' &&
<FormControl
bsClass={'form-control input-options-other'}
onChange={(e) => this.onChange(e)}
@@ -54,6 +56,17 @@ class Input extends React.Component {
inputRef={(input) => this.input = input}
type={type}
data-test-id={this.props['data-test-id']}/>}
+ {type === 'number' &&
+ <FormControl
+ bsClass={'form-control input-options-other'}
+ onChange={(e) => this.onChange(e)}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ onBlur={onBlur}
+ onKeyDown={onKeyDown}
+ value={(value !== undefined) ? value : ''}
+ inputRef={(input) => this.input = input}
+ type={type}
+ data-test-id={this.props['data-test-id']}/>}
{type === 'textarea' &&
<FormControl
@@ -81,6 +94,7 @@ class Input extends React.Component {
disabled={isReadOnlyMode || Boolean(disabled)}
value={value}
onChange={(e)=>this.onChangeRadio(e)}
+ inputRef={(input) => this.input = input}
data-test-id={this.props['data-test-id']}>{label}</Radio>}
{type === 'select' &&
<FormControl onClick={ (e) => this.optionSelect(e) }
@@ -88,6 +102,18 @@ class Input extends React.Component {
inputRef={(input) => this.input = input}
name={name} {...inputProps}
data-test-id={this.props['data-test-id']}/>}
+ {type === 'date' &&
+ <Datepicker
+ date={value}
+ format={dateFormat}
+ startDate={startDate}
+ endDate={endDate}
+ inputRef={(input) => this.input = input}
+ onChange={this.props.onChange}
+ disabled={isReadOnlyMode || Boolean(disabled)}
+ data-test-id={this.props['data-test-id']}
+ selectsStart={selectsStart}
+ selectsEnd={selectsEnd} />}
</FormGroup>
{ this.renderErrorOverlay() }
</div>
@@ -116,7 +142,11 @@ class Input extends React.Component {
const {onChange, type} = this.props;
let value = e.target.value;
if (type === 'number') {
- value = Number(value);
+ if (value === '') {
+ value = undefined;
+ } else {
+ value = Number(value);
+ }
}
this.setState({
value
@@ -154,7 +184,9 @@ class Input extends React.Component {
else if (type === 'text'
|| type === 'email'
|| type === 'number'
- || type === 'password') {
+ || type === 'radio'
+ || type === 'password'
+ || type === 'date') {
position = 'bottom';
}
diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
index 5ca716cc20..6c8115deee 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx
@@ -71,6 +71,7 @@ class InputWrapper extends React.Component {
checked={checked}
disabled={isReadOnlyMode || Boolean(disabled)}
value={value}
+ ref={(input) => this.inputWrapper = input}
onChange={(e)=>this.onChangeRadio(e)}
data-test-id={this.props['data-test-id']}>{label}</Radio>}
{type === 'select' &&
diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
index ebb1473c04..c3808dd2c3 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx
@@ -22,14 +22,16 @@
*/
import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import Button from 'react-bootstrap/lib/Button.js';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import Button from 'sdc-ui/lib/react/Button.js';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
class ValidationButtons extends React.Component {
static propTypes = {
labledButtons: React.PropTypes.bool.isRequired,
- isReadOnlyMode: React.PropTypes.bool
+ isReadOnlyMode: React.PropTypes.bool,
+ submitButtonText: React.PropTypes.string,
+ cancelButtonText: React.PropTypes.string
};
state = {
@@ -37,16 +39,16 @@ class ValidationButtons extends React.Component {
};
render() {
- var submitBtn = this.props.labledButtons ? i18n('Save') : <SVGIcon className='check' name='check'/>;
- var closeBtn = this.props.labledButtons ? i18n('Cancel') : <SVGIcon className='close' name='close'/>;
+ let submitBtn = this.props.labledButtons ? this.props.submitButtonText ? this.props.submitButtonText : i18n('Save') : <SVGIcon className='check' name='check'/>;
+ let closeBtn = this.props.labledButtons ? this.props.cancelButtonText ? this.props.cancelButtonText : i18n('Cancel') : <SVGIcon className='close' name='close'/>;
return (
<div className='validation-buttons'>
{!this.props.isReadOnlyMode ?
<div>
- <Button bsStyle='primary' ref='submitbutton' type='submit' disabled={!this.state.isValid}>{submitBtn}</Button>
- <Button type='reset'>{closeBtn}</Button>
+ <Button type='submit' disabled={!this.state.isValid}>{submitBtn}</Button>
+ <Button btnType='outline' type='reset'>{closeBtn}</Button>
</div>
- : <Button type='reset'>{i18n('Close')}</Button>
+ : <Button btnType='outline' type='reset'>{i18n('Close')}</Button>
}
</div>
);
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 {
</div>
{(onEdit || onDelete) && <div className='list-editor-item-view-controller'>
{onEdit && <SVGIcon name='sliders' onClick={() => this.onClickedItem(onEdit)}/>}
- {onDelete && isAbilityToDelete && <SVGIcon name='trash-o' onClick={() => this.onClickedItem(onDelete)}/>}
+ {onDelete && isAbilityToDelete && <SVGIcon name='trashO' onClick={() => this.onClickedItem(onDelete)}/>}
</div>}
</div>
);
@@ -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}) =>
<Modal.Footer>
- <Button bsStyle={typeClass[type]} onClick={onDeclined ? () => {
- onDeclined();
- onClose();} : () => onClose()}>
- {cancelButtonText}
+ <div className='sdc-modal-footer'>
+ {onConfirmed && <Button color={typeClass[type]} onClick={() => {
+ onConfirmed();
+ onClose();
+ }}>{confirmationButtonText}</Button>}
+ <Button btnType='outline' color={typeClass[type]} onClick={onDeclined ? () => {
+ onDeclined();
+ onClose();} : () => onClose()}>
+ {cancelButtonText}
</Button>
- {onConfirmed && <Button bsStyle={typeClass[type]} onClick={() => {
- onConfirmed();
- onClose();
- }}>{confirmationButtonText}</Button>}
+ </div>
</Modal.Footer>;
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 {
<Modal.Title>{title}</Modal.Title>
</Modal.Header>
<Modal.Body>
- {ComponentToRender ? <ComponentToRender {...modalComponentProps}/> : msg}
+ {ComponentToRender ? <ComponentToRender {...modalComponentProps}/> : msg}
</Modal.Body>
{(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) &&
<ModalFooter
@@ -114,7 +116,7 @@ export class GlobalModalView extends React.Component {
if (this.props.timeout) {
setTimeout(this.props.onClose, this.props.timeout);
}
- }
+ }
};
export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(GlobalModalView);
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
index 0a0ed1fd71..3e5545371a 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js
@@ -31,3 +31,8 @@ export const typeEnum = {
WARNING: 'warning',
SUCCESS: 'success'
};
+
+export const modalSizes = {
+ LARGE: 'large',
+ SMALL: 'small'
+};
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
index 6d900dd0bb..ecfe7df116 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
@@ -17,7 +17,7 @@ import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import {actionsEnum, statusEnum, statusBarTextMap } from './VersionControllerConstants.js';
-import SVGIcon from 'nfvo-components/icon/SVGIcon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
@@ -115,8 +115,8 @@ class ActionButtons extends React.Component {
render() {
const {onSubmit, onRevert, onSave, isLatestVersion, isCheckedIn, isCheckedOut, isFormDataValid, version, status, onCheckinCheckout} = this.props;
const [checkinBtnIconSvg, checkinCheckoutBtnTitle] = status === statusEnum.CHECK_OUT_STATUS ?
- ['version-controller-lock-open', i18n('Check In')] :
- ['version-controller-lock-closed', i18n('Check Out')];
+ ['versionControllerLockOpen', i18n('Check In')] :
+ ['versionControllerLockClosed', i18n('Check Out')];
const disabled = (isLatestVersion && onCheckinCheckout && status !== statusEnum.LOCK_STATUS) ? false : true;
return (
<div className='action-buttons'>
@@ -125,14 +125,14 @@ class ActionButtons extends React.Component {
{onSubmit && onRevert &&
<div className='version-control-buttons'>
<VCButton dataTestId='vc-submit-btn' onClick={onSubmit} isDisabled={!isCheckedIn || !isLatestVersion}
- name='version-controller-submit' tooltipText={i18n('Submit')}/>
+ name='versionControllerSubmit' tooltipText={i18n('Submit')}/>
<VCButton dataTestId='vc-revert-btn' onClick={onRevert} isDisabled={!isCheckedOut || version.label === '0.1' || !isLatestVersion}
- name='version-controller-revert' tooltipText={i18n('Revert')}/>
+ name='versionControllerRevert' tooltipText={i18n('Revert')}/>
</div>
}
{onSave &&
<VCButton dataTestId='vc-save-btn' onClick={() => onSave()} isDisabled={!isCheckedOut || !isFormDataValid || !isLatestVersion}
- name='version-controller-save' tooltipText={i18n('Save')}/>
+ name='versionControllerSave' tooltipText={i18n('Save')}/>
}
</div>
);
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 (
<div className={`select-action-table-view ${isReadOnlyMode ? 'disabled' : ''}`}>
<div className='select-action-table-controllers'>
{onAdd && onAddItem && <div data-test-id='select-action-table-add' onClick={onAdd}>{onAddItem}</div>}
- <SVGIcon name='trash-o' className='dummy-icon' />
+ <SVGIcon name='trashO' className='dummy-icon' />
</div>
<div className='select-action-table'>
<div className='select-action-table-headers'>
{columns.map(column => <div key={uuid.create()} className='select-action-table-header'>{i18n(column)}</div>)}
- <SVGIcon name='trash-o' className='dummy-icon' />
- <SVGIcon name='trash-o' className='dummy-icon' />
+ {Array(numOfIcons).fill().map(() => <SVGIcon name='trashO' className='dummy-icon' />)}
</div>
<div className='select-action-table-body'>
{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}) => (
<OverlayTrigger placement='bottom' overlay={tooltip(overlayMsg)}>
- <SVGIcon name='error-circle'/>
+ <SVGIcon name='errorCircle'/>
</OverlayTrigger>
);
-const SelectActionTableRow = ({children, onDelete, hasError, overlayMsg}) => (
+function renderErrorOrCheck({hasError, overlayMsg}) {
+ if (hasError === undefined) {
+ return <SVGIcon name='angleRight' className='dummy-icon' />;
+ }
+
+ if (hasError) {
+ return overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> : <SVGIcon name='errorCircle'/>;
+ }
+
+ return <SVGIcon name='checkCircle'/>;
+}
+
+const SelectActionTableRow = ({children, onDelete, hasError, hasErrorIndication, overlayMsg}) => (
<div className='select-action-table-row-wrapper'>
<div className={`select-action-table-row ${hasError ? 'has-error' : ''}`}>
{children}
</div>
- {onDelete ? <SVGIcon name='trash-o' data-test-id='select-action-table-delete' onClick={onDelete} /> : <SVGIcon name='angle-left' className='dummy-icon' />}
- {hasError ? overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> : <SVGIcon name='error-circle'/>
- : hasError === undefined ? <SVGIcon name='angle-left' className='dummy-icon'/> : <SVGIcon name='check-circle'/>}
-
+ {onDelete && <SVGIcon name='trashO' data-test-id='select-action-table-delete' onClick={onDelete} />}
+ {hasErrorIndication && renderErrorOrCheck({hasError, overlayMsg})}
</div>
);