Migrate button toggle for shared project runners to Vue
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 |
---|---|
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.
After / Feature Flag Enabled
Group Setting Disabled
Group Setting Enabled
Toggle States | Loading States |
---|---|
Error Handling
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
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