Migrate loading buttons in pipeline header

Migrates to GlButton and fixes tests to use data-testid

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

 <script>
-import { GlLoadingIcon, GlModal, GlModalDirective } from '@gitlab/ui';
+import { GlLoadingIcon, GlModal, GlModalDirective, GlButton } from '@gitlab/ui';
 import ciHeader from '~/vue_shared/components/header_ci_component.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import eventHub from '../event_hub';
 import { __ } from '~/locale';
 
@@ -13,7 +12,7 @@ export default {
     ciHeader,
     GlLoadingIcon,
     GlModal,
-    LoadingButton,
+    GlButton,
   },
   directives: {
     GlModal: GlModalDirective,
@@ -77,35 +76,43 @@ export default {
       :user="pipeline.user"
       item-name="Pipeline"
     >
-      <loading-button
+      <gl-button
         v-if="pipeline.retry_path"
         :loading="isRetrying"
         :disabled="isRetrying"
-        class="js-retry-button btn btn-inverted-secondary"
-        container-class="d-inline"
-        :label="__('Retry')"
+        data-testid="retryButton"
+        category="secondary"
+        variant="info"
         @click="retryPipeline()"
-      />
+      >
+        {{ __('Retry') }}
+      </gl-button>
 
-      <loading-button
+      <gl-button
         v-if="pipeline.cancel_path"
         :loading="isCanceling"
         :disabled="isCanceling"
-        class="js-btn-cancel-pipeline btn btn-danger"
-        container-class="d-inline"
-        :label="__('Cancel running')"
+        data-testid="cancelPipeline"
+        class="gl-ml-3"
+        category="primary"
+        variant="danger"
         @click="cancelPipeline()"
-      />
+      >
+        {{ __('Cancel running') }}
+      </gl-button>
 
-      <loading-button
+      <gl-button
         v-if="pipeline.delete_path"
         v-gl-modal="$options.DELETE_MODAL_ID"
         :loading="isDeleting"
         :disabled="isDeleting"
-        class="js-btn-delete-pipeline btn btn-danger btn-inverted"
-        container-class="d-inline"
-        :label="__('Delete')"
-      />
+        data-testid="deletePipeline"
+        class="gl-ml-3"
+        category="secondary"
+        variant="danger"
+      >
+        {{ __('Delete') }}
+      </gl-button>
     </ci-header>
 
     <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-3 gl-mb-3" />

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

@@ -105,7 +105,7 @@ export default {
       </template>
     </section>
 
-    <section v-if="$slots.default" class="header-action-buttons">
+    <section v-if="$slots.default" data-testid="headerButtons" class="gl-display-flex">
       <slot></slot>
     </section>
     <gl-deprecated-button

app/assets/stylesheets/pages/pipelines.scss

@@ -1052,13 +1052,6 @@ button.mini-pipeline-graph-dropdown-toggle {
   .text-center {
     padding-top: 12px;
   }
-
-  .header-action-buttons {
-    .btn,
-    a {
-      margin-left: 10px;
-    }
-  }
 }
 
 .pipelines-container .top-area .nav-controls > .btn:last-child {

spec/features/commits_spec.rb

@@ -112,7 +112,7 @@ RSpec.describe 'Commits' do
         describe 'Cancel build' do
           it 'cancels build', :js, :sidekiq_might_not_need_inline do
             visit pipeline_path(pipeline)
-            find('.js-btn-cancel-pipeline').click
+            find('[data-testid="cancelPipeline"]').click
             expect(page).to have_content 'canceled'
           end
         end

spec/features/projects/pipelines/pipeline_spec.rb

@@ -436,7 +436,7 @@ RSpec.describe 'Pipeline', :js do
 
       context 'when retrying' do
         before do
-          find('.js-retry-button').click
+          find('[data-testid="retryButton"]').click
         end
 
         it 'does not show a "Retry" button', :sidekiq_might_not_need_inline do
@@ -938,7 +938,7 @@ RSpec.describe 'Pipeline', :js do
 
       context 'when retrying' do
         before do
-          find('.js-retry-button').click
+          find('[data-testid="retryButton"]').click
         end
 
         it 'does not show a "Retry" button', :sidekiq_might_not_need_inline do

spec/frontend/pipelines/header_component_spec.js

@@ -85,13 +85,13 @@ describe('Pipeline details header', () => {
     });
 
     it('should call postAction when retry button action is clicked', () => {
-      wrapper.find('.js-retry-button').vm.$emit('click');
+      wrapper.find('[data-testid="retryButton"]').vm.$emit('click');
 
       expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'retry');
     });
 
     it('should call postAction when cancel button action is clicked', () => {
-      wrapper.find('.js-btn-cancel-pipeline').vm.$emit('click');
+      wrapper.find('[data-testid="cancelPipeline"]').vm.$emit('click');
 
       expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'cancel');
     });

spec/frontend/vue_shared/components/header_ci_component_spec.js

@@ -35,7 +35,7 @@ describe('Header CI Component', () => {
     vm.$destroy();
   });
 
-  const findActionButtons = () => vm.$el.querySelector('.header-action-buttons');
+  const findActionButtons = () => vm.$el.querySelector('[data-testid="headerButtons"]');
 
   describe('render', () => {
     beforeEach(() => {