Fix stray pipelines API request when showing MR27925-fix-mr-stray-pipelines-api-request

Fixes https://gitlab.com/gitlab-org/gitlab-ce/issues/27925

6 files changed, 25 insertions, 8 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6
index fbfec7743c7..b5a988df897 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6
+++ b/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);
+  }
 });
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6
index ce0dbd4d56b..5983ad4afc2 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6
+++ b/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;
diff --git a/app/assets/javascripts/merge_request_tabs.js.es6 b/app/assets/javascripts/merge_request_tabs.js.es6
index cc049e00477..da9bd9e9d82 100644
--- a/app/assets/javascripts/merge_request_tabs.js.es6
+++ b/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;
 
@@ -128,6 +129,13 @@ require('./flash');
         $.scrollTo('.merge-request-details .merge-request-tabs', {
           offset: 0,
         });
+      } 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();
diff --git a/app/views/projects/commit/_pipelines_list.haml b/app/views/projects/commit/_pipelines_list.haml
index aae2cb8a04b..33917513f37 100644
--- a/app/views/projects/commit/_pipelines_list.haml
+++ b/app/views/projects/commit/_pipelines_list.haml
@@ -1,4 +1,7 @@
-#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"),
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index dd615d3036c..521b0694ca9 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/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
 
diff --git a/changelogs/unreleased/27925-fix-mr-stray-pipelines-api-request.yml b/changelogs/unreleased/27925-fix-mr-stray-pipelines-api-request.yml
new file mode 100644
index 00000000000..f7bdb62b7f3
--- /dev/null
+++ b/changelogs/unreleased/27925-fix-mr-stray-pipelines-api-request.yml
@@ -0,0 +1,4 @@
+---
+title: Fix stray pipelines API request when showing MR
+merge_request:
+author: