Render the pipeline header without a pipeline

Miguel Rinconrequested to merge
634491-pipeline-header-null-pipeline into master

What does this MR do and why?

pipeline_header.vue starts with pipeline: null. pipeline stays null when the page has no pipeline IID (the query is skipped) or when the query returns no pipeline. Most of the component already reads it with this.pipeline?., but four places do not:

  • isMergeTrainPipeline and sourceBranch in computed
  • v-if="pipeline.id" on header-badges and on header-actions, inside the page-heading slots

So with no pipeline, rendering the heading throws Cannot read properties of null. This MR reads these four with optional chaining, like the rest of the component.

Why the spec did not catch it

The spec mounts with shallowMountExtended, which stubs PageHeading. With Vue 2 and Vue Test Utils 1, the stub does not render the slots, so the code that reads pipeline.id never ran. The Vue 3 Jest stubs do render slots. The Vue 2 removal proof of concept !263207 found the error that way: "skips the query when pipelineIid is missing" failed with the Vue 3 compiler.

The "missing pipelineIid" examples now render the real PageHeading. A new example checks that the heading renders without a pipeline, and without badges or actions. Without the component fix, the examples fail with VUE_VERSION=2, with VUE_VERSION=3, and with VUE_VERSION=3 VUE_COMPILER_VERSION=3. With the fix, they pass in all three.

References

  • Found in the Vue 2 removal proof of concept: !263207
  • Vue 3 compiler in the Vue 3 CI jobs, which needs this fix for a green jest-with-fixtures vue3: !263251 (merged)
  • Plan to remove Vue 2: #634491

Screenshots or screen recordings

Not applicable. A pipeline page with a pipeline renders as before.

How to set up and validate locally

  1. Open a pipeline page, for example /<project>/-/pipelines/<id>. The header renders as before.
  2. Run yarn jest spec/frontend/ci/pipeline_details/header/pipeline_header_spec.js -t "missing pipelineIid" with VUE_VERSION=2, with VUE_VERSION=3, and with VUE_VERSION=3 VUE_COMPILER_VERSION=3. It passes in all three.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports