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, 175 insertions, 108 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx
index fd5c04db92..01ca50cd4f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/UserNotifications.jsx
@@ -19,126 +19,193 @@ import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import i18n from 'nfvo-utils/i18n/i18n.js';
-import {notificationType} from './UserNotificationsConstants.js';
+import { notificationType } from './UserNotificationsConstants.js';
 import ShowMore from 'react-show-more';
 
-const Notification = ({notification, users, onActionClicked, getNotificationTypeDesc}) => {
-	const {eventType, read, eventAttributes, dateTime} = notification;
-	const {itemName, userId, description, versionName, permission, granted} = eventAttributes;
-	const {fullName: userName} = users.find(user => user.userId === userId);
-	return (
-		<div className={classnames('notification', {'unread': !read})}>
-			<div className='notification-data'>
-				<div className='item-name'>
-					{itemName}
-					{versionName && <span>&nbsp;&nbsp;&nbsp;v{versionName}</span>}
-					{!read && <div className='unread-circle-icon'></div> }
-				</div>
-				<div className='flex-items'>
-					<div className='type'>{getNotificationTypeDesc(eventType, permission, granted)}</div>
-					<div className='separator'/>
-					<div className='user-name'>{`${i18n('By')} ${userName}`}</div>
-				</div>
-				{(description || versionName) && <div className='description'>
-					{description && <ShowMore anchorClass='more-less' lines={2} more={i18n('More')} less={i18n('Less')}>
-						{description}
-					</ShowMore>}
-					{eventType === notificationType.ITEM_CHANGED.SUBMIT &&
-						<div>
-							<div>{i18n('Version {versionName} was submitted.', {versionName: versionName})}</div>
-						</div>
-					}
-				</div>
-				}
-				<div className='date'>{dateTime}</div>
-			</div>
-			<div className='notification-action'>
-				<div className={classnames('action-button', {'hidden': read})} onClick={() => onActionClicked(notification)}>
-					{eventType === notificationType.PERMISSION_CHANGED
-						|| eventType === notificationType.ITEM_DELETED
-						|| eventType === notificationType.ITEM_ARCHIVED
-						|| eventType === notificationType.ITEM_RESTORED ? i18n('OK') : i18n('Sync')}
-				</div>
-			</div>
-		</div>
-	);
+const Notification = ({
+    notification,
+    users,
+    onActionClicked,
+    getNotificationTypeDesc
+}) => {
+    const { eventType, read, eventAttributes, dateTime } = notification;
+    const {
+        itemName,
+        userId,
+        description,
+        versionName,
+        permission,
+        granted
+    } = eventAttributes;
+    const { fullName: userName } = users.find(user => user.userId === userId);
+    return (
+        <div className={classnames('notification', { unread: !read })}>
+            <div className="notification-data">
+                <div className="item-name">
+                    {itemName}
+                    {versionName && (
+                        <span>&nbsp;&nbsp;&nbsp;v{versionName}</span>
+                    )}
+                    {!read && <div className="unread-circle-icon" />}
+                </div>
+                <div className="flex-items">
+                    <div className="type">
+                        {getNotificationTypeDesc(
+                            eventType,
+                            permission,
+                            granted
+                        )}
+                    </div>
+                    <div className="separator" />
+                    <div className="user-name">{`${i18n(
+                        'By'
+                    )} ${userName}`}</div>
+                </div>
+                {(description || versionName) && (
+                    <div className="description">
+                        {description && (
+                            <ShowMore
+                                anchorClass="more-less"
+                                lines={2}
+                                more={i18n('More')}
+                                less={i18n('Less')}>
+                                {description}
+                            </ShowMore>
+                        )}
+                        {eventType === notificationType.ITEM_CHANGED.SUBMIT && (
+                            <div>
+                                <div>
+                                    {i18n(
+                                        'Version {versionName} was submitted.',
+                                        { versionName: versionName }
+                                    )}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                )}
+                <div className="date">{dateTime}</div>
+            </div>
+            <div className="notification-action">
+                <div
+                    className={classnames('action-button', { hidden: read })}
+                    onClick={() => onActionClicked(notification)}>
+                    {eventType === notificationType.PERMISSION_CHANGED ||
+                    eventType === notificationType.ITEM_DELETED ||
+                    eventType === notificationType.ITEM_ARCHIVED ||
+                    eventType === notificationType.ITEM_RESTORED
+                        ? i18n('OK')
+                        : i18n('Sync')}
+                </div>
+            </div>
+        </div>
+    );
 };
 
 function getNotificationTypeDesc(eventType, permission, granted) {
-	switch (eventType) {
-		case notificationType.PERMISSION_CHANGED:
-			const grantedStr = granted ? i18n('Granted') : i18n('Taken');
-			return `${i18n('Permission')} ${grantedStr}: ${permission}`;			
-		case notificationType.ITEM_CHANGED.COMMIT:
-			return i18n('Your Copy Is Out Of Sync');
-		case notificationType.ITEM_CHANGED.SUBMIT:
-			return i18n('Version Submitted');
-		case notificationType.ITEM_DELETED:
-			return i18n('Item was deleted');
-		case notificationType.ITEM_ARCHIVED:
-			return i18n('Item was archived');
-		case notificationType.ITEM_RESTORED:
-			return i18n('Item was restored from archive');
-	}
+    switch (eventType) {
+        case notificationType.PERMISSION_CHANGED:
+            const grantedStr = granted ? i18n('Granted') : i18n('Taken');
+            return `${i18n('Permission')} ${grantedStr}: ${permission}`;
+        case notificationType.ITEM_CHANGED.COMMIT:
+            return i18n('Your Copy Is Out Of Sync');
+        case notificationType.ITEM_CHANGED.SUBMIT:
+            return i18n('Version Submitted');
+        case notificationType.ITEM_DELETED:
+            return i18n('Item was deleted');
+        case notificationType.ITEM_ARCHIVED:
+            return i18n('Item was archived');
+        case notificationType.ITEM_RESTORED:
+            return i18n('Item was restored from archive');
+    }
 }
 
 class UserNotifications extends React.Component {
+    static propTypes = {
+        currentScreen: PropTypes.object,
+        notificationsList: PropTypes.array,
+        usersList: PropTypes.array,
+        lastScanned: PropTypes.string,
+        endOfPage: PropTypes.string,
+        onLoadPrevNotifications: PropTypes.func,
+        onSync: PropTypes.func,
+        updateNotification: PropTypes.func,
+        onLoadItemsLists: PropTypes.func
+    };
 
-	static propTypes = {
-		currentScreen: PropTypes.object,
-		notificationsList: PropTypes.array,
-		usersList: PropTypes.array,
-		lastScanned: PropTypes.string,
-		endOfPage:PropTypes.string,
-		onLoadPrevNotifications: PropTypes.func,
-		onSync: PropTypes.func,
-		updateNotification: PropTypes.func,
-		onLoadItemsLists: PropTypes.func
-	};
+    render() {
+        const {
+            notificationsList = [],
+            usersList,
+            lastScanned,
+            endOfPage
+        } = this.props;
 
-	render() {
-		const {notificationsList = [], usersList, lastScanned, endOfPage} = this.props;
+        return (
+            <div className="user-notifications">
+                <div className="notifications-title">
+                    {i18n('Notifications')}
+                </div>
+                <div
+                    className="notifications-list"
+                    ref="notificationList"
+                    onScroll={() =>
+                        this.loadPrevNotifications(lastScanned, endOfPage)
+                    }>
+                    {notificationsList.map(notification => (
+                        <Notification
+                            key={notification.eventId}
+                            notification={notification}
+                            users={usersList}
+                            onActionClicked={notification =>
+                                this.onActionClicked(notification)
+                            }
+                            getNotificationTypeDesc={getNotificationTypeDesc}
+                        />
+                    ))}
+                </div>
+            </div>
+        );
+    }
 
-		return (
-			<div className='user-notifications'>
-				<div className='notifications-title'>{i18n('Notifications')}</div>
-				<div className='notifications-list' ref='notificationList' onScroll={() => this.loadPrevNotifications(lastScanned, endOfPage)}>
-				{
-					notificationsList.map(notification => (
-						<Notification key={notification.eventId} notification={notification} users={usersList}
-							onActionClicked={notification => this.onActionClicked(notification)}
-							getNotificationTypeDesc={getNotificationTypeDesc}/>))
-				}
-				</div>
-			</div>
-		);
-	}
+    onActionClicked(notification) {
+        const {
+            onSync,
+            updateNotification,
+            currentScreen,
+            onLoadItemsLists
+        } = this.props;
+        const {
+            eventType,
+            eventAttributes: { itemId, itemName, versionId, versionName }
+        } = notification;
+        if (
+            eventType !== notificationType.PERMISSION_CHANGED &&
+            eventType !== notificationType.ITEM_DELETED &&
+            eventType !== notificationType.ITEM_ARCHIVED &&
+            eventType !== notificationType.ITEM_RESTORED
+        ) {
+            onSync({ itemId, itemName, versionId, versionName, currentScreen });
+        } else {
+            onLoadItemsLists();
+        }
+        updateNotification(notification);
+    }
 
-	onActionClicked(notification) {
-		const {onSync, updateNotification, currentScreen, onLoadItemsLists} = this.props;
-		const {eventType, eventAttributes: {itemId, itemName, versionId, versionName}} = notification;		
-		if(eventType !== notificationType.PERMISSION_CHANGED &&
-			eventType !== notificationType.ITEM_DELETED &&
-			eventType !== notificationType.ITEM_ARCHIVED &&
-			eventType !== notificationType.ITEM_RESTORED) {
-			onSync({itemId, itemName, versionId, versionName, currentScreen});
-		}
-		else {
-			onLoadItemsLists();
-		}
-		updateNotification(notification);
-	}
+    loadPrevNotifications(lastScanned, endOfPage) {
+        if (endOfPage && lastScanned) {
+            let element = ReactDOM.findDOMNode(this.refs['notificationList']);
+            const { onLoadPrevNotifications } = this.props;
 
-	loadPrevNotifications(lastScanned, endOfPage) {
-		if(endOfPage && lastScanned) {
-			let element = ReactDOM.findDOMNode(this.refs['notificationList']);
-			const {onLoadPrevNotifications} = this.props;
-
-			if (element && element.clientHeight + element.scrollTop === element.scrollHeight) {
-				onLoadPrevNotifications(lastScanned, endOfPage);
-			}
-		}
-	}
+            if (
+                element &&
+                element.clientHeight + element.scrollTop ===
+                    element.scrollHeight
+            ) {
+                onLoadPrevNotifications(lastScanned, endOfPage);
+            }
+        }
+    }
 }
 
-export default UserNotifications;
\ No newline at end of file
+export default UserNotifications;