aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx
diff options
context:
space:
mode:
authorEinav Weiss Keidar <einavw@amdocs.com>2018-03-20 14:45:40 +0200
committerAvi Gaffa <avi.gaffa@amdocs.com>2018-03-20 13:52:31 +0000
commit7fdf733a64670fceefc3ded35cfa581e1c458179 (patch)
treeb3623ac9a331473830cb0167c0b487f2a176427c /openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx
parentc7916a4e5955ccc5f0f5252307363b791ec5c7b9 (diff)
Adding Prettier and fixing up eslint version
Issue-ID: SDC-1094 Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>
Diffstat (limited to 'openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx')
-rw-r--r--openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx568
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;