Skip to content

Migrate button toggle for shared project runners to Vue

Mireya Andres requested to merge toggle-shared-runners into master

What does this MR do?

For issue #24865 (closed).

To remove ambiguity with the current UI for enabling/disabling shared runners in the project settings, this MR replaces the button with a toggle element. This is also consistent with our usage of toggles in the other runner settings (e.g. runner settings for groups).

This MR includes the following changes:

  • Currently, the UI for this section of the settings is still in HAML: app/views/projects/runners/_shared_runners.html.haml. This MR ports the shared runner settings into its own Vue app so we can use the GlToggle component.
  • The POST endpoint toggle_shared_runners in app/controllers/projects/runners_controller.rb has been modified to return the response in JSON format, so it can be handled by the Vue app instead of Rails.
  • To ensure that these changes don't break anything in production, they are hidden under the vueify_shared_runners_toggle feature flag and will be rolled out fully once tested on a few projects.

Screenshots

Before / Feature Flag Disabled

Group setting DISABLED Group setting ENABLED
Old - Group Setting Disabled Old - Shared Runners Enabled
Old - Shared Runners Disabled

Error Handling

This is a permission error that occures when the user tries to change the project shared runners settings while the group settings is disabled. You can replicate the error through the following steps:

  • Go to the project settings page.
  • In another tab, disable shared runner settings for the group.
  • Go back to the project settings page and update the shared runner settings for the project without refreshing the page.

The page will refresh and show the following alert. Error Handling

After / Feature Flag Enabled

Group Setting Disabled

Group Setting Disabled

Group Setting Enabled

Toggle States Loading States
Toggle Enabled Loading while Disabled
Toggle Disabled Loading While Enabled

Error Handling

Error Handling

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team
Edited by Mireya Andres

Merge request reports