Using 3-WAY Merge with Git in SAP Web IDE

3-Way Merge is a capability that allows developers to manually resolve conflicts when the automated merge cannot make a determination.

With a three-way merge, you can compare two files against the original copy (before they changed). For example, if you removed the first line of a file, and your friend added the last line, a merged version will be created containing both changes.

We recently added the 3-way-merge to our basic core feature set to enable developers to resolve Git conflicts within the IDE, thus increasing productivity.

SAP Web IDE comes with a simple and intuitive graphical comparison tool, where you can make changes directly.

Here are some of the features you can experience when using Git compare in SAP Web IDE:

Key features:

Next/Previous change
Push change to left/right
Undo/Redo
Sync/Unsync scrolling between panes
Search/Replace text
Jump to line

Let’s have a look at how to resolve conflicts using the 3-Way Merge tool with SAP Web IDE.

Create a folder.

Inside the new folder, create file named file.js with the following content:

var ClassA = function() {
    this.name = "class A";
};

ClassA.prototype.print = function() {
    console.log(this.name);
};

var a = new ClassA();
a.print();

var inheritsFrom = function (child, parent) {
    child.prototype = Object.create(parent.prototype);
};

var ClassB = function() {
    this.name = "class B";
    this.surname = "I'm the child";
};
 
inheritsFrom(ClassB, ClassA);

ClassB.prototype.print = function() {
    ClassA.prototype.print.call(this);
    console.log(this.surname);
};

var b = new ClassB();
b.print();

var ClassC = function () {
    this.name = "class C";
    this.surname = "I'm the grandchild";
};
 
inheritsFrom(ClassC, ClassB);
 
ClassC.prototype.foo = function() {
    // Do some funky stuff here...
};
 
ClassC.prototype.print = function () {
    ClassB.prototype.print.call(this);
    console.log("Sounds like this is working!");
};
 
var c = new ClassC();
c.print();

var ClassD = function () {
    this.name = "class D";
    this.age = 42;
};
 
inheritsFrom(ClassC, ClassB);

Right-click on the folder and select Git > Initialize Local Repository. (A master branch is created automatically when you initialize a repository.)
Open the Git pane and make sure you see the file.js file in the staging table.
Stage all files.
Enter a commit description and commit the file. (The staging table will be cleared.)
Create a new local branch based on the local master branch.
Call the new branch feature.
In the feature branch, open the file.js file for editing.
Press <CTRL> + <H> to replace all instances of ‘var’ with ‘feature’.
Save the file.
Open the Git pane and make sure you see the file.js file in the staging table.
Stage all files.
Enter a commit description and commit your changes.
Switch to the master branch.
Press <CTRL> + <H> to replace all instances of ‘var’ with ‘master’
Save the file.
Open the Git pane and make sure you see the file.js file in the staging table.
Stage all files.
Enter a commit description and commit your changes.

We edited the file.js file in the same places in both the master and the feature branches. This will create a conflicting change that Git cannot resolve on its own.
We want to incorporate the changes done in the feature branch to the master branch.
To do so, we need to rebase.

Verify that you are still on the master branch.
Click Rebase in the Git pane.
Select the feature local branch.
Click OK. The following message displayed:
Click Close. The Git pane is now in rebase in progress mode.
The (><) icon next to the file name indicates there is a conflict.
Double-click the file in the staging table to open the 3-Way Merge editor.
Double-click the file.js [compare] tab to maximize the view.

On the right, you can see the file from the source branch (feature) and on the left you can see the file from the target branch (master). In the middle, you can see the merged file (initially identical to the left side). There are 8 conflicts that need to be resolved.

Let’s solve the conflicts using the 3-Way Merge tool.

Click(Next) twice. This will take you to line #9.
Click (Push to left). The line #9 in the merged version now contains the content taken from the feature branch.
Click(Undo). The line #9 in the merged version now contains the content taken from the master branch.
Click(Redo). The line #9 in the merged version now contains the content taken from the feature branch.
Click(Accept their changes). The merged version now contains the content taken from the feature branch.
Click (Push to right) at line #1 and line #9.
Lines #1 and #9 in the merged version now contain the content taken from the master branch.
Save your changes.