1 files changed, 19 insertions, 4 deletions
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 4bb2b048884..12d80768646 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
@@ -38,6 +38,14 @@ export default {
         new Flash('An error occured while making the request.');
       });
     },
+
+    isActionDisabled(action) {
+      if (action.playable === undefined) {
+        return false;
+      }
+
+      return !action.playable;
+    },
   },
 
   template: `
@@ -51,16 +59,23 @@ export default {
         aria-label="Manual job"
         :disabled="isLoading">
         ${playIconSvg}
-        <i class="fa fa-caret-down" aria-hidden="true"></i>
-        <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+        <i
+          class="fa fa-caret-down"
+          aria-hidden="true" />
+        <i
+          v-if="isLoading"
+          class="fa fa-spinner fa-spin"
+          aria-hidden="true" />
       </button>
 
       <ul class="dropdown-menu dropdown-menu-align-right">
         <li v-for="action in actions">
           <button
             type="button"
-            class="js-pipeline-action-link no-btn"
-            @click="onClickAction(action.path)">
+            class="js-pipeline-action-link no-btn btn"
+            @click="onClickAction(action.path)"
+            :class="{ 'disabled': isActionDisabled(action) }"
+            :disabled="isActionDisabled(action)">
             ${playIconSvg}
             <span>{{action.name}}</span>
           </button>