Fixes cssClass property

Improves icon class property
Removes alert from new Flash

5 files changed, 18 insertions, 10 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index d720d34123c..598e62b4816 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -82,7 +82,7 @@ const PipelineStore = require('./pipelines_store');
           })
           .catch(() => {
             this.isLoading = false;
-            new Flash('An error occurred while fetching the pipelines, please reload the page again.', 'alert');
+            new Flash('An error occurred while fetching the pipelines, please reload the page again.');
           });
       },
     },
diff --git a/app/assets/javascripts/vue_pipelines_index/components/async_button.js b/app/assets/javascripts/vue_pipelines_index/components/async_button.js
index fa5742dc179..5df50e8172e 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/async_button.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/async_button.js
@@ -36,6 +36,16 @@ export default {
     };
   },
 
+  computed: {
+    iconClass() {
+      return `fa fa-${this.icon}`;
+    },
+
+    buttonClass() {
+      return `btn has-tooltip ${this.cssClass}`;
+    },
+  },
+
   methods: {
     onClick() {
       this.isLoading = true;
@@ -55,13 +65,12 @@ export default {
     <button
       type="button"
       @click="onClick"
-      :class="cssClass"
-      class="btn btn-default has-tooltip"
+      :class="buttonClass"
       :title="title"
       :aria-label="title"
       data-placement="top"
       :disabled="isLoading">
-      <i :class="icon" aria-hidden="true"/>
+      <i :class="iconClass" aria-hidden="true"/>
       <i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading" />
     </button>
   `,
diff --git a/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js b/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
index bd0e3a123a2..c7ed7193eb8 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
@@ -33,7 +33,7 @@ export default {
       })
       .catch(() => {
         this.isLoading = false;
-        new Flash('An error occured while making the request.', 'alert');
+        new Flash('An error occured while making the request.');
       });
     },
   },
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
index 9a155b130a0..779894e78bd 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
@@ -215,17 +215,17 @@ require('./commit');
               v-if="pipeline.flags.retryable"
               :service="service"
               :endpoint="pipeline.retry_path"
-              cssClass="btn-default btn-retry"
+              css-class="btn-default btn-retry"
               title="Retry"
-              icon="fa fa-repeat" />
+              icon="repeat" />
 
             <async-button-component
               v-if="pipeline.flags.cancelable"
               :service="service"
               :endpoint="pipeline.cancel_path"
-              cssClass="btn-remove"
+              css-class="btn-remove"
               title="Cancel"
-              icon="fa fa-remove" />
+              icon="remove" />
           </div>
         </td>
       </tr>
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 9405845c35a..33b38ca6923 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -917,7 +917,6 @@
   }
 }
 
-
 /**
  * Play button with icon in dropdowns
  */