aboutsummaryrefslogtreecommitdiffstats
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.jsx6
-rw-r--r--openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx46
-rw-r--r--openecomp-ui/src/nfvo-components/input/ToggleInput.jsx1
-rw-r--r--openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx7
-rw-r--r--openecomp-ui/src/nfvo-components/modal/GlobalModal.js22
-rw-r--r--openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx1
-rw-r--r--openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx2
-rw-r--r--openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx6
-rw-r--r--openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx8
9 files changed, 80 insertions, 19 deletions
diff --git a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
index 5fe592a663..1488c6c0bb 100644
--- a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
+++ b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx
@@ -17,7 +17,6 @@ import React, {Component} from 'react';
import ListGroupItem from 'react-bootstrap/lib/ListGroupItem.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
-import Icon from 'nfvo-components/icon/Icon.jsx';
import {Collapse} from 'react-bootstrap';
/**
* parsing and showing the following Java Response object
@@ -145,8 +144,7 @@ class ErrorBlock extends React.Component {
const ErrorHeader = ({errorType, collapsed, onClick}) => {
return(
<div onClick={onClick} className='error-block-header'>
- <SVGIcon iconClassName={collapsed ? '' : 'right' } name='chevronDown'/>
- {errorType}
+ <SVGIcon iconClassName={collapsed ? '' : 'collapse-right' } name='chevronDown' label={errorType} labelPosition='right'/>
</div>
);
};
@@ -154,7 +152,7 @@ const ErrorHeader = ({errorType, collapsed, onClick}) => {
const ErrorMessage = ({error, warning}) => {
return (
<ListGroupItem className='error-code-list-item'>
- <Icon image={warning ? 'warning' : 'error'} label={error}/>
+ <SVGIcon name={warning ? 'warning' : 'error'} label={error} labelPosition='right' color={warning ? 'warning' : 'negative'} labelClassName='icon-label'/>
</ListGroupItem>
);
};
diff --git a/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx b/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx
new file mode 100644
index 0000000000..629b9449a2
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx
@@ -0,0 +1,46 @@
+/*!
+ * 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.
+ */
+/**
+ * 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 i18n from 'nfvo-utils/i18n/i18n.js';
+import Button from 'sdc-ui/lib/react/Button.js';
+
+class DraggableUploadFileBox extends Component {
+ render() {
+ let {className, onClick, dataTestId, isReadOnlyMode} = this.props;
+ return (
+ <div
+ className={`${className}${isReadOnlyMode ? ' disabled' : ''}`}>
+ <div className={`${'drag-text'}${isReadOnlyMode ? ' disabled' : ''}`}>{i18n('Drag & drop for upload')}</div>
+ <div className='or-text'>{i18n('or')}</div>
+ <Button type='button' data-test-id={dataTestId} btnType='outline' onClick={onClick} disabled={isReadOnlyMode === true}>{i18n('Select File')}</Button>
+ </div>
+ );
+ }
+}
+export default DraggableUploadFileBox;
diff --git a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
index 7bbafa3696..23af72a26a 100644
--- a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
+++ b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx
@@ -41,6 +41,7 @@ class ToggleInput extends React.Component {
render() {
let {label, disabled} = this.props;
let checked = this.status() === 'on';
+ //TODO check onclick
return (
<div className='toggle-input-wrapper form-group' onClick={!disabled && this.click}>
<div className='toggle-input-label'>{label}</div>
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
index cc805e9ada..df7d69b4ff 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
@@ -14,6 +14,7 @@
* permissions and limitations under the License.
*/
import React from 'react';
+import Button from 'sdc-ui/lib/react/Button.js';
import classnames from 'classnames';
import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx';
@@ -21,11 +22,9 @@ const ListEditorHeader = ({onAdd, isReadOnlyMode, title, plusButtonTitle}) => {
return (
<div className='list-editor-view-header'>
{title && <div className='list-editor-view-title'>{title}</div>}
- <div className={`list-editor-view-add-controller${isReadOnlyMode ? ' disabled' : ''}`}>
+ <div>
{ onAdd &&
- <div className='list-editor-view-add-title' data-test-id='add-button' onClick={onAdd}>
- <span>{`+ ${plusButtonTitle}`}</span>
- </div>
+ <Button data-test-id='add-button' iconName='plusThin' btnType='link' onClick={onAdd} disabled={isReadOnlyMode === true}>{plusButtonTitle}</Button>
}
</div>
</div>
diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
index 825cc609a8..e05c2ac616 100644
--- a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
+++ b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js
@@ -31,21 +31,35 @@ const typeClass = {
success: 'positive'
};
+const type2HeaderColor = {
+ 'default': 'primary',
+ error: 'danger',
+ warning: 'warning',
+ success: 'success'
+};
+
-const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) =>
+const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) => {
+ let myPropsForNoConfirmed = {};
+ if (onConfirmed) {
+ myPropsForNoConfirmed.btnType = 'outline';
+ }
+ return (
<Modal.Footer>
<div className='sdc-modal-footer'>
{onConfirmed && <Button color={typeClass[type]} onClick={() => {
onConfirmed();
onClose();
}}>{confirmationButtonText}</Button>}
- <Button btnType='outline' color={typeClass[type]} onClick={onDeclined ? () => {
+ <Button {...myPropsForNoConfirmed} color={typeClass[type]} onClick={onDeclined ? () => {
onDeclined();
onClose();} : () => onClose()}>
{cancelButtonText}
</Button>
</div>
- </Modal.Footer>;
+ </Modal.Footer>
+ );
+};
ModalFooter.defaultProps = {
type: 'default',
@@ -93,7 +107,7 @@ export class GlobalModalView extends React.Component {
modalClassName, msg, onConfirmed, onDeclined, confirmationButtonText, cancelButtonText, onClose} = this.props;
const ComponentToRender = modalContentComponents[modalComponentName];
return (
- <Modal show={show} bsSize={modalComponentProps && modalComponentProps.size} className={`onborading-modal ${modalClassName || ''} ${typeClass[type]}`}>
+ <Modal show={show} bsSize={modalComponentProps && modalComponentProps.size} className={`onborading-modal ${modalClassName || ''} ${type2HeaderColor[type]}`}>
<Modal.Header>
<Modal.Title>{title}</Modal.Title>
</Modal.Header>
diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
index 3b89137090..fb3b71f0c8 100644
--- a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
@@ -109,6 +109,7 @@ function NavigationMenuItem(props) {
function NavigationLink(props) {
const {item, activeItemId, onClick} = props;
+ // todo should this be button
return (
<div
key={'navAction_' + item.id}
diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
index ecfe7df116..922db05282 100644
--- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx
@@ -154,7 +154,7 @@ function VCButton({name, tooltipText, isDisabled, onClick, dataTestId}) {
return (
<OverlayTrigger placement='top' overlay={<Tooltip id='vc-tooltip'>{tooltipText}</Tooltip>}>
<div disabled={disabled} className='action-buttons-svg'>
- <SVGIcon data-test-id={dataTestId} iconClassName={disabled} onClick={onClickAction ? onClickAction : undefined} name={name}/>
+ <SVGIcon data-test-id={dataTestId} disabled={isDisabled} onClick={onClickAction ? onClickAction : undefined} name={name}/>
</div>
</OverlayTrigger>
);
diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
index 12e9a06623..3f8dbba53a 100644
--- a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx
@@ -1,6 +1,7 @@
import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
+import Button from 'sdc-ui/lib/react/Button.js';
import uuid from 'uuid-js';
export default class SelectActionTable extends React.Component {
@@ -10,13 +11,14 @@ export default class SelectActionTable extends React.Component {
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>}
+ {onAdd && onAddItem &&
+ <Button btnType='link' disabled={isReadOnlyMode === true} color='primary' iconName='plus' data-test-id='select-action-table-add' onClick={onAdd}>{onAddItem}</Button>}
<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>)}
- {Array(numOfIcons).fill().map((e, i) => <SVGIcon name='trashO' key={i} className='dummy-icon' />)}
+ {Array(numOfIcons).fill().map((e, i) => <SVGIcon name='trash-o' key={i} 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 7df7d532e8..a03f8441a4 100644
--- a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
+++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx
@@ -11,7 +11,7 @@ function tooltip (msg) {
const IconWithOverlay = ({overlayMsg}) => (
<OverlayTrigger placement='bottom' overlay={tooltip(overlayMsg)}>
- <SVGIcon name='errorCircle'/>
+ <SVGIcon name='errorCircle' color='negative'/>
</OverlayTrigger>
);
@@ -21,10 +21,10 @@ function renderErrorOrCheck({hasError, overlayMsg}) {
}
if (hasError) {
- return overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> : <SVGIcon name='errorCircle'/>;
+ return overlayMsg ? <IconWithOverlay overlayMsg={overlayMsg}/> : <SVGIcon color='negative' name='errorCircle'/>;
}
- return <SVGIcon name='checkCircle'/>;
+ return <SVGIcon name='checkCircle' color='positive'/>;
}
const SelectActionTableRow = ({children, onDelete, hasError, hasErrorIndication, overlayMsg, showDelete}) => (
@@ -32,7 +32,7 @@ const SelectActionTableRow = ({children, onDelete, hasError, hasErrorIndication,
<div className={`select-action-table-row ${hasError ? 'has-error' : ''}`}>
{children}
</div>
- {onDelete && <SVGIcon name='trashO' iconClassName={(showDelete) ? '' : 'hideDelete'} data-test-id='select-action-table-delete' onClick={(showDelete) ? onDelete : null} />}
+ {onDelete && <SVGIcon color='secondary' name='trashO' data-test-id='select-action-table-delete' onClick={onDelete} iconClassName={(showDelete) ? '' : 'hideDelete'}/>}
{hasErrorIndication && renderErrorOrCheck({hasError, overlayMsg})}
</div>
);