remove all files related to Vue SVG rendering - use dynamic svg loading

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

-//= require vue
-/* global Vue, gl */
-/* eslint-disable no-param-reassign */
-
-((gl) => {
-  gl.VueRunningIcon = Vue.extend({
-    template: `
-      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M7,3 C9.209139,3 11,4.790861 11,7 C11,9.209139 9.209139,11 7,11 C5.65802855,11 4.47040669,10.3391508 3.74481446,9.32513253 L7,7 L7,3 L7,3 Z"/></g></svg>
-    `,
-  });
-
-  gl.VuePendingIcon = Vue.extend({
-    template: `
-      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M4.69999981,5.30065012 C4.69999981,5.13460564 4.83842754,5 5.00354719,5 L5.89645243,5 C6.06409702,5 6.19999981,5.13308716 6.19999981,5.30065012 L6.19999981,8.69934988 C6.19999981,8.86539436 6.06157207,9 5.89645243,9 L5.00354719,9 C4.8359026,9 4.69999981,8.86691284 4.69999981,8.69934988 L4.69999981,5.30065012 Z M7.69999981,5.30065012 C7.69999981,5.13460564 7.83842754,5 8.00354719,5 L8.89645243,5 C9.06409702,5 9.19999981,5.13308716 9.19999981,5.30065012 L9.19999981,8.69934988 C9.19999981,8.86539436 9.06157207,9 8.89645243,9 L8.00354719,9 C7.8359026,9 7.69999981,8.86691284 7.69999981,8.69934988 L7.69999981,5.30065012 Z"/></g></svg>
-    `,
-  });
-
-  gl.VueSuccessIcon = Vue.extend({
-    template: `
-    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M7.29166667,7.875 L5.54840803,7.875 C5.38293028,7.875 5.25,8.00712771 5.25,8.17011551 L5.25,9.03821782 C5.25,9.19875081 5.38360183,9.33333333 5.54840803,9.33333333 L8.24853534,9.33333333 C8.52035522,9.33333333 8.75,9.11228506 8.75,8.83960819 L8.75,8.46475969 L8.75,4.07392947 C8.75,3.92144267 8.61787229,3.79166667 8.45488449,3.79166667 L7.58678218,3.79166667 C7.42624919,3.79166667 7.29166667,3.91804003 7.29166667,4.07392947 L7.29166667,7.875 Z" transform="rotate(45 7 6.563)"/></g></svg>
-    `,
-  });
-
-  gl.VueFailedIcon = Vue.extend({
-    template: `
-      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M7.72916667,6.27083333 L7.72916667,4.28939247 C7.72916667,4.12531853 7.59703895,4 7.43405116,4 L6.56594884,4 C6.40541585,4 6.27083333,4.12956542 6.27083333,4.28939247 L6.27083333,6.27083333 L4.28939247,6.27083333 C4.12531853,6.27083333 4,6.40296105 4,6.56594884 L4,7.43405116 C4,7.59458415 4.12956542,7.72916667 4.28939247,7.72916667 L6.27083333,7.72916667 L6.27083333,9.71060753 C6.27083333,9.87468147 6.40296105,10 6.56594884,10 L7.43405116,10 C7.59458415,10 7.72916667,9.87043458 7.72916667,9.71060753 L7.72916667,7.72916667 L9.71060753,7.72916667 C9.87468147,7.72916667 10,7.59703895 10,7.43405116 L10,6.56594884 C10,6.40541585 9.87043458,6.27083333 9.71060753,6.27083333 L7.72916667,6.27083333 Z" transform="rotate(-45 7 7)"/></g></svg>
-    `,
-  });
-
-  gl.VueCreatedIcon = Vue.extend({
-    template: `
-      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" enable-background="new 0 0 14 14"><path d="M12.5,7 C12.5,4 10,1.5 7,1.5 C4,1.5 1.5,4 1.5,7 C1.5,10 4,12.5 7,12.5 C10,12.5 12.5,10 12.5,7 L12.5,7 Z M0,7 C0,3.1 3.1,0 7,0 C10.9,0 14,3.1 14,7 C14,10.9 10.9,14 7,14 C3.1,14 0,10.9 0,7 L0,7 Z" /><circle cx="7" cy="7" r="3.25"/></svg>
-    `,
-  });
-
-  gl.VueCanceledIcon = Vue.extend({
-    template: `
-      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><rect width="8" height="2" x="3" y="6" transform="rotate(45 7 7)" rx=".5"/></g></svg>
-    `,
-  });
-
-  gl.VueSkippedIcon = Vue.extend({
-    template: `
-      <svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M10 17.857c4.286 0 7.857-3.571 7.857-7.857S14.286 2.143 10 2.143 2.143 5.714 2.143 10 5.714 17.857 10 17.857M10 0c5.571 0 10 4.429 10 10s-4.429 10-10 10S0 15.571 0 10 4.429 0 10 0"/><path d="M10.986 11l-1.293 1.293a1 1 0 0 0 1.414 1.414l2.644-2.644a1.505 1.505 0 0 0 0-2.126l-2.644-2.644a1 1 0 0 0-1.414 1.414L10.986 9H6.4a1 1 0 0 0 0 2h4.586z"/></g></svg>
-    `,
-  });
-
-  gl.VueWarningIcon = Vue.extend({
-    template: `
-      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M6,3.49769878 C6,3.22282734 6.21403503,3 6.50468445,3 L7.49531555,3 C7.77404508,3 8,3.21484375 8,3.49769878 L8,7.50230122 C8,7.77717266 7.78596497,8 7.49531555,8 L6.50468445,8 C6.22595492,8 6,7.78515625 6,7.50230122 L6,3.49769878 Z M6,9.50468445 C6,9.22595492 6.21403503,9 6.50468445,9 L7.49531555,9 C7.77404508,9 8,9.21403503 8,9.50468445 L8,10.4953156 C8,10.7740451 7.78596497,11 7.49531555,11 L6.50468445,11 C6.22595492,11 6,10.785965 6,10.4953156 L6,9.50468445 Z"/></g></svg>
-    `,
-  });
-})(window.gl || (window.gl = {}));

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

@@ -6,6 +6,7 @@
 //= require vue-resource
 
 //= require ./object_assign.js.es6
+//= require ./status.js.es6
 //= require ./store.js.es6
 //= require ./pipeline_url.js.es6
 //= require ./pipeline_head.js.es6

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

@@ -3,16 +3,6 @@
 
 ((gl) => {
   gl.VueStage = Vue.extend({
-    components: {
-      'running-icon': gl.VueRunningIcon,
-      'pending-icon': gl.VuePendingIcon,
-      'failed-icon': gl.VueFailedIcon,
-      'success-icon': gl.VueSuccessIcon,
-      'created-icon': gl.VueCreatedIcon,
-      'canceled-icon': gl.VueCanceledIcon,
-      'warning-icon': gl.VueWarningIcon,
-      'skipped-icon': gl.VueSkippedIcon,
-    },
     props: ['stage'],
     computed: {
       buildStatus() {
@@ -21,21 +11,20 @@
       tooltip() {
         return `has-tooltip ci-status-icon-${this.stage.status}`;
       },
+      svg() {
+        return document
+          .querySelector(
+            `.${this.stage.status}-icon-svg.hidden`,
+          ).innerHTML;
+      },
     },
     template: `
       <a
         :class='tooltip'
         :title='buildStatus'
         :href='stage.url'
+        v-html='svg'
       >
-        <running-icon v-if='stage.status === "running"'></running-icon>
-        <success-icon v-if='stage.status === "success"'></success-icon>
-        <failed-icon v-if='stage.status === "failed"'></failed-icon>
-        <pending-icon v-if='stage.status === "pending"'></pending-icon>
-        <created-icon v-if='stage.status === "created"'></created-icon>
-        <canceled-icon v-if='stage.status === "canceled"'></canceled-icon>
-        <warning-icon v-if='stage.status === "warning"'></warning-icon>
-        <skipped-icon v-if='stage.status === "skipped"'></skipped-icon>
       </a>
     `,
   });

app/assets/javascripts/vue_pipelines_status/pending.js.es6 → app/assets/javascripts/vue_pipelines_index/status.js.es6

@@ -2,19 +2,30 @@
 /* eslint-disable no-param-reassign */
 
 ((gl) => {
-  gl.VuePendingScope = Vue.extend({
-    components: {
-      'vue-pending-icon': gl.VuePendingIcon,
-    },
+  gl.VueStatusScope = Vue.extend({
     props: [
       'pipeline',
     ],
+    computed: {
+      cssClasses() {
+        const cssObject = {};
+        cssObject['ci-status'] = true;
+        cssObject[`ci-${this.pipeline.details.status}`] = true;
+        return cssObject;
+      },
+      svg() {
+        return document
+          .querySelector(
+            `.${this.pipeline.details.status}-icon-svg.hidden`,
+          ).innerHTML;
+      },
+    },
     template: `
       <td class="commit-link">
         <a :href='pipeline.url'>
-          <span class="ci-status ci-pending">
-            <vue-pending-icon></vue-pending-icon>
-            &nbsp;pending
+          <span :class='cssClasses'>
+            <span v-html='svg'></span>
+            <span>&nbsp;{{pipeline.details.status}}</span>
           </span>
         </a>
       </td>

app/assets/javascripts/vue_pipelines_status/canceled.js.es6

-/* global Vue, gl */
-/* eslint-disable no-param-reassign */
-
-((gl) => {
-  gl.VueCanceledScope = Vue.extend({
-    components: {
-      'vue-canceled-icon': gl.VueCanceledIcon,
-    },
-    props: [
-      'pipeline',
-    ],
-    template: `
-      <td class="commit-link">
-        <a :href='pipeline.url'>
-          <span class="ci-status ci-canceled">
-            <vue-canceled-icon></vue-canceled-icon>
-            &nbsp;canceled
-          </span>
-        </a>
-      </td>
-    `,
-  });
-})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_status/created.js.es6

-/* global Vue, gl */
-/* eslint-disable no-param-reassign */
-
-((gl) => {
-  gl.VueCreatedScope = Vue.extend({
-    components: {
-      'vue-created-icon': gl.VueCreatedIcon,
-    },
-    props: [
-      'pipeline',
-    ],
-    template: `
-      <td class="commit-link">
-        <a :href='pipeline.url'>
-          <span class="ci-status ci-created">
-            <vue-created-icon></vue-created-icon>
-            &nbsp;failed
-          </span>
-        </a>
-      </td>
-    `,
-  });
-})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_status/failed.js.es6

-/* global Vue, gl */
-/* eslint-disable no-param-reassign */
-
-((gl) => {
-  gl.VueFailedScope = Vue.extend({
-    components: {
-      'vue-failed-icon': gl.VueFailedIcon,
-    },
-    props: [
-      'pipeline',
-    ],
-    template: `
-      <td class="commit-link">
-        <a :href='pipeline.url'>
-          <span class="ci-status ci-failed">
-            <vue-failed-icon></vue-failed-icon>
-            &nbsp;failed
-          </span>
-        </a>
-      </td>
-    `,
-  });
-})(window.gl || (window.gl = {}));

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

-//= require ./pending.js.es6
-//= require ./failed.js.es6
-//= require ./running.js.es6
-//= require ./canceled.js.es6
-//= require ./status.js.es6
-//= require ./warning.js.es6
-//= require ./skipped.js.es6

app/assets/javascripts/vue_pipelines_status/running.js.es6

-/* global Vue, gl */
-/* eslint-disable no-param-reassign */
-
-((gl) => {
-  gl.VueRunningScope = Vue.extend({
-    components: {
-      'vue-running-icon': gl.VueRunningIcon,
-    },
-    props: [
-      'pipeline',
-    ],
-    template: `
-      <td class="commit-link">
-        <a :href='pipeline.url'>
-          <span class="ci-status ci-running">
-            <vue-running-icon></vue-running-icon>
-            &nbsp;running
-          </span>
-        </a>
-      </td>
-    `,
-  });
-})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_status/skipped.js.es6

-/* global Vue, gl */
-/* eslint-disable no-param-reassign */
-
-((gl) => {
-  gl.VueSkippedScope = Vue.extend({
-    components: {
-      'vue-skipped-icon': gl.VueSkippedIcon,
-    },
-    props: [
-      'pipeline',
-    ],
-    template: `
-      <td class="commit-link">
-        <a :href='pipeline.url'>
-          <span class="ci-status ci-skipped">
-            <vue-skipped-icon></vue-skipped-icon>
-            &nbsp;skipped
-          </span>
-        </a>
-      </td>
-    `,
-  });
-})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_status/status.js.es6

-/* global Vue, gl */
-/* eslint-disable no-param-reassign */
-
-((gl) => {
-  gl.VueStatusScope = Vue.extend({
-    components: {
-      'vue-running-scope': gl.VueRunningScope,
-      'vue-pending-scope': gl.VuePendingScope,
-      'vue-failed-scope': gl.VueFailedScope,
-      'vue-created-scope': gl.VueCreatedScope,
-      'vue-canceled-scope': gl.VueCanceledScope,
-      'vue-unstable-scope': gl.VueUnstableScope,
-    },
-    props: [
-      'pipeline',
-    ],
-    template: `
-      <td class="commit-link">
-        <vue-running-scope
-          v-if="pipeline.details.status === 'running'"
-          :pipeline='pipeline'
-        >
-        </vue-running-scope>
-        <vue-pending-scope
-          v-if="pipeline.details.status === 'pending'"
-          :pipeline='pipeline'
-        >
-        </vue-pending-scope>
-        <vue-failed-scope
-          v-if="pipeline.details.status === 'failed'"
-          :pipeline='pipeline'
-        >
-        </vue-failed-scope>
-        <vue-created-scope
-          v-if="pipeline.details.status === 'created'"
-          :pipeline='pipeline'
-        >
-        </vue-created-scope>
-        <vue-canceled-scope
-          v-if="pipeline.details.status === 'canceled'"
-          :pipeline='pipeline'
-        >
-        </vue-canceled-scope>
-        <vue-unstable-scope
-          v-if="pipeline.details.status === 'unstable'"
-          :pipeline='pipeline'
-        >
-        </vue-unstable-scope>
-      </td>
-    `,
-  });
-})(window.gl || (window.gl = {}));

app/assets/javascripts/vue_pipelines_status/warning.js.es6

-/* global Vue, gl */
-/* eslint-disable no-param-reassign */
-
-((gl) => {
-  gl.VueWarningScope = Vue.extend({
-    components: {
-      'vue-warning-icon': gl.VueWarningIcon,
-    },
-    props: [
-      'pipeline',
-    ],
-    template: `
-      <td class="commit-link">
-        <a :href='pipeline.url'>
-          <span class="ci-status ci-warning">
-            <vue-warning-icon></vue-warning-icon>
-            &nbsp;warning
-          </span>
-        </a>
-      </td>
-    `,
-  });
-})(window.gl || (window.gl = {}));

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

@@ -42,9 +42,23 @@
     - else
       .commit-icon-svg.hidden
         = custom_icon("icon_commit")
+      .canceled-icon-svg.hidden
+        = custom_icon("icon_status_canceled")
+      .running-icon-svg.hidden
+        = custom_icon("icon_status_running")
+      .skipped-icon-svg.hidden
+        = custom_icon("icon_status_skipped")
+      .created-icon-svg.hidden
+        = custom_icon("icon_status_created")
+      .pending-icon-svg.hidden
+        = custom_icon("icon_status_pending")
+      .success-icon-svg.hidden
+        = custom_icon("icon_status_success")
+      .failed-icon-svg.hidden
+        = custom_icon("icon_status_failed")
+      .warning-icon-svg.hidden
+        = custom_icon("icon_status_warning")
       .vue-pipelines-index
 
-= page_specific_javascript_tag('vue_icons/index.js')
 = page_specific_javascript_tag('vue_pagination/index.js')
-= page_specific_javascript_tag('vue_pipelines_status/index.js')
 = page_specific_javascript_tag('vue_pipelines_index/index.js')

config/application.rb

@@ -101,9 +101,7 @@ module Gitlab
     config.assets.precompile << "lib/*.js"
     config.assets.precompile << "u2f.js"
     config.assets.precompile << "vue_pipelines_index/index.js"
-    config.assets.precompile << "vue_pipelines_status/index.js"
     config.assets.precompile << "vue_pagination/index.js"
-    config.assets.precompile << "vue_icons/index.js"
 
     # Version of your assets, change this if you want to expire all your assets
     config.assets.version = '1.0'