Skip to content

[Part 1] Break down pipeline editor into smaller components

What does this MR do?

This is part 1 of a 2 parts MR sequence that are targeting a feature branch: 292930-breakdown-pipeline_editor_app-into-smaller-components and not master.

Because the tests are coming in a following MR, the pipeline will not pass.

Part
1: Merge the code change in feature branch (You are here)
2: Merge test suites changes in feature branch
3 Merge feature branch into master

This refactor has more context in the architectural discussion that preceded this change. The gist of it as as follow:

  • Breakdown the pipeline_editor_app component into smaller components that represent part of the new section.
  • The component structure is as follow:
pipeline_editor_app 
  -> pipeline_editor_home
       -> pipeline_editor_header
       -> pipeline_editor_tabs
         -> text_editor
         -> pipeline_graph
         -> ci_lint
       -> commit_section
  • Use provide/inject for all static values at the top level
  • Have graphQL with apollo fetch the top level data, then pass it down using props
  • Add events where needed for children component to emit their changes upward

Couple of things to note while reviewing:

  • This looks bigger than it is. A lot of code is just moved.
  • To facilitate your review, start by looking at pipeline_editor_app so you can see what has been externalized to different components
  • Then you can go top-down following the architecture plan I left above of each component
  • I am open to any suggestion, even if the code was already a certain because it's nearly impossible for a reviewer to know. Please try anyway to focus on what changed if possible 🙇🏼

This does not change any User facing interface, so it doesn't require a changelog.

Screenshots (strongly suggested)

No visual changes. Here is a video of all the features still working

authoring

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 Frédéric Caplette

Merge request reports