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, 362 insertions, 206 deletions

diff --git a/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx b/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx
index 34d86419e7..a7e36a39fc 100644
--- a/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx
@@ -24,233 +24,389 @@ import GridItem from 'nfvo-components/grid/GridItem.jsx';
 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import Radio from 'sdc-ui/lib/react/Radio.js';
 import equal from 'deep-equal';
-import {ResolutionTypes} from './MergeEditorConstants.js';
+import { ResolutionTypes } from './MergeEditorConstants.js';
 
-class ConflictCategory extends React.Component  {
-	state = {
-		resolution: ResolutionTypes.YOURS
-	};
+class ConflictCategory extends React.Component {
+    state = {
+        resolution: ResolutionTypes.YOURS
+    };
 
-	getTitle(conflictType, conflictName) {
-		if (typeof conflictName === 'undefined' || conflictType === conflictName) {
-			return i18n(conflictType);
-		} else {
-			return `${i18n(conflictType)}: ${conflictName}`;
-		}
-	}
+    getTitle(conflictType, conflictName) {
+        if (
+            typeof conflictName === 'undefined' ||
+            conflictType === conflictName
+        ) {
+            return i18n(conflictType);
+        } else {
+            return `${i18n(conflictType)}: ${conflictName}`;
+        }
+    }
 
-	render() {
-		let {collapseExpand, conflict: {id: conflictId, type, name}, isCollapsed, item: {id: itemId, version}, onResolveConflict} = this.props;
-		let {resolution} = this.state;
-		const iconClass = isCollapsed ? 'merge-chevron' : 'merge-chevron right';
+    render() {
+        let {
+            collapseExpand,
+            conflict: { id: conflictId, type, name },
+            isCollapsed,
+            item: { id: itemId, version },
+            onResolveConflict
+        } = this.props;
+        let { resolution } = this.state;
+        const iconClass = isCollapsed ? 'merge-chevron' : 'merge-chevron right';
 
-		return (
-			<div key={'conflictCategory_' + conflictId}  >
-				<GridSection className='conflict-section'>
-					<GridItem >
-						<div className='collapsible-section' onClick={collapseExpand}>
-							<SVGIcon name={isCollapsed ? 'chevronDown' : 'chevronUp'} iconClassName={iconClass} />
-							<div className='conflict-title'>{this.getTitle(type, name)}</div>
-						</div>
-					</GridItem>
-					<GridItem className='yours'>
-						<Radio name={'radio_' + conflictId} checked={resolution === ResolutionTypes.YOURS} value='yours'
-							   onChange={() => this.setState({resolution: ResolutionTypes.YOURS})} data-test-id={'radio_' + conflictId + '_yours'} />
-					</GridItem>
-					<GridItem className='theirs'>
-						<Radio name={'radio_' + conflictId} checked={resolution === ResolutionTypes.THEIRS} value='theirs'
-							   onChange={() => this.setState({resolution: ResolutionTypes.THEIRS})} data-test-id={'radio_' + conflictId + '_theirs'} /></GridItem>
-					<GridItem className='resolve'>
-						<Button className='conflict-resolve-btn' btnType='outline' color='gray'
-							onClick={() => onResolveConflict({conflictId, resolution, itemId, version})}>
-							{i18n('Resolve')}
-						</Button>
-					</GridItem>
-				</GridSection>
-				<div>
-					{isCollapsed && this.props.children}
-				</div>
-			</div>
-		);
-	}
-
-};
-
-class TextCompare extends React.Component  {
-	render() {
-		// let rand = Math.random() * (3000 - 1) + 1;
-		let {yours, theirs, field, type, isObjName, conflictsOnly} = this.props;
-		let typeYours = typeof yours;
-		let typeTheirs = typeof theirs;
+        return (
+            <div key={'conflictCategory_' + conflictId}>
+                <GridSection className="conflict-section">
+                    <GridItem>
+                        <div
+                            className="collapsible-section"
+                            onClick={collapseExpand}>
+                            <SVGIcon
+                                name={isCollapsed ? 'chevronDown' : 'chevronUp'}
+                                iconClassName={iconClass}
+                            />
+                            <div className="conflict-title">
+                                {this.getTitle(type, name)}
+                            </div>
+                        </div>
+                    </GridItem>
+                    <GridItem className="yours">
+                        <Radio
+                            name={'radio_' + conflictId}
+                            checked={resolution === ResolutionTypes.YOURS}
+                            value="yours"
+                            onChange={() =>
+                                this.setState({
+                                    resolution: ResolutionTypes.YOURS
+                                })
+                            }
+                            data-test-id={'radio_' + conflictId + '_yours'}
+                        />
+                    </GridItem>
+                    <GridItem className="theirs">
+                        <Radio
+                            name={'radio_' + conflictId}
+                            checked={resolution === ResolutionTypes.THEIRS}
+                            value="theirs"
+                            onChange={() =>
+                                this.setState({
+                                    resolution: ResolutionTypes.THEIRS
+                                })
+                            }
+                            data-test-id={'radio_' + conflictId + '_theirs'}
+                        />
+                    </GridItem>
+                    <GridItem className="resolve">
+                        <Button
+                            className="conflict-resolve-btn"
+                            btnType="outline"
+                            color="gray"
+                            onClick={() =>
+                                onResolveConflict({
+                                    conflictId,
+                                    resolution,
+                                    itemId,
+                                    version
+                                })
+                            }>
+                            {i18n('Resolve')}
+                        </Button>
+                    </GridItem>
+                </GridSection>
+                <div>{isCollapsed && this.props.children}</div>
+            </div>
+        );
+    }
+}
 
-		let parsedType = `${type}/${field}`.replace(/\/[0-9]+/g,'/index');
-		let level = type.split('/').length;
+class TextCompare extends React.Component {
+    render() {
+        // let rand = Math.random() * (3000 - 1) + 1;
+        let {
+            yours,
+            theirs,
+            field,
+            type,
+            isObjName,
+            conflictsOnly
+        } = this.props;
+        let typeYours = typeof yours;
+        let typeTheirs = typeof theirs;
 
-		if (typeYours === 'boolean' || typeTheirs === 'boolean') {
-			yours = yours ? i18n('Yes') : i18n('No');
-			theirs = theirs ? i18n('Yes') : i18n('No');
-		}
+        let parsedType = `${type}/${field}`.replace(/\/[0-9]+/g, '/index');
+        let level = type.split('/').length;
 
+        if (typeYours === 'boolean' || typeTheirs === 'boolean') {
+            yours = yours ? i18n('Yes') : i18n('No');
+            theirs = theirs ? i18n('Yes') : i18n('No');
+        }
 
-		/*if ((typeYours !== 'string' && typeYours !== 'undefined') || (typeTheirs !== 'string' && typeTheirs !== 'undefined')) {
+        /*if ((typeYours !== 'string' && typeYours !== 'undefined') || (typeTheirs !== 'string' && typeTheirs !== 'undefined')) {
 			return (<div className='merge-editor-text-field field-error'>{field} cannot be parsed for display</div>);
 		}*/
-		let isDiff = yours !== theirs;
-		if (!isObjName &&
-			((!isDiff && conflictsOnly) ||
-			 (yours === '' && theirs === '') ||
-			 (typeYours === 'undefined' && typeTheirs === 'undefined')
-			)
-		) {
-			return null;
-		}
+        let isDiff = yours !== theirs;
+        if (
+            !isObjName &&
+            ((!isDiff && conflictsOnly) ||
+                (yours === '' && theirs === '') ||
+                (typeYours === 'undefined' && typeTheirs === 'undefined'))
+        ) {
+            return null;
+        }
 
-		return (
-			<GridSection className={isDiff ? 'merge-editor-text-field diff' : 'merge-editor-text-field'}>
-				<GridItem className='field-col grid-col-title' stretch>
-					<div className={`field ${isDiff ? 'diff' : ''} field-name level-${level} ${isObjName ? 'field-object-name' : ''}`}>
-						{i18n(parsedType)}
-					</div>
-				</GridItem>
-				<GridItem className='field-col grid-col-yours' stretch>
-					<div className={`field field-yours ${!yours ? 'empty-field' : ''}`} >{yours || (isObjName ? '' : '━━')}</div>
-				</GridItem>
-				<GridItem className='field-col grid-col-theirs' stretch>
-					<div className={`field field-theirs ${!theirs ? 'empty-field' : ''}`}>{theirs || (isObjName ? '' : '━━')}</div>
-				</GridItem>
-				<GridItem stretch/>
-			</GridSection>
-		);
-	}
-};
+        return (
+            <GridSection
+                className={
+                    isDiff
+                        ? 'merge-editor-text-field diff'
+                        : 'merge-editor-text-field'
+                }>
+                <GridItem className="field-col grid-col-title" stretch>
+                    <div
+                        className={`field ${
+                            isDiff ? 'diff' : ''
+                        } field-name level-${level} ${
+                            isObjName ? 'field-object-name' : ''
+                        }`}>
+                        {i18n(parsedType)}
+                    </div>
+                </GridItem>
+                <GridItem className="field-col grid-col-yours" stretch>
+                    <div
+                        className={`field field-yours ${
+                            !yours ? 'empty-field' : ''
+                        }`}>
+                        {yours || (isObjName ? '' : '━━')}
+                    </div>
+                </GridItem>
+                <GridItem className="field-col grid-col-theirs" stretch>
+                    <div
+                        className={`field field-theirs ${
+                            !theirs ? 'empty-field' : ''
+                        }`}>
+                        {theirs || (isObjName ? '' : '━━')}
+                    </div>
+                </GridItem>
+                <GridItem stretch />
+            </GridSection>
+        );
+    }
+}
 
 class MergeEditorView extends React.Component {
-	state = {
-		collapsingSections: {},
-		conflictsOnly: false
-	};
+    state = {
+        collapsingSections: {},
+        conflictsOnly: false
+    };
 
-	render() {
-		let {conflicts, item, conflictFiles, onResolveConflict, currentScreen, resolution} = this.props;
+    render() {
+        let {
+            conflicts,
+            item,
+            conflictFiles,
+            onResolveConflict,
+            currentScreen,
+            resolution
+        } = this.props;
 
-		return (
-		<div className='merge-editor'>
-			{conflictFiles && this.renderConflictTableTitles()}
-			<div className='merge-editor-body'>
-				{conflictFiles && conflictFiles.sort((a, b) => a.type > b.type).map(file => (
-				<ConflictCategory key={'conflict_' + file.id} conflict={file} item={item} isCollapsed={this.state.collapsingSections[file.id]}
-					collapseExpand={()=>{this.updateCollapseState(file.id);}}
-					onResolveConflict={cDetails => onResolveConflict({...cDetails, currentScreen})}>
-					{(conflicts && conflicts[file.id]) &&
-						this.getUnion(conflicts[file.id].yours, conflicts[file.id].theirs).map(field => {
-							return this.renderField(field, file, conflicts[file.id].yours[field], conflicts[file.id].theirs[field], resolution);
-						})}
-				</ConflictCategory>))}
-			</div>
-		</div>);
-	}
+        return (
+            <div className="merge-editor">
+                {conflictFiles && this.renderConflictTableTitles()}
+                <div className="merge-editor-body">
+                    {conflictFiles &&
+                        conflictFiles
+                            .sort((a, b) => a.type > b.type)
+                            .map(file => (
+                                <ConflictCategory
+                                    key={'conflict_' + file.id}
+                                    conflict={file}
+                                    item={item}
+                                    isCollapsed={
+                                        this.state.collapsingSections[file.id]
+                                    }
+                                    collapseExpand={() => {
+                                        this.updateCollapseState(file.id);
+                                    }}
+                                    onResolveConflict={cDetails =>
+                                        onResolveConflict({
+                                            ...cDetails,
+                                            currentScreen
+                                        })
+                                    }>
+                                    {conflicts &&
+                                        conflicts[file.id] &&
+                                        this.getUnion(
+                                            conflicts[file.id].yours,
+                                            conflicts[file.id].theirs
+                                        ).map(field => {
+                                            return this.renderField(
+                                                field,
+                                                file,
+                                                conflicts[file.id].yours[field],
+                                                conflicts[file.id].theirs[
+                                                    field
+                                                ],
+                                                resolution
+                                            );
+                                        })}
+                                </ConflictCategory>
+                            ))}
+                </div>
+            </div>
+        );
+    }
 
-	renderConflictTableTitles()
-	{
-		return (<GridSection className='conflict-titles-section'>
-			<GridItem>
-				{i18n('Page')}
-			</GridItem>
-			<GridItem className='yours'>
-				{i18n('Local (Me)')}
-			</GridItem>
-			<GridItem className='theirs'>
-				{i18n('Last Committed')}
-			</GridItem>
-			<GridItem className='resolve'>
-				<Input
-					label={i18n('Show Conflicts Only')}
-					type='checkbox'
-					value={this.state.conflictsOnly}
-					onChange={e => this.setState({conflictsOnly: e}) } />
-			</GridItem>
-		</GridSection>);
-	}
-	// <Checkbox
-	// 	label={i18n('Show Conflicts Only')}
-	// 	value={this.state.conflictsOnly}
-	// 	checked={this.state.conflictsOnly}
-	// 	onChange={checked => this.setState({conflictsOnly: checked})} />
+    renderConflictTableTitles() {
+        return (
+            <GridSection className="conflict-titles-section">
+                <GridItem>{i18n('Page')}</GridItem>
+                <GridItem className="yours">{i18n('Local (Me)')}</GridItem>
+                <GridItem className="theirs">{i18n('Last Committed')}</GridItem>
+                <GridItem className="resolve">
+                    <Input
+                        label={i18n('Show Conflicts Only')}
+                        type="checkbox"
+                        value={this.state.conflictsOnly}
+                        onChange={e => this.setState({ conflictsOnly: e })}
+                    />
+                </GridItem>
+            </GridSection>
+        );
+    }
+    // <Checkbox
+    // 	label={i18n('Show Conflicts Only')}
+    // 	value={this.state.conflictsOnly}
+    // 	checked={this.state.conflictsOnly}
+    // 	onChange={checked => this.setState({conflictsOnly: checked})} />
 
-	renderObjects(yours, theirs, fileType, field, id, resolution) {
-		if (equal(yours, theirs)) {
-			return;
-		}
-		let {conflictsOnly} = this.state;
-		return (
-			<div key={`obj_${fileType}/${field}_${id}`}>
-				<TextCompare field={field} type={fileType} conflictsOnly={conflictsOnly} yours='' theirs='' isObjName resolution={resolution} />
-				<div className='field-objects'>
-					<div>
-						{this.getUnion(yours, theirs).map(key =>
-							this.renderField(
-								key,
-								{type: `${fileType}/${field}`, id},
-								yours && yours[key],
-								theirs && theirs[key]
-							)
-						)}
-					</div>
-				</div>
-			</div>
-		);
-	}
+    renderObjects(yours, theirs, fileType, field, id, resolution) {
+        if (equal(yours, theirs)) {
+            return;
+        }
+        let { conflictsOnly } = this.state;
+        return (
+            <div key={`obj_${fileType}/${field}_${id}`}>
+                <TextCompare
+                    field={field}
+                    type={fileType}
+                    conflictsOnly={conflictsOnly}
+                    yours=""
+                    theirs=""
+                    isObjName
+                    resolution={resolution}
+                />
+                <div className="field-objects">
+                    <div>
+                        {this.getUnion(yours, theirs).map(key =>
+                            this.renderField(
+                                key,
+                                { type: `${fileType}/${field}`, id },
+                                yours && yours[key],
+                                theirs && theirs[key]
+                            )
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+    }
 
-	renderList(yours = [], theirs = [], type, field, id, resolution) {
-		let theirsList = theirs.join(', ');
-		let yoursList = yours.join(', ');
-		let {conflictsOnly} = this.state;
-		return (<TextCompare key={'text_' + id + '_' + field}
-			 field={field} type={type} yours={yoursList} theirs={theirsList} conflictsOnly={conflictsOnly} resolution={resolution} />);
-	}
+    renderList(yours = [], theirs = [], type, field, id, resolution) {
+        let theirsList = theirs.join(', ');
+        let yoursList = yours.join(', ');
+        let { conflictsOnly } = this.state;
+        return (
+            <TextCompare
+                key={'text_' + id + '_' + field}
+                field={field}
+                type={type}
+                yours={yoursList}
+                theirs={theirsList}
+                conflictsOnly={conflictsOnly}
+                resolution={resolution}
+            />
+        );
+    }
 
-	renderField(field, file, yours, theirs, resolution) {
-		if (yours) {
-			if (Array.isArray(yours)) {
-				return this.renderList(yours, theirs, file.type, field, file.id, resolution);
-			}
-			else if (typeof yours === 'object') {
-				return this.renderObjects(yours, theirs, file.type, field, file.id, resolution);
-			}
-		} else if (theirs) {
-			if (Array.isArray(theirs)) {
-				return this.renderList(yours, theirs, file.type, field, file.id, resolution);
-			}
-			else if (typeof theirs === 'object') {
-				return this.renderObjects(yours, theirs, file.type, field, file.id, resolution);
-			}
-		}
-		let {conflictsOnly} = this.state;
-		return (<TextCompare key={'text_' + file.id + '_' + field} resolution={resolution}
-			 field={field} type={file.type} yours={yours} theirs={theirs} conflictsOnly={conflictsOnly} />);
-	}
+    renderField(field, file, yours, theirs, resolution) {
+        if (yours) {
+            if (Array.isArray(yours)) {
+                return this.renderList(
+                    yours,
+                    theirs,
+                    file.type,
+                    field,
+                    file.id,
+                    resolution
+                );
+            } else if (typeof yours === 'object') {
+                return this.renderObjects(
+                    yours,
+                    theirs,
+                    file.type,
+                    field,
+                    file.id,
+                    resolution
+                );
+            }
+        } else if (theirs) {
+            if (Array.isArray(theirs)) {
+                return this.renderList(
+                    yours,
+                    theirs,
+                    file.type,
+                    field,
+                    file.id,
+                    resolution
+                );
+            } else if (typeof theirs === 'object') {
+                return this.renderObjects(
+                    yours,
+                    theirs,
+                    file.type,
+                    field,
+                    file.id,
+                    resolution
+                );
+            }
+        }
+        let { conflictsOnly } = this.state;
+        return (
+            <TextCompare
+                key={'text_' + file.id + '_' + field}
+                resolution={resolution}
+                field={field}
+                type={file.type}
+                yours={yours}
+                theirs={theirs}
+                conflictsOnly={conflictsOnly}
+            />
+        );
+    }
 
-	getUnion(yours = {},theirs = {}) {
-		let yoursKeys = Object.keys(yours);
-		let theirsKeys = Object.keys(theirs);
-		let myUn = union(yoursKeys, theirsKeys);
-		return myUn;//.sort((a, b) => a > b);
-	}
+    getUnion(yours = {}, theirs = {}) {
+        let yoursKeys = Object.keys(yours);
+        let theirsKeys = Object.keys(theirs);
+        let myUn = union(yoursKeys, theirsKeys);
+        return myUn; //.sort((a, b) => a > b);
+    }
 
-	updateCollapseState(conflictId) {
-		const {fetchConflict, item: {id: itemId, version}, /*conflicts*/} = this.props;
-		let isCollapsed = this.state.collapsingSections[conflictId];
-		// if (!isCollapsed && !(conflicts && conflictId in conflicts)) {
-		if (!isCollapsed) {
-			fetchConflict({cid: conflictId, itemId, version});
-		}
-		this.setState({
-			collapsingSections: {
-				...this.state.collapsingSections,
-				[conflictId]: !isCollapsed
-			}
-		});
-	}
+    updateCollapseState(conflictId) {
+        const {
+            fetchConflict,
+            item: { id: itemId, version } /*conflicts*/
+        } = this.props;
+        let isCollapsed = this.state.collapsingSections[conflictId];
+        // if (!isCollapsed && !(conflicts && conflictId in conflicts)) {
+        if (!isCollapsed) {
+            fetchConflict({ cid: conflictId, itemId, version });
+        }
+        this.setState({
+            collapsingSections: {
+                ...this.state.collapsingSections,
+                [conflictId]: !isCollapsed
+            }
+        });
+    }
 }
 
 export default MergeEditorView;