Merge branch '27925-fix-mr-stray-pipelines-api-request' into 'master'

app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6

@@ -20,7 +20,10 @@ $(() => {
     gl.commits.PipelinesTableBundle.$destroy(true);
   }
 
-  gl.commits.pipelines.PipelinesTableBundle = new gl.commits.pipelines.PipelinesTableView({
-    el: document.querySelector('#commit-pipeline-table-view'),
-  });
+  const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
+  gl.commits.pipelines.PipelinesTableBundle = new gl.commits.pipelines.PipelinesTableView();
+
+  if (pipelineTableViewEl && pipelineTableViewEl.dataset.disableInitialization === undefined) {
+    gl.commits.pipelines.PipelinesTableBundle.$mount(pipelineTableViewEl);
+  }
 });

app/assets/javascripts/commit/pipelines/pipelines_table.js.es6

@@ -56,15 +56,14 @@ require('./pipelines_store');
     },
 
     /**
-     * When the component is created the service to fetch the data will be
-     * initialized with the correct endpoint.
+     * When the component is about to be mounted, tell the service to fetch the data
      *
      * A request to fetch the pipelines will be made.
      * In case of a successfull response we will store the data in the provided
      * store, in case of a failed response we need to warn the user.
      *
      */
-    created() {
+    beforeMount() {
       const pipelinesService = new gl.commits.pipelines.PipelinesService(this.endpoint);
 
       this.isLoading = true;

app/assets/javascripts/merge_request_tabs.js.es6

@@ -61,6 +61,7 @@ require('./flash');
 
     constructor({ action, setUrl, stubLocation } = {}) {
       this.diffsLoaded = false;
+      this.pipelinesLoaded = false;
       this.commitsLoaded = false;
       this.fixedLayoutPref = null;
 
@@ -129,6 +130,13 @@ require('./flash');
         $.scrollTo('.merge-request-details .merge-request-tabs', {
           offset: -navBarHeight,
         });
+      } else if (action === 'pipelines') {
+        if (this.pipelinesLoaded) {
+          return;
+        }
+        const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
+        gl.commits.pipelines.PipelinesTableBundle.$mount(pipelineTableViewEl);
+        this.pipelinesLoaded = true;
       } else {
         this.expandView();
         this.resetViewContainer();

app/views/projects/commit/_pipelines_list.haml

-#commit-pipeline-table-view{ data: { endpoint: endpoint } }
+- disable_initialization = local_assigns.fetch(:disable_initialization, false)
+#commit-pipeline-table-view{ data: { disable_initialization: disable_initialization,
+  endpoint: endpoint,
+} }
 .pipeline-svgs{ data: { "commit_icon_svg" => custom_icon("icon_commit"),
   "icon_status_canceled" => custom_icon("icon_status_canceled"),
   "icon_status_running" => custom_icon("icon_status_running"),

app/views/projects/merge_requests/_show.html.haml

@@ -94,7 +94,7 @@
         -# This tab is always loaded via AJAX
       #pipelines.pipelines.tab-pane
         - if @pipelines.any?
-          = render 'projects/commit/pipelines_list', endpoint: pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
+          = render 'projects/commit/pipelines_list', disable_initialization: true, endpoint: pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
       #diffs.diffs.tab-pane
         -# This tab is always loaded via AJAX
 

changelogs/unreleased/27925-fix-mr-stray-pipelines-api-request.yml

+---
+title: Fix stray pipelines API request when showing MR
+merge_request:
+author: