Merge "[SDC] OnBoard with enabled tests and features"

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>
 );