openecomp-ui/src/sdc-app/common/merge/MergeEditorView.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import i18n from 'nfvo-utils/i18n/i18n.js';
  18 import union from 'lodash/union.js';
  19 import Button from 'sdc-ui/lib/react/Button.js';
  20 // import Checkbox from 'sdc-ui/lib/react/Checkbox.js';
  21 import Input from 'nfvo-components/input/validation/Input.jsx';
  22 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  23 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  24 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  25 import Radio from 'sdc-ui/lib/react/Radio.js';
  26 import equal from 'deep-equal';
  27 import {ResolutionTypes} from './MergeEditorConstants.js';
  28
  29 class ConflictCategory extends React.Component  {
  30         state = {
  31                 resolution: ResolutionTypes.YOURS
  32         };
  33
  34         getTitle(conflictType, conflictName) {
  35                 if (typeof conflictName === 'undefined' || conflictType === conflictName) {
  36                         return i18n(conflictType);
  37                 } else {
  38                         return `${i18n(conflictType)}: ${conflictName}`;
  39                 }
  40         }
  41
  42         render() {
  43                 let {collapseExpand, conflict: {id: conflictId, type, name}, isCollapsed, item: {id: itemId, version}, onResolveConflict} = this.props;
  44                 let {resolution} = this.state;
  45                 const iconClass = isCollapsed ? 'merge-chevron' : 'merge-chevron right';
  46
  47                 return (
  48                         <div key={'conflictCategory_' + conflictId}  >
  49                                 <GridSection className='conflict-section'>
  50                                         <GridItem >
  51                                                 <div className='collapsible-section' onClick={collapseExpand}>
  52                                                         <SVGIcon name={isCollapsed ? 'chevronDown' : 'chevronUp'} iconClassName={iconClass} />
  53                                                         <div className='conflict-title'>{this.getTitle(type, name)}</div>
  54                                                 </div>
  55                                         </GridItem>
  56                                         <GridItem className='yours'>
  57                                                 <Radio name={'radio_' + conflictId} checked={resolution === ResolutionTypes.YOURS} value='yours'
  58                                                            onChange={() => this.setState({resolution: ResolutionTypes.YOURS})} data-test-id={'radio_' + conflictId + '_yours'} />
  59                                         </GridItem>
  60                                         <GridItem className='theirs'>
  61                                                 <Radio name={'radio_' + conflictId} checked={resolution === ResolutionTypes.THEIRS} value='theirs'
  62                                                            onChange={() => this.setState({resolution: ResolutionTypes.THEIRS})} data-test-id={'radio_' + conflictId + '_theirs'} /></GridItem>
  63                                         <GridItem className='resolve'>
  64                                                 <Button className='conflict-resolve-btn' btnType='outline' color='gray'
  65                                                         onClick={() => onResolveConflict({conflictId, resolution, itemId, version})}>
  66                                                         {i18n('Resolve')}
  67                                                 </Button>
  68                                         </GridItem>
  69                                 </GridSection>
  70                                 <div>
  71                                         {isCollapsed && this.props.children}
  72                                 </div>
  73                         </div>
  74                 );
  75         }
  76
  77 };
  78
  79 class TextCompare extends React.Component  {
  80         render() {
  81                 // let rand = Math.random() * (3000 - 1) + 1;
  82                 let {yours, theirs, field, type, isObjName, conflictsOnly} = this.props;
  83                 let typeYours = typeof yours;
  84                 let typeTheirs = typeof theirs;
  85
  86                 let parsedType = `${type}/${field}`.replace(/\/[0-9]+/g,'/index');
  87                 let level = type.split('/').length;
  88
  89                 if (typeYours === 'boolean' || typeTheirs === 'boolean') {
  90                         yours = yours ? i18n('Yes') : i18n('No');
  91                         theirs = theirs ? i18n('Yes') : i18n('No');
  92                 }
  93
  94
  95                 /*if ((typeYours !== 'string' && typeYours !== 'undefined') || (typeTheirs !== 'string' && typeTheirs !== 'undefined')) {
  96                         return (<div className='merge-editor-text-field field-error'>{field} cannot be parsed for display</div>);
  97                 }*/
  98                 let isDiff = yours !== theirs;
  99                 if (!isObjName &&
 100                         ((!isDiff && conflictsOnly) ||
 101                          (yours === '' && theirs === '') ||
 102                          (typeYours === 'undefined' && typeTheirs === 'undefined')
 103                         )
 104                 ) {
 105                         return null;
 106                 }
 107
 108                 return (
 109                         <GridSection className={isDiff ? 'merge-editor-text-field diff' : 'merge-editor-text-field'}>
 110                                 <GridItem className='field-col grid-col-title' stretch>
 111                                         <div className={`field ${isDiff ? 'diff' : ''} field-name level-${level} ${isObjName ? 'field-object-name' : ''}`}>
 112                                                 {i18n(parsedType)}
 113                                         </div>
 114                                 </GridItem>
 115                                 <GridItem className='field-col grid-col-yours' stretch>
 116                                         <div className={`field field-yours ${!yours ? 'empty-field' : ''}`} >{yours || (isObjName ? '' : '━━')}</div>
 117                                 </GridItem>
 118                                 <GridItem className='field-col grid-col-theirs' stretch>
 119                                         <div className={`field field-theirs ${!theirs ? 'empty-field' : ''}`}>{theirs || (isObjName ? '' : '━━')}</div>
 120                                 </GridItem>
 121                                 <GridItem stretch/>
 122                         </GridSection>
 123                 );
 124         }
 125 };
 126
 127 class MergeEditorView extends React.Component {
 128         state = {
 129                 collapsingSections: {},
 130                 conflictsOnly: false
 131         };
 132
 133         render() {
 134                 let {conflicts, item, conflictFiles, onResolveConflict, currentScreen, resolution} = this.props;
 135
 136                 return (
 137                 <div className='merge-editor'>
 138                         {conflictFiles && this.renderConflictTableTitles()}
 139                         <div className='merge-editor-body'>
 140                                 {conflictFiles && conflictFiles.sort((a, b) => a.type > b.type).map(file => (
 141                                 <ConflictCategory key={'conflict_' + file.id} conflict={file} item={item} isCollapsed={this.state.collapsingSections[file.id]}
 142                                         collapseExpand={()=>{this.updateCollapseState(file.id);}}
 143                                         onResolveConflict={cDetails => onResolveConflict({...cDetails, currentScreen})}>
 144                                         {(conflicts && conflicts[file.id]) &&
 145                                                 this.getUnion(conflicts[file.id].yours, conflicts[file.id].theirs).map(field => {
 146                                                         return this.renderField(field, file, conflicts[file.id].yours[field], conflicts[file.id].theirs[field], resolution);
 147                                                 })}
 148                                 </ConflictCategory>))}
 149                         </div>
 150                 </div>);
 151         }
 152
 153         renderConflictTableTitles()
 154         {
 155                 return (<GridSection className='conflict-titles-section'>
 156                         <GridItem>
 157                                 {i18n('Page')}
 158                         </GridItem>
 159                         <GridItem className='yours'>
 160                                 {i18n('Local (Me)')}
 161                         </GridItem>
 162                         <GridItem className='theirs'>
 163                                 {i18n('Last Committed')}
 164                         </GridItem>
 165                         <GridItem className='resolve'>
 166                                 <Input
 167                                         label={i18n('Show Conflicts Only')}
 168                                         type='checkbox'
 169                                         value={this.state.conflictsOnly}
 170                                         onChange={e => this.setState({conflictsOnly: e}) } />
 171                         </GridItem>
 172                 </GridSection>);
 173         }
 174         // <Checkbox
 175         //      label={i18n('Show Conflicts Only')}
 176         //      value={this.state.conflictsOnly}
 177         //      checked={this.state.conflictsOnly}
 178         //      onChange={checked => this.setState({conflictsOnly: checked})} />
 179
 180         renderObjects(yours, theirs, fileType, field, id, resolution) {
 181                 if (equal(yours, theirs)) {
 182                         return;
 183                 }
 184                 let {conflictsOnly} = this.state;
 185                 return (
 186                         <div key={`obj_${fileType}/${field}_${id}`}>
 187                                 <TextCompare field={field} type={fileType} conflictsOnly={conflictsOnly} yours='' theirs='' isObjName resolution={resolution} />
 188                                 <div className='field-objects'>
 189                                         <div>
 190                                                 {this.getUnion(yours, theirs).map(key =>
 191                                                         this.renderField(
 192                                                                 key,
 193                                                                 {type: `${fileType}/${field}`, id},
 194                                                                 yours && yours[key],
 195                                                                 theirs && theirs[key]
 196                                                         )
 197                                                 )}
 198                                         </div>
 199                                 </div>
 200                         </div>
 201                 );
 202         }
 203
 204         renderList(yours = [], theirs = [], type, field, id, resolution) {
 205                 let theirsList = theirs.join(', ');
 206                 let yoursList = yours.join(', ');
 207                 let {conflictsOnly} = this.state;
 208                 return (<TextCompare key={'text_' + id + '_' + field}
 209                          field={field} type={type} yours={yoursList} theirs={theirsList} conflictsOnly={conflictsOnly} resolution={resolution} />);
 210         }
 211
 212         renderField(field, file, yours, theirs, resolution) {
 213                 if (yours) {
 214                         if (Array.isArray(yours)) {
 215                                 return this.renderList(yours, theirs, file.type, field, file.id, resolution);
 216                         }
 217                         else if (typeof yours === 'object') {
 218                                 return this.renderObjects(yours, theirs, file.type, field, file.id, resolution);
 219                         }
 220                 } else if (theirs) {
 221                         if (Array.isArray(theirs)) {
 222                                 return this.renderList(yours, theirs, file.type, field, file.id, resolution);
 223                         }
 224                         else if (typeof theirs === 'object') {
 225                                 return this.renderObjects(yours, theirs, file.type, field, file.id, resolution);
 226                         }
 227                 }
 228                 let {conflictsOnly} = this.state;
 229                 return (<TextCompare key={'text_' + file.id + '_' + field} resolution={resolution}
 230                          field={field} type={file.type} yours={yours} theirs={theirs} conflictsOnly={conflictsOnly} />);
 231         }
 232
 233         getUnion(yours = {},theirs = {}) {
 234                 let yoursKeys = Object.keys(yours);
 235                 let theirsKeys = Object.keys(theirs);
 236                 let myUn = union(yoursKeys, theirsKeys);
 237                 return myUn;//.sort((a, b) => a > b);
 238         }
 239
 240         updateCollapseState(conflictId) {
 241                 const {fetchConflict, item: {id: itemId, version}, /*conflicts*/} = this.props;
 242                 let isCollapsed = this.state.collapsingSections[conflictId];
 243                 // if (!isCollapsed && !(conflicts && conflictId in conflicts)) {
 244                 if (!isCollapsed) {
 245                         fetchConflict({cid: conflictId, itemId, version});
 246                 }
 247                 this.setState({
 248                         collapsingSections: {
 249                                 ...this.state.collapsingSections,
 250                                 [conflictId]: !isCollapsed
 251                         }
 252                 });
 253         }
 254 }
 255
 256 export default MergeEditorView;