diff --git a/app/assets/javascripts/environments/components/environment_actions.js b/app/assets/javascripts/environments/components/environment_actions.js
index b88b1c6556e..4bb7920bb5e 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js
+++ b/app/assets/javascripts/environments/components/environment_actions.js
@@ -45,6 +45,14 @@ export default {
         new Flash('An error occured while making the request.');
       });
     },
+
+    isActionDisabled(action) {
+      if (action.playable === undefined) {
+        return false;
+      }
+
+      return !action.playable;
+    },
   },
 
   template: `
@@ -59,18 +67,23 @@ export default {
         :disabled="isLoading">
         <span>
           <span v-html="playIconSvg"></span>
-          <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"/>
         </span>
 
       <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 btn"
-            :class="{ 'disabled': !action.playable }"
-            :disabled="!action.playable">
+            @click="onClickAction(action.play_path)"
+            :class="{ 'disabled': isActionDisabled(action) }"
+            :disabled="isActionDisabled(action)">
             ${playIconSvg}
             <span>
               {{action.name}}
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 5eebda93b39..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,8 +59,13 @@ 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">
@@ -60,9 +73,9 @@ export default {
           <button
             type="button"
             class="js-pipeline-action-link no-btn btn"
-            :class="{ 'disabled': !action.playable }"
             @click="onClickAction(action.path)"
-            :disabled="!action.playable">
+            :class="{ 'disabled': isActionDisabled(action) }"
+            :disabled="isActionDisabled(action)">
             ${playIconSvg}
             <span>{{action.name}}</span>
           </button>
diff --git a/spec/features/projects/environments/environments_spec.rb b/spec/features/projects/environments/environments_spec.rb
index 4f78105cae1..641e2cf7402 100644
--- a/spec/features/projects/environments/environments_spec.rb
+++ b/spec/features/projects/environments/environments_spec.rb
@@ -115,21 +115,6 @@ feature 'Environments page', :feature, :js do
             .not_to change { Ci::Pipeline.count }
         end
 
-        scenario 'when action is non playable', js: true do
-          given(:action) do
-            create(:ci_build, :manual, :non_playable,
-              pipeline: pipeline,
-              name: 'close_app')
-          end
-
-          it 'has disabled button to the manual action' do
-            find('.js-dropdown-play-icon-container').click
-
-            expect(page).to have_button('close_app', disabled: true)
-          end
-
-        end
-
         scenario 'does show build name and id' do
           expect(page).to have_link("#{build.name} ##{build.id}")
         end
diff --git a/spec/features/projects/pipelines/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb
index b0f6a4235e5..2272b19bc8f 100644
--- a/spec/features/projects/pipelines/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -197,24 +197,6 @@ describe 'Pipelines', :feature, :js do
         end
       end
 
-      context 'with non playable manual action' do
-        let!(:manual) do
-          create(:ci_build, :manual, :non_playable,
-            pipeline: pipeline,
-            name: 'manual build',
-            stage: 'test',
-            commands: 'test')
-        end
-
-        before { visit_project_pipelines }
-
-        it 'has disabled button to the manual action' do
-          find('.js-pipeline-dropdown-manual-actions').click
-
-          expect(page).to have_button('manual build', disabled: true)
-        end
-      end
-
       context 'for generic statuses' do
         context 'when running' do
           let!(:running) do
diff --git a/spec/javascripts/environments/environment_actions_spec.js b/spec/javascripts/environments/environment_actions_spec.js
index 13840b42bd6..6348d97b0a5 100644
--- a/spec/javascripts/environments/environment_actions_spec.js
+++ b/spec/javascripts/environments/environment_actions_spec.js
@@ -19,6 +19,11 @@ describe('Actions Component', () => {
         name: 'foo',
         play_path: '#',
       },
+      {
+        name: 'foo bar',
+        play_path: 'url',
+        playable: false,
+      },
     ];
 
     spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
@@ -49,4 +54,14 @@ describe('Actions Component', () => {
 
     expect(spy).toHaveBeenCalledWith(actionsMock[0].play_path);
   });
+
+  it('should render a disabled action when it\'s not playable', () => {
+    expect(
+      component.$el.querySelector('.dropdown-menu li:last-child button').getAttribute('disabled'),
+    ).toEqual('disabled');
+
+    expect(
+      component.$el.querySelector('.dropdown-menu li:last-child button').classList.contains('disabled'),
+    ).toEqual(true);
+  });
 });
diff --git a/spec/javascripts/vue_pipelines_index/pipelines_actions_spec.js b/spec/javascripts/vue_pipelines_index/pipelines_actions_spec.js
index dba998c7688..0910df61915 100644
--- a/spec/javascripts/vue_pipelines_index/pipelines_actions_spec.js
+++ b/spec/javascripts/vue_pipelines_index/pipelines_actions_spec.js
@@ -15,6 +15,11 @@ describe('Pipelines Actions dropdown', () => {
         name: 'stop_review',
         path: '/root/review-app/builds/1893/play',
       },
+      {
+        name: 'foo',
+        path: '#',
+        playable: false,
+      },
     ];
 
     spy = jasmine.createSpy('spy').and.returnValue(Promise.resolve());
@@ -59,4 +64,14 @@ describe('Pipelines Actions dropdown', () => {
 
     expect(component.$el.querySelector('.fa-spinner')).toEqual(null);
   });
+
+  it('should render a disabled action when it\'s not playable', () => {
+    expect(
+      component.$el.querySelector('.dropdown-menu li:last-child button').getAttribute('disabled'),
+    ).toEqual('disabled');
+
+    expect(
+      component.$el.querySelector('.dropdown-menu li:last-child button').classList.contains('disabled'),
+    ).toEqual(true);
+  });
 });