1 files changed, 93 insertions, 55 deletions
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
index 16823b7dc5..f71372ce1a 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx
@@ -19,69 +19,107 @@ import Button from 'sdc-ui/lib/react/Button.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>
-				 { onAdd &&
-					 <Button data-test-id='add-button' iconName='plusThin' btnType='link' onClick={onAdd} disabled={isReadOnlyMode === true}>{plusButtonTitle}</Button>
-				 }
-			 </div>
-		 </div>
-	 );
+const ListEditorHeader = ({
+    onAdd,
+    isReadOnlyMode,
+    title,
+    plusButtonTitle
+}) => {
+    return (
+        <div className="list-editor-view-header">
+            {title && <div className="list-editor-view-title">{title}</div>}
+            <div>
+                {onAdd && (
+                    <Button
+                        data-test-id="add-button"
+                        iconName="plusThin"
+                        btnType="link"
+                        onClick={onAdd}
+                        disabled={isReadOnlyMode === true}>
+                        {plusButtonTitle}
+                    </Button>
+                )}
+            </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 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>
-	);
+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: '',
+        twoColumns: false
+    };
 
-	static defaultProps = {
-		className: '',
-		twoColumns: false
-	};
-
-	static propTypes = {
-		title: PropTypes.string,
-		plusButtonTitle: PropTypes.string,
-		children: PropTypes.node,
-		filterValue: PropTypes.string,
-		onFilter: PropTypes.func,
-		className: PropTypes.string,
-		isReadOnlyMode: PropTypes.bool,
-		placeholder: PropTypes.string,
-		twoColumns: PropTypes.bool
-	};
-
-	render() {
-		let {title, plusButtonTitle, onAdd, children, onFilter, className, isReadOnlyMode, twoColumns, filterValue} = this.props;
-		return (
-			<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>
-		);
-	}
+    static propTypes = {
+        title: PropTypes.string,
+        plusButtonTitle: PropTypes.string,
+        children: PropTypes.node,
+        filterValue: PropTypes.string,
+        onFilter: PropTypes.func,
+        className: PropTypes.string,
+        isReadOnlyMode: PropTypes.bool,
+        placeholder: PropTypes.string,
+        twoColumns: PropTypes.bool
+    };
 
+    render() {
+        let {
+            title,
+            plusButtonTitle,
+            onAdd,
+            children,
+            onFilter,
+            className,
+            isReadOnlyMode,
+            twoColumns,
+            filterValue
+        } = this.props;
+        return (
+            <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>
+        );
+    }
 }
 export default ListEditorView;