Remove environments and commit pipelines components from global namespace

23 files changed, 153 insertions, 197 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
index b5a988df897..d202655e211 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
@@ -1,8 +1,6 @@
 /* eslint-disable no-new, no-param-reassign */
-/* global Vue, CommitsPipelineStore, PipelinesService, Flash */
+import CommitPipelinesTable from './pipelines_table';
 
-window.Vue = require('vue');
-require('./pipelines_table');
 /**
  * Commits View > Pipelines Tab > Pipelines Table.
  * Merge Request View > Pipelines Tab > Pipelines Table.
@@ -21,7 +19,7 @@ $(() => {
   }
 
   const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
-  gl.commits.pipelines.PipelinesTableBundle = new gl.commits.pipelines.PipelinesTableView();
+  gl.commits.pipelines.PipelinesTableBundle = new CommitPipelinesTable();
 
   if (pipelineTableViewEl && pipelineTableViewEl.dataset.disableInitialization === undefined) {
     gl.commits.pipelines.PipelinesTableBundle.$mount(pipelineTableViewEl);
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_service.js b/app/assets/javascripts/commit/pipelines/pipelines_service.js
index 8ae98f9bf97..40fabd90a9e 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_service.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_service.js
@@ -1,13 +1,14 @@
-/* globals Vue */
-/* eslint-disable no-unused-vars, no-param-reassign */
+import Vue from 'vue';
+import VueResource from 'vue-resource';
 
+Vue.use(VueResource);
 /**
  * Pipelines service.
  *
  * Used to fetch the data used to render the pipelines table.
  * Uses Vue.Resource
  */
-class PipelinesService {
+export default class PipelinesService {
 
   /**
    * FIXME: The url provided to request the pipelines in the new merge request
@@ -37,8 +38,3 @@ class PipelinesService {
     return this.pipelines.get();
   }
 }
-
-window.gl = window.gl || {};
-gl.commits = gl.commits || {};
-gl.commits.pipelines = gl.commits.pipelines || {};
-gl.commits.pipelines.PipelinesService = PipelinesService;
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_store.js b/app/assets/javascripts/commit/pipelines/pipelines_store.js
index f1b80e45444..81413ff9aed 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_store.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_store.js
@@ -4,9 +4,9 @@
  *
  * Used to store the Pipelines rendered in the commit view in the pipelines table.
  */
-require('../../vue_realtime_listener');
+import '../../vue_realtime_listener';
 
-class PipelinesStore {
+export default class PipelinesStore {
   constructor() {
     this.state = {};
     this.state.pipelines = [];
@@ -44,5 +44,3 @@ class PipelinesStore {
     gl.VueRealtimeListener(removeIntervals, startIntervals);
   }
 }
-
-module.exports = PipelinesStore;
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index 598e62b4816..ee212083f66 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -1,14 +1,11 @@
-/* eslint-disable no-new, no-param-reassign */
-/* global Vue, CommitsPipelineStore, PipelinesService, Flash */
-
-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');
-
+/* eslint-disable no-new*/
+/* global Flash */
+import Vue from 'vue';
+import PipelinesTableComponent from '../../vue_shared/components/pipelines_table';
+import PipelinesService from './pipelines_service';
+import PipelineStore from './pipelines_store';
+import '../../lib/utils/common_utils';
+import '../../vue_shared/vue_resource_interceptor';
 /**
  *
  * Uses `pipelines-table-component` to render Pipelines table with an API call.
@@ -20,93 +17,86 @@ const PipelineStore = require('./pipelines_store');
  * as soon as we have Webpack and can load them directly into JS files.
  */
 
-(() => {
-  window.gl = window.gl || {};
-  gl.commits = gl.commits || {};
-  gl.commits.pipelines = gl.commits.pipelines || {};
-
-  gl.commits.pipelines.PipelinesTableView = Vue.component('pipelines-table', {
-
-    components: {
-      'pipelines-table-component': gl.pipelines.PipelinesTableComponent,
-    },
+export default Vue.component('pipelines-table', {
+  components: {
+    'pipelines-table-component': PipelinesTableComponent,
+  },
 
-    /**
-     * 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();
+  /**
+   * 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();
 
-      return {
-        endpoint: pipelinesTableData.endpoint,
-        store,
-        state: store.state,
-        isLoading: false,
-      };
-    },
+    return {
+      endpoint: pipelinesTableData.endpoint,
+      store,
+      state: store.state,
+      isLoading: false,
+    };
+  },
 
-    /**
-     * 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.service = new gl.commits.pipelines.PipelinesService(this.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.
+   *
+   */
+  beforeMount() {
+    this.service = new PipelinesService(this.endpoint);
 
-      this.fetchPipelines();
-    },
+    this.fetchPipelines();
+  },
 
-    beforeUpdate() {
-      if (this.state.pipelines.length && this.$children) {
-        PipelineStore.startTimeAgoLoops.call(this, Vue);
-      }
-    },
+  beforeUpdate() {
+    if (this.state.pipelines.length && this.$children) {
+      PipelineStore.startTimeAgoLoops.call(this, Vue);
+    }
+  },
 
-    methods: {
-      fetchPipelines() {
-        this.isLoading = true;
-        return this.service.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.');
-          });
-      },
+  methods: {
+    fetchPipelines() {
+      this.isLoading = true;
+      return this.service.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.');
+        });
     },
+  },
 
-    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"
-            :service="service" />
-        </div>
+      <div class="table-holder pipelines"
+        v-if="!isLoading && state.pipelines.length > 0">
+        <pipelines-table-component
+          :pipelines="state.pipelines"
+          :service="service" />
       </div>
-    `,
-  });
-})();
+    </div>
+  `,
+});
diff --git a/app/assets/javascripts/environments/components/environment.js b/app/assets/javascripts/environments/components/environment.js
index 2cb48dde628..73374a81a17 100644
--- a/app/assets/javascripts/environments/components/environment.js
+++ b/app/assets/javascripts/environments/components/environment.js
@@ -1,20 +1,16 @@
-/* eslint-disable no-param-reassign, no-new */
+/* eslint-disable no-new */
 /* global Flash */
-
-const Vue = window.Vue = require('vue');
-window.Vue.use(require('vue-resource'));
-const EnvironmentsService = require('../services/environments_service');
-const EnvironmentTable = require('./environments_table');
-const EnvironmentsStore = require('../stores/environments_store');
-require('../../vue_shared/components/table_pagination');
-require('../../lib/utils/common_utils');
-require('../../vue_shared/vue_resource_interceptor');
-
-module.exports = Vue.component('environment-component', {
-
+import Vue from 'vue';
+import EnvironmentsService from '../services/environments_service';
+import EnvironmentTable from './environments_table';
+import EnvironmentsStore from '../stores/environments_store';
+import TablePaginationComponent from '../../vue_shared/components/table_pagination';
+import '../../lib/utils/common_utils';
+
+export default Vue.component('environment-component', {
   components: {
     'environment-table': EnvironmentTable,
-    'table-pagination': gl.VueGlPagination,
+    'table-pagination': TablePaginationComponent,
   },
 
   data() {
@@ -58,7 +54,6 @@ module.exports = Vue.component('environment-component', {
     canCreateEnvironmentParsed() {
       return gl.utils.convertPermissionToBoolean(this.canCreateEnvironment);
     },
-
   },
 
   /**
diff --git a/app/assets/javascripts/environments/components/environment_actions.js b/app/assets/javascripts/environments/components/environment_actions.js
index 15e3f8823d2..ed8c2f422a4 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js
+++ b/app/assets/javascripts/environments/components/environment_actions.js
@@ -1,7 +1,6 @@
-const Vue = require('vue');
-const playIconSvg = require('icons/_icon_play.svg');
+import playIconSvg from 'icons/_icon_play.svg';
 
-module.exports = Vue.component('actions-component', {
+export default {
   props: {
     actions: {
       type: Array,
@@ -38,4 +37,4 @@ module.exports = Vue.component('actions-component', {
     </button>
   </div>
   `,
-});
+};
diff --git a/app/assets/javascripts/environments/components/environment_external_url.js b/app/assets/javascripts/environments/components/environment_external_url.js
index 2599bba3c59..b5bfebe606c 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.js
+++ b/app/assets/javascripts/environments/components/environment_external_url.js
@@ -1,9 +1,7 @@
 /**
  * Renders the external url link in environments table.
  */
-const Vue = require('vue');
-
-module.exports = Vue.component('external-url-component', {
+export default {
   props: {
     externalUrl: {
       type: String,
@@ -16,4 +14,4 @@ module.exports = Vue.component('external-url-component', {
       <i class="fa fa-external-link"></i>
     </a>
   `,
-});
+};
diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.js
index 7f4e070b229..b3184207cef 100644
--- a/app/assets/javascripts/environments/components/environment_item.js
+++ b/app/assets/javascripts/environments/components/environment_item.js
@@ -1,26 +1,23 @@
-const Vue = require('vue');
-const Timeago = require('timeago.js');
+import Timeago from 'timeago.js';
+import '../../lib/utils/text_utility';
 
-require('../../lib/utils/text_utility');
-require('../../vue_shared/components/commit');
-const ActionsComponent = require('./environment_actions');
-const ExternalUrlComponent = require('./environment_external_url');
-const StopComponent = require('./environment_stop');
-const RollbackComponent = require('./environment_rollback');
-const TerminalButtonComponent = require('./environment_terminal_button');
+import ActionsComponent from './environment_actions';
+import ExternalUrlComponent from './environment_external_url';
+import StopComponent from './environment_stop';
+import RollbackComponent from './environment_rollback';
+import TerminalButtonComponent from './environment_terminal_button';
+import CommitComponent from '../../vue_shared/components/commit';
 
 /**
  * Envrionment Item Component
  *
  * Renders a table row for each environment.
  */
-
 const timeagoInstance = new Timeago();
 
-module.exports = Vue.component('environment-item', {
-
+export default {
   components: {
-    'commit-component': gl.CommitComponent,
+    'commit-component': CommitComponent,
     'actions-component': ActionsComponent,
     'external-url-component': ExternalUrlComponent,
     'stop-component': StopComponent,
@@ -507,4 +504,4 @@ module.exports = Vue.component('environment-item', {
       </td>
     </tr>
   `,
-});
+};
diff --git a/app/assets/javascripts/environments/components/environment_rollback.js b/app/assets/javascripts/environments/components/environment_rollback.js
index daf126eb4e8..a558dbe6d82 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.js
+++ b/app/assets/javascripts/environments/components/environment_rollback.js
@@ -2,9 +2,7 @@
  * Renders Rollback or Re deploy button in environments table depending
  * of the provided property `isLastDeployment`
  */
-const Vue = require('vue');
-
-module.exports = Vue.component('rollback-component', {
+export default {
   props: {
     retryUrl: {
       type: String,
@@ -27,4 +25,4 @@ module.exports = Vue.component('rollback-component', {
       </span>
     </a>
   `,
-});
+};
diff --git a/app/assets/javascripts/environments/components/environment_stop.js b/app/assets/javascripts/environments/components/environment_stop.js
index 96983a19568..d83826de268 100644
--- a/app/assets/javascripts/environments/components/environment_stop.js
+++ b/app/assets/javascripts/environments/components/environment_stop.js
@@ -2,9 +2,7 @@
  * Renders the stop "button" that allows stop an environment.
  * Used in environments table.
  */
-const Vue = require('vue');
-
-module.exports = Vue.component('stop-component', {
+export default {
   props: {
     stopUrl: {
       type: String,
@@ -21,4 +19,4 @@ module.exports = Vue.component('stop-component', {
       <i class="fa fa-stop stop-env-icon" aria-hidden="true"></i>
     </a>
   `,
-});
+};
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js b/app/assets/javascripts/environments/components/environment_terminal_button.js
index e86607e78f4..c1a9336907f 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.js
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.js
@@ -2,10 +2,9 @@
  * Renders a terminal button to open a web terminal.
  * Used in environments table.
  */
-const Vue = require('vue');
-const terminalIconSvg = require('icons/_icon_terminal.svg');
+import terminalIconSvg from 'icons/_icon_terminal.svg';
 
-module.exports = Vue.component('terminal-button-component', {
+export default {
   props: {
     terminalPath: {
       type: String,
@@ -23,4 +22,4 @@ module.exports = Vue.component('terminal-button-component', {
       ${terminalIconSvg}
     </a>
   `,
-});
+};
diff --git a/app/assets/javascripts/environments/components/environments_table.js b/app/assets/javascripts/environments/components/environments_table.js
index 4088d63be80..fdd7f15ed7f 100644
--- a/app/assets/javascripts/environments/components/environments_table.js
+++ b/app/assets/javascripts/environments/components/environments_table.js
@@ -1,13 +1,12 @@
 /**
  * Render environments table.
  */
-const Vue = require('vue');
-const EnvironmentItem = require('./environment_item');
 
-module.exports = Vue.component('environment-table-component', {
+import EnvironmentTableRowComponent from './environment_item';
 
+export default {
   components: {
-    'environment-item': EnvironmentItem,
+    'environment-item': EnvironmentTableRowComponent,
   },
 
   props: {
@@ -53,4 +52,4 @@ module.exports = Vue.component('environment-table-component', {
       </tbody>
     </table>
   `,
-});
+};
diff --git a/app/assets/javascripts/environments/environments_bundle.js b/app/assets/javascripts/environments/environments_bundle.js
index 7bbba91bc10..8d963b335cf 100644
--- a/app/assets/javascripts/environments/environments_bundle.js
+++ b/app/assets/javascripts/environments/environments_bundle.js
@@ -1,4 +1,4 @@
-const EnvironmentsComponent = require('./components/environment');
+import EnvironmentsComponent from './components/environment';
 
 $(() => {
   window.gl = window.gl || {};
diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
index d2ca465351a..f939eccf246 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js
+++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
@@ -1,4 +1,4 @@
-const EnvironmentsFolderComponent = require('./environments_folder_view');
+import EnvironmentsFolderComponent from './environments_folder_view';
 
 $(() => {
   window.gl = window.gl || {};
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.js b/app/assets/javascripts/environments/folder/environments_folder_view.js
index 2a9d0492d7a..2449ebe0923 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.js
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.js
@@ -1,20 +1,17 @@
-/* eslint-disable no-param-reassign, no-new */
+/* eslint-disable no-new */
 /* global Flash */
-
-const Vue = window.Vue = require('vue');
-window.Vue.use(require('vue-resource'));
-const EnvironmentsService = require('../services/environments_service');
-const EnvironmentTable = require('../components/environments_table');
-const EnvironmentsStore = require('../stores/environments_store');
-require('../../vue_shared/components/table_pagination');
-require('../../lib/utils/common_utils');
-require('../../vue_shared/vue_resource_interceptor');
-
-module.exports = Vue.component('environment-folder-view', {
-
+import Vue from 'vue';
+import EnvironmentsService from '../services/environments_service';
+import EnvironmentTable from '../components/environments_table';
+import EnvironmentsStore from '../stores/environments_store';
+import TablePaginationComponent from '../../vue_shared/components/table_pagination';
+import '../../lib/utils/common_utils';
+import '../../vue_shared/vue_resource_interceptor';
+
+export default Vue.component('environment-folder-view', {
   components: {
     'environment-table': EnvironmentTable,
-    'table-pagination': gl.VueGlPagination,
+    'table-pagination': TablePaginationComponent,
   },
 
   data() {
diff --git a/app/assets/javascripts/environments/services/environments_service.js b/app/assets/javascripts/environments/services/environments_service.js
index effc6c4c838..d276b18a34f 100644
--- a/app/assets/javascripts/environments/services/environments_service.js
+++ b/app/assets/javascripts/environments/services/environments_service.js
@@ -1,6 +1,9 @@
-const Vue = require('vue');
+import Vue from 'vue';
+import VueResource from 'vue-resource';
 
-class EnvironmentsService {
+Vue.use(VueResource);
+
+export default class EnvironmentsService {
   constructor(endpoint) {
     this.environments = Vue.resource(endpoint);
   }
@@ -9,5 +12,3 @@ class EnvironmentsService {
     return this.environments.get();
   }
 }
-
-module.exports = EnvironmentsService;
diff --git a/app/assets/javascripts/environments/stores/environments_store.js b/app/assets/javascripts/environments/stores/environments_store.js
index 15cd9bde08e..3c3084f3b78 100644
--- a/app/assets/javascripts/environments/stores/environments_store.js
+++ b/app/assets/javascripts/environments/stores/environments_store.js
@@ -1,11 +1,11 @@
-require('~/lib/utils/common_utils');
+import '~/lib/utils/common_utils';
 /**
  * Environments Store.
  *
  * Stores received environments, count of stopped environments and count of
  * available environments.
  */
-class EnvironmentsStore {
+export default class EnvironmentsStore {
   constructor() {
     this.state = {};
     this.state.environments = [];
@@ -86,5 +86,3 @@ class EnvironmentsStore {
     return count;
   }
 }
-
-module.exports = EnvironmentsStore;
diff --git a/app/assets/javascripts/vue_pipelines_index/components/time_ago.js b/app/assets/javascripts/vue_pipelines_index/components/time_ago.js
index 7319e35efc4..498d0715f54 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/time_ago.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/time_ago.js
@@ -1,5 +1,5 @@
-import '../lib/utils/datetime_utility';
 import iconTimerSvg from 'icons/_icon_timer.svg';
+import '../../lib/utils/datetime_utility';
 
 export default {
   data() {
diff --git a/app/assets/javascripts/vue_pipelines_index/index.js b/app/assets/javascripts/vue_pipelines_index/index.js
index 8e956890777..104154a715b 100644
--- a/app/assets/javascripts/vue_pipelines_index/index.js
+++ b/app/assets/javascripts/vue_pipelines_index/index.js
@@ -1,10 +1,7 @@
+import Vue from 'vue';
 import PipelinesStore from './stores/pipelines_store';
 import PipelinesComponent from './pipelines';
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
-require('../vue_shared/vue_resource_interceptor');
+import '../vue_shared/vue_resource_interceptor';
 
 $(() => new Vue({
   el: document.querySelector('.vue-pipelines-index'),
diff --git a/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js b/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js
index 794104c5c90..ad7df68f9a1 100644
--- a/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js
+++ b/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js
@@ -1,5 +1,8 @@
 /* eslint-disable class-methods-use-this */
 import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
 
 export default class PipelinesService {
   constructor(endpoint) {
diff --git a/app/assets/javascripts/vue_shared/components/commit.js b/app/assets/javascripts/vue_shared/components/commit.js
index cea73c33fb4..fb68abd95a2 100644
--- a/app/assets/javascripts/vue_shared/components/commit.js
+++ b/app/assets/javascripts/vue_shared/components/commit.js
@@ -1,7 +1,6 @@
 import commitIconSvg from 'icons/_icon_commit.svg';
 
 export default {
-
   props: {
     /**
      * Indicates the existance of a tag.
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table.js b/app/assets/javascripts/vue_shared/components/pipelines_table.js
index 8e8bb822f04..afd8d7acf6b 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table.js
@@ -5,9 +5,7 @@ import PipelinesTableRowComponent from './pipelines_table_row';
  *
  * Given an array of objects, renders a table.
  */
-
 export default {
-
   props: {
     pipelines: {
       type: Array,
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
index 63dafcdaea6..5ffe05ced62 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
@@ -1,5 +1,4 @@
 /* eslint-disable no-param-reassign */
-/* global Vue */
 
 import AsyncButtonComponent from '../../vue_pipelines_index/components/async_button';
 import PipelinesActionsComponent from '../../vue_pipelines_index/components/pipelines_actions';
@@ -8,15 +7,14 @@ import PipelinesStatusComponent from '../../vue_pipelines_index/components/statu
 import PipelinesStageComponent from '../../vue_pipelines_index/components/stage';
 import PipelinesUrlComponent from '../../vue_pipelines_index/components/pipeline_url';
 import PipelinesTimeagoComponent from '../../vue_pipelines_index/components/time_ago';
+import CommitComponent from './commit';
 
-require('./commit');
 /**
  * Pipeline table row.
  *
  * Given the received object renders a table row in the pipelines' table.
  */
 export default {
-
   props: {
     pipeline: {
       type: Object,
@@ -33,7 +31,7 @@ export default {
     'async-button-component': AsyncButtonComponent,
     'pipelines-actions-component': PipelinesActionsComponent,
     'pipelines-artifacts-component': PipelinesArtifactsComponent,
-    'commit-component': gl.CommitComponent,
+    'commit-component': CommitComponent,
     'dropdown-stage': PipelinesStageComponent,
     'pipeline-url': PipelinesUrlComponent,
     'status-scope': PipelinesStatusComponent,