test(pipeline): add feature test coverage for deletion

app/assets/javascripts/pipelines/components/header_component.vue

@@ -80,7 +80,6 @@ export default {
           label: __('Retry'),
           path: this.pipeline.retry_path,
           cssClass: 'js-retry-button btn btn-inverted-secondary',
-          type: 'button',
           isLoading: false,
         });
       }
@@ -90,7 +89,6 @@ export default {
           label: __('Cancel running'),
           path: this.pipeline.cancel_path,
           cssClass: 'js-btn-cancel-pipeline btn btn-danger',
-          type: 'button',
           isLoading: false,
         });
       }
@@ -101,7 +99,6 @@ export default {
           path: this.pipeline.delete_path,
           modal: DELETE_MODAL_ID,
           cssClass: 'js-btn-delete-pipeline btn btn-danger btn-inverted',
-          type: 'button',
           isLoading: false,
         });
       }

app/assets/javascripts/vue_shared/components/header_ci_component.vue

@@ -118,7 +118,6 @@ export default {
     <section v-if="actions.length" class="header-action-buttons">
       <template v-for="(action, i) in actions">
         <loading-button
-          v-if="action.type === 'button'"
           :key="i"
           :loading="action.isLoading"
           :disabled="action.isLoading"

app/serializers/pipeline_entity.rb

@@ -29,7 +29,6 @@ class PipelineEntity < Grape::Entity
     expose :has_yaml_errors?, as: :yaml_errors
     expose :can_retry?, as: :retryable
     expose :can_cancel?, as: :cancelable
-    expose :can_delete?, as: :deleteable
     expose :failure_reason?, as: :failure_reason
     expose :detached_merge_request_pipeline?, as: :detached_merge_request_pipeline
     expose :merge_request_pipeline?, as: :merge_request_pipeline

changelogs/unreleased/feat-pipeline-ui-deletion.yml

 ---
-title: Add pipeline deletion button to piepline details page
+title: Add pipeline deletion button to pipeline details page
 merge_request: 21365
 author: Fabio Huser
 type: added

spec/features/projects/pipelines/pipeline_spec.rb

@@ -59,7 +59,8 @@ describe 'Pipeline', :js do
   describe 'GET /:project/pipelines/:id' do
     include_context 'pipeline builds'
 
-    let(:project) { create(:project, :repository) }
+    let(:group) { create(:group) }
+    let(:project) { create(:project, :repository, group: group) }
     let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master', sha: project.commit.id, user: user) }
 
     subject(:visit_pipeline) { visit project_pipeline_path(project, pipeline) }
@@ -329,6 +330,32 @@ describe 'Pipeline', :js do
       end
     end
 
+    context 'deleting pipeline' do
+      context 'when user can not delete' do
+        before do
+          visit_pipeline
+        end
+
+        it { expect(page).not_to have_button('Delete') }
+      end
+
+      context 'when deleting' do
+        before do
+          group.add_owner(user)
+
+          visit_pipeline
+
+          click_button 'Delete'
+          click_button 'Delete pipeline'
+        end
+
+        it 'redirects to pipeline overview page', :sidekiq_might_not_need_inline do
+          expect(page).to have_content('The pipeline has been deleted')
+          expect(current_path).to eq(project_pipelines_path(project))
+        end
+      end
+    end
+
     context 'when pipeline ref does not exist in repository anymore' do
       let(:pipeline) do
         create(:ci_empty_pipeline, project: project,

spec/javascripts/vue_shared/components/header_ci_component_spec.js

@@ -31,7 +31,6 @@ describe('Header CI Component', () => {
         {
           label: 'Retry',
           path: 'path',
-          type: 'button',
           cssClass: 'btn',
           isLoading: false,
         },

spec/serializers/pipeline_entity_spec.rb

@@ -123,7 +123,7 @@ describe PipelineEntity do
       end
     end
 
-    context 'when pipeline is deleteable' do
+    context 'delete path' do
       context 'user has ability to delete pipeline' do
         let(:project) { create(:project, namespace: user.namespace) }
         let(:pipeline) { create(:ci_pipeline, project: project) }