Reset container width when switching to pipelines MR tab

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

2 files changed, 29 insertions, 11 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index a20e5bc3b1b..4d5a857d705 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -33,12 +33,11 @@ export default Vue.component('pipelines-table', {
    * @return {Object}
    */
   data() {
-    const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
     const store = new PipelineStore();
 
     return {
-      endpoint: pipelinesTableData.endpoint,
-      helpPagePath: pipelinesTableData.helpPagePath,
+      endpoint: null,
+      helpPagePath: null,
       store,
       state: store.state,
       isLoading: false,
@@ -65,6 +64,8 @@ export default Vue.component('pipelines-table', {
    *
    */
   beforeMount() {
+    this.endpoint = this.$el.dataset.endpoint;
+    this.helpPagePath = this.$el.dataset.helpPagePath;
     this.service = new PipelinesService(this.endpoint);
 
     this.fetchPipelines();
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 811f90c5a87..3c4e6102469 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -4,8 +4,10 @@
 
 import Cookies from 'js-cookie';
 
-require('./breakpoints');
-require('./flash');
+import CommitPipelinesTable from './commit/pipelines/pipelines_table';
+
+import './breakpoints';
+import './flash';
 
 /* eslint-disable max-len */
 // MergeRequestTabs
@@ -97,6 +99,13 @@ require('./flash');
         .off('click', this.clickTab);
     }
 
+    destroy() {
+      this.unbindEvents();
+      if (this.commitPipelinesTable) {
+        this.commitPipelinesTable.$destroy();
+      }
+    }
+
     showTab(e) {
       e.preventDefault();
       this.activateTab($(e.target).data('action'));
@@ -128,12 +137,8 @@ require('./flash');
           this.expandViewContainer();
         }
       } 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;
+        this.resetViewContainer();
+        this.loadPipelines();
       } else {
         this.expandView();
         this.resetViewContainer();
@@ -222,6 +227,18 @@ require('./flash');
       });
     }
 
+    loadPipelines() {
+      if (this.pipelinesLoaded) {
+        return;
+      }
+      const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
+      // Could already be mounted from the `pipelines_bundle`
+      if (pipelineTableViewEl) {
+        this.commitPipelinesTable = new CommitPipelinesTable().$mount(pipelineTableViewEl);
+      }
+      this.pipelinesLoaded = true;
+    }
+
     loadDiff(source) {
       if (this.diffsLoaded) {
         return;