Buttons will be disabled when playable key is false

app/assets/javascripts/environments/components/environment_actions.js

@@ -50,6 +50,7 @@ export default {
   template: `
     <div class="btn-group" role="group">
       <button
+        type="button"
         class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip"
         data-container="body"
         data-toggle="dropdown"
@@ -65,8 +66,11 @@ export default {
       <ul class="dropdown-menu dropdown-menu-align-right">
         <li v-for="action in actions">
           <button
+            type="button"
             @click="onClickAction(action.play_path)"
-            class="js-manual-action-link no-btn">
+            class="js-manual-action-link no-btn btn"
+            :class="{ 'disabled': !actions.playable }"
+            :disabled="!action.playable">
             ${playIconSvg}
             <span>
               {{action.name}}

app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js

@@ -49,7 +49,7 @@ export default {
         data-toggle="dropdown"
         data-placement="top"
         aria-label="Manual job"
-        :disabled="isLoading">
+        :disabled="isDisabled">
         ${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>
@@ -59,8 +59,10 @@ export default {
         <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"
+            :class="{ 'disabled': !actions.playable }"
+            @click="onClickAction(action.path)"
+            :disabled="!actions.playable">
             ${playIconSvg}
             <span>{{action.name}}</span>
           </button>

changelogs/unreleased/tc-fix-unplayable-build-action-404.yml

+---
+title: Disable pipeline
+merge_request: 10052
+author: