Adding Prettier and fixing up eslint version

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

2 files changed, 254 insertions, 138 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
index 26f8450f4c..74d88f0b52 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/PermissionsView.jsx
@@ -22,61 +22,108 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 
 const maxContributors = 6;
 
-function extraUsersTooltip (extraUsers) {
-	return (
-		<Tooltip className='extra-users-tooltip' id='extra-users-tooltip-id'>
-			{extraUsers.map(extraUser => <div key={extraUser.userId} className='extra-user'>{extraUser.fullName}</div>)}
-		</Tooltip>
-	);
+function extraUsersTooltip(extraUsers) {
+    return (
+        <Tooltip className="extra-users-tooltip" id="extra-users-tooltip-id">
+            {extraUsers.map(extraUser => (
+                <div key={extraUser.userId} className="extra-user">
+                    {extraUser.fullName}
+                </div>
+            ))}
+        </Tooltip>
+    );
 }
 
-const User = ({user, isCurrentUser, dataTestId}) => (
-	<SVGIcon className={`user-view ${isCurrentUser ? 'current-user' : ''}`} name='user' label={user.fullName} labelPosition='right' color='primary'
-		data-test-id={dataTestId}/>
+const User = ({ user, isCurrentUser, dataTestId }) => (
+    <SVGIcon
+        className={`user-view ${isCurrentUser ? 'current-user' : ''}`}
+        name="user"
+        label={user.fullName}
+        labelPosition="right"
+        color="primary"
+        data-test-id={dataTestId}
+    />
 );
 
-const Owner = ({owner, isCurrentUser}) => (
-	<div className='owner-view'>
-		<div className='permissions-view-title'>{i18n('Owner')}</div>
-		<User user={owner} isCurrentUser={isCurrentUser} dataTestId='owner'/>
-	</div>
+const Owner = ({ owner, isCurrentUser }) => (
+    <div className="owner-view">
+        <div className="permissions-view-title">{i18n('Owner')}</div>
+        <User user={owner} isCurrentUser={isCurrentUser} dataTestId="owner" />
+    </div>
 );
 
-const Contributors = ({contributors, owner, currentUser, onManagePermissions, isManual}) => {
-	let extraUsers = contributors.length - maxContributors;
-	return (
-		<div className='contributors-view'>
-			<div className='permissions-view-title'>{i18n('Contributors')}</div>
-			{contributors.slice(0, maxContributors).map(contributor =>
-				<User key={contributor.userId} user={contributor} isCurrentUser={contributor.userId === currentUser.userId} dataTestId='contributor'/>
-			)}
-			{extraUsers > 0 &&
-				<OverlayTrigger placement='bottom' overlay={extraUsersTooltip(contributors.slice(maxContributors))}>
-					<div className='extra-contributors'>{`+${extraUsers}`}</div>
-				</OverlayTrigger>
-			}
-			{currentUser.userId === owner.userId && !isManual &&
-				<span
-					className='manage-permissions'
-					onClick={onManagePermissions}
-					data-test-id='versions-page-manage-permissions'>
-					{i18n('Manage Permissions')}
-				</span>
-			}
-	</div>
-	);
+const Contributors = ({
+    contributors,
+    owner,
+    currentUser,
+    onManagePermissions,
+    isManual
+}) => {
+    let extraUsers = contributors.length - maxContributors;
+    return (
+        <div className="contributors-view">
+            <div className="permissions-view-title">{i18n('Contributors')}</div>
+            {contributors
+                .slice(0, maxContributors)
+                .map(contributor => (
+                    <User
+                        key={contributor.userId}
+                        user={contributor}
+                        isCurrentUser={
+                            contributor.userId === currentUser.userId
+                        }
+                        dataTestId="contributor"
+                    />
+                ))}
+            {extraUsers > 0 && (
+                <OverlayTrigger
+                    placement="bottom"
+                    overlay={extraUsersTooltip(
+                        contributors.slice(maxContributors)
+                    )}>
+                    <div className="extra-contributors">{`+${extraUsers}`}</div>
+                </OverlayTrigger>
+            )}
+            {currentUser.userId === owner.userId &&
+                !isManual && (
+                    <span
+                        className="manage-permissions"
+                        onClick={onManagePermissions}
+                        data-test-id="versions-page-manage-permissions">
+                        {i18n('Manage Permissions')}
+                    </span>
+                )}
+        </div>
+    );
 };
 
-const PermissionsView = ({owner, contributors, currentUser = {}, onManagePermissions, isManual}) => (
-	<div className='versions-page-permissions-view-wrapper'>
-		<div className='permissions-view-wrapper-title'>{i18n('Permissions')}</div>
-		<div className='permissions-view-content'>
-			<div className='permissions-view'>
-				<Owner owner={owner} isCurrentUser={owner.userId === currentUser.userId} />
-				<Contributors owner={owner} contributors={contributors} currentUser={currentUser} onManagePermissions={onManagePermissions} isManual={isManual}/>
-			</div>
-		</div>
-	</div>
+const PermissionsView = ({
+    owner,
+    contributors,
+    currentUser = {},
+    onManagePermissions,
+    isManual
+}) => (
+    <div className="versions-page-permissions-view-wrapper">
+        <div className="permissions-view-wrapper-title">
+            {i18n('Permissions')}
+        </div>
+        <div className="permissions-view-content">
+            <div className="permissions-view">
+                <Owner
+                    owner={owner}
+                    isCurrentUser={owner.userId === currentUser.userId}
+                />
+                <Contributors
+                    owner={owner}
+                    contributors={contributors}
+                    currentUser={currentUser}
+                    onManagePermissions={onManagePermissions}
+                    isManual={isManual}
+                />
+            </div>
+        </div>
+    </div>
 );
 
 export default PermissionsView;
diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
index 47255eb9dc..d74805eccc 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/components/VersionList.jsx
@@ -20,108 +20,177 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 
-const formatTime = (time) => {
-	if (!time) { return ''; }
+const formatTime = time => {
+    if (!time) {
+        return '';
+    }
 
-	const date = new Date(time);
-	const options = {
-		year: 'numeric',
-		month: 'short',
-		day: 'numeric',
-		hour: '2-digit',
-		minute: '2-digit'
-	};
-	const newDate = date.toLocaleTimeString('en-US', options);
+    const date = new Date(time);
+    const options = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    };
+    const newDate = date.toLocaleTimeString('en-US', options);
 
-	return newDate;
+    return newDate;
 };
 
 const DescriptionField = ({ className, text, useTooltip }) => {
-	if (useTooltip) {
-		return (
-			<div className={className}>
-				<OverlayTrigger
-					placement='bottom'
-					overlay={<Tooltip className='version-description-tooltip' id='version-description-tooltip'>{text}</Tooltip>}>
-					<div className='description-text'>{text}</div>
-				</OverlayTrigger>
-			</div>
-		);
-	}
-	return <div className={className}>{text}</div>;
+    if (useTooltip) {
+        return (
+            <div className={className}>
+                <OverlayTrigger
+                    placement="bottom"
+                    overlay={
+                        <Tooltip
+                            className="version-description-tooltip"
+                            id="version-description-tooltip">
+                            {text}
+                        </Tooltip>
+                    }>
+                    <div className="description-text">{text}</div>
+                </OverlayTrigger>
+            </div>
+        );
+    }
+    return <div className={className}>{text}</div>;
 };
 
-const VersionListItem = ({ data, onSelectVersion, onNavigateToVersion, onCreateVersion, isHeader, isSelected, isCollaborator }) => {
+const VersionListItem = ({
+    data,
+    onSelectVersion,
+    onNavigateToVersion,
+    onCreateVersion,
+    isHeader,
+    isSelected,
+    isCollaborator
+}) => {
+    let { modificationTime, name, status, description, additionalInfo } = data;
+    const modificationText = !isHeader
+        ? formatTime(modificationTime)
+        : i18n('Last Edited On');
 
-	let {modificationTime, name, status, description, additionalInfo} = data;
-	const modificationText = !isHeader ? formatTime(modificationTime) : i18n('Last Edited On');
-
-	return (
-		<div
-			data-test-id='version-item-row'
-			className={`version-item-row ${isHeader ? 'header-row' : 'clickable'} ${isSelected ? 'selected' : ''}`}
-			onClick={e => {
-				e.stopPropagation();
-				onSelectVersion();
-				onNavigateToVersion();
-			}}>
-			<div className={`version-item-field ${isHeader ? 'header-field item-version' : 'item-version'}`}>{name}</div>
-			<div className={`version-item-field ${isHeader ? 'header-field item-status' : 'item-status'}`}>{status}</div>
-			<div className={`version-item-field ${isHeader ? 'header-field' : 'item-last-edited'}`}>{modificationText}</div>
-			<DescriptionField
-				className={`version-item-field ${isHeader ? 'header-field header-description' : 'item-description'}`}
-				useTooltip={!isHeader && description}
-				text={description} />
-
-				{
-					isHeader ?
-						<div className='version-item-field header-field actions'>{i18n('Actions')}</div>
-					:
-						<div className='version-item-field item-actions'>
-							<div className='version-item-field item-select'>
-								<SVGIcon
-									name='check-circle'
-									data-test-id='versions-page-select-version'
-									onClick={e => {e.stopPropagation(); onNavigateToVersion();}}
-									label={i18n('Go to this Version')}
-									labelPosition='right' />
-							</div>
-							<div className='version-item-field item-create'>
-								{!isHeader && isCollaborator && additionalInfo.OptionalCreationMethods.length > 0 && onCreateVersion &&
-									<SVGIcon
-										name='plus-circle'
-										data-test-id='versions-page-create-version'
-										onClick={e => { e.stopPropagation(); onCreateVersion(); }}
-										label={i18n('Create New Version')}
-										labelPosition='right'
-										disabled={!isCollaborator || !onCreateVersion} />
-								}
-							</div>
-						</div>
-				}
-		</div>
-	);
+    return (
+        <div
+            data-test-id="version-item-row"
+            className={`version-item-row ${
+                isHeader ? 'header-row' : 'clickable'
+            } ${isSelected ? 'selected' : ''}`}
+            onClick={e => {
+                e.stopPropagation();
+                onSelectVersion();
+                onNavigateToVersion();
+            }}>
+            <div
+                className={`version-item-field ${
+                    isHeader ? 'header-field item-version' : 'item-version'
+                }`}>
+                {name}
+            </div>
+            <div
+                className={`version-item-field ${
+                    isHeader ? 'header-field item-status' : 'item-status'
+                }`}>
+                {status}
+            </div>
+            <div
+                className={`version-item-field ${
+                    isHeader ? 'header-field' : 'item-last-edited'
+                }`}>
+                {modificationText}
+            </div>
+            <DescriptionField
+                className={`version-item-field ${
+                    isHeader
+                        ? 'header-field header-description'
+                        : 'item-description'
+                }`}
+                useTooltip={!isHeader && description}
+                text={description}
+            />
 
+            {isHeader ? (
+                <div className="version-item-field header-field actions">
+                    {i18n('Actions')}
+                </div>
+            ) : (
+                <div className="version-item-field item-actions">
+                    <div className="version-item-field item-select">
+                        <SVGIcon
+                            name="check-circle"
+                            data-test-id="versions-page-select-version"
+                            onClick={e => {
+                                e.stopPropagation();
+                                onNavigateToVersion();
+                            }}
+                            label={i18n('Go to this Version')}
+                            labelPosition="right"
+                        />
+                    </div>
+                    <div className="version-item-field item-create">
+                        {!isHeader &&
+                            isCollaborator &&
+                            additionalInfo.OptionalCreationMethods.length > 0 &&
+                            onCreateVersion && (
+                                <SVGIcon
+                                    name="plus-circle"
+                                    data-test-id="versions-page-create-version"
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        onCreateVersion();
+                                    }}
+                                    label={i18n('Create New Version')}
+                                    labelPosition="right"
+                                    disabled={
+                                        !isCollaborator || !onCreateVersion
+                                    }
+                                />
+                            )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
 };
 
-const VersionList = ({ versions, onSelectVersion, onNavigateToVersion, onCreateVersion, selectedVersion, isCollaborator }) => (
-	<div className='version-list'>
-		<VersionListItem
-			data={{ name: i18n('Version'), status: i18n('Status'), description: i18n('Description') }}
-			isHeader />
-		<div className='version-list-items'>
-			{versions.map(version =>
-				<VersionListItem
-					key={version.id}
-					data={version}
-					onSelectVersion={() => onSelectVersion({version})}
-					onNavigateToVersion={() => onNavigateToVersion({version})}
-					onCreateVersion={onCreateVersion ? () => onCreateVersion({version}) : false}
-					isSelected={selectedVersion === version.id}
-					isCollaborator={isCollaborator} />
-			)}
-		</div>
-	</div>
+const VersionList = ({
+    versions,
+    onSelectVersion,
+    onNavigateToVersion,
+    onCreateVersion,
+    selectedVersion,
+    isCollaborator
+}) => (
+    <div className="version-list">
+        <VersionListItem
+            data={{
+                name: i18n('Version'),
+                status: i18n('Status'),
+                description: i18n('Description')
+            }}
+            isHeader
+        />
+        <div className="version-list-items">
+            {versions.map(version => (
+                <VersionListItem
+                    key={version.id}
+                    data={version}
+                    onSelectVersion={() => onSelectVersion({ version })}
+                    onNavigateToVersion={() => onNavigateToVersion({ version })}
+                    onCreateVersion={
+                        onCreateVersion
+                            ? () => onCreateVersion({ version })
+                            : false
+                    }
+                    isSelected={selectedVersion === version.id}
+                    isCollaborator={isCollaborator}
+                />
+            ))}
+        </div>
+    </div>
 );
 
 export default VersionList;