Reset container width when switching to pipelines MR tab

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

Conflicts:
	app/assets/javascripts/commit/pipelines/pipelines_table.js
	app/assets/javascripts/merge_request_tabs.js
	spec/javascripts/commit/pipelines/pipelines_spec.js

5 files changed, 133 insertions, 127 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
index b5a988df897..87a9cc13a7e 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
@@ -2,7 +2,8 @@
 /* global Vue, CommitsPipelineStore, PipelinesService, Flash */
 
 window.Vue = require('vue');
-require('./pipelines_table');
+const PipelinesTable = require('./pipelines_table');
+
 /**
  * Commits View > Pipelines Tab > Pipelines Table.
  * Merge Request View > Pipelines Tab > Pipelines Table.
@@ -21,7 +22,7 @@ $(() => {
   }
 
   const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
-  gl.commits.pipelines.PipelinesTableBundle = new gl.commits.pipelines.PipelinesTableView();
+  gl.commits.pipelines.PipelinesTableBundle = new PipelinesTable();
 
   if (pipelineTableViewEl && pipelineTableViewEl.dataset.disableInitialization === undefined) {
     gl.commits.pipelines.PipelinesTableBundle.$mount(pipelineTableViewEl);
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index 631ed34851c..4e770ab7c31 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -5,9 +5,9 @@ window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
 require('../../lib/utils/common_utils');
 require('../../vue_shared/vue_resource_interceptor');
-require('../../vue_shared/components/pipelines_table');
 require('./pipelines_service');
 const PipelineStore = require('./pipelines_store');
+const PipelinesTableComponent = require('../../vue_shared/components/pipelines_table');
 
 /**
  *
@@ -19,86 +19,78 @@ const PipelineStore = require('./pipelines_store');
  * Necessary SVG in the table are provided as props. This should be refactored
  * as soon as we have Webpack and can load them directly into JS files.
  */
+module.exports = Vue.component('pipelines-table', {
+  components: {
+    'pipelines-table-component': PipelinesTableComponent,
+  },
 
-(() => {
-  window.gl = window.gl || {};
-  gl.commits = gl.commits || {};
-  gl.commits.pipelines = gl.commits.pipelines || {};
+  /**
+   * Accesses the DOM to provide the needed data.
+   * Returns the necessary props to render `pipelines-table-component` component.
+   *
+   * @return {Object}
+   */
+  data() {
+    const store = new PipelineStore();
 
-  gl.commits.pipelines.PipelinesTableView = Vue.component('pipelines-table', {
+    return {
+      endpoint: null,
+      store,
+      state: store.state,
+      isLoading: false,
+    };
+  },
 
-    components: {
-      'pipelines-table-component': gl.pipelines.PipelinesTableComponent,
-    },
+  /**
+   * 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.
+   *
+   */
+  beforeMount() {
+    this.endpoint = this.$el.dataset.endpoint;
+    const pipelinesService = new gl.commits.pipelines.PipelinesService(this.endpoint);
 
-    /**
-     * Accesses the DOM to provide the needed data.
-     * Returns the necessary props to render `pipelines-table-component` component.
-     *
-     * @return {Object}
-     */
-    data() {
-      const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset;
-      const store = new PipelineStore();
+    this.isLoading = true;
+    return pipelinesService.all()
+      .then(response => response.json())
+      .then((json) => {
+        // depending of the endpoint the response can either bring a `pipelines` key or not.
+        const pipelines = json.pipelines || json;
+        this.store.storePipelines(pipelines);
+        this.isLoading = false;
+      })
+      .catch(() => {
+        this.isLoading = false;
+        new Flash('An error occurred while fetching the pipelines, please reload the page again.', 'alert');
+      });
+  },
 
-      return {
-        endpoint: pipelinesTableData.endpoint,
-        store,
-        state: store.state,
-        isLoading: false,
-      };
-    },
+  beforeUpdate() {
+    if (this.state.pipelines.length && this.$children) {
+      PipelineStore.startTimeAgoLoops.call(this, Vue);
+    }
+  },
 
-    /**
-     * 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.
-     *
-     */
-    beforeMount() {
-      const pipelinesService = new gl.commits.pipelines.PipelinesService(this.endpoint);
-
-      this.isLoading = true;
-      return pipelinesService.all()
-        .then(response => response.json())
-        .then((json) => {
-          // depending of the endpoint the response can either bring a `pipelines` key or not.
-          const pipelines = json.pipelines || json;
-          this.store.storePipelines(pipelines);
-          this.isLoading = false;
-        })
-        .catch(() => {
-          this.isLoading = false;
-          new Flash('An error occurred while fetching the pipelines, please reload the page again.', 'alert');
-        });
-    },
-
-    beforeUpdate() {
-      if (this.state.pipelines.length && this.$children) {
-        PipelineStore.startTimeAgoLoops.call(this, Vue);
-      }
-    },
-
-    template: `
-      <div class="pipelines">
-        <div class="realtime-loading" v-if="isLoading">
-          <i class="fa fa-spinner fa-spin"></i>
-        </div>
+  template: `
+    <div class="pipelines">
+      <div class="realtime-loading" v-if="isLoading">
+        <i class="fa fa-spinner fa-spin"></i>
+      </div>
 
-        <div class="blank-state blank-state-no-icon"
-          v-if="!isLoading && state.pipelines.length === 0">
-          <h2 class="blank-state-title js-blank-state-title">
-            No pipelines to show
-          </h2>
-        </div>
+      <div class="blank-state blank-state-no-icon"
+        v-if="!isLoading && state.pipelines.length === 0">
+        <h2 class="blank-state-title js-blank-state-title">
+          No pipelines to show
+        </h2>
+      </div>
 
-        <div class="table-holder pipelines"
-          v-if="!isLoading && state.pipelines.length > 0">
-          <pipelines-table-component :pipelines="state.pipelines"/>
-        </div>
+      <div class="table-holder pipelines"
+        v-if="!isLoading && state.pipelines.length > 0">
+        <pipelines-table-component :pipelines="state.pipelines"/>
       </div>
-    `,
-  });
-})();
+    </div>
+  `,
+});
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 190336dbd20..3f0ad6490b5 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -3,9 +3,12 @@
 /* global Cookies */
 /* global Flash */
 
-require('./breakpoints');
-window.Cookies = require('js-cookie');
-require('./flash');
+import Cookies from 'js-cookie';
+
+import './breakpoints';
+import './flash';
+
+const PipelinesTable = require('./commit/pipelines/pipelines_table');
 
 /* eslint-disable max-len */
 // MergeRequestTabs
@@ -97,6 +100,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'));
@@ -131,12 +141,8 @@ require('./flash');
           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;
+        this.resetViewContainer();
+        this.loadPipelines();
       } else {
         this.expandView();
         this.resetViewContainer();
@@ -225,6 +231,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 PipelinesTable().$mount(pipelineTableViewEl);
+      }
+      this.pipelinesLoaded = true;
+    }
+
     loadDiff(source) {
       if (this.diffsLoaded) {
         return;
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
index 601ef41e917..4732092ab14 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -2,17 +2,18 @@
 /* eslint-disable no-param-reassign */
 
 window.Vue = require('vue');
+
 require('../vue_shared/components/table_pagination');
 require('./store');
-require('../vue_shared/components/pipelines_table');
 const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_store');
+const PipelinesTableComponent = require('../vue_shared/components/pipelines_table');
 
 ((gl) => {
   gl.VuePipelines = Vue.extend({
 
     components: {
       'gl-pagination': gl.VueGlPagination,
-      'pipelines-table-component': gl.pipelines.PipelinesTableComponent,
+      'pipelines-table-component': PipelinesTableComponent,
     },
 
     data() {
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table.js b/app/assets/javascripts/vue_shared/components/pipelines_table.js
index 0d8f85db965..c534bb85bf1 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table.js
@@ -8,45 +8,39 @@ require('./pipelines_table_row');
  * Given an array of objects, renders a table.
  */
 
-(() => {
-  window.gl = window.gl || {};
-  gl.pipelines = gl.pipelines || {};
-
-  gl.pipelines.PipelinesTableComponent = Vue.component('pipelines-table-component', {
-
-    props: {
-      pipelines: {
-        type: Array,
-        required: true,
-        default: () => ([]),
-      },
-
+module.exports = {
+  props: {
+    pipelines: {
+      type: Array,
+      required: true,
+      default: () => ([]),
     },
 
-    components: {
-      'pipelines-table-row-component': gl.pipelines.PipelinesTableRowComponent,
-    },
+  },
+
+  components: {
+    'pipelines-table-row-component': gl.pipelines.PipelinesTableRowComponent,
+  },
 
-    template: `
-      <table class="table ci-table">
-        <thead>
-          <tr>
-            <th class="js-pipeline-status pipeline-status">Status</th>
-            <th class="js-pipeline-info pipeline-info">Pipeline</th>
-            <th class="js-pipeline-commit pipeline-commit">Commit</th>
-            <th class="js-pipeline-stages pipeline-stages">Stages</th>
-            <th class="js-pipeline-date pipeline-date"></th>
-            <th class="js-pipeline-actions pipeline-actions"></th>
-          </tr>
-        </thead>
-        <tbody>
-          <template v-for="model in pipelines"
-            v-bind:model="model">
-            <tr is="pipelines-table-row-component"
-              :pipeline="model"></tr>
-          </template>
-        </tbody>
-      </table>
-    `,
-  });
-})();
+  template: `
+    <table class="table ci-table">
+      <thead>
+        <tr>
+          <th class="js-pipeline-status pipeline-status">Status</th>
+          <th class="js-pipeline-info pipeline-info">Pipeline</th>
+          <th class="js-pipeline-commit pipeline-commit">Commit</th>
+          <th class="js-pipeline-stages pipeline-stages">Stages</th>
+          <th class="js-pipeline-date pipeline-date"></th>
+          <th class="js-pipeline-actions pipeline-actions"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-for="model in pipelines"
+          v-bind:model="model">
+          <tr is="pipelines-table-row-component"
+            :pipeline="model"></tr>
+        </template>
+      </tbody>
+    </table>
+  `,
+};