Contribute code with GDK

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.

View an interactive demo of this section.

Use your local IDE to make changes to the code in the GDK directory.

  1. Create a new branch for your changes: 

    git checkout -b ui-updates

  2. Search the gitlab-development-kit/gitlab directory for the string Customize the color of GitLab.

    The results show one .haml file and several .po files.

  3. Open the app/views/profiles/preferences/show.html.haml file.
  4. Update the string from Customize the color of GitLab to Customize the color theme of the GitLab UI.
  5. Save the file.

  6. You can check that you were successful:

    In the gitlab-development-kit/gitlab directory, type git status to show the file you modified: 

            modified:   app/views/profiles/preferences/show.html.haml

  7. Refresh the web browser where you’re viewing the GDK. The changes should be displayed. Take a screenshot.

    The UI text in GitLab after making the change.

  8. Commit the changes: 

    git commit -a -m "Update UI text

Standardizing the text on this page so
that each area uses consistent language."

    Follow the GitLab commit message guidelines.

  9. Push the changes to the new branch: 

    git push --set-upstream origin ui-updates
  10. 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.