Merge branch 'ph/fixResolveThreadStyle' into 'master'

Fixes the styling of the resolve thread button

See merge request gitlab-org/gitlab!41330

app/assets/javascripts/notes/components/discussion_resolve_button.vue

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 
 export default {
   name: 'ResolveDiscussionButton',
   components: {
-    GlLoadingIcon,
+    GlButton,
   },
   props: {
     isResolving: {
@@ -21,8 +21,7 @@ export default {
 </script>
 
 <template>
-  <button ref="button" type="button" class="btn btn-default ml-sm-2" @click="$emit('onClick')">
-    <gl-loading-icon v-if="isResolving" ref="isResolvingIcon" inline />
+  <gl-button :loading="isResolving" class="ml-sm-2" @click="$emit('onClick')">
     {{ buttonTitle }}
-  </button>
+  </gl-button>
 </template>

spec/frontend/notes/components/discussion_resolve_button_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import resolveDiscussionButton from '~/notes/components/discussion_resolve_button.vue';
 
 const buttonTitle = 'Resolve discussion';
@@ -26,9 +27,9 @@ describe('resolveDiscussionButton', () => {
   });
 
   it('should emit a onClick event on button click', () => {
-    const button = wrapper.find({ ref: 'button' });
+    const button = wrapper.find(GlButton);
 
-    button.trigger('click');
+    button.vm.$emit('click');
 
     return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted()).toEqual({
@@ -38,7 +39,7 @@ describe('resolveDiscussionButton', () => {
   });
 
   it('should contain the provided button title', () => {
-    const button = wrapper.find({ ref: 'button' });
+    const button = wrapper.find(GlButton);
 
     expect(button.text()).toContain(buttonTitle);
   });
@@ -51,9 +52,9 @@ describe('resolveDiscussionButton', () => {
       },
     });
 
-    const button = wrapper.find({ ref: 'isResolvingIcon' });
+    const button = wrapper.find(GlButton);
 
-    expect(button.exists()).toEqual(true);
+    expect(button.props('loading')).toEqual(true);
   });
 
   it('should only show a loading spinner while resolving', () => {
@@ -64,10 +65,10 @@ describe('resolveDiscussionButton', () => {
       },
     });
 
-    const button = wrapper.find({ ref: 'isResolvingIcon' });
+    const button = wrapper.find(GlButton);
 
     wrapper.vm.$nextTick(() => {
-      expect(button.exists()).toEqual(false);
+      expect(button.props('loading')).toEqual(false);
     });
   });
 });