Skip to content
Snippets Groups Projects
web-ide.md 4.88 KiB
Newer Older
Laurent Heirendt's avatar
Laurent Heirendt committed
---
layout: page
Laurent Heirendt's avatar
Laurent Heirendt committed
permalink: /external/contribute/web-ide/
Laurent Heirendt's avatar
Laurent Heirendt committed
shortcut: contribute:web-ide
redirect_from:
  - /cards/contribute:web-ide
  - /external/cards/contribute:web-ide
Laurent Heirendt's avatar
Laurent Heirendt committed
  - /contribute/web-ide
  - /external/external/contribute/web-ide/
Laurent Heirendt's avatar
Laurent Heirendt committed
---
Laurent Heirendt's avatar
Laurent Heirendt committed

Laurent Heirendt's avatar
Laurent Heirendt committed
# Contribute using Gitlab Web IDE

This shows how to use Gitlab Web IDE to add or edit a howto-card:
Laurent Heirendt's avatar
Laurent Heirendt committed

Before you start, please make sure that you have the correct access rights to edit the repository.

Laurent Heirendt's avatar
Laurent Heirendt committed
*Note: If you do not have the rights to edit the repository, you can either ask for permissions by contacting
the repository maintainers, or use your own copy of the repository (called a `fork`).
Please follow [these instructions](https://docs.gitlab.com/ee/user/project/repository/forking_workflow.html#creating-a-fork) to
obtain your copy (fork). You can then [mirror the fork automatically]({{ '/?contribute:mirror-fork' | relative_url }}) to keep in sync.*
Laurent Heirendt's avatar
Laurent Heirendt committed

A clear difference between editing a file in a git-tracked repository compared to a live document is that you can make an edit directly, and then suggesting the change. You can make this edit on your own version (called a `branch`), and then request to merge your changes into the main repository (through opening a `merge request`).

## Select the development version (branch)

Before making an edit, please follow the instructions in the `README.md` file. Often, a standard development scheme is followed. For instance, there is a `master` branch (usually referred to as the stable version of the repository) and a `develop` branch (the unstable development version of the repository). There can also be lots of other versions in the same repository. In order to select the development version (`develop` branch), click on the drop-down menu and select `develop`

<img src="img/img1.png">

The page will refresh and show the repository contents. On the top left of the page, you can see that the `develop` branch has been selected.

<img src="img/img2.png">

## Open the web editor (Web IDE)

You can now open the web editor (integrated development environment or IDE) by clicking on the Web IDE button:

<img src="img/img3.png">

Now, you can make changes to the file you wish. As an example, we will make a change to the file `privacy_policy.md`. Select the file `privacy_policy.md` from the list on the left.

Kaan Cimir's avatar
Kaan Cimir committed
<img src="img/img4_v2.png">
Laurent Heirendt's avatar
Laurent Heirendt committed

Now, edit the file the way you want. For instance. we add a line with `test` in the first section:

<img src="img/img5.png">

*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.*

Kaan Cimir's avatar
Kaan Cimir committed
<img src="img/img55.png">

Laurent Heirendt's avatar
Laurent Heirendt committed
## Committing your change

Kaan Cimir's avatar
Kaan Cimir committed
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:
Kaan Cimir's avatar
Kaan Cimir committed
<img src="img/img6_v2.png">
Kaan Cimir's avatar
Kaan Cimir committed
The number of commits are indicated in the blue circle on the `Source Control` button.

Laurent Heirendt's avatar
Laurent Heirendt committed
*Note: There is no `Save` button. You save your work by committing changes.*

Laurent Heirendt's avatar
Laurent Heirendt committed
When clicking on `Commit...`, the page changes to display the changes made:
Kaan Cimir's avatar
Kaan Cimir committed
<img src="img/img7_v2.png">
Laurent Heirendt's avatar
Laurent Heirendt committed

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).

Kaan Cimir's avatar
Kaan Cimir committed
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**.
Kaan Cimir's avatar
Kaan Cimir committed
<img src="img/img8_v2.png">
Kaan Cimir's avatar
Kaan Cimir committed
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">

Laurent Heirendt's avatar
Laurent Heirendt committed
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.

## Submitting your merge request

Kaan Cimir's avatar
Kaan Cimir committed
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.
Kaan Cimir's avatar
Kaan Cimir committed
<img src="img/img12.png">
Kaan Cimir's avatar
Kaan Cimir committed
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:
Kaan Cimir's avatar
Kaan Cimir committed
<img src="img/img10_v2.png">
You can then fill our the merge request submission form and select, for instance, an `Assignee`.
Laurent Heirendt's avatar
Laurent Heirendt committed

Good practice is to select `Delete source branch when merge request is accepted.`

Under `Changes`, you can see the added line:

<img src="img/img11.png">

Kaan Cimir's avatar
Kaan Cimir committed
All that is left now is to submit the merge request by clicking on `Create merge request`. That is it.