Use webpack to require files

Changes after review

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

@@ -2,8 +2,6 @@
 /* global Vue, CommitsPipelineStore, PipelinesService, Flash */
 
 window.Vue = require('vue');
-require('./pipelines_store');
-require('./pipelines_service');
 require('./pipelines_table');
 /**
  * Commits View > Pipelines Tab > Pipelines Table.

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

@@ -18,7 +18,7 @@ class PipelinesService {
    *
    * @return {Promise}
    */
-  get() {
+  all() {
     return this.pipelines.get();
   }
 }

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

@@ -44,4 +44,7 @@ class PipelinesStore {
   }
 }
 
-return PipelinesStore;
+window.gl = window.gl || {};
+gl.commits = gl.commits || {};
+gl.commits.pipelines = gl.commits.pipelines || {};
+gl.commits.pipelines.PipelinesStore = PipelinesStore;

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

@@ -3,9 +3,12 @@
 
 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('../vue_realtime_listener/index');
+require('../../vue_realtime_listener/index');
+require('./pipelines_service');
+require('./pipelines_store');
 
 /**
  *
@@ -62,10 +65,10 @@ require('../vue_realtime_listener/index');
      *
      */
     created() {
-      gl.pipelines.pipelinesService = new PipelinesService(this.endpoint);
+      const pipelinesService = new gl.commits.pipelines.PipelinesService(this.endpoint);
 
       this.isLoading = true;
-      return gl.pipelines.pipelinesService.all()
+      return pipelinesService.all()
         .then(response => response.json())
         .then((json) => {
           this.store.storePipelines(json);

app/assets/javascripts/lib/utils/common_utils.js.es6

@@ -233,6 +233,9 @@
 
     /**
      * Transforms a DOMStringMap into a plain object.
+     *
+     * @param {DOMStringMap} DOMStringMapObject
+     * @returns {Object}
      */
     w.gl.utils.DOMStringMapToObject = DOMStringMapObject => Object.keys(DOMStringMapObject).reduce((acc, element) => {
       acc[element] = DOMStringMapObject[element];

app/assets/javascripts/vue_pipelines_index/index.js.es6

@@ -2,39 +2,35 @@
 /* global Vue, VueResource, gl */
 window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
+require('../lib/utils/common_utils');
 require('../vue_shared/vue_resource_interceptor');
 require('./pipelines');
 
-$(() => {
-  return new Vue({
-    el: document.querySelector('.vue-pipelines-index'),
+$(() => new Vue({
+  el: document.querySelector('.vue-pipelines-index'),
 
-    data() {
-      const project = document.querySelector('.pipelines');
-      const svgs = document.querySelector('.pipeline-svgs').dataset;
+  data() {
+    const project = document.querySelector('.pipelines');
+    const svgs = document.querySelector('.pipeline-svgs').dataset;
 
-      // Transform svgs DOMStringMap to a plain Object.
-      const svgsObject = Object.keys(svgs).reduce((acc, element) => {
-        acc[element] = svgs[element];
-        return acc;
-      }, {});
+    // Transform svgs DOMStringMap to a plain Object.
+    const svgsObject = gl.utils.DOMStringMapToObject(svgs);
 
-      return {
-        scope: project.dataset.url,
-        store: new gl.PipelineStore(),
-        svgs: svgsObject,
-      };
-    },
-    components: {
-      'vue-pipelines': gl.VuePipelines,
-    },
-    template: `
-      <vue-pipelines
-        :scope='scope'
-        :store='store'
-        :svgs='svgs'
-      >
-      </vue-pipelines>
-    `,
-  });
-});
+    return {
+      scope: project.dataset.url,
+      store: new gl.PipelineStore(),
+      svgs: svgsObject,
+    };
+  },
+  components: {
+    'vue-pipelines': gl.VuePipelines,
+  },
+  template: `
+    <vue-pipelines
+      :scope='scope'
+      :store='store'
+      :svgs='svgs'
+    >
+    </vue-pipelines>
+  `,
+}));

app/assets/javascripts/vue_shared/components/commit.js.es6

@@ -1,7 +1,5 @@
 /* global Vue */
 
-window.Vue = require('vue');
-
 (() => {
   window.gl = window.gl || {};
 

app/assets/javascripts/vue_shared/components/pipelines_table.js.es6

@@ -1,7 +1,6 @@
 /* eslint-disable no-param-reassign */
 /* global Vue */
 
-window.Vue = require('vue');
 require('./pipelines_table_row');
 /**
  * Pipelines Table Component.

app/assets/javascripts/vue_shared/components/pipelines_table_row.js.es6

@@ -1,7 +1,6 @@
 /* eslint-disable no-param-reassign */
 /* global Vue */
 
-window.Vue = require('vue');
 require('../../vue_pipelines_index/status');
 require('../../vue_pipelines_index/pipeline_url');
 require('../../vue_pipelines_index/stage');

app/views/projects/commit/_pipelines_list.haml

@@ -22,4 +22,4 @@
 } }
 
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('commit/pipelines/pipelines_bundle.js')
+  = page_specific_javascript_bundle_tag('commit_pipelines')

app/views/projects/pipelines/index.html.haml

@@ -60,5 +60,4 @@
 
       .vue-pipelines-index
 
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('vue_pipelines_index/index.js')
+= page_specific_javascript_bundle_tag('vue_pipelines')

config/webpack.config.js

@@ -19,6 +19,7 @@ var config = {
     boards:               './boards/boards_bundle.js',
     boards_test:          './boards/test_utils/simulate_drag.js',
     cycle_analytics:      './cycle_analytics/cycle_analytics_bundle.js',
+    commit_pipelines:     './commit/pipelines/pipelines_bundle.js',
     diff_notes:           './diff_notes/diff_notes_bundle.js',
     environments:         './environments/environments_bundle.js',
     filtered_search:      './filtered_search/filtered_search_bundle.js',