Fix pipeline details page initialization on invalid pipeline

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/25302

app/assets/javascripts/pages/projects/pipelines/init_pipelines.js

@@ -13,19 +13,21 @@ export default () => {
     });
   }
 
+  const pipelineTabLink = document.querySelector('.js-pipeline-tab-link a');
   const { controllerAction } = document.querySelector('.js-pipeline-container').dataset;
-  const pipelineStatusUrl = `${document
-    .querySelector('.js-pipeline-tab-link a')
-    .getAttribute('href')}/status.json`;
 
-  // eslint-disable-next-line no-new
-  new Pipelines({
-    initTabs: true,
-    pipelineStatusUrl,
-    tabsOptions: {
-      action: controllerAction,
-      defaultAction: 'pipelines',
-      parentEl: '.pipelines-tabs',
-    },
-  });
+  if (pipelineTabLink) {
+    const pipelineStatusUrl = `${pipelineTabLink.getAttribute('href')}/status.json`;
+
+    // eslint-disable-next-line no-new
+    new Pipelines({
+      initTabs: true,
+      pipelineStatusUrl,
+      tabsOptions: {
+        action: controllerAction,
+        defaultAction: 'pipelines',
+        parentEl: '.pipelines-tabs',
+      },
+    });
+  }
 };

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -95,14 +95,14 @@ export default () => {
     },
   });
 
+  const tabsElement = document.querySelector('.pipelines-tabs');
   const testReportsEnabled =
     window.gon && window.gon.features && window.gon.features.junitPipelineView;
 
-  if (testReportsEnabled) {
+  if (tabsElement && testReportsEnabled) {
     const fetchReportsAction = 'fetchReports';
     testReportsStore.dispatch('setEndpoint', dataset.testReportEndpoint);
 
-    const tabsElmement = document.querySelector('.pipelines-tabs');
     const isTestTabActive = Boolean(
       document.querySelector('.pipelines-tabs > li > a.test-tab.active'),
     );
@@ -113,11 +113,11 @@ export default () => {
       const tabClickHandler = e => {
         if (e.target.className === 'test-tab') {
           testReportsStore.dispatch(fetchReportsAction);
-          tabsElmement.removeEventListener('click', tabClickHandler);
+          tabsElement.removeEventListener('click', tabClickHandler);
         }
       };
 
-      tabsElmement.addEventListener('click', tabClickHandler);
+      tabsElement.addEventListener('click', tabClickHandler);
     }
 
     // eslint-disable-next-line no-new

changelogs/unreleased/fix-pipeline-details-invalid-buttons.yml

+---
+title: Fix pipeline details page initialisation on invalid pipeline
+merge_request: 25302
+author: Fabio Huser
+type: fixed

spec/factories/ci/pipelines.rb

@@ -22,6 +22,7 @@ FactoryBot.define do
 
     factory :ci_pipeline do
       trait :invalid do
+        status { :failed }
         yaml_errors { 'invalid YAML' }
         failure_reason { :config_error }
       end

spec/features/projects/pipelines/pipeline_spec.rb

@@ -1077,8 +1077,6 @@ describe 'Pipeline', :js do
     end
 
     context 'when pipeline has configuration errors' do
-      include_context 'pipeline builds'
-
       let(:pipeline) do
         create(:ci_pipeline,
                :invalid,
@@ -1119,6 +1117,10 @@ describe 'Pipeline', :js do
             %Q{span[title="#{pipeline.present.failure_reason}"]})
         end
       end
+
+      it 'contains a pipeline header with title' do
+        expect(page).to have_content "Pipeline ##{pipeline.id}"
+      end
     end
 
     context 'when pipeline is stuck' do