Skip to content

Introduce feature flag to render pipeline with Vue [RUN AS-IF-FOSS] [RUN ALL RSPEC]

Miguel Rincon requested to merge 300403-replace-commit-box-minipipeline into master

What does this MR do?

Depends on !55199 (merged)

This change adds introduces a feature flag to render the pipeline mini graph in the commit with Vue, this was historically implemented with HAML and jQuery.

Enable ci_commit_pipeline_mini_graph_vue

Advantage:

  • This change enables us to have a single source of markup for the mini pipeline graph
    • This will open the possibility of refactoring the CSS related to the mini pipeline, that is long overdue a refactor.
  • Enables future removal of ~/mini_pipeline_graph_dropdown.js, a file that depends on jQuery
  • Enables future migration to GraphQL as data format for all mini pipeline graph will be the same, however, more work is needed here.

Tradeoffs:

  • We pass data to the frontend using JSON in a data-* attribute, which is inefficient.
    • This might be equivalent as we actually replace some HTML that is passed to the user.

Screenshots (strongly suggested)

Mini pipeline graph becomes consistent with the other pipeline graphs in the application:

Before

2021-03-03_17.36.51

After (ci_commit_pipeline_mini_graph_vue enabled)

2021-03-03_17.35.44

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

Related to #300403 (closed)

Edited by Miguel Rincon

Merge request reports