Please check gitlab-tutorial

Skip to content

Contribute code with Gitpod

Now for the fun part. Let's edit some code.

In this example, I found some UI text I'd like to change. In the upper-right corner in GitLab, I selected my avatar and then Preferences. I want to change Customize the color of GitLab to Customize the color theme of the GitLab UI:

The UI text in GitLab before making the change.

  1. Create a new branch for your changes:

    Select master in the status bar, then from the Select a branch or tag to checkout box, select Create new branch and enter a name for the new branch.

    If your code change addresses an issue, start the branch name with the issue number.

    The examples in this doc use a new branch called ui-updates.

  2. Search the repository for the string Customize the color of GitLab:

    • In VS Code, select the search icon from the side toolbar.
  3. Select the app/views/profiles/preferences/show.html.haml file.

  4. Update the string to Customize the color theme of the GitLab UI.

  5. Save your changes.

  6. Use the IDE Terminal tab to commit the changes:

    git commit -m "Update UI text
    
    Standardizing the text on this page so
    that each area uses consistent language."

    Follow the GitLab commit message guidelines.

  7. Push the changes to the new branch:

    git push --set-upstream origin ui-updates
  8. You can create a merge request with the code change, or continue to update the translation files.

Update the translation files

English UI strings are localized into many languages. These strings are saved in a .pot file, which must be regenerated any time you update UI text.

To automatically regenerate the localization file:

  1. Ensure you are in the gitlab-development-kit/gitlab directory.

  2. Run the following command:

    tooling/bin/gettext_extractor locale/gitlab.pot

    The .pot file will be generated in the /locale directory.

    Now, in the gitlab-development-kit/gitlab directory, if you type git status you should have both files listed:

            modified:   app/views/profiles/preferences/show.html.haml
            modified:   locale/gitlab.pot
  3. Commit and push the changes.

  4. Create a merge request or continue to update the documentation.

For more information about localization, see internationalization.

Update the documentation

Documentation for GitLab is published on https://docs.gitlab.com. When you add or update a feature, you must update the documentation as well.

  1. To find the documentation for a feature, the easiest thing is to search the documentation site. In this case, the setting is described on this documentation page:

    https://docs.gitlab.com/ee/user/profile/preferences.html
  2. The URL shows you the location of the file in the /doc directory. In this case, the location is:

    doc/user/profile/preferences.md
  3. Go to this location in your local gitlab repository and update the .md file and any related images.

    Now when you run git status, you should have something like:

            modified:   app/views/profiles/preferences/show.html.haml
            modified:   doc/user/profile/img/profile-preferences-syntax-themes.png
            modified:   doc/user/profile/preferences.md
            modified:   locale/gitlab.pot
  4. Commit and push the changes.

  5. Create a merge request or continue to update the documentation.