diff options
Diffstat (limited to 'openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx')
| -rw-r--r-- | openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx | 568 |
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; |