add borderless svgs

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

@@ -16,9 +16,7 @@
         this.$http.get(this.endpoint)
           .then((response) => {
             this.request = true;
-            setTimeout(() => {
-              this.builds = JSON.parse(response.body).html;
-            }, 100);
+            this.builds = JSON.parse(response.body).html;
           }, () => new Flash(
             'Something went wrong on our end.',
           ));
@@ -30,8 +28,7 @@
     },
     computed: {
       buildsOrSpinner() {
-        if (this.request) return this.builds;
-        return this.spinner;
+        return this.request ? this.builds : this.spinner;
       },
       dropdownClass() {
         if (this.request) return 'js-builds-dropdown-container';
@@ -50,7 +47,9 @@
         return `has-tooltip ci-status-icon-${this.stage.status.group}`;
       },
       svg() {
-        return this.svgs[this.match(this.stage.status.icon)];
+        const icon = this.stage.status.icon;
+        icon.replace('icon', 'stageIcon');
+        return this.svgs[this.match(icon)];
       },
       spanClass() {
         return `ci-status-icon ci-status-icon-${this.stage.status.group}`;
@@ -58,10 +57,10 @@
     },
     template: `
       <div class="stage-container mini-pipeline-graph">
+
         <div class="dropdown inline build-content">
           <button
             @click='fetchBuilds'
-            @blur='clearState'
             class="has-tooltip builds-dropdown js-builds-dropdown-button"
             data-placement="top"
             :title='stageTitle'
@@ -79,6 +78,7 @@
               </span>
             </span>
           </button>
+
           <div class="js-builds-dropdown-container">
             <div class="dropdown-menu grouped-pipeline-dropdown">
               <div class="arrow-up"></div>
@@ -90,6 +90,7 @@
             </div>
           </div>
         </div>
+
       </div>
     `,
   });

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

@@ -49,6 +49,14 @@
         "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"),
       } }