Load SVGs into Pipelines

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: `
     <vue-pipelines
-      :scope='scope'
-      :store='store'
-      :svgs='svgs'
-    >
+      :scope="scope"
+      :store="store">
     </vue-pipelines>
   `,
 }));

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: `
       <td class="pipeline-actions hidden-xs">
         <div class="controls pull-right">
@@ -30,7 +36,7 @@
                 data-placement="top"
                 aria-label="Manual job"
               >
-                <span v-html='svgs.iconPlay' aria-hidden="true"></span>
+                <span v-html="playIconSvg" aria-hidden="true"></span>
                 <i class="fa fa-caret-down" aria-hidden="true"></i>
               </button>
               <ul class="dropdown-menu dropdown-menu-align-right">
@@ -40,7 +46,7 @@
                     data-method="post"
                     :href='action.path'
                   >
-                    <span v-html='svgs.iconPlay' aria-hidden="true"></span>
+                    <span v-html="playIconSvg" aria-hidden="true"></span>
                     <span>{{action.name}}</span>
                   </a>
                 </li>

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
         </div>
 
         <div class="table-holder" v-if='!pageRequest && pipelines.length'>
-          <pipelines-table-component
-            :pipelines='pipelines'
-            :svgs='svgs'>
-          </pipelines-table-component>
+          <pipelines-table-component :pipelines='pipelines'/>
         </div>
 
         <gl-pagination

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

@@ -1,27 +1,42 @@
 /* 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';
 
 ((gl) => {
   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: '<span class="fa fa-spinner fa-spin"></span>',
+        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">
           <span v-html="svg" aria-hidden="true"></span>
           <i class="fa fa-caret-down" aria-hidden="true"></i>
         </button>
@@ -101,8 +110,7 @@
           <div
             :class="dropdownClass"
             class="js-builds-dropdown-list scrollable-menu"
-            v-html="buildsOrSpinner"
-          >
+            v-html="buildsOrSpinner">
           </div>
         </ul>
       </div>

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 @@
         <a
           :class='cssClasses'
           :href='detailsPath'
-          v-html='svg + pipeline.details.status.text'
-        >
+          v-html="svg + pipeline.details.status.text">
         </a>
       </td>
     `,

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: `
       <td>
         <p class="duration" v-if='duration'>
-          <span v-html='svgs.iconTimer'></span>
+          <span v-html="iconTimerSvg"></span>
           {{duration}}
         </p>
         <p class="finished-at" v-if='timeStopped'>

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');
           <template v-for="model in pipelines"
             v-bind:model="model">
             <tr is="pipelines-table-row-component"
-              :pipeline="model"
-              :svgs="svgs"></tr>
+              :pipeline="model"></tr>
           </template>
         </tbody>
       </table>

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: `
       <tr class="commit">
-        <status-scope
-          :pipeline="pipeline"
-          :svgs="svgs"
-          :match="match">
-        </status-scope>
+        <status-scope :pipeline="pipeline"/>
 
         <pipeline-url :pipeline="pipeline"></pipeline-url>
 
@@ -208,26 +179,20 @@ require('./commit');
             :commit-url="commitUrl"
             :short-sha="commitShortSha"
             :title="commitTitle"
-            :author="commitAuthor"
-            :commit-icon-svg="svgs.commitIconSvg">
-          </commit-component>
+            :author="commitAuthor"/>
         </td>
 
         <td class="stage-cell">
           <div class="stage-container dropdown js-mini-pipeline-graph"
             v-if="pipeline.details.stages.length > 0"
             v-for="stage in pipeline.details.stages">
-            <dropdown-stage
-              :stage="stage"
-              :svgs="svgs"
-              :match="match">
-            </dropdown-stage>
+            <dropdown-stage :stage="stage"/>
           </div>
         </td>
 
-        <time-ago :pipeline="pipeline" :svgs="svgs"></time-ago>
+        <time-ago :pipeline="pipeline"/>
 
-        <pipeline-actions :pipeline="pipeline" :svgs="svgs"></pipeline-actions>
+        <pipeline-actions :pipeline="pipeline" />
       </tr>
     `,
   });