Skip to content

Add Gitpod Integration – Add Gitpod buttons to start cloud dev environments for GitLab projects

Cornelius Ludmann requested to merge corneliusludmann/gitlab:228893-add-gitpod-button-to-open-project-in-gitpod into master

What does this MR do?

This MR adds Gitpod integration to GitLab.

With Gitpod you can define your dev environment as code and get fully prebuilt, ready-to-code development environments for any GitLab project in your browser. You can work in several workspaces at the same time, push or dispose your work when you’re done and start a fresh, prebuilt workspace for every new task.

gitpod_screenshot

The Gitpod integration for GitLab adds a Gitpod button next to the Web IDE button on

  1. the project page (file tree header) and
  2. the merge request page.

Once the Gitpod feature is enabled, the Web IDE button turns into a dropdown split button where the user can choose to open the project either in the GitLab Web IDE or in Gitpod. The choice is stored in the local storage of the browser.

The Gitpod button opens the configured Gitpod URL (https://gitpod.io by default) with a so-called context URL. The context URL is the GitLab URL of the project, an issue, a merge request, a commit, a file, etc. For example, https://gitpod.io#https://gitlab.com/gitlab-org/gitlab/-/merge_requests/37985 opens this merge request in Gitpod. Gitpod parses the context URL and prepares a cloud development environment. If the project has a .gitpod.yml (as this one for gitlab-org/gitlab) it prepares the development environment accordingly. If you have prepared a proper webhook, the development environment is already fully instantiated with a prebuild.

This new feature needs to be activated (see doc) and enabled by the admin and user.

Closes #228893 (closed)

Screenshots

In project page:

Screenshot_2020-08-08_16-25-48

Screenshot_2020-08-08_16-26-21

Screenshot_2020-08-08_16-26-46

In merge request page:

Screenshot_2020-08-08_16-27-54

Popup (modal) when Gitpod is not enabled by the user:

popup

Admin settings: Gitpod admin settings

User preferences: Gitpod user preferences

Implementation details

  • The split button is implemented in the web_ide_link.vue component. This has increased the scope of this component. For example, the function for opening a modal for forking the repository has moved to this component in order to make it available inside the split button.
  • The Web IDE button of the project and merge request page has been unified. Both use the web_ide_link.vue component now. That's lead to a slightly other implementation of the Web IDE button on the MR page (e.g., the text has changed to Web IDE instead of Open in Web IDE). If really necessary, special treatments for the Web IDE button on the MR page can be added.
  • The web_ide_link.vue component has been moved to vue_shared since it is used in different places now. In a future MR it could also be used on the blob page (there is also a Web IDE button but not as Vue.js component that's why it is slightly harder to replace this button).
  • For now, no Gitpod button is shown if the Web IDE button is hidden. However, for us, there is no reason to hide the Gitpod button and we would like to see it always. The implementation makes it possible that only one button can be displayed (in fact, that happens when Gitpod is disabled for the Web IDE button).
  • The concept of the split buttons that shows only one plain button if there is only one action available has been generalized as action_button.vue (see below).
  • This MR contains a CSS fix for the height and the border of the dropdown button that does not fit to the other buttons on the page (see below).

How to test

  • The implementation of the Web IDE button has been changed. For that reason, it would make sense to test it's behavior as well. Check if it opens the Web IDE correctly, if it is hidden if you don't be able to contribute, and if it offers to fork if you don't have the permissions to push to the repo but are allowed to fork and add an MR.
  • Enable the Gitpod feature and check that the Gitpod button appears. A click on the button should open the configured Gitpod URL followed by # and the GitLab URL of the branch / MR (example see above). Note that gitpod.io is not able to open GitLab projects with a host other than gitlab.com. If you test this contribution in our local dev environment or with a self-managed installation, clicking on the Gitpod buttons leads to a message that the context URL could not be parsed. That is intended.
  • Check the config options of the Gitpod integration accordingly.

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Edited by Paul Slaughter

Merge request reports