Merge branch 'kc-update-webide-images' into 'develop'

update web IDE content

See merge request !493

external/contribute/web-ide/web-ide.md

@@ -48,12 +48,16 @@ Now, edit the file the way you want. For instance. we add a line with `test` in
 
 *Note: You can see a green line on the left side of it, indicating that a new line has been added. The vertical line turns blue if a line is edited.*
 
+<img src="img/img55.png">
+
 ## Committing your change
 
-As already mentioned, a change has to be proposed, and will then be reviewed. The system used is through `merge requests`. Now, as you have edited the file, you can see that on the bottom left of the window, a blue button appeared:
+As already mentioned, a change has to be proposed, and will then be reviewed. The system used is through `merge requests`. Now, as you have edited the file, you can see that on the top left corner of the window, a blue circle with a number appeared on the `Source Control` button:
 
 <img src="img/img6.png">
 
+The number of commits are indicated in the blue circle on the `Source Control` button.
+
 *Note: There is no `Save` button. You save your work by committing changes.*
 
 When clicking on `Commit...`, the page changes to display the changes made:
@@ -62,21 +66,30 @@ When clicking on `Commit...`, the page changes to display the changes made:
 
 You can see that a green line has been added on the right column. The left column displays the original file (of the `develop` branch).
 
-On the bottom left, you can see a form for committing the change. Here, you have to select `Create a new branch`. This is **important**.
+On the top left corner, you can see a form for committing the change. Here, you have to select `Commit to new branch` by clicking on the down arrow button. This is **important**.
 
 <img src="img/img8.png">
 
+Once you click on the `Commit to new branch` button, type the name of your new branch and press `Enter` to accept or `Escape` to cancel.
+
+<img src="img/img88.png">
+
 You can also add a specific commit message to label the change properly. The name of the branch is generated automatically. You can, if you want, change it as well.
 
 Then, select `Start a new request` when you are ready to start the submission process and hit the `Commit` button.
 
 ## Submitting your merge request
 
-After hitting the `Commit` button, you will be redirect to the submission page for your merge request:
+After creating the commit, the following pop-up window on the bottom right corner of your screen is going to indicate you that your changes have been commited. Click on the blue `Create MR` button to start your `Merge Request`.
+
+<img src="img/img888.png">
+
+
+You will be directed to the `New merge request` page. This page allows you to merge your changes with the target branch.
 
-<img src="img/img9.png">
+<img src="img/img12.png">
 
-Please make sure that you see that you are proposing to merge your branch (version) into the `develop` branch. This is shown at the top of the page:
+Please make sure that you see that you are proposing to merge your branch (version) into the `develop` branch. You can change your target branch by clicking on the `Change branches` button. This is shown at the top of the page:
 
 <img src="img/img10.png">
 
@@ -88,5 +101,5 @@ Under `Changes`, you can see the added line:
 
 <img src="img/img11.png">
 
-All that is left now is to submit the merge request by clicking on `Submit merge request`. That is it.
+All that is left now is to submit the merge request by clicking on `Create merge request`. That is it.