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, 132 insertions, 69 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
index f8417fafbf..7f7af8130f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/versionsPage/VersionsPage.jsx
@@ -22,81 +22,144 @@ import Button from 'sdc-ui/lib/react/Button.js';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import featureToggle from 'sdc-app/features/featureToggle.js';
 
-const DepricateButton = ({depricateAction, title}) => (
-	<div className='depricate-btn-wrapper'>
-		<Button data-test-id='depricate-action-btn'	className='depricate-btn' onClick={depricateAction}>{title}</Button>
-	</div>
+const DepricateButton = ({ depricateAction, title }) => (
+    <div className="depricate-btn-wrapper">
+        <Button
+            data-test-id="depricate-action-btn"
+            className="depricate-btn"
+            onClick={depricateAction}>
+            {title}
+        </Button>
+    </div>
 );
 
-const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton);	
+const FeatureDepricatedButton = featureToggle('ARCHIVE_ITEM')(DepricateButton);
 
-const VersionPageTitle = ({itemName, depricatedTitle, isArchived, onRestore, onArchive}) => {
-	return (
-		<div className='version-page-header'>
-			<div className='versions-page-title'>{`${i18n('Available Versions')} - ${itemName}  ${depricatedTitle}`}</div>			
-			<FeatureDepricatedButton depricateAction={isArchived ? () => onRestore() : () => onArchive() }  title={i18n(isArchived ? 'RESTORE' : 'ARCHIVE')}/>
-		</div>
-	);
+const VersionPageTitle = ({
+    itemName,
+    depricatedTitle,
+    isArchived,
+    onRestore,
+    onArchive
+}) => {
+    return (
+        <div className="version-page-header">
+            <div className="versions-page-title">{`${i18n(
+                'Available Versions'
+            )} - ${itemName}  ${depricatedTitle}`}</div>
+            <FeatureDepricatedButton
+                depricateAction={
+                    isArchived ? () => onRestore() : () => onArchive()
+                }
+                title={i18n(isArchived ? 'RESTORE' : 'ARCHIVE')}
+            />
+        </div>
+    );
 };
 
 class VersionsPage extends React.Component {
-	state = {
-		showExpanded : false
-	}
-	render() {
-		let { versions, owner, contributors, currentUser, isCollaborator, itemName = '', viewers, onSelectVersion, onNavigateToVersion,
-		onTreeFullScreen, onManagePermissions, onCreateVersion, selectedVersion, onModalNodeClick, isManual, isArchived, onArchive, onRestore} = this.props;		
-		const depricatedTitle = isArchived ? i18n('(Archived)') : '';
-		return (
-			<div className='versions-page-view'>
-				<VersionPageTitle 
-					itemName={itemName} 
-					depricatedTitle={depricatedTitle} 					
-					onArchive={onArchive}
-					isArchived={isArchived}
-					onRestore={onRestore}/>
-				<PermissionsView
-					owner={owner}
-					contributors={contributors}
-					viewers={viewers}
-					currentUser={currentUser}
-					isManual={isManual}
-					onManagePermissions={onManagePermissions}/>
-				<div className='versions-page-list-and-tree'>
-					<div className='version-tree-wrapper'>
-						<div className='version-tree-title-container'>
-							<div className='version-tree-title'>{i18n('Version Tree')}</div>
-							{this.state.showExpanded && <SVGIcon name='expand' className='version-tree-full-screen' onClick={() => onTreeFullScreen({
-								name: 'versions-tree-popup',
-								width: 798,
-								height: 500,
-								nodes: versions.map(version => ({id: version.id, name: version.name, parent: version.baseId || ''})),
-								onNodeClick: (version) => onModalNodeClick({version}),
-								selectedNodeId: selectedVersion,
-								scrollable: true,
-								toWiden: true
-							})} />}
-						</div>
-						<Tree
-							name={'versions-tree'}
-							width={200}
-							allowScaleWidth={false}
-							nodes={versions.map(version => ({id: version.id, name: version.name, parent: version.baseId || ''}))}
-							onNodeClick={version => onSelectVersion({version})}
-							onRenderedBeyondWidth={() => {this.setState({showExpanded : true});}}
-							selectedNodeId={selectedVersion}/>
-					</div>
-					<VersionList
-						versions={versions}
-						onSelectVersion={onSelectVersion}
-						onNavigateToVersion={onNavigateToVersion}
-						onCreateVersion={isArchived ? false : onCreateVersion}
-						selectedVersion={selectedVersion}
-						isCollaborator={isCollaborator} />
-				</div>
-			</div>
-		);
-	}
+    state = {
+        showExpanded: false
+    };
+    render() {
+        let {
+            versions,
+            owner,
+            contributors,
+            currentUser,
+            isCollaborator,
+            itemName = '',
+            viewers,
+            onSelectVersion,
+            onNavigateToVersion,
+            onTreeFullScreen,
+            onManagePermissions,
+            onCreateVersion,
+            selectedVersion,
+            onModalNodeClick,
+            isManual,
+            isArchived,
+            onArchive,
+            onRestore
+        } = this.props;
+        const depricatedTitle = isArchived ? i18n('(Archived)') : '';
+        return (
+            <div className="versions-page-view">
+                <VersionPageTitle
+                    itemName={itemName}
+                    depricatedTitle={depricatedTitle}
+                    onArchive={onArchive}
+                    isArchived={isArchived}
+                    onRestore={onRestore}
+                />
+                <PermissionsView
+                    owner={owner}
+                    contributors={contributors}
+                    viewers={viewers}
+                    currentUser={currentUser}
+                    isManual={isManual}
+                    onManagePermissions={onManagePermissions}
+                />
+                <div className="versions-page-list-and-tree">
+                    <div className="version-tree-wrapper">
+                        <div className="version-tree-title-container">
+                            <div className="version-tree-title">
+                                {i18n('Version Tree')}
+                            </div>
+                            {this.state.showExpanded && (
+                                <SVGIcon
+                                    name="expand"
+                                    className="version-tree-full-screen"
+                                    onClick={() =>
+                                        onTreeFullScreen({
+                                            name: 'versions-tree-popup',
+                                            width: 798,
+                                            height: 500,
+                                            nodes: versions.map(version => ({
+                                                id: version.id,
+                                                name: version.name,
+                                                parent: version.baseId || ''
+                                            })),
+                                            onNodeClick: version =>
+                                                onModalNodeClick({ version }),
+                                            selectedNodeId: selectedVersion,
+                                            scrollable: true,
+                                            toWiden: true
+                                        })
+                                    }
+                                />
+                            )}
+                        </div>
+                        <Tree
+                            name={'versions-tree'}
+                            width={200}
+                            allowScaleWidth={false}
+                            nodes={versions.map(version => ({
+                                id: version.id,
+                                name: version.name,
+                                parent: version.baseId || ''
+                            }))}
+                            onNodeClick={version =>
+                                onSelectVersion({ version })
+                            }
+                            onRenderedBeyondWidth={() => {
+                                this.setState({ showExpanded: true });
+                            }}
+                            selectedNodeId={selectedVersion}
+                        />
+                    </div>
+                    <VersionList
+                        versions={versions}
+                        onSelectVersion={onSelectVersion}
+                        onNavigateToVersion={onNavigateToVersion}
+                        onCreateVersion={isArchived ? false : onCreateVersion}
+                        selectedVersion={selectedVersion}
+                        isCollaborator={isCollaborator}
+                    />
+                </div>
+            </div>
+        );
+    }
 }
 
 export default VersionsPage;