From af5093ca1e59148fbc40b9055c655c7d8db6afe9 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Fri, 24 Feb 2017 18:35:25 +0000 Subject: [PATCH 01/11] Adds loader to load SVG --- config/webpack.config.js | 4 ++++ package.json | 1 + yarn.lock | 8 ++++++-- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/config/webpack.config.js b/config/webpack.config.js index e754f68553a..a754cdd1fd1 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -63,6 +63,10 @@ var config = { 'stage-2' ] } + }, + { + test: /\.svg$/, + use: 'raw-loader' } ] }, diff --git a/package.json b/package.json index 66aa7e9fe5d..ddbf4a3293c 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "js-cookie": "^2.1.3", "mousetrap": "^1.4.6", "pikaday": "^1.5.1", + "raw-loader": "^0.5.1", "select2": "3.5.2-browserify", "stats-webpack-plugin": "^0.4.3", "timeago.js": "^2.0.5", diff --git a/yarn.lock b/yarn.lock index 1eaa04e21c1..565fe687a36 100644 --- a/yarn.lock +++ b/yarn.lock @@ -25,7 +25,7 @@ acorn-jsx@^3.0.0: dependencies: acorn "^3.0.4" -acorn@4.0.4, acorn@^4.0.3, acorn@^4.0.4: +acorn@4.0.4, acorn@^4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a" @@ -33,7 +33,7 @@ acorn@^3.0.4: version "3.3.0" resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a" -acorn@^4.0.11: +acorn@^4.0.11, acorn@^4.0.3: version "4.0.11" resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.11.tgz#edcda3bd937e7556410d42ed5860f67399c794c0" @@ -3566,6 +3566,10 @@ raw-body@~2.2.0: iconv-lite "0.4.15" unpipe "1.0.0" +raw-loader@^0.5.1: + version "0.5.1" + resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa" + rc@~1.1.6: version "1.1.6" resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9" From e50375298e1f799e60f5a2e4ee3eb006d1a008a5 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Fri, 24 Feb 2017 18:47:17 +0000 Subject: [PATCH 02/11] Loads SVGs into JS for environments --- .../components/environment.js.es6 | 8 +------- .../components/environment_actions.js.es6 | 8 ++++---- .../components/environment_item.js.es6 | 17 ---------------- .../environment_terminal_button.js.es6 | 9 +++++---- .../components/environments_table.js.es6 | 20 +------------------ .../vue_shared/components/commit.js.es6 | 10 +++++----- .../projects/environments/index.html.haml | 5 +---- 7 files changed, 17 insertions(+), 60 deletions(-) diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6 index 4b700a39d44..a5a6514f4df 100644 --- a/app/assets/javascripts/environments/components/environment.js.es6 +++ b/app/assets/javascripts/environments/components/environment.js.es6 @@ -35,9 +35,6 @@ module.exports = Vue.component('environment-component', { projectStoppedEnvironmentsPath: environmentsData.projectStoppedEnvironmentsPath, newEnvironmentPath: environmentsData.newEnvironmentPath, helpPagePath: environmentsData.helpPagePath, - commitIconSvg: environmentsData.commitIconSvg, - playIconSvg: environmentsData.playIconSvg, - terminalIconSvg: environmentsData.terminalIconSvg, // Pagination Properties, paginationInformation: {}, @@ -176,10 +173,7 @@ module.exports = Vue.component('environment-component', { + :can-read-environment="canReadEnvironmentParsed"> [], }, + }, - playIconSvg: { - type: String, - required: false, - }, + data() { + return { playIconSvg }; }, template: ` diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index ad9d1d21a79..97a4d4111f1 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -46,21 +46,6 @@ module.exports = Vue.component('environment-item', { required: false, default: false, }, - - commitIconSvg: { - type: String, - required: false, - }, - - playIconSvg: { - type: String, - required: false, - }, - - terminalIconSvg: { - type: String, - required: false, - }, }, computed: { @@ -507,7 +492,6 @@ module.exports = Vue.component('environment-item', {
@@ -520,7 +504,6 @@ module.exports = Vue.component('environment-item', { diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 b/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 index 481e0d15e7a..fbaf78d6e36 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 +++ b/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 @@ -3,6 +3,7 @@ * Used in environments table. */ const Vue = require('vue'); +const terminalIconSvg = require('../../../../views/shared/icons/_icon_terminal.svg'); module.exports = Vue.component('terminal-button-component', { props: { @@ -10,10 +11,10 @@ module.exports = Vue.component('terminal-button-component', { type: String, default: '', }, - terminalIconSvg: { - type: String, - default: '', - }, + }, + + data() { + return { terminalIconSvg }; }, template: ` diff --git a/app/assets/javascripts/environments/components/environments_table.js.es6 b/app/assets/javascripts/environments/components/environments_table.js.es6 index fd35d77fd3d..4df4e33b7a1 100644 --- a/app/assets/javascripts/environments/components/environments_table.js.es6 +++ b/app/assets/javascripts/environments/components/environments_table.js.es6 @@ -28,21 +28,6 @@ module.exports = Vue.component('environment-table-component', { required: false, default: false, }, - - commitIconSvg: { - type: String, - required: false, - }, - - playIconSvg: { - type: String, - required: false, - }, - - terminalIconSvg: { - type: String, - required: false, - }, }, template: ` @@ -63,10 +48,7 @@ module.exports = Vue.component('environment-table-component', { + :can-read-environment="canReadEnvironment"> diff --git a/app/assets/javascripts/vue_shared/components/commit.js.es6 b/app/assets/javascripts/vue_shared/components/commit.js.es6 index ff88e236829..89415fd4f1c 100644 --- a/app/assets/javascripts/vue_shared/components/commit.js.es6 +++ b/app/assets/javascripts/vue_shared/components/commit.js.es6 @@ -1,5 +1,6 @@ /* global Vue */ window.Vue = require('vue'); +const commitIconSvg = require('../../../../views/shared/icons/_icon_commit.svg'); (() => { window.gl = window.gl || {}; @@ -69,11 +70,6 @@ window.Vue = require('vue'); required: false, default: () => ({}), }, - - commitIconSvg: { - type: String, - required: false, - }, }, computed: { @@ -116,6 +112,10 @@ window.Vue = require('vue'); }, }, + data() { + return { commitIconSvg }; + }, + template: `
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml index 1f27d41ddd9..d6366b57957 100644 --- a/app/views/projects/environments/index.html.haml +++ b/app/views/projects/environments/index.html.haml @@ -13,7 +13,4 @@ "project-stopped-environments-path" => project_environments_path(@project, scope: :stopped), "new-environment-path" => new_namespace_project_environment_path(@project.namespace, @project), "help-page-path" => help_page_path("ci/environments"), - "css-class" => container_class, - "commit-icon-svg" => custom_icon("icon_commit"), - "terminal-icon-svg" => custom_icon("icon_terminal"), - "play-icon-svg" => custom_icon("icon_play") } } + "css-class" => container_class } } From f17109c04610489cc7fd1f760e83b2bca3c56f3c Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Fri, 24 Feb 2017 19:02:57 +0000 Subject: [PATCH 03/11] Load SVGs into Pipelines --- .../vue_pipelines_index/index.js.es6 | 11 +---- .../pipeline_actions.js.es6 | 12 +++-- .../vue_pipelines_index/pipelines.js.es6 | 7 +-- .../vue_pipelines_index/stage.js.es6 | 42 ++++++++++------- .../vue_pipelines_index/status.js.es6 | 38 +++++++++++++--- .../vue_pipelines_index/time_ago.js.es6 | 7 ++- .../components/pipelines_table.js.es6 | 11 +---- .../components/pipelines_table_row.js.es6 | 45 +++---------------- 8 files changed, 81 insertions(+), 92 deletions(-) diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6 index e7432afb56e..a90bd1518e9 100644 --- a/app/assets/javascripts/vue_pipelines_index/index.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6 @@ -11,15 +11,10 @@ $(() => new Vue({ data() { const project = document.querySelector('.pipelines'); - const svgs = document.querySelector('.pipeline-svgs').dataset; - - // 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: { @@ -27,10 +22,8 @@ $(() => new Vue({ }, template: ` + :scope="scope" + :store="store"> `, })); diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index 54e8f977a47..34ea7512d2b 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -1,9 +1,10 @@ /* global Vue, Flash, gl */ /* eslint-disable no-param-reassign */ +const playIconSvg = require('../../../views/shared/icons/_icon_play.svg'); ((gl) => { gl.VuePipelineActions = Vue.extend({ - props: ['pipeline', 'svgs'], + props: ['pipeline'], computed: { actions() { return this.pipeline.details.manual_actions.length > 0; @@ -17,6 +18,11 @@ return `Download ${name} artifacts`; }, }, + + data() { + return { playIconSvg }; + }, + template: `
@@ -30,7 +36,7 @@ data-placement="top" aria-label="Manual job" > - +
    @@ -40,7 +46,7 @@ data-method="post" :href='action.path' > - + {{action.name}} diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 index 9d66d28cc62..9d78b02fcd5 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 @@ -27,7 +27,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s pageRequest: false, }; }, - props: ['scope', 'store', 'svgs'], + props: ['scope', 'store'], created() { const pagenum = gl.utils.getParameterByName('page'); const scope = gl.utils.getParameterByName('scope'); @@ -73,10 +73,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
- - +
{ gl.VueStage = Vue.extend({ data() { + const svgsDictionary = { + icon_status_canceled: canceledSvg, + icon_status_created: createdSvg, + icon_status_failed: failedSvg, + icon_status_manual: manualSvg, + icon_status_pending: pendingSvg, + icon_status_running: runningSvg, + icon_status_skipped: skippedSvg, + icon_status_success: successSvg, + icon_status_warning: warningSvg, + }; + return { builds: '', spinner: '', + svg: svgsDictionary[this.stage.status.icon], }; }, + props: { stage: { type: Object, required: true, }, - svgs: { - type: Object, - required: true, - }, - match: { - type: Function, - required: true, - }, }, updated() { @@ -73,11 +88,6 @@ tooltip() { return `has-tooltip ci-status-icon ci-status-icon-${this.stage.status.group}`; }, - svg() { - const { icon } = this.stage.status; - const stageIcon = icon.replace(/icon/i, 'stage_icon'); - return this.svgs[this.match(stageIcon)]; - }, triggerButtonClass() { return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`; }, @@ -91,8 +101,7 @@ data-placement="top" data-toggle="dropdown" type="button" - :aria-label="stage.title" - > + :aria-label="stage.title"> @@ -101,8 +110,7 @@
+ v-html="buildsOrSpinner">
diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index 05175082704..acdd82a480e 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -1,20 +1,47 @@ /* global Vue, gl */ /* eslint-disable no-param-reassign */ +import canceledSvg from '../../../views/shared/icons/_icon_status_canceled.svg'; +import createdSvg from '../../../views/shared/icons/_icon_status_created.svg'; +import failedSvg from '../../../views/shared/icons/_icon_status_failed.svg'; +import manualSvg from '../../../views/shared/icons/_icon_status_manual.svg'; +import pendingSvg from '../../../views/shared/icons/_icon_status_pending.svg'; +import runningSvg from '../../../views/shared/icons/_icon_status_running.svg'; +import skippedSvg from '../../../views/shared/icons/_icon_status_skipped.svg'; +import successSvg from '../../../views/shared/icons/_icon_status_success.svg'; +import warningSvg from '../../../views/shared/icons/_icon_status_warning.svg'; + ((gl) => { gl.VueStatusScope = Vue.extend({ props: [ - 'pipeline', 'svgs', 'match', + 'pipeline', ], + + data() { + const svgsDictionary = { + icon_status_canceled: canceledSvg, + icon_status_created: createdSvg, + icon_status_failed: failedSvg, + icon_status_manual: manualSvg, + icon_status_pending: pendingSvg, + icon_status_running: runningSvg, + icon_status_skipped: skippedSvg, + icon_status_success: successSvg, + icon_status_warning: warningSvg, + }; + + return { + svg: svgsDictionary[this.pipeline.details.status.icon], + }; + }, + computed: { cssClasses() { const cssObject = { 'ci-status': true }; cssObject[`ci-${this.pipeline.details.status.group}`] = true; return cssObject; }, - svg() { - return this.svgs[this.match(this.pipeline.details.status.icon)]; - }, + detailsPath() { const { status } = this.pipeline.details; return status.has_details ? status.details_path : false; @@ -25,8 +52,7 @@ + v-html="svg + pipeline.details.status.text"> `, diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 index 3598da11573..22f1b1a8483 100644 --- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 @@ -4,14 +4,17 @@ window.Vue = require('vue'); require('../lib/utils/datetime_utility'); +const iconTimerSvg = require('../../../views/shared/icons/_icon_timer.svg'); + ((gl) => { gl.VueTimeAgo = Vue.extend({ data() { return { currentTime: new Date(), + iconTimerSvg, }; }, - props: ['pipeline', 'svgs'], + props: ['pipeline'], computed: { timeAgo() { return gl.utils.getTimeago(); @@ -56,7 +59,7 @@ require('../lib/utils/datetime_utility'); template: `

- + {{duration}}

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 4bdaef31ee9..1c41f8b437d 100644 --- a/app/assets/javascripts/vue_shared/components/pipelines_table.js.es6 +++ b/app/assets/javascripts/vue_shared/components/pipelines_table.js.es6 @@ -21,14 +21,6 @@ require('./pipelines_table_row'); default: () => ([]), }, - /** - * TODO: Remove this when we have webpack. - */ - svgs: { - type: Object, - required: true, - default: () => ({}), - }, }, components: { @@ -51,8 +43,7 @@ require('./pipelines_table_row'); 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 61c1b72d9d2..e5e88186a85 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 @@ -25,14 +25,6 @@ require('./commit'); default: () => ({}), }, - /** - * TODO: Remove this when we have webpack; - */ - svgs: { - type: Object, - required: true, - default: () => ({}), - }, }, components: { @@ -174,30 +166,9 @@ require('./commit'); }, }, - methods: { - /** - * FIXME: This should not be in this component but in the components that - * need this function. - * - * Used to render SVGs in the following components: - * - status-scope - * - dropdown-stage - * - * @param {String} string - * @return {String} - */ - match(string) { - return string.replace(/_([a-z])/g, (m, w) => w.toUpperCase()); - }, - }, - template: ` - - + @@ -208,26 +179,20 @@ require('./commit'); :commit-url="commitUrl" :short-sha="commitShortSha" :title="commitTitle" - :author="commitAuthor" - :commit-icon-svg="svgs.commitIconSvg"> - + :author="commitAuthor"/>

- - +
- + - + `, }); From 92d80b68bcd7c253b2cc1fab1384783f93e65661 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Sat, 25 Feb 2017 00:44:46 +0000 Subject: [PATCH 04/11] Use vhtml only when necessary --- .../javascripts/environments/components/environment.js.es6 | 3 +-- .../environments/components/environment_actions.js.es6 | 4 +--- .../components/environment_terminal_button.js.es6 | 2 +- .../javascripts/vue_shared/components/table_pagination.js.es6 | 1 - 4 files changed, 3 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6 index a5a6514f4df..204934b673d 100644 --- a/app/assets/javascripts/environments/components/environment.js.es6 +++ b/app/assets/javascripts/environments/components/environment.js.es6 @@ -173,8 +173,7 @@ module.exports = Vue.component('environment-component', { - + :can-read-environment="canReadEnvironmentParsed"/> - - - + ${playIconSvg} {{action.name}} diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 b/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 index fbaf78d6e36..693cb852152 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 +++ b/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 @@ -20,7 +20,7 @@ module.exports = Vue.component('terminal-button-component', { template: ` - + ${terminalIconSvg} `, }); diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.js.es6 b/app/assets/javascripts/vue_shared/components/table_pagination.js.es6 index d8042a9b7fc..dca4530188e 100644 --- a/app/assets/javascripts/vue_shared/components/table_pagination.js.es6 +++ b/app/assets/javascripts/vue_shared/components/table_pagination.js.es6 @@ -19,7 +19,6 @@ window.Vue = require('vue'); /** This function will take the information given by the pagination component - And make a new Turbolinks call Here is an example `change` method: From d8ce9f3062bdcb1f69f6d47a912d446bf69d50b8 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Sat, 25 Feb 2017 00:48:19 +0000 Subject: [PATCH 05/11] Load svgs in cycle analytics --- .../cycle_analytics/components/stage_plan_component.js.es6 | 3 ++- .../components/stage_staging_component.js.es6 | 3 ++- .../cycle_analytics/components/stage_test_component.js.es6 | 6 ++++-- .../cycle_analytics/cycle_analytics_bundle.js.es6 | 3 --- .../javascripts/cycle_analytics/svg/icon_branch.js.es6 | 7 ------- app/assets/javascripts/cycle_analytics/svg/icon_branch.svg | 1 + .../javascripts/cycle_analytics/svg/icon_build_status.svg | 1 + .../javascripts/cycle_analytics/svg/icon_commit.js.es6 | 7 ------- app/assets/javascripts/cycle_analytics/svg/icon_commit.svg | 1 + 9 files changed, 11 insertions(+), 21 deletions(-) delete mode 100644 app/assets/javascripts/cycle_analytics/svg/icon_branch.js.es6 create mode 100644 app/assets/javascripts/cycle_analytics/svg/icon_branch.svg create mode 100644 app/assets/javascripts/cycle_analytics/svg/icon_build_status.svg delete mode 100644 app/assets/javascripts/cycle_analytics/svg/icon_commit.js.es6 create mode 100644 app/assets/javascripts/cycle_analytics/svg/icon_commit.svg diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6 index 8652479e7bf..32b13872aea 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6 @@ -1,5 +1,6 @@ /* eslint-disable no-param-reassign */ /* global Vue */ +import iconCommit from '../svg/icon_commit.svg'; ((global) => { global.cycleAnalytics = global.cycleAnalytics || {}; @@ -31,7 +32,7 @@ First - ${global.cycleAnalytics.svgs.iconCommit} + ${iconCommit} {{ commit.shortSha }} pushed by diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6 index 82622232f64..fd6e2516952 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6 @@ -1,5 +1,6 @@ /* eslint-disable no-param-reassign */ /* global Vue */ +import iconBranch from '../svg/icon_branch.svg'; ((global) => { global.cycleAnalytics = global.cycleAnalytics || {}; @@ -22,7 +23,7 @@ #{{ build.id }} {{ build.branch.name }} - ${global.cycleAnalytics.svgs.iconBranch} + ${iconBranch} {{ build.shortSha }} diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6 index 4bfd363a1f1..34729e70f5e 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6 @@ -1,5 +1,7 @@ /* eslint-disable no-param-reassign */ /* global Vue */ +import iconBuildStatus from '../svg/icon_build_status.svg'; +import iconBranch from '../svg/icon_branch.svg'; ((global) => { global.cycleAnalytics = global.cycleAnalytics || {}; @@ -18,13 +20,13 @@
  • - ${global.cycleAnalytics.svgs.iconBuildStatus} + ${iconBuildStatus} {{ build.name }} · #{{ build.id }} {{ build.branch.name }} - ${global.cycleAnalytics.svgs.iconBranch} + ${iconBranch} {{ build.shortSha }}
    diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js.es6 b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js.es6 index 411ac7b24b2..beff293b587 100644 --- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js.es6 +++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js.es6 @@ -4,9 +4,6 @@ window.Vue = require('vue'); window.Cookies = require('js-cookie'); -require('./svg/icon_branch'); -require('./svg/icon_build_status'); -require('./svg/icon_commit'); require('./components/stage_code_component'); require('./components/stage_issue_component'); require('./components/stage_plan_component'); diff --git a/app/assets/javascripts/cycle_analytics/svg/icon_branch.js.es6 b/app/assets/javascripts/cycle_analytics/svg/icon_branch.js.es6 deleted file mode 100644 index 5d486bcaf66..00000000000 --- a/app/assets/javascripts/cycle_analytics/svg/icon_branch.js.es6 +++ /dev/null @@ -1,7 +0,0 @@ -/* eslint-disable no-param-reassign */ -((global) => { - global.cycleAnalytics = global.cycleAnalytics || {}; - global.cycleAnalytics.svgs = global.cycleAnalytics.svgs || {}; - - global.cycleAnalytics.svgs.iconBranch = ''; -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/cycle_analytics/svg/icon_branch.svg b/app/assets/javascripts/cycle_analytics/svg/icon_branch.svg new file mode 100644 index 00000000000..9f547d3d744 --- /dev/null +++ b/app/assets/javascripts/cycle_analytics/svg/icon_branch.svg @@ -0,0 +1 @@ + diff --git a/app/assets/javascripts/cycle_analytics/svg/icon_build_status.svg b/app/assets/javascripts/cycle_analytics/svg/icon_build_status.svg new file mode 100644 index 00000000000..b932d90618a --- /dev/null +++ b/app/assets/javascripts/cycle_analytics/svg/icon_build_status.svg @@ -0,0 +1 @@ + diff --git a/app/assets/javascripts/cycle_analytics/svg/icon_commit.js.es6 b/app/assets/javascripts/cycle_analytics/svg/icon_commit.js.es6 deleted file mode 100644 index 2208c27a619..00000000000 --- a/app/assets/javascripts/cycle_analytics/svg/icon_commit.js.es6 +++ /dev/null @@ -1,7 +0,0 @@ -/* eslint-disable no-param-reassign */ -((global) => { - global.cycleAnalytics = global.cycleAnalytics || {}; - global.cycleAnalytics.svgs = global.cycleAnalytics.svgs || {}; - - global.cycleAnalytics.svgs.iconCommit = ''; -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/cycle_analytics/svg/icon_commit.svg b/app/assets/javascripts/cycle_analytics/svg/icon_commit.svg new file mode 100644 index 00000000000..6a517756058 --- /dev/null +++ b/app/assets/javascripts/cycle_analytics/svg/icon_commit.svg @@ -0,0 +1 @@ + From 70f7d77d342183a7efdaf50263b5b821f9fa53c8 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Sat, 25 Feb 2017 00:55:47 +0000 Subject: [PATCH 06/11] remove tech debt code --- .../commit/pipelines/pipelines_table.js.es6 | 10 +------- .../svg/icon_build_status.js.es6 | 7 ------ .../components/collapsed_state.js.es6 | 5 ++-- .../components/time_tracker.js.es6 | 4 +--- .../javascripts/lib/utils/common_utils.js.es6 | 11 --------- .../projects/commit/_pipelines_list.haml | 21 ---------------- app/views/projects/pipelines/index.html.haml | 24 +------------------ app/views/shared/issuable/_sidebar.html.haml | 2 +- 8 files changed, 7 insertions(+), 77 deletions(-) delete mode 100644 app/assets/javascripts/cycle_analytics/svg/icon_build_status.js.es6 diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 index e7c6c063413..95e84710937 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 +++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js.es6 @@ -39,15 +39,10 @@ const PipelineStore = require('./pipelines_store'); */ data() { const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset; - const svgsData = document.querySelector('.pipeline-svgs').dataset; const store = new PipelineStore(); - // Transform svgs DOMStringMap to a plain Object. - const svgsObject = gl.utils.DOMStringMapToObject(svgsData); - return { endpoint: pipelinesTableData.endpoint, - svgs: svgsObject, store, state: store.state, isLoading: false, @@ -99,10 +94,7 @@ const PipelineStore = require('./pipelines_store');
    - - +
    `, diff --git a/app/assets/javascripts/cycle_analytics/svg/icon_build_status.js.es6 b/app/assets/javascripts/cycle_analytics/svg/icon_build_status.js.es6 deleted file mode 100644 index 661bf9e9f1c..00000000000 --- a/app/assets/javascripts/cycle_analytics/svg/icon_build_status.js.es6 +++ /dev/null @@ -1,7 +0,0 @@ -/* eslint-disable no-param-reassign */ -((global) => { - global.cycleAnalytics = global.cycleAnalytics || {}; - global.cycleAnalytics.svgs = global.cycleAnalytics.svgs || {}; - - global.cycleAnalytics.svgs.iconBuildStatus = ''; -})(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6 index bf27fbac5d7..d8097eaa7b2 100644 --- a/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6 +++ b/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6 @@ -1,4 +1,6 @@ /* global Vue */ +import stopwatchSvg from '../../../../../views/shared/icons/_icon_stopwatch.svg'; + require('../../../lib/utils/pretty_time'); (() => { @@ -11,7 +13,6 @@ require('../../../lib/utils/pretty_time'); 'showNoTimeTrackingState', 'timeSpentHumanReadable', 'timeEstimateHumanReadable', - 'stopwatchSvg', ], methods: { abbreviateTime(timeStr) { @@ -20,7 +21,7 @@ require('../../../lib/utils/pretty_time'); }, template: `
    -
    + ${stopwatchSvg}
    {{ abbreviateTime(timeSpentHumanReadable) }} / {{ abbreviateTime(timeEstimateHumanReadable) }} diff --git a/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js.es6 index e38f7852b1c..a2c83ff77ed 100644 --- a/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js.es6 +++ b/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js.es6 @@ -15,7 +15,6 @@ require('./comparison_pane'); 'time_spent', 'human_time_estimate', 'human_time_spent', - 'stopwatchSvg', 'docsUrl', ], data() { @@ -71,8 +70,7 @@ require('./comparison_pane'); :show-spent-only-state='showSpentOnlyState' :show-estimate-only-state='showEstimateOnlyState' :time-spent-human-readable='timeSpentHumanReadable' - :time-estimate-human-readable='timeEstimateHumanReadable' - :stopwatch-svg='stopwatchSvg'> + :time-estimate-human-readable='timeEstimateHumanReadable'>
    Time tracking diff --git a/app/assets/javascripts/lib/utils/common_utils.js.es6 b/app/assets/javascripts/lib/utils/common_utils.js.es6 index 45a1d90a9d9..643c28dd046 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js.es6 +++ b/app/assets/javascripts/lib/utils/common_utils.js.es6 @@ -246,17 +246,6 @@ previousPage: parseInt(paginationInformation['X-PREV-PAGE'], 10), }); - /** - * 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]; - return acc; - }, {}); - /** * Updates the search parameter of a URL given the parameter and values provided. * diff --git a/app/views/projects/commit/_pipelines_list.haml b/app/views/projects/commit/_pipelines_list.haml index 33917513f37..6792b3f7a83 100644 --- a/app/views/projects/commit/_pipelines_list.haml +++ b/app/views/projects/commit/_pipelines_list.haml @@ -2,27 +2,6 @@ #commit-pipeline-table-view{ data: { disable_initialization: disable_initialization, endpoint: endpoint, } } -.pipeline-svgs{ data: { "commit_icon_svg" => custom_icon("icon_commit"), - "icon_status_canceled" => custom_icon("icon_status_canceled"), - "icon_status_running" => custom_icon("icon_status_running"), - "icon_status_skipped" => custom_icon("icon_status_skipped"), - "icon_status_created" => custom_icon("icon_status_created"), - "icon_status_pending" => custom_icon("icon_status_pending"), - "icon_status_success" => custom_icon("icon_status_success"), - "icon_status_failed" => custom_icon("icon_status_failed"), - "icon_status_warning" => custom_icon("icon_status_warning"), - "stage_icon_status_canceled" => custom_icon("icon_status_canceled_borderless"), - "stage_icon_status_running" => custom_icon("icon_status_running_borderless"), - "stage_icon_status_skipped" => custom_icon("icon_status_skipped_borderless"), - "stage_icon_status_created" => custom_icon("icon_status_created_borderless"), - "stage_icon_status_pending" => custom_icon("icon_status_pending_borderless"), - "stage_icon_status_success" => custom_icon("icon_status_success_borderless"), - "stage_icon_status_failed" => custom_icon("icon_status_failed_borderless"), - "stage_icon_status_warning" => custom_icon("icon_status_warning_borderless"), - "icon_play" => custom_icon("icon_play"), - "icon_timer" => custom_icon("icon_timer"), - "icon_status_manual" => custom_icon("icon_status_manual"), -} } - content_for :page_specific_javascripts do = 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 4147a617d95..acb61aa2490 100644 --- a/app/views/projects/pipelines/index.html.haml +++ b/app/views/projects/pipelines/index.html.haml @@ -48,28 +48,6 @@ = link_to ci_lint_path, class: 'btn btn-default' do %span CI Lint .content-list.pipelines{ data: { url: namespace_project_pipelines_path(@project.namespace, @project, format: :json) } } - .pipeline-svgs{ "data" => {"commit_icon_svg" => custom_icon("icon_commit"), - "icon_status_canceled" => custom_icon("icon_status_canceled"), - "icon_status_running" => custom_icon("icon_status_running"), - "icon_status_skipped" => custom_icon("icon_status_skipped"), - "icon_status_created" => custom_icon("icon_status_created"), - "icon_status_pending" => custom_icon("icon_status_pending"), - "icon_status_success" => custom_icon("icon_status_success"), - "icon_status_failed" => custom_icon("icon_status_failed"), - "icon_status_warning" => custom_icon("icon_status_warning"), - "stage_icon_status_canceled" => custom_icon("icon_status_canceled_borderless"), - "stage_icon_status_running" => custom_icon("icon_status_running_borderless"), - "stage_icon_status_skipped" => custom_icon("icon_status_skipped_borderless"), - "stage_icon_status_created" => custom_icon("icon_status_created_borderless"), - "stage_icon_status_pending" => custom_icon("icon_status_pending_borderless"), - "stage_icon_status_success" => custom_icon("icon_status_success_borderless"), - "stage_icon_status_failed" => custom_icon("icon_status_failed_borderless"), - "stage_icon_status_warning" => custom_icon("icon_status_warning_borderless"), - "icon_play" => custom_icon("icon_play"), - "icon_timer" => custom_icon("icon_timer"), - "icon_status_manual" => custom_icon("icon_status_manual"), - } } - - .vue-pipelines-index + .vue-pipelines-index = page_specific_javascript_bundle_tag('vue_pipelines') diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index 6c730e16f67..1c8ff591171 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -77,7 +77,7 @@ = dropdown_tag('Milestone', options: { title: 'Assign milestone', toggle_class: 'js-milestone-select js-extra-options', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: 'Search milestones', data: { show_no: true, field_name: "#{issuable.to_ability_name}[milestone_id]", project_id: @project.id, issuable_id: issuable.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable), use_id: true }}) - if issuable.has_attribute?(:time_estimate) #issuable-time-tracker.block - %issuable-time-tracker{ ':time_estimate' => 'issuable.time_estimate', ':time_spent' => 'issuable.total_time_spent', ':human_time_estimate' => 'issuable.human_time_estimate', ':human_time_spent' => 'issuable.human_total_time_spent', 'stopwatch-svg' => custom_icon('icon_stopwatch'), 'docs-url' => help_page_path('workflow/time_tracking.md') } + %issuable-time-tracker{ ':time_estimate' => 'issuable.time_estimate', ':time_spent' => 'issuable.total_time_spent', ':human_time_estimate' => 'issuable.human_time_estimate', ':human_time_spent' => 'issuable.human_total_time_spent', 'docs-url' => help_page_path('workflow/time_tracking.md') } // Fallback while content is loading .title.hide-collapsed Time tracking From 8c9b1379749a76b6df9a4707d78ba425640ffe65 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Sat, 25 Feb 2017 00:58:21 +0000 Subject: [PATCH 07/11] Remove unneed code --- .../components/environment_item.js.es6 | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index 97a4d4111f1..6a91982ffa7 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -472,9 +472,7 @@ module.exports = Vue.component('environment-item', { :commit-url="commitUrl" :short-sha="commitShortSha" :title="commitTitle" - :author="commitAuthor" - :commit-icon-svg="commitIconSvg"> - + :author="commitAuthor"/>

    No deployments yet @@ -492,25 +490,20 @@ module.exports = Vue.component('environment-item', {

    - + :actions="manualActions"/> - + :external-url="externalURL"/> - + :stop-url="model.stop_path"/> - + :terminal-path="model.terminal_path"/> - + :retry-url="retryUrl"/>
    From 3ef300d1f369a955550aa407944f4f4e9dcf1c88 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Sat, 25 Feb 2017 21:30:38 +0000 Subject: [PATCH 08/11] Remove unused test --- .../environment_actions_spec.js.es6 | 30 ------------------- 1 file changed, 30 deletions(-) diff --git a/spec/javascripts/environments/environment_actions_spec.js.es6 b/spec/javascripts/environments/environment_actions_spec.js.es6 index 850586f9f3a..d50d45d295e 100644 --- a/spec/javascripts/environments/environment_actions_spec.js.es6 +++ b/spec/javascripts/environments/environment_actions_spec.js.es6 @@ -23,7 +23,6 @@ describe('Actions Component', () => { el: document.querySelector('.test-dom-element'), propsData: { actions: actionsMock, - playIconSvg: '', }, }); @@ -34,33 +33,4 @@ describe('Actions Component', () => { component.$el.querySelector('.dropdown-menu li a').getAttribute('href'), ).toEqual(actionsMock[0].play_path); }); - - it('should render a dropdown with the provided svg', () => { - const actionsMock = [ - { - name: 'bar', - play_path: 'https://gitlab.com/play', - }, - { - name: 'foo', - play_path: '#', - }, - ]; - - const component = new ActionsComponent({ - el: document.querySelector('.test-dom-element'), - propsData: { - actions: actionsMock, - playIconSvg: '', - }, - }); - - expect( - component.$el.querySelector('.js-dropdown-play-icon-container').children, - ).toContain('svg'); - - expect( - component.$el.querySelector('.js-action-play-icon-container').children, - ).toContain('svg'); - }); }); From 702070885febdcc7fc3acd695dfa908c41a53a5b Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Sat, 25 Feb 2017 22:53:24 +0000 Subject: [PATCH 09/11] Fix eslint error --- .../javascripts/vue_pipelines_index/pipeline_actions.js.es6 | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index c57f41bcdfa..e5f14c159c0 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -2,7 +2,6 @@ /* eslint-disable no-param-reassign, no-alert */ const playIconSvg = require('../../../views/shared/icons/_icon_play.svg'); - ((gl) => { gl.VuePipelineActions = Vue.extend({ props: ['pipeline'], From 44622abe9603c5419bc50212654f737343012ca8 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Mon, 27 Feb 2017 10:36:56 +0000 Subject: [PATCH 10/11] Changes after review - adds alias for icons path --- .../components/environment_actions.js.es6 | 2 +- .../environment_terminal_button.js.es6 | 2 +- .../components/collapsed_state.js.es6 | 2 +- .../pipeline_actions.js.es6 | 2 +- .../vue_pipelines_index/stage.js.es6 | 18 +++++++++--------- .../vue_pipelines_index/status.js.es6 | 18 +++++++++--------- .../vue_shared/components/commit.js.es6 | 2 +- config/webpack.config.js | 1 + 8 files changed, 24 insertions(+), 23 deletions(-) diff --git a/app/assets/javascripts/environments/components/environment_actions.js.es6 b/app/assets/javascripts/environments/components/environment_actions.js.es6 index 17e99f18651..15e3f8823d2 100644 --- a/app/assets/javascripts/environments/components/environment_actions.js.es6 +++ b/app/assets/javascripts/environments/components/environment_actions.js.es6 @@ -1,5 +1,5 @@ const Vue = require('vue'); -const playIconSvg = require('../../../../views/shared/icons/_icon_play.svg'); +const playIconSvg = require('icons/_icon_play.svg'); module.exports = Vue.component('actions-component', { props: { diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 b/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 index 693cb852152..e86607e78f4 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 +++ b/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 @@ -3,7 +3,7 @@ * Used in environments table. */ const Vue = require('vue'); -const terminalIconSvg = require('../../../../views/shared/icons/_icon_terminal.svg'); +const terminalIconSvg = require('icons/_icon_terminal.svg'); module.exports = Vue.component('terminal-button-component', { props: { diff --git a/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6 index d8097eaa7b2..357b3487ca9 100644 --- a/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6 +++ b/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6 @@ -1,5 +1,5 @@ /* global Vue */ -import stopwatchSvg from '../../../../../views/shared/icons/_icon_stopwatch.svg'; +import stopwatchSvg from 'icons/_icon_stopwatch.svg'; require('../../../lib/utils/pretty_time'); diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index e5f14c159c0..1ffb1543f71 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -1,6 +1,6 @@ /* global Vue, Flash, gl */ /* eslint-disable no-param-reassign, no-alert */ -const playIconSvg = require('../../../views/shared/icons/_icon_play.svg'); +const playIconSvg = require('icons/_icon_play.svg'); ((gl) => { gl.VuePipelineActions = Vue.extend({ diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 index d04421a6169..f67ebd6a265 100644 --- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6 @@ -1,14 +1,14 @@ /* global Vue, Flash, gl */ /* eslint-disable no-param-reassign */ -import canceledSvg from '../../../views/shared/icons/_icon_status_canceled_borderless.svg'; -import createdSvg from '../../../views/shared/icons/_icon_status_created_borderless.svg'; -import failedSvg from '../../../views/shared/icons/_icon_status_failed_borderless.svg'; -import manualSvg from '../../../views/shared/icons/_icon_status_manual_borderless.svg'; -import pendingSvg from '../../../views/shared/icons/_icon_status_pending_borderless.svg'; -import runningSvg from '../../../views/shared/icons/_icon_status_running_borderless.svg'; -import skippedSvg from '../../../views/shared/icons/_icon_status_skipped_borderless.svg'; -import successSvg from '../../../views/shared/icons/_icon_status_success_borderless.svg'; -import warningSvg from '../../../views/shared/icons/_icon_status_warning_borderless.svg'; +import canceledSvg from 'icons/_icon_status_canceled_borderless.svg'; +import createdSvg from 'icons/_icon_status_created_borderless.svg'; +import failedSvg from 'icons/_icon_status_failed_borderless.svg'; +import manualSvg from 'icons/_icon_status_manual_borderless.svg'; +import pendingSvg from 'icons/_icon_status_pending_borderless.svg'; +import runningSvg from 'icons/_icon_status_running_borderless.svg'; +import skippedSvg from 'icons/_icon_status_skipped_borderless.svg'; +import successSvg from 'icons/_icon_status_success_borderless.svg'; +import warningSvg from 'icons/_icon_status_warning_borderless.svg'; ((gl) => { gl.VueStage = Vue.extend({ diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index acdd82a480e..a3e56bc3193 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -1,15 +1,15 @@ /* global Vue, gl */ /* eslint-disable no-param-reassign */ -import canceledSvg from '../../../views/shared/icons/_icon_status_canceled.svg'; -import createdSvg from '../../../views/shared/icons/_icon_status_created.svg'; -import failedSvg from '../../../views/shared/icons/_icon_status_failed.svg'; -import manualSvg from '../../../views/shared/icons/_icon_status_manual.svg'; -import pendingSvg from '../../../views/shared/icons/_icon_status_pending.svg'; -import runningSvg from '../../../views/shared/icons/_icon_status_running.svg'; -import skippedSvg from '../../../views/shared/icons/_icon_status_skipped.svg'; -import successSvg from '../../../views/shared/icons/_icon_status_success.svg'; -import warningSvg from '../../../views/shared/icons/_icon_status_warning.svg'; +import canceledSvg from 'icons/_icon_status_canceled.svg'; +import createdSvg from 'icons/_icon_status_created.svg'; +import failedSvg from 'icons/_icon_status_failed.svg'; +import manualSvg from 'icons/_icon_status_manual.svg'; +import pendingSvg from 'icons/_icon_status_pending.svg'; +import runningSvg from 'icons/_icon_status_running.svg'; +import skippedSvg from 'icons/_icon_status_skipped.svg'; +import successSvg from 'icons/_icon_status_success.svg'; +import warningSvg from 'icons/_icon_status_warning.svg'; ((gl) => { gl.VueStatusScope = Vue.extend({ diff --git a/app/assets/javascripts/vue_shared/components/commit.js.es6 b/app/assets/javascripts/vue_shared/components/commit.js.es6 index 89415fd4f1c..4381487b79e 100644 --- a/app/assets/javascripts/vue_shared/components/commit.js.es6 +++ b/app/assets/javascripts/vue_shared/components/commit.js.es6 @@ -1,6 +1,6 @@ /* global Vue */ window.Vue = require('vue'); -const commitIconSvg = require('../../../../views/shared/icons/_icon_commit.svg'); +const commitIconSvg = require('icons/_icon_commit.svg'); (() => { window.gl = window.gl || {}; diff --git a/config/webpack.config.js b/config/webpack.config.js index a754cdd1fd1..ddc888c5f93 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -90,6 +90,7 @@ var config = { '~': path.join(ROOT_PATH, 'app/assets/javascripts'), 'bootstrap/js': 'bootstrap-sass/assets/javascripts/bootstrap', 'emoji-aliases$': path.join(ROOT_PATH, 'fixtures/emojis/aliases.json'), + 'icons': path.join(ROOT_PATH, 'app/views/shared/icons'), 'vendor': path.join(ROOT_PATH, 'vendor/assets/javascripts'), 'vue$': IS_PRODUCTION ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js', } From 52e104b2a41d4bbc55853bc62045232fc29e5e57 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Thu, 2 Mar 2017 19:35:43 +0000 Subject: [PATCH 11/11] Changes after review --- .../components/stage_plan_component.js.es6 | 7 ++++++- .../components/stage_staging_component.js.es6 | 5 ++++- .../components/stage_test_component.js.es6 | 5 ++++- .../javascripts/vue_pipelines_index/status.js.es6 | 10 +++++++--- 4 files changed, 21 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6 index 32b13872aea..42e1bbce744 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6 @@ -1,5 +1,5 @@ /* eslint-disable no-param-reassign */ -/* global Vue */ +import Vue from 'vue'; import iconCommit from '../svg/icon_commit.svg'; ((global) => { @@ -10,6 +10,11 @@ import iconCommit from '../svg/icon_commit.svg'; items: Array, stage: Object, }, + + data() { + return { iconCommit }; + }, + template: `
    diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6 index fd6e2516952..8fa63734cf1 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6 @@ -1,5 +1,5 @@ /* eslint-disable no-param-reassign */ -/* global Vue */ +import Vue from 'vue'; import iconBranch from '../svg/icon_branch.svg'; ((global) => { @@ -10,6 +10,9 @@ import iconBranch from '../svg/icon_branch.svg'; items: Array, stage: Object, }, + data() { + return { iconBranch }; + }, template: `
    diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6 index 34729e70f5e..0015249cfaa 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6 +++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6 @@ -1,5 +1,5 @@ /* eslint-disable no-param-reassign */ -/* global Vue */ +import Vue from 'vue'; import iconBuildStatus from '../svg/icon_build_status.svg'; import iconBranch from '../svg/icon_branch.svg'; @@ -11,6 +11,9 @@ import iconBranch from '../svg/icon_branch.svg'; items: Array, stage: Object, }, + data() { + return { iconBuildStatus, iconBranch }; + }, template: `
    diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6 index a3e56bc3193..8d9f83ac113 100644 --- a/app/assets/javascripts/vue_pipelines_index/status.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6 @@ -46,13 +46,17 @@ import warningSvg from 'icons/_icon_status_warning.svg'; const { status } = this.pipeline.details; return status.has_details ? status.details_path : false; }, + + content() { + return `${this.svg} ${this.pipeline.details.status.text}`; + }, }, template: ` + :class="cssClasses" + :href="detailsPath" + v-html="content"> `,