Adding Prettier and fixing up eslint version

Issue-ID: SDC-1094
Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>

4 files changed, 209 insertions, 130 deletions

diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
index 60c559a3d1..359af9d3b8 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx
@@ -19,50 +19,78 @@ import classnames from 'classnames';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 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';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
 
 class ListEditorItem extends React.Component {
-	static propTypes = {
-		onSelect:  PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-		onDelete:  PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-		onEdit:  PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-		children: PropTypes.node,
-		isReadOnlyMode: PropTypes.bool
-	};
+    static propTypes = {
+        onSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+        onDelete: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+        onEdit: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+        children: PropTypes.node,
+        isReadOnlyMode: PropTypes.bool
+    };
 
-	render() {
-		let {onDelete, onSelect, onEdit, children, isReadOnlyMode} = this.props;
-		let isAbilityToDelete = isReadOnlyMode === undefined ? true : !isReadOnlyMode;
-		return (
-			<div className={classnames('list-editor-item-view', {'selectable': Boolean(onSelect)})} data-test-id='list-editor-item'>
-				<div className='list-editor-item-view-content' onClick={onSelect}>
-					{children}
-				</div>
-				{(onEdit || onDelete) && <div className='list-editor-item-view-controller'>
-					{onEdit && <SVGIcon name='sliders' onClick={() => this.onClickedItem(onEdit)}/>}
-					{onDelete && isAbilityToDelete && <SVGIcon name='trashO' data-test-id='delete-list-item' onClick={() => this.onClickedItem(onDelete)}/>}
-				</div>}
-			</div>
-		);
-	}
+    render() {
+        let {
+            onDelete,
+            onSelect,
+            onEdit,
+            children,
+            isReadOnlyMode
+        } = this.props;
+        let isAbilityToDelete =
+            isReadOnlyMode === undefined ? true : !isReadOnlyMode;
+        return (
+            <div
+                className={classnames('list-editor-item-view', {
+                    selectable: Boolean(onSelect)
+                })}
+                data-test-id="list-editor-item">
+                <div
+                    className="list-editor-item-view-content"
+                    onClick={onSelect}>
+                    {children}
+                </div>
+                {(onEdit || onDelete) && (
+                    <div className="list-editor-item-view-controller">
+                        {onEdit && (
+                            <SVGIcon
+                                name="sliders"
+                                onClick={() => this.onClickedItem(onEdit)}
+                            />
+                        )}
+                        {onDelete &&
+                            isAbilityToDelete && (
+                                <SVGIcon
+                                    name="trashO"
+                                    data-test-id="delete-list-item"
+                                    onClick={() => this.onClickedItem(onDelete)}
+                                />
+                            )}
+                    </div>
+                )}
+            </div>
+        );
+    }
 
-	onClickedItem(callBackFunc) {
-		if(typeof callBackFunc === 'function') {
-			let {isCheckedOut} = this.props;
-			if (isCheckedOut === false) {
-				store.dispatch({
-					type: modalActionTypes.GLOBAL_MODAL_WARNING,
-					data: {
-						title: i18n('Error'),
-						msg: i18n('This item is checkedin/submitted, Click Check Out to continue')
-					}
-				});
-			}
-			else {
-				callBackFunc();
-			}
-		}
-	}
+    onClickedItem(callBackFunc) {
+        if (typeof callBackFunc === 'function') {
+            let { isCheckedOut } = this.props;
+            if (isCheckedOut === false) {
+                store.dispatch({
+                    type: modalActionTypes.GLOBAL_MODAL_WARNING,
+                    data: {
+                        title: i18n('Error'),
+                        msg: i18n(
+                            'This item is checkedin/submitted, Click Check Out to continue'
+                        )
+                    }
+                });
+            } else {
+                callBackFunc();
+            }
+        }
+    }
 }
 
 export default ListEditorItem;
diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx
index 839f9a504a..509ea176a5 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx
+++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx
@@ -15,10 +15,8 @@
  */
 import React from 'react';
 
-export const ListEditorItemViewField = ({children}) => (
-	<div className='list-editor-item-view-field'>
-		{children}
-	</div>
+export const ListEditorItemViewField = ({ children }) => (
+    <div className="list-editor-item-view-field">{children}</div>
 );
 
 export default ListEditorItemViewField;
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;
diff --git a/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js
index 81125c84ba..67258c956d 100644
--- a/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js
+++ b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js
@@ -1,27 +1,25 @@
 import React from 'react';
-import {storiesOf, action} from '@kadira/storybook';
+import { storiesOf, action } from '@kadira/storybook';
 import ListEditorView from './ListEditorView.jsx';
 import ListEditorItemView from './ListEditorItemView.jsx';
 import ListEditorItemField from './ListEditorItemViewField.jsx';
-import {text, number} from '@kadira/storybook-addon-knobs';
-import {withKnobs} from '@kadira/storybook-addon-knobs';
+import { text, number } from '@kadira/storybook-addon-knobs';
+import { withKnobs } from '@kadira/storybook-addon-knobs';
 
-function makeChildren({onEdit = false, onDelete = false} = {}) {
-    return (
-        [...Array(number('Items', 2)).keys()].map(index => (
-            <ListEditorItemView 
-                key={index} 
-                onEdit={onEdit ? onEdit : undefined}
-                onDelete={onDelete ? onDelete : undefined}>
-				<ListEditorItemField>
-                    <div>{text('field 1', 'Lorum Ipsum')}</div>
-				</ListEditorItemField>
-				<ListEditorItemField>
-                    <div>{text('field 2', 'Lorum Ipsum')}</div>
-				</ListEditorItemField>
-            </ListEditorItemView>)
-        )
-    );
+function makeChildren({ onEdit = false, onDelete = false } = {}) {
+    return [...Array(number('Items', 2)).keys()].map(index => (
+        <ListEditorItemView
+            key={index}
+            onEdit={onEdit ? onEdit : undefined}
+            onDelete={onDelete ? onDelete : undefined}>
+            <ListEditorItemField>
+                <div>{text('field 1', 'Lorum Ipsum')}</div>
+            </ListEditorItemField>
+            <ListEditorItemField>
+                <div>{text('field 2', 'Lorum Ipsum')}</div>
+            </ListEditorItemField>
+        </ListEditorItemView>
+    ));
 }
 
 const stories = storiesOf('ListEditor', module);
@@ -29,32 +27,49 @@ stories.addDecorator(withKnobs);
 
 stories
     .add('regular', () => (
-        <ListEditorView title='List Editor'>
-        {makeChildren()}
-        </ListEditorView>
+        <ListEditorView title="List Editor">{makeChildren()}</ListEditorView>
     ))
     .add('two columns', () => (
-        <ListEditorView title='List Editor' twoColumns>
+        <ListEditorView title="List Editor" twoColumns>
             {makeChildren()}
         </ListEditorView>
     ))
     .add('with add', () => (
-        <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
-        {makeChildren()}
+        <ListEditorView
+            title="List Editor"
+            onAdd={action('onAdd')}
+            plusButtonTitle="Add"
+            twoColumns>
+            {makeChildren()}
         </ListEditorView>
     ))
     .add('with delete', () => (
-        <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
-        {makeChildren({onDelete: action('onDelete')})}
+        <ListEditorView
+            title="List Editor"
+            onAdd={action('onAdd')}
+            plusButtonTitle="Add"
+            twoColumns>
+            {makeChildren({ onDelete: action('onDelete') })}
         </ListEditorView>
     ))
     .add('with edit', () => (
-        <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
-        {makeChildren({onEdit: action('onEdit')})}
+        <ListEditorView
+            title="List Editor"
+            onAdd={action('onAdd')}
+            plusButtonTitle="Add"
+            twoColumns>
+            {makeChildren({ onEdit: action('onEdit') })}
         </ListEditorView>
     ))
     .add('with edit and delete', () => (
-        <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns>
-        {makeChildren({onDelete: action('onDelete'), onEdit: action('onEdit')})}
+        <ListEditorView
+            title="List Editor"
+            onAdd={action('onAdd')}
+            plusButtonTitle="Add"
+            twoColumns>
+            {makeChildren({
+                onDelete: action('onDelete'),
+                onEdit: action('onEdit')
+            })}
         </ListEditorView>
     ));