1 files changed, 61 insertions, 38 deletions
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
index 1ee91f31f6..cc805e9ada 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
@@ -1,12 +1,63 @@
+/*!
+ * 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 from 'react';
-import FontAwesome from 'react-fontawesome';
-import Input from 'react-bootstrap/lib/Input.js';
+import classnames from 'classnames';
+import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx';
 
+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' : ''}`}>
+				 { onAdd &&
+					 <div className='list-editor-view-add-title' data-test-id='add-button' onClick={onAdd}>
+						 <span>{`+ ${plusButtonTitle}`}</span>
+					 </div>
+				 }
+			 </div>
+		 </div>
+	 );
+};
+
+const ListEditorScroller = ({children, twoColumns}) => {
+	return (
+		<div className='list-editor-view-list-scroller'>
+			<div className={classnames('list-editor-view-list', {'two-columns': twoColumns})}>
+				{children}
+			</div>
+		</div>
+	);
+};
+
+const FilterWrapper = ({onFilter, filterValue}) => {
+	return (
+		<div className='expandble-search-wrapper'>
+			<ExpandableInput
+				onChange={onFilter}
+				iconType='search'
+				value={filterValue}/>
+		</div>
+	);
+};
 
 class ListEditorView extends React.Component {
 
 	static defaultProps = {
-		className: ''
+		className: '',
+		twoColumns: false
 	};
 
 	static propTypes = {
@@ -17,45 +68,17 @@ class ListEditorView extends React.Component {
 		onFilter: React.PropTypes.func,
 		className: React.PropTypes.string,
 		isReadOnlyMode: React.PropTypes.bool,
-		placeholder: React.PropTypes.string
+		placeholder: React.PropTypes.string,
+		twoColumns: React.PropTypes.bool
 	};
 
 	render() {
-		let {title, plusButtonTitle, onAdd, children, filterValue, onFilter, className, placeholder, isReadOnlyMode} = this.props;
+		let {title, plusButtonTitle, onAdd, children, onFilter, className, isReadOnlyMode, twoColumns, filterValue} = this.props;
 		return (
-			<div className={`list-editor-view ${className}`}>
-				{title && onAdd && <div className='list-editor-view-title'>{title}</div>}
-				<div className='list-editor-view-actions'>
-					{title && !onAdd && <div className='list-editor-view-title-inline'>{title}</div>}
-					<div className={`list-editor-view-add-controller${isReadOnlyMode ? ' disabled' : ''}`} >
-						{ onAdd &&
-							<div onClick={onAdd}>
-								<span className='plus-icon-button pull-left'/>
-								<span>{plusButtonTitle}</span>
-							</div>
-						}
-					</div>
-
-					{
-						onFilter &&
-							<div className='list-editor-view-search search-wrapper'>
-								<Input
-									ref='filter'
-									type='text'
-									value={filterValue}
-									name='list-editor-view-search'
-									placeholder={placeholder}
-									groupClassName='search-input-control'
-									onChange={() => onFilter(this.refs.filter.getValue())}/>
-								<FontAwesome name='filter' className='filter-icon'/>
-							</div>
-					}
-				</div>
-				<div className='list-editor-view-list-scroller'>
-					<div className='list-editor-view-list'>
-						{children}
-					</div>
-				</div>
+			<div className={classnames('list-editor-view', className)}>
+				<ListEditorHeader onAdd={onAdd} isReadOnlyMode={isReadOnlyMode} plusButtonTitle={plusButtonTitle} title={title}/>
+				{onFilter && (children.length || filterValue) && <FilterWrapper onFilter={onFilter} filterValue={filterValue}/>}
+				<ListEditorScroller children={children} twoColumns={twoColumns}/>
 			</div>
 		);
 	}