From d5093ef569050996aaed038f97c5a3257a77f504 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Sun, 5 Feb 2017 20:44:01 +0000 Subject: [PATCH] Use webpack to require files Changes after review --- .../commit/pipelines/pipelines_bundle.js.es6 | 2 - .../commit/pipelines/pipelines_service.js.es6 | 2 +- .../commit/pipelines/pipelines_store.js.es6 | 5 +- .../commit/pipelines/pipelines_table.js.es6 | 9 ++- .../javascripts/lib/utils/common_utils.js.es6 | 3 + .../vue_pipelines_index/index.js.es6 | 56 +++++++++---------- .../vue_shared/components/commit.js.es6 | 2 - .../components/pipelines_table.js.es6 | 1 - .../components/pipelines_table_row.js.es6 | 1 - .../projects/commit/_pipelines_list.haml | 2 +- app/views/projects/pipelines/index.html.haml | 3 +- config/webpack.config.js | 1 + 12 files changed, 43 insertions(+), 44 deletions(-) diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6 index 3a06e41848b..fbfec7743c7 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6 +++ b/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. diff --git a/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6 index ef3902fba50..483b414126a 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6 +++ b/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6 @@ -18,7 +18,7 @@ class PipelinesService { * * @return {Promise} */ - get() { + all() { return this.pipelines.get(); } } diff --git a/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 index 178e7bc9cd7..f1b41911b73 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 +++ b/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; diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 index 93fca933b0d..ce0dbd4d56b 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 +++ b/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); diff --git a/app/assets/javascripts/lib/utils/common_utils.js.es6 b/app/assets/javascripts/lib/utils/common_utils.js.es6 index cde48474906..0ee29a75c62 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js.es6 +++ b/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]; diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index 9acb22d937f..e7432afb56e 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/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: ` - - - `, - }); -}); + return { + scope: project.dataset.url, + store: new gl.PipelineStore(), + svgs: svgsObject, + }; + }, + components: { + 'vue-pipelines': gl.VuePipelines, + }, + template: ` + + + `, +})); diff --git a/app/assets/javascripts/vue_shared/components/commit.js.es6 b/app/assets/javascripts/vue_shared/components/commit.js.es6 index 4adad7bea31..7f7c18ddeb1 100644 --- a/app/assets/javascripts/vue_shared/components/commit.js.es6 +++ b/app/assets/javascripts/vue_shared/components/commit.js.es6 @@ -1,7 +1,5 @@ /* global Vue */ -window.Vue = require('vue'); - (() => { window.gl = window.gl || {}; diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table.js.es6 b/app/assets/javascripts/vue_shared/components/pipelines_table.js.es6 index e4176252c8f..4bdaef31ee9 100644 --- a/app/assets/javascripts/vue_shared/components/pipelines_table.js.es6 +++ b/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. diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js.es6 b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js.es6 index 8707ab5d3e0..c819f0dd7cd 100644 --- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js.es6 +++ b/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'); diff --git a/app/views/projects/commit/_pipelines_list.haml b/app/views/projects/commit/_pipelines_list.haml index bfe5eb18ad1..aae2cb8a04b 100644 --- a/app/views/projects/commit/_pipelines_list.haml +++ b/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') diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml index 58e76afa09a..81e393d7626 100644 --- a/app/views/projects/pipelines/index.html.haml +++ b/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') diff --git a/config/webpack.config.js b/config/webpack.config.js index 7cd92af7d93..750d841ff84 100644 --- a/config/webpack.config.js +++ b/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',