Merge branch...

Merge branch '229296-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-app-assets-javascripts' into 'master'

Migrate to GitLab UI Button in mr_widget_failed_to_merge

Closes #229296

See merge request gitlab-org/gitlab!40170

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.vue

 <script>
+import { GlButton } from '@gitlab/ui';
 import { n__ } from '~/locale';
 import { stripHtml } from '~/lib/utils/text_utility';
 import statusIcon from '../mr_widget_status_icon.vue';
@@ -8,6 +9,7 @@ export default {
   name: 'MRWidgetFailedToMerge',
 
   components: {
+    GlButton,
     statusIcon,
   },
 
@@ -84,14 +86,14 @@ export default {
           <span v-else> {{ s__('mrWidget|Merge failed.') }} </span>
           <span :class="{ 'has-custom-error': mr.mergeError }"> {{ timerText }} </span>
         </span>
-        <button
-          class="btn btn-default btn-sm js-refresh-button"
+        <gl-button
+          size="small"
+          data-testid="merge-request-failed-refresh-button"
           data-qa-selector="merge_request_error_content"
-          type="button"
           @click="refresh"
         >
           {{ s__('mrWidget|Refresh now') }}
-        </button>
+        </gl-button>
       </div>
     </template>
   </div>

changelogs/unreleased/229296-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-app-assets-javas.yml

+---
+title: Migrate Bootstrap button to GitLab UI GlButton in mr_widget_failed_to_merge
+merge_request: 40170
+author:
+type: other

spec/frontend/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js

@@ -125,7 +125,11 @@ describe('MRWidgetFailedToMerge', () => {
     });
 
     it('renders refresh button', () => {
-      expect(vm.$el.querySelector('.js-refresh-button').textContent.trim()).toEqual('Refresh now');
+      expect(
+        vm.$el
+          .querySelector('[data-testid="merge-request-failed-refresh-button"]')
+          .textContent.trim(),
+      ).toEqual('Refresh now');
     });
 
     it('renders remaining time', () => {