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

/*!
 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */
import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import union from 'lodash/union.js';
import Button from 'sdc-ui/lib/react/Button.js';
// import Checkbox from 'sdc-ui/lib/react/Checkbox.js';
import Input from 'nfvo-components/input/validation/Input.jsx';
import GridSection from 'nfvo-components/grid/GridSection.jsx';
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';

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}`;
        }
    }

    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;

        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')) {
			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;
        }

        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
    };

    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>
        );
    }

    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>
        );
    }

    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}
            />
        );
    }

    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
            }
        });
    }
}

export default MergeEditorView;