diff --git a/external/contribute/web-ide/img/img10_v2.png b/external/contribute/web-ide/img/ChangeBranchesInMR.png similarity index 100% rename from external/contribute/web-ide/img/img10_v2.png rename to external/contribute/web-ide/img/ChangeBranchesInMR.png diff --git a/external/contribute/web-ide/img/img11.png b/external/contribute/web-ide/img/ChangesImMR.png similarity index 100% rename from external/contribute/web-ide/img/img11.png rename to external/contribute/web-ide/img/ChangesImMR.png diff --git a/external/contribute/web-ide/img/img8_v2.png b/external/contribute/web-ide/img/CommitToNewBranch.png similarity index 100% rename from external/contribute/web-ide/img/img8_v2.png rename to external/contribute/web-ide/img/CommitToNewBranch.png diff --git a/external/contribute/web-ide/img/img6_v2.png b/external/contribute/web-ide/img/CommitWindow.png similarity index 100% rename from external/contribute/web-ide/img/img6_v2.png rename to external/contribute/web-ide/img/CommitWindow.png diff --git a/external/contribute/web-ide/img/img7_v2.png b/external/contribute/web-ide/img/CompareChanges.png similarity index 100% rename from external/contribute/web-ide/img/img7_v2.png rename to external/contribute/web-ide/img/CompareChanges.png diff --git a/external/contribute/web-ide/img/img888.png b/external/contribute/web-ide/img/CreateMR.png similarity index 100% rename from external/contribute/web-ide/img/img888.png rename to external/contribute/web-ide/img/CreateMR.png diff --git a/external/contribute/web-ide/img/img88.png b/external/contribute/web-ide/img/CreateNewBranch.png similarity index 100% rename from external/contribute/web-ide/img/img88.png rename to external/contribute/web-ide/img/CreateNewBranch.png diff --git a/external/contribute/web-ide/img/img2.png b/external/contribute/web-ide/img/DevelopBranch.png similarity index 100% rename from external/contribute/web-ide/img/img2.png rename to external/contribute/web-ide/img/DevelopBranch.png diff --git a/external/contribute/web-ide/img/img5.png b/external/contribute/web-ide/img/EditLine.png similarity index 100% rename from external/contribute/web-ide/img/img5.png rename to external/contribute/web-ide/img/EditLine.png diff --git a/external/contribute/web-ide/img/img55.png b/external/contribute/web-ide/img/EditedLine.png similarity index 100% rename from external/contribute/web-ide/img/img55.png rename to external/contribute/web-ide/img/EditedLine.png diff --git a/external/contribute/web-ide/img/img12.png b/external/contribute/web-ide/img/MergeRequestPage.png similarity index 100% rename from external/contribute/web-ide/img/img12.png rename to external/contribute/web-ide/img/MergeRequestPage.png diff --git a/external/contribute/web-ide/img/img3.png b/external/contribute/web-ide/img/OpenWebIDE.png similarity index 100% rename from external/contribute/web-ide/img/img3.png rename to external/contribute/web-ide/img/OpenWebIDE.png diff --git a/external/contribute/web-ide/img/img1.png b/external/contribute/web-ide/img/SelectBranch.png similarity index 100% rename from external/contribute/web-ide/img/img1.png rename to external/contribute/web-ide/img/SelectBranch.png diff --git a/external/contribute/web-ide/img/img4_v2.png b/external/contribute/web-ide/img/VSCode.png similarity index 100% rename from external/contribute/web-ide/img/img4_v2.png rename to external/contribute/web-ide/img/VSCode.png diff --git a/external/contribute/web-ide/img/img9.png b/external/contribute/web-ide/img/img9.png deleted file mode 100644 index adf27323ee4ce1aaf15799a98fe54a77ea4f8017..0000000000000000000000000000000000000000 Binary files a/external/contribute/web-ide/img/img9.png and /dev/null differ diff --git a/external/contribute/web-ide/web-ide.md b/external/contribute/web-ide/web-ide.md index 8c7f134f7ff2a45c810ff4e94aeee7cf600f1926..32e71c9472c54c00da81de1d78f838015d582419 100644 --- a/external/contribute/web-ide/web-ide.md +++ b/external/contribute/web-ide/web-ide.md @@ -13,7 +13,7 @@ redirect_from: # Contribute using Gitlab Web IDE -This shows how to use Gitlab Web IDE to add or edit a How-to card: +This card shows how to use GitLab Web IDE to modify a How-to card. Before you start, please make sure that you have the correct access rights to edit the repository. @@ -22,75 +22,73 @@ the repository maintainers, or use your own copy of the repository (called a `fo 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.* -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` +Before making changes, please follow the instructions in the `README.md` file. This file contains important information about the project contribution guidelines. Often, a standard development scheme is followed. Usually, there is a `master` branch (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 branches (versions) in the same repository. In most of the cases you would like to add your changes on top of `develop` branch that contains the latest version. In order to select the development version (`develop` branch), click on the drop-down menu on the top left of the page and select `develop`: -<img src="img/img1.png"> +<img src="img/SelectBranch.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. +The page will refresh and show the repository contents on this branch. You can see that the `develop` branch has been selected. -<img src="img/img2.png"> +<img src="img/DevelopBranch.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: +Now you can open the web editor (integrated development environment or IDE) by clicking on the Edit button and selecting Web IDE: -<img src="img/img3.png"> +<img src="img/OpenWebIDE.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. +Now, you can make changes to the file you wish. As an example, we will change the file `privacy_policy.md`. Select the file `privacy_policy.md` from the list on the left. -<img src="img/img4_v2.png"> +<img src="img/VSCode.png"> -Now, edit the file the way you want. For instance. we add a line with `test` in the first section: +Now, edit the file the way you want. For instance, we added a line with `test` in the first section: -<img src="img/img5.png"> +<img src="img/EditLine.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.* -<img src="img/img55.png"> +<img src="img/EditedLine.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 top left corner of the window, a blue circle with a number appeared on the `Source Control` button: +Now, as you have edited the file, you can see that on the top left corner of the window, a circle with a number appeared on the `Source Control` button: -<img src="img/img6_v2.png"> +<img src="img/CommitWindow.png"> -The number of commits are indicated in the blue circle on the `Source Control` button. +This number indicates how many files has been changed, how many modifications there are to be saved. *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: +To commit changes (save your modifications) click on `Source Control` button. It will open a commit dialog. Write a descriptive commit message to label the changes properly. + +If you would like to see all changes made in a file, click on the file name to display the changes made: -<img src="img/img7_v2.png"> +<img src="img/CompareChanges.png"> test 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 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**. +**Important:** You have to select `Commit to new branch` by clicking on the down arrow. -<img src="img/img8_v2.png"> +<img src="img/CommitToNewBranch.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. +<img src="img/CreateNewBranch.png"> ## Submitting 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`. +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 `Create MR` button to start your `Merge Request`. -<img src="img/img888.png"> +<img src="img/CreateMR.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/img12.png"> +<img src="img/MergeRequestPage.png"> -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: +Please make sure you are proposing to merge your branch (on your `fork`) into the `develop` branch (on main repository). You can change your target branch by clicking on the `Change branches` button at the top of the page. The following screenshot represents a merge request from `kc-test` branch on `kaan.cimir` fork of `howto-cards` to `develop` branch on original repository `R3/howto-cards`: -<img src="img/img10_v2.png"> +<img src="img/ChangeBranchesInMR.png"> You can then fill our the merge request submission form and select, for instance, an `Assignee`. @@ -98,6 +96,8 @@ 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"> +<img src="img/ChangesImMR.png"> + +All that is left now is to submit the merge request by clicking on `Create merge request` button. That is it. -All that is left now is to submit the merge request by clicking on `Create merge request`. That is it. +If you would like to understand more about described workflow, please consult [Git Trilogy Part 1: Contribute using GitLab](https://courses.lcsb.uni.lu/2022-05-31_git-trilogy-part-1/stable/#/) slides.