Adding Prettier and fixing up eslint version

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

1 files changed, 131 insertions, 88 deletions

diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
index 2eda7e69bf..61121df335 100644
--- a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
@@ -19,116 +19,159 @@ import classnames from 'classnames';
 import Collapse from 'react-bootstrap/lib/Collapse.js';
 
 class NavigationSideBar extends React.Component {
-	static PropTypes = {
-		activeItemId: PropTypes.string.isRequired,
-		onSelect: PropTypes.func,
-		onToggle: PropTypes.func,
-		groups: PropTypes.array,
-		disabled: PropTypes.bool
-	};
+    static PropTypes = {
+        activeItemId: PropTypes.string.isRequired,
+        onSelect: PropTypes.func,
+        onToggle: PropTypes.func,
+        groups: PropTypes.array,
+        disabled: PropTypes.bool
+    };
 
-	constructor(props) {
-		super(props);
-		this.state = {
-			activeItemId: null
-		};
-		this.handleItemClicked = this.handleItemClicked.bind(this);
-	}
+    constructor(props) {
+        super(props);
+        this.state = {
+            activeItemId: null
+        };
+        this.handleItemClicked = this.handleItemClicked.bind(this);
+    }
 
-	render() {
-		let {groups, activeItemId, disabled = false} = this.props;
+    render() {
+        let { groups, activeItemId, disabled = false } = this.props;
 
-		return (
-			<div className={`navigation-side-content ${disabled ? 'disabled' : ''}`}>
-				{groups.map(group => (
-					<NavigationMenu menu={group} activeItemId={activeItemId} onNavigationItemClick={this.handleItemClicked} key={'menu_' + group.id} />
-				))}
-			</div>
-		);
-	}
+        return (
+            <div
+                className={`navigation-side-content ${
+                    disabled ? 'disabled' : ''
+                }`}>
+                {groups.map(group => (
+                    <NavigationMenu
+                        menu={group}
+                        activeItemId={activeItemId}
+                        onNavigationItemClick={this.handleItemClicked}
+                        key={'menu_' + group.id}
+                    />
+                ))}
+            </div>
+        );
+    }
 
-	handleItemClicked(event, item) {
-		event.stopPropagation();
-		if(this.props.onToggle) {
-			this.props.onToggle(this.props.groups, item.id);
-		}
-		if(item.onSelect) {
-			item.onSelect();
-		}
-		if(this.props.onSelect) {
-			this.props.onSelect(item);
-		}
-	}
+    handleItemClicked(event, item) {
+        event.stopPropagation();
+        if (this.props.onToggle) {
+            this.props.onToggle(this.props.groups, item.id);
+        }
+        if (item.onSelect) {
+            item.onSelect();
+        }
+        if (this.props.onSelect) {
+            this.props.onSelect(item);
+        }
+    }
 }
 
 class NavigationMenu extends React.Component {
-	static PropTypes = {
-		activeItemId: PropTypes.string.isRequired,
-		onNavigationItemClick: PropTypes.func,
-		menu: PropTypes.array
-	};
+    static PropTypes = {
+        activeItemId: PropTypes.string.isRequired,
+        onNavigationItemClick: PropTypes.func,
+        menu: PropTypes.array
+    };
 
-	render() {
-		const {menu, activeItemId, onNavigationItemClick} = this.props;
-		return (
-			<div className='navigation-group'  key={menu.id}>
-				<NavigationMenuHeader title={menu.name} />
-				<NavigationMenuItems items={menu.items} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />
-			</div>);
-	}
+    render() {
+        const { menu, activeItemId, onNavigationItemClick } = this.props;
+        return (
+            <div className="navigation-group" key={menu.id}>
+                <NavigationMenuHeader title={menu.name} />
+                <NavigationMenuItems
+                    items={menu.items}
+                    activeItemId={activeItemId}
+                    onNavigationItemClick={onNavigationItemClick}
+                />
+            </div>
+        );
+    }
 }
 
 function NavigationMenuHeader(props) {
-	return <div className='group-name' data-test-id='navbar-group-name'>{props.title}</div>;
+    return (
+        <div className="group-name" data-test-id="navbar-group-name">
+            {props.title}
+        </div>
+    );
 }
 
 function getItemDataTestId(itemId) {
-	return itemId.split('|')[0];
+    return itemId.split('|')[0];
 }
 function NavigationMenuItems(props) {
-	const {items, activeItemId, onNavigationItemClick} = props;
-	return (
-		<div className='navigation-group-items'>
-			{
-				items && items.map(item => (<NavigationMenuItem key={'menuItem_' + item.id} item={item} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />))
-			}
-		</div>
-	);
+    const { items, activeItemId, onNavigationItemClick } = props;
+    return (
+        <div className="navigation-group-items">
+            {items &&
+                items.map(item => (
+                    <NavigationMenuItem
+                        key={'menuItem_' + item.id}
+                        item={item}
+                        activeItemId={activeItemId}
+                        onNavigationItemClick={onNavigationItemClick}
+                    />
+                ))}
+        </div>
+    );
 }
 
 function NavigationMenuItem(props) {
-	const {onNavigationItemClick, item, activeItemId} = props;
-	const isGroup = item.items && item.items.length > 0;
-	return (
-		<div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})} key={'item_' + item.id}>
-			<NavigationLink item={item} activeItemId={activeItemId} onClick={onNavigationItemClick} />
-			{isGroup && <Collapse in={item.expanded} data-test-id={'navigation-group-' + getItemDataTestId(item.id)}>
-				<div>
-						{item.items.map(subItem => (<NavigationMenuItem key={'menuItem_' + subItem.id} item={subItem} onNavigationItemClick={onNavigationItemClick} activeItemId={activeItemId}  />)) }
-				</div>
-			</Collapse>
-			}
-		</div>
-	);
+    const { onNavigationItemClick, item, activeItemId } = props;
+    const isGroup = item.items && item.items.length > 0;
+    return (
+        <div
+            className={classnames('navigation-group-item', {
+                'selected-item': item.id === activeItemId
+            })}
+            key={'item_' + item.id}>
+            <NavigationLink
+                item={item}
+                activeItemId={activeItemId}
+                onClick={onNavigationItemClick}
+            />
+            {isGroup && (
+                <Collapse
+                    in={item.expanded}
+                    data-test-id={
+                        'navigation-group-' + getItemDataTestId(item.id)
+                    }>
+                    <div>
+                        {item.items.map(subItem => (
+                            <NavigationMenuItem
+                                key={'menuItem_' + subItem.id}
+                                item={subItem}
+                                onNavigationItemClick={onNavigationItemClick}
+                                activeItemId={activeItemId}
+                            />
+                        ))}
+                    </div>
+                </Collapse>
+            )}
+        </div>
+    );
 }
 
 function NavigationLink(props) {
-	const {item, activeItemId, onClick} = props;
-	// todo should this be button
-	return (
-		<div
-			key={'navAction_' + item.id}
-			className={classnames('navigation-group-item-name', {
-				'selected': item.id === activeItemId,
-				'disabled': item.disabled,
-				'bold-name': item.expanded,
-				'hidden': item.hidden
-			})}
-			onClick={(event) => onClick(event, item)}
-			data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}>
-			{item.name}
-		</div>
-	);
+    const { item, activeItemId, onClick } = props;
+    // todo should this be button
+    return (
+        <div
+            key={'navAction_' + item.id}
+            className={classnames('navigation-group-item-name', {
+                selected: item.id === activeItemId,
+                disabled: item.disabled,
+                'bold-name': item.expanded,
+                hidden: item.hidden
+            })}
+            onClick={event => onClick(event, item)}
+            data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}>
+            {item.name}
+        </div>
+    );
 }
 
 export default NavigationSideBar;